Runway Gen4 Web App

A web application for generating videos using Runway's Gen4 API. Features a clean interface with image upload, prompt input, and real-time video generation with progress tracking.

Features

• 🎥 Video Generation: Convert images to videos using Runway Gen4 API
• 🖼️ Image Upload: Drag & drop or click to upload images (auto-resizes and compresses)
• 🎨 Custom UI: Orange-themed interface with dark/light mode toggle
• 📱 Responsive Design: Works on desktop, tablet, and mobile devices
• ⚡ Real-time Progress: Live progress updates during video generation
• 🔄 Async Processing: Non-blocking video generation with status polling
• 🎛️ API Options: Configurable duration, aspect ratio, and seed settings

Quick Start

Prerequisites

• PHP 7.4+ with cURL extension
• Web server (Apache/Nginx) or MAMP/XAMPP
• Runway API key from RunwayML

Installation

1. Clone the repository

   git clone git@bitbucket.org:zlalani/runway-video.git
   cd runway-video
   

2. Set up environment variables

   cp backend/.env.example backend/.env
   

   Edit backend/.env and add your Runway API key:

   RUNWAY_API_KEY=your_runway_api_key_here
   

3. Configure your web server

   Option A: MAMP/XAMPP

   • Set document root to the project directory
   • Access via: http://localhost:8888/public/ (or your MAMP port)

   Option B: Apache Virtual Host

   <VirtualHost *:80>
       DocumentRoot "/path/to/runway-video"
       ServerName runway-video.local
   </VirtualHost>
   

   Option C: PHP Built-in Server

   cd runway-video
   php -S localhost:8000
   # Access via: http://localhost:8000/public/
   

4. Verify installation

   • Navigate to /public/backend/test_config.php to verify configuration
   • Should return JSON with API key status

Usage

1. Access the application via your configured web server
2. Upload an image by dragging and dropping or clicking the upload zone
   • Supports: PNG, JPEG, WebP
   • Images are automatically resized and compressed for optimal API usage
3. Enter a video prompt describing the motion/animation you want
4. Configure options (optional):
   • Video duration (5-10 seconds)
   • Aspect ratio (various formats supported)
   • Seed for reproducible results
5. Click "Generate Video" and wait for processing
6. Download or generate another video once completed

Troubleshooting

Common Issues

Button won't click / stays disabled:

• Ensure both image and prompt are provided
• Check browser console for JavaScript errors
• Verify backend files are accessible

403 Forbidden errors:

• Check file permissions (755 for directories, 644 for files)
• Ensure backend files are in accessible location
• Verify web server configuration

API errors:

• Verify Runway API key in .env file
• Check API quota/billing status at RunwayML
• Review error logs in browser console

Slow generation:

• Large images are automatically compressed
• Generation time depends on Runway's queue
• Typical processing: 30 seconds to 2 minutes

Debug Tools

• Test Config: Visit /public/backend/test_config.php
• Browser Console: Check for JavaScript errors (F12)
• Network Tab: Monitor API requests and responses

Technologies Used

• Frontend: HTML5, CSS3, JavaScript (ES6+)
• Styling: Tailwind CSS (local build), Custom CSS
• Backend: PHP 7.4+
• API: Runway Gen4 Image-to-Video API
• Icons: Font Awesome

API Options

• Duration: 5-10 seconds
• Aspect Ratios:
  • 1280:720 (Landscape 16:9)
  • 720:1280 (Portrait 9:16)
  • 1104:832 (Landscape 4:3)
  • 832:1104 (Portrait 3:4)
  • 960:960 (Square 1:1)
  • 1584:672 (Ultrawide)
• Seed: Optional random seed for reproducible results

Project Structure

runway-video/
├── backend/
│   ├── api.php              # Main API endpoint
│   ├── check_status.php     # Status polling endpoint
│   └── config.php           # Configuration & CORS
├── public/
│   ├── css/
│   │   ├── style.css        # Custom styles & dark mode
│   │   └── tailwind-build.css # Tailwind CSS (production)
│   ├── js/
│   │   └── script.js        # Main application logic
│   └── index.html           # Main HTML file
├── src/
│   └── input.css            # Tailwind source file
├── .env                     # Environment variables (not included)
├── .htaccess                # Apache configuration
├── package.json             # Node.js dependencies
├── tailwind.config.js       # Tailwind configuration
└── README.md                # This file

Security Features

• Input validation and sanitization
• CSRF protection via proper headers
• File type validation for uploads
• Environment variable protection
• Error logging without sensitive data exposure

Browser Support

• Chrome 90+
• Firefox 88+
• Safari 14+
• Edge 90+

License

MIT License - See LICENSE file for details

Support

For issues related to:

• Runway API: Check Runway Documentation
• Application bugs: Create an issue in this repository