# 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