Spaces:
Sleeping
Sleeping
| # Video Genesis Studio | |
| A modern, beautiful frontend for automatic AI video generation with dual provider support (Kling AI & Replicate). | |
| ## Features | |
| - **Dual Provider Support**: Choose between Kling AI (Veo 3.1) and Replicate for video generation | |
| - **Automatic Script Segmentation**: GPT-4o analyzes your script and creates optimal video segments | |
| - **Beautiful UI**: Modern, distinctive design with ocean-dark theme | |
| - **Real-time Progress**: Watch your videos generate with live status updates | |
| - **Download & Preview**: Preview generated videos and download them individually or all at once | |
| ## Getting Started | |
| ### Prerequisites | |
| - Node.js 18+ | |
| - Python backend running on port 4000 | |
| ### Installation | |
| ```bash | |
| # Navigate to frontend directory | |
| cd frontend | |
| # Install dependencies | |
| npm install | |
| # Start development server | |
| npm run dev | |
| ``` | |
| The frontend will be available at `http://localhost:3000`. | |
| ### Environment Variables | |
| Create a `.env.local` file in the frontend directory: | |
| ```env | |
| VITE_API_BASE_URL=http://localhost:4000 | |
| ``` | |
| ## Architecture | |
| ``` | |
| frontend/ | |
| ├── src/ | |
| │ ├── components/ # React components | |
| │ │ ├── Icons.tsx # SVG icons | |
| │ │ ├── ProviderSelect.tsx # Provider selection screen | |
| │ │ ├── GenerationForm.tsx # Video generation form | |
| │ │ ├── GenerationProgress.tsx # Progress display | |
| │ │ ├── GenerationComplete.tsx # Results screen | |
| │ │ └── ErrorDisplay.tsx # Error handling | |
| │ ├── context/ # React context | |
| │ │ └── GenerationContext.tsx | |
| │ ├── types/ # TypeScript types | |
| │ ├── utils/ # Utilities & API client | |
| │ │ └── api.ts | |
| │ ├── App.tsx # Main application | |
| │ ├── main.tsx # Entry point | |
| │ └── index.css # Tailwind styles | |
| ├── public/ # Static assets | |
| ├── package.json | |
| ├── tailwind.config.js | |
| └── vite.config.ts | |
| ``` | |
| ## Provider Flows | |
| ### Kling AI (Recommended) | |
| 1. Upload character reference image | |
| 2. Enter your full script | |
| 3. Configure generation settings (voice, camera, style) | |
| 4. GPT-4o analyzes and segments your script | |
| 5. Videos are generated segment by segment | |
| 6. Download all segments when complete | |
| ### Replicate | |
| 1. Enter your prompt | |
| 2. Select from available models | |
| 3. Configure aspect ratio and duration | |
| 4. Video is generated via Replicate API | |
| 5. Download when complete | |
| ## Design System | |
| The UI uses a custom design system with: | |
| - **Colors**: Ocean-inspired dark theme with coral and electric accent colors | |
| - **Typography**: Clash Display (headings) + Satoshi (body) | |
| - **Components**: Glass morphism effects, smooth animations via Framer Motion | |
| - **Layout**: Responsive grid with fluid animations | |
| ## Development | |
| ```bash | |
| # Development server with hot reload | |
| npm run dev | |
| # Build for production | |
| npm run build | |
| # Preview production build | |
| npm run preview | |
| ``` | |
| ## Tech Stack | |
| - **React 19** - UI framework | |
| - **TypeScript** - Type safety | |
| - **Vite** - Build tool | |
| - **Tailwind CSS** - Styling | |
| - **Framer Motion** - Animations | |
| ## API Integration | |
| The frontend communicates with the Python backend at `/api/*`: | |
| - `POST /api/generate-prompts` - Generate video prompts with GPT-4o | |
| - `POST /api/veo/generate` - Start Kling video generation | |
| - `GET /api/veo/events/:taskId` - SSE for generation progress | |
| - `POST /api/replicate/generate` - Start Replicate generation | |
| - `GET /api/replicate/status/:id` - Check Replicate status | |
| - `GET /health` - Backend health check | |