frontend/README.md

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

# 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:

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

# 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