first push

.dockerignore

@@ -0,0 +1,54 @@
+# Python
+__pycache__/
+*.py[cod]
+*$py.class
+*.so
+.Python
+venv/
+env/
+ENV/
+.venv
+
+# Frontend
+frontend/node_modules/
+frontend/dist/
+frontend/.vite/
+
+# IDE
+.vscode/
+.idea/
+*.swp
+*.swo
+*~
+
+# Environment
+.env
+.env.local
+.env.*.local
+
+# Storage
+storage/images/*
+storage/videos/*
+!storage/images/.gitkeep
+!storage/videos/.gitkeep
+
+# Git
+.git/
+.gitignore
+
+# Documentation
+*.md
+!README.md
+
+# Docker
+Dockerfile
+docker-compose.yml
+.dockerignore
+
+# Output
+output_videos/
+
+# OS
+.DS_Store
+Thumbs.db
+

.env.example

@@ -0,0 +1,26 @@
+# Environment Configuration
+# Copy this file to .env.local for local development or set these in your deployment platform
+
+# Server Configuration
+SERVER_PORT=4000
+PUBLIC_URL=http://localhost:4000
+ENVIRONMENT=production
+
+# API Keys (Required)
+# Get your KIE API key at: https://kie.ai/api-key
+KIE_API_KEY=your_kie_api_key_here
+
+# Optional API Keys
+# Get your Gemini API key at: https://makersuite.google.com/app/apikey
+VITE_GEMINI_API_KEY=your_gemini_api_key_here
+
+# Get your OpenAI API key at: https://platform.openai.com/api-keys
+OPENAI_API_KEY=your_openai_api_key_here
+
+# Get your Replicate API token at: https://replicate.com/account/api-tokens
+REPLICATE_API_TOKEN=your_replicate_token_here
+
+# Frontend Configuration (for build)
+# Set this to your backend URL when building frontend
+# Example: VITE_API_BASE_URL=https://api.yourdomain.com
+VITE_API_BASE_URL=http://localhost:4000

.gitignore

@@ -0,0 +1,61 @@
+# Python
+__pycache__/
+*.py[cod]
+*$py.class
+*.so
+.Python
+build/
+develop-eggs/
+dist/
+downloads/
+eggs/
+.eggs/
+lib/
+lib64/
+parts/
+sdist/
+var/
+wheels/
+*.egg-info/
+.installed.cfg
+*.egg
+
+# Virtual Environment
+venv/
+env/
+ENV/
+.venv
+
+# Environment Variables
+.env
+.env.local
+.env.*.local
+
+# Storage
+storage/images/*
+storage/videos/*
+!storage/images/.gitkeep
+!storage/videos/.gitkeep
+
+# IDE
+.vscode/
+.idea/
+*.swp
+*.swo
+*~
+
+# OS
+.DS_Store
+Thumbs.db
+
+# Testing
+.pytest_cache/
+.coverage
+htmlcov/
+
+# Logs
+*.log
+logs/
+
+# Embedded repositories
+Video_AdGenesis_App/

AUTH_SETUP.md

@@ -0,0 +1,194 @@
+# Authentication Setup Guide
+
+Your Video Genesis Studio now has authentication enabled to restrict access to authorized users only.
+
+## How It Works
+
+1. **Login Required**: Users must log in before accessing the app
+2. **JWT Tokens**: Authentication uses JWT (JSON Web Tokens) for secure, stateless authentication
+3. **Protected Routes**: All API endpoints require a valid token (except `/health` and `/api/auth/*`)
+
+## Setting Up Users
+
+### Option 1: Environment Variable (Recommended for Production)
+
+Set the `ALLOWED_USERS` environment variable with your user credentials:
+
+```bash
+# Format: "username1:password1,username2:password2"
+ALLOWED_USERS="admin:your-secure-password,user1:password123,user2:password456"
+```
+
+**For Hugging Face Spaces:**
+1. Go to your Space settings
+2. Navigate to "Variables and secrets"
+3. Add a new variable:
+   - **Key**: `ALLOWED_USERS`
+   - **Value**: `admin:your-password,user1:pass1,user2:pass2`
+4. Save and restart your Space
+
+### Option 2: Default Credentials (Development Only)
+
+If `ALLOWED_USERS` is not set, the app uses default credentials:
+- **Username**: `admin`
+- **Password**: `admin`
+
+⚠️ **Warning**: Never use default credentials in production!
+
+## Security Configuration
+
+### JWT Secret Key
+
+Set a strong secret key for JWT token signing:
+
+```bash
+JWT_SECRET_KEY=your-very-secure-random-secret-key-here
+```
+
+**For Hugging Face Spaces:**
+- Add `JWT_SECRET_KEY` to your Space environment variables
+- Use a long, random string (at least 32 characters)
+
+### Generating a Secure Secret Key
+
+You can generate a secure key using Python:
+
+```python
+import secrets
+print(secrets.token_urlsafe(32))
+```
+
+Or using OpenSSL:
+
+```bash
+openssl rand -base64 32
+```
+
+## User Management
+
+### Adding Users
+
+Add users by updating the `ALLOWED_USERS` environment variable:
+
+```bash
+# Add a new user
+ALLOWED_USERS="admin:pass1,user1:pass2,newuser:newpass"
+```
+
+### Removing Users
+
+Remove users by updating `ALLOWED_USERS`:
+
+```bash
+# Remove user1
+ALLOWED_USERS="admin:pass1,user2:pass2"
+```
+
+### Changing Passwords
+
+Update the password in `ALLOWED_USERS`:
+
+```bash
+# Change admin password
+ALLOWED_USERS="admin:newpassword,user1:pass1"
+```
+
+## API Endpoints
+
+### Public Endpoints (No Auth Required)
+- `GET /health` - Health check
+- `POST /api/auth/login` - Login endpoint
+- `GET /api/auth/verify` - Verify token (requires auth)
+
+### Protected Endpoints (Auth Required)
+All other `/api/*` endpoints require a valid JWT token in the Authorization header:
+```
+Authorization: Bearer <token>
+```
+
+## Frontend Authentication
+
+The frontend automatically:
+1. Shows login page if not authenticated
+2. Stores JWT token in localStorage
+3. Includes token in all API requests
+4. Redirects to login on 401 errors
+5. Provides logout functionality
+
+## Token Expiration
+
+Tokens expire after **7 days** by default. Users will need to log in again after expiration.
+
+To change expiration, modify `ACCESS_TOKEN_EXPIRE_HOURS` in `api/auth.py`.
+
+## Troubleshooting
+
+### Can't Log In
+
+1. **Check credentials**: Verify username and password are correct
+2. **Check environment variable**: Ensure `ALLOWED_USERS` is set correctly
+3. **Check logs**: Look for authentication errors in backend logs
+
+### Token Expired
+
+- Users will be automatically logged out
+- They need to log in again
+
+### 401 Unauthorized Errors
+
+- Token may be expired or invalid
+- Clear browser localStorage and log in again
+- Check that token is being sent in requests
+
+### Multiple Users
+
+To add multiple users, separate them with commas:
+
+```bash
+ALLOWED_USERS="admin:admin123,john:john456,jane:jane789"
+```
+
+## Security Best Practices
+
+1. ✅ **Use strong passwords** for all users
+2. ✅ **Set JWT_SECRET_KEY** to a secure random value
+3. ✅ **Never commit credentials** to version control
+4. ✅ **Use environment variables** for all secrets
+5. ✅ **Rotate secrets** periodically
+6. ✅ **Use HTTPS** in production (Hugging Face Spaces provides this)
+
+## Example Configuration
+
+For Hugging Face Spaces, set these environment variables:
+
+```
+ALLOWED_USERS=admin:SecurePass123!,user1:AnotherPass456!
+JWT_SECRET_KEY=your-super-secret-key-minimum-32-characters-long
+```
+
+## Testing
+
+1. **Test Login**:
+   ```bash
+   curl -X POST http://localhost:4000/api/auth/login \
+     -H "Content-Type: application/json" \
+     -d '{"username":"admin","password":"admin"}'
+   ```
+
+2. **Test Protected Endpoint**:
+   ```bash
+   curl -X GET http://localhost:4000/api/auth/me \
+     -H "Authorization: Bearer <your-token>"
+   ```
+
+## Next Steps
+
+1. Set `ALLOWED_USERS` with your actual credentials
+2. Set `JWT_SECRET_KEY` to a secure random value
+3. Deploy and test login functionality
+4. Share credentials only with authorized users
+
+---
+
+**Your app is now secured! 🔒**
+

Dockerfile.hf

@@ -0,0 +1,64 @@
+# Hugging Face Spaces Dockerfile
+# Multi-stage build for Hugging Face deployment
+
+# Stage 1: Build frontend
+FROM node:20-alpine AS frontend-builder
+
+WORKDIR /app/frontend
+
+# Copy package files
+COPY frontend/package*.json ./
+
+# Install dependencies
+RUN npm ci
+
+# Copy frontend source
+COPY frontend/ ./
+
+# Build arguments for environment variables
+# Hugging Face Spaces will provide the public URL
+ARG VITE_API_BASE_URL
+ENV VITE_API_BASE_URL=${VITE_API_BASE_URL}
+
+# Build frontend
+RUN npm run build
+
+# Stage 2: Python backend with frontend
+FROM python:3.11-slim
+
+# Set working directory
+WORKDIR /app
+
+# Install system dependencies including ffmpeg
+RUN apt-get update && \
+    apt-get install -y --no-install-recommends \
+    ffmpeg \
+    && rm -rf /var/lib/apt/lists/*
+
+# Copy requirements first for better caching
+COPY requirements.txt .
+
+# Install Python dependencies
+RUN pip install --no-cache-dir -r requirements.txt
+
+# Copy application code
+COPY . .
+
+# Copy built frontend from builder stage
+COPY --from=frontend-builder /app/frontend/dist ./frontend/dist
+
+# Create storage directories
+RUN mkdir -p storage/images storage/videos
+
+# Hugging Face Spaces uses port 7860 by default
+# But we'll use PORT env var if provided, or default to 7860
+EXPOSE 7860
+
+# Health check
+HEALTHCHECK --interval=30s --timeout=10s --start-period=5s --retries=3 \
+    CMD python -c "import urllib.request; urllib.request.urlopen('http://localhost:7860/health')"
+
+# Run the application
+# Hugging Face Spaces provides PORT env var, default to 7860
+CMD python -c "import os; port = int(os.getenv('PORT', 7860)); import uvicorn; uvicorn.run('main:app', host='0.0.0.0', port=port)"
+

HUGGINGFACE_DEPLOY.md

@@ -0,0 +1,294 @@
+# Deploying to Hugging Face Spaces
+
+This guide will help you deploy Video Genesis Studio to Hugging Face Spaces.
+
+## Prerequisites
+
+1. **Hugging Face Account**
+   - Sign up at https://huggingface.co/join
+   - Verify your email
+
+2. **API Keys**
+   - KIE API Key (required): https://kie.ai/api-key
+   - Optional: Gemini, OpenAI, Replicate keys
+
+3. **GitHub Repository**
+   - Your code should be in a GitHub repository
+   - Or you can upload directly to Hugging Face
+
+## Step-by-Step Deployment
+
+### Option 1: Deploy from GitHub (Recommended)
+
+1. **Prepare Your Repository**:
+   ```bash
+   # Make sure Dockerfile.hf is in the root
+   # Make sure README_HF.md exists (or rename it to README.md)
+   git add Dockerfile.hf README_HF.md
+   git commit -m "Add Hugging Face deployment files"
+   git push
+   ```
+
+2. **Create a New Space**:
+   - Go to https://huggingface.co/spaces
+   - Click "Create new Space"
+   - Fill in:
+     - **Space name**: `video-genesis-studio` (or your choice)
+     - **SDK**: Select **Docker**
+     - **Visibility**: Public or Private
+     - **Hardware**: CPU Basic (free) or upgrade for better performance
+   - Click "Create Space"
+
+3. **Connect Repository**:
+   - In Space settings, go to "Repository" tab
+   - Click "Connect to GitHub"
+   - Select your repository
+   - Set **Dockerfile path**: `Dockerfile.hf`
+   - Save
+
+4. **Set Environment Variables**:
+   - Go to "Variables and secrets" tab
+   - Add the following **required** variables:
+     ```
+     KIE_API_KEY=your_kie_api_key_here
+     VITE_API_BASE_URL=https://your-username-video-genesis-studio.hf.space
+     ENVIRONMENT=production
+     ALLOWED_USERS=admin:your-secure-password,user1:password123
+     JWT_SECRET_KEY=your-very-secure-random-secret-key-minimum-32-chars
+     ```
+   - **Authentication Setup** (Required):
+     - `ALLOWED_USERS`: Format is `username1:password1,username2:password2`
+     - `JWT_SECRET_KEY`: Generate a secure random key (see AUTH_SETUP.md)
+   - Optional variables:
+     ```
+     VITE_GEMINI_API_KEY=your_gemini_key
+     OPENAI_API_KEY=your_openai_key
+     REPLICATE_API_TOKEN=your_replicate_token
+     ```
+   - Click "Save" after adding each variable
+   
+   **Note**: See `AUTH_SETUP.md` for detailed authentication configuration.
+
+5. **Build Arguments**:
+   - Go to "Settings" → "Build arguments"
+   - Add:
+     ```
+     VITE_API_BASE_URL=https://your-username-video-genesis-studio.hf.space
+     ```
+   - This ensures the frontend knows the correct API URL
+
+6. **Deploy**:
+   - Hugging Face will automatically build and deploy
+   - Watch the build logs in the "Logs" tab
+   - Wait for "Your Space is live!" message
+
+### Option 2: Upload Directly to Hugging Face
+
+1. **Create Space**:
+   - Go to https://huggingface.co/spaces
+   - Click "Create new Space"
+   - Select **Docker** SDK
+   - Create the Space
+
+2. **Clone and Upload**:
+   ```bash
+   # Clone your Hugging Face Space
+   git clone https://huggingface.co/spaces/your-username/video-genesis-studio
+   cd video-genesis-studio
+   
+   # Copy your files
+   cp -r /path/to/your/project/* .
+   
+   # Make sure Dockerfile.hf is named correctly
+   # Rename README_HF.md to README.md
+   mv README_HF.md README.md
+   
+   # Commit and push
+   git add .
+   git commit -m "Initial deployment"
+   git push
+   ```
+
+3. **Set Environment Variables** (same as Option 1, step 4)
+
+## Configuration
+
+### Space Settings
+
+1. **Hardware**:
+   - **CPU Basic** (Free): Good for testing, limited resources
+   - **CPU Upgrade** ($0.60/hour): Better performance
+   - **GPU** (if needed): For heavy video processing
+
+2. **Storage**:
+   - Default: 50GB
+   - Upgrade if you need more for video storage
+
+3. **Environment Variables**:
+   - Set in "Variables and secrets" tab
+   - Required: `KIE_API_KEY`
+   - Recommended: `VITE_API_BASE_URL` (your Space URL)
+
+### Build Configuration
+
+The `Dockerfile.hf` is configured to:
+- Build React frontend with correct API URL
+- Install Python dependencies
+- Install FFmpeg for video processing
+- Serve on port 7860 (Hugging Face default)
+
+### Frontend Configuration
+
+The frontend is built with `VITE_API_BASE_URL` pointing to your Space URL. This is set via:
+- Build argument in Dockerfile
+- Environment variable during build
+
+## Verifying Deployment
+
+1. **Check Build Logs**:
+   - Go to "Logs" tab in your Space
+   - Look for successful build messages
+   - Check for any errors
+
+2. **Test Health Endpoint**:
+   - Visit: `https://your-space.hf.space/health`
+   - Should return JSON with status "healthy"
+
+3. **Test Frontend**:
+   - Visit: `https://your-space.hf.space`
+   - Should load the React application
+
+4. **Test API Docs**:
+   - Visit: `https://your-space.hf.space/docs`
+   - Should show Swagger UI
+
+## Troubleshooting
+
+### Build Fails
+
+**Issue**: Build fails with npm errors
+- **Solution**: Check that `frontend/package.json` exists and is valid
+- Check build logs for specific error messages
+
+**Issue**: Frontend build fails
+- **Solution**: Ensure `VITE_API_BASE_URL` is set correctly
+- Check that all frontend dependencies are in `package.json`
+
+### App Not Loading
+
+**Issue**: Frontend shows blank page
+- **Solution**: 
+  - Check browser console for errors
+  - Verify `VITE_API_BASE_URL` matches your Space URL
+  - Check that frontend was built successfully (check logs)
+
+**Issue**: API calls fail
+- **Solution**:
+  - Verify `KIE_API_KEY` is set correctly
+  - Check API logs in Space logs
+  - Ensure CORS is configured (already set to allow all)
+
+### Port Issues
+
+**Issue**: App doesn't start
+- **Solution**: 
+  - Hugging Face uses port 7860 by default
+  - The Dockerfile is configured to use `PORT` env var
+  - Check logs for port binding errors
+
+### Storage Issues
+
+**Issue**: Videos not saving
+- **Solution**:
+  - Check storage directory permissions
+  - Verify storage path exists
+  - Check available disk space
+
+## Updating Your Space
+
+1. **Make Changes**:
+   ```bash
+   # Make your code changes
+   git add .
+   git commit -m "Update app"
+   git push
+   ```
+
+2. **Hugging Face Auto-Rebuilds**:
+   - Spaces automatically rebuild on push
+   - Watch the logs for build progress
+
+3. **Manual Rebuild**:
+   - Go to Space settings
+   - Click "Rebuild" if needed
+
+## Environment Variables Reference
+
+| Variable | Required | Description |
+|----------|----------|-------------|
+| `KIE_API_KEY` | Yes | KIE API key for video generation |
+| `ALLOWED_USERS` | Yes | User credentials: `username1:pass1,username2:pass2` |
+| `JWT_SECRET_KEY` | Yes | Secure random key for JWT signing (min 32 chars) |
+| `VITE_API_BASE_URL` | Recommended | Your Space URL (for frontend) |
+| `ENVIRONMENT` | No | Set to `production` |
+| `VITE_GEMINI_API_KEY` | No | Gemini API key |
+| `OPENAI_API_KEY` | No | OpenAI API key |
+| `REPLICATE_API_TOKEN` | No | Replicate API token |
+| `PORT` | Auto | Set by Hugging Face (7860) |
+
+## Cost Considerations
+
+- **Free Tier**: CPU Basic, 50GB storage
+- **Paid Tiers**: 
+  - CPU Upgrade: $0.60/hour
+  - GPU options available
+- **Storage**: Additional storage can be purchased
+
+## Security Notes
+
+1. **API Keys**: 
+   - Never commit API keys to your repository
+   - Use Hugging Face's "Variables and secrets" feature
+   - Keys are encrypted and only accessible to your Space
+
+2. **CORS**: 
+   - Currently set to allow all origins
+   - For production, consider restricting to your domain
+
+3. **Rate Limiting**:
+   - Consider implementing rate limiting for public Spaces
+   - Monitor API usage
+
+## Authentication
+
+Your app now requires login! See `AUTH_SETUP.md` for:
+- Setting up user credentials
+- Configuring JWT secret key
+- Managing multiple users
+- Security best practices
+
+**Quick Setup:**
+1. Set `ALLOWED_USERS` environment variable: `admin:your-password,user1:pass1`
+2. Set `JWT_SECRET_KEY` to a secure random string (32+ characters)
+3. Users will see a login page before accessing the app
+
+## Support
+
+- **Hugging Face Docs**: https://huggingface.co/docs/hub/spaces
+- **Space Community**: https://huggingface.co/spaces
+- **Issues**: Check Space logs for errors
+- **Authentication**: See `AUTH_SETUP.md` for auth configuration
+
+## Next Steps
+
+1. ✅ Deploy your Space
+2. ✅ Set environment variables (including `ALLOWED_USERS` and `JWT_SECRET_KEY`)
+3. ✅ Test login functionality
+4. ✅ Test the deployment
+5. ✅ Share credentials with authorized users only
+6. ✅ Monitor usage and performance
+
+---
+
+**Your Video Genesis Studio is now live and secured on Hugging Face! 🚀🔒**
+

README.md

@@ -0,0 +1,108 @@
+---
+title: Video AdGenesis Studio
+emoji: 🎬
+colorFrom: blue
+colorTo: purple
+sdk: docker
+sdk_version: latest
+app_file: Dockerfile.hf
+pinned: false
+license: mit
+---
+
+# Video Genesis Studio
+
+AI-powered video generation studio with React frontend and FastAPI backend. Create professional videos from text prompts and images using cutting-edge AI models.
+
+## Features
+
+✨ **AI Video Generation**
+- KIE Veo 3.1 integration for high-quality video generation
+- Text-to-video and image-to-video support
+- Real-time progress tracking
+
+🖼️ **Image Processing**
+- Intelligent image compression
+- Multiple format support
+- Automatic optimization
+
+🎬 **Video Processing**
+- Frame extraction
+- Video trimming and concatenation
+- Full ffmpeg integration
+
+## Setup
+
+### Environment Variables
+
+Set these in your Hugging Face Space settings:
+
+**Required:**
+- `KIE_API_KEY` - Get from https://kie.ai/api-key
+
+**Optional:**
+- `VITE_GEMINI_API_KEY` - For Gemini AI features
+- `OPENAI_API_KEY` - For GPT-4o prompt generation
+- `REPLICATE_API_TOKEN` - For Replicate video generation
+- `VITE_API_BASE_URL` - Your Space URL (auto-set by HF, but can override)
+- `ENVIRONMENT` - Set to `production`
+
+### Getting Your API Keys
+
+1. **KIE API Key** (Required):
+   - Visit https://kie.ai/api-key
+   - Sign up or log in
+   - Copy your API key
+
+2. **Gemini API Key** (Optional):
+   - Visit https://makersuite.google.com/app/apikey
+   - Create a new API key
+   - Copy the key
+
+3. **OpenAI API Key** (Optional):
+   - Visit https://platform.openai.com/api-keys
+   - Create a new secret key
+   - Copy the key
+
+4. **Replicate Token** (Optional):
+   - Visit https://replicate.com/account/api-tokens
+   - Create a new token
+   - Copy the token
+
+## Usage
+
+1. **Set Environment Variables**:
+   - Go to your Space settings
+   - Add all required environment variables
+   - Save and restart the Space
+
+2. **Access the App**:
+   - Your Space will be available at: `https://your-username-video-genesis-studio.hf.space`
+   - The frontend loads automatically
+   - API docs available at: `/docs`
+
+3. **Generate Videos**:
+   - Enter a text prompt
+   - Optionally upload images
+   - Select video model and settings
+   - Click generate and wait for results
+
+## API Endpoints
+
+- `GET /health` - Health check
+- `GET /docs` - API documentation (Swagger UI)
+- `POST /api/veo/generate` - Start video generation
+- `GET /api/veo/status/{task_id}` - Check generation status
+- `POST /api/prompts/generate` - Generate prompts with AI
+
+## Technical Details
+
+- **Backend**: FastAPI (Python 3.11)
+- **Frontend**: React + TypeScript + Vite
+- **Video Processing**: FFmpeg
+- **AI Models**: KIE Veo 3.1, Gemini, GPT-4o
+
+## License
+
+MIT License
+

api/__init__.py

@@ -0,0 +1,2 @@
+# API package
+

api/auth.py

@@ -0,0 +1,137 @@
+"""
+Authentication endpoints for user login and access control
+"""
+from fastapi import APIRouter, HTTPException, Depends, status
+from fastapi.security import HTTPBearer, HTTPAuthorizationCredentials
+from pydantic import BaseModel
+from datetime import datetime, timedelta
+from typing import Optional
+import os
+import hashlib
+from jose import JWTError, jwt
+
+router = APIRouter()
+security = HTTPBearer()
+
+# JWT Configuration
+SECRET_KEY = os.getenv("JWT_SECRET_KEY", "your-secret-key-change-in-production")
+ALGORITHM = "HS256"
+ACCESS_TOKEN_EXPIRE_HOURS = 24 * 7  # 7 days
+
+# User credentials (in production, use a database)
+# Format: username -> hashed_password
+# You can set these via environment variables or use a simple hash
+ALLOWED_USERS = {}
+
+def load_allowed_users():
+    """Load allowed users from environment variables"""
+    users_str = os.getenv("ALLOWED_USERS", "")
+    if not users_str:
+        # Default user for development (username: admin, password: admin)
+        # In production, always set ALLOWED_USERS env var
+        print("⚠️  Using default credentials (admin/admin). Set ALLOWED_USERS env var for production.")
+        return {"admin": hash_password("admin")}
+    
+    users = {}
+    for user_entry in users_str.split(","):
+        if ":" in user_entry:
+            username, password = user_entry.split(":", 1)
+            users[username.strip()] = hash_password(password.strip())
+    print(f"✅ Loaded {len(users)} user(s) from ALLOWED_USERS")
+    return users
+
+def hash_password(password: str) -> str:
+    """Hash password using SHA256 (simple, for basic auth)"""
+    return hashlib.sha256(password.encode()).hexdigest()
+
+def verify_password(plain_password: str, hashed_password: str) -> bool:
+    """Verify password against hash"""
+    return hash_password(plain_password) == hashed_password
+
+def create_access_token(data: dict, expires_delta: Optional[timedelta] = None):
+    """Create JWT access token"""
+    to_encode = data.copy()
+    if expires_delta:
+        expire = datetime.utcnow() + expires_delta
+    else:
+        expire = datetime.utcnow() + timedelta(hours=ACCESS_TOKEN_EXPIRE_HOURS)
+    to_encode.update({"exp": expire})
+    encoded_jwt = jwt.encode(to_encode, SECRET_KEY, algorithm=ALGORITHM)
+    return encoded_jwt
+
+def verify_token(credentials: HTTPAuthorizationCredentials = Depends(security)):
+    """Verify JWT token"""
+    token = credentials.credentials
+    try:
+        payload = jwt.decode(token, SECRET_KEY, algorithms=[ALGORITHM])
+        username: str = payload.get("sub")
+        if username is None:
+            raise HTTPException(
+                status_code=status.HTTP_401_UNAUTHORIZED,
+                detail="Invalid authentication credentials",
+                headers={"WWW-Authenticate": "Bearer"},
+            )
+        return username
+    except JWTError:
+        raise HTTPException(
+            status_code=status.HTTP_401_UNAUTHORIZED,
+            detail="Invalid authentication credentials",
+            headers={"WWW-Authenticate": "Bearer"},
+        )
+
+# Load users on module import
+ALLOWED_USERS = load_allowed_users()
+
+# Request/Response Models
+class LoginRequest(BaseModel):
+    username: str
+    password: str
+
+class LoginResponse(BaseModel):
+    access_token: str
+    token_type: str = "bearer"
+    username: str
+
+class VerifyResponse(BaseModel):
+    authenticated: bool
+    username: Optional[str] = None
+
+@router.post("/auth/login", response_model=LoginResponse)
+async def login(request: LoginRequest):
+    """Login endpoint - returns JWT token"""
+    username = request.username
+    password = request.password
+    
+    # Check if user exists
+    if username not in ALLOWED_USERS:
+        raise HTTPException(
+            status_code=status.HTTP_401_UNAUTHORIZED,
+            detail="Incorrect username or password"
+        )
+    
+    # Verify password
+    if not verify_password(password, ALLOWED_USERS[username]):
+        raise HTTPException(
+            status_code=status.HTTP_401_UNAUTHORIZED,
+            detail="Incorrect username or password"
+        )
+    
+    # Create access token
+    access_token = create_access_token(data={"sub": username})
+    
+    return LoginResponse(
+        access_token=access_token,
+        token_type="bearer",
+        username=username
+    )
+
+@router.get("/auth/verify", response_model=VerifyResponse)
+async def verify_token_endpoint(username: str = Depends(verify_token)):
+    """Verify if token is valid"""
+    return VerifyResponse(authenticated=True, username=username)
+
+@router.get("/auth/me", response_model=VerifyResponse)
+async def get_current_user(username: str = Depends(verify_token)):
+    """Get current authenticated user"""
+    return VerifyResponse(authenticated=True, username=username)
+

api/frame_extraction.py

@@ -0,0 +1,232 @@
+"""
+Frame Extraction API endpoints
+Intelligent frame selection using Whisper
+"""
+
+from fastapi import APIRouter, HTTPException, UploadFile, File, Form
+from fastapi.responses import JSONResponse
+from pydantic import BaseModel
+from typing import List, Optional
+import tempfile
+import os
+
+from utils.whisper_trim import (
+    extract_post_speech_frames,
+    find_last_word_timestamp,
+    trim_video_to_last_word,
+    is_whisper_available
+)
+
+router = APIRouter()
+
+
+class FrameExtractionRequest(BaseModel):
+    video_url: str
+    script: str
+    buffer_time: Optional[float] = 0.3
+    num_frames: Optional[int] = 3
+    model_size: Optional[str] = "base"
+
+
+class FrameExtractionResponse(BaseModel):
+    frames: List[dict]  # [{timestamp, frame_data_url, label}]
+    last_word_time: float
+    total_duration: float
+
+
+@router.post("/extract-frames", response_model=FrameExtractionResponse)
+async def extract_frames_api(request: FrameExtractionRequest):
+    """
+    Extract transition frames using Whisper to detect last spoken word
+    """
+    if not is_whisper_available():
+        raise HTTPException(
+            status_code=501,
+            detail="Whisper not installed. Install with: pip install openai-whisper moviepy"
+        )
+    
+    try:
+        # Download video temporarily
+        import httpx
+        temp_video = tempfile.mktemp(suffix='.mp4')
+        
+        async with httpx.AsyncClient() as client:
+            response = await client.get(request.video_url)
+            if response.status_code != 200:
+                raise HTTPException(
+                    status_code=400,
+                    detail=f"Failed to download video: {response.status_code}"
+                )
+            
+            with open(temp_video, 'wb') as f:
+                f.write(response.content)
+        
+        frames = []
+        last_word_time = None
+
+        try:
+            # Prefer Whisper-based post-speech detection
+            frames = extract_post_speech_frames(
+                temp_video,
+                request.script,
+                buffer_time=request.buffer_time,
+                num_frames=request.num_frames,
+                model_size=request.model_size
+            )
+            
+            # Get last word timestamp
+            last_word_time = find_last_word_timestamp(
+                temp_video,
+                request.script,
+                model_size=request.model_size
+            )
+        except Exception as whisper_err:
+            # Fallback: simple fixed timestamps near the end of the video
+            print(f"⚠️ Whisper-based frame extraction failed: {whisper_err}")
+            try:
+                from moviepy.editor import VideoFileClip
+                from utils.video_processor import extract_frame
+
+                clip = VideoFileClip(temp_video)
+                duration = clip.duration
+                clip.close()
+
+                fallback_timestamps = [
+                    max(0, duration - 1.5),
+                    max(0, duration - 1.0),
+                    max(0, duration - 0.5),
+                ]
+                labels = ["Early End", "Mid End", "Final Frame"]
+
+                for ts, label in zip(fallback_timestamps, labels):
+                    frame_data = extract_frame(temp_video, ts, return_base64=True)
+                    frames.append((ts, frame_data, label))
+
+                last_word_time = fallback_timestamps[-1] if fallback_timestamps else None
+                print("✅ Returned fallback frames near video end.")
+            except Exception as fallback_err:
+                print(f"❌ Fallback frame extraction failed: {fallback_err}")
+                raise HTTPException(
+                    status_code=500,
+                    detail=f"Frame extraction failed: {str(whisper_err)}"
+                )
+        
+        # Get video duration
+        from moviepy.editor import VideoFileClip
+        clip = VideoFileClip(temp_video)
+        duration = clip.duration
+        clip.close()
+        
+        # Clean up
+        os.remove(temp_video)
+        
+        # Format response
+        frames_data = [
+            {
+                "timestamp": timestamp,
+                "frame_data_url": frame_data,
+                "label": label
+            }
+            for timestamp, frame_data, label in frames
+        ]
+        
+        return FrameExtractionResponse(
+            frames=frames_data,
+            last_word_time=last_word_time,
+            total_duration=duration
+        )
+    
+    except Exception as e:
+        # Clean up temp file if it exists
+        if 'temp_video' in locals() and os.path.exists(temp_video):
+            os.remove(temp_video)
+        
+        raise HTTPException(
+            status_code=500,
+            detail=f"Frame extraction failed: {str(e)}"
+        )
+
+
+@router.post("/trim-video")
+async def trim_video_api(
+    video_url: str = Form(...),
+    script: str = Form(...),
+    padding: float = Form(0.5),
+    model_size: str = Form("base")
+):
+    """
+    Trim video to end after last spoken word
+    """
+    if not is_whisper_available():
+        raise HTTPException(
+            status_code=501,
+            detail="Whisper not installed. Install with: pip install openai-whisper moviepy"
+        )
+    
+    try:
+        # Download video temporarily
+        import httpx
+        temp_video = tempfile.mktemp(suffix='.mp4')
+        output_video = tempfile.mktemp(suffix='_trimmed.mp4')
+        
+        async with httpx.AsyncClient() as client:
+            response = await client.get(video_url)
+            if response.status_code != 200:
+                raise HTTPException(
+                    status_code=400,
+                    detail=f"Failed to download video: {response.status_code}"
+                )
+            
+            with open(temp_video, 'wb') as f:
+                f.write(response.content)
+        
+        # Trim video
+        output_path = trim_video_to_last_word(
+            temp_video,
+            script,
+            output_video,
+            padding=padding,
+            model_size=model_size
+        )
+        
+        # Read trimmed video
+        with open(output_path, 'rb') as f:
+            video_data = f.read()
+        
+        # Clean up
+        os.remove(temp_video)
+        os.remove(output_video)
+        
+        # Return trimmed video
+        from fastapi.responses import Response
+        return Response(
+            content=video_data,
+            media_type="video/mp4",
+            headers={
+                "Content-Disposition": "attachment; filename=trimmed_video.mp4"
+            }
+        )
+    
+    except Exception as e:
+        # Clean up temp files if they exist
+        for temp_file in ['temp_video', 'output_video']:
+            if temp_file in locals() and os.path.exists(locals()[temp_file]):
+                os.remove(locals()[temp_file])
+        
+        raise HTTPException(
+            status_code=500,
+            detail=f"Video trimming failed: {str(e)}"
+        )
+
+
+@router.get("/whisper-status")
+async def whisper_status():
+    """
+    Check if Whisper is available
+    """
+    return {
+        "available": is_whisper_available(),
+        "message": "Whisper is available" if is_whisper_available() 
+                   else "Install with: pip install openai-whisper moviepy"
+    }
+

api/image_service.py

@@ -0,0 +1,61 @@
+"""
+Image Service API endpoints
+Handles image compression, storage, and serving
+"""
+
+from fastapi import APIRouter, HTTPException, Response, UploadFile, File
+from fastapi.responses import JSONResponse
+from utils.storage import temp_images
+from utils.image_processor import compress_and_store_image
+import os
+
+router = APIRouter()
+
+@router.post("/upload-image")
+async def upload_image(file: UploadFile = File(...)):
+    """
+    Upload and host an image, returns public URL
+    """
+    try:
+        # Read image bytes
+        image_bytes = await file.read()
+        
+        # Convert to data URL for processing
+        import base64
+        encoded = base64.b64encode(image_bytes).decode('utf-8')
+        data_url = f"data:{file.content_type};base64,{encoded}"
+        
+        # Get public URL from env or use default
+        public_url = os.getenv('PUBLIC_URL', 'http://localhost:4000')
+        
+        # Compress and store, get hosted URL
+        hosted_url = await compress_and_store_image(data_url, public_url)
+        
+        return JSONResponse(content={
+            "url": hosted_url,
+            "filename": file.filename
+        })
+    
+    except Exception as e:
+        raise HTTPException(status_code=500, detail=f"Image upload failed: {str(e)}")
+
+
+@router.get("/images/{image_id}")
+async def serve_image(image_id: str):
+    """
+    Serve temporarily stored images
+    Images are compressed and cached for 1 hour
+    """
+    if image_id not in temp_images:
+        raise HTTPException(status_code=404, detail="Image not found")
+    
+    image_data = temp_images[image_id]
+    
+    return Response(
+        content=image_data['buffer'],
+        media_type=image_data['content_type'],
+        headers={
+            'Cache-Control': 'public, max-age=3600'
+        }
+    )
+

api/prompt_generation.py

@@ -0,0 +1,350 @@
+"""
+GPT-4o Prompt Generation API
+Structured, validated segment generation for video prompts
+"""
+
+from fastapi import APIRouter, HTTPException, UploadFile, File, Form
+from fastapi.responses import JSONResponse
+from pydantic import BaseModel
+from typing import Optional
+import base64
+
+from utils.prompt_generator import (
+    VeoInputs,
+    generate_segments_payload,
+    split_script_into_segments
+)
+from openai import OpenAI
+import os
+import json
+
+router = APIRouter()
+
+
+class PromptGenerationRequest(BaseModel):
+    """Request for prompt generation"""
+    script: str
+    style: str = "clean, lifestyle UGC"
+    jsonFormat: str = "standard"
+    continuationMode: bool = True
+    voiceType: Optional[str] = None
+    energyLevel: Optional[str] = None
+    settingMode: str = "single"
+    cameraStyle: Optional[str] = "handheld steadicam"
+    energyArc: Optional[str] = None
+    narrativeStyle: Optional[str] = "direct address"
+    accentRegion: Optional[str] = None
+    model: str = "gpt-4o"
+
+
+@router.post("/generate-prompts")
+async def generate_prompts_api(
+    script: str = Form(...),
+    style: str = Form("clean, lifestyle UGC"),
+    jsonFormat: str = Form("standard"),
+    continuationMode: str = Form("true"),
+    voiceType: Optional[str] = Form(None),
+    energyLevel: Optional[str] = Form(None),
+    settingMode: str = Form("single"),
+    cameraStyle: Optional[str] = Form("handheld steadicam"),
+    energyArc: Optional[str] = Form(None),
+    narrativeStyle: Optional[str] = Form("direct address"),
+    accentRegion: Optional[str] = Form(None),
+    model: str = Form("gpt-4o"),
+    image: UploadFile = File(...)
+):
+    """
+    Generate structured video prompts using GPT-4o
+    
+    This endpoint:
+    1. Splits the script into 8-second segments
+    2. Generates detailed production prompts using GPT-4o
+    3. Validates the output against strict rules
+    4. Returns structured JSON for video generation
+    
+    Accepts multipart/form-data with:
+    - script: The video script text
+    - style: Visual style description
+    - image: Character reference image (required)
+    - Other optional parameters for fine-tuning
+    
+    Returns:
+        Validated segments payload ready for video generation
+    """
+    try:
+        # Read image
+        image_bytes = await image.read()
+        print(f"📷 Received reference image: {len(image_bytes)} bytes")
+        
+        # Convert continuationMode string to boolean
+        continuation_mode = continuationMode.lower() == "true"
+        
+        # Create inputs from form data
+        inputs = VeoInputs(
+            script=script,
+            style=style,
+            jsonFormat=jsonFormat,
+            continuationMode=continuation_mode,
+            voiceType=voiceType if voiceType else None,
+            energyLevel=energyLevel if energyLevel else None,
+            settingMode=settingMode,
+            cameraStyle=cameraStyle if cameraStyle else None,
+            energyArc=energyArc if energyArc else None,
+            narrativeStyle=narrativeStyle if narrativeStyle else None,
+            accentRegion=accentRegion if accentRegion else None
+        )
+        
+        # Check environment mode
+        environment = os.getenv('ENVIRONMENT', 'dev').lower()
+        is_dev_mode = environment == 'dev' or environment == 'development'
+        
+        # Generate payload
+        payload = generate_segments_payload(
+            inputs=inputs,
+            image_bytes=image_bytes,
+            model=model
+        )
+        
+        # Add environment mode to response
+        payload['environment'] = environment
+        payload['is_dev_mode'] = is_dev_mode
+        payload['max_segments'] = 2 if is_dev_mode else None
+        
+        # Validation warnings (if any) are logged to console but don't block
+        return JSONResponse(content=payload)
+    
+    except Exception as e:
+        # API/network errors only (validation is non-blocking now)
+        raise HTTPException(
+            status_code=500,
+            detail=f"Prompt generation failed: {str(e)}"
+        )
+
+
+@router.post("/split-script")
+async def split_script_api(
+    script: str = Form(...),
+    seconds_per_segment: int = Form(8),
+    words_per_second: float = Form(2.2)
+):
+    """
+    Split script into segments for preview
+    
+    Useful for checking how the script will be divided before generation
+    """
+    try:
+        segments = split_script_into_segments(
+            script,
+            seconds_per_segment=seconds_per_segment,
+            words_per_second=words_per_second
+        )
+        
+        return {
+            "segments": segments,
+            "count": len(segments),
+            "total_words": sum(len(s.split()) for s in segments)
+        }
+    
+    except Exception as e:
+        raise HTTPException(
+            status_code=500,
+            detail=f"Script splitting failed: {str(e)}"
+        )
+
+
+@router.post("/validate-payload")
+async def validate_payload_api(payload: dict):
+    """
+    Validate a segments payload against strict rules
+    
+    Use this to check if a manually created or modified payload is valid
+    """
+    try:
+        from utils.prompt_generator import validate_segments_payload
+        
+        expected_segments = len(payload.get("segments", []))
+        errors = validate_segments_payload(payload, expected_segments)
+        
+        if errors:
+            return {
+                "valid": False,
+                "errors": errors
+            }
+        
+        return {
+            "valid": True,
+            "message": "Payload is valid"
+        }
+    
+    except Exception as e:
+        raise HTTPException(
+            status_code=500,
+            detail=f"Validation failed: {str(e)}"
+        )
+
+
+@router.get("/prompt-status")
+async def prompt_status():
+    """
+    Check if GPT-4o prompt generation is available
+    """
+    import os
+    
+    openai_key = os.getenv('OPENAI_API_KEY')
+    
+    return {
+        "available": bool(openai_key),
+        "message": "GPT-4o is configured" if openai_key 
+                   else "Add OPENAI_API_KEY to .env.local"
+    }
+
+
+@router.post("/refine-prompt-continuity")
+async def refine_prompt_for_continuity(
+    segmentPrompt: str = Form(...),  # JSON string of the next segment
+    lastFrame: UploadFile = File(...),  # Last frame image from previous video
+    transcribedDialogue: str = Form(default=""),  # Whisper transcription from previous segment
+    expectedDialogue: str = Form(default="")  # Expected dialogue from previous segment
+):
+    """
+    Refine a segment prompt to match the actual visual AND audio from the previous segment.
+    
+    This ensures perfect continuity by having GPT-4o analyze:
+    1. The last frame (visual consistency)
+    2. The transcribed dialogue (audio consistency - what was actually said)
+    """
+    try:
+        # Read the image
+        image_bytes = await lastFrame.read()
+        encoded_image = base64.b64encode(image_bytes).decode('utf-8')
+        
+        # Parse the segment prompt
+        try:
+            segment_data = json.loads(segmentPrompt)
+        except json.JSONDecodeError:
+            raise HTTPException(
+                status_code=400,
+                detail="Invalid JSON in segmentPrompt"
+            )
+        
+        # Initialize OpenAI client
+        client = OpenAI(api_key=os.getenv('OPENAI_API_KEY'))
+        
+        # Build audio context if available
+        audio_context = ""
+        if transcribedDialogue.strip():
+            audio_context = f"""
+
+═══════════════════════════════════════════════════════════
+AUDIO CONTINUITY CONTEXT (WHAT WAS ACTUALLY SPOKEN)
+═══════════════════════════════════════════════════════════
+
+Previous segment's dialogue (from Whisper transcription):
+\"{transcribedDialogue.strip()}\"
+
+Expected dialogue was:
+\"{expectedDialogue.strip() if expectedDialogue.strip() else 'Not provided'}\"
+
+IMPORTANT: The next segment should continue naturally from what was ACTUALLY said.
+If there are differences between expected and transcribed dialogue, use the TRANSCRIBED version
+as the ground truth for continuity (it's what the viewer actually heard).
+"""
+        
+        # Build the refinement prompt
+        refinement_instructions = f"""
+You are a video continuity expert. Your task is to UPDATE the provided segment prompt to ensure PERFECT VISUAL AND AUDIO CONTINUITY with the previous video segment.
+
+═══════════════════════════════════════════════════════════
+VISUAL CONTINUITY (from attached image)
+═══════════════════════════════════════════════════════════
+
+Analyze the image carefully - this is the ACTUAL last frame from the previous video.
+
+1. Update the character_description to match the ACTUAL person in the image:
+   - Physical appearance (EXACT age, hair color/style, facial features, skin tone)
+   - Clothing (EXACTLY what they're wearing - color, style, pattern)
+   - Current state (their actual expression and posture at this moment)
+   - Voice matching (adjust to match their appearance)
+
+2. Update the scene_continuity to match the ACTUAL environment:
+   - Environment (describe what you see - bedroom, office, outdoor, etc.)
+   - Camera position (maintain the SAME angle/framing)
+   - Lighting state (match the EXACT lighting conditions in the image)
+   - Props and background elements (describe what's actually visible)
+   - Spatial relationships (match the actual layout)
+{audio_context}
+═══════════════════════════════════════════��═══════════════
+ORIGINAL PROMPT TO UPDATE
+═══════════════════════════════════════════════════════════
+
+{json.dumps(segment_data, indent=2)}
+
+═══════════════════════════════════════════════════════════
+CRITICAL RULES
+═══════════════════════════════════════════════════════════
+
+- Be EXTREMELY specific about what you see in the image
+- If the image shows a young woman with red hair, describe EXACTLY that
+- If it's a sunset beach scene, describe EXACTLY that setting
+- If they're wearing a beige blazer, describe EXACTLY that clothing
+- Match colors, styles, and details PRECISELY to what's visible
+- Maintain the SAME camera angle and distance
+- Keep the action_timeline.dialogue EXACTLY as provided (this is the NEXT segment's dialogue)
+- Update segment_info.continuity_markers to reflect the visual state
+- Adjust synchronized_actions to fit the actual character appearance
+
+🚨 CRITICAL: NO BLUR TRANSITIONS AT SEGMENT START 🚨
+- The video MUST start immediately at 0:00 with a SHARP, CLEAR, IN-FOCUS frame
+- NO fade-in, NO blur transition, NO gradual focus effect at the start
+- The first frame (0:00) must be as clear and sharp as any other frame
+- camera_movement MUST describe movement that starts from a clear, sharp state
+
+
+The goal is SEAMLESS video extension with ZERO visual or audio discontinuity.
+
+Return ONLY the updated JSON segment object with the same structure. No explanation, just the corrected JSON.
+"""
+        
+        print(f"🔄 Refining prompt for visual continuity...")
+        
+        # Call GPT-4o with vision
+        response = client.chat.completions.create(
+            model="gpt-4o",
+            messages=[
+                {
+                    "role": "user",
+                    "content": [
+                        {
+                            "type": "text",
+                            "text": refinement_instructions
+                        },
+                        {
+                            "type": "image_url",
+                            "image_url": {
+                                "url": f"data:image/jpeg;base64,{encoded_image}"
+                            }
+                        }
+                    ]
+                }
+            ],
+            response_format={"type": "json_object"},
+            temperature=0.3,  # Lower temperature for precise matching
+        )
+        
+        # Parse the response
+        refined_prompt = json.loads(response.choices[0].message.content)
+        
+        print(f"✅ Prompt refined for visual continuity")
+        
+        return JSONResponse(content={
+            "refined_prompt": refined_prompt,
+            "original_prompt": segment_data
+        })
+    
+    except Exception as e:
+        print(f"❌ Prompt refinement error: {str(e)}")
+        raise HTTPException(
+            status_code=500,
+            detail=f"Prompt refinement failed: {str(e)}"
+        )
+

api/replicate_service.py

@@ -0,0 +1,289 @@
+"""
+Replicate API endpoints
+Handles video generation via Replicate's Python SDK
+
+Based on standalone_video_creator.py flow:
+- Uses replicate.run() for synchronous generation
+- Sends prompt as stringified JSON (like the standalone script)
+- Supports image input for frame continuity
+"""
+
+from fastapi import APIRouter, HTTPException, BackgroundTasks
+from fastapi.responses import JSONResponse
+from pydantic import BaseModel
+from typing import Optional, Dict, Any
+import os
+import asyncio
+import uuid
+import json
+from concurrent.futures import ThreadPoolExecutor
+
+router = APIRouter()
+
+# Try importing replicate
+try:
+    import replicate
+    REPLICATE_AVAILABLE = True
+except ImportError:
+    REPLICATE_AVAILABLE = False
+    print("⚠️  Replicate package not installed. Run: pip install replicate")
+
+# Thread pool for running blocking replicate.run() calls
+executor = ThreadPoolExecutor(max_workers=4)
+
+# In-memory store for prediction status (in production, use Redis)
+predictions: Dict[str, Dict[str, Any]] = {}
+
+
+# Request/Response Models
+class ReplicateGenerateRequest(BaseModel):
+    prompt: str
+    imageUrl: Optional[str] = None
+    model: Optional[str] = "google/veo-3"
+    aspectRatio: Optional[str] = "9:16"
+    seed: Optional[int] = None
+
+
+class ReplicateGenerateResponse(BaseModel):
+    id: str
+    status: str
+
+
+class ReplicateStatusResponse(BaseModel):
+    status: str
+    output: Optional[str] = None
+    url: Optional[str] = None
+    error: Optional[str] = None
+
+
+def get_replicate_api_key():
+    """Get Replicate API key from environment"""
+    api_key = os.getenv('REPLICATE_API_TOKEN')
+    if not api_key:
+        raise HTTPException(
+            status_code=500,
+            detail="REPLICATE_API_TOKEN not configured. Add REPLICATE_API_TOKEN to .env.local"
+        )
+    return api_key
+
+
+def run_replicate_sync(
+    prediction_id: str,
+    model: str,
+    input_data: Dict[str, Any]
+):
+    """
+    Run replicate.run() synchronously in a thread.
+    Updates the predictions dict with status.
+    
+    This mirrors the standalone_video_creator.py approach.
+    """
+    try:
+        # Set API token
+        api_key = os.getenv('REPLICATE_API_TOKEN')
+        os.environ['REPLICATE_API_TOKEN'] = api_key
+        
+        print(f"🎬 Running replicate.run('{model}')...")
+        print(f"📦 Input keys: {list(input_data.keys())}")
+        
+        # Run the model (blocking call)
+        output = replicate.run(model, input=input_data)
+        
+        # Handle different output types (same as standalone_video_creator.py)
+        video_url = None
+        if isinstance(output, str):
+            video_url = output
+        elif hasattr(output, 'url'):
+            # url is a property, not a method
+            video_url = output.url
+        elif hasattr(output, '__iter__'):
+            # Could be a generator or list
+            for item in output:
+                if isinstance(item, str):
+                    video_url = item
+                    break
+        else:
+            video_url = str(output)
+        
+        print(f"✅ Replicate completed: {video_url[:80] if video_url else 'no url'}...")
+        
+        predictions[prediction_id] = {
+            "status": "succeeded",
+            "url": video_url,
+            "output": video_url,
+            "error": None
+        }
+        
+    except Exception as e:
+        error_msg = str(e)
+        print(f"❌ Replicate error: {error_msg}")
+        
+        predictions[prediction_id] = {
+            "status": "failed",
+            "url": None,
+            "output": None,
+            "error": error_msg
+        }
+
+
+@router.post("/replicate/generate", response_model=ReplicateGenerateResponse)
+async def generate_video(request: ReplicateGenerateRequest, background_tasks: BackgroundTasks):
+    """
+    Generate video using Replicate Python SDK.
+    
+    Mirrors standalone_video_creator.py:
+    - Uses replicate.run() 
+    - Sends prompt as-is (frontend should send text prompt)
+    - Supports image URL for frame continuity
+    """
+    if not REPLICATE_AVAILABLE:
+        raise HTTPException(
+            status_code=500,
+            detail="Replicate package not installed. Run: pip install replicate"
+        )
+    
+    try:
+        # Verify API key is set
+        get_replicate_api_key()
+        
+        model_id = request.model or "google/veo-3"
+        
+        # Build input params (matching standalone_video_creator.py)
+        input_data: Dict[str, Any] = {
+            "prompt": request.prompt,
+        }
+        
+        # Add aspect ratio
+        if request.aspectRatio:
+            input_data["aspect_ratio"] = request.aspectRatio
+        
+        # Add seed if provided
+        if request.seed is not None:
+            input_data["seed"] = request.seed
+        
+        # Add image URL if provided
+        if request.imageUrl:
+            input_data["image"] = request.imageUrl
+        
+        print(f"🎬 Starting Replicate generation with model: {model_id}")
+        print(f"📝 Prompt: {request.prompt[:100]}...")
+        if request.imageUrl:
+            print(f"🖼️ Using reference image: {request.imageUrl[:50]}...")
+        print(f"⚙️ Input params: {list(input_data.keys())}")
+        
+        # Create prediction ID
+        prediction_id = f"rep_{uuid.uuid4().hex[:12]}"
+        
+        # Initialize prediction status
+        predictions[prediction_id] = {
+            "status": "processing",
+            "url": None,
+            "output": None,
+            "error": None
+        }
+        
+        # Run in background thread (replicate.run() is blocking)
+        loop = asyncio.get_event_loop()
+        loop.run_in_executor(
+            executor,
+            run_replicate_sync,
+            prediction_id,
+            model_id,
+            input_data
+        )
+        
+        return ReplicateGenerateResponse(
+            id=prediction_id,
+            status="processing"
+        )
+    
+    except HTTPException:
+        raise
+    except Exception as e:
+        print(f"❌ Replicate generation error: {str(e)}")
+        import traceback
+        traceback.print_exc()
+        raise HTTPException(
+            status_code=500,
+            detail=f"Replicate generation failed: {str(e)}"
+        )
+
+
+@router.get("/replicate/status/{prediction_id}", response_model=ReplicateStatusResponse)
+async def get_prediction_status(prediction_id: str):
+    """
+    Get the status of a Replicate prediction.
+    """
+    if prediction_id not in predictions:
+        raise HTTPException(
+            status_code=404,
+            detail=f"Prediction not found: {prediction_id}"
+        )
+    
+    pred = predictions[prediction_id]
+    
+    return ReplicateStatusResponse(
+        status=pred["status"],
+        output=pred.get("output"),
+        url=pred.get("url"),
+        error=pred.get("error")
+    )
+
+
+@router.get("/replicate/models")
+async def list_available_models():
+    """List available video generation models"""
+    return {
+        "models": [
+            {
+                "id": "google/veo-3",
+                "name": "Google Veo 3 (Recommended)",
+                "description": "High-quality text/image-to-video generation",
+                "type": "text-to-video",
+                "supports_image": True
+            },
+            {
+                "id": "minimax/video-01",
+                "name": "MiniMax Video-01",
+                "description": "High-quality text-to-video generation",
+                "type": "text-to-video",
+                "supports_image": True
+            },
+            {
+                "id": "luma/ray",
+                "name": "Luma Ray",
+                "description": "Cinematic video generation",
+                "type": "text-to-video",
+                "supports_image": True
+            }
+        ]
+    }
+
+
+@router.post("/replicate/cancel/{prediction_id}")
+async def cancel_prediction(prediction_id: str):
+    """Cancel a running prediction (marks as cancelled in our store)"""
+    if prediction_id in predictions:
+        predictions[prediction_id]["status"] = "failed"
+        predictions[prediction_id]["error"] = "Cancelled by user"
+    
+    return JSONResponse(
+        status_code=200,
+        content={"message": "Prediction cancelled", "id": prediction_id}
+    )
+
+
+@router.get("/replicate/health")
+async def check_replicate_health():
+    """Check if Replicate is configured"""
+    api_key = os.getenv('REPLICATE_API_TOKEN')
+    return {
+        "configured": bool(api_key),
+        "package_installed": REPLICATE_AVAILABLE,
+        "message": "Replicate is ready" if (api_key and REPLICATE_AVAILABLE)
+                   else "Missing: " + (
+                       "REPLICATE_API_TOKEN" if not api_key else ""
+                   ) + (
+                       " replicate package" if not REPLICATE_AVAILABLE else ""
+                   )
+    }

api/video_export.py

@@ -0,0 +1,250 @@
+"""
+Video Export API
+Handles merging multiple video clips into a single output video
+"""
+
+from fastapi import APIRouter, HTTPException, UploadFile, File, Form
+from fastapi.responses import FileResponse, StreamingResponse
+from typing import List, Optional, Tuple
+import os
+import tempfile
+import subprocess
+import json
+from pathlib import Path
+
+router = APIRouter()
+
+
+def get_video_dimensions(video_path: Path) -> Tuple[int, int]:
+    """Get video width and height using ffprobe"""
+    try:
+        cmd = [
+            'ffprobe',
+            '-v', 'error',
+            '-select_streams', 'v:0',
+            '-show_entries', 'stream=width,height',
+            '-of', 'json',
+            str(video_path)
+        ]
+        result = subprocess.run(cmd, capture_output=True, text=True, timeout=10)
+        if result.returncode == 0:
+            data = json.loads(result.stdout)
+            streams = data.get('streams', [])
+            if streams:
+                width = streams[0].get('width', 1080)
+                height = streams[0].get('height', 1920)
+                return (width, height)
+    except Exception as e:
+        print(f"⚠️ Could not detect video dimensions: {e}")
+    
+    # Default to 9:16 portrait if detection fails
+    return (1080, 1920)
+
+
+@router.post("/export/merge")
+async def merge_videos(
+    clips_data: str = Form(...),  # JSON string with clip metadata
+    files: List[UploadFile] = File(...)
+):
+    """
+    Merge multiple video clips into a single output video
+    
+    clips_data: JSON string containing array of clip objects with:
+        - index: order in timeline
+        - startTime: start time in clip (seconds)
+        - endTime: end time in clip (seconds)
+        - type: 'video' or 'image'
+        - duration: duration for images (seconds)
+    
+    files: Video/image files in the same order as clips_data
+    """
+    try:
+        # Parse clips data
+        clips = json.loads(clips_data)
+        
+        if len(clips) != len(files):
+            raise HTTPException(
+                status_code=400,
+                detail=f"Mismatch: {len(clips)} clips but {len(files)} files"
+            )
+        
+        if len(clips) == 0:
+            raise HTTPException(status_code=400, detail="No clips to merge")
+        
+        # Create temporary directory for processing
+        with tempfile.TemporaryDirectory() as temp_dir:
+            temp_path = Path(temp_dir)
+            
+            # Save all uploaded files
+            file_paths = []
+            for i, file in enumerate(files):
+                clip = clips[i]
+                file_path = temp_path / f"input_{i}.{file.filename.split('.')[-1] if '.' in file.filename else 'mp4'}"
+                
+                with open(file_path, 'wb') as f:
+                    content = await file.read()
+                    f.write(content)
+                
+                file_paths.append(file_path)
+            
+            # Detect dimensions from first video to preserve aspect ratio
+            target_width, target_height = get_video_dimensions(file_paths[0])
+            print(f"📐 Detected video dimensions: {target_width}x{target_height}")
+            
+            # Build FFmpeg command
+            output_path = temp_path / "output.mp4"
+            
+            # Helper function to check if video has audio stream
+            def has_audio_stream(video_path: Path) -> bool:
+                """Check if video file has an audio stream"""
+                try:
+                    cmd = [
+                        'ffprobe',
+                        '-v', 'error',
+                        '-select_streams', 'a',
+                        '-show_entries', 'stream=codec_type',
+                        '-of', 'json',
+                        str(video_path)
+                    ]
+                    result = subprocess.run(cmd, capture_output=True, text=True, timeout=10)
+                    if result.returncode == 0:
+                        import json as json_lib
+                        data = json_lib.loads(result.stdout)
+                        streams = data.get('streams', [])
+                        return len(streams) > 0
+                    return False
+                except Exception:
+                    return False
+            
+            # Build filter complex - process clips in order
+            filter_parts = []
+            input_args = []
+            concat_inputs = []
+            
+            # Process all clips in order
+            input_index = 0
+            for clip_idx, clip in enumerate(clips):
+                file_path = file_paths[clip_idx]
+                
+                if clip['type'] == 'video':
+                    clip_duration = clip['endTime'] - clip['startTime']
+                    input_args.extend(['-i', str(file_path)])
+                    
+                    # Check if video has audio
+                    has_audio = has_audio_stream(file_path)
+                    
+                    # Trim video and scale to match first video's dimensions
+                    # Using scale with force_original_aspect_ratio to handle any size differences
+                    filter_parts.append(
+                        f"[{input_index}:v]trim=start={clip['startTime']}:end={clip['endTime']},"
+                        f"setpts=PTS-STARTPTS,"
+                        f"scale={target_width}:{target_height}:force_original_aspect_ratio=decrease,"
+                        f"pad={target_width}:{target_height}:(ow-iw)/2:(oh-ih)/2,"
+                        f"setsar=1[v{clip_idx}];"
+                    )
+                    
+                    if has_audio:
+                        # Use existing audio stream
+                        filter_parts.append(
+                            f"[{input_index}:a]atrim=start={clip['startTime']}:end={clip['endTime']},"
+                            f"asetpts=PTS-STARTPTS[a{clip_idx}];"
+                        )
+                    else:
+                        # Generate silent audio for videos without audio
+                        filter_parts.append(
+                            f"anullsrc=channel_layout=stereo:sample_rate=44100,atrim=0:{clip_duration},"
+                            f"asetpts=PTS-STARTPTS[a{clip_idx}];"
+                        )
+                    
+                    input_index += 1
+                else:
+                    # Image clip
+                    clip_duration = clip.get('duration', 3.0)  # Default 3 seconds for images
+                    input_args.extend(['-loop', '1', '-t', str(clip_duration), '-i', str(file_path)])
+                    
+                    # Scale image to match video dimensions
+                    filter_parts.append(
+                        f"[{input_index}:v]scale={target_width}:{target_height}:force_original_aspect_ratio=decrease,"
+                        f"pad={target_width}:{target_height}:(ow-iw)/2:(oh-ih)/2,"
+                        f"setsar=1,format=yuv420p[v{clip_idx}];"
+                    )
+                    # Generate silent audio
+                    filter_parts.append(
+                        f"anullsrc=channel_layout=stereo:sample_rate=44100,atrim=0:{clip_duration},"
+                        f"asetpts=PTS-STARTPTS[a{clip_idx}];"
+                    )
+                    
+                    input_index += 1
+                
+                # Add to concat inputs in order
+                concat_inputs.append(f"[v{clip_idx}][a{clip_idx}]")
+            
+            # Build complete filter complex
+            filter_complex = ''.join(filter_parts)
+            filter_complex += f"{''.join(concat_inputs)}concat=n={len(clips)}:v=1:a=1[outv][outa]"
+            
+            # Build FFmpeg command
+            ffmpeg_cmd = [
+                'ffmpeg',
+                *input_args,
+                '-filter_complex', filter_complex,
+                '-map', '[outv]',
+                '-map', '[outa]',
+                '-c:v', 'libx264',
+                '-c:a', 'aac',
+                '-movflags', '+faststart',
+                '-y',  # Overwrite output
+                str(output_path)
+            ]
+            
+            print(f"🎬 Running FFmpeg merge with dimensions: {target_width}x{target_height}")
+            
+            # Run FFmpeg
+            result = subprocess.run(
+                ffmpeg_cmd,
+                capture_output=True,
+                text=True,
+                timeout=300  # 5 minute timeout
+            )
+            
+            if result.returncode != 0:
+                print(f"❌ FFmpeg error: {result.stderr}")
+                raise HTTPException(
+                    status_code=500,
+                    detail=f"FFmpeg failed: {result.stderr[:500]}"
+                )
+            
+            if not output_path.exists():
+                raise HTTPException(status_code=500, detail="Output file was not created")
+            
+            # Read the entire file into memory before temp directory is deleted
+            print(f"📦 Reading merged video file ({output_path.stat().st_size / 1024 / 1024:.2f} MB)...")
+            with open(output_path, 'rb') as f:
+                video_content = f.read()
+            
+            print(f"✅ Video merged successfully: {target_width}x{target_height}")
+            
+            # Return the merged video file
+            def generate():
+                # Yield in chunks to avoid loading entire file in memory at once
+                chunk_size = 8192
+                for i in range(0, len(video_content), chunk_size):
+                    yield video_content[i:i + chunk_size]
+            
+            return StreamingResponse(
+                generate(),
+                media_type="video/mp4",
+                headers={
+                    "Content-Disposition": "attachment; filename=exported-video.mp4",
+                    "Content-Type": "video/mp4",
+                    "Content-Length": str(len(video_content))
+                }
+            )
+    
+    except json.JSONDecodeError as e:
+        raise HTTPException(status_code=400, detail=f"Invalid JSON: {str(e)}")
+    except subprocess.TimeoutExpired:
+        raise HTTPException(status_code=504, detail="Video processing timed out")
+    except Exception as e:
+        print(f"❌ Export error: {str(e)}")
+        raise HTTPException(status_code=500, detail=f"Export failed: {str(e)}")

api/video_generation.py

@@ -0,0 +1,614 @@
+"""
+Video Generation API endpoints
+Handles KIE API integration with SSE support for real-time updates
+"""
+
+from fastapi import APIRouter, HTTPException, Request
+from fastapi.responses import StreamingResponse, JSONResponse, Response
+from pydantic import BaseModel
+from typing import List, Optional, Dict, Any
+import httpx
+import asyncio
+import json
+import os
+from datetime import datetime
+
+from utils.image_processor import compress_and_store_image
+from utils.storage import video_results, sse_clients, cleanup_old_results
+
+router = APIRouter()
+
+KIE_API_BASE = "https://api.kie.ai"
+
+# Request/Response Models
+class VideoGenerationRequest(BaseModel):
+    prompt: Any  # Can be string (legacy) or dict/object (structured JSON)
+    imageUrls: Optional[List[str]] = []
+    model: Optional[str] = "veo3_fast"
+    aspectRatio: Optional[str] = "9:16"
+    generationType: Optional[str] = None
+    seeds: Optional[int] = None  # Seed for consistent lighting/style (e.g., 12005)
+    voiceType: Optional[str] = None  # Voice type for audio generation (e.g., "Deep", "Warm", "Crisp", "None")
+
+class VideoExtendRequest(BaseModel):
+    taskId: str
+    prompt: Any  # Can be string or structured JSON
+    seeds: Optional[int] = None
+    watermark: Optional[str] = None
+    voiceType: Optional[str] = None  # Voice type for audio generation
+
+class VideoGenerationResponse(BaseModel):
+    taskId: str
+    status: str
+
+class CallbackData(BaseModel):
+    code: int
+    msg: str
+    data: Optional[Dict[str, Any]] = None
+
+# Helper functions
+def get_kie_api_key():
+    """Get KIE API key from environment"""
+    api_key = os.getenv('KIE_API_KEY')
+    if not api_key:
+        raise HTTPException(
+            status_code=500,
+            detail="KIE_API_KEY not configured on server."
+        )
+    return api_key
+
+async def send_sse_event(task_id: str, data: dict):
+    """Send Server-Sent Event to connected client"""
+    if task_id in sse_clients:
+        queue = sse_clients[task_id]
+        await queue.put(data)
+
+# Endpoints
+@router.post("/veo/generate", response_model=VideoGenerationResponse)
+async def generate_video(request: VideoGenerationRequest, req: Request):
+    """
+    Generate video using KIE Veo 3.1 API
+    Supports text-to-video and image-to-video generation
+    """
+    try:
+        api_key = get_kie_api_key()
+        
+        # Build public URL for callback
+        public_url = os.getenv('PUBLIC_URL', f"http://localhost:{os.getenv('SERVER_PORT', 4000)}")
+        callback_url = f"{public_url}/api/veo/callback"
+        
+        # Process image URLs
+        public_image_urls = []
+        if request.imageUrls:
+            print(f"📷 Processing {len(request.imageUrls)} images...")
+            for image_url in request.imageUrls:
+                # If it's already a public URL, use it as-is
+                if image_url.startswith(('http://', 'https://')):
+                    print(f"   Using external URL: {image_url}")
+                    public_image_urls.append(image_url)
+                else:
+                    # Compress and host the data URL
+                    hosted_url = await compress_and_store_image(image_url, public_url)
+                    print(f"   Hosted image: {hosted_url}")
+                    public_image_urls.append(hosted_url)
+        
+        # Determine generation type
+        generation_type = request.generationType
+        if not generation_type:
+            generation_type = "FIRST_AND_LAST_FRAMES_2_VIDEO" if public_image_urls else "TEXT_2_VIDEO"
+        
+        # Log prompt format and seed
+        if isinstance(request.prompt, dict):
+            print(f"📝 Sending structured JSON prompt to Veo 3.1")
+        else:
+            print(f"📝 Sending text prompt to Veo 3.1")
+        
+        if request.seeds:
+            print(f"🎲 Using seed: {request.seeds} (warm, flattering lighting)")
+        
+        # Call KIE API
+        async with httpx.AsyncClient(timeout=30.0) as client:
+            payload = {
+                "prompt": request.prompt,  # Can be string or structured JSON object
+                "imageUrls": public_image_urls,
+                "model": request.model,
+                "aspectRatio": request.aspectRatio,
+                "generationType": generation_type,
+                "enableTranslation": True,
+                "callBackUrl": callback_url
+            }
+            
+            # Add optional seed parameter
+            if request.seeds is not None:
+                payload["seeds"] = request.seeds
+            
+            # Add voice type for audio generation (if not "None")
+            if request.voiceType and request.voiceType.lower() != "none":
+                payload["voiceType"] = request.voiceType
+                print(f"🎤 Using voice type: {request.voiceType}")
+            else:
+                print(f"🔇 No voice/audio requested (voiceType: {request.voiceType})")
+            
+            response = await client.post(
+                f"{KIE_API_BASE}/api/v1/veo/generate",
+                headers={
+                    "Authorization": f"Bearer {api_key}",
+                    "Content-Type": "application/json"
+                },
+                json=payload
+            )
+        
+        # Log raw response for debugging
+        print(f"📡 KIE API response status: {response.status_code}")
+        
+        # Check HTTP status first
+        if response.status_code != 200:
+            error_text = response.text
+            content_type = response.headers.get('content-type', '').lower()
+            
+            # Handle HTML error responses (like 502 Bad Gateway pages)
+            if 'text/html' in content_type or error_text.strip().startswith('<!DOCTYPE') or error_text.strip().startswith('<html'):
+                # Extract meaningful error from HTML if possible
+                error_message = f"KIE API service unavailable (HTTP {response.status_code})"
+                
+                # Try to extract title or error message from HTML
+                if '<title>' in error_text:
+                    import re
+                    title_match = re.search(r'<title>(.*?)</title>', error_text, re.IGNORECASE | re.DOTALL)
+                    if title_match:
+                        title = title_match.group(1).strip()
+                        # Extract just the error part (e.g., "502: Bad gateway" from "kie.ai | 502: Bad gateway")
+                        if ':' in title:
+                            error_message = f"KIE API error: {title.split('|')[-1].strip()}"
+                        else:
+                            error_message = f"KIE API error: {title}"
+                
+                print(f"❌ KIE API HTTP error: {response.status_code} - {error_message}")
+                raise HTTPException(
+                    status_code=502,  # Bad Gateway - the KIE API is down/unavailable
+                    detail=error_message
+                )
+            else:
+                # Non-HTML error response, try to extract JSON error if possible
+                try:
+                    error_data = response.json()
+                    error_message = error_data.get('msg') or error_data.get('message') or error_data.get('detail') or f"KIE API error (HTTP {response.status_code})"
+                except (json.JSONDecodeError, ValueError):
+                    # Not JSON, use text (truncated)
+                    error_message = error_text[:200] if len(error_text) > 200 else error_text
+                
+                print(f"❌ KIE API HTTP error: {response.status_code} - {error_message[:200]}")
+            raise HTTPException(
+                status_code=response.status_code,
+                    detail=f"KIE API error: {error_message}"
+            )
+        
+        result = response.json()
+        print(f"📡 KIE API result code: {result.get('code')}, msg: {result.get('msg')}")
+        
+        if result.get('code') != 200:
+            raise HTTPException(
+                status_code=result.get('code', 500),
+                detail=result.get('msg', 'KIE API request failed')
+            )
+        
+        task_id = result['data']['taskId']
+        print(f"✅ Video generation started: {task_id}")
+        
+        return VideoGenerationResponse(
+            taskId=task_id,
+            status="processing"
+        )
+    
+    except HTTPException:
+        raise
+    except httpx.HTTPStatusError as e:
+        error_text = e.response.text
+        content_type = e.response.headers.get('content-type', '').lower()
+        
+        # Handle HTML error responses
+        if 'text/html' in content_type or error_text.strip().startswith('<!DOCTYPE') or error_text.strip().startswith('<html'):
+            error_msg = f"KIE API service unavailable (HTTP {e.response.status_code})"
+            # Try to extract meaningful error from HTML
+            if '<title>' in error_text:
+                import re
+                title_match = re.search(r'<title>(.*?)</title>', error_text, re.IGNORECASE | re.DOTALL)
+                if title_match:
+                    title = title_match.group(1).strip()
+                    if ':' in title:
+                        error_msg = f"KIE API error: {title.split('|')[-1].strip()}"
+        else:
+            # Try to extract JSON error if possible
+            try:
+                error_data = e.response.json()
+                error_msg = error_data.get('msg') or error_data.get('message') or error_data.get('detail') or f"KIE API error (HTTP {e.response.status_code})"
+            except (json.JSONDecodeError, ValueError):
+                error_msg = error_text[:200] if len(error_text) > 200 else error_text
+        
+        print(f"❌ {error_msg}")
+        raise HTTPException(status_code=502 if 'text/html' in content_type else e.response.status_code, detail=error_msg)
+    except httpx.RequestError as e:
+        error_msg = f"KIE API request error: {type(e).__name__} - {str(e)}"
+        print(f"❌ {error_msg}")
+        raise HTTPException(status_code=502, detail=error_msg)
+    except json.JSONDecodeError as e:
+        error_msg = f"Invalid JSON response from KIE API. The service may be unavailable."
+        print(f"❌ JSON decode error: {str(e)}")
+        raise HTTPException(status_code=502, detail=error_msg)
+    except Exception as e:
+        import traceback
+        error_msg = f"{type(e).__name__}: {str(e)}"
+        print(f"❌ Video generation error: {error_msg}")
+        traceback.print_exc()
+        raise HTTPException(
+            status_code=500,
+            detail=f"Video generation request failed: {error_msg}"
+        )
+
+@router.post("/veo/callback")
+async def veo_callback(callback_data: CallbackData):
+    """
+    Callback endpoint for KIE API
+    Receives video generation status updates
+    """
+    try:
+        data = callback_data.data or {}
+        task_id = data.get('taskId')
+        info = data.get('info', {})
+        fallback_flag = data.get('fallbackFlag')
+        
+        print(f"📥 Callback received for task {task_id}: code={callback_data.code}, msg={callback_data.msg}")
+        
+        # Store result
+        video_results[task_id] = {
+            'code': callback_data.code,
+            'msg': callback_data.msg,
+            'taskId': task_id,
+            'info': info,
+            'fallbackFlag': fallback_flag,
+            'timestamp': datetime.now().timestamp()
+        }
+        
+        # Send SSE update to client
+        if callback_data.code == 200 and info:
+            await send_sse_event(task_id, {
+                'status': 'succeeded',
+                'url': info.get('resultUrls', [None])[0],
+                'resultUrls': info.get('resultUrls', []),
+                'originUrls': info.get('originUrls', []),
+                'resolution': info.get('resolution'),
+                'fallbackFlag': fallback_flag
+            })
+        else:
+            await send_sse_event(task_id, {
+                'status': 'failed',
+                'error': callback_data.msg,
+                'code': callback_data.code
+            })
+        
+        # Clean up old results
+        cleanup_old_results()
+        
+        return JSONResponse(
+            status_code=200,
+            content={'code': 200, 'msg': 'success'}
+        )
+    
+    except Exception as e:
+        print(f"❌ Callback processing error: {str(e)}")
+        raise HTTPException(
+            status_code=500,
+            detail="Failed to process callback"
+        )
+
+
+@router.post("/veo/extend", response_model=VideoGenerationResponse)
+async def extend_video(request: VideoExtendRequest):
+    """
+    Extend an existing video using KIE Veo 3.1 extend API
+    Takes an existing taskId and extends it with new prompt
+    """
+    try:
+        api_key = get_kie_api_key()
+        
+        # Build public URL for callback
+        public_url = os.getenv('PUBLIC_URL', f"http://localhost:{os.getenv('SERVER_PORT', 4000)}")
+        callback_url = f"{public_url}/api/veo/callback"
+        
+        print(f"🎬 Extending video from task: {request.taskId}")
+        
+        # Log prompt format and seed
+        if isinstance(request.prompt, dict):
+            print(f"📝 Extending with structured JSON prompt")
+        else:
+            print(f"📝 Extending with text prompt")
+        
+        if request.seeds:
+            print(f"🎲 Using seed: {request.seeds} (consistent lighting)")
+        
+        # Call KIE extend API
+        async with httpx.AsyncClient(timeout=30.0) as client:
+            payload = {
+                "taskId": request.taskId,
+                "prompt": request.prompt,
+                "callBackUrl": callback_url
+            }
+            
+            # Add optional parameters
+            if request.seeds is not None:
+                payload["seeds"] = request.seeds
+            if request.watermark:
+                payload["watermark"] = request.watermark
+            if request.voiceType and request.voiceType.lower() != "none":
+                payload["voiceType"] = request.voiceType
+                print(f"🎤 Using voice type: {request.voiceType}")
+            else:
+                print(f"🔇 No voice/audio requested (voiceType: {request.voiceType})")
+            
+            response = await client.post(
+                f"{KIE_API_BASE}/api/v1/veo/extend",
+                headers={
+                    "Authorization": f"Bearer {api_key}",
+                    "Content-Type": "application/json"
+                },
+                json=payload
+            )
+        
+        # Check for HTML error responses
+        if response.status_code != 200:
+            error_text = response.text
+            content_type = response.headers.get('content-type', '').lower()
+            
+            if 'text/html' in content_type or error_text.strip().startswith('<!DOCTYPE') or error_text.strip().startswith('<html'):
+                error_message = f"KIE API service unavailable (HTTP {response.status_code})"
+                if '<title>' in error_text:
+                    import re
+                    title_match = re.search(r'<title>(.*?)</title>', error_text, re.IGNORECASE | re.DOTALL)
+                    if title_match:
+                        title = title_match.group(1).strip()
+                        if ':' in title:
+                            error_message = f"KIE API error: {title.split('|')[-1].strip()}"
+                raise HTTPException(status_code=502, detail=error_message)
+        
+        result = response.json()
+        
+        if result.get('code') != 200:
+            raise HTTPException(
+                status_code=result.get('code', 500),
+                detail=result.get('msg', 'KIE extend API request failed')
+            )
+        
+        new_task_id = result['data']['taskId']
+        print(f"✅ Video extension started: {new_task_id}")
+        
+        return VideoGenerationResponse(
+            taskId=new_task_id,
+            status="processing"
+        )
+    
+    except HTTPException:
+        raise
+    except httpx.HTTPStatusError as e:
+        error_text = e.response.text
+        content_type = e.response.headers.get('content-type', '').lower()
+        
+        if 'text/html' in content_type or error_text.strip().startswith('<!DOCTYPE') or error_text.strip().startswith('<html'):
+            error_msg = f"KIE API service unavailable (HTTP {e.response.status_code})"
+            if '<title>' in error_text:
+                import re
+                title_match = re.search(r'<title>(.*?)</title>', error_text, re.IGNORECASE | re.DOTALL)
+                if title_match:
+                    title = title_match.group(1).strip()
+                    if ':' in title:
+                        error_msg = f"KIE API error: {title.split('|')[-1].strip()}"
+        else:
+            try:
+                error_data = e.response.json()
+                error_msg = error_data.get('msg') or error_data.get('message') or error_data.get('detail') or f"KIE API error (HTTP {e.response.status_code})"
+            except (json.JSONDecodeError, ValueError):
+                error_msg = error_text[:200] if len(error_text) > 200 else error_text
+        
+        print(f"❌ {error_msg}")
+        raise HTTPException(status_code=502 if 'text/html' in content_type else e.response.status_code, detail=error_msg)
+    except httpx.RequestError as e:
+        error_msg = f"KIE API request error: {type(e).__name__} - {str(e)}"
+        print(f"❌ {error_msg}")
+        raise HTTPException(status_code=502, detail=error_msg)
+    except json.JSONDecodeError as e:
+        error_msg = f"Invalid JSON response from KIE API. The service may be unavailable."
+        print(f"❌ JSON decode error: {str(e)}")
+        raise HTTPException(status_code=502, detail=error_msg)
+    except Exception as e:
+        import traceback
+        error_msg = f"{type(e).__name__}: {str(e)}"
+        print(f"❌ Video extension error: {error_msg}")
+        traceback.print_exc()
+        raise HTTPException(
+            status_code=500,
+            detail=f"Video extension error: {error_msg}"
+        )
+
+
+@router.get("/veo/events/{task_id}")
+async def sse_events(task_id: str):
+    """
+    Server-Sent Events endpoint for real-time updates
+    """
+    async def event_generator():
+        # Create queue for this client
+        queue = asyncio.Queue()
+        sse_clients[task_id] = queue
+        
+        print(f"🔌 SSE client connected for task {task_id}")
+        
+        try:
+            # Check if result already exists
+            if task_id in video_results:
+                result = video_results[task_id]
+                if result['code'] == 200 and result.get('info'):
+                    info = result['info']
+                    event_data = {
+                        'status': 'succeeded',
+                        'url': info.get('resultUrls', [None])[0],
+                        'resultUrls': info.get('resultUrls', []),
+                        'originUrls': info.get('originUrls', []),
+                        'resolution': info.get('resolution'),
+                        'fallbackFlag': result.get('fallbackFlag')
+                    }
+                else:
+                    event_data = {
+                        'status': 'failed',
+                        'error': result['msg'],
+                        'code': result['code']
+                    }
+                yield f"data: {json.dumps(event_data)}\n\n"
+            
+            # Stream events
+            while True:
+                data = await queue.get()
+                yield f"data: {json.dumps(data)}\n\n"
+        
+        except asyncio.CancelledError:
+            print(f"🔌 SSE client disconnected for task {task_id}")
+        finally:
+            if task_id in sse_clients:
+                del sse_clients[task_id]
+    
+    return StreamingResponse(
+        event_generator(),
+        media_type="text/event-stream",
+        headers={
+            "Cache-Control": "no-cache",
+            "Connection": "keep-alive"
+        }
+    )
+
+@router.get("/veo/status/{task_id}")
+async def get_video_status(task_id: str):
+    """
+    Get video generation status from KIE API
+    """
+    try:
+        api_key = get_kie_api_key()
+        
+        async with httpx.AsyncClient(timeout=30.0) as client:
+            response = await client.get(
+                f"{KIE_API_BASE}/api/v1/veo/video/{task_id}",
+                headers={
+                    "Authorization": f"Bearer {api_key}"
+                }
+            )
+        
+        # Check for HTML error responses
+        if response.status_code != 200:
+            error_text = response.text
+            content_type = response.headers.get('content-type', '').lower()
+            
+            if 'text/html' in content_type or error_text.strip().startswith('<!DOCTYPE') or error_text.strip().startswith('<html'):
+                error_message = f"KIE API service unavailable (HTTP {response.status_code})"
+                if '<title>' in error_text:
+                    import re
+                    title_match = re.search(r'<title>(.*?)</title>', error_text, re.IGNORECASE | re.DOTALL)
+                    if title_match:
+                        title = title_match.group(1).strip()
+                        if ':' in title:
+                            error_message = f"KIE API error: {title.split('|')[-1].strip()}"
+                raise HTTPException(status_code=502, detail=error_message)
+        
+        result = response.json()
+        
+        if result.get('code') != 200:
+            raise HTTPException(
+                status_code=result.get('code', 500),
+                detail=result.get('msg', 'Failed to get video status')
+            )
+        
+        # Transform response
+        status = result['data'].get('status')
+        video_url = result['data'].get('videoUrl')
+        
+        return {
+            'status': 'succeeded' if status == 'completed' else 'failed' if status == 'failed' else 'processing',
+            'output': video_url if status == 'completed' else None,
+            'url': video_url if status == 'completed' else None
+        }
+    
+    except HTTPException:
+        raise
+    except httpx.HTTPStatusError as e:
+        error_text = e.response.text
+        content_type = e.response.headers.get('content-type', '').lower()
+        
+        if 'text/html' in content_type or error_text.strip().startswith('<!DOCTYPE') or error_text.strip().startswith('<html'):
+            error_msg = f"KIE API service unavailable (HTTP {e.response.status_code})"
+            if '<title>' in error_text:
+                import re
+                title_match = re.search(r'<title>(.*?)</title>', error_text, re.IGNORECASE | re.DOTALL)
+                if title_match:
+                    title = title_match.group(1).strip()
+                    if ':' in title:
+                        error_msg = f"KIE API error: {title.split('|')[-1].strip()}"
+        else:
+            try:
+                error_data = e.response.json()
+                error_msg = error_data.get('msg') or error_data.get('message') or error_data.get('detail') or f"KIE API error (HTTP {e.response.status_code})"
+            except (json.JSONDecodeError, ValueError):
+                error_msg = error_text[:200] if len(error_text) > 200 else error_text
+        
+        print(f"❌ {error_msg}")
+        raise HTTPException(status_code=502 if 'text/html' in content_type else e.response.status_code, detail=error_msg)
+    except httpx.RequestError as e:
+        error_msg = f"KIE API request error: {type(e).__name__} - {str(e)}"
+        print(f"❌ {error_msg}")
+        raise HTTPException(status_code=502, detail=error_msg)
+    except json.JSONDecodeError as e:
+        error_msg = f"Invalid JSON response from KIE API. The service may be unavailable."
+        print(f"❌ JSON decode error: {str(e)}")
+        raise HTTPException(status_code=502, detail=error_msg)
+    except Exception as e:
+        import traceback
+        error_msg = f"{type(e).__name__}: {str(e)}"
+        print(f"❌ Status check error: {error_msg}")
+        traceback.print_exc()
+        raise HTTPException(
+            status_code=500,
+            detail=f"Failed to check video status: {error_msg}"
+        )
+
+@router.get("/veo/download")
+async def download_video(url: str):
+    """
+    Download video from external URL
+    Proxies the video stream to avoid CORS issues
+    """
+    if not url:
+        raise HTTPException(status_code=400, detail="Missing url query parameter")
+    
+    try:
+        async with httpx.AsyncClient(timeout=60.0) as client:
+            response = await client.get(url)
+            if response.status_code != 200:
+                raise HTTPException(
+                    status_code=response.status_code,
+                    detail="Failed to download asset"
+                )
+            
+            # Return the video content directly
+            return Response(
+                content=response.content,
+                media_type=response.headers.get('content-type', 'video/mp4'),
+                headers={
+                    'Content-Disposition': 'attachment; filename="video.mp4"',
+                    'Content-Length': str(len(response.content))
+                }
+            )
+    
+    except HTTPException:
+        raise
+    except Exception as e:
+        print(f"❌ Download error: {str(e)}")
+        raise HTTPException(
+            status_code=500,
+            detail=f"Failed to download asset: {str(e)}"
+        )
+

api/whisper_service.py

@@ -0,0 +1,166 @@
+"""
+Whisper-based Video Analysis Service
+Optimized endpoint that finds trim point and extracts frame in one call
+"""
+
+from fastapi import APIRouter, HTTPException
+from pydantic import BaseModel
+from typing import Optional
+import tempfile
+import os
+import httpx
+
+router = APIRouter()
+
+# Check Whisper availability
+try:
+    from utils.whisper_trim import find_last_word_timestamp, transcribe_video, is_whisper_available
+    from utils.video_processor import extract_frame, get_video_info
+    WHISPER_AVAILABLE = is_whisper_available()
+except ImportError:
+    WHISPER_AVAILABLE = False
+
+
+class WhisperAnalyzeRequest(BaseModel):
+    video_url: str
+    dialogue: str  # The expected dialogue/script for this segment
+    buffer_time: float = 0.3  # Time after last word for frame extraction
+    model_size: str = "base"  # Whisper model size
+
+
+class WhisperAnalyzeResponse(BaseModel):
+    success: bool
+    last_word_timestamp: Optional[float] = None  # When last word ends
+    trim_point: Optional[float] = None  # Recommended trim point (last_word + buffer)
+    frame_timestamp: Optional[float] = None  # Where frame was extracted
+    frame_base64: Optional[str] = None  # Base64 encoded frame image
+    video_duration: float = 0  # Total video duration
+    transcribed_text: Optional[str] = None  # What Whisper actually heard (for consistency check)
+    error: Optional[str] = None
+
+
+@router.post("/whisper/analyze-and-extract", response_model=WhisperAnalyzeResponse)
+async def analyze_and_extract_frame(request: WhisperAnalyzeRequest):
+    """
+    Analyze video with Whisper to find last spoken word,
+    then extract frame at that point for visual continuity.
+    
+    This is the optimized flow:
+    1. Download video
+    2. Use Whisper to find last spoken word timestamp
+    3. Extract frame at (last_word_time + buffer)
+    4. Return frame + trim metadata
+    
+    The trim metadata can be used later during final merge.
+    """
+    temp_video = None
+    
+    try:
+        # Download video to temp file
+        print(f"🎤 Downloading video for Whisper analysis...")
+        temp_video = tempfile.mktemp(suffix='.mp4')
+        
+        async with httpx.AsyncClient(timeout=120.0) as client:
+            response = await client.get(request.video_url)
+            if response.status_code != 200:
+                return WhisperAnalyzeResponse(
+                    success=False,
+                    error=f"Failed to download video: {response.status_code}"
+                )
+            
+            with open(temp_video, 'wb') as f:
+                f.write(response.content)
+        
+        # Get video duration
+        video_info = get_video_info(temp_video)
+        video_duration = float(video_info['format']['duration'])
+        print(f"📹 Video duration: {video_duration:.2f}s")
+        
+        # Try Whisper-based analysis
+        last_word_time = None
+        frame_base64 = None
+        trim_point = None
+        frame_timestamp = None
+        transcribed_text = None
+        
+        if WHISPER_AVAILABLE:
+            try:
+                print(f"🎤 Running Whisper transcription (model: {request.model_size})...")
+                
+                # Get full transcription and last word timestamp
+                transcribed_text, last_word_time = transcribe_video(
+                    video_path=temp_video,
+                    model_size=request.model_size
+                )
+                
+                if last_word_time and last_word_time > 0:
+                    print(f"✅ Last spoken word at: {last_word_time:.2f}s")
+                    
+                    # Calculate trim point and frame timestamp
+                    trim_point = min(last_word_time + request.buffer_time, video_duration)
+                    frame_timestamp = min(last_word_time + request.buffer_time, video_duration - 0.1)
+                    
+                    print(f"📍 Trim point: {trim_point:.2f}s, Frame at: {frame_timestamp:.2f}s")
+                else:
+                    print(f"⚠️ Could not find last word, using fallback")
+                    
+            except Exception as whisper_err:
+                print(f"⚠️ Whisper analysis failed: {str(whisper_err)}")
+        else:
+            print("⚠️ Whisper not available, using fallback")
+        
+        # Fallback: use end of video
+        if frame_timestamp is None:
+            frame_timestamp = max(0, video_duration - 0.5)
+            trim_point = video_duration
+            print(f"📍 Fallback: Frame at {frame_timestamp:.2f}s (near end)")
+        
+        # Extract frame at the calculated timestamp (uncompressed for continuity)
+        print(f"📸 Extracting frame at {frame_timestamp:.2f}s")
+        frame_base64 = extract_frame(
+            video_path=temp_video,
+            timestamp=frame_timestamp,
+            return_base64=True,
+            compress=False  # No compression for continuity frames
+        )
+        print(f"✅ Frame extracted successfully")
+        
+        return WhisperAnalyzeResponse(
+            success=True,
+            last_word_timestamp=last_word_time,
+            trim_point=trim_point,
+            frame_timestamp=frame_timestamp,
+            frame_base64=frame_base64,
+            video_duration=video_duration,
+            transcribed_text=transcribed_text,
+            error=None
+        )
+        
+    except Exception as e:
+        print(f"❌ Whisper analyze error: {str(e)}")
+        import traceback
+        traceback.print_exc()
+        
+        return WhisperAnalyzeResponse(
+            success=False,
+            error=str(e)
+        )
+        
+    finally:
+        # Clean up temp file
+        if temp_video and os.path.exists(temp_video):
+            try:
+                os.remove(temp_video)
+            except:
+                pass
+
+
+@router.get("/whisper/status")
+async def whisper_status():
+    """Check if Whisper is available and ready"""
+    return {
+        "available": WHISPER_AVAILABLE,
+        "message": "Whisper is ready" if WHISPER_AVAILABLE 
+                   else "Whisper not installed. Run: pip install openai-whisper moviepy"
+    }
+

frontend/.gitignore

@@ -0,0 +1,24 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?

frontend/FLOW.md

@@ -0,0 +1,512 @@
+# Video Generation Flows
+
+## Overview
+
+```
+┌─────────────────────────────────────────────────────────────────────────────┐
+│                         VIDEO GENESIS STUDIO                                 │
+├─────────────────────────────────────────────────────────────────────────────┤
+│                                                                             │
+│   ┌─────────────┐                              ┌─────────────┐              │
+│   │             │                              │             │              │
+│   │  KLING AI   │         OR                   │  REPLICATE  │              │
+│   │   (KIE)     │                              │             │              │
+│   └──────┬──────┘                              └──────┬──────┘              │
+│          │                                            │                     │
+│          ▼                                            ▼                     │
+│   ┌─────────────┐                              ┌─────────────┐              │
+│   │ GPT-4o      │                              │ Simple      │              │
+│   │ Segmentation│                              │ Prompt      │              │
+│   └──────┬──────┘                              └──────┬──────┘              │
+│          │                                            │                     │
+│          ▼                                            ▼                     │
+│   ┌─────────────┐                              ┌─────────────┐              │
+│   │ Multi-Video │                              │ Single      │              │
+│   │ Generation  │                              │ Video Gen   │              │
+│   └─────────────┘                              └─────────────┘              │
+│                                                                             │
+└─────────────────────────────────────────────────────────────────────────────┘
+```
+
+---
+
+## Flow 1: Kling AI (Recommended)
+
+This is the **advanced flow** for professional UGC and talking head videos.
+
+### Two Generation Modes
+
+#### Mode A: 🎯 Frame Continuity (Recommended)
+**Best for visual consistency** - mirrors the Replicate approach from `standalone_video_creator.py`
+
+```
+┌─────────────────────────────────────────────────────────────────────────────┐
+│                    FRAME CONTINUITY FLOW                                     │
+├─────────────────────────────────────────────────────────────────────────────┤
+│                                                                             │
+│  Segment 1:                                                                 │
+│  ┌────────────────┐      ┌────────────────┐      ┌────────────────┐        │
+│  │ Original Image │ ───► │ Generate Video │ ───► │ Extract Last   │        │
+│  │ (your upload)  │      │   Segment 1    │      │    Frame       │        │
+│  └────────────────┘      └────────────────┘      └───────┬────────┘        │
+│                                                          │                  │
+│                                                          ▼                  │
+│  Segment 2:                                    ┌────────────────┐           │
+│  ┌────────────────┐      ┌────────────────┐   │ Last Frame     │           │
+│  │ Frame from     │ ◄─── │ Generate Video │ ◄─│ from Seg 1     │           │
+│  │ Segment 1      │      │   Segment 2    │   │ (new reference)│           │
+│  └────────────────┘      └───────┬────────┘   └────────────────┘           │
+│                                  │                                          │
+│                                  ▼                                          │
+│  Segment 3:              ┌────────────────┐                                 │
+│  ┌────────────────┐      │ Extract Last   │                                 │
+│  │ Frame from     │ ◄────│    Frame       │                                 │
+│  │ Segment 2      │      └────────────────┘                                 │
+│  └────────────────┘                                                         │
+│         │                                                                   │
+│         ▼                                                                   │
+│  ... continues until all segments complete ...                              │
+│                                                                             │
+└─────────────────────────────────────────────────────────────────────────────┘
+
+✅ BENEFITS:
+• Perfect visual continuity - each segment starts exactly where previous ended
+• Character appearance stays consistent across all segments
+• Scene/lighting matches between segments
+• Same approach that makes Replicate flow work so well
+```
+
+#### Mode B: ➕ Extend API
+**Faster but potentially less consistent** - uses Kling's native extend functionality
+
+```
+┌─────────────────────────────────────────────────────────────────────────────┐
+│                        EXTEND API FLOW                                       │
+├─────────────────────────────────────────────────────────────────────────────┤
+│                                                                             │
+│  ┌────────────────┐      ┌────────────────┐                                 │
+│  │ Original Image │ ───► │ Generate Video │ ───► taskId_1                   │
+│  │                │      │   Segment 1    │                                 │
+│  └────────────────┘      └────────────────┘                                 │
+│                                  │                                          │
+│                                  │ extend(taskId_1)                         │
+│                                  ▼                                          │
+│                          ┌────────────────┐                                 │
+│                          │ Extend Video   │ ───► taskId_2                   │
+│                          │   Segment 2    │                                 │
+│                          └────────────────┘                                 │
+│                                  │                                          │
+│                                  │ extend(taskId_2)                         │
+│                                  ▼                                          │
+│                          ┌────────────────┐                                 │
+│                          │ Extend Video   │ ───► taskId_3                   │
+│                          │   Segment 3    │                                 │
+│                          └────────────────┘                                 │
+│                                                                             │
+└─────────────────────────────────────────────────────────────────────────────┘
+
+⚠️ TRADEOFFS:
+• Faster (no frame extraction step)
+• May have slight visual drift between segments
+• Relies on Kling's internal continuity handling
+```
+
+### Complete Step-by-Step Flow
+
+```
+USER INPUT                    BACKEND                         EXTERNAL APIs
+─────────────────────────────────────────────────────────────────────────────
+
+┌──────────────────┐
+│ 1. Enter Script  │
+│    + Upload Image│
+│    + Settings    │
+│    + SELECT MODE │  ◄── NEW: Choose Frame Continuity or Extend
+└────────┬─────────┘
+         │
+         ▼
+┌──────────────────┐         ┌──────────────────┐
+│ 2. Submit Form   │────────►│ /api/generate-   │
+│                  │         │    prompts       │
+└──────────────────┘         └────────┬─────────┘
+                                      │
+                                      ▼
+                             ┌──────────────────┐         ┌──────────────────┐
+                             │ 3. GPT-4o        │────────►│ OpenAI API       │
+                             │    Analysis      │         │ (GPT-4o Vision)  │
+                             └────────┬─────────┘         └──────────────────┘
+                                      │
+                                      │ Returns structured
+                                      │ segments with:
+                                      │ - Character description
+                                      │ - Scene continuity
+                                      │ - Action timeline
+                                      │ - Dialogue sync
+                                      ▼
+┌──────────────────┐         ┌──────────────────┐
+│ 4. See segments  │◄────────│ Segments payload │
+│    preview       │         │ (2-10 segments)  │
+└────────┬─────────┘         └──────────────────┘
+         │
+         │ For each segment:
+         ▼
+┌──────────────────┐         ┌──────────────────┐         ┌──────────────────┐
+│ 5. Generating... │────────►│ /api/veo/        │────────►│ KIE Veo 3.1 API  │
+│    (progress UI) │         │    generate      │         │                  │
+└──────────────────┘         └────────┬─────────┘         └────────┬─────────┘
+                                      │                            │
+                                      │ SSE Events                 │
+                                      │◄───────────────────────────┘
+                                      │
+                                      ▼
+┌──────────────────┐         ┌──────────────────┐
+│ 6. Video Ready   │◄────────│ /api/veo/events/ │
+│    Download      │         │    {taskId}      │
+└──────────────────┘         └──────────────────┘
+         │
+         │ IF Frame Continuity mode:
+         │   └── Extract last frame → Use as next reference
+         │ IF Extend mode:
+         │   └── Use extend API with current taskId
+         ▼
+┌──────────────────┐
+│ 7. All Complete  │
+│    Download All  │
+└──────────────────┘
+```
+
+### Detailed Steps
+
+#### Step 1: User Input
+```
+┌─────────────────────────────────────────────────────────────┐
+│                     GENERATION FORM                         │
+├─────────────────────────────────────────────────────────────┤
+│                                                             │
+│  📝 Script (Required)                                       │
+│  ┌──────────────────────────────────────────────────��──┐   │
+│  │ "Hey everyone! Today I want to share something      │   │
+│  │ amazing with you. This product changed my life...   │   │
+│  │ Let me show you how it works..."                    │   │
+│  └─────────────────────────────────────────────────────┘   │
+│  Word count: 85 words → ~5 segments estimated              │
+│                                                             │
+│  🖼️ Character Image (Required)                             │
+│  ┌───────────────────┐                                     │
+│  │   [Drag & Drop]   │                                     │
+│  │   Your photo      │                                     │
+│  └───────────────────┘                                     │
+│                                                             │
+│  ⚙️ Settings                                               │
+│  ┌────────────┐ ┌────────────┐ ┌────────────┐             │
+│  │ Voice: Deep│ │Energy: Med │ │Camera: Std │             │
+│  └────────────┘ └────────────┘ └────────────┘             │
+│  ┌────────────┐ ┌────────────┐ ┌────────────┐             │
+│  │Ratio: 9:16 │ │Seed: 12005 │ │Style: UGC  │             │
+│  └────────────┘ └────────────┘ └────────────┘             │
+│                                                             │
+│  [🚀 Generate Video with AI]                               │
+│                                                             │
+└─────────────────────────────────────────────────────────────┘
+```
+
+#### Step 2-3: GPT-4o Prompt Generation
+The backend sends your script + image to GPT-4o which:
+
+1. **Analyzes the script** for natural breakpoints
+2. **Splits into ~8 second segments** (based on speaking pace)
+3. **Generates detailed prompts** for each segment:
+
+```json
+{
+  "segments": [
+    {
+      "segment_info": {
+        "segment_number": 1,
+        "total_segments": 5,
+        "duration": "8s",
+        "continuity_markers": {
+          "start_position": "facing camera, centered",
+          "end_position": "slight lean forward",
+          "start_expression": "neutral, friendly",
+          "end_expression": "engaged, excited"
+        }
+      },
+      "character_description": {
+        "current_state": "Young woman, warm smile, casual attire",
+        "voice_matching": "Deep, confident, natural pace"
+      },
+      "scene_continuity": {
+        "environment": "Modern living room, natural light",
+        "camera_position": "Medium shot, eye level",
+        "lighting_state": "Warm, soft shadows"
+      },
+      "action_timeline": {
+        "dialogue": "Hey everyone! Today I want to share...",
+        "synchronized_actions": {
+          "0:00-0:02": "Wave hello, direct eye contact",
+          "0:02-0:04": "Hands gesture outward",
+          "0:04-0:06": "Touch chest (sincerity)",
+          "0:06-0:08": "Lean slightly forward"
+        }
+      }
+    }
+  ]
+}
+```
+
+#### Step 4-5: Video Generation Loop
+For each segment:
+
+```
+┌─────────────────────────────────────────────────────────────┐
+│                  GENERATION PROGRESS                        │
+├─────────────────────────────────────────────────────────────┤
+│                                                             │
+│                    ╭──────────╮                             │
+│                   (          )                              │
+│                   │   45%    │                              │
+│                   (          )                              │
+│                    ╰──────────╯                             │
+│                                                             │
+│           🎬 Generating video 2 of 5...                    │
+│                                                             │
+│    ●────────────●────────────○────────────○────────────○    │
+│    ✓            ✓            ⟳                              │
+│   Seg 1       Seg 2       Seg 3       Seg 4       Seg 5    │
+│                                                             │
+│  ┌─────────────────────────────────────────────────────┐   │
+│  │ Processing: Uploaded image → KIE API → Rendering... │   │
+│  └─────────────────────────────────────────────────────┘   │
+│                                                             │
+│  ⏱️ Estimated time: 1-2 minutes per segment                │
+│                                                             │
+└─────────────────────────────────────────────────────────────┘
+```
+
+#### Step 6-7: Completion & Download
+
+```
+┌─────────────────────────────────────────────────────────────┐
+│                  GENERATION COMPLETE! ✅                    │
+├─────────────────────────────────────────────────────────────┤
+│                                                             │
+│         5 videos generated successfully                     │
+│                                                             │
+│  ┌─────────┐ ┌─────────┐ ┌─────────┐ ┌─────────┐ ┌─────────┐
+│  │ Seg 1   │ │ Seg 2   │ │ Seg 3   │ │ Seg 4   │ │ Seg 5   │
+│  │ ▶️      │ │ ▶️      │ │ ▶️      │ │ ▶️      │ │ ▶️      │
+│  │ ~8s     │ │ ~8s     │ │ ~8s     │ │ ~8s     │ │ ~8s     │
+│  │ [⬇️]    │ │ [⬇️]    │ │ [⬇️]    │ │ [⬇️]    │ │ [⬇️]    │
+│  └─────────┘ └─────────┘ └─────────┘ └─────────┘ └─────────┘
+│                                                             │
+│        [📥 Download All Videos]  [🔄 Generate More]        │
+│                                                             │
+└─────────────────────────────────────────────────────────────┘
+```
+
+---
+
+## Flow 2: Replicate (Flexible)
+
+This is the **simple flow** for creative experimentation.
+
+### Step-by-Step Flow
+
+```
+USER INPUT                    BACKEND                         EXTERNAL APIs
+─────────────────────────────────────────────────────────────────────────────
+
+┌──────────────────┐
+│ 1. Enter Prompt  │
+│    + Settings    │
+└────────┬─────────┘
+         │
+         ▼
+┌──────────────────┐         ┌──────────────────┐         ┌──────────────────┐
+│ 2. Submit        │────────►│ /api/replicate/  │────────►│ Replicate API    │
+│                  │         │    generate      │         │ (Various Models) │
+└──────────────────┘         └────────┬─────────┘         └────────┬─────────┘
+                                      │                            │
+                                      │                            │
+                                      ▼                            │
+┌──────────────────┐         ┌──────────────────┐                 │
+│ 3. Polling       │◄────────│ /api/replicate/  │◄────────────────┘
+│    for status    │         │    status/{id}   │
+└────────┬─────────┘         └──────────────────┘
+         │
+         ▼
+┌──────────────────┐
+│ 4. Video Ready   │
+│    Download      │
+└──────────────────┘
+```
+
+### Available Models
+
+```
+┌─────────────────────────────────────────────────────────────┐
+│                    REPLICATE MODELS                         │
+├─────────────────────────────────────────────────────────────┤
+│                                                             │
+│  ┌─────────────────────────────────────────────────────┐   │
+│  │ 🎬 minimax/video-01                                 │   │
+│  │    High-quality text-to-video generation            │   │
+│  │    Duration: 5s | Best for: General content         │   │
+│  └─────────────────────────────────────────────────────┘   │
+│                                                             │
+│  ┌─────────────────────────────────────────────────────┐   │
+│  │ 🎥 luma/ray                                         │   │
+│  │    Cinematic video generation                       │   │
+│  │    Duration: Variable | Best for: Artistic content  │   │
+│  └─────────────────────────────────────────────────────┘   │
+│                                                             │
+│  ┌─────────────────────────────────────────────────────┐   │
+│  │ 🖼️ stability-ai/stable-video-diffusion             │   │
+│  │    Image-to-video generation                        │   │
+│  │    Duration: 4s | Best for: Animating images        │   │
+│  └─────────────────────────────────────────────────────┘   │
+│                                                             │
+└─────────────────────────────────────────────────────────────┘
+```
+
+---
+
+## API Endpoints Reference
+
+### Kling AI Endpoints
+
+| Endpoint | Method | Description |
+|----------|--------|-------------|
+| `/api/generate-prompts` | POST | GPT-4o script analysis & segmentation |
+| `/api/upload-image` | POST | Upload character reference image |
+| `/api/veo/generate` | POST | Start video generation |
+| `/api/veo/extend` | POST | Extend existing video |
+| `/api/veo/events/{taskId}` | GET | SSE stream for real-time updates |
+| `/api/veo/status/{taskId}` | GET | Check generation status |
+| `/api/veo/download` | GET | Download generated video |
+
+### Replicate Endpoints
+
+| Endpoint | Method | Description |
+|----------|--------|-------------|
+| `/api/replicate/generate` | POST | Start video generation |
+| `/api/replicate/status/{id}` | GET | Check prediction status |
+| `/api/replicate/models` | GET | List available models |
+| `/api/replicate/cancel/{id}` | POST | Cancel running prediction |
+
+---
+
+## Comparison
+
+| Feature | Kling (Frame Continuity) | Kling (Extend) | Replicate |
+|---------|--------------------------|----------------|-----------|
+| Script Segmentation | ✅ GPT-4o auto | ✅ GPT-4o auto | ✅ GPT-4o auto |
+| Multi-segment | ✅ Yes | ✅ Yes | ✅ Yes |
+| Visual Consistency | ✅✅ Best | ⚠️ Good | ✅✅ Best |
+| Speed | ⚠️ Slower | ✅ Fast | ⚠️ Slower |
+| Frame Extraction | ✅ Yes | ❌ No | ✅ Yes |
+| Voice/Audio | ✅ Yes | ✅ Yes | ❌ No |
+| Best for | **Consistent UGC** | Quick drafts | Creative work |
+
+### Why Frame Continuity Works Better
+
+```
+The secret from standalone_video_creator.py:
+
+┌────────────────────────────────────────────────────────────────────────────┐
+│                                                                            │
+│  PROBLEM with Extend API:                                                  │
+│  • AI tries to "continue" but may drift visually                          │
+│  • Character appearance can subtly change                                  │
+│  • Lighting/scene may shift between segments                               │
+│                                                                            │
+│  SOLUTION with Frame Continuity:                                           │
+│  • Extract the EXACT last frame of each video                              │
+│  • Use it as the reference image for next segment                          │
+│  • AI sees exactly what it needs to continue from                          │
+│  • Result: Perfect visual match between segments                           │
+│                                                                            │
+│  This is why the Replicate flow in standalone_video_creator.py             │
+│  produces such consistent results!                                         │
+│                                                                            │
+└────────────────────────────────────────────────────────────────────────────┘
+```
+
+---
+
+## Technical Architecture
+
+```
+┌──────────────────────────────────────────────────────────────────────────┐
+│                              FRONTEND                                     │
+│                         (React + Vite + TS)                              │
+│                                                                          │
+│  ┌────────────────┐  ┌────────────────┐  ┌────────────────┐             │
+│  │ ProviderSelect │  │ GenerationForm │  │ GenerationProg │             │
+│  └───────┬────────┘  └───────┬────────┘  └───────┬────────┘             │
+│          │                   │                   │                       │
+│          └───────────────────┼───────────────────┘                       │
+│                              │                                           │
+│                    ┌─────────▼─────────┐                                 │
+│                    │ GenerationContext │                                 │
+│                    │   (State Mgmt)    │                                 │
+│                    └─────────┬─────────┘                                 │
+│                              │                                           │
+│                    ┌─────────▼─────────┐                                 │
+│                    │    API Client     │                                 │
+│                    │   (utils/api.ts)  │                                 │
+│                    └─────────┬─────────┘                                 │
+└──────────────────────────────┼───────────────────────────────────────────┘
+                               │ HTTP / SSE
+                               ▼
+┌──────────────────────────────────────────────────────────────────────────┐
+│                              BACKEND                                      │
+│                         (FastAPI + Python)                               │
+│                                                                          │
+│  ┌────────────────┐  ┌────────────────┐  ┌────────────────┐             │
+│  │ video_         │  │ replicate_     │  │ prompt_        │             │
+│  │ generation.py  │  │ service.py     │  │ generation.py  │             │
+│  └───────┬────────┘  └───────┬────────┘  └───────┬────────┘             │
+│          │                   │                   │                       │
+│          └───────────────────┼───────────────────┘                       │
+│                              │                                           │
+│                    ┌─────────▼─────────┐                                 │
+│                    │     main.py       │                                 │
+│                    │   (FastAPI App)   │                                 │
+│                    └─────────┬─────────┘                                 │
+└──────────────────────────────┼───────────────────────────────────────────┘
+                               │ HTTPS
+                               ▼
+┌──────────────────────────────────────────────────────────────────────────┐
+│                          EXTERNAL APIs                                    │
+│                                                                          │
+│  ┌────────────────┐  ┌────────────────┐  ┌────────────────┐             │
+│  │   KIE/Kling    │  │   Replicate    │  │    OpenAI      │             │
+│  │   Veo 3.1      │  │   (Models)     │  │   GPT-4o       │             │
+│  └────────────────┘  └────────────────┘  └────────────────┘             │
+│                                                                          │
+└──────────────────────────────────────────────────────────────────────────┘
+```
+
+---
+
+## Quick Start
+
+1. **Start Backend**:
+   ```bash
+   cd /Users/sushil/Desktop/python-backend
+   source venv/bin/activate
+   python main.py
+   ```
+
+2. **Start Frontend**:
+   ```bash
+   cd frontend
+   npm run dev
+   ```
+
+3. **Open Browser**: http://localhost:3000
+
+4. **Choose Provider** → Enter script → Generate!
+

frontend/README.md

@@ -0,0 +1,127 @@
+# 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

frontend/eslint.config.js

@@ -0,0 +1,23 @@
+import js from '@eslint/js'
+import globals from 'globals'
+import reactHooks from 'eslint-plugin-react-hooks'
+import reactRefresh from 'eslint-plugin-react-refresh'
+import tseslint from 'typescript-eslint'
+import { defineConfig, globalIgnores } from 'eslint/config'
+
+export default defineConfig([
+  globalIgnores(['dist']),
+  {
+    files: ['**/*.{ts,tsx}'],
+    extends: [
+      js.configs.recommended,
+      tseslint.configs.recommended,
+      reactHooks.configs.flat.recommended,
+      reactRefresh.configs.vite,
+    ],
+    languageOptions: {
+      ecmaVersion: 2020,
+      globals: globals.browser,
+    },
+  },
+])

frontend/index.html

@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Video AdGenesis Studio</title>
+    
+    <!-- Fonts -->
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600&display=swap" rel="stylesheet">
+    
+    <!-- Clash Display & Satoshi from Fontshare -->
+    <link href="https://api.fontshare.com/v2/css?f[]=clash-display@400,500,600,700&f[]=satoshi@400,500,700&display=swap" rel="stylesheet">
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>

frontend/package-lock.json

@@ -0,0 +1,2776 @@
+{
+  "name": "video-genesis-studio",
+  "version": "1.0.0",
+  "lockfileVersion": 3,
+  "requires": true,
+  "packages": {
+    "": {
+      "name": "video-genesis-studio",
+      "version": "1.0.0",
+      "dependencies": {
+        "framer-motion": "^11.15.0",
+        "react": "^19.0.0",
+        "react-dom": "^19.0.0"
+      },
+      "devDependencies": {
+        "@types/node": "^22.14.0",
+        "@types/react": "^19.0.0",
+        "@types/react-dom": "^19.0.0",
+        "@vitejs/plugin-react": "^4.3.4",
+        "autoprefixer": "^10.4.20",
+        "postcss": "^8.4.49",
+        "tailwindcss": "^3.4.17",
+        "typescript": "~5.6.0",
+        "vite": "^6.0.0"
+      }
+    },
+    "node_modules/@alloc/quick-lru": {
+      "version": "5.2.0",
+      "resolved": "https://registry.npmjs.org/@alloc/quick-lru/-/quick-lru-5.2.0.tgz",
+      "integrity": "sha512-UrcABB+4bUrFABwbluTIBErXwvbsU/V7TZWfmbgJfbkwiBuziS9gxdODUyuiecfdGQ85jglMW6juS3+z5TsKLw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/@babel/code-frame": {
+      "version": "7.27.1",
+      "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.27.1.tgz",
+      "integrity": "sha512-cjQ7ZlQ0Mv3b47hABuTevyTuYN4i+loJKGeV9flcCgIK37cCXRh+L1bd3iBHlynerhQ7BhCkn2BPbQUL+rGqFg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-validator-identifier": "^7.27.1",
+        "js-tokens": "^4.0.0",
+        "picocolors": "^1.1.1"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/compat-data": {
+      "version": "7.28.5",
+      "resolved": "https://registry.npmjs.org/@babel/compat-data/-/compat-data-7.28.5.tgz",
+      "integrity": "sha512-6uFXyCayocRbqhZOB+6XcuZbkMNimwfVGFji8CTZnCzOHVGvDqzvitu1re2AU5LROliz7eQPhB8CpAMvnx9EjA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/core": {
+      "version": "7.28.5",
+      "resolved": "https://registry.npmjs.org/@babel/core/-/core-7.28.5.tgz",
+      "integrity": "sha512-e7jT4DxYvIDLk1ZHmU/m/mB19rex9sv0c2ftBtjSBv+kVM/902eh0fINUzD7UwLLNR+jU585GxUJ8/EBfAM5fw==",
+      "dev": true,
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "@babel/code-frame": "^7.27.1",
+        "@babel/generator": "^7.28.5",
+        "@babel/helper-compilation-targets": "^7.27.2",
+        "@babel/helper-module-transforms": "^7.28.3",
+        "@babel/helpers": "^7.28.4",
+        "@babel/parser": "^7.28.5",
+        "@babel/template": "^7.27.2",
+        "@babel/traverse": "^7.28.5",
+        "@babel/types": "^7.28.5",
+        "@jridgewell/remapping": "^2.3.5",
+        "convert-source-map": "^2.0.0",
+        "debug": "^4.1.0",
+        "gensync": "^1.0.0-beta.2",
+        "json5": "^2.2.3",
+        "semver": "^6.3.1"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/babel"
+      }
+    },
+    "node_modules/@babel/generator": {
+      "version": "7.28.5",
+      "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.28.5.tgz",
+      "integrity": "sha512-3EwLFhZ38J4VyIP6WNtt2kUdW9dokXA9Cr4IVIFHuCpZ3H8/YFOl5JjZHisrn1fATPBmKKqXzDFvh9fUwHz6CQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/parser": "^7.28.5",
+        "@babel/types": "^7.28.5",
+        "@jridgewell/gen-mapping": "^0.3.12",
+        "@jridgewell/trace-mapping": "^0.3.28",
+        "jsesc": "^3.0.2"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/helper-compilation-targets": {
+      "version": "7.27.2",
+      "resolved": "https://registry.npmjs.org/@babel/helper-compilation-targets/-/helper-compilation-targets-7.27.2.tgz",
+      "integrity": "sha512-2+1thGUUWWjLTYTHZWK1n8Yga0ijBz1XAhUXcKy81rd5g6yh7hGqMp45v7cadSbEHc9G3OTv45SyneRN3ps4DQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/compat-data": "^7.27.2",
+        "@babel/helper-validator-option": "^7.27.1",
+        "browserslist": "^4.24.0",
+        "lru-cache": "^5.1.1",
+        "semver": "^6.3.1"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/helper-globals": {
+      "version": "7.28.0",
+      "resolved": "https://registry.npmjs.org/@babel/helper-globals/-/helper-globals-7.28.0.tgz",
+      "integrity": "sha512-+W6cISkXFa1jXsDEdYA8HeevQT/FULhxzR99pxphltZcVaugps53THCeiWA8SguxxpSp3gKPiuYfSWopkLQ4hw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/helper-module-imports": {
+      "version": "7.27.1",
+      "resolved": "https://registry.npmjs.org/@babel/helper-module-imports/-/helper-module-imports-7.27.1.tgz",
+      "integrity": "sha512-0gSFWUPNXNopqtIPQvlD5WgXYI5GY2kP2cCvoT8kczjbfcfuIljTbcWrulD1CIPIX2gt1wghbDy08yE1p+/r3w==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/traverse": "^7.27.1",
+        "@babel/types": "^7.27.1"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/helper-module-transforms": {
+      "version": "7.28.3",
+      "resolved": "https://registry.npmjs.org/@babel/helper-module-transforms/-/helper-module-transforms-7.28.3.tgz",
+      "integrity": "sha512-gytXUbs8k2sXS9PnQptz5o0QnpLL51SwASIORY6XaBKF88nsOT0Zw9szLqlSGQDP/4TljBAD5y98p2U1fqkdsw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-module-imports": "^7.27.1",
+        "@babel/helper-validator-identifier": "^7.27.1",
+        "@babel/traverse": "^7.28.3"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0"
+      }
+    },
+    "node_modules/@babel/helper-plugin-utils": {
+      "version": "7.27.1",
+      "resolved": "https://registry.npmjs.org/@babel/helper-plugin-utils/-/helper-plugin-utils-7.27.1.tgz",
+      "integrity": "sha512-1gn1Up5YXka3YYAHGKpbideQ5Yjf1tDa9qYcgysz+cNCXukyLl6DjPXhD3VRwSb8c0J9tA4b2+rHEZtc6R0tlw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/helper-string-parser": {
+      "version": "7.27.1",
+      "resolved": "https://registry.npmjs.org/@babel/helper-string-parser/-/helper-string-parser-7.27.1.tgz",
+      "integrity": "sha512-qMlSxKbpRlAridDExk92nSobyDdpPijUq2DW6oDnUqd0iOGxmQjyqhMIihI9+zv4LPyZdRje2cavWPbCbWm3eA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/helper-validator-identifier": {
+      "version": "7.28.5",
+      "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.28.5.tgz",
+      "integrity": "sha512-qSs4ifwzKJSV39ucNjsvc6WVHs6b7S03sOh2OcHF9UHfVPqWWALUsNUVzhSBiItjRZoLHx7nIarVjqKVusUZ1Q==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/helper-validator-option": {
+      "version": "7.27.1",
+      "resolved": "https://registry.npmjs.org/@babel/helper-validator-option/-/helper-validator-option-7.27.1.tgz",
+      "integrity": "sha512-YvjJow9FxbhFFKDSuFnVCe2WxXk1zWc22fFePVNEaWJEu8IrZVlda6N0uHwzZrUM1il7NC9Mlp4MaJYbYd9JSg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/helpers": {
+      "version": "7.28.4",
+      "resolved": "https://registry.npmjs.org/@babel/helpers/-/helpers-7.28.4.tgz",
+      "integrity": "sha512-HFN59MmQXGHVyYadKLVumYsA9dBFun/ldYxipEjzA4196jpLZd8UjEEBLkbEkvfYreDqJhZxYAWFPtrfhNpj4w==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/template": "^7.27.2",
+        "@babel/types": "^7.28.4"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/parser": {
+      "version": "7.28.5",
+      "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.28.5.tgz",
+      "integrity": "sha512-KKBU1VGYR7ORr3At5HAtUQ+TV3SzRCXmA/8OdDZiLDBIZxVyzXuztPjfLd3BV1PRAQGCMWWSHYhL0F8d5uHBDQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/types": "^7.28.5"
+      },
+      "bin": {
+        "parser": "bin/babel-parser.js"
+      },
+      "engines": {
+        "node": ">=6.0.0"
+      }
+    },
+    "node_modules/@babel/plugin-transform-react-jsx-self": {
+      "version": "7.27.1",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-react-jsx-self/-/plugin-transform-react-jsx-self-7.27.1.tgz",
+      "integrity": "sha512-6UzkCs+ejGdZ5mFFC/OCUrv028ab2fp1znZmCZjAOBKiBK2jXD1O+BPSfX8X2qjJ75fZBMSnQn3Rq2mrBJK2mw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.27.1"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-transform-react-jsx-source": {
+      "version": "7.27.1",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-react-jsx-source/-/plugin-transform-react-jsx-source-7.27.1.tgz",
+      "integrity": "sha512-zbwoTsBruTeKB9hSq73ha66iFeJHuaFkUbwvqElnygoNbj/jHRsSeokowZFN3CZ64IvEqcmmkVe89OPXc7ldAw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.27.1"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/template": {
+      "version": "7.27.2",
+      "resolved": "https://registry.npmjs.org/@babel/template/-/template-7.27.2.tgz",
+      "integrity": "sha512-LPDZ85aEJyYSd18/DkjNh4/y1ntkE5KwUHWTiqgRxruuZL2F1yuHligVHLvcHY2vMHXttKFpJn6LwfI7cw7ODw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/code-frame": "^7.27.1",
+        "@babel/parser": "^7.27.2",
+        "@babel/types": "^7.27.1"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/traverse": {
+      "version": "7.28.5",
+      "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.28.5.tgz",
+      "integrity": "sha512-TCCj4t55U90khlYkVV/0TfkJkAkUg3jZFA3Neb7unZT8CPok7iiRfaX0F+WnqWqt7OxhOn0uBKXCw4lbL8W0aQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/code-frame": "^7.27.1",
+        "@babel/generator": "^7.28.5",
+        "@babel/helper-globals": "^7.28.0",
+        "@babel/parser": "^7.28.5",
+        "@babel/template": "^7.27.2",
+        "@babel/types": "^7.28.5",
+        "debug": "^4.3.1"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/types": {
+      "version": "7.28.5",
+      "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.28.5.tgz",
+      "integrity": "sha512-qQ5m48eI/MFLQ5PxQj4PFaprjyCTLI37ElWMmNs0K8Lk3dVeOdNpB3ks8jc7yM5CDmVC73eMVk/trk3fgmrUpA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-string-parser": "^7.27.1",
+        "@babel/helper-validator-identifier": "^7.28.5"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@esbuild/aix-ppc64": {
+      "version": "0.25.12",
+      "resolved": "https://registry.npmjs.org/@esbuild/aix-ppc64/-/aix-ppc64-0.25.12.tgz",
+      "integrity": "sha512-Hhmwd6CInZ3dwpuGTF8fJG6yoWmsToE+vYgD4nytZVxcu1ulHpUQRAB1UJ8+N1Am3Mz4+xOByoQoSZf4D+CpkA==",
+      "cpu": [
+        "ppc64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "aix"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/android-arm": {
+      "version": "0.25.12",
+      "resolved": "https://registry.npmjs.org/@esbuild/android-arm/-/android-arm-0.25.12.tgz",
+      "integrity": "sha512-VJ+sKvNA/GE7Ccacc9Cha7bpS8nyzVv0jdVgwNDaR4gDMC/2TTRc33Ip8qrNYUcpkOHUT5OZ0bUcNNVZQ9RLlg==",
+      "cpu": [
+        "arm"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "android"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/android-arm64": {
+      "version": "0.25.12",
+      "resolved": "https://registry.npmjs.org/@esbuild/android-arm64/-/android-arm64-0.25.12.tgz",
+      "integrity": "sha512-6AAmLG7zwD1Z159jCKPvAxZd4y/VTO0VkprYy+3N2FtJ8+BQWFXU+OxARIwA46c5tdD9SsKGZ/1ocqBS/gAKHg==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "android"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/android-x64": {
+      "version": "0.25.12",
+      "resolved": "https://registry.npmjs.org/@esbuild/android-x64/-/android-x64-0.25.12.tgz",
+      "integrity": "sha512-5jbb+2hhDHx5phYR2By8GTWEzn6I9UqR11Kwf22iKbNpYrsmRB18aX/9ivc5cabcUiAT/wM+YIZ6SG9QO6a8kg==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "android"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/darwin-arm64": {
+      "version": "0.25.12",
+      "resolved": "https://registry.npmjs.org/@esbuild/darwin-arm64/-/darwin-arm64-0.25.12.tgz",
+      "integrity": "sha512-N3zl+lxHCifgIlcMUP5016ESkeQjLj/959RxxNYIthIg+CQHInujFuXeWbWMgnTo4cp5XVHqFPmpyu9J65C1Yg==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/darwin-x64": {
+      "version": "0.25.12",
+      "resolved": "https://registry.npmjs.org/@esbuild/darwin-x64/-/darwin-x64-0.25.12.tgz",
+      "integrity": "sha512-HQ9ka4Kx21qHXwtlTUVbKJOAnmG1ipXhdWTmNXiPzPfWKpXqASVcWdnf2bnL73wgjNrFXAa3yYvBSd9pzfEIpA==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/freebsd-arm64": {
+      "version": "0.25.12",
+      "resolved": "https://registry.npmjs.org/@esbuild/freebsd-arm64/-/freebsd-arm64-0.25.12.tgz",
+      "integrity": "sha512-gA0Bx759+7Jve03K1S0vkOu5Lg/85dou3EseOGUes8flVOGxbhDDh/iZaoek11Y8mtyKPGF3vP8XhnkDEAmzeg==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "freebsd"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/freebsd-x64": {
+      "version": "0.25.12",
+      "resolved": "https://registry.npmjs.org/@esbuild/freebsd-x64/-/freebsd-x64-0.25.12.tgz",
+      "integrity": "sha512-TGbO26Yw2xsHzxtbVFGEXBFH0FRAP7gtcPE7P5yP7wGy7cXK2oO7RyOhL5NLiqTlBh47XhmIUXuGciXEqYFfBQ==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "freebsd"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/linux-arm": {
+      "version": "0.25.12",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-arm/-/linux-arm-0.25.12.tgz",
+      "integrity": "sha512-lPDGyC1JPDou8kGcywY0YILzWlhhnRjdof3UlcoqYmS9El818LLfJJc3PXXgZHrHCAKs/Z2SeZtDJr5MrkxtOw==",
+      "cpu": [
+        "arm"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/linux-arm64": {
+      "version": "0.25.12",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-arm64/-/linux-arm64-0.25.12.tgz",
+      "integrity": "sha512-8bwX7a8FghIgrupcxb4aUmYDLp8pX06rGh5HqDT7bB+8Rdells6mHvrFHHW2JAOPZUbnjUpKTLg6ECyzvas2AQ==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/linux-ia32": {
+      "version": "0.25.12",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-ia32/-/linux-ia32-0.25.12.tgz",
+      "integrity": "sha512-0y9KrdVnbMM2/vG8KfU0byhUN+EFCny9+8g202gYqSSVMonbsCfLjUO+rCci7pM0WBEtz+oK/PIwHkzxkyharA==",
+      "cpu": [
+        "ia32"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/linux-loong64": {
+      "version": "0.25.12",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-loong64/-/linux-loong64-0.25.12.tgz",
+      "integrity": "sha512-h///Lr5a9rib/v1GGqXVGzjL4TMvVTv+s1DPoxQdz7l/AYv6LDSxdIwzxkrPW438oUXiDtwM10o9PmwS/6Z0Ng==",
+      "cpu": [
+        "loong64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/linux-mips64el": {
+      "version": "0.25.12",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-mips64el/-/linux-mips64el-0.25.12.tgz",
+      "integrity": "sha512-iyRrM1Pzy9GFMDLsXn1iHUm18nhKnNMWscjmp4+hpafcZjrr2WbT//d20xaGljXDBYHqRcl8HnxbX6uaA/eGVw==",
+      "cpu": [
+        "mips64el"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/linux-ppc64": {
+      "version": "0.25.12",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-ppc64/-/linux-ppc64-0.25.12.tgz",
+      "integrity": "sha512-9meM/lRXxMi5PSUqEXRCtVjEZBGwB7P/D4yT8UG/mwIdze2aV4Vo6U5gD3+RsoHXKkHCfSxZKzmDssVlRj1QQA==",
+      "cpu": [
+        "ppc64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/linux-riscv64": {
+      "version": "0.25.12",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-riscv64/-/linux-riscv64-0.25.12.tgz",
+      "integrity": "sha512-Zr7KR4hgKUpWAwb1f3o5ygT04MzqVrGEGXGLnj15YQDJErYu/BGg+wmFlIDOdJp0PmB0lLvxFIOXZgFRrdjR0w==",
+      "cpu": [
+        "riscv64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/linux-s390x": {
+      "version": "0.25.12",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-s390x/-/linux-s390x-0.25.12.tgz",
+      "integrity": "sha512-MsKncOcgTNvdtiISc/jZs/Zf8d0cl/t3gYWX8J9ubBnVOwlk65UIEEvgBORTiljloIWnBzLs4qhzPkJcitIzIg==",
+      "cpu": [
+        "s390x"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/linux-x64": {
+      "version": "0.25.12",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-x64/-/linux-x64-0.25.12.tgz",
+      "integrity": "sha512-uqZMTLr/zR/ed4jIGnwSLkaHmPjOjJvnm6TVVitAa08SLS9Z0VM8wIRx7gWbJB5/J54YuIMInDquWyYvQLZkgw==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/netbsd-arm64": {
+      "version": "0.25.12",
+      "resolved": "https://registry.npmjs.org/@esbuild/netbsd-arm64/-/netbsd-arm64-0.25.12.tgz",
+      "integrity": "sha512-xXwcTq4GhRM7J9A8Gv5boanHhRa/Q9KLVmcyXHCTaM4wKfIpWkdXiMog/KsnxzJ0A1+nD+zoecuzqPmCRyBGjg==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "netbsd"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/netbsd-x64": {
+      "version": "0.25.12",
+      "resolved": "https://registry.npmjs.org/@esbuild/netbsd-x64/-/netbsd-x64-0.25.12.tgz",
+      "integrity": "sha512-Ld5pTlzPy3YwGec4OuHh1aCVCRvOXdH8DgRjfDy/oumVovmuSzWfnSJg+VtakB9Cm0gxNO9BzWkj6mtO1FMXkQ==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "netbsd"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/openbsd-arm64": {
+      "version": "0.25.12",
+      "resolved": "https://registry.npmjs.org/@esbuild/openbsd-arm64/-/openbsd-arm64-0.25.12.tgz",
+      "integrity": "sha512-fF96T6KsBo/pkQI950FARU9apGNTSlZGsv1jZBAlcLL1MLjLNIWPBkj5NlSz8aAzYKg+eNqknrUJ24QBybeR5A==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "openbsd"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/openbsd-x64": {
+      "version": "0.25.12",
+      "resolved": "https://registry.npmjs.org/@esbuild/openbsd-x64/-/openbsd-x64-0.25.12.tgz",
+      "integrity": "sha512-MZyXUkZHjQxUvzK7rN8DJ3SRmrVrke8ZyRusHlP+kuwqTcfWLyqMOE3sScPPyeIXN/mDJIfGXvcMqCgYKekoQw==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "openbsd"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/openharmony-arm64": {
+      "version": "0.25.12",
+      "resolved": "https://registry.npmjs.org/@esbuild/openharmony-arm64/-/openharmony-arm64-0.25.12.tgz",
+      "integrity": "sha512-rm0YWsqUSRrjncSXGA7Zv78Nbnw4XL6/dzr20cyrQf7ZmRcsovpcRBdhD43Nuk3y7XIoW2OxMVvwuRvk9XdASg==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "openharmony"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/sunos-x64": {
+      "version": "0.25.12",
+      "resolved": "https://registry.npmjs.org/@esbuild/sunos-x64/-/sunos-x64-0.25.12.tgz",
+      "integrity": "sha512-3wGSCDyuTHQUzt0nV7bocDy72r2lI33QL3gkDNGkod22EsYl04sMf0qLb8luNKTOmgF/eDEDP5BFNwoBKH441w==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "sunos"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/win32-arm64": {
+      "version": "0.25.12",
+      "resolved": "https://registry.npmjs.org/@esbuild/win32-arm64/-/win32-arm64-0.25.12.tgz",
+      "integrity": "sha512-rMmLrur64A7+DKlnSuwqUdRKyd3UE7oPJZmnljqEptesKM8wx9J8gx5u0+9Pq0fQQW8vqeKebwNXdfOyP+8Bsg==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/win32-ia32": {
+      "version": "0.25.12",
+      "resolved": "https://registry.npmjs.org/@esbuild/win32-ia32/-/win32-ia32-0.25.12.tgz",
+      "integrity": "sha512-HkqnmmBoCbCwxUKKNPBixiWDGCpQGVsrQfJoVGYLPT41XWF8lHuE5N6WhVia2n4o5QK5M4tYr21827fNhi4byQ==",
+      "cpu": [
+        "ia32"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/win32-x64": {
+      "version": "0.25.12",
+      "resolved": "https://registry.npmjs.org/@esbuild/win32-x64/-/win32-x64-0.25.12.tgz",
+      "integrity": "sha512-alJC0uCZpTFrSL0CCDjcgleBXPnCrEAhTBILpeAp7M/OFgoqtAetfBzX0xM00MUsVVPpVjlPuMbREqnZCXaTnA==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@jridgewell/gen-mapping": {
+      "version": "0.3.13",
+      "resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.3.13.tgz",
+      "integrity": "sha512-2kkt/7niJ6MgEPxF0bYdQ6etZaA+fQvDcLKckhy1yIQOzaoKjBBjSj63/aLVjYE3qhRt5dvM+uUyfCg6UKCBbA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@jridgewell/sourcemap-codec": "^1.5.0",
+        "@jridgewell/trace-mapping": "^0.3.24"
+      }
+    },
+    "node_modules/@jridgewell/remapping": {
+      "version": "2.3.5",
+      "resolved": "https://registry.npmjs.org/@jridgewell/remapping/-/remapping-2.3.5.tgz",
+      "integrity": "sha512-LI9u/+laYG4Ds1TDKSJW2YPrIlcVYOwi2fUC6xB43lueCjgxV4lffOCZCtYFiH6TNOX+tQKXx97T4IKHbhyHEQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@jridgewell/gen-mapping": "^0.3.5",
+        "@jridgewell/trace-mapping": "^0.3.24"
+      }
+    },
+    "node_modules/@jridgewell/resolve-uri": {
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/@jridgewell/resolve-uri/-/resolve-uri-3.1.2.tgz",
+      "integrity": "sha512-bRISgCIjP20/tbWSPWMEi54QVPRZExkuD9lJL+UIxUKtwVJA8wW1Trb1jMs1RFXo1CBTNZ/5hpC9QvmKWdopKw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=6.0.0"
+      }
+    },
+    "node_modules/@jridgewell/sourcemap-codec": {
+      "version": "1.5.5",
+      "resolved": "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.5.5.tgz",
+      "integrity": "sha512-cYQ9310grqxueWbl+WuIUIaiUaDcj7WOq5fVhEljNVgRfOUhY9fy2zTvfoqWsnebh8Sl70VScFbICvJnLKB0Og==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/@jridgewell/trace-mapping": {
+      "version": "0.3.31",
+      "resolved": "https://registry.npmjs.org/@jridgewell/trace-mapping/-/trace-mapping-0.3.31.tgz",
+      "integrity": "sha512-zzNR+SdQSDJzc8joaeP8QQoCQr8NuYx2dIIytl1QeBEZHJ9uW6hebsrYgbz8hJwUQao3TWCMtmfV8Nu1twOLAw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@jridgewell/resolve-uri": "^3.1.0",
+        "@jridgewell/sourcemap-codec": "^1.4.14"
+      }
+    },
+    "node_modules/@nodelib/fs.scandir": {
+      "version": "2.1.5",
+      "resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz",
+      "integrity": "sha512-vq24Bq3ym5HEQm2NKCr3yXDwjc7vTsEThRDnkp2DK9p1uqLR+DHurm/NOTo0KG7HYHU7eppKZj3MyqYuMBf62g==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@nodelib/fs.stat": "2.0.5",
+        "run-parallel": "^1.1.9"
+      },
+      "engines": {
+        "node": ">= 8"
+      }
+    },
+    "node_modules/@nodelib/fs.stat": {
+      "version": "2.0.5",
+      "resolved": "https://registry.npmjs.org/@nodelib/fs.stat/-/fs.stat-2.0.5.tgz",
+      "integrity": "sha512-RkhPPp2zrqDAQA/2jNhnztcPAlv64XdhIp7a7454A5ovI7Bukxgt7MX7udwAu3zg1DcpPU0rz3VV1SeaqvY4+A==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 8"
+      }
+    },
+    "node_modules/@nodelib/fs.walk": {
+      "version": "1.2.8",
+      "resolved": "https://registry.npmjs.org/@nodelib/fs.walk/-/fs.walk-1.2.8.tgz",
+      "integrity": "sha512-oGB+UxlgWcgQkgwo8GcEGwemoTFt3FIO9ababBmaGwXIoBKZ+GTy0pP185beGg7Llih/NSHSV2XAs1lnznocSg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@nodelib/fs.scandir": "2.1.5",
+        "fastq": "^1.6.0"
+      },
+      "engines": {
+        "node": ">= 8"
+      }
+    },
+    "node_modules/@rolldown/pluginutils": {
+      "version": "1.0.0-beta.27",
+      "resolved": "https://registry.npmjs.org/@rolldown/pluginutils/-/pluginutils-1.0.0-beta.27.tgz",
+      "integrity": "sha512-+d0F4MKMCbeVUJwG96uQ4SgAznZNSq93I3V+9NHA4OpvqG8mRCpGdKmK8l/dl02h2CCDHwW2FqilnTyDcAnqjA==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/@rollup/rollup-android-arm-eabi": {
+      "version": "4.53.3",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm-eabi/-/rollup-android-arm-eabi-4.53.3.tgz",
+      "integrity": "sha512-mRSi+4cBjrRLoaal2PnqH82Wqyb+d3HsPUN/W+WslCXsZsyHa9ZeQQX/pQsZaVIWDkPcpV6jJ+3KLbTbgnwv8w==",
+      "cpu": [
+        "arm"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "android"
+      ]
+    },
+    "node_modules/@rollup/rollup-android-arm64": {
+      "version": "4.53.3",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm64/-/rollup-android-arm64-4.53.3.tgz",
+      "integrity": "sha512-CbDGaMpdE9sh7sCmTrTUyllhrg65t6SwhjlMJsLr+J8YjFuPmCEjbBSx4Z/e4SmDyH3aB5hGaJUP2ltV/vcs4w==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "android"
+      ]
+    },
+    "node_modules/@rollup/rollup-darwin-arm64": {
+      "version": "4.53.3",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-arm64/-/rollup-darwin-arm64-4.53.3.tgz",
+      "integrity": "sha512-Nr7SlQeqIBpOV6BHHGZgYBuSdanCXuw09hon14MGOLGmXAFYjx1wNvquVPmpZnl0tLjg25dEdr4IQ6GgyToCUA==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ]
+    },
+    "node_modules/@rollup/rollup-darwin-x64": {
+      "version": "4.53.3",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-x64/-/rollup-darwin-x64-4.53.3.tgz",
+      "integrity": "sha512-DZ8N4CSNfl965CmPktJ8oBnfYr3F8dTTNBQkRlffnUarJ2ohudQD17sZBa097J8xhQ26AwhHJ5mvUyQW8ddTsQ==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ]
+    },
+    "node_modules/@rollup/rollup-freebsd-arm64": {
+      "version": "4.53.3",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-freebsd-arm64/-/rollup-freebsd-arm64-4.53.3.tgz",
+      "integrity": "sha512-yMTrCrK92aGyi7GuDNtGn2sNW+Gdb4vErx4t3Gv/Tr+1zRb8ax4z8GWVRfr3Jw8zJWvpGHNpss3vVlbF58DZ4w==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "freebsd"
+      ]
+    },
+    "node_modules/@rollup/rollup-freebsd-x64": {
+      "version": "4.53.3",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-freebsd-x64/-/rollup-freebsd-x64-4.53.3.tgz",
+      "integrity": "sha512-lMfF8X7QhdQzseM6XaX0vbno2m3hlyZFhwcndRMw8fbAGUGL3WFMBdK0hbUBIUYcEcMhVLr1SIamDeuLBnXS+Q==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "freebsd"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-arm-gnueabihf": {
+      "version": "4.53.3",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm-gnueabihf/-/rollup-linux-arm-gnueabihf-4.53.3.tgz",
+      "integrity": "sha512-k9oD15soC/Ln6d2Wv/JOFPzZXIAIFLp6B+i14KhxAfnq76ajt0EhYc5YPeX6W1xJkAdItcVT+JhKl1QZh44/qw==",
+      "cpu": [
+        "arm"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-arm-musleabihf": {
+      "version": "4.53.3",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm-musleabihf/-/rollup-linux-arm-musleabihf-4.53.3.tgz",
+      "integrity": "sha512-vTNlKq+N6CK/8UktsrFuc+/7NlEYVxgaEgRXVUVK258Z5ymho29skzW1sutgYjqNnquGwVUObAaxae8rZ6YMhg==",
+      "cpu": [
+        "arm"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-arm64-gnu": {
+      "version": "4.53.3",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-gnu/-/rollup-linux-arm64-gnu-4.53.3.tgz",
+      "integrity": "sha512-RGrFLWgMhSxRs/EWJMIFM1O5Mzuz3Xy3/mnxJp/5cVhZ2XoCAxJnmNsEyeMJtpK+wu0FJFWz+QF4mjCA7AUQ3w==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-arm64-musl": {
+      "version": "4.53.3",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-musl/-/rollup-linux-arm64-musl-4.53.3.tgz",
+      "integrity": "sha512-kASyvfBEWYPEwe0Qv4nfu6pNkITLTb32p4yTgzFCocHnJLAHs+9LjUu9ONIhvfT/5lv4YS5muBHyuV84epBo/A==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-loong64-gnu": {
+      "version": "4.53.3",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-loong64-gnu/-/rollup-linux-loong64-gnu-4.53.3.tgz",
+      "integrity": "sha512-JiuKcp2teLJwQ7vkJ95EwESWkNRFJD7TQgYmCnrPtlu50b4XvT5MOmurWNrCj3IFdyjBQ5p9vnrX4JM6I8OE7g==",
+      "cpu": [
+        "loong64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-ppc64-gnu": {
+      "version": "4.53.3",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-ppc64-gnu/-/rollup-linux-ppc64-gnu-4.53.3.tgz",
+      "integrity": "sha512-EoGSa8nd6d3T7zLuqdojxC20oBfNT8nexBbB/rkxgKj5T5vhpAQKKnD+h3UkoMuTyXkP5jTjK/ccNRmQrPNDuw==",
+      "cpu": [
+        "ppc64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-riscv64-gnu": {
+      "version": "4.53.3",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-riscv64-gnu/-/rollup-linux-riscv64-gnu-4.53.3.tgz",
+      "integrity": "sha512-4s+Wped2IHXHPnAEbIB0YWBv7SDohqxobiiPA1FIWZpX+w9o2i4LezzH/NkFUl8LRci/8udci6cLq+jJQlh+0g==",
+      "cpu": [
+        "riscv64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-riscv64-musl": {
+      "version": "4.53.3",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-riscv64-musl/-/rollup-linux-riscv64-musl-4.53.3.tgz",
+      "integrity": "sha512-68k2g7+0vs2u9CxDt5ktXTngsxOQkSEV/xBbwlqYcUrAVh6P9EgMZvFsnHy4SEiUl46Xf0IObWVbMvPrr2gw8A==",
+      "cpu": [
+        "riscv64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-s390x-gnu": {
+      "version": "4.53.3",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-s390x-gnu/-/rollup-linux-s390x-gnu-4.53.3.tgz",
+      "integrity": "sha512-VYsFMpULAz87ZW6BVYw3I6sWesGpsP9OPcyKe8ofdg9LHxSbRMd7zrVrr5xi/3kMZtpWL/wC+UIJWJYVX5uTKg==",
+      "cpu": [
+        "s390x"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-x64-gnu": {
+      "version": "4.53.3",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-gnu/-/rollup-linux-x64-gnu-4.53.3.tgz",
+      "integrity": "sha512-3EhFi1FU6YL8HTUJZ51imGJWEX//ajQPfqWLI3BQq4TlvHy4X0MOr5q3D2Zof/ka0d5FNdPwZXm3Yyib/UEd+w==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-x64-musl": {
+      "version": "4.53.3",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-musl/-/rollup-linux-x64-musl-4.53.3.tgz",
+      "integrity": "sha512-eoROhjcc6HbZCJr+tvVT8X4fW3/5g/WkGvvmwz/88sDtSJzO7r/blvoBDgISDiCjDRZmHpwud7h+6Q9JxFwq1Q==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-openharmony-arm64": {
+      "version": "4.53.3",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-openharmony-arm64/-/rollup-openharmony-arm64-4.53.3.tgz",
+      "integrity": "sha512-OueLAWgrNSPGAdUdIjSWXw+u/02BRTcnfw9PN41D2vq/JSEPnJnVuBgw18VkN8wcd4fjUs+jFHVM4t9+kBSNLw==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "openharmony"
+      ]
+    },
+    "node_modules/@rollup/rollup-win32-arm64-msvc": {
+      "version": "4.53.3",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-arm64-msvc/-/rollup-win32-arm64-msvc-4.53.3.tgz",
+      "integrity": "sha512-GOFuKpsxR/whszbF/bzydebLiXIHSgsEUp6M0JI8dWvi+fFa1TD6YQa4aSZHtpmh2/uAlj/Dy+nmby3TJ3pkTw==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ]
+    },
+    "node_modules/@rollup/rollup-win32-ia32-msvc": {
+      "version": "4.53.3",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-ia32-msvc/-/rollup-win32-ia32-msvc-4.53.3.tgz",
+      "integrity": "sha512-iah+THLcBJdpfZ1TstDFbKNznlzoxa8fmnFYK4V67HvmuNYkVdAywJSoteUszvBQ9/HqN2+9AZghbajMsFT+oA==",
+      "cpu": [
+        "ia32"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ]
+    },
+    "node_modules/@rollup/rollup-win32-x64-gnu": {
+      "version": "4.53.3",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-x64-gnu/-/rollup-win32-x64-gnu-4.53.3.tgz",
+      "integrity": "sha512-J9QDiOIZlZLdcot5NXEepDkstocktoVjkaKUtqzgzpt2yWjGlbYiKyp05rWwk4nypbYUNoFAztEgixoLaSETkg==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ]
+    },
+    "node_modules/@rollup/rollup-win32-x64-msvc": {
+      "version": "4.53.3",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-x64-msvc/-/rollup-win32-x64-msvc-4.53.3.tgz",
+      "integrity": "sha512-UhTd8u31dXadv0MopwGgNOBpUVROFKWVQgAg5N1ESyCz8AuBcMqm4AuTjrwgQKGDfoFuz02EuMRHQIw/frmYKQ==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ]
+    },
+    "node_modules/@types/babel__core": {
+      "version": "7.20.5",
+      "resolved": "https://registry.npmjs.org/@types/babel__core/-/babel__core-7.20.5.tgz",
+      "integrity": "sha512-qoQprZvz5wQFJwMDqeseRXWv3rqMvhgpbXFfVyWhbx9X47POIA6i/+dXefEmZKoAgOaTdaIgNSMqMIU61yRyzA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/parser": "^7.20.7",
+        "@babel/types": "^7.20.7",
+        "@types/babel__generator": "*",
+        "@types/babel__template": "*",
+        "@types/babel__traverse": "*"
+      }
+    },
+    "node_modules/@types/babel__generator": {
+      "version": "7.27.0",
+      "resolved": "https://registry.npmjs.org/@types/babel__generator/-/babel__generator-7.27.0.tgz",
+      "integrity": "sha512-ufFd2Xi92OAVPYsy+P4n7/U7e68fex0+Ee8gSG9KX7eo084CWiQ4sdxktvdl0bOPupXtVJPY19zk6EwWqUQ8lg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/types": "^7.0.0"
+      }
+    },
+    "node_modules/@types/babel__template": {
+      "version": "7.4.4",
+      "resolved": "https://registry.npmjs.org/@types/babel__template/-/babel__template-7.4.4.tgz",
+      "integrity": "sha512-h/NUaSyG5EyxBIp8YRxo4RMe2/qQgvyowRwVMzhYhBCONbW8PUsg4lkFMrhgZhUe5z3L3MiLDuvyJ/CaPa2A8A==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/parser": "^7.1.0",
+        "@babel/types": "^7.0.0"
+      }
+    },
+    "node_modules/@types/babel__traverse": {
+      "version": "7.28.0",
+      "resolved": "https://registry.npmjs.org/@types/babel__traverse/-/babel__traverse-7.28.0.tgz",
+      "integrity": "sha512-8PvcXf70gTDZBgt9ptxJ8elBeBjcLOAcOtoO/mPJjtji1+CdGbHgm77om1GrsPxsiE+uXIpNSK64UYaIwQXd4Q==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/types": "^7.28.2"
+      }
+    },
+    "node_modules/@types/estree": {
+      "version": "1.0.8",
+      "resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.8.tgz",
+      "integrity": "sha512-dWHzHa2WqEXI/O1E9OjrocMTKJl2mSrEolh1Iomrv6U+JuNwaHXsXx9bLu5gG7BUWFIN0skIQJQ/L1rIex4X6w==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/@types/node": {
+      "version": "22.19.1",
+      "resolved": "https://registry.npmjs.org/@types/node/-/node-22.19.1.tgz",
+      "integrity": "sha512-LCCV0HdSZZZb34qifBsyWlUmok6W7ouER+oQIGBScS8EsZsQbrtFTUrDX4hOl+CS6p7cnNC4td+qrSVGSCTUfQ==",
+      "dev": true,
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "undici-types": "~6.21.0"
+      }
+    },
+    "node_modules/@types/react": {
+      "version": "19.2.7",
+      "resolved": "https://registry.npmjs.org/@types/react/-/react-19.2.7.tgz",
+      "integrity": "sha512-MWtvHrGZLFttgeEj28VXHxpmwYbor/ATPYbBfSFZEIRK0ecCFLl2Qo55z52Hss+UV9CRN7trSeq1zbgx7YDWWg==",
+      "dev": true,
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "csstype": "^3.2.2"
+      }
+    },
+    "node_modules/@types/react-dom": {
+      "version": "19.2.3",
+      "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-19.2.3.tgz",
+      "integrity": "sha512-jp2L/eY6fn+KgVVQAOqYItbF0VY/YApe5Mz2F0aykSO8gx31bYCZyvSeYxCHKvzHG5eZjc+zyaS5BrBWya2+kQ==",
+      "dev": true,
+      "license": "MIT",
+      "peerDependencies": {
+        "@types/react": "^19.2.0"
+      }
+    },
+    "node_modules/@vitejs/plugin-react": {
+      "version": "4.7.0",
+      "resolved": "https://registry.npmjs.org/@vitejs/plugin-react/-/plugin-react-4.7.0.tgz",
+      "integrity": "sha512-gUu9hwfWvvEDBBmgtAowQCojwZmJ5mcLn3aufeCsitijs3+f2NsrPtlAWIR6OPiqljl96GVCUbLe0HyqIpVaoA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/core": "^7.28.0",
+        "@babel/plugin-transform-react-jsx-self": "^7.27.1",
+        "@babel/plugin-transform-react-jsx-source": "^7.27.1",
+        "@rolldown/pluginutils": "1.0.0-beta.27",
+        "@types/babel__core": "^7.20.5",
+        "react-refresh": "^0.17.0"
+      },
+      "engines": {
+        "node": "^14.18.0 || >=16.0.0"
+      },
+      "peerDependencies": {
+        "vite": "^4.2.0 || ^5.0.0 || ^6.0.0 || ^7.0.0"
+      }
+    },
+    "node_modules/any-promise": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/any-promise/-/any-promise-1.3.0.tgz",
+      "integrity": "sha512-7UvmKalWRt1wgjL1RrGxoSJW/0QZFIegpeGvZG9kjp8vrRu55XTHbwnqq2GpXm9uLbcuhxm3IqX9OB4MZR1b2A==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/anymatch": {
+      "version": "3.1.3",
+      "resolved": "https://registry.npmjs.org/anymatch/-/anymatch-3.1.3.tgz",
+      "integrity": "sha512-KMReFUr0B4t+D+OBkjR3KYqvocp2XaSzO55UcB6mgQMd3KbcE+mWTyvVV7D/zsdEbNnV6acZUutkiHQXvTr1Rw==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "normalize-path": "^3.0.0",
+        "picomatch": "^2.0.4"
+      },
+      "engines": {
+        "node": ">= 8"
+      }
+    },
+    "node_modules/anymatch/node_modules/picomatch": {
+      "version": "2.3.1",
+      "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.1.tgz",
+      "integrity": "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=8.6"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/jonschlinkert"
+      }
+    },
+    "node_modules/arg": {
+      "version": "5.0.2",
+      "resolved": "https://registry.npmjs.org/arg/-/arg-5.0.2.tgz",
+      "integrity": "sha512-PYjyFOLKQ9y57JvQ6QLo8dAgNqswh8M1RMJYdQduT6xbWSgK36P/Z/v+p888pM69jMMfS8Xd8F6I1kQ/I9HUGg==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/autoprefixer": {
+      "version": "10.4.22",
+      "resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-10.4.22.tgz",
+      "integrity": "sha512-ARe0v/t9gO28Bznv6GgqARmVqcWOV3mfgUPn9becPHMiD3o9BwlRgaeccZnwTpZ7Zwqrm+c1sUSsMxIzQzc8Xg==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/postcss/"
+        },
+        {
+          "type": "tidelift",
+          "url": "https://tidelift.com/funding/github/npm/autoprefixer"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "browserslist": "^4.27.0",
+        "caniuse-lite": "^1.0.30001754",
+        "fraction.js": "^5.3.4",
+        "normalize-range": "^0.1.2",
+        "picocolors": "^1.1.1",
+        "postcss-value-parser": "^4.2.0"
+      },
+      "bin": {
+        "autoprefixer": "bin/autoprefixer"
+      },
+      "engines": {
+        "node": "^10 || ^12 || >=14"
+      },
+      "peerDependencies": {
+        "postcss": "^8.1.0"
+      }
+    },
+    "node_modules/baseline-browser-mapping": {
+      "version": "2.9.3",
+      "resolved": "https://registry.npmjs.org/baseline-browser-mapping/-/baseline-browser-mapping-2.9.3.tgz",
+      "integrity": "sha512-8QdH6czo+G7uBsNo0GiUfouPN1lRzKdJTGnKXwe12gkFbnnOUaUKGN55dMkfy+mnxmvjwl9zcI4VncczcVXDhA==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "bin": {
+        "baseline-browser-mapping": "dist/cli.js"
+      }
+    },
+    "node_modules/binary-extensions": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-2.3.0.tgz",
+      "integrity": "sha512-Ceh+7ox5qe7LJuLHoY0feh3pHuUDHAcRUeyL2VYghZwfpkNIy/+8Ocg0a3UuSoYzavmylwuLWQOf3hl0jjMMIw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/braces": {
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/braces/-/braces-3.0.3.tgz",
+      "integrity": "sha512-yQbXgO/OSZVD2IsiLlro+7Hf6Q18EJrKSEsdoMzKePKXct3gvD8oLcOQdIzGupr5Fj+EDe8gO/lxc1BzfMpxvA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "fill-range": "^7.1.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/browserslist": {
+      "version": "4.28.1",
+      "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.28.1.tgz",
+      "integrity": "sha512-ZC5Bd0LgJXgwGqUknZY/vkUQ04r8NXnJZ3yYi4vDmSiZmC/pdSN0NbNRPxZpbtO4uAfDUAFffO8IZoM3Gj8IkA==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/browserslist"
+        },
+        {
+          "type": "tidelift",
+          "url": "https://tidelift.com/funding/github/npm/browserslist"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "baseline-browser-mapping": "^2.9.0",
+        "caniuse-lite": "^1.0.30001759",
+        "electron-to-chromium": "^1.5.263",
+        "node-releases": "^2.0.27",
+        "update-browserslist-db": "^1.2.0"
+      },
+      "bin": {
+        "browserslist": "cli.js"
+      },
+      "engines": {
+        "node": "^6 || ^7 || ^8 || ^9 || ^10 || ^11 || ^12 || >=13.7"
+      }
+    },
+    "node_modules/camelcase-css": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/camelcase-css/-/camelcase-css-2.0.1.tgz",
+      "integrity": "sha512-QOSvevhslijgYwRx6Rv7zKdMF8lbRmx+uQGx2+vDc+KI/eBnsy9kit5aj23AgGu3pa4t9AgwbnXWqS+iOY+2aA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 6"
+      }
+    },
+    "node_modules/caniuse-lite": {
+      "version": "1.0.30001759",
+      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001759.tgz",
+      "integrity": "sha512-Pzfx9fOKoKvevQf8oCXoyNRQ5QyxJj+3O0Rqx2V5oxT61KGx8+n6hV/IUyJeifUci2clnmmKVpvtiqRzgiWjSw==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/browserslist"
+        },
+        {
+          "type": "tidelift",
+          "url": "https://tidelift.com/funding/github/npm/caniuse-lite"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "license": "CC-BY-4.0"
+    },
+    "node_modules/chokidar": {
+      "version": "3.6.0",
+      "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.6.0.tgz",
+      "integrity": "sha512-7VT13fmjotKpGipCW9JEQAusEPE+Ei8nl6/g4FBAmIm0GOOLMua9NDDo/DWp0ZAxCr3cPq5ZpBqmPAQgDda2Pw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "anymatch": "~3.1.2",
+        "braces": "~3.0.2",
+        "glob-parent": "~5.1.2",
+        "is-binary-path": "~2.1.0",
+        "is-glob": "~4.0.1",
+        "normalize-path": "~3.0.0",
+        "readdirp": "~3.6.0"
+      },
+      "engines": {
+        "node": ">= 8.10.0"
+      },
+      "funding": {
+        "url": "https://paulmillr.com/funding/"
+      },
+      "optionalDependencies": {
+        "fsevents": "~2.3.2"
+      }
+    },
+    "node_modules/chokidar/node_modules/glob-parent": {
+      "version": "5.1.2",
+      "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz",
+      "integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "is-glob": "^4.0.1"
+      },
+      "engines": {
+        "node": ">= 6"
+      }
+    },
+    "node_modules/commander": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/commander/-/commander-4.1.1.tgz",
+      "integrity": "sha512-NOKm8xhkzAjzFx8B2v5OAHT+u5pRQc2UCa2Vq9jYL/31o2wi9mxBA7LIFs3sV5VSC49z6pEhfbMULvShKj26WA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 6"
+      }
+    },
+    "node_modules/convert-source-map": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/convert-source-map/-/convert-source-map-2.0.0.tgz",
+      "integrity": "sha512-Kvp459HrV2FEJ1CAsi1Ku+MY3kasH19TFykTz2xWmMeq6bk2NU3XXvfJ+Q61m0xktWwt+1HSYf3JZsTms3aRJg==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/cssesc": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/cssesc/-/cssesc-3.0.0.tgz",
+      "integrity": "sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg==",
+      "dev": true,
+      "license": "MIT",
+      "bin": {
+        "cssesc": "bin/cssesc"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/csstype": {
+      "version": "3.2.3",
+      "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.2.3.tgz",
+      "integrity": "sha512-z1HGKcYy2xA8AGQfwrn0PAy+PB7X/GSj3UVJW9qKyn43xWa+gl5nXmU4qqLMRzWVLFC8KusUX8T/0kCiOYpAIQ==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/debug": {
+      "version": "4.4.3",
+      "resolved": "https://registry.npmjs.org/debug/-/debug-4.4.3.tgz",
+      "integrity": "sha512-RGwwWnwQvkVfavKVt22FGLw+xYSdzARwm0ru6DhTVA3umU5hZc28V3kO4stgYryrTlLpuvgI9GiijltAjNbcqA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "ms": "^2.1.3"
+      },
+      "engines": {
+        "node": ">=6.0"
+      },
+      "peerDependenciesMeta": {
+        "supports-color": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/didyoumean": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/didyoumean/-/didyoumean-1.2.2.tgz",
+      "integrity": "sha512-gxtyfqMg7GKyhQmb056K7M3xszy/myH8w+B4RT+QXBQsvAOdc3XymqDDPHx1BgPgsdAA5SIifona89YtRATDzw==",
+      "dev": true,
+      "license": "Apache-2.0"
+    },
+    "node_modules/dlv": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/dlv/-/dlv-1.1.3.tgz",
+      "integrity": "sha512-+HlytyjlPKnIG8XuRG8WvmBP8xs8P71y+SKKS6ZXWoEgLuePxtDoUEiH7WkdePWrQ5JBpE6aoVqfZfJUQkjXwA==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/electron-to-chromium": {
+      "version": "1.5.266",
+      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.5.266.tgz",
+      "integrity": "sha512-kgWEglXvkEfMH7rxP5OSZZwnaDWT7J9EoZCujhnpLbfi0bbNtRkgdX2E3gt0Uer11c61qCYktB3hwkAS325sJg==",
+      "dev": true,
+      "license": "ISC"
+    },
+    "node_modules/esbuild": {
+      "version": "0.25.12",
+      "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.25.12.tgz",
+      "integrity": "sha512-bbPBYYrtZbkt6Os6FiTLCTFxvq4tt3JKall1vRwshA3fdVztsLAatFaZobhkBC8/BrPetoa0oksYoKXoG4ryJg==",
+      "dev": true,
+      "hasInstallScript": true,
+      "license": "MIT",
+      "bin": {
+        "esbuild": "bin/esbuild"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "optionalDependencies": {
+        "@esbuild/aix-ppc64": "0.25.12",
+        "@esbuild/android-arm": "0.25.12",
+        "@esbuild/android-arm64": "0.25.12",
+        "@esbuild/android-x64": "0.25.12",
+        "@esbuild/darwin-arm64": "0.25.12",
+        "@esbuild/darwin-x64": "0.25.12",
+        "@esbuild/freebsd-arm64": "0.25.12",
+        "@esbuild/freebsd-x64": "0.25.12",
+        "@esbuild/linux-arm": "0.25.12",
+        "@esbuild/linux-arm64": "0.25.12",
+        "@esbuild/linux-ia32": "0.25.12",
+        "@esbuild/linux-loong64": "0.25.12",
+        "@esbuild/linux-mips64el": "0.25.12",
+        "@esbuild/linux-ppc64": "0.25.12",
+        "@esbuild/linux-riscv64": "0.25.12",
+        "@esbuild/linux-s390x": "0.25.12",
+        "@esbuild/linux-x64": "0.25.12",
+        "@esbuild/netbsd-arm64": "0.25.12",
+        "@esbuild/netbsd-x64": "0.25.12",
+        "@esbuild/openbsd-arm64": "0.25.12",
+        "@esbuild/openbsd-x64": "0.25.12",
+        "@esbuild/openharmony-arm64": "0.25.12",
+        "@esbuild/sunos-x64": "0.25.12",
+        "@esbuild/win32-arm64": "0.25.12",
+        "@esbuild/win32-ia32": "0.25.12",
+        "@esbuild/win32-x64": "0.25.12"
+      }
+    },
+    "node_modules/escalade": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/escalade/-/escalade-3.2.0.tgz",
+      "integrity": "sha512-WUj2qlxaQtO4g6Pq5c29GTcWGDyd8itL8zTlipgECz3JesAiiOKotd8JU6otB3PACgG6xkJUyVhboMS+bje/jA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/fast-glob": {
+      "version": "3.3.3",
+      "resolved": "https://registry.npmjs.org/fast-glob/-/fast-glob-3.3.3.tgz",
+      "integrity": "sha512-7MptL8U0cqcFdzIzwOTHoilX9x5BrNqye7Z/LuC7kCMRio1EMSyqRK3BEAUD7sXRq4iT4AzTVuZdhgQ2TCvYLg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@nodelib/fs.stat": "^2.0.2",
+        "@nodelib/fs.walk": "^1.2.3",
+        "glob-parent": "^5.1.2",
+        "merge2": "^1.3.0",
+        "micromatch": "^4.0.8"
+      },
+      "engines": {
+        "node": ">=8.6.0"
+      }
+    },
+    "node_modules/fast-glob/node_modules/glob-parent": {
+      "version": "5.1.2",
+      "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz",
+      "integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "is-glob": "^4.0.1"
+      },
+      "engines": {
+        "node": ">= 6"
+      }
+    },
+    "node_modules/fastq": {
+      "version": "1.19.1",
+      "resolved": "https://registry.npmjs.org/fastq/-/fastq-1.19.1.tgz",
+      "integrity": "sha512-GwLTyxkCXjXbxqIhTsMI2Nui8huMPtnxg7krajPJAjnEG/iiOS7i+zCtWGZR9G0NBKbXKh6X9m9UIsYX/N6vvQ==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "reusify": "^1.0.4"
+      }
+    },
+    "node_modules/fdir": {
+      "version": "6.5.0",
+      "resolved": "https://registry.npmjs.org/fdir/-/fdir-6.5.0.tgz",
+      "integrity": "sha512-tIbYtZbucOs0BRGqPJkshJUYdL+SDH7dVM8gjy+ERp3WAUjLEFJE+02kanyHtwjWOnwrKYBiwAmM0p4kLJAnXg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=12.0.0"
+      },
+      "peerDependencies": {
+        "picomatch": "^3 || ^4"
+      },
+      "peerDependenciesMeta": {
+        "picomatch": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/fill-range": {
+      "version": "7.1.1",
+      "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.1.1.tgz",
+      "integrity": "sha512-YsGpe3WHLK8ZYi4tWDg2Jy3ebRz2rXowDxnld4bkQB00cc/1Zw9AWnC0i9ztDJitivtQvaI9KaLyKrc+hBW0yg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "to-regex-range": "^5.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/fraction.js": {
+      "version": "5.3.4",
+      "resolved": "https://registry.npmjs.org/fraction.js/-/fraction.js-5.3.4.tgz",
+      "integrity": "sha512-1X1NTtiJphryn/uLQz3whtY6jK3fTqoE3ohKs0tT+Ujr1W59oopxmoEh7Lu5p6vBaPbgoM0bzveAW4Qi5RyWDQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": "*"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/rawify"
+      }
+    },
+    "node_modules/framer-motion": {
+      "version": "11.18.2",
+      "resolved": "https://registry.npmjs.org/framer-motion/-/framer-motion-11.18.2.tgz",
+      "integrity": "sha512-5F5Och7wrvtLVElIpclDT0CBzMVg3dL22B64aZwHtsIY8RB4mXICLrkajK4G9R+ieSAGcgrLeae2SeUTg2pr6w==",
+      "license": "MIT",
+      "dependencies": {
+        "motion-dom": "^11.18.1",
+        "motion-utils": "^11.18.1",
+        "tslib": "^2.4.0"
+      },
+      "peerDependencies": {
+        "@emotion/is-prop-valid": "*",
+        "react": "^18.0.0 || ^19.0.0",
+        "react-dom": "^18.0.0 || ^19.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@emotion/is-prop-valid": {
+          "optional": true
+        },
+        "react": {
+          "optional": true
+        },
+        "react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/fsevents": {
+      "version": "2.3.3",
+      "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.3.tgz",
+      "integrity": "sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==",
+      "dev": true,
+      "hasInstallScript": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": "^8.16.0 || ^10.6.0 || >=11.0.0"
+      }
+    },
+    "node_modules/function-bind": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.2.tgz",
+      "integrity": "sha512-7XHNxH7qX9xG5mIwxkhumTox/MIRNcOgDrxWsMt2pAr23WHp6MrRlN7FBSFpCpr+oVO0F744iUgR82nJMfG2SA==",
+      "dev": true,
+      "license": "MIT",
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/gensync": {
+      "version": "1.0.0-beta.2",
+      "resolved": "https://registry.npmjs.org/gensync/-/gensync-1.0.0-beta.2.tgz",
+      "integrity": "sha512-3hN7NaskYvMDLQY55gnW3NQ+mesEAepTqlg+VEbj7zzqEMBVNhzcGYYeqFo/TlYz6eQiFcp1HcsCZO+nGgS8zg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/glob-parent": {
+      "version": "6.0.2",
+      "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-6.0.2.tgz",
+      "integrity": "sha512-XxwI8EOhVQgWp6iDL+3b0r86f4d6AX6zSU55HfB4ydCEuXLXc5FcYeOu+nnGftS4TEju/11rt4KJPTMgbfmv4A==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "is-glob": "^4.0.3"
+      },
+      "engines": {
+        "node": ">=10.13.0"
+      }
+    },
+    "node_modules/hasown": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/hasown/-/hasown-2.0.2.tgz",
+      "integrity": "sha512-0hJU9SCPvmMzIBdZFqNPXWa6dqh7WdH0cII9y+CyS8rG3nL48Bclra9HmKhVVUHyPWNH5Y7xDwAB7bfgSjkUMQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "function-bind": "^1.1.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/is-binary-path": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/is-binary-path/-/is-binary-path-2.1.0.tgz",
+      "integrity": "sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "binary-extensions": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/is-core-module": {
+      "version": "2.16.1",
+      "resolved": "https://registry.npmjs.org/is-core-module/-/is-core-module-2.16.1.tgz",
+      "integrity": "sha512-UfoeMA6fIJ8wTYFEUjelnaGI67v6+N7qXJEvQuIGa99l4xsCruSYOVSQ0uPANn4dAzm8lkYPaKLrrijLq7x23w==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "hasown": "^2.0.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/is-extglob": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/is-extglob/-/is-extglob-2.1.1.tgz",
+      "integrity": "sha512-SbKbANkN603Vi4jEZv49LeVJMn4yGwsbzZworEoyEiutsN3nJYdbO36zfhGJ6QEDpOZIFkDtnq5JRxmvl3jsoQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/is-glob": {
+      "version": "4.0.3",
+      "resolved": "https://registry.npmjs.org/is-glob/-/is-glob-4.0.3.tgz",
+      "integrity": "sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "is-extglob": "^2.1.1"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/is-number": {
+      "version": "7.0.0",
+      "resolved": "https://registry.npmjs.org/is-number/-/is-number-7.0.0.tgz",
+      "integrity": "sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.12.0"
+      }
+    },
+    "node_modules/jiti": {
+      "version": "1.21.7",
+      "resolved": "https://registry.npmjs.org/jiti/-/jiti-1.21.7.tgz",
+      "integrity": "sha512-/imKNG4EbWNrVjoNC/1H5/9GFy+tqjGBHCaSsN+P2RnPqjsLmv6UD3Ej+Kj8nBWaRAwyk7kK5ZUc+OEatnTR3A==",
+      "dev": true,
+      "license": "MIT",
+      "peer": true,
+      "bin": {
+        "jiti": "bin/jiti.js"
+      }
+    },
+    "node_modules/js-tokens": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
+      "integrity": "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/jsesc": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/jsesc/-/jsesc-3.1.0.tgz",
+      "integrity": "sha512-/sM3dO2FOzXjKQhJuo0Q173wf2KOo8t4I8vHy6lF9poUp7bKT0/NHE8fPX23PwfhnykfqnC2xRxOnVw5XuGIaA==",
+      "dev": true,
+      "license": "MIT",
+      "bin": {
+        "jsesc": "bin/jsesc"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/json5": {
+      "version": "2.2.3",
+      "resolved": "https://registry.npmjs.org/json5/-/json5-2.2.3.tgz",
+      "integrity": "sha512-XmOWe7eyHYH14cLdVPoyg+GOH3rYX++KpzrylJwSW98t3Nk+U8XOl8FWKOgwtzdb8lXGf6zYwDUzeHMWfxasyg==",
+      "dev": true,
+      "license": "MIT",
+      "bin": {
+        "json5": "lib/cli.js"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/lilconfig": {
+      "version": "3.1.3",
+      "resolved": "https://registry.npmjs.org/lilconfig/-/lilconfig-3.1.3.tgz",
+      "integrity": "sha512-/vlFKAoH5Cgt3Ie+JLhRbwOsCQePABiU3tJ1egGvyQ+33R/vcwM2Zl2QR/LzjsBeItPt3oSVXapn+m4nQDvpzw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=14"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/antonk52"
+      }
+    },
+    "node_modules/lines-and-columns": {
+      "version": "1.2.4",
+      "resolved": "https://registry.npmjs.org/lines-and-columns/-/lines-and-columns-1.2.4.tgz",
+      "integrity": "sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/lru-cache": {
+      "version": "5.1.1",
+      "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-5.1.1.tgz",
+      "integrity": "sha512-KpNARQA3Iwv+jTA0utUVVbrh+Jlrr1Fv0e56GGzAFOXN7dk/FviaDW8LHmK52DlcH4WP2n6gI8vN1aesBFgo9w==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "yallist": "^3.0.2"
+      }
+    },
+    "node_modules/merge2": {
+      "version": "1.4.1",
+      "resolved": "https://registry.npmjs.org/merge2/-/merge2-1.4.1.tgz",
+      "integrity": "sha512-8q7VEgMJW4J8tcfVPy8g09NcQwZdbwFEqhe/WZkoIzjn/3TGDwtOCYtXGxA3O8tPzpczCCDgv+P2P5y00ZJOOg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 8"
+      }
+    },
+    "node_modules/micromatch": {
+      "version": "4.0.8",
+      "resolved": "https://registry.npmjs.org/micromatch/-/micromatch-4.0.8.tgz",
+      "integrity": "sha512-PXwfBhYu0hBCPw8Dn0E+WDYb7af3dSLVWKi3HGv84IdF4TyFoC0ysxFd0Goxw7nSv4T/PzEJQxsYsEiFCKo2BA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "braces": "^3.0.3",
+        "picomatch": "^2.3.1"
+      },
+      "engines": {
+        "node": ">=8.6"
+      }
+    },
+    "node_modules/micromatch/node_modules/picomatch": {
+      "version": "2.3.1",
+      "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.1.tgz",
+      "integrity": "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=8.6"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/jonschlinkert"
+      }
+    },
+    "node_modules/motion-dom": {
+      "version": "11.18.1",
+      "resolved": "https://registry.npmjs.org/motion-dom/-/motion-dom-11.18.1.tgz",
+      "integrity": "sha512-g76KvA001z+atjfxczdRtw/RXOM3OMSdd1f4DL77qCTF/+avrRJiawSG4yDibEQ215sr9kpinSlX2pCTJ9zbhw==",
+      "license": "MIT",
+      "dependencies": {
+        "motion-utils": "^11.18.1"
+      }
+    },
+    "node_modules/motion-utils": {
+      "version": "11.18.1",
+      "resolved": "https://registry.npmjs.org/motion-utils/-/motion-utils-11.18.1.tgz",
+      "integrity": "sha512-49Kt+HKjtbJKLtgO/LKj9Ld+6vw9BjH5d9sc40R/kVyH8GLAXgT42M2NnuPcJNuA3s9ZfZBUcwIgpmZWGEE+hA==",
+      "license": "MIT"
+    },
+    "node_modules/ms": {
+      "version": "2.1.3",
+      "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",
+      "integrity": "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/mz": {
+      "version": "2.7.0",
+      "resolved": "https://registry.npmjs.org/mz/-/mz-2.7.0.tgz",
+      "integrity": "sha512-z81GNO7nnYMEhrGh9LeymoE4+Yr0Wn5McHIZMK5cfQCl+NDX08sCZgUc9/6MHni9IWuFLm1Z3HTCXu2z9fN62Q==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "any-promise": "^1.0.0",
+        "object-assign": "^4.0.1",
+        "thenify-all": "^1.0.0"
+      }
+    },
+    "node_modules/nanoid": {
+      "version": "3.3.11",
+      "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.11.tgz",
+      "integrity": "sha512-N8SpfPUnUp1bK+PMYW8qSWdl9U+wwNWI4QKxOYDy9JAro3WMX7p2OeVRF9v+347pnakNevPmiHhNmZ2HbFA76w==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "license": "MIT",
+      "bin": {
+        "nanoid": "bin/nanoid.cjs"
+      },
+      "engines": {
+        "node": "^10 || ^12 || ^13.7 || ^14 || >=15.0.1"
+      }
+    },
+    "node_modules/node-releases": {
+      "version": "2.0.27",
+      "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-2.0.27.tgz",
+      "integrity": "sha512-nmh3lCkYZ3grZvqcCH+fjmQ7X+H0OeZgP40OierEaAptX4XofMh5kwNbWh7lBduUzCcV/8kZ+NDLCwm2iorIlA==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/normalize-path": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/normalize-path/-/normalize-path-3.0.0.tgz",
+      "integrity": "sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/normalize-range": {
+      "version": "0.1.2",
+      "resolved": "https://registry.npmjs.org/normalize-range/-/normalize-range-0.1.2.tgz",
+      "integrity": "sha512-bdok/XvKII3nUpklnV6P2hxtMNrCboOjAcyBuQnWEhO665FwrSNRxU+AqpsyvO6LgGYPspN+lu5CLtw4jPRKNA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/object-assign": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
+      "integrity": "sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/object-hash": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/object-hash/-/object-hash-3.0.0.tgz",
+      "integrity": "sha512-RSn9F68PjH9HqtltsSnqYC1XXoWe9Bju5+213R98cNGttag9q9yAOTzdbsqvIa7aNm5WffBZFpWYr2aWrklWAw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 6"
+      }
+    },
+    "node_modules/path-parse": {
+      "version": "1.0.7",
+      "resolved": "https://registry.npmjs.org/path-parse/-/path-parse-1.0.7.tgz",
+      "integrity": "sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/picocolors": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.1.1.tgz",
+      "integrity": "sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA==",
+      "dev": true,
+      "license": "ISC"
+    },
+    "node_modules/picomatch": {
+      "version": "4.0.3",
+      "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-4.0.3.tgz",
+      "integrity": "sha512-5gTmgEY/sqK6gFXLIsQNH19lWb4ebPDLA4SdLP7dsWkIXHWlG66oPuVvXSGFPppYZz8ZDZq0dYYrbHfBCVUb1Q==",
+      "dev": true,
+      "license": "MIT",
+      "peer": true,
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/jonschlinkert"
+      }
+    },
+    "node_modules/pify": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/pify/-/pify-2.3.0.tgz",
+      "integrity": "sha512-udgsAY+fTnvv7kI7aaxbqwWNb0AHiB0qBO89PZKPkoTmGOgdbrHDKD+0B2X4uTfJ/FT1R09r9gTsjUjNJotuog==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/pirates": {
+      "version": "4.0.7",
+      "resolved": "https://registry.npmjs.org/pirates/-/pirates-4.0.7.tgz",
+      "integrity": "sha512-TfySrs/5nm8fQJDcBDuUng3VOUKsd7S+zqvbOTiGXHfxX4wK31ard+hoNuvkicM/2YFzlpDgABOevKSsB4G/FA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 6"
+      }
+    },
+    "node_modules/postcss": {
+      "version": "8.5.6",
+      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.5.6.tgz",
+      "integrity": "sha512-3Ybi1tAuwAP9s0r1UQ2J4n5Y0G05bJkpUIO0/bI9MhwmD70S5aTWbXGBwxHrelT+XM1k6dM0pk+SwNkpTRN7Pg==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/postcss/"
+        },
+        {
+          "type": "tidelift",
+          "url": "https://tidelift.com/funding/github/npm/postcss"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "nanoid": "^3.3.11",
+        "picocolors": "^1.1.1",
+        "source-map-js": "^1.2.1"
+      },
+      "engines": {
+        "node": "^10 || ^12 || >=14"
+      }
+    },
+    "node_modules/postcss-import": {
+      "version": "15.1.0",
+      "resolved": "https://registry.npmjs.org/postcss-import/-/postcss-import-15.1.0.tgz",
+      "integrity": "sha512-hpr+J05B2FVYUAXHeK1YyI267J/dDDhMU6B6civm8hSY1jYJnBXxzKDKDswzJmtLHryrjhnDjqqp/49t8FALew==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "postcss-value-parser": "^4.0.0",
+        "read-cache": "^1.0.0",
+        "resolve": "^1.1.7"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      },
+      "peerDependencies": {
+        "postcss": "^8.0.0"
+      }
+    },
+    "node_modules/postcss-js": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/postcss-js/-/postcss-js-4.1.0.tgz",
+      "integrity": "sha512-oIAOTqgIo7q2EOwbhb8UalYePMvYoIeRY2YKntdpFQXNosSu3vLrniGgmH9OKs/qAkfoj5oB3le/7mINW1LCfw==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/postcss/"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "camelcase-css": "^2.0.1"
+      },
+      "engines": {
+        "node": "^12 || ^14 || >= 16"
+      },
+      "peerDependencies": {
+        "postcss": "^8.4.21"
+      }
+    },
+    "node_modules/postcss-load-config": {
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/postcss-load-config/-/postcss-load-config-6.0.1.tgz",
+      "integrity": "sha512-oPtTM4oerL+UXmx+93ytZVN82RrlY/wPUV8IeDxFrzIjXOLF1pN+EmKPLbubvKHT2HC20xXsCAH2Z+CKV6Oz/g==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/postcss/"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "lilconfig": "^3.1.1"
+      },
+      "engines": {
+        "node": ">= 18"
+      },
+      "peerDependencies": {
+        "jiti": ">=1.21.0",
+        "postcss": ">=8.0.9",
+        "tsx": "^4.8.1",
+        "yaml": "^2.4.2"
+      },
+      "peerDependenciesMeta": {
+        "jiti": {
+          "optional": true
+        },
+        "postcss": {
+          "optional": true
+        },
+        "tsx": {
+          "optional": true
+        },
+        "yaml": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/postcss-nested": {
+      "version": "6.2.0",
+      "resolved": "https://registry.npmjs.org/postcss-nested/-/postcss-nested-6.2.0.tgz",
+      "integrity": "sha512-HQbt28KulC5AJzG+cZtj9kvKB93CFCdLvog1WFLf1D+xmMvPGlBstkpTEZfK5+AN9hfJocyBFCNiqyS48bpgzQ==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/postcss/"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "postcss-selector-parser": "^6.1.1"
+      },
+      "engines": {
+        "node": ">=12.0"
+      },
+      "peerDependencies": {
+        "postcss": "^8.2.14"
+      }
+    },
+    "node_modules/postcss-selector-parser": {
+      "version": "6.1.2",
+      "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-6.1.2.tgz",
+      "integrity": "sha512-Q8qQfPiZ+THO/3ZrOrO0cJJKfpYCagtMUkXbnEfmgUjwXg6z/WBeOyS9APBBPCTSiDV+s4SwQGu8yFsiMRIudg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "cssesc": "^3.0.0",
+        "util-deprecate": "^1.0.2"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/postcss-value-parser": {
+      "version": "4.2.0",
+      "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-4.2.0.tgz",
+      "integrity": "sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/queue-microtask": {
+      "version": "1.2.3",
+      "resolved": "https://registry.npmjs.org/queue-microtask/-/queue-microtask-1.2.3.tgz",
+      "integrity": "sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/feross"
+        },
+        {
+          "type": "patreon",
+          "url": "https://www.patreon.com/feross"
+        },
+        {
+          "type": "consulting",
+          "url": "https://feross.org/support"
+        }
+      ],
+      "license": "MIT"
+    },
+    "node_modules/react": {
+      "version": "19.2.1",
+      "resolved": "https://registry.npmjs.org/react/-/react-19.2.1.tgz",
+      "integrity": "sha512-DGrYcCWK7tvYMnWh79yrPHt+vdx9tY+1gPZa7nJQtO/p8bLTDaHp4dzwEhQB7pZ4Xe3ok4XKuEPrVuc+wlpkmw==",
+      "license": "MIT",
+      "peer": true,
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/react-dom": {
+      "version": "19.2.1",
+      "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-19.2.1.tgz",
+      "integrity": "sha512-ibrK8llX2a4eOskq1mXKu/TGZj9qzomO+sNfO98M6d9zIPOEhlBkMkBUBLd1vgS0gQsLDBzA+8jJBVXDnfHmJg==",
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "scheduler": "^0.27.0"
+      },
+      "peerDependencies": {
+        "react": "^19.2.1"
+      }
+    },
+    "node_modules/react-refresh": {
+      "version": "0.17.0",
+      "resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.17.0.tgz",
+      "integrity": "sha512-z6F7K9bV85EfseRCp2bzrpyQ0Gkw1uLoCel9XBVWPg/TjRj94SkJzUTGfOa4bs7iJvBWtQG0Wq7wnI0syw3EBQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/read-cache": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/read-cache/-/read-cache-1.0.0.tgz",
+      "integrity": "sha512-Owdv/Ft7IjOgm/i0xvNDZ1LrRANRfew4b2prF3OWMQLxLfu3bS8FVhCsrSCMK4lR56Y9ya+AThoTpDCTxCmpRA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "pify": "^2.3.0"
+      }
+    },
+    "node_modules/readdirp": {
+      "version": "3.6.0",
+      "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-3.6.0.tgz",
+      "integrity": "sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "picomatch": "^2.2.1"
+      },
+      "engines": {
+        "node": ">=8.10.0"
+      }
+    },
+    "node_modules/readdirp/node_modules/picomatch": {
+      "version": "2.3.1",
+      "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.1.tgz",
+      "integrity": "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=8.6"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/jonschlinkert"
+      }
+    },
+    "node_modules/resolve": {
+      "version": "1.22.11",
+      "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.11.tgz",
+      "integrity": "sha512-RfqAvLnMl313r7c9oclB1HhUEAezcpLjz95wFH4LVuhk9JF/r22qmVP9AMmOU4vMX7Q8pN8jwNg/CSpdFnMjTQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "is-core-module": "^2.16.1",
+        "path-parse": "^1.0.7",
+        "supports-preserve-symlinks-flag": "^1.0.0"
+      },
+      "bin": {
+        "resolve": "bin/resolve"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/reusify": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/reusify/-/reusify-1.1.0.tgz",
+      "integrity": "sha512-g6QUff04oZpHs0eG5p83rFLhHeV00ug/Yf9nZM6fLeUrPguBTkTQOdpAWWspMh55TZfVQDPaN3NQJfbVRAxdIw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "iojs": ">=1.0.0",
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/rollup": {
+      "version": "4.53.3",
+      "resolved": "https://registry.npmjs.org/rollup/-/rollup-4.53.3.tgz",
+      "integrity": "sha512-w8GmOxZfBmKknvdXU1sdM9NHcoQejwF/4mNgj2JuEEdRaHwwF12K7e9eXn1nLZ07ad+du76mkVsyeb2rKGllsA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@types/estree": "1.0.8"
+      },
+      "bin": {
+        "rollup": "dist/bin/rollup"
+      },
+      "engines": {
+        "node": ">=18.0.0",
+        "npm": ">=8.0.0"
+      },
+      "optionalDependencies": {
+        "@rollup/rollup-android-arm-eabi": "4.53.3",
+        "@rollup/rollup-android-arm64": "4.53.3",
+        "@rollup/rollup-darwin-arm64": "4.53.3",
+        "@rollup/rollup-darwin-x64": "4.53.3",
+        "@rollup/rollup-freebsd-arm64": "4.53.3",
+        "@rollup/rollup-freebsd-x64": "4.53.3",
+        "@rollup/rollup-linux-arm-gnueabihf": "4.53.3",
+        "@rollup/rollup-linux-arm-musleabihf": "4.53.3",
+        "@rollup/rollup-linux-arm64-gnu": "4.53.3",
+        "@rollup/rollup-linux-arm64-musl": "4.53.3",
+        "@rollup/rollup-linux-loong64-gnu": "4.53.3",
+        "@rollup/rollup-linux-ppc64-gnu": "4.53.3",
+        "@rollup/rollup-linux-riscv64-gnu": "4.53.3",
+        "@rollup/rollup-linux-riscv64-musl": "4.53.3",
+        "@rollup/rollup-linux-s390x-gnu": "4.53.3",
+        "@rollup/rollup-linux-x64-gnu": "4.53.3",
+        "@rollup/rollup-linux-x64-musl": "4.53.3",
+        "@rollup/rollup-openharmony-arm64": "4.53.3",
+        "@rollup/rollup-win32-arm64-msvc": "4.53.3",
+        "@rollup/rollup-win32-ia32-msvc": "4.53.3",
+        "@rollup/rollup-win32-x64-gnu": "4.53.3",
+        "@rollup/rollup-win32-x64-msvc": "4.53.3",
+        "fsevents": "~2.3.2"
+      }
+    },
+    "node_modules/run-parallel": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/run-parallel/-/run-parallel-1.2.0.tgz",
+      "integrity": "sha512-5l4VyZR86LZ/lDxZTR6jqL8AFE2S0IFLMP26AbjsLVADxHdhB/c0GUsH+y39UfCi3dzz8OlQuPmnaJOMoDHQBA==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/feross"
+        },
+        {
+          "type": "patreon",
+          "url": "https://www.patreon.com/feross"
+        },
+        {
+          "type": "consulting",
+          "url": "https://feross.org/support"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "queue-microtask": "^1.2.2"
+      }
+    },
+    "node_modules/scheduler": {
+      "version": "0.27.0",
+      "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.27.0.tgz",
+      "integrity": "sha512-eNv+WrVbKu1f3vbYJT/xtiF5syA5HPIMtf9IgY/nKg0sWqzAUEvqY/xm7OcZc/qafLx/iO9FgOmeSAp4v5ti/Q==",
+      "license": "MIT"
+    },
+    "node_modules/semver": {
+      "version": "6.3.1",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.1.tgz",
+      "integrity": "sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==",
+      "dev": true,
+      "license": "ISC",
+      "bin": {
+        "semver": "bin/semver.js"
+      }
+    },
+    "node_modules/source-map-js": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.1.tgz",
+      "integrity": "sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA==",
+      "dev": true,
+      "license": "BSD-3-Clause",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/sucrase": {
+      "version": "3.35.1",
+      "resolved": "https://registry.npmjs.org/sucrase/-/sucrase-3.35.1.tgz",
+      "integrity": "sha512-DhuTmvZWux4H1UOnWMB3sk0sbaCVOoQZjv8u1rDoTV0HTdGem9hkAZtl4JZy8P2z4Bg0nT+YMeOFyVr4zcG5Tw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@jridgewell/gen-mapping": "^0.3.2",
+        "commander": "^4.0.0",
+        "lines-and-columns": "^1.1.6",
+        "mz": "^2.7.0",
+        "pirates": "^4.0.1",
+        "tinyglobby": "^0.2.11",
+        "ts-interface-checker": "^0.1.9"
+      },
+      "bin": {
+        "sucrase": "bin/sucrase",
+        "sucrase-node": "bin/sucrase-node"
+      },
+      "engines": {
+        "node": ">=16 || 14 >=14.17"
+      }
+    },
+    "node_modules/supports-preserve-symlinks-flag": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/supports-preserve-symlinks-flag/-/supports-preserve-symlinks-flag-1.0.0.tgz",
+      "integrity": "sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/tailwindcss": {
+      "version": "3.4.18",
+      "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.4.18.tgz",
+      "integrity": "sha512-6A2rnmW5xZMdw11LYjhcI5846rt9pbLSabY5XPxo+XWdxwZaFEn47Go4NzFiHu9sNNmr/kXivP1vStfvMaK1GQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@alloc/quick-lru": "^5.2.0",
+        "arg": "^5.0.2",
+        "chokidar": "^3.6.0",
+        "didyoumean": "^1.2.2",
+        "dlv": "^1.1.3",
+        "fast-glob": "^3.3.2",
+        "glob-parent": "^6.0.2",
+        "is-glob": "^4.0.3",
+        "jiti": "^1.21.7",
+        "lilconfig": "^3.1.3",
+        "micromatch": "^4.0.8",
+        "normalize-path": "^3.0.0",
+        "object-hash": "^3.0.0",
+        "picocolors": "^1.1.1",
+        "postcss": "^8.4.47",
+        "postcss-import": "^15.1.0",
+        "postcss-js": "^4.0.1",
+        "postcss-load-config": "^4.0.2 || ^5.0 || ^6.0",
+        "postcss-nested": "^6.2.0",
+        "postcss-selector-parser": "^6.1.2",
+        "resolve": "^1.22.8",
+        "sucrase": "^3.35.0"
+      },
+      "bin": {
+        "tailwind": "lib/cli.js",
+        "tailwindcss": "lib/cli.js"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      }
+    },
+    "node_modules/thenify": {
+      "version": "3.3.1",
+      "resolved": "https://registry.npmjs.org/thenify/-/thenify-3.3.1.tgz",
+      "integrity": "sha512-RVZSIV5IG10Hk3enotrhvz0T9em6cyHBLkH/YAZuKqd8hRkKhSfCGIcP2KUY0EPxndzANBmNllzWPwak+bheSw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "any-promise": "^1.0.0"
+      }
+    },
+    "node_modules/thenify-all": {
+      "version": "1.6.0",
+      "resolved": "https://registry.npmjs.org/thenify-all/-/thenify-all-1.6.0.tgz",
+      "integrity": "sha512-RNxQH/qI8/t3thXJDwcstUO4zeqo64+Uy/+sNVRBx4Xn2OX+OZ9oP+iJnNFqplFra2ZUVeKCSa2oVWi3T4uVmA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "thenify": ">= 3.1.0 < 4"
+      },
+      "engines": {
+        "node": ">=0.8"
+      }
+    },
+    "node_modules/tinyglobby": {
+      "version": "0.2.15",
+      "resolved": "https://registry.npmjs.org/tinyglobby/-/tinyglobby-0.2.15.tgz",
+      "integrity": "sha512-j2Zq4NyQYG5XMST4cbs02Ak8iJUdxRM0XI5QyxXuZOzKOINmWurp3smXu3y5wDcJrptwpSjgXHzIQxR0omXljQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "fdir": "^6.5.0",
+        "picomatch": "^4.0.3"
+      },
+      "engines": {
+        "node": ">=12.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/SuperchupuDev"
+      }
+    },
+    "node_modules/to-regex-range": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz",
+      "integrity": "sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "is-number": "^7.0.0"
+      },
+      "engines": {
+        "node": ">=8.0"
+      }
+    },
+    "node_modules/ts-interface-checker": {
+      "version": "0.1.13",
+      "resolved": "https://registry.npmjs.org/ts-interface-checker/-/ts-interface-checker-0.1.13.tgz",
+      "integrity": "sha512-Y/arvbn+rrz3JCKl9C4kVNfTfSm2/mEp5FSz5EsZSANGPSlQrpRI5M4PKF+mJnE52jOO90PnPSc3Ur3bTQw0gA==",
+      "dev": true,
+      "license": "Apache-2.0"
+    },
+    "node_modules/tslib": {
+      "version": "2.8.1",
+      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.8.1.tgz",
+      "integrity": "sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==",
+      "license": "0BSD"
+    },
+    "node_modules/typescript": {
+      "version": "5.6.3",
+      "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.6.3.tgz",
+      "integrity": "sha512-hjcS1mhfuyi4WW8IWtjP7brDrG2cuDZukyrYrSauoXGNgx0S7zceP07adYkJycEr56BOUTNPzbInooiN3fn1qw==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "peer": true,
+      "bin": {
+        "tsc": "bin/tsc",
+        "tsserver": "bin/tsserver"
+      },
+      "engines": {
+        "node": ">=14.17"
+      }
+    },
+    "node_modules/undici-types": {
+      "version": "6.21.0",
+      "resolved": "https://registry.npmjs.org/undici-types/-/undici-types-6.21.0.tgz",
+      "integrity": "sha512-iwDZqg0QAGrg9Rav5H4n0M64c3mkR59cJ6wQp+7C4nI0gsmExaedaYLNO44eT4AtBBwjbTiGPMlt2Md0T9H9JQ==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/update-browserslist-db": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/update-browserslist-db/-/update-browserslist-db-1.2.2.tgz",
+      "integrity": "sha512-E85pfNzMQ9jpKkA7+TJAi4TJN+tBCuWh5rUcS/sv6cFi+1q9LYDwDI5dpUL0u/73EElyQ8d3TEaeW4sPedBqYA==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/browserslist"
+        },
+        {
+          "type": "tidelift",
+          "url": "https://tidelift.com/funding/github/npm/browserslist"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "escalade": "^3.2.0",
+        "picocolors": "^1.1.1"
+      },
+      "bin": {
+        "update-browserslist-db": "cli.js"
+      },
+      "peerDependencies": {
+        "browserslist": ">= 4.21.0"
+      }
+    },
+    "node_modules/util-deprecate": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",
+      "integrity": "sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/vite": {
+      "version": "6.4.1",
+      "resolved": "https://registry.npmjs.org/vite/-/vite-6.4.1.tgz",
+      "integrity": "sha512-+Oxm7q9hDoLMyJOYfUYBuHQo+dkAloi33apOPP56pzj+vsdJDzr+j1NISE5pyaAuKL4A3UD34qd0lx5+kfKp2g==",
+      "dev": true,
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "esbuild": "^0.25.0",
+        "fdir": "^6.4.4",
+        "picomatch": "^4.0.2",
+        "postcss": "^8.5.3",
+        "rollup": "^4.34.9",
+        "tinyglobby": "^0.2.13"
+      },
+      "bin": {
+        "vite": "bin/vite.js"
+      },
+      "engines": {
+        "node": "^18.0.0 || ^20.0.0 || >=22.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/vitejs/vite?sponsor=1"
+      },
+      "optionalDependencies": {
+        "fsevents": "~2.3.3"
+      },
+      "peerDependencies": {
+        "@types/node": "^18.0.0 || ^20.0.0 || >=22.0.0",
+        "jiti": ">=1.21.0",
+        "less": "*",
+        "lightningcss": "^1.21.0",
+        "sass": "*",
+        "sass-embedded": "*",
+        "stylus": "*",
+        "sugarss": "*",
+        "terser": "^5.16.0",
+        "tsx": "^4.8.1",
+        "yaml": "^2.4.2"
+      },
+      "peerDependenciesMeta": {
+        "@types/node": {
+          "optional": true
+        },
+        "jiti": {
+          "optional": true
+        },
+        "less": {
+          "optional": true
+        },
+        "lightningcss": {
+          "optional": true
+        },
+        "sass": {
+          "optional": true
+        },
+        "sass-embedded": {
+          "optional": true
+        },
+        "stylus": {
+          "optional": true
+        },
+        "sugarss": {
+          "optional": true
+        },
+        "terser": {
+          "optional": true
+        },
+        "tsx": {
+          "optional": true
+        },
+        "yaml": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/yallist": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/yallist/-/yallist-3.1.1.tgz",
+      "integrity": "sha512-a4UGQaWPH59mOXUYnAG2ewncQS4i4F43Tv3JoAM+s2VDAmS9NsK8GpDMLrCHPksFT7h3K6TOoUNn2pb7RoXx4g==",
+      "dev": true,
+      "license": "ISC"
+    }
+  }
+}

frontend/package.json

@@ -0,0 +1,27 @@
+{
+  "name": "video-genesis-studio",
+  "private": true,
+  "version": "1.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc && vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
+    "framer-motion": "^11.15.0"
+  },
+  "devDependencies": {
+    "@types/node": "^22.14.0",
+    "@types/react": "^19.0.0",
+    "@types/react-dom": "^19.0.0",
+    "@vitejs/plugin-react": "^4.3.4",
+    "autoprefixer": "^10.4.20",
+    "postcss": "^8.4.49",
+    "tailwindcss": "^3.4.17",
+    "typescript": "~5.6.0",
+    "vite": "^6.0.0"
+  }
+}

frontend/postcss.config.js

@@ -0,0 +1,7 @@
+export default {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}
+

frontend/src/App.css

@@ -0,0 +1,42 @@
+#root {
+  max-width: 1280px;
+  margin: 0 auto;
+  padding: 2rem;
+  text-align: center;
+}
+
+.logo {
+  height: 6em;
+  padding: 1.5em;
+  will-change: filter;
+  transition: filter 300ms;
+}
+.logo:hover {
+  filter: drop-shadow(0 0 2em #646cffaa);
+}
+.logo.react:hover {
+  filter: drop-shadow(0 0 2em #61dafbaa);
+}
+
+@keyframes logo-spin {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+@media (prefers-reduced-motion: no-preference) {
+  a:nth-of-type(2) .logo {
+    animation: logo-spin infinite 20s linear;
+  }
+}
+
+.card {
+  padding: 2em;
+}
+
+.read-the-docs {
+  color: #888;
+}

frontend/src/App.tsx

@@ -0,0 +1,192 @@
+import { useEffect, useState } from 'react';
+import { AnimatePresence, motion } from 'framer-motion';
+import { GenerationProvider, useGeneration } from '@/context/GenerationContext';
+import { AuthProvider, useAuth } from '@/context/AuthContext';
+import { 
+  ProviderSelect, 
+  GenerationForm, 
+  GenerationProgress, 
+  GenerationComplete,
+  ErrorDisplay,
+  Login,
+  LogoIcon 
+} from '@/components';
+import { checkHealth } from '@/utils/api';
+import type { HealthStatus } from '@/types';
+
+// Main App Content (uses context)
+function AppContent() {
+  const { isAuthenticated, loading: authLoading, logout } = useAuth();
+  const { state, selectProvider, reset } = useGeneration();
+  const [healthStatus, setHealthStatus] = useState<HealthStatus | null>(null);
+  const [healthError, setHealthError] = useState<string | null>(null);
+
+  // Check backend health on mount (must be called before any conditional returns)
+  useEffect(() => {
+    if (isAuthenticated) {
+      checkHealth()
+        .then(setHealthStatus)
+        .catch((err) => setHealthError(err.message));
+    }
+  }, [isAuthenticated]);
+
+  // Show login if not authenticated
+  if (authLoading) {
+    return (
+      <div className="min-h-screen flex items-center justify-center bg-mesh-pattern">
+        <div className="text-center">
+          <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-coral-500 mx-auto mb-4"></div>
+          <p className="text-void-400">Loading...</p>
+        </div>
+      </div>
+    );
+  }
+
+  if (!isAuthenticated) {
+    return <Login />;
+  }
+
+  // Render based on current step
+  const renderContent = () => {
+    switch (state.step) {
+      case 'idle':
+        return (
+          <ProviderSelect 
+            onSelect={(provider) => selectProvider(provider)} 
+          />
+        );
+      
+      case 'configuring':
+        return (
+          <GenerationForm 
+            provider={state.provider!}
+            onBack={() => reset()}
+          />
+        );
+      
+      case 'generating_prompts':
+      case 'generating_video':
+      case 'processing':
+        return <GenerationProgress />;
+      
+      case 'completed':
+        return <GenerationComplete />;
+      
+      case 'error':
+        return <ErrorDisplay />;
+      
+      default:
+        return (
+          <ProviderSelect 
+            onSelect={(provider) => selectProvider(provider)} 
+          />
+        );
+    }
+  };
+
+  return (
+    <div className="min-h-screen flex flex-col bg-mesh-pattern">
+      {/* Header */}
+      <header className="glass-dark sticky top-0 z-50">
+        <div className="max-w-7xl mx-auto px-6 py-4">
+          <div className="flex items-center justify-between">
+            {/* Logo */}
+            <button 
+              onClick={reset}
+              className="flex items-center gap-3 hover:opacity-80 transition-opacity"
+            >
+              <LogoIcon size={36} />
+              <div>
+                <h1 className="text-lg font-display font-bold text-void-100">
+                  Video AdGenesis
+                </h1>
+                <p className="text-xs text-void-500 -mt-0.5">Studio</p>
+              </div>
+            </button>
+
+            {/* Status Indicator */}
+            <div className="flex items-center gap-4">
+              {/* Provider Badge */}
+              {state.provider && state.step !== 'idle' && (
+                <motion.span
+                  initial={{ opacity: 0, scale: 0.9 }}
+                  animate={{ opacity: 1, scale: 1 }}
+                  className={`
+                    px-3 py-1 rounded-full text-xs font-semibold
+                    ${state.provider === 'kling' 
+                      ? 'bg-coral-500/20 text-coral-300' 
+                      : 'bg-electric-500/20 text-electric-300'
+                    }
+                  `}
+                >
+                  {state.provider === 'kling' ? 'KIE API' : 'Replicate'}
+                </motion.span>
+              )}
+
+              {/* Backend Status */}
+              <div className="flex items-center gap-2">
+                <div 
+                  className={`w-2 h-2 rounded-full ${
+                    healthError ? 'bg-red-500' : 
+                    healthStatus ? 'bg-green-500' : 'bg-amber-500 animate-pulse'
+                  }`} 
+                />
+                <span className="text-xs text-void-400">
+                  {healthError ? 'Backend Offline' : 
+                   healthStatus ? (healthStatus.is_dev_mode ? 'Dev Mode' : 'Production') : 
+                   'Connecting...'}
+                </span>
+              </div>
+
+              {/* Logout Button */}
+              <button
+                onClick={logout}
+                className="px-3 py-1.5 text-xs font-medium text-void-400 hover:text-void-200 
+                         hover:bg-void-800 rounded-lg transition-colors"
+                title="Logout"
+              >
+                Logout
+              </button>
+            </div>
+          </div>
+        </div>
+      </header>
+
+      {/* Main Content */}
+      <main className="flex-grow">
+        <AnimatePresence mode="wait">
+          <motion.div
+            key={state.step}
+            initial={{ opacity: 0, y: 10 }}
+            animate={{ opacity: 1, y: 0 }}
+            exit={{ opacity: 0, y: -10 }}
+            transition={{ duration: 0.3 }}
+          >
+            {renderContent()}
+          </motion.div>
+        </AnimatePresence>
+      </main>
+
+      {/* Footer */}
+      <footer className="py-6 text-center">
+        <p className="text-xs text-void-600">
+          Powered by {' '}
+          <span className="text-coral-400">AdGenesis</span>
+        </p>
+      </footer>
+    </div>
+  );
+}
+
+// App Wrapper with Providers
+function App() {
+  return (
+    <AuthProvider>
+      <GenerationProvider>
+        <AppContent />
+      </GenerationProvider>
+    </AuthProvider>
+  );
+}
+
+export default App;

frontend/src/components/ErrorDisplay.tsx

@@ -0,0 +1,70 @@
+import { motion } from 'framer-motion';
+import { useGeneration } from '@/context/GenerationContext';
+import { XIcon, RefreshIcon, ArrowLeftIcon } from './Icons';
+
+export const ErrorDisplay: React.FC = () => {
+  const { state, reset, setStep } = useGeneration();
+  const { error } = state;
+
+  return (
+    <motion.div
+      initial={{ opacity: 0 }}
+      animate={{ opacity: 1 }}
+      className="min-h-[60vh] flex flex-col items-center justify-center p-8"
+    >
+      <div className="max-w-lg w-full text-center">
+        {/* Error Icon */}
+        <motion.div
+          initial={{ scale: 0 }}
+          animate={{ scale: 1 }}
+          transition={{ type: 'spring', duration: 0.5 }}
+          className="w-20 h-20 mx-auto rounded-full bg-red-500/20 flex items-center justify-center mb-6"
+        >
+          <XIcon size={40} className="text-red-400" />
+        </motion.div>
+
+        {/* Error Message */}
+        <h1 className="text-3xl font-display font-bold text-void-100 mb-4">
+          Generation Failed
+        </h1>
+        
+        <div className="card bg-red-500/10 border-red-500/30 mb-8">
+          <p className="text-red-300 text-sm">
+            {error || 'An unexpected error occurred during video generation.'}
+          </p>
+        </div>
+
+        {/* Actions */}
+        <div className="flex flex-col sm:flex-row items-center justify-center gap-4">
+          <button
+            onClick={() => setStep('configuring')}
+            className="btn-primary flex items-center gap-2"
+          >
+            <RefreshIcon size={20} />
+            Try Again
+          </button>
+          
+          <button
+            onClick={reset}
+            className="btn-secondary flex items-center gap-2"
+          >
+            <ArrowLeftIcon size={20} />
+            Start Over
+          </button>
+        </div>
+
+        {/* Help Text */}
+        <div className="mt-8 p-4 bg-void-900/50 rounded-xl border border-void-700">
+          <h3 className="text-sm font-semibold text-void-300 mb-2">Troubleshooting Tips</h3>
+          <ul className="text-xs text-void-400 space-y-1 text-left">
+            <li>• Check that your API keys are properly configured</li>
+            <li>• Ensure your image is under 10MB and in JPG/PNG format</li>
+            <li>• Try a shorter script if timeouts occur</li>
+            <li>• Check the backend server logs for more details</li>
+          </ul>
+        </div>
+      </div>
+    </motion.div>
+  );
+};
+

frontend/src/components/GenerationComplete.tsx

@@ -0,0 +1,375 @@
+import { useState } from 'react';
+import { motion } from 'framer-motion';
+import { useGeneration } from '@/context/GenerationContext';
+import { CheckIcon, DownloadIcon, PlayIcon, RefreshIcon, VideoIcon } from './Icons';
+import { mergeVideos, ClipMetadata } from '@/utils/api';
+
+export const GenerationComplete: React.FC = () => {
+  const { state, reset } = useGeneration();
+  const { generatedVideos, provider } = state;
+  const [playingIndex, setPlayingIndex] = useState<number | null>(null);
+  const [isMerging, setIsMerging] = useState(false);
+  const [mergeError, setMergeError] = useState<string | null>(null);
+  const [mergedVideoUrl, setMergedVideoUrl] = useState<string | null>(null);
+  const [isPlayingMerged, setIsPlayingMerged] = useState(false);
+
+  const accentColor = provider === 'kling' ? 'coral' : 'electric';
+
+  const handleDownload = async (video: typeof generatedVideos[0], index: number) => {
+    try {
+      const url = video.blobUrl || video.url;
+      const response = await fetch(url);
+      const blob = await response.blob();
+      
+      const downloadUrl = URL.createObjectURL(blob);
+      const a = document.createElement('a');
+      a.href = downloadUrl;
+      a.download = `video-segment-${index + 1}.mp4`;
+      document.body.appendChild(a);
+      a.click();
+      document.body.removeChild(a);
+      URL.revokeObjectURL(downloadUrl);
+    } catch (error) {
+      console.error('Download failed:', error);
+    }
+  };
+
+  const handleDownloadAll = async () => {
+    for (let i = 0; i < generatedVideos.length; i++) {
+      await handleDownload(generatedVideos[i], i);
+      // Small delay between downloads
+      await new Promise(r => setTimeout(r, 500));
+    }
+  };
+
+  // Merge all videos into a single file
+  const handleMergeAndExport = async () => {
+    if (generatedVideos.length === 0) return;
+
+    setIsMerging(true);
+    setMergeError(null);
+
+    try {
+      // Collect all video blobs
+      const videoBlobs: Blob[] = [];
+      const clipMetadata: ClipMetadata[] = [];
+
+      for (let i = 0; i < generatedVideos.length; i++) {
+        const video = generatedVideos[i];
+        const url = video.blobUrl || video.url;
+        
+        // Fetch blob from URL
+        const response = await fetch(url);
+        const blob = await response.blob();
+        videoBlobs.push(blob);
+
+        // Create clip metadata
+        // Use Whisper-detected trim point if available, otherwise use full duration
+        // No start trimming - keep full video from beginning
+        const trimStart = 0; // Always start from beginning (no overlap removal)
+        const trimEnd = video.trimPoint || video.duration; // Use Whisper trim point if available
+        
+        clipMetadata.push({
+          index: i,
+          startTime: trimStart,
+          endTime: trimEnd,
+          type: 'video',
+          duration: trimEnd - trimStart,
+        });
+      }
+
+      console.log('🎬 Merging videos...', clipMetadata);
+
+      // Call merge API
+      const mergedBlob = await mergeVideos(videoBlobs, clipMetadata);
+
+      // Create URL for preview (don't auto-download)
+      const previewUrl = URL.createObjectURL(mergedBlob);
+      setMergedVideoUrl(previewUrl);
+
+      console.log('✅ Merged video ready for preview!');
+
+    } catch (error) {
+      console.error('Merge failed:', error);
+      setMergeError(error instanceof Error ? error.message : 'Failed to merge videos');
+    } finally {
+      setIsMerging(false);
+    }
+  };
+
+  // Download the merged video
+  const handleDownloadMerged = () => {
+    if (!mergedVideoUrl) return;
+    
+    const a = document.createElement('a');
+    a.href = mergedVideoUrl;
+    a.download = `final-video-${Date.now()}.mp4`;
+    document.body.appendChild(a);
+    a.click();
+    document.body.removeChild(a);
+  };
+
+  return (
+    <motion.div
+      initial={{ opacity: 0 }}
+      animate={{ opacity: 1 }}
+      className="min-h-[60vh] flex flex-col items-center justify-center p-8"
+    >
+      <div className="max-w-4xl w-full">
+        {/* Success Header */}
+        <div className="text-center mb-12">
+          <motion.div
+            initial={{ scale: 0 }}
+            animate={{ scale: 1 }}
+            transition={{ type: 'spring', duration: 0.5 }}
+            className={`
+              w-20 h-20 mx-auto rounded-full flex items-center justify-center mb-6
+              ${accentColor === 'coral' ? 'bg-coral-500/20' : 'bg-electric-500/20'}
+            `}
+          >
+            <CheckIcon 
+              size={40} 
+              className={accentColor === 'coral' ? 'text-coral-400' : 'text-electric-400'} 
+            />
+          </motion.div>
+          
+          <motion.h1
+            initial={{ opacity: 0, y: 20 }}
+            animate={{ opacity: 1, y: 0 }}
+            transition={{ delay: 0.2 }}
+            className="text-4xl font-display font-bold mb-4"
+          >
+            <span className={accentColor === 'coral' ? 'gradient-text' : 'gradient-text-electric'}>
+              Generation Complete!
+            </span>
+          </motion.h1>
+          
+          <motion.p
+            initial={{ opacity: 0 }}
+            animate={{ opacity: 1 }}
+            transition={{ delay: 0.3 }}
+            className="text-void-400 text-lg"
+          >
+            {generatedVideos.length} video{generatedVideos.length !== 1 ? 's' : ''} generated successfully
+          </motion.p>
+        </div>
+
+        {/* Video Grid */}
+        <motion.div
+          initial={{ opacity: 0, y: 20 }}
+          animate={{ opacity: 1, y: 0 }}
+          transition={{ delay: 0.4 }}
+          className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6 mb-8"
+        >
+          {generatedVideos.map((video, index) => (
+            <div
+              key={video.id}
+              className="card group relative overflow-hidden"
+            >
+              {/* Video Preview */}
+              <div className="relative aspect-[9/16] bg-void-950 rounded-lg overflow-hidden mb-4">
+                <video
+                  src={video.blobUrl || video.url}
+                  className="w-full h-full object-cover"
+                  controls={playingIndex === index}
+                  poster={video.thumbnails[0]}
+                  onEnded={() => setPlayingIndex(null)}
+                />
+                
+                {playingIndex !== index && (
+                  <button
+                    onClick={() => setPlayingIndex(index)}
+                    className="absolute inset-0 flex items-center justify-center bg-black/40 group-hover:bg-black/50 transition-colors"
+                  >
+                    <div className={`
+                      w-14 h-14 rounded-full flex items-center justify-center
+                      ${accentColor === 'coral' ? 'bg-coral-500' : 'bg-electric-500'}
+                      group-hover:scale-110 transition-transform
+                    `}>
+                      <PlayIcon size={24} className="text-white ml-1" />
+                    </div>
+                  </button>
+                )}
+              </div>
+
+              {/* Video Info */}
+              <div className="flex items-center justify-between">
+                <div>
+                  <h3 className="font-semibold text-void-200">
+                    Segment {index + 1}
+                  </h3>
+                  <p className="text-xs text-void-400">
+                    ~{Math.round(video.duration)}s duration
+                  </p>
+                </div>
+                <button
+                  onClick={() => handleDownload(video, index)}
+                  className={`
+                    p-2 rounded-lg transition-colors
+                    ${accentColor === 'coral' 
+                      ? 'hover:bg-coral-500/20 text-coral-400' 
+                      : 'hover:bg-electric-500/20 text-electric-400'
+                    }
+                  `}
+                >
+                  <DownloadIcon size={20} />
+                </button>
+              </div>
+            </div>
+          ))}
+        </motion.div>
+
+        {/* Merged Video Preview */}
+        {mergedVideoUrl && (
+          <motion.div
+            initial={{ opacity: 0, y: 20 }}
+            animate={{ opacity: 1, y: 0 }}
+            className="mb-8"
+          >
+            <div className={`card border-2 ${accentColor === 'coral' ? 'border-coral-500/50 bg-coral-500/5' : 'border-electric-500/50 bg-electric-500/5'}`}>
+              <div className="flex items-center gap-3 mb-4">
+                <div className={`p-2 rounded-lg ${accentColor === 'coral' ? 'bg-coral-500/20' : 'bg-electric-500/20'}`}>
+                  <VideoIcon size={24} className={accentColor === 'coral' ? 'text-coral-400' : 'text-electric-400'} />
+                </div>
+                <div>
+                  <h3 className="font-bold text-lg text-void-100">Final Exported Video</h3>
+                  <p className="text-sm text-void-400">All segments merged into one video</p>
+                </div>
+              </div>
+              
+              {/* Video Player */}
+              <div className="relative aspect-[9/16] max-w-md mx-auto bg-void-950 rounded-xl overflow-hidden mb-4">
+                <video
+                  src={mergedVideoUrl}
+                  className="w-full h-full object-contain"
+                  controls={isPlayingMerged}
+                  onEnded={() => setIsPlayingMerged(false)}
+                />
+                
+                {!isPlayingMerged && (
+                  <button
+                    onClick={() => setIsPlayingMerged(true)}
+                    className="absolute inset-0 flex items-center justify-center bg-black/40 hover:bg-black/50 transition-colors"
+                  >
+                    <div className={`
+                      w-16 h-16 rounded-full flex items-center justify-center
+                      ${accentColor === 'coral' ? 'bg-coral-500' : 'bg-electric-500'}
+                      hover:scale-110 transition-transform shadow-lg
+                    `}>
+                      <PlayIcon size={28} className="text-white ml-1" />
+                    </div>
+                  </button>
+                )}
+              </div>
+              
+              {/* Download Button */}
+              <button
+                onClick={handleDownloadMerged}
+                className={`
+                  w-full flex items-center justify-center gap-2 py-3 font-semibold rounded-xl
+                  ${accentColor === 'coral' ? 'btn-primary' : 'btn-electric'}
+                `}
+              >
+                <DownloadIcon size={20} />
+                Download Final Video
+              </button>
+            </div>
+          </motion.div>
+        )}
+
+        {/* Merge Error */}
+        {mergeError && (
+          <motion.div
+            initial={{ opacity: 0 }}
+            animate={{ opacity: 1 }}
+            className="mb-6 p-4 bg-red-500/10 border border-red-500/30 rounded-xl text-center"
+          >
+            <p className="text-red-300 text-sm">{mergeError}</p>
+          </motion.div>
+        )}
+
+        {/* Actions */}
+        <motion.div
+          initial={{ opacity: 0 }}
+          animate={{ opacity: 1 }}
+          transition={{ delay: 0.6 }}
+          className="flex flex-col sm:flex-row items-center justify-center gap-4"
+        >
+          {/* Primary: Merge & Export */}
+          {!mergedVideoUrl && (
+            <button
+              onClick={handleMergeAndExport}
+              disabled={isMerging || generatedVideos.length < 2}
+              className={`
+                flex items-center gap-2 px-6 py-3 font-semibold rounded-xl
+                ${accentColor === 'coral' ? 'btn-primary' : 'btn-electric'}
+                disabled:opacity-50 disabled:cursor-not-allowed
+              `}
+            >
+              {isMerging ? (
+                <>
+                  <div className="w-5 h-5 border-2 border-white/30 border-t-white rounded-full animate-spin" />
+                  <span>Merging...</span>
+                </>
+              ) : (
+                <>
+                  <VideoIcon size={20} />
+                  <span>Export Final Video</span>
+                </>
+              )}
+            </button>
+          )}
+          
+          {/* Re-merge option if already merged */}
+          {mergedVideoUrl && (
+            <button
+              onClick={() => {
+                URL.revokeObjectURL(mergedVideoUrl);
+                setMergedVideoUrl(null);
+                handleMergeAndExport();
+              }}
+              disabled={isMerging}
+              className="btn-secondary flex items-center gap-2"
+            >
+              <RefreshIcon size={20} />
+              Re-merge Video
+            </button>
+          )}
+
+          {/* Secondary: Download All */}
+          <button
+            onClick={handleDownloadAll}
+            className="btn-secondary flex items-center gap-2"
+          >
+            <DownloadIcon size={20} />
+            Download Segments
+          </button>
+          
+          {/* Tertiary: Generate More */}
+          <button
+            onClick={reset}
+            className="btn-secondary flex items-center gap-2"
+          >
+            <RefreshIcon size={20} />
+            Generate More
+          </button>
+        </motion.div>
+
+        {/* Tip */}
+        <motion.p
+          initial={{ opacity: 0 }}
+          animate={{ opacity: 1 }}
+          transition={{ delay: 0.8 }}
+          className="text-center text-void-500 text-sm mt-8"
+        >
+          {mergedVideoUrl 
+            ? 'Your final video is ready! Download it or re-merge with different settings.'
+            : generatedVideos.length >= 2 
+              ? '"Export Final Video" will merge all segments into a single video file with Whisper-optimized trim points.'
+              : 'Videos are ready to use in your video editor or social media.'
+          }
+        </motion.p>
+      </div>
+    </motion.div>
+  );
+};

frontend/src/components/GenerationForm.tsx

@@ -0,0 +1,1362 @@
+import React, { useState, useCallback, useEffect, useRef } from 'react';
+import { motion } from 'framer-motion';
+import { useGeneration } from '@/context/GenerationContext';
+import type { GenerationInputs, VideoProvider, GeneratedVideo, VeoSegment } from '@/types';
+import { 
+  SparklesIcon, 
+  ArrowLeftIcon,
+  ImageIcon 
+} from './Icons';
+import { 
+  generatePrompts, 
+  uploadImage, 
+  klingGenerate, 
+  klingExtend,
+  waitForKlingVideo, 
+  generateVideoWithRetry,
+  downloadVideo, 
+  getVideoDuration,
+  generateThumbnails,
+  replicateGenerate,
+  waitForReplicateVideo,
+  whisperAnalyzeAndExtract
+} from '@/utils/api';
+
+interface GenerationFormProps {
+  provider: VideoProvider;
+  onBack: () => void;
+}
+
+const voiceTypes = ['Deep', 'Warm', 'Crisp', 'None'];
+const energyLevels = ['Low', 'Medium', 'High'];
+const cameraStyles = ['Standard', 'Handheld', 'Steadicam', 'FPV Drone'];
+const narrativeStyles = ['Standard', 'Documentary', 'Action', 'Introspective'];
+const aspectRatios = ['9:16', '16:9', '1:1'];
+
+// Generation modes
+type GenerationMode = 'extend' | 'frame-continuity';
+
+export const GenerationForm: React.FC<GenerationFormProps> = ({ provider, onBack }) => {
+  const { startGeneration, updateProgress, addVideo, setStep, setError, setRetryState, updateSegments, state } = useGeneration();
+  const { retryState, generatedVideos, segments } = state;
+  
+  // Draft storage key
+  const draftKey = `video-gen-draft-${provider}`;
+  
+  // Load draft on mount - initialize state from localStorage
+  const loadDraft = useCallback(() => {
+    try {
+      const savedDraft = localStorage.getItem(draftKey);
+      if (savedDraft) {
+        const draft = JSON.parse(savedDraft);
+        return draft;
+      }
+    } catch (error) {
+      console.warn('Failed to load draft:', error);
+    }
+    return null;
+  }, [draftKey]);
+  
+  const draft = loadDraft();
+  const [draftRestored, setDraftRestored] = useState(!!draft);
+  
+  const [formState, setFormState] = useState<GenerationInputs>(
+    draft?.formState || {
+      script: '',
+      style: '',
+      voiceType: 'Deep',
+      energyLevel: 'Medium',
+      cameraStyle: 'Standard',
+      narrativeStyle: 'Standard',
+      seedValue: 12005,
+      aspectRatio: '9:16',
+      model: provider === 'kling' ? 'veo3_fast' : 'google/veo-3',
+    }
+  );
+  
+  const [imageFile, setImageFile] = useState<File | null>(null);
+  const [imagePreview, setImagePreview] = useState<string | null>(draft?.imagePreview || null);
+  const [isDragging, setIsDragging] = useState(false);
+  const [isGenerating, setIsGenerating] = useState(false);
+  
+  // Generation mode selection
+  const [generationMode, setGenerationMode] = useState<GenerationMode>(draft?.generationMode || 'frame-continuity');
+  
+  // Retry editing state
+  const [retryDialogue, setRetryDialogue] = useState('');
+  const [retryEnvironment, setRetryEnvironment] = useState('');
+  const [retryAction, setRetryAction] = useState('');
+  
+  // Initialize retry fields when error occurs
+  useEffect(() => {
+    if (retryState && segments[retryState.failedSegmentIndex]) {
+      const seg = segments[retryState.failedSegmentIndex];
+      setRetryDialogue(seg.action_timeline?.dialogue || '');
+      setRetryEnvironment(seg.scene_continuity?.environment || '');
+      setRetryAction(seg.character_description?.current_state || '');
+    }
+  }, [retryState, segments]);
+  
+  const handleRetrySubmit = () => {
+    if (!retryState) return;
+    
+    const idx = retryState.failedSegmentIndex;
+    const updatedSegments = [...segments];
+    
+    // Update the segment with edited values
+    if (updatedSegments[idx]) {
+      updatedSegments[idx] = {
+        ...updatedSegments[idx],
+        action_timeline: {
+          ...updatedSegments[idx].action_timeline,
+          dialogue: retryDialogue
+        },
+        scene_continuity: {
+          ...updatedSegments[idx].scene_continuity,
+          environment: retryEnvironment
+        },
+        character_description: {
+          ...updatedSegments[idx].character_description,
+          current_state: retryAction
+        }
+      };
+      
+      updateSegments(updatedSegments);
+    }
+    
+    // Clear error and resume
+    setRetryState(null);
+    setStep('generating_video');
+    setIsGenerating(true);
+    
+    // Resume generation based on provider
+    if (provider === 'kling') {
+        if (generationMode === 'frame-continuity') {
+            handleKlingFrameContinuityFlow();
+        } else {
+            handleKlingExtendFlow();
+        }
+    } else {
+        handleReplicateGeneration();
+    }
+  };
+
+  const handleCancelRetry = () => {
+    setRetryState(null);
+    setIsGenerating(false);
+  };
+
+  // Show notification if draft was restored
+  useEffect(() => {
+    if (draftRestored) {
+      console.log('📝 Draft restored from localStorage');
+      // Auto-hide notification after 5 seconds
+      const timer = setTimeout(() => setDraftRestored(false), 5000);
+      return () => clearTimeout(timer);
+    }
+  }, [draftRestored]);
+  
+  // Save draft whenever formState, imagePreview, or generationMode changes
+  // Skip saving on initial mount to avoid overwriting with default values
+  const isInitialMount = useRef(true);
+  useEffect(() => {
+    if (isInitialMount.current) {
+      isInitialMount.current = false;
+      return;
+    }
+    
+    try {
+      const draft = {
+        formState,
+        imagePreview,
+        generationMode,
+        savedAt: new Date().toISOString(),
+      };
+      localStorage.setItem(draftKey, JSON.stringify(draft));
+    } catch (error) {
+      console.warn('Failed to save draft:', error);
+    }
+  }, [formState, imagePreview, generationMode, draftKey]);
+  
+  // Clear draft function
+  const clearDraft = useCallback(() => {
+    try {
+      localStorage.removeItem(draftKey);
+      setDraftRestored(false);
+      console.log('🗑️ Draft cleared');
+    } catch (error) {
+      console.warn('Failed to clear draft:', error);
+    }
+  }, [draftKey]);
+
+  // Calculate estimated segments
+  const wordCount = formState.script.trim().split(/\s+/).filter(w => w).length;
+  const estimatedSegments = wordCount > 0 ? Math.max(1, Math.min(Math.ceil(wordCount / 17), 10)) : 0;
+
+  // Handle input changes
+  const handleChange = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement>) => {
+    const { name, value } = e.target;
+    setFormState(prev => ({ ...prev, [name]: value }));
+  };
+
+  // Handle image upload
+  const handleImageUpload = useCallback((file: File) => {
+    if (file.type.startsWith('image/')) {
+      setImageFile(file);
+      const reader = new FileReader();
+      reader.onloadend = () => setImagePreview(reader.result as string);
+      reader.readAsDataURL(file);
+    }
+  }, []);
+
+  // Drag and drop handlers
+  const handleDragOver = (e: React.DragEvent) => {
+    e.preventDefault();
+    setIsDragging(true);
+  };
+
+  const handleDragLeave = () => setIsDragging(false);
+
+  const handleDrop = (e: React.DragEvent) => {
+    e.preventDefault();
+    setIsDragging(false);
+    const file = e.dataTransfer.files[0];
+    if (file) handleImageUpload(file);
+  };
+
+  // Extract last frame from video blob
+  const extractLastFrame = async (videoBlob: Blob): Promise<File> => {
+    return new Promise((resolve, reject) => {
+      const video = document.createElement('video');
+      video.preload = 'metadata';
+      video.muted = true;
+      video.src = URL.createObjectURL(videoBlob);
+
+      video.onloadedmetadata = async () => {
+        // Seek to near the end of the video
+        const targetTime = Math.max(0, video.duration - 0.1);
+        video.currentTime = targetTime;
+      };
+
+      video.onseeked = () => {
+        // Create canvas and draw current frame
+        const canvas = document.createElement('canvas');
+        canvas.width = video.videoWidth;
+        canvas.height = video.videoHeight;
+        const ctx = canvas.getContext('2d');
+        
+        if (!ctx) {
+          URL.revokeObjectURL(video.src);
+          reject(new Error('Could not get canvas context'));
+          return;
+        }
+
+        ctx.drawImage(video, 0, 0);
+        
+        // Convert to blob then to file
+        canvas.toBlob((blob) => {
+          URL.revokeObjectURL(video.src);
+          
+          if (!blob) {
+            reject(new Error('Could not extract frame'));
+            return;
+          }
+
+          const file = new File([blob], `frame-${Date.now()}.jpg`, { type: 'image/jpeg' });
+          resolve(file);
+        }, 'image/jpeg', 0.95);
+      };
+
+      video.onerror = () => {
+        URL.revokeObjectURL(video.src);
+        reject(new Error('Failed to load video for frame extraction'));
+      };
+    });
+  };
+
+  // ============================================
+  // KIE GENERATION - FRAME CONTINUITY FLOW
+  // ============================================
+  // This mirrors the Replicate flow from standalone_video_creator.py:
+  // 1. Generate first video with original reference image
+  // 2. Extract last frame using the whisper analysis from generated video
+  // 3. Use that frame as reference for next segment
+  // 4. Repeat for all segments
+  
+  const handleKlingFrameContinuityFlow = async () => {
+    if (!imageFile || !formState.script.trim()) return;
+
+    setIsGenerating(true);
+    setError(null);
+
+    try {
+      // Step 1: Generate prompts using GPT-4o
+      updateProgress('Analyzing script with GPT-4o...');
+      
+      const formData = new FormData();
+      formData.append('script', formState.script);
+      formData.append('style', formState.style || 'clean, lifestyle UGC');
+      formData.append('jsonFormat', 'standard');
+      formData.append('continuationMode', 'true');
+      formData.append('voiceType', formState.voiceType || '');
+      formData.append('energyLevel', formState.energyLevel || '');
+      formData.append('settingMode', 'single');
+      formData.append('cameraStyle', formState.cameraStyle || '');
+      formData.append('narrativeStyle', formState.narrativeStyle || '');
+      formData.append('image', imageFile);
+
+      const payload = await generatePrompts(formData);
+
+      if (!payload?.segments?.length) {
+        throw new Error('No segments generated from script');
+      }
+
+      const segments = payload.segments;
+      updateProgress(`Generated ${segments.length} segments. Starting video generation...`);
+      startGeneration(segments);
+
+      // Track current reference image (starts with original)
+      let currentImageFile = imageFile;
+      const generatedVideos: GeneratedVideo[] = [];
+
+      // Step 2: Generate videos segment by segment with frame continuity
+      for (let i = 0; i < segments.length; i++) {
+        const segment = segments[i];
+        const isLastSegment = i === segments.length - 1;
+        
+        updateProgress(
+          `Generating video ${i + 1} of ${segments.length}...${i > 0 ? ' (using last frame from previous)' : ''}`, 
+          i, 
+          segments.length
+        );
+
+        // Upload current reference image
+        updateProgress(`Uploading reference image for segment ${i + 1}...`);
+        const uploadResult = await uploadImage(currentImageFile);
+        const hostedImageUrl = uploadResult.url;
+
+        console.log(`🖼️ Segment ${i + 1} using image: ${i === 0 ? 'original' : 'last frame from previous'}`);
+
+        // Generate video with current reference image
+        updateProgress(`Submitting segment ${i + 1} to KIE Veo 3.1...`);
+        const generateResult = await klingGenerate({
+          prompt: segment,
+          imageUrls: [hostedImageUrl],
+          model: 'veo3_fast',
+          aspectRatio: formState.aspectRatio,
+          generationType: 'FIRST_AND_LAST_FRAMES_2_VIDEO',
+          seeds: formState.seedValue,
+          voiceType: formState.voiceType,
+        });
+
+        // Wait for completion
+        updateProgress(`Processing video ${i + 1}... (this may take 1-2 minutes)`);
+        const videoUrl = await waitForKlingVideo(generateResult.taskId);
+
+        // Download video
+        updateProgress(`Downloading video ${i + 1}...`);
+        const videoBlob = await downloadVideo(videoUrl);
+        const blobUrl = URL.createObjectURL(videoBlob);
+
+        // Get video duration
+        const videoFile = new File([videoBlob], `segment-${i + 1}.mp4`, { type: 'video/mp4' });
+        const duration = await getVideoDuration(videoFile);
+        const thumbnails = await generateThumbnails(videoFile);
+
+        // Use Whisper to find optimal trim point, extract frame, and get transcription
+        let trimPoint = duration; // Default to full duration
+        let transcribedText = ''; // What Whisper actually heard
+        
+        if (!isLastSegment) {
+          updateProgress(`Analyzing video ${i + 1} with Whisper for optimal continuity...`);
+          try {
+            // Get dialogue from segment for Whisper analysis
+            const dialogue = segment.action_timeline?.dialogue || '';
+            
+            const whisperResult = await whisperAnalyzeAndExtract({
+              video_url: videoUrl,
+              dialogue: dialogue,
+              buffer_time: 0.3,
+              model_size: 'base'
+            });
+            
+            if (whisperResult.success && whisperResult.frame_base64) {
+              // Convert base64 frame to File for next segment
+              const base64Data = whisperResult.frame_base64.split(',')[1] || whisperResult.frame_base64;
+              const byteCharacters = atob(base64Data);
+              const byteNumbers = new Array(byteCharacters.length);
+              for (let j = 0; j < byteCharacters.length; j++) {
+                byteNumbers[j] = byteCharacters.charCodeAt(j);
+              }
+              const byteArray = new Uint8Array(byteNumbers);
+              const frameBlob = new Blob([byteArray], { type: 'image/jpeg' });
+              currentImageFile = new File([frameBlob], `whisper-frame-${i + 1}.jpg`, { type: 'image/jpeg' });
+              
+              // Store trim point for later merge
+              if (whisperResult.trim_point) {
+                trimPoint = whisperResult.trim_point;
+              }
+              
+              // Store transcribed text for prompt refinement
+              if (whisperResult.transcribed_text) {
+                transcribedText = whisperResult.transcribed_text;
+                console.log(`📝 Whisper transcription: "${transcribedText.substring(0, 100)}..."`);
+              }
+              
+              console.log(`✅ Whisper: Last word at ${whisperResult.last_word_timestamp?.toFixed(2)}s, frame at ${whisperResult.frame_timestamp?.toFixed(2)}s, trim at ${trimPoint.toFixed(2)}s`);
+              
+              // REFINE NEXT SEGMENT PROMPT with frame + transcription
+              const nextSegment = segments[i + 1];
+              if (nextSegment && currentImageFile) {
+                updateProgress(`Refining segment ${i + 2} prompt with visual and audio context...`);
+                try {
+                  const { refinePromptWithContext } = await import('@/utils/api');
+                  const refined = await refinePromptWithContext(
+                    nextSegment,
+                    currentImageFile,
+                    transcribedText,
+                    dialogue
+                  );
+                  // Update the next segment with refined prompt
+                  segments[i + 1] = refined.refined_prompt as typeof nextSegment;
+                  console.log(`✅ Refined segment ${i + 2} prompt for consistency`);
+                } catch (refineError) {
+                  console.warn(`⚠️ Prompt refinement failed, using original:`, refineError);
+                }
+              }
+            } else {
+              // Fallback to simple last frame extraction
+              console.log(`⚠️ Whisper failed (${whisperResult.error}), falling back to last frame extraction`);
+              const lastFrameFile = await extractLastFrame(videoBlob);
+              currentImageFile = lastFrameFile;
+            }
+          } catch (frameError) {
+            console.error(`⚠️ Whisper analysis failed, using fallback:`, frameError);
+            try {
+              const lastFrameFile = await extractLastFrame(videoBlob);
+              currentImageFile = lastFrameFile;
+            } catch {
+              // Continue with current image if all extraction fails
+            }
+          }
+        }
+
+        // Add to generated videos with trim metadata
+        const generatedVideo: GeneratedVideo = {
+          id: `video-${Date.now()}-${i}`,
+          url: videoUrl,
+          blobUrl,
+          segment,
+          duration,
+          thumbnails,
+          trimPoint, // Store trim point for merge
+        };
+        generatedVideos.push(generatedVideo);
+        addVideo(generatedVideo);
+
+        updateProgress(`Completed video ${i + 1} of ${segments.length}`, i + 1, segments.length);
+      }
+
+      // All done!
+      clearDraft(); // Clear draft on successful generation
+      clearDraft(); // Clear draft on successful generation
+      setStep('completed');
+      updateProgress('All videos generated successfully!');
+
+    } catch (err) {
+      console.error('Generation error:', err);
+      const errorMessage = err instanceof Error ? err.message : 'Generation failed';
+      
+      // Enable retry mode
+      setRetryState({
+        failedSegmentIndex: generatedVideos.length, // Current segment that failed
+        error: errorMessage
+      });
+      setStep('configuring'); // Go back to form, but with retry overlay
+      
+    } finally {
+      setIsGenerating(false);
+    }
+  };
+
+  // ============================================
+  // KIE GENERATION - EXTEND API FLOW
+  // ============================================
+  // Original flow using KIE's extend API
+  
+  const handleKlingExtendFlow = async () => {
+    if (!imageFile || !formState.script.trim()) return;
+
+    setIsGenerating(true);
+    setError(null);
+
+    try {
+      // Step 1: Generate prompts using GPT-4o
+      updateProgress('Analyzing script with GPT-4o...');
+      
+      const formData = new FormData();
+      formData.append('script', formState.script);
+      formData.append('style', formState.style || 'clean, lifestyle UGC');
+      formData.append('jsonFormat', 'standard');
+      formData.append('continuationMode', 'true');
+      formData.append('voiceType', formState.voiceType || '');
+      formData.append('energyLevel', formState.energyLevel || '');
+      formData.append('settingMode', 'single');
+      formData.append('cameraStyle', formState.cameraStyle || '');
+      formData.append('narrativeStyle', formState.narrativeStyle || '');
+      formData.append('image', imageFile);
+
+      // Use existing segments if retrying, otherwise generate new ones
+      let payload: { segments: VeoSegment[] };
+      if (retryState && segments.length > 0) {
+        // Retry mode: use existing segments (they may have been edited)
+        payload = { segments };
+        updateProgress(`Using existing ${segments.length} segments for retry...`);
+      } else {
+        // Normal mode: generate new segments
+        payload = await generatePrompts(formData);
+        if (!payload?.segments?.length) {
+          throw new Error('No segments generated from script');
+        }
+        updateProgress(`Generated ${payload.segments.length} segments. Starting video generation...`);
+        startGeneration(payload.segments);
+      }
+
+      // Step 2: Upload reference image once
+      updateProgress('Uploading reference image...');
+      const uploadResult = await uploadImage(imageFile);
+      const hostedImageUrl = uploadResult.url;
+
+      // Step 3: Generate videos (resume from where we left off if retrying)
+      const startIndex = generatedVideos.length;
+      let currentTaskId: string | null = null;
+      let currentImageUrl = hostedImageUrl; // Start with original image
+
+      // If resuming, extract last frame from previous video for continuity
+      if (startIndex > 0 && generatedVideos[startIndex - 1]?.blobUrl) {
+        updateProgress(`Extracting last frame from segment ${startIndex} for continuity...`);
+        try {
+          const lastVideoBlob = await fetch(generatedVideos[startIndex - 1].blobUrl!).then(r => r.blob());
+          const lastFrameFile = await extractLastFrame(lastVideoBlob);
+          const frameUploadResult = await uploadImage(lastFrameFile);
+          currentImageUrl = frameUploadResult.url;
+          updateProgress(`Using frame from segment ${startIndex} for segment ${startIndex + 1}...`);
+        } catch (frameError) {
+          console.warn('Failed to extract frame, using original image:', frameError);
+          // Continue with original image
+        }
+      }
+
+      for (let i = startIndex; i < payload.segments.length; i++) {
+        const segment = payload.segments[i];
+        
+        updateProgress(`Generating video ${i + 1} of ${payload.segments.length}...`, i, payload.segments.length);
+
+        // Generate video with automatic retry (retries once on failure)
+        updateProgress(`Processing video ${i + 1}... (this may take 1-2 minutes)`);
+        const videoUrl = await generateVideoWithRetry(async () => {
+        if (i === 0 || (i === startIndex && startIndex > 0)) {
+          // First segment OR resuming after failure: use generate API with current image
+          const generateResult = await klingGenerate({
+            prompt: segment,
+            imageUrls: [currentImageUrl],
+            model: 'veo3_fast',
+            aspectRatio: formState.aspectRatio,
+            generationType: 'FIRST_AND_LAST_FRAMES_2_VIDEO',
+            seeds: formState.seedValue,
+            voiceType: formState.voiceType,
+          });
+          currentTaskId = generateResult.taskId;
+            return generateResult;
+        } else {
+          // Subsequent segments: use extend API
+            const extendResult = await klingExtend(
+              currentTaskId!,
+              segment,
+              formState.seedValue,
+              formState.voiceType
+            );
+          currentTaskId = extendResult.taskId;
+            return extendResult;
+          }
+        }, 300000, (attempt) => {
+          updateProgress(`Retrying video ${i + 1}... (attempt ${attempt}/2)`);
+        });
+
+        // Download and save
+        updateProgress(`Downloading video ${i + 1}...`);
+        const videoBlob = await downloadVideo(videoUrl);
+        const blobUrl = URL.createObjectURL(videoBlob);
+
+        const videoFile = new File([videoBlob], `segment-${i + 1}.mp4`, { type: 'video/mp4' });
+        const duration = await getVideoDuration(videoFile);
+        const thumbnails = await generateThumbnails(videoFile);
+
+        addVideo({
+          id: `video-${Date.now()}-${i}`,
+          url: videoUrl,
+          blobUrl,
+          segment,
+          duration,
+          thumbnails,
+        });
+
+        updateProgress(`Completed video ${i + 1} of ${payload.segments.length}`, i + 1, payload.segments.length);
+      }
+
+      clearDraft(); // Clear draft on successful generation
+      setStep('completed');
+      updateProgress('All videos generated successfully!');
+
+    } catch (err) {
+      console.error('Generation error:', err);
+      const errorMessage = err instanceof Error ? err.message : 'Generation failed';
+      
+      // Enable retry mode
+      setRetryState({
+        failedSegmentIndex: generatedVideos.length, // Current segment that failed
+        error: errorMessage
+      });
+      setStep('configuring'); // Go back to form, but with retry overlay
+      
+    } finally {
+      setIsGenerating(false);
+    }
+  };
+
+  // ============================================
+  // REPLICATE GENERATION - FRAME CONTINUITY FLOW
+  // ============================================
+  // This mirrors the approach from standalone_video_creator.py:
+  // 1. Generate prompts using GPT-4o
+  // 2. For each segment, generate video with current reference image
+  // 3. Extract last frame from generated video
+  // 4. Use that frame as reference for next segment
+  // 5. Result: Perfect visual continuity across all segments
+  
+  const handleReplicateGeneration = async () => {
+    if (!formState.script.trim()) return;
+
+    setIsGenerating(true);
+    setError(null);
+
+    try {
+      // Step 1: Generate prompts using GPT-4o
+      // Note: Replicate can work without an image, but for consistency we encourage one
+      updateProgress('Analyzing script with GPT-4o...');
+      
+      const formData = new FormData();
+      formData.append('script', formState.script);
+      formData.append('style', formState.style || 'clean, lifestyle UGC');
+      formData.append('jsonFormat', 'standard');
+      formData.append('continuationMode', 'true');
+      formData.append('voiceType', formState.voiceType || '');
+      formData.append('energyLevel', formState.energyLevel || '');
+      formData.append('settingMode', 'single');
+      formData.append('cameraStyle', formState.cameraStyle || '');
+      formData.append('narrativeStyle', formState.narrativeStyle || '');
+      
+      // If image provided, include it for GPT-4o analysis
+      if (imageFile) {
+        formData.append('image', imageFile);
+      } else {
+        // Create a placeholder image for GPT-4o (it needs one for analysis)
+        // In production, you might want to handle this differently
+        const placeholderBlob = new Blob(['placeholder'], { type: 'image/jpeg' });
+        formData.append('image', placeholderBlob, 'placeholder.jpg');
+      }
+
+      const payload = await generatePrompts(formData);
+
+      if (!payload?.segments?.length) {
+        throw new Error('No segments generated from script');
+      }
+
+      const segments = payload.segments;
+      updateProgress(`Generated ${segments.length} segments. Starting Replicate generation...`);
+      startGeneration(segments);
+
+      // Track current reference image (starts with original if provided)
+      let currentImageFile = imageFile;
+      const generatedVideos: GeneratedVideo[] = [];
+
+      // Step 2: Generate videos segment by segment with frame continuity
+      for (let i = 0; i < segments.length; i++) {
+        const segment = segments[i];
+        const isLastSegment = i === segments.length - 1;
+        
+        updateProgress(
+          `Generating video ${i + 1} of ${segments.length} with Replicate...${i > 0 ? ' (using last frame)' : ''}`, 
+          i, 
+          segments.length
+        );
+
+        // Convert structured segment to text prompt for Replicate
+        // Replicate models typically expect text prompts
+        const textPrompt = convertSegmentToTextPrompt(segment);
+        
+        console.log(`🎬 Segment ${i + 1} prompt:`, textPrompt.substring(0, 100) + '...');
+
+        // Upload current reference image if available
+        let imageUrl: string | undefined;
+        if (currentImageFile) {
+          updateProgress(`Uploading reference image for segment ${i + 1}...`);
+          const uploadResult = await uploadImage(currentImageFile);
+          imageUrl = uploadResult.url;
+          console.log(`🖼️ Segment ${i + 1} using image: ${i === 0 ? 'original' : 'last frame from previous'}`);
+        }
+
+        // Generate video with Replicate
+        updateProgress(`Submitting segment ${i + 1} to Replicate...`);
+        const generateResult = await replicateGenerate({
+          prompt: textPrompt,
+          imageUrl: imageUrl,
+          model: formState.model || 'google/veo-3',
+          aspectRatio: formState.aspectRatio,
+        });
+
+        // Wait for completion (polling)
+        updateProgress(`Processing video ${i + 1}... (this may take 2-5 minutes)`);
+        const videoUrl = await waitForReplicateVideo(generateResult.id);
+
+        // Download video
+        updateProgress(`Downloading video ${i + 1}...`);
+        const videoBlob = await downloadVideo(videoUrl);
+        const blobUrl = URL.createObjectURL(videoBlob);
+
+        // Get video duration and thumbnails
+        const videoFile = new File([videoBlob], `segment-${i + 1}.mp4`, { type: 'video/mp4' });
+        const duration = await getVideoDuration(videoFile);
+        const thumbnails = await generateThumbnails(videoFile);
+
+        // Use Whisper to find optimal trim point, extract frame, and get transcription
+        // This is more accurate than extracting the very last frame
+        let trimPoint = duration; // Default to full duration
+        let transcribedText = ''; // What Whisper actually heard
+        
+        if (!isLastSegment) {
+          updateProgress(`Analyzing video ${i + 1} with Whisper for optimal continuity...`);
+          try {
+            // Get dialogue from segment for Whisper analysis
+            const dialogue = segment.action_timeline?.dialogue || textPrompt;
+            
+            const whisperResult = await whisperAnalyzeAndExtract({
+              video_url: videoUrl,
+              dialogue: dialogue,
+              buffer_time: 0.3,
+              model_size: 'base'
+            });
+            
+            if (whisperResult.success && whisperResult.frame_base64) {
+              // Convert base64 frame to File for next segment
+              const base64Data = whisperResult.frame_base64.split(',')[1] || whisperResult.frame_base64;
+              const byteCharacters = atob(base64Data);
+              const byteNumbers = new Array(byteCharacters.length);
+              for (let j = 0; j < byteCharacters.length; j++) {
+                byteNumbers[j] = byteCharacters.charCodeAt(j);
+              }
+              const byteArray = new Uint8Array(byteNumbers);
+              const frameBlob = new Blob([byteArray], { type: 'image/jpeg' });
+              currentImageFile = new File([frameBlob], `whisper-frame-${i + 1}.jpg`, { type: 'image/jpeg' });
+              
+              // Store trim point for later merge
+              if (whisperResult.trim_point) {
+                trimPoint = whisperResult.trim_point;
+              }
+              
+              // Store transcribed text for prompt refinement
+              if (whisperResult.transcribed_text) {
+                transcribedText = whisperResult.transcribed_text;
+                console.log(`📝 Whisper transcription: "${transcribedText.substring(0, 100)}..."`);
+              }
+              
+              console.log(`✅ Whisper: Last word at ${whisperResult.last_word_timestamp?.toFixed(2)}s, frame at ${whisperResult.frame_timestamp?.toFixed(2)}s, trim at ${trimPoint.toFixed(2)}s`);
+              
+              // REFINE NEXT SEGMENT PROMPT with frame + transcription
+              const nextSegment = segments[i + 1];
+              if (nextSegment && currentImageFile) {
+                updateProgress(`Refining segment ${i + 2} prompt with visual and audio context...`);
+                try {
+                  const { refinePromptWithContext } = await import('@/utils/api');
+                  const refined = await refinePromptWithContext(
+                    nextSegment,
+                    currentImageFile,
+                    transcribedText,
+                    dialogue
+                  );
+                  // Update the next segment with refined prompt
+                  segments[i + 1] = refined.refined_prompt as typeof nextSegment;
+                  console.log(`✅ Refined segment ${i + 2} prompt for consistency`);
+                } catch (refineError) {
+                  console.warn(`⚠️ Prompt refinement failed, using original:`, refineError);
+                }
+              }
+            } else {
+              // Fallback to simple last frame extraction
+              console.log(`⚠️ Whisper failed (${whisperResult.error}), falling back to last frame extraction`);
+              const lastFrameFile = await extractLastFrame(videoBlob);
+              currentImageFile = lastFrameFile;
+            }
+          } catch (frameError) {
+            console.error(`⚠️ Whisper analysis failed, using fallback:`, frameError);
+            try {
+              const lastFrameFile = await extractLastFrame(videoBlob);
+              currentImageFile = lastFrameFile;
+            } catch {
+              // Continue with current image if all extraction fails
+            }
+          }
+        }
+
+        // Add to generated videos with trim metadata
+        const generatedVideo: GeneratedVideo = {
+          id: `video-${Date.now()}-${i}`,
+          url: videoUrl,
+          blobUrl,
+          segment,
+          duration,
+          thumbnails,
+          trimPoint, // Store trim point for merge
+        };
+        generatedVideos.push(generatedVideo);
+        addVideo(generatedVideo);
+
+        updateProgress(`Completed video ${i + 1} of ${segments.length}`, i + 1, segments.length);
+      }
+
+      // All done!
+      setStep('completed');
+      updateProgress('All videos generated successfully with Replicate!');
+
+    } catch (err) {
+      console.error('Replicate generation error:', err);
+      const errorMessage = err instanceof Error ? err.message : 'Replicate generation failed';
+      
+      // Enable retry mode
+      setRetryState({
+        failedSegmentIndex: generatedVideos.length, // Current segment that failed
+        error: errorMessage
+      });
+      setStep('configuring'); // Go back to form, but with retry overlay
+      
+    } finally {
+      setIsGenerating(false);
+    }
+  };
+
+  // Helper: Convert structured segment JSON to text prompt for Replicate
+  // Replicate models typically expect plain text, not structured JSON
+  const convertSegmentToTextPrompt = (segment: VeoSegment): string => {
+    const parts: string[] = [];
+    
+    // Extract dialogue
+    const dialogue = segment.action_timeline?.dialogue;
+    if (dialogue) {
+      parts.push(`"${dialogue}"`);
+    }
+    
+    // Extract character description
+    const character = segment.character_description;
+    if (character?.current_state) {
+      parts.push(`Character: ${character.current_state}`);
+    }
+    
+    // Extract scene description
+    const scene = segment.scene_continuity;
+    if (scene?.environment) {
+      parts.push(`Scene: ${scene.environment}`);
+    }
+    if (scene?.lighting_state) {
+      parts.push(`Lighting: ${scene.lighting_state}`);
+    }
+    if (scene?.camera_position) {
+      parts.push(`Camera: ${scene.camera_position}`);
+    }
+    if (scene?.camera_movement) {
+      parts.push(`Movement: ${scene.camera_movement}`);
+    }
+    
+    // Extract synchronized actions
+    const syncedActions = segment.action_timeline?.synchronized_actions;
+    if (syncedActions) {
+      const actionsList = Object.entries(syncedActions)
+        .filter(([, value]) => value)
+        .map(([key, value]) => `${key}: ${value}`)
+        .join('; ');
+      if (actionsList) {
+        parts.push(`Actions: ${actionsList}`);
+      }
+    }
+    
+    // Add instruction to not include captions/subtitles
+    parts.push('Do not include any captions, subtitles, or text overlays in the video');
+    
+    return parts.join('. ');
+  };
+
+  // Main submit handler
+  const handleSubmit = (e: React.FormEvent) => {
+    e.preventDefault();
+    
+    if (provider === 'kling') {
+      if (generationMode === 'frame-continuity') {
+        handleKlingFrameContinuityFlow();
+      } else {
+        handleKlingExtendFlow();
+      }
+    } else {
+      handleReplicateGeneration();
+    }
+  };
+
+  const isValid = provider === 'kling' 
+    ? !!imageFile && formState.script.trim().length > 0
+    : formState.script.trim().length > 0;
+
+  return (
+    <motion.div
+      initial={{ opacity: 0, x: 20 }}
+      animate={{ opacity: 1, x: 0 }}
+      exit={{ opacity: 0, x: -20 }}
+      className="max-w-6xl mx-auto p-8"
+    >
+      {/* Header */}
+      <div className="flex items-center justify-between mb-8">
+        <div>
+          <button
+            onClick={onBack}
+            className="flex items-center gap-2 text-void-400 hover:text-void-200 transition-colors mb-4"
+          >
+            <ArrowLeftIcon size={20} />
+            <span>Back to providers</span>
+          </button>
+          <h1 className="text-3xl font-display font-bold">
+            <span className={provider === 'kling' ? 'gradient-text' : 'gradient-text-electric'}>
+              {provider === 'kling' ? 'KIE API' : 'Replicate'}
+            </span>
+            <span className="text-void-200"> Video Generation</span>
+          </h1>
+          <p className="text-void-400 mt-2">
+            {provider === 'kling' 
+              ? 'Generate professional UGC videos with AI-powered segmentation'
+              : 'Create unique videos with open-source models'
+            }
+          </p>
+        </div>
+      </div>
+
+      {/* Retry Modal */}
+      {retryState && (
+        <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/80 backdrop-blur-sm p-4">
+          <motion.div 
+            initial={{ opacity: 0, scale: 0.95 }}
+            animate={{ opacity: 1, scale: 1 }}
+            className="bg-void-900 border border-void-700 rounded-2xl p-6 max-w-2xl w-full shadow-2xl overflow-y-auto max-h-[90vh]"
+          >
+            <div className="flex items-center gap-3 mb-4 text-red-400">
+              <svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" />
+              </svg>
+              <h3 className="text-xl font-bold">Generation Failed</h3>
+            </div>
+            
+            <p className="text-void-300 mb-6 p-4 bg-void-800 rounded-lg border border-void-700">
+              Error at segment {retryState.failedSegmentIndex + 1}: <span className="text-red-300">{retryState.error}</span>
+            </p>
+            
+            <div className="space-y-4 mb-8">
+              <h4 className="font-semibold text-void-200">Edit Segment {retryState.failedSegmentIndex + 1} to fix the issue:</h4>
+              
+              <div>
+                <label className="block text-sm font-medium text-void-400 mb-1">Dialogue</label>
+                <textarea
+                  value={retryDialogue}
+                  onChange={(e) => setRetryDialogue(e.target.value)}
+                  className="w-full bg-void-950 border border-void-700 rounded-lg p-3 text-void-100 h-24 focus:border-coral-500 focus:outline-none"
+                  placeholder="Adjust dialogue..."
+                />
+              </div>
+              
+              <div>
+                <label className="block text-sm font-medium text-void-400 mb-1">Action / Character State</label>
+                <textarea
+                  value={retryAction}
+                  onChange={(e) => setRetryAction(e.target.value)}
+                  className="w-full bg-void-950 border border-void-700 rounded-lg p-3 text-void-100 h-24 focus:border-coral-500 focus:outline-none"
+                  placeholder="Adjust action description..."
+                />
+              </div>
+
+              <div>
+                <label className="block text-sm font-medium text-void-400 mb-1">Environment</label>
+                <textarea
+                  value={retryEnvironment}
+                  onChange={(e) => setRetryEnvironment(e.target.value)}
+                  className="w-full bg-void-950 border border-void-700 rounded-lg p-3 text-void-100 h-24 focus:border-coral-500 focus:outline-none"
+                  placeholder="Adjust environment description..."
+                />
+              </div>
+            </div>
+            
+            <div className="flex justify-end gap-3">
+              <button 
+                onClick={handleCancelRetry}
+                className="px-4 py-2 rounded-lg text-void-300 hover:text-white hover:bg-void-800 transition-colors"
+              >
+                Cancel
+              </button>
+              <button 
+                onClick={handleRetrySubmit}
+                className="px-6 py-2 bg-gradient-to-r from-coral-500 to-coral-600 text-white font-semibold rounded-lg hover:from-coral-400 hover:to-coral-500 shadow-lg shadow-coral-500/20"
+              >
+                Retry Generation
+              </button>
+            </div>
+          </motion.div>
+        </div>
+      )}
+
+      {/* Draft Restored Notification */}
+      {draftRestored && (
+        <motion.div
+          initial={{ opacity: 0, y: -20 }}
+          animate={{ opacity: 1, y: 0 }}
+          exit={{ opacity: 0, y: -20 }}
+          className="mb-6 p-4 bg-void-800/80 border border-void-600 rounded-xl flex items-center justify-between"
+        >
+          <div className="flex items-center gap-3">
+            <div className="w-2 h-2 rounded-full bg-green-500 animate-pulse" />
+            <div>
+              <p className="text-sm font-medium text-void-200">Draft restored</p>
+              <p className="text-xs text-void-400">Your previous inputs have been loaded</p>
+            </div>
+          </div>
+          <button
+            onClick={() => setDraftRestored(false)}
+            className="text-void-400 hover:text-void-200 transition-colors"
+          >
+            <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
+            </svg>
+          </button>
+        </motion.div>
+      )}
+
+      <form onSubmit={handleSubmit}>
+        <div className="grid grid-cols-1 lg:grid-cols-2 gap-8">
+          {/* Left Column - Script & Style */}
+          <div className="space-y-6">
+            {/* Script Input */}
+            <div className="card">
+              <label className="block text-sm font-semibold text-void-200 mb-3">
+                Script <span className="text-coral-400">*</span>
+              </label>
+              <textarea
+                name="script"
+                value={formState.script}
+                onChange={handleChange}
+                rows={10}
+                className="textarea-field font-mono text-sm"
+                placeholder="Enter your complete video script here...
+
+The AI will automatically analyze and segment your script into optimal video chunks, typically 8 seconds each."
+                required
+              />
+              <div className="flex items-center justify-between mt-3">
+                <p className="text-xs text-void-500">
+                  AI will automatically segment your script
+                </p>
+                {wordCount > 0 && (
+                  <div className="flex items-center gap-4 text-xs">
+                    <span className="text-void-400">{wordCount} words</span>
+                    <span className={`font-semibold ${provider === 'kling' ? 'text-coral-400' : 'text-electric-400'}`}>
+                      ~{estimatedSegments} segments
+                    </span>
+                  </div>
+                )}
+              </div>
+            </div>
+
+            {/* Style Input */}
+            <div className="card">
+              <label className="block text-sm font-semibold text-void-200 mb-3">
+                Visual Style
+              </label>
+              <textarea
+                name="style"
+                value={formState.style}
+                onChange={handleChange}
+                rows={3}
+                className="textarea-field"
+                placeholder="e.g., Cinematic, hyper-realistic, natural lighting, modern aesthetic, warm tones..."
+              />
+            </div>
+
+            {/* Generation Mode Selection (Kling only) */}
+            {provider === 'kling' && (
+              <div className="card border-2 border-coral-500/30 bg-coral-500/5">
+                <h4 className="text-sm font-semibold text-void-200 mb-4">
+                  Generation Mode
+                </h4>
+                <div className="space-y-3">
+                  <label className="flex items-start gap-3 cursor-pointer group">
+                    <input
+                      type="radio"
+                      name="generationMode"
+                      value="frame-continuity"
+                      checked={generationMode === 'frame-continuity'}
+                      onChange={() => setGenerationMode('frame-continuity')}
+                      className="mt-1 w-4 h-4 accent-coral-500"
+                    />
+                    <div>
+                      <span className="text-sm font-medium text-void-100 group-hover:text-coral-400 transition-colors">
+                        🎯 Frame Continuity (Recommended)
+                      </span>
+                      <p className="text-xs text-void-400 mt-0.5">
+                        Extract last frame from each video → Use as reference for next segment.
+                        <br />
+                        <span className="text-coral-400">Best for visual consistency across segments.</span>
+                      </p>
+                    </div>
+                  </label>
+
+                  <label className="flex items-start gap-3 cursor-pointer group">
+                    <input
+                      type="radio"
+                      name="generationMode"
+                      value="extend"
+                      checked={generationMode === 'extend'}
+                      onChange={() => setGenerationMode('extend')}
+                      className="mt-1 w-4 h-4 accent-coral-500"
+                    />
+                    <div>
+                      <span className="text-sm font-medium text-void-100 group-hover:text-coral-400 transition-colors">
+                        ➕ Extend API
+                      </span>
+                      <p className="text-xs text-void-400 mt-0.5">
+                        Use KIE's native extend API for video continuation.
+                        <br />
+                        <span className="text-void-500">Faster but may have less visual consistency.</span>
+                      </p>
+                    </div>
+                  </label>
+                </div>
+              </div>
+            )}
+
+            {/* Generation Preview */}
+            {estimatedSegments > 0 && (
+              <motion.div 
+                initial={{ opacity: 0, scale: 0.95 }}
+                animate={{ opacity: 1, scale: 1 }}
+                className={`card border-2 ${provider === 'kling' ? 'border-coral-500/30 bg-coral-500/5' : 'border-electric-500/30 bg-electric-500/5'}`}
+              >
+                <h4 className={`font-bold text-sm mb-3 ${provider === 'kling' ? 'text-coral-400' : 'text-electric-400'}`}>
+                  AI Analysis Preview
+                </h4>
+                <div className="grid grid-cols-2 gap-3 text-sm">
+                  <div className="flex justify-between">
+                    <span className="text-void-400">Words:</span>
+                    <span className="text-void-200 font-medium">{wordCount}</span>
+                  </div>
+                  <div className="flex justify-between">
+                    <span className="text-void-400">Segments:</span>
+                    <span className="text-void-200 font-medium">~{estimatedSegments}</span>
+                  </div>
+                  <div className="flex justify-between">
+                    <span className="text-void-400">Duration:</span>
+                    <span className="text-void-200 font-medium">~{estimatedSegments * 8}s</span>
+                  </div>
+                  <div className="flex justify-between">
+                    <span className="text-void-400">Mode:</span>
+                    <span className="text-void-200 font-medium">
+                      {generationMode === 'frame-continuity' ? 'Frame' : 'Extend'}
+                    </span>
+                  </div>
+                </div>
+              </motion.div>
+            )}
+          </div>
+
+          {/* Right Column - Image & Settings */}
+          <div className="space-y-6">
+            {/* Image Upload - Required for Kling, Optional for Replicate */}
+            <div className="card">
+              <label className="block text-sm font-semibold text-void-200 mb-3">
+                Character Image {provider === 'kling' && <span className="text-coral-400">*</span>}
+                {provider === 'replicate' && <span className="text-void-500 text-xs ml-2">(optional, for visual continuity)</span>}
+              </label>
+              <div
+                onDragOver={handleDragOver}
+                onDragLeave={handleDragLeave}
+                onDrop={handleDrop}
+                className={`dropzone flex flex-col items-center justify-center text-center min-h-[200px] ${isDragging ? 'active' : ''}`}
+              >
+                {imagePreview ? (
+                  <div className="relative">
+                    <img 
+                      src={imagePreview} 
+                      alt="Preview" 
+                      className="max-h-40 rounded-lg shadow-lg"
+                    />
+                    <button
+                      type="button"
+                      onClick={() => { setImageFile(null); setImagePreview(null); }}
+                      className={`absolute -top-2 -right-2 w-6 h-6 rounded-full flex items-center justify-center text-white text-xs transition-colors ${
+                        provider === 'kling' ? 'bg-coral-500 hover:bg-coral-600' : 'bg-electric-500 hover:bg-electric-600'
+                      }`}
+                    >
+                      ×
+                    </button>
+                  </div>
+                ) : (
+                  <>
+                    <ImageIcon className="text-void-500 mb-4" size={48} />
+                    <p className="text-void-300 mb-2">Drag and drop your image here</p>
+                    <p className="text-void-500 text-sm mb-4">or</p>
+                    <label className={`cursor-pointer ${provider === 'kling' ? 'btn-secondary' : 'btn-secondary-electric'}`}>
+                      <span>Browse Files</span>
+                      <input
+                        type="file"
+                        accept="image/*"
+                        className="hidden"
+                        onChange={(e) => e.target.files?.[0] && handleImageUpload(e.target.files[0])}
+                      />
+                    </label>
+                  </>
+                )}
+              </div>
+              <p className="text-xs text-void-500 mt-2">
+                {provider === 'kling' 
+                  ? 'PNG, JPG up to 10MB. This image will be used as your character reference.'
+                  : 'PNG, JPG up to 10MB. Optional: Provides visual continuity across segments.'
+                }
+              </p>
+            </div>
+
+            {/* Settings Grid */}
+            <div className="card">
+              <h4 className="text-sm font-semibold text-void-200 mb-4">Generation Settings</h4>
+              <div className="grid grid-cols-2 gap-4">
+                <div>
+                  <label className="block text-xs text-void-400 mb-1.5">Voice Type</label>
+                  <select
+                    name="voiceType"
+                    value={formState.voiceType}
+                    onChange={handleChange}
+                    className="select-field"
+                  >
+                    {voiceTypes.map(v => <option key={v} value={v}>{v}</option>)}
+                  </select>
+                </div>
+                <div>
+                  <label className="block text-xs text-void-400 mb-1.5">Energy Level</label>
+                  <select
+                    name="energyLevel"
+                    value={formState.energyLevel}
+                    onChange={handleChange}
+                    className="select-field"
+                  >
+                    {energyLevels.map(e => <option key={e} value={e}>{e}</option>)}
+                  </select>
+                </div>
+                <div>
+                  <label className="block text-xs text-void-400 mb-1.5">Camera Style</label>
+                  <select
+                    name="cameraStyle"
+                    value={formState.cameraStyle}
+                    onChange={handleChange}
+                    className="select-field"
+                  >
+                    {cameraStyles.map(c => <option key={c} value={c}>{c}</option>)}
+                  </select>
+                </div>
+                <div>
+                  <label className="block text-xs text-void-400 mb-1.5">Narrative</label>
+                  <select
+                    name="narrativeStyle"
+                    value={formState.narrativeStyle}
+                    onChange={handleChange}
+                    className="select-field"
+                  >
+                    {narrativeStyles.map(n => <option key={n} value={n}>{n}</option>)}
+                  </select>
+                </div>
+                <div>
+                  <label className="block text-xs text-void-400 mb-1.5">Aspect Ratio</label>
+                  <select
+                    name="aspectRatio"
+                    value={formState.aspectRatio}
+                    onChange={handleChange}
+                    className="select-field"
+                  >
+                    {aspectRatios.map(a => <option key={a} value={a}>{a}</option>)}
+                  </select>
+                </div>
+                {provider === 'kling' ? (
+                  <div>
+                    <label className="block text-xs text-void-400 mb-1.5">Seed Value</label>
+                    <input
+                      type="number"
+                      name="seedValue"
+                      value={formState.seedValue}
+                      onChange={handleChange}
+                      className="input-field"
+                      placeholder="12005"
+                    />
+                  </div>
+                ) : (
+                  <div>
+                    <label className="block text-xs text-void-400 mb-1.5">Model</label>
+                    <select
+                      name="model"
+                      value={formState.model}
+                      onChange={handleChange}
+                      className="select-field"
+                    >
+                      <option value="google/veo-3">Google Veo 3</option>
+                    </select>
+                  </div>
+                )}
+              </div>
+              <p className="text-xs text-void-500 mt-3">
+                {provider === 'kling' 
+                  ? 'Seed 12005 = Warm, flattering lighting. Use same seed for consistency.'
+                  : 'Google Veo 3 recommended for best quality and consistency.'
+                }
+              </p>
+            </div>
+
+            {/* Submit Button */}
+            <button
+              type="submit"
+              disabled={!isValid || isGenerating}
+              className={`
+                w-full py-4 font-semibold rounded-xl transition-all duration-300
+                flex items-center justify-center gap-3
+                ${provider === 'kling' ? 'btn-primary' : 'btn-electric'}
+                disabled:opacity-50 disabled:cursor-not-allowed disabled:scale-100
+              `}
+            >
+              {isGenerating ? (
+                <>
+                  <div className="w-5 h-5 border-2 border-white/30 border-t-white rounded-full animate-spin" />
+                  <span>Generating...</span>
+                </>
+              ) : (
+                <>
+                  <SparklesIcon size={20} />
+                  <span>
+                    Generate Video 
+                    {provider === 'kling' && generationMode === 'frame-continuity' && ' (Frame Continuity)'}
+                    {provider === 'kling' && generationMode === 'extend' && ' (Extend API)'}
+                  </span>
+                </>
+              )}
+            </button>
+          </div>
+        </div>
+      </form>
+    </motion.div>
+  );
+};

frontend/src/components/GenerationProgress.tsx

@@ -0,0 +1,411 @@
+import React, { useState, useEffect, useRef } from 'react';
+import { motion, AnimatePresence } from 'framer-motion';
+import { useGeneration } from '@/context/GenerationContext';
+
+// Icons
+const CheckIcon = () => (
+  <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" />
+  </svg>
+);
+
+const SpinnerIcon = () => (
+  <svg className="w-4 h-4 animate-spin" fill="none" viewBox="0 0 24 24">
+    <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4" />
+    <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z" />
+  </svg>
+);
+
+const ClockIcon = () => (
+  <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+    <circle cx="12" cy="12" r="10" strokeWidth={2} />
+    <path strokeLinecap="round" strokeWidth={2} d="M12 6v6l4 2" />
+  </svg>
+);
+
+const VideoIcon = () => (
+  <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 10l4.553-2.276A1 1 0 0121 8.618v6.764a1 1 0 01-1.447.894L15 14M5 18h8a2 2 0 002-2V8a2 2 0 00-2-2H5a2 2 0 00-2 2v8a2 2 0 002 2z" />
+  </svg>
+);
+
+const WaveformIcon = () => (
+  <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 19V6l12-3v13M9 19c0 1.105-1.343 2-3 2s-3-.895-3-2 1.343-2 3-2 3 .895 3 2zm12-3c0 1.105-1.343 2-3 2s-3-.895-3-2 1.343-2 3-2 3 .895 3 2zM9 10l12-3" />
+  </svg>
+);
+
+const BrainIcon = () => (
+  <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z" />
+  </svg>
+);
+
+const DownloadIcon = () => (
+  <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4" />
+  </svg>
+);
+
+const ImageIcon = () => (
+  <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z" />
+  </svg>
+);
+
+interface ActivityLog {
+  id: string;
+  message: string;
+  timestamp: Date;
+  type: 'info' | 'success' | 'warning' | 'processing';
+  icon?: 'video' | 'audio' | 'brain' | 'download' | 'image';
+}
+
+export const GenerationProgress: React.FC = () => {
+  const { state } = useGeneration();
+  const { progress, provider, generatedVideos, segments } = state;
+  
+  const [elapsedTime, setElapsedTime] = useState(0);
+  const [activityLog, setActivityLog] = useState<ActivityLog[]>([]);
+  const [startTime] = useState(() => Date.now());
+  const lastMessageRef = useRef<string>('');
+  const logContainerRef = useRef<HTMLDivElement>(null);
+
+  const percentage = progress.total > 0 
+    ? Math.round((progress.current / progress.total) * 100) 
+    : 0;
+
+  const accentColor = provider === 'kling' ? 'coral' : 'electric';
+  const accentClass = accentColor === 'coral' ? 'text-coral-400' : 'text-electric-400';
+  const accentBg = accentColor === 'coral' ? 'bg-coral-500' : 'bg-electric-500';
+  const accentBorder = accentColor === 'coral' ? 'border-coral-500' : 'border-electric-500';
+
+  // Update elapsed time
+  useEffect(() => {
+    const interval = setInterval(() => {
+      setElapsedTime(Math.floor((Date.now() - startTime) / 1000));
+    }, 1000);
+    return () => clearInterval(interval);
+  }, [startTime]);
+
+  // Track progress messages and add to activity log
+  useEffect(() => {
+    if (progress.message && progress.message !== lastMessageRef.current) {
+      lastMessageRef.current = progress.message;
+      
+      // Determine log type and icon based on message content
+      let type: ActivityLog['type'] = 'info';
+      let icon: ActivityLog['icon'] = undefined;
+      
+      const msg = progress.message.toLowerCase();
+      
+      if (msg.includes('complete') || msg.includes('success') || msg.includes('✅')) {
+        type = 'success';
+      } else if (msg.includes('warning') || msg.includes('⚠️') || msg.includes('fallback')) {
+        type = 'warning';
+      } else if (msg.includes('generating') || msg.includes('processing') || msg.includes('submitting')) {
+        type = 'processing';
+        icon = 'video';
+      }
+      
+      if (msg.includes('whisper') || msg.includes('audio') || msg.includes('transcri')) {
+        icon = 'audio';
+      } else if (msg.includes('prompt') || msg.includes('refin') || msg.includes('gpt')) {
+        icon = 'brain';
+      } else if (msg.includes('download')) {
+        icon = 'download';
+      } else if (msg.includes('image') || msg.includes('frame') || msg.includes('upload')) {
+        icon = 'image';
+      } else if (msg.includes('video') || msg.includes('segment')) {
+        icon = 'video';
+      }
+      
+      const newLog: ActivityLog = {
+        id: `${Date.now()}-${Math.random()}`,
+        message: progress.message,
+        timestamp: new Date(),
+        type,
+        icon,
+      };
+      
+      setActivityLog(prev => [...prev.slice(-20), newLog]); // Keep last 20 entries
+    }
+  }, [progress.message]);
+
+  // Auto-scroll activity log
+  useEffect(() => {
+    if (logContainerRef.current) {
+      logContainerRef.current.scrollTop = logContainerRef.current.scrollHeight;
+    }
+  }, [activityLog]);
+
+  // Format time
+  const formatTime = (seconds: number) => {
+    const mins = Math.floor(seconds / 60);
+    const secs = seconds % 60;
+    return `${mins}:${secs.toString().padStart(2, '0')}`;
+  };
+
+  // Estimate remaining time
+  const estimatedTotal = progress.current > 0 
+    ? Math.round((elapsedTime / progress.current) * progress.total)
+    : 0;
+  const remainingTime = Math.max(0, estimatedTotal - elapsedTime);
+
+  // Get icon component
+  const getIcon = (iconType?: ActivityLog['icon']) => {
+    switch (iconType) {
+      case 'video': return <VideoIcon />;
+      case 'audio': return <WaveformIcon />;
+      case 'brain': return <BrainIcon />;
+      case 'download': return <DownloadIcon />;
+      case 'image': return <ImageIcon />;
+      default: return <SpinnerIcon />;
+    }
+  };
+
+  return (
+    <motion.div
+      initial={{ opacity: 0 }}
+      animate={{ opacity: 1 }}
+      className="min-h-[60vh] flex flex-col items-center justify-center p-4 md:p-8"
+    >
+      <div className="max-w-4xl w-full">
+        {/* Header with Time */}
+        <div className="flex items-center justify-between mb-8">
+          <div>
+            <h2 className="text-2xl font-bold text-void-100">Generating Videos</h2>
+            <p className="text-void-400 text-sm mt-1">
+              {provider === 'kling' ? 'Kling AI' : 'Replicate'} • {segments.length} segments
+            </p>
+          </div>
+          <div className="flex items-center gap-6 text-sm">
+            <div className="flex items-center gap-2 text-void-400">
+              <ClockIcon />
+              <span>Elapsed: <span className="text-void-200 font-mono">{formatTime(elapsedTime)}</span></span>
+            </div>
+            {progress.current > 0 && remainingTime > 0 && (
+              <div className="flex items-center gap-2 text-void-400">
+                <span>Est. remaining: <span className={`font-mono ${accentClass}`}>{formatTime(remainingTime)}</span></span>
+              </div>
+            )}
+          </div>
+        </div>
+
+        {/* Main Progress Area */}
+        <div className="grid grid-cols-1 lg:grid-cols-3 gap-6 mb-8">
+          
+          {/* Left: Circular Progress */}
+          <div className="lg:col-span-1 flex flex-col items-center justify-center">
+            <div className="relative w-48 h-48">
+              {/* Background circle */}
+              <svg className="w-full h-full -rotate-90">
+                <circle
+                  cx="96"
+                  cy="96"
+                  r="88"
+                  fill="none"
+                  stroke="currentColor"
+                  strokeWidth="8"
+                  className="text-void-800"
+                />
+                <motion.circle
+                  cx="96"
+                  cy="96"
+                  r="88"
+                  fill="none"
+                  stroke={accentColor === 'coral' ? '#ff6b6b' : '#22b8cf'}
+                  strokeWidth="8"
+                  strokeLinecap="round"
+                  initial={{ strokeDasharray: '0 553' }}
+                  animate={{ strokeDasharray: `${(percentage / 100) * 553} 553` }}
+                  transition={{ duration: 0.5, ease: 'easeOut' }}
+                />
+              </svg>
+              
+              {/* Center content */}
+              <div className="absolute inset-0 flex flex-col items-center justify-center">
+                <span className={`text-5xl font-bold ${accentClass}`}>
+                  {percentage}%
+                </span>
+                <span className="text-void-400 text-sm mt-1">
+                  {generatedVideos.length} / {progress.total} videos
+                </span>
+              </div>
+            </div>
+            
+            {/* Current Status */}
+            <motion.div
+              key={progress.message}
+              initial={{ opacity: 0, y: 5 }}
+              animate={{ opacity: 1, y: 0 }}
+              className="mt-6 text-center"
+            >
+              <p className="text-void-200 font-medium">{progress.message}</p>
+            </motion.div>
+          </div>
+
+          {/* Right: Segment Progress & Activity Log */}
+          <div className="lg:col-span-2 space-y-6">
+            
+            {/* Segment Cards */}
+            <div className="card p-4">
+              <h3 className="text-sm font-semibold text-void-400 mb-4">Segment Progress</h3>
+              <div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 gap-3">
+                {segments.map((segment, index) => {
+                  const isCompleted = index < generatedVideos.length;
+                  const isCurrent = index === generatedVideos.length && index < progress.total;
+                  
+                  return (
+                    <motion.div
+                      key={index}
+                      initial={{ opacity: 0, scale: 0.9 }}
+                      animate={{ opacity: 1, scale: 1 }}
+                      transition={{ delay: index * 0.05 }}
+                      className={`
+                        relative p-3 rounded-lg border-2 transition-all
+                        ${isCompleted 
+                          ? `${accentBorder} bg-void-900` 
+                          : isCurrent 
+                            ? `${accentBorder} bg-void-800 animate-pulse-slow` 
+                            : 'border-void-700 bg-void-900/50'
+                        }
+                      `}
+                    >
+                      {/* Status indicator */}
+                      <div className={`
+                        absolute -top-1.5 -right-1.5 w-5 h-5 rounded-full flex items-center justify-center
+                        ${isCompleted 
+                          ? accentBg + ' text-white' 
+                          : isCurrent 
+                            ? accentBg + ' text-white' 
+                            : 'bg-void-700 text-void-500'
+                        }
+                      `}>
+                        {isCompleted ? <CheckIcon /> : isCurrent ? <SpinnerIcon /> : <span className="text-xs">{index + 1}</span>}
+                      </div>
+                      
+                      <div className="text-sm font-medium text-void-200">
+                        Segment {index + 1}
+                      </div>
+                      <div className="text-xs text-void-500 mt-1 line-clamp-2">
+                        {segment.action_timeline?.dialogue?.substring(0, 40) || 'Processing...'}...
+                      </div>
+                      
+                      {/* Thumbnail preview when completed */}
+                      {isCompleted && generatedVideos[index]?.thumbnails?.[0] && (
+                        <div className="mt-2 rounded overflow-hidden aspect-video bg-void-950">
+                          <img 
+                            src={generatedVideos[index].thumbnails[0]} 
+                            alt={`Segment ${index + 1}`}
+                            className="w-full h-full object-cover"
+                          />
+                        </div>
+                      )}
+                    </motion.div>
+                  );
+                })}
+              </div>
+            </div>
+
+            {/* Activity Log */}
+            <div className="card p-4">
+              <h3 className="text-sm font-semibold text-void-400 mb-3 flex items-center gap-2">
+                <span className="w-2 h-2 rounded-full bg-green-500 animate-pulse" />
+                Live Activity
+              </h3>
+              <div 
+                ref={logContainerRef}
+                className="h-48 overflow-y-auto space-y-2 scrollbar-thin scrollbar-thumb-void-600 scrollbar-track-void-800"
+              >
+                <AnimatePresence initial={false}>
+                  {activityLog.map((log) => (
+                    <motion.div
+                      key={log.id}
+                      initial={{ opacity: 0, x: -20 }}
+                      animate={{ opacity: 1, x: 0 }}
+                      exit={{ opacity: 0 }}
+                      className={`
+                        flex items-start gap-3 p-2 rounded-lg text-sm
+                        ${log.type === 'success' ? 'bg-green-500/10 text-green-400' :
+                          log.type === 'warning' ? 'bg-amber-500/10 text-amber-400' :
+                          log.type === 'processing' ? `${accentColor === 'coral' ? 'bg-coral-500/10 text-coral-400' : 'bg-electric-500/10 text-electric-400'}` :
+                          'bg-void-800/50 text-void-300'
+                        }
+                      `}
+                    >
+                      <div className={`
+                        flex-shrink-0 w-6 h-6 rounded flex items-center justify-center
+                        ${log.type === 'success' ? 'bg-green-500/20' :
+                          log.type === 'warning' ? 'bg-amber-500/20' :
+                          log.type === 'processing' ? `${accentColor === 'coral' ? 'bg-coral-500/20' : 'bg-electric-500/20'}` :
+                          'bg-void-700'
+                        }
+                      `}>
+                        {log.type === 'success' ? <CheckIcon /> : getIcon(log.icon)}
+                      </div>
+                      <div className="flex-1 min-w-0">
+                        <p className="truncate">{log.message}</p>
+                        <p className="text-xs opacity-60 mt-0.5">
+                          {log.timestamp.toLocaleTimeString()}
+                        </p>
+                      </div>
+                    </motion.div>
+                  ))}
+                </AnimatePresence>
+                
+                {activityLog.length === 0 && (
+                  <div className="text-void-500 text-center py-8">
+                    Waiting for activity...
+                  </div>
+                )}
+              </div>
+            </div>
+          </div>
+        </div>
+
+        {/* Bottom Progress Bar */}
+        <div className="card p-4">
+          <div className="flex items-center justify-between mb-2">
+            <span className="text-sm text-void-400">Overall Progress</span>
+            <span className={`text-sm font-medium ${accentClass}`}>{percentage}%</span>
+          </div>
+          <div className="w-full bg-void-800 rounded-full h-3 overflow-hidden">
+            <motion.div
+              className={`h-full ${accentBg} relative`}
+              initial={{ width: 0 }}
+              animate={{ width: `${percentage}%` }}
+              transition={{ duration: 0.5 }}
+            >
+              {/* Shimmer effect */}
+              <div className="absolute inset-0 bg-gradient-to-r from-transparent via-white/20 to-transparent animate-shimmer" />
+            </motion.div>
+          </div>
+          
+          {/* Step indicators */}
+          <div className="flex justify-between mt-4 text-xs text-void-500">
+            <div className={generatedVideos.length > 0 ? accentClass : ''}>
+              {generatedVideos.length > 0 ? '✓' : '○'} Generating
+            </div>
+            <div className={generatedVideos.length >= segments.length / 2 ? accentClass : ''}>
+              {generatedVideos.length >= segments.length / 2 ? '✓' : '○'} Halfway
+            </div>
+            <div className={generatedVideos.length === segments.length ? accentClass : ''}>
+              {generatedVideos.length === segments.length ? '✓' : '○'} Complete
+            </div>
+          </div>
+        </div>
+
+        {/* Tips */}
+        <motion.div
+          initial={{ opacity: 0 }}
+          animate={{ opacity: 1 }}
+          transition={{ delay: 0.5 }}
+          className="mt-6 text-center text-void-500 text-sm"
+        >
+          💡 Each video typically takes 1-2 minutes. Stay on this page to track progress.
+        </motion.div>
+      </div>
+    </motion.div>
+  );
+};

frontend/src/components/Icons.tsx

@@ -0,0 +1,277 @@
+import React from 'react';
+
+interface IconProps {
+  className?: string;
+  size?: number;
+}
+
+export const VideoIcon: React.FC<IconProps> = ({ className = '', size = 24 }) => (
+  <svg 
+    className={className} 
+    width={size} 
+    height={size} 
+    viewBox="0 0 24 24" 
+    fill="none" 
+    stroke="currentColor" 
+    strokeWidth="2" 
+    strokeLinecap="round" 
+    strokeLinejoin="round"
+  >
+    <polygon points="23 7 16 12 23 17 23 7" />
+    <rect x="1" y="5" width="15" height="14" rx="2" ry="2" />
+  </svg>
+);
+
+export const SparklesIcon: React.FC<IconProps> = ({ className = '', size = 24 }) => (
+  <svg 
+    className={className} 
+    width={size} 
+    height={size} 
+    viewBox="0 0 24 24" 
+    fill="none" 
+    stroke="currentColor" 
+    strokeWidth="2" 
+    strokeLinecap="round" 
+    strokeLinejoin="round"
+  >
+    <path d="M12 3l1.912 5.813a2 2 0 001.275 1.275L21 12l-5.813 1.912a2 2 0 00-1.275 1.275L12 21l-1.912-5.813a2 2 0 00-1.275-1.275L3 12l5.813-1.912a2 2 0 001.275-1.275L12 3z" />
+  </svg>
+);
+
+export const UploadIcon: React.FC<IconProps> = ({ className = '', size = 24 }) => (
+  <svg 
+    className={className} 
+    width={size} 
+    height={size} 
+    viewBox="0 0 24 24" 
+    fill="none" 
+    stroke="currentColor" 
+    strokeWidth="2" 
+    strokeLinecap="round" 
+    strokeLinejoin="round"
+  >
+    <path d="M21 15v4a2 2 0 01-2 2H5a2 2 0 01-2-2v-4" />
+    <polyline points="17 8 12 3 7 8" />
+    <line x1="12" y1="3" x2="12" y2="15" />
+  </svg>
+);
+
+export const CheckIcon: React.FC<IconProps> = ({ className = '', size = 24 }) => (
+  <svg 
+    className={className} 
+    width={size} 
+    height={size} 
+    viewBox="0 0 24 24" 
+    fill="none" 
+    stroke="currentColor" 
+    strokeWidth="2" 
+    strokeLinecap="round" 
+    strokeLinejoin="round"
+  >
+    <polyline points="20 6 9 17 4 12" />
+  </svg>
+);
+
+export const XIcon: React.FC<IconProps> = ({ className = '', size = 24 }) => (
+  <svg 
+    className={className} 
+    width={size} 
+    height={size} 
+    viewBox="0 0 24 24" 
+    fill="none" 
+    stroke="currentColor" 
+    strokeWidth="2" 
+    strokeLinecap="round" 
+    strokeLinejoin="round"
+  >
+    <line x1="18" y1="6" x2="6" y2="18" />
+    <line x1="6" y1="6" x2="18" y2="18" />
+  </svg>
+);
+
+export const ArrowRightIcon: React.FC<IconProps> = ({ className = '', size = 24 }) => (
+  <svg 
+    className={className} 
+    width={size} 
+    height={size} 
+    viewBox="0 0 24 24" 
+    fill="none" 
+    stroke="currentColor" 
+    strokeWidth="2" 
+    strokeLinecap="round" 
+    strokeLinejoin="round"
+  >
+    <line x1="5" y1="12" x2="19" y2="12" />
+    <polyline points="12 5 19 12 12 19" />
+  </svg>
+);
+
+export const ArrowLeftIcon: React.FC<IconProps> = ({ className = '', size = 24 }) => (
+  <svg 
+    className={className} 
+    width={size} 
+    height={size} 
+    viewBox="0 0 24 24" 
+    fill="none" 
+    stroke="currentColor" 
+    strokeWidth="2" 
+    strokeLinecap="round" 
+    strokeLinejoin="round"
+  >
+    <line x1="19" y1="12" x2="5" y2="12" />
+    <polyline points="12 19 5 12 12 5" />
+  </svg>
+);
+
+export const ImageIcon: React.FC<IconProps> = ({ className = '', size = 24 }) => (
+  <svg 
+    className={className} 
+    width={size} 
+    height={size} 
+    viewBox="0 0 24 24" 
+    fill="none" 
+    stroke="currentColor" 
+    strokeWidth="2" 
+    strokeLinecap="round" 
+    strokeLinejoin="round"
+  >
+    <rect x="3" y="3" width="18" height="18" rx="2" ry="2" />
+    <circle cx="8.5" cy="8.5" r="1.5" />
+    <polyline points="21 15 16 10 5 21" />
+  </svg>
+);
+
+export const SettingsIcon: React.FC<IconProps> = ({ className = '', size = 24 }) => (
+  <svg 
+    className={className} 
+    width={size} 
+    height={size} 
+    viewBox="0 0 24 24" 
+    fill="none" 
+    stroke="currentColor" 
+    strokeWidth="2" 
+    strokeLinecap="round" 
+    strokeLinejoin="round"
+  >
+    <circle cx="12" cy="12" r="3" />
+    <path d="M19.4 15a1.65 1.65 0 00.33 1.82l.06.06a2 2 0 010 2.83 2 2 0 01-2.83 0l-.06-.06a1.65 1.65 0 00-1.82-.33 1.65 1.65 0 00-1 1.51V21a2 2 0 01-2 2 2 2 0 01-2-2v-.09A1.65 1.65 0 009 19.4a1.65 1.65 0 00-1.82.33l-.06.06a2 2 0 01-2.83 0 2 2 0 010-2.83l.06-.06a1.65 1.65 0 00.33-1.82 1.65 1.65 0 00-1.51-1H3a2 2 0 01-2-2 2 2 0 012-2h.09A1.65 1.65 0 004.6 9a1.65 1.65 0 00-.33-1.82l-.06-.06a2 2 0 010-2.83 2 2 0 012.83 0l.06.06a1.65 1.65 0 001.82.33H9a1.65 1.65 0 001-1.51V3a2 2 0 012-2 2 2 0 012 2v.09a1.65 1.65 0 001 1.51 1.65 1.65 0 001.82-.33l.06-.06a2 2 0 012.83 0 2 2 0 010 2.83l-.06.06a1.65 1.65 0 00-.33 1.82V9a1.65 1.65 0 001.51 1H21a2 2 0 012 2 2 2 0 01-2 2h-.09a1.65 1.65 0 00-1.51 1z" />
+  </svg>
+);
+
+export const PlayIcon: React.FC<IconProps> = ({ className = '', size = 24 }) => (
+  <svg 
+    className={className} 
+    width={size} 
+    height={size} 
+    viewBox="0 0 24 24" 
+    fill="currentColor"
+  >
+    <polygon points="5 3 19 12 5 21 5 3" />
+  </svg>
+);
+
+export const RefreshIcon: React.FC<IconProps> = ({ className = '', size = 24 }) => (
+  <svg 
+    className={className} 
+    width={size} 
+    height={size} 
+    viewBox="0 0 24 24" 
+    fill="none" 
+    stroke="currentColor" 
+    strokeWidth="2" 
+    strokeLinecap="round" 
+    strokeLinejoin="round"
+  >
+    <polyline points="23 4 23 10 17 10" />
+    <polyline points="1 20 1 14 7 14" />
+    <path d="M3.51 9a9 9 0 0114.85-3.36L23 10M1 14l4.64 4.36A9 9 0 0020.49 15" />
+  </svg>
+);
+
+export const DownloadIcon: React.FC<IconProps> = ({ className = '', size = 24 }) => (
+  <svg 
+    className={className} 
+    width={size} 
+    height={size} 
+    viewBox="0 0 24 24" 
+    fill="none" 
+    stroke="currentColor" 
+    strokeWidth="2" 
+    strokeLinecap="round" 
+    strokeLinejoin="round"
+  >
+    <path d="M21 15v4a2 2 0 01-2 2H5a2 2 0 01-2-2v-4" />
+    <polyline points="7 10 12 15 17 10" />
+    <line x1="12" y1="15" x2="12" y2="3" />
+  </svg>
+);
+
+export const ZapIcon: React.FC<IconProps> = ({ className = '', size = 24 }) => (
+  <svg 
+    className={className} 
+    width={size} 
+    height={size} 
+    viewBox="0 0 24 24" 
+    fill="none" 
+    stroke="currentColor" 
+    strokeWidth="2" 
+    strokeLinecap="round" 
+    strokeLinejoin="round"
+  >
+    <polygon points="13 2 3 14 12 14 11 22 21 10 12 10 13 2" />
+  </svg>
+);
+
+export const BrainIcon: React.FC<IconProps> = ({ className = '', size = 24 }) => (
+  <svg 
+    className={className} 
+    width={size} 
+    height={size} 
+    viewBox="0 0 24 24" 
+    fill="none" 
+    stroke="currentColor" 
+    strokeWidth="2" 
+    strokeLinecap="round" 
+    strokeLinejoin="round"
+  >
+    <path d="M9.5 2A2.5 2.5 0 0112 4.5v15a2.5 2.5 0 01-4.96.44 2.5 2.5 0 01-2.96-3.08 3 3 0 01-.34-5.58 2.5 2.5 0 011.32-4.24 2.5 2.5 0 011.98-3A2.5 2.5 0 019.5 2z" />
+    <path d="M14.5 2A2.5 2.5 0 0012 4.5v15a2.5 2.5 0 004.96.44 2.5 2.5 0 002.96-3.08 3 3 0 00.34-5.58 2.5 2.5 0 00-1.32-4.24 2.5 2.5 0 00-1.98-3A2.5 2.5 0 0014.5 2z" />
+  </svg>
+);
+
+// Logo icon for the app
+export const LogoIcon: React.FC<IconProps> = ({ className = '', size = 40 }) => (
+  <svg 
+    className={className} 
+    width={size} 
+    height={size} 
+    viewBox="0 0 40 40" 
+    fill="none"
+  >
+    <defs>
+      <linearGradient id="logoGradient" x1="0%" y1="0%" x2="100%" y2="100%">
+        <stop offset="0%" stopColor="#ff6b6b" />
+        <stop offset="100%" stopColor="#22b8cf" />
+      </linearGradient>
+    </defs>
+    <rect x="2" y="2" width="36" height="36" rx="8" fill="url(#logoGradient)" />
+    <polygon points="16 12 16 28 28 20" fill="white" />
+    <circle cx="12" cy="12" r="3" fill="white" opacity="0.8" />
+    <circle cx="28" cy="28" r="3" fill="white" opacity="0.8" />
+  </svg>
+);
+
+// Kling logo placeholder
+export const KlingLogo: React.FC<IconProps> = ({ className = '', size = 48 }) => (
+  <div className={`${className} flex items-center justify-center`} style={{ width: size, height: size }}>
+    <span className="text-3xl font-bold gradient-text">K</span>
+  </div>
+);
+
+// Replicate logo placeholder
+export const ReplicateLogo: React.FC<IconProps> = ({ className = '', size = 48 }) => (
+  <div className={`${className} flex items-center justify-center`} style={{ width: size, height: size }}>
+    <span className="text-3xl font-bold gradient-text-electric">R</span>
+  </div>
+);
+

frontend/src/components/Login.tsx

@@ -0,0 +1,179 @@
+import { useState, useEffect } from 'react';
+import { motion } from 'framer-motion';
+import { useAuth } from '@/context/AuthContext';
+import { LogoIcon } from './Icons';
+
+export function Login() {
+  const { login } = useAuth();
+  const [username, setUsername] = useState('');
+  const [password, setPassword] = useState('');
+  const [error, setError] = useState<string | null>(null);
+  const [loading, setLoading] = useState(false);
+
+  // Debug: Log error state changes
+  useEffect(() => {
+    if (error) {
+      console.log('Error state updated:', error);
+    }
+  }, [error]);
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    setError(null);
+    setLoading(true);
+
+    try {
+      await login({ username, password });
+    } catch (err) {
+      // Extract error message from the error
+      let errorMessage = 'Login failed. Please check your credentials.';
+      
+      if (err instanceof Error) {
+        errorMessage = err.message || errorMessage;
+      } else if (typeof err === 'string') {
+        errorMessage = err;
+      }
+      
+      console.error('Login error:', err);
+      console.log('Setting error message:', errorMessage);
+      setError(errorMessage);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  return (
+    <div className="min-h-screen flex items-center justify-center bg-mesh-pattern p-6">
+      <motion.div
+        initial={{ opacity: 0, y: 20 }}
+        animate={{ opacity: 1, y: 0 }}
+        transition={{ duration: 0.5 }}
+        className="w-full max-w-md"
+      >
+        <div className="glass-dark rounded-2xl p-8 shadow-2xl">
+          {/* Logo and Title */}
+          <div className="text-center mb-8">
+            <div className="flex justify-center mb-4">
+              <LogoIcon size={64} />
+            </div>
+            <h1 className="text-3xl font-display font-bold text-void-100 mb-2">
+              Video AdGenesis
+            </h1>
+            <p className="text-void-400">Studio</p>
+            <p className="text-sm text-void-500 mt-4">
+              Please sign in to continue
+            </p>
+          </div>
+
+          {/* Login Form */}
+          <form onSubmit={handleSubmit} className="space-y-6">
+            {/* Username Field */}
+            <div>
+              <label htmlFor="username" className="block text-sm font-medium text-void-300 mb-2">
+                Username
+              </label>
+              <input
+                id="username"
+                type="text"
+                value={username}
+                onChange={(e) => {
+                  setUsername(e.target.value);
+                  if (error) setError(null);
+                }}
+                required
+                className="w-full px-4 py-3 bg-void-900/50 border border-void-700 rounded-lg 
+                         text-void-100 placeholder-void-500 focus:outline-none focus:ring-2 
+                         focus:ring-coral-500 focus:border-transparent transition-all"
+                placeholder="Enter your username"
+                autoComplete="username"
+              />
+            </div>
+
+            {/* Password Field */}
+            <div>
+              <label htmlFor="password" className="block text-sm font-medium text-void-300 mb-2">
+                Password
+              </label>
+              <input
+                id="password"
+                type="password"
+                value={password}
+                onChange={(e) => {
+                  setPassword(e.target.value);
+                  if (error) setError(null);
+                }}
+                required
+                className="w-full px-4 py-3 bg-void-900/50 border border-void-700 rounded-lg 
+                         text-void-100 placeholder-void-500 focus:outline-none focus:ring-2 
+                         focus:ring-coral-500 focus:border-transparent transition-all"
+                placeholder="Enter your password"
+                autoComplete="current-password"
+              />
+            </div>
+
+            {/* Error Message */}
+            {error ? (
+              <motion.div
+                key={`error-${error}`}
+                initial={{ opacity: 0, y: -10, scale: 0.95 }}
+                animate={{ opacity: 1, y: 0, scale: 1 }}
+                exit={{ opacity: 0, scale: 0.95 }}
+                transition={{ duration: 0.2 }}
+                className="p-4 bg-red-500/40 border-2 border-red-500 rounded-lg text-red-100 text-sm flex items-start gap-3 shadow-lg backdrop-blur-sm"
+                role="alert"
+                aria-live="assertive"
+                style={{ zIndex: 10 }}
+              >
+                <svg 
+                  className="w-5 h-5 text-red-300 flex-shrink-0 mt-0.5" 
+                  fill="none" 
+                  stroke="currentColor" 
+                  viewBox="0 0 24 24"
+                >
+                  <path 
+                    strokeLinecap="round" 
+                    strokeLinejoin="round" 
+                    strokeWidth={2} 
+                    d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" 
+                  />
+                </svg>
+                <span className="flex-1 font-semibold">{error}</span>
+              </motion.div>
+            ) : null}
+
+            {/* Submit Button */}
+            <button
+              type="submit"
+              disabled={loading}
+              className="w-full py-3 px-4 bg-gradient-to-r from-coral-500 to-coral-600 
+                       text-white font-semibold rounded-lg hover:from-coral-600 hover:to-coral-700 
+                       focus:outline-none focus:ring-2 focus:ring-coral-500 focus:ring-offset-2 
+                       focus:ring-offset-void-900 disabled:opacity-50 disabled:cursor-not-allowed 
+                       transition-all transform hover:scale-[1.02] active:scale-[0.98]"
+            >
+              {loading ? (
+                <span className="flex items-center justify-center gap-2">
+                  <svg className="animate-spin h-5 w-5" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
+                    <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4"></circle>
+                    <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
+                  </svg>
+                  Signing in...
+                </span>
+              ) : (
+                'Sign In'
+              )}
+            </button>
+          </form>
+
+          {/* Footer */}
+          <div className="mt-6 text-center">
+            <p className="text-xs text-void-500">
+              Restricted access - Authorized users only
+            </p>
+          </div>
+        </div>
+      </motion.div>
+    </div>
+  );
+}
+

frontend/src/components/ProviderSelect.tsx

@@ -0,0 +1,158 @@
+import React from 'react';
+import { motion } from 'framer-motion';
+import { VideoProvider } from '@/types';
+import { ZapIcon, BrainIcon, CheckIcon } from './Icons';
+
+interface ProviderSelectProps {
+  onSelect: (provider: VideoProvider) => void;
+}
+
+const providers = [
+  {
+    id: 'kling' as VideoProvider,
+    name: 'Kie API',
+    subtitle: '(cheap use less credits)',
+    description: 'High-quality video generation with advanced continuity. Perfect for professional UGC and talking head videos.',
+    icon: ZapIcon,
+    color: 'coral',
+    features: [
+      'Veo 3.1 Fast Model',
+      'Image-to-Video & Text-to-Video',
+      'Video Extension (Seamless)',
+      'GPT-4o Prompt Generation',
+      '9:16 Portrait Format',
+      'Voice Type Selection',
+    ],
+    badge: 'Recommended',
+  },
+  {
+    id: 'replicate' as VideoProvider,
+    name: 'Replicate API',
+    subtitle: '(more credits, more expensive)',
+    description: 'Access to diverse video generation models. Great for experimentation and unique creative styles.',
+    icon: BrainIcon,
+    color: 'electric',
+    features: [
+      'Multiple Model Options',
+      'Flexible Duration',
+      'Creative Styles',
+      'Cost Effective',
+      'API Simplicity',
+      'Community Models',
+    ],
+    badge: 'Flexible',
+  },
+];
+
+export const ProviderSelect: React.FC<ProviderSelectProps> = ({ onSelect }) => {
+  return (
+    <div className="min-h-[70vh] flex flex-col items-center justify-center p-8">
+      {/* Hero Section */}
+      <motion.div 
+        className="text-center mb-16"
+        initial={{ opacity: 0, y: -20 }}
+        animate={{ opacity: 1, y: 0 }}
+        transition={{ duration: 0.6 }}
+      >
+        <h1 className="text-5xl md:text-6xl font-display font-bold mb-4">
+          <span className="gradient-text">Video AdGenesis</span>
+          <span className="text-void-200"> Studio</span>
+        </h1>
+        <p className="text-xl text-void-400 max-w-2xl mx-auto">
+          Transform your scripts into stunning videos with AI. Choose your preferred generation engine to get started.
+        </p>
+      </motion.div>
+
+      {/* Provider Cards */}
+      <div className="grid grid-cols-1 md:grid-cols-2 gap-8 max-w-5xl w-full">
+        {providers.map((provider, index) => (
+          <motion.div
+            key={provider.id}
+            initial={{ opacity: 0, y: 30 }}
+            animate={{ opacity: 1, y: 0 }}
+            transition={{ duration: 0.5, delay: index * 0.15 }}
+          >
+            <button
+              onClick={() => onSelect(provider.id)}
+              className={`
+                w-full text-left provider-card card-interactive
+                ${provider.color === 'coral' ? 'hover:border-coral-500/50 hover:glow-coral' : 'hover:border-electric-500/50 hover:glow-electric'}
+                group transition-all duration-500
+              `}
+            >
+              {/* Badge */}
+              <div className="flex items-start justify-between mb-6">
+                <div className={`
+                  w-16 h-16 rounded-2xl flex items-center justify-center
+                  ${provider.color === 'coral' 
+                    ? 'bg-coral-500/10 text-coral-400 group-hover:bg-coral-500/20' 
+                    : 'bg-electric-500/10 text-electric-400 group-hover:bg-electric-500/20'
+                  }
+                  transition-colors duration-300
+                `}>
+                  <provider.icon size={32} />
+                </div>
+                <span className={`
+                  px-3 py-1 rounded-full text-xs font-semibold
+                  ${provider.color === 'coral' 
+                    ? 'bg-coral-500/20 text-coral-300' 
+                    : 'bg-electric-500/20 text-electric-300'
+                  }
+                `}>
+                  {provider.badge}
+                </span>
+              </div>
+
+              {/* Title & Description */}
+              <h2 className="text-2xl font-display font-bold text-void-100 mb-1">
+                {provider.name}
+              </h2>
+              <p className={`text-sm mb-3 ${provider.color === 'coral' ? 'text-coral-400' : 'text-electric-400'}`}>
+                {provider.subtitle}
+              </p>
+              <p className="text-void-400 text-sm mb-6 leading-relaxed">
+                {provider.description}
+              </p>
+
+              {/* Features */}
+              <div className="grid grid-cols-2 gap-2">
+                {provider.features.map((feature, i) => (
+                  <div key={i} className="flex items-center gap-2">
+                    <CheckIcon 
+                      size={14} 
+                      className={provider.color === 'coral' ? 'text-coral-400' : 'text-electric-400'} 
+                    />
+                    <span className="text-xs text-void-300">{feature}</span>
+                  </div>
+                ))}
+              </div>
+
+              {/* CTA Arrow */}
+              <div className={`
+                mt-6 flex items-center gap-2 text-sm font-semibold
+                ${provider.color === 'coral' ? 'text-coral-400' : 'text-electric-400'}
+                group-hover:gap-4 transition-all duration-300
+              `}>
+                <span>Get Started</span>
+                <svg className="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M17 8l4 4m0 0l-4 4m4-4H3" />
+                </svg>
+              </div>
+            </button>
+          </motion.div>
+        ))}
+      </div>
+
+      {/* Footer Note */}
+      <motion.p 
+        className="mt-12 text-void-500 text-sm text-center"
+        initial={{ opacity: 0 }}
+        animate={{ opacity: 1 }}
+        transition={{ delay: 0.8 }}
+      >
+        Both providers use your Python backend. API keys are configured server-side.
+      </motion.p>
+    </div>
+  );
+};
+

frontend/src/components/index.ts

@@ -0,0 +1,8 @@
+export * from './Icons';
+export * from './ProviderSelect';
+export * from './GenerationForm';
+export * from './GenerationProgress';
+export * from './GenerationComplete';
+export * from './ErrorDisplay';
+export * from './Login';
+

frontend/src/context/AuthContext.tsx

@@ -0,0 +1,80 @@
+import { createContext, useContext, useState, useEffect, ReactNode } from 'react';
+import { login as apiLogin, verifyAuth, logout as apiLogout, getCurrentUser } from '@/utils/api';
+import type { LoginRequest, AuthUser } from '@/types';
+
+interface AuthContextValue {
+  user: AuthUser | null;
+  loading: boolean;
+  login: (credentials: LoginRequest) => Promise<void>;
+  logout: () => void;
+  isAuthenticated: boolean;
+}
+
+const AuthContext = createContext<AuthContextValue | undefined>(undefined);
+
+export function AuthProvider({ children }: { children: ReactNode }) {
+  const [user, setUser] = useState<AuthUser | null>(null);
+  const [loading, setLoading] = useState(true);
+
+  // Check authentication on mount
+  useEffect(() => {
+    checkAuth();
+  }, []);
+
+  async function checkAuth() {
+    try {
+      const authUser = await verifyAuth();
+      if (authUser.authenticated) {
+        setUser(authUser);
+      } else {
+        setUser(null);
+      }
+    } catch {
+      setUser(null);
+    } finally {
+      setLoading(false);
+    }
+  }
+
+  async function login(credentials: LoginRequest) {
+    setLoading(true);
+    try {
+      await apiLogin(credentials);
+      const authUser = await getCurrentUser();
+      setUser(authUser);
+    } catch (error) {
+      setUser(null);
+      throw error;
+    } finally {
+      setLoading(false);
+    }
+  }
+
+  function logout() {
+    apiLogout();
+    setUser(null);
+  }
+
+  return (
+    <AuthContext.Provider
+      value={{
+        user,
+        loading,
+        login,
+        logout,
+        isAuthenticated: user?.authenticated ?? false,
+      }}
+    >
+      {children}
+    </AuthContext.Provider>
+  );
+}
+
+export function useAuth() {
+  const context = useContext(AuthContext);
+  if (context === undefined) {
+    throw new Error('useAuth must be used within an AuthProvider');
+  }
+  return context;
+}
+

frontend/src/context/GenerationContext.tsx

@@ -0,0 +1,171 @@
+import React, { createContext, useContext, useReducer, ReactNode } from 'react';
+import type { 
+  GenerationState, 
+  GenerationStep, 
+  VideoProvider, 
+  VeoSegment, 
+  GeneratedVideo 
+} from '@/types';
+
+// Initial state
+const initialState: GenerationState = {
+  step: 'idle',
+  provider: null,
+  segments: [],
+  currentSegmentIndex: 0,
+  generatedVideos: [],
+  progress: {
+    current: 0,
+    total: 0,
+    message: '',
+  },
+  error: null,
+  taskId: null,
+  retryState: null,
+};
+
+// Action types
+type GenerationAction =
+  | { type: 'SET_PROVIDER'; payload: VideoProvider }
+  | { type: 'SET_STEP'; payload: GenerationStep }
+  | { type: 'SET_SEGMENTS'; payload: VeoSegment[] }
+  | { type: 'SET_CURRENT_SEGMENT'; payload: number }
+  | { type: 'ADD_GENERATED_VIDEO'; payload: GeneratedVideo }
+  | { type: 'SET_PROGRESS'; payload: { current?: number; total?: number; message?: string } }
+  | { type: 'SET_ERROR'; payload: string | null }
+  | { type: 'SET_TASK_ID'; payload: string | null }
+  | { type: 'SET_RETRY_STATE'; payload: { failedSegmentIndex: number; error: string } | null }
+  | { type: 'RESET' };
+
+// Reducer
+function generationReducer(state: GenerationState, action: GenerationAction): GenerationState {
+  switch (action.type) {
+    case 'SET_PROVIDER':
+      return { ...state, provider: action.payload };
+    case 'SET_STEP':
+      return { ...state, step: action.payload };
+    case 'SET_SEGMENTS':
+      return { ...state, segments: action.payload };
+    case 'SET_CURRENT_SEGMENT':
+      return { ...state, currentSegmentIndex: action.payload };
+    case 'ADD_GENERATED_VIDEO':
+      return { 
+        ...state, 
+        generatedVideos: [...state.generatedVideos, action.payload] 
+      };
+    case 'SET_PROGRESS':
+      return { 
+        ...state, 
+        progress: { ...state.progress, ...action.payload } 
+      };
+    case 'SET_ERROR':
+      return { ...state, error: action.payload, step: action.payload ? 'error' : state.step };
+    case 'SET_TASK_ID':
+      return { ...state, taskId: action.payload };
+    case 'SET_RETRY_STATE':
+      return { ...state, retryState: action.payload };
+    case 'RESET':
+      return { ...initialState, provider: state.provider };
+    default:
+      return state;
+  }
+}
+
+// Context
+interface GenerationContextValue {
+  state: GenerationState;
+  dispatch: React.Dispatch<GenerationAction>;
+  
+  // Helper actions
+  selectProvider: (provider: VideoProvider) => void;
+  setStep: (step: GenerationStep) => void;
+  startGeneration: (segments: VeoSegment[]) => void;
+  advanceSegment: () => void;
+  addVideo: (video: GeneratedVideo) => void;
+  updateProgress: (message: string, current?: number, total?: number) => void;
+  setError: (error: string | null) => void;
+  setRetryState: (state: { failedSegmentIndex: number; error: string } | null) => void;
+  updateSegments: (segments: VeoSegment[]) => void;
+  reset: () => void;
+}
+
+const GenerationContext = createContext<GenerationContextValue | null>(null);
+
+// Provider component
+export function GenerationProvider({ children }: { children: ReactNode }) {
+  const [state, dispatch] = useReducer(generationReducer, initialState);
+
+  const value: GenerationContextValue = {
+    state,
+    dispatch,
+    
+    selectProvider: (provider) => {
+      dispatch({ type: 'SET_PROVIDER', payload: provider });
+      dispatch({ type: 'SET_STEP', payload: 'configuring' });
+    },
+    
+    setStep: (step) => {
+      dispatch({ type: 'SET_STEP', payload: step });
+    },
+    
+    startGeneration: (segments) => {
+      dispatch({ type: 'SET_SEGMENTS', payload: segments });
+      dispatch({ type: 'SET_CURRENT_SEGMENT', payload: 0 });
+      dispatch({ type: 'SET_PROGRESS', payload: { current: 0, total: segments.length, message: 'Starting generation...' } });
+      dispatch({ type: 'SET_STEP', payload: 'generating_video' });
+    },
+    
+    advanceSegment: () => {
+      const nextIndex = state.currentSegmentIndex + 1;
+      dispatch({ type: 'SET_CURRENT_SEGMENT', payload: nextIndex });
+      dispatch({ type: 'SET_PROGRESS', payload: { current: nextIndex } });
+    },
+    
+    addVideo: (video) => {
+      dispatch({ type: 'ADD_GENERATED_VIDEO', payload: video });
+    },
+    
+    updateProgress: (message, current, total) => {
+      dispatch({ 
+        type: 'SET_PROGRESS', 
+        payload: { 
+          message, 
+          ...(current !== undefined && { current }), 
+          ...(total !== undefined && { total }) 
+        } 
+      });
+    },
+    
+    setError: (error) => {
+      dispatch({ type: 'SET_ERROR', payload: error });
+    },
+    
+    setRetryState: (retryState) => {
+      dispatch({ type: 'SET_RETRY_STATE', payload: retryState });
+    },
+
+    updateSegments: (segments) => {
+      dispatch({ type: 'SET_SEGMENTS', payload: segments });
+    },
+
+    reset: () => {
+      dispatch({ type: 'RESET' });
+    },
+  };
+
+  return (
+    <GenerationContext.Provider value={value}>
+      {children}
+    </GenerationContext.Provider>
+  );
+}
+
+// Hook
+export function useGeneration() {
+  const context = useContext(GenerationContext);
+  if (!context) {
+    throw new Error('useGeneration must be used within GenerationProvider');
+  }
+  return context;
+}
+

frontend/src/index.css

@@ -0,0 +1,263 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+/* Custom scrollbar */
+::-webkit-scrollbar {
+  width: 8px;
+  height: 8px;
+}
+
+::-webkit-scrollbar-track {
+  background: rgba(16, 42, 67, 0.5);
+  border-radius: 4px;
+}
+
+::-webkit-scrollbar-thumb {
+  background: rgba(99, 125, 152, 0.5);
+  border-radius: 4px;
+}
+
+::-webkit-scrollbar-thumb:hover {
+  background: rgba(99, 125, 152, 0.8);
+}
+
+/* Base styles */
+html {
+  scroll-behavior: smooth;
+}
+
+body {
+  @apply bg-void-950 text-void-100 antialiased;
+  font-family: 'Satoshi', system-ui, sans-serif;
+  background-image: 
+    radial-gradient(ellipse 80% 80% at 50% -20%, rgba(255, 107, 107, 0.05), transparent),
+    radial-gradient(ellipse 80% 80% at 80% 50%, rgba(34, 184, 207, 0.05), transparent);
+}
+
+/* Glass morphism effect */
+.glass {
+  @apply bg-void-900/60 backdrop-blur-xl border border-void-700/30;
+}
+
+.glass-dark {
+  @apply bg-void-950/80 backdrop-blur-xl border border-void-800/50;
+}
+
+/* Gradient text */
+.gradient-text {
+  @apply bg-gradient-to-r from-coral-400 via-coral-500 to-electric-400 bg-clip-text text-transparent;
+}
+
+.gradient-text-electric {
+  @apply bg-gradient-to-r from-electric-400 to-electric-600 bg-clip-text text-transparent;
+}
+
+/* Button base styles */
+.btn-primary {
+  @apply px-6 py-3 bg-gradient-to-r from-coral-500 to-coral-600 text-white font-semibold rounded-xl;
+  @apply hover:from-coral-400 hover:to-coral-500 transition-all duration-300;
+  @apply shadow-lg shadow-coral-500/25 hover:shadow-coral-500/40;
+  @apply active:scale-[0.98];
+}
+
+.btn-secondary {
+  @apply px-6 py-3 bg-void-800 text-void-100 font-semibold rounded-xl border border-void-600;
+  @apply hover:bg-void-700 hover:border-void-500 transition-all duration-300;
+  @apply active:scale-[0.98];
+}
+
+.btn-secondary-electric {
+  @apply px-6 py-3 bg-void-800 text-void-100 font-semibold rounded-xl border border-electric-500/50;
+  @apply hover:bg-electric-500/10 hover:border-electric-400 hover:text-electric-300 transition-all duration-300;
+  @apply active:scale-[0.98];
+}
+
+.btn-electric {
+  @apply px-6 py-3 bg-gradient-to-r from-electric-500 to-electric-600 text-void-950 font-semibold rounded-xl;
+  @apply hover:from-electric-400 hover:to-electric-500 transition-all duration-300;
+  @apply shadow-lg shadow-electric-500/25 hover:shadow-electric-500/40;
+  @apply active:scale-[0.98];
+}
+
+/* Card styles */
+.card {
+  @apply bg-void-900/50 backdrop-blur-lg rounded-2xl border border-void-700/30 p-6;
+}
+
+.card-interactive {
+  @apply card cursor-pointer transition-all duration-300;
+  @apply hover:bg-void-800/50 hover:border-void-600/50 hover:shadow-xl;
+}
+
+/* Input styles */
+.input-field {
+  @apply w-full bg-void-900/50 border border-void-700 rounded-xl px-4 py-3;
+  @apply text-void-100 placeholder-void-500;
+  @apply focus:outline-none focus:border-coral-500/50 focus:ring-2 focus:ring-coral-500/20;
+  @apply transition-all duration-200;
+}
+
+.textarea-field {
+  @apply input-field resize-none;
+}
+
+/* Provider card animations */
+.provider-card {
+  @apply relative overflow-hidden;
+}
+
+.provider-card::before {
+  content: '';
+  @apply absolute inset-0 opacity-0 transition-opacity duration-500;
+  background: linear-gradient(135deg, transparent 0%, rgba(255, 107, 107, 0.05) 100%);
+}
+
+.provider-card:hover::before {
+  @apply opacity-100;
+}
+
+/* Progress ring */
+.progress-ring {
+  transform: rotate(-90deg);
+}
+
+.progress-ring-circle {
+  transition: stroke-dashoffset 0.35s;
+  transform-origin: 50% 50%;
+}
+
+/* Shimmer loading effect */
+.shimmer {
+  background: linear-gradient(
+    90deg,
+    rgba(255, 255, 255, 0) 0%,
+    rgba(255, 255, 255, 0.05) 50%,
+    rgba(255, 255, 255, 0) 100%
+  );
+  background-size: 200% 100%;
+  animation: shimmer 2s infinite;
+}
+
+/* Floating animation */
+.animate-float {
+  animation: float 6s ease-in-out infinite;
+}
+
+/* Glow effects */
+.glow-coral {
+  box-shadow: 0 0 40px rgba(255, 107, 107, 0.15);
+}
+
+.glow-electric {
+  box-shadow: 0 0 40px rgba(34, 184, 207, 0.15);
+}
+
+/* Tab styles */
+.tab-button {
+  @apply px-6 py-3 font-medium text-void-400 rounded-lg transition-all duration-200;
+}
+
+.tab-button.active {
+  @apply text-void-100 bg-void-800;
+}
+
+.tab-button:hover:not(.active) {
+  @apply text-void-200 bg-void-900/50;
+}
+
+/* Step indicator */
+.step-dot {
+  @apply w-3 h-3 rounded-full bg-void-700 transition-all duration-300;
+}
+
+.step-dot.active {
+  @apply bg-coral-500 scale-125;
+}
+
+.step-dot.completed {
+  @apply bg-electric-500;
+}
+
+/* Select dropdown */
+.select-field {
+  @apply input-field cursor-pointer appearance-none;
+  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%239fb3c8' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
+  background-position: right 0.75rem center;
+  background-repeat: no-repeat;
+  background-size: 1.5em 1.5em;
+  padding-right: 2.5rem;
+}
+
+/* Pulse animation for live elements */
+@keyframes pulse-live {
+  0%, 100% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0.5;
+  }
+}
+
+.animate-pulse-live {
+  animation: pulse-live 2s ease-in-out infinite;
+}
+
+/* Slow pulse animation */
+@keyframes pulse-slow {
+  0%, 100% {
+    opacity: 1;
+    transform: scale(1);
+  }
+  50% {
+    opacity: 0.8;
+    transform: scale(1.02);
+  }
+}
+
+.animate-pulse-slow {
+  animation: pulse-slow 2s ease-in-out infinite;
+}
+
+/* Shimmer animation for progress bars */
+@keyframes shimmer {
+  0% {
+    transform: translateX(-100%);
+  }
+  100% {
+    transform: translateX(100%);
+  }
+}
+
+.animate-shimmer {
+  animation: shimmer 2s infinite;
+}
+
+/* Scrollbar utilities */
+.scrollbar-thin::-webkit-scrollbar {
+  width: 4px;
+}
+
+.scrollbar-thumb-void-600::-webkit-scrollbar-thumb {
+  background: rgba(99, 125, 152, 0.5);
+  border-radius: 4px;
+}
+
+.scrollbar-track-void-800::-webkit-scrollbar-track {
+  background: rgba(16, 42, 67, 0.5);
+  border-radius: 4px;
+}
+
+/* Drag and drop zone */
+.dropzone {
+  @apply border-2 border-dashed border-void-600 rounded-2xl p-8;
+  @apply transition-all duration-300;
+}
+
+.dropzone.active {
+  @apply border-coral-500 bg-coral-500/5;
+}
+
+.dropzone:hover {
+  @apply border-void-500 bg-void-900/30;
+}

frontend/src/main.tsx

@@ -0,0 +1,10 @@
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+import App from './App';
+import './index.css';
+
+ReactDOM.createRoot(document.getElementById('root')!).render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>
+);

frontend/src/types/index.ts

@@ -0,0 +1,215 @@
+// Authentication types
+export interface LoginRequest {
+  username: string;
+  password: string;
+}
+
+export interface LoginResponse {
+  access_token: string;
+  token_type: string;
+  username: string;
+}
+
+export interface AuthUser {
+  username: string;
+  authenticated: boolean;
+}
+
+// API Provider types
+export type VideoProvider = 'kling' | 'replicate';
+
+export interface ProviderConfig {
+  id: VideoProvider;
+  name: string;
+  description: string;
+  icon: string;
+  color: 'coral' | 'electric';
+  features: string[];
+  models: ModelOption[];
+}
+
+export interface ModelOption {
+  id: string;
+  name: string;
+  description: string;
+  duration?: string;
+}
+
+// Video generation request types
+export interface VideoGenerationRequest {
+  provider: VideoProvider;
+  prompt: string | VeoSegment;
+  imageUrls?: string[];
+  model?: string;
+  aspectRatio?: string;
+  generationType?: string;
+  seeds?: number;
+  voiceType?: string;
+}
+
+export interface KlingGenerateRequest {
+  prompt: string | VeoSegment;
+  imageUrls?: string[];
+  model?: string;
+  aspectRatio?: string;
+  generationType?: string;
+  seeds?: number;
+  voiceType?: string;
+}
+
+export interface ReplicateGenerateRequest {
+  prompt: string;
+  imageUrl?: string;
+  model?: string;
+  duration?: number;
+  aspectRatio?: string;
+}
+
+// Generation response types
+export interface VideoGenerationResponse {
+  taskId: string;
+  status: 'processing' | 'succeeded' | 'failed';
+}
+
+export interface VideoStatusResponse {
+  status: 'processing' | 'succeeded' | 'failed';
+  output?: string;
+  url?: string;
+  error?: string;
+}
+
+// Segment types for GPT-4o prompt generation
+export interface ContinuityMarkers {
+  start_position: string;
+  end_position: string;
+  start_expression: string;
+  end_expression: string;
+  start_gesture: string;
+  end_gesture: string;
+  location_status: string;
+}
+
+export interface SegmentInfo {
+  segment_number: number;
+  total_segments: number;
+  duration: string;
+  location: string;
+  continuity_markers: ContinuityMarkers;
+}
+
+export interface CharacterDescription {
+  current_state: string;
+  voice_matching: string;
+}
+
+export interface SynchronizedActions {
+  '0:00-0:02': string;
+  '0:02-0:04': string;
+  '0:04-0:06': string;
+  '0:06-0:08': string;
+}
+
+export interface ActionTimeline {
+  dialogue: string;
+  synchronized_actions: SynchronizedActions;
+  micro_expressions: string;
+  breathing_rhythm: string;
+  location_transition: string;
+  continuity_checkpoint: string;
+}
+
+export interface SceneContinuity {
+  environment: string;
+  camera_position: string;
+  camera_movement: string;
+  lighting_state: string;
+  background_elements: string;
+  spatial_relationships: string;
+}
+
+export interface VeoSegment {
+  segment_info: SegmentInfo;
+  character_description: CharacterDescription;
+  scene_continuity: SceneContinuity;
+  action_timeline: ActionTimeline;
+}
+
+export interface SegmentsPayload {
+  segments: VeoSegment[];
+  environment?: string;
+  is_dev_mode?: boolean;
+  max_segments?: number;
+}
+
+// Form inputs
+export interface GenerationInputs {
+  script: string;
+  style: string;
+  voiceType?: string;
+  energyLevel?: string;
+  cameraStyle?: string;
+  narrativeStyle?: string;
+  seedValue?: number;
+  aspectRatio?: string;
+  model?: string;
+}
+
+// Generation state
+export type GenerationStep = 
+  | 'idle'
+  | 'configuring'
+  | 'generating_prompts'
+  | 'generating_video'
+  | 'processing'
+  | 'selecting_frame'
+  | 'continuation_choice'
+  | 'completed'
+  | 'error';
+
+export interface GenerationState {
+  step: GenerationStep;
+  provider: VideoProvider | null;
+  segments: VeoSegment[];
+  currentSegmentIndex: number;
+  generatedVideos: GeneratedVideo[];
+  progress: {
+    current: number;
+    total: number;
+    message: string;
+  };
+  error: string | null;
+  taskId: string | null;
+  retryState: {
+    failedSegmentIndex: number;
+    error: string;
+  } | null;
+}
+
+export interface GeneratedVideo {
+  id: string;
+  url: string;
+  blobUrl?: string;
+  segment?: VeoSegment;
+  duration: number;
+  thumbnails: string[];
+  trimPoint?: number; // Whisper-detected trim point for optimal continuity
+}
+
+// Frame extraction
+export interface ExtractedFrame {
+  timestamp: number;
+  frame: string;
+  label: string;
+}
+
+// Health check
+export interface HealthStatus {
+  status: string;
+  environment: string;
+  is_dev_mode: boolean;
+  max_segments: number | null;
+  kie_api_configured: boolean;
+  gemini_api_configured: boolean;
+  openai_api_configured: boolean;
+}
+

frontend/src/utils/api.ts

@@ -0,0 +1,611 @@
+import type { 
+  VideoStatusResponse, 
+  SegmentsPayload,
+  HealthStatus,
+  ExtractedFrame,
+  LoginRequest,
+  LoginResponse,
+  AuthUser
+} from '@/types';
+
+const API_BASE = import.meta.env.VITE_API_BASE_URL || 'http://localhost:4000';
+
+// Get auth token from localStorage
+function getAuthToken(): string | null {
+  return localStorage.getItem('auth_token');
+}
+
+// Set auth token in localStorage
+export function setAuthToken(token: string): void {
+  localStorage.setItem('auth_token', token);
+}
+
+// Remove auth token from localStorage
+export function removeAuthToken(): void {
+  localStorage.removeItem('auth_token');
+}
+
+// Generic API request handler
+async function apiRequest<T>(
+  path: string, 
+  options: RequestInit = {}
+): Promise<T> {
+  const url = path.startsWith('http') ? path : `${API_BASE}${path}`;
+  const token = getAuthToken();
+  
+  // Normalize headers to a plain object
+  const headers: Record<string, string> = {};
+  
+  // Convert Headers object or array to plain object
+  if (options.headers) {
+    if (options.headers instanceof Headers) {
+      options.headers.forEach((value, key) => {
+        headers[key] = value;
+      });
+    } else if (Array.isArray(options.headers)) {
+      options.headers.forEach(([key, value]) => {
+        headers[key] = value;
+      });
+    } else {
+      Object.assign(headers, options.headers);
+    }
+  }
+  
+  // Add auth token if available
+  if (token) {
+    headers['Authorization'] = `Bearer ${token}`;
+  }
+  
+  const response = await fetch(url, {
+    ...options,
+    headers,
+  });
+
+  if (!response.ok) {
+    // If unauthorized, clear token
+    if (response.status === 401) {
+      removeAuthToken();
+    }
+    
+    let errorMessage = `Request failed with status ${response.status}`;
+    
+    // Try to extract error message from response
+    const contentType = response.headers.get('content-type');
+    const isJson = contentType && contentType.includes('application/json');
+    
+    try {
+      if (isJson) {
+      const errorData = await response.json();
+        // Try multiple common error message fields
+        errorMessage = errorData.detail || 
+                       errorData.message || 
+                       errorData.error || 
+                       (typeof errorData === 'string' ? errorData : errorMessage);
+      } else {
+        const text = await response.text();
+        if (text && text.trim()) {
+          errorMessage = text;
+        } else {
+          // Fall back to default message based on status code
+          if (response.status === 401) {
+            errorMessage = 'Incorrect username or password.';
+          } else if (response.status === 403) {
+            errorMessage = 'Access forbidden.';
+          } else if (response.status === 404) {
+            errorMessage = 'Resource not found.';
+          } else if (response.status >= 500) {
+            errorMessage = 'Server error. Please try again later.';
+          }
+        }
+      }
+    } catch (parseError) {
+      // If parsing fails, use status-based default
+      if (response.status === 401) {
+        errorMessage = 'Incorrect username or password.';
+      } else if (response.status === 403) {
+        errorMessage = 'Access forbidden.';
+      } else if (response.status === 404) {
+        errorMessage = 'Resource not found.';
+      } else if (response.status >= 500) {
+        errorMessage = 'Server error. Please try again later.';
+      }
+    }
+    
+    const error = new Error(errorMessage);
+    console.error('API Error:', {
+      status: response.status,
+      statusText: response.statusText,
+      message: errorMessage,
+      url: url,
+      contentType: contentType
+    });
+    throw error;
+  }
+
+  return response.json();
+}
+
+// Health check
+export async function checkHealth(): Promise<HealthStatus> {
+  return apiRequest<HealthStatus>('/health');
+}
+
+// ==================== AUTHENTICATION ====================
+
+export async function login(credentials: LoginRequest): Promise<LoginResponse> {
+  const response = await apiRequest<LoginResponse>('/api/auth/login', {
+    method: 'POST',
+    headers: {
+      'Content-Type': 'application/json',
+    },
+    body: JSON.stringify(credentials),
+  });
+  
+  // Store token
+  if (response.access_token) {
+    setAuthToken(response.access_token);
+  }
+  
+  return response;
+}
+
+export async function verifyAuth(): Promise<AuthUser> {
+  try {
+    const response = await apiRequest<AuthUser>('/api/auth/verify');
+    return response;
+  } catch {
+    removeAuthToken();
+    return { username: '', authenticated: false };
+  }
+}
+
+export async function getCurrentUser(): Promise<AuthUser> {
+  try {
+    const response = await apiRequest<AuthUser>('/api/auth/me');
+    return response;
+  } catch {
+    removeAuthToken();
+    return { username: '', authenticated: false };
+  }
+}
+
+export function logout(): void {
+  removeAuthToken();
+}
+
+// ==================== KLING/KIE API ====================
+
+export interface KlingGenerateParams {
+  prompt: string | object;
+  imageUrls?: string[];
+  model?: string;
+  aspectRatio?: string;
+  generationType?: string;
+  seeds?: number;
+  voiceType?: string;
+}
+
+export interface KlingGenerateResponse {
+  taskId: string;
+  status: string;
+}
+
+export async function klingGenerate(params: KlingGenerateParams): Promise<KlingGenerateResponse> {
+  return apiRequest<KlingGenerateResponse>('/api/veo/generate', {
+    method: 'POST',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify(params),
+  });
+}
+
+export async function klingExtend(taskId: string, prompt: string | object, seeds?: number, voiceType?: string): Promise<KlingGenerateResponse> {
+  return apiRequest<KlingGenerateResponse>('/api/veo/extend', {
+    method: 'POST',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify({ taskId, prompt, seeds, voiceType }),
+  });
+}
+
+export async function klingGetStatus(taskId: string): Promise<VideoStatusResponse> {
+  return apiRequest<VideoStatusResponse>(`/api/veo/status/${taskId}`);
+}
+
+export function createKlingEventSource(taskId: string): EventSource {
+  return new EventSource(`${API_BASE}/api/veo/events/${taskId}`);
+}
+
+// ==================== REPLICATE API ====================
+
+export interface ReplicateGenerateParams {
+  prompt: string;
+  imageUrl?: string;
+  model?: string;
+  duration?: number;
+  aspectRatio?: string;
+}
+
+export interface ReplicateGenerateResponse {
+  id: string;
+  status: string;
+}
+
+export async function replicateGenerate(params: ReplicateGenerateParams): Promise<ReplicateGenerateResponse> {
+  return apiRequest<ReplicateGenerateResponse>('/api/replicate/generate', {
+    method: 'POST',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify(params),
+  });
+}
+
+export async function replicateGetStatus(predictionId: string): Promise<VideoStatusResponse> {
+  return apiRequest<VideoStatusResponse>(`/api/replicate/status/${predictionId}`);
+}
+
+// Wait for Replicate video completion by polling
+export async function waitForReplicateVideo(
+  predictionId: string, 
+  timeoutMs: number = 600000, // 10 minutes
+  pollIntervalMs: number = 15000 // Poll every 15 seconds (video gen takes 2-5 min)
+): Promise<string> {
+  const startTime = Date.now();
+  
+  while (Date.now() - startTime < timeoutMs) {
+    const status = await replicateGetStatus(predictionId);
+    
+    if (status.status === 'succeeded' && status.url) {
+      return status.url;
+    } else if (status.status === 'failed') {
+      throw new Error(status.error || 'Replicate video generation failed');
+    }
+    
+    // Wait before next poll
+    await new Promise(resolve => setTimeout(resolve, pollIntervalMs));
+  }
+  
+  throw new Error('Replicate video generation timed out');
+}
+
+// ==================== PROMPT GENERATION ====================
+
+export async function generatePrompts(formData: FormData): Promise<SegmentsPayload> {
+  const response = await fetch(`${API_BASE}/api/generate-prompts`, {
+    method: 'POST',
+    body: formData,
+  });
+
+  if (!response.ok) {
+    let errorMessage = 'Failed to generate prompts';
+    try {
+      const errorData = await response.json();
+      errorMessage = errorData.detail || errorMessage;
+    } catch {
+      // Ignore
+    }
+    throw new Error(errorMessage);
+  }
+
+  return response.json();
+}
+
+export async function refinePromptContinuity(
+  segmentPrompt: object, 
+  lastFrameBlob: Blob
+): Promise<{ refined_prompt: object }> {
+  const formData = new FormData();
+  formData.append('segmentPrompt', JSON.stringify(segmentPrompt));
+  formData.append('lastFrame', lastFrameBlob, 'last-frame.jpg');
+
+  return apiRequest<{ refined_prompt: object }>('/api/refine-prompt-continuity', {
+    method: 'POST',
+    body: formData,
+  });
+}
+
+// ==================== IMAGE UPLOAD ====================
+
+export async function uploadImage(file: File): Promise<{ url: string; filename: string }> {
+  const formData = new FormData();
+  formData.append('file', file);
+
+  return apiRequest<{ url: string; filename: string }>('/api/upload-image', {
+    method: 'POST',
+    body: formData,
+  });
+}
+
+// ==================== FRAME EXTRACTION ====================
+
+export interface ExtractFramesParams {
+  video_url: string;
+  script?: string;
+  buffer_time?: number;
+  num_frames?: number;
+  model_size?: string;
+}
+
+export interface ExtractFramesResponse {
+  frames: ExtractedFrame[];
+}
+
+export async function extractFrames(params: ExtractFramesParams): Promise<ExtractFramesResponse> {
+  return apiRequest<ExtractFramesResponse>('/api/extract-frames', {
+    method: 'POST',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify(params),
+  });
+}
+
+// ==================== WHISPER ANALYSIS ====================
+
+export interface WhisperAnalyzeParams {
+  video_url: string;
+  dialogue: string;
+  buffer_time?: number;
+  model_size?: string;
+}
+
+export interface WhisperAnalyzeResponse {
+  success: boolean;
+  last_word_timestamp: number | null;
+  trim_point: number | null;
+  frame_timestamp: number | null;
+  frame_base64: string | null;
+  video_duration: number;
+  transcribed_text: string | null;  // What Whisper actually heard - for prompt refinement
+  error: string | null;
+}
+
+/**
+ * Analyze video with Whisper to find last spoken word and extract frame.
+ * This is the optimized flow that combines Whisper analysis and frame extraction.
+ */
+export async function whisperAnalyzeAndExtract(params: WhisperAnalyzeParams): Promise<WhisperAnalyzeResponse> {
+  return apiRequest<WhisperAnalyzeResponse>('/api/whisper/analyze-and-extract', {
+    method: 'POST',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify(params),
+  });
+}
+
+/**
+ * Refine a segment prompt using the frame AND transcription from the previous segment.
+ * This ensures perfect visual and audio continuity.
+ */
+export async function refinePromptWithContext(
+  segmentPrompt: object,
+  frameFile: File,
+  transcribedDialogue: string,
+  expectedDialogue: string
+): Promise<{ refined_prompt: object; original_prompt: object }> {
+  const formData = new FormData();
+  formData.append('segmentPrompt', JSON.stringify(segmentPrompt));
+  formData.append('lastFrame', frameFile);
+  formData.append('transcribedDialogue', transcribedDialogue);
+  formData.append('expectedDialogue', expectedDialogue);
+  
+  const response = await fetch(`${API_BASE}/api/refine-prompt-continuity`, {
+    method: 'POST',
+    body: formData,
+  });
+  
+  if (!response.ok) {
+    throw new Error(`Failed to refine prompt: ${response.status}`);
+  }
+  
+  return response.json();
+}
+
+/**
+ * Check if Whisper is available on the backend
+ */
+export async function checkWhisperStatus(): Promise<{ available: boolean; message: string }> {
+  return apiRequest<{ available: boolean; message: string }>('/api/whisper/status');
+}
+
+// ==================== VIDEO DOWNLOAD ====================
+
+export async function downloadVideo(url: string): Promise<Blob> {
+  const response = await fetch(`${API_BASE}/api/veo/download?url=${encodeURIComponent(url)}`);
+  
+  if (!response.ok) {
+    throw new Error(`Failed to download video: ${response.status}`);
+  }
+
+  return response.blob();
+}
+
+// ==================== UTILITIES ====================
+
+export async function getVideoDuration(file: File): Promise<number> {
+  return new Promise((resolve, reject) => {
+    const video = document.createElement('video');
+    video.preload = 'metadata';
+    video.src = URL.createObjectURL(file);
+    video.onloadedmetadata = () => {
+      URL.revokeObjectURL(video.src);
+      resolve(video.duration);
+    };
+    video.onerror = () => {
+      URL.revokeObjectURL(video.src);
+      reject(new Error('Failed to load video metadata'));
+    };
+  });
+}
+
+export async function generateThumbnails(file: File, count: number = 5): Promise<string[]> {
+  return new Promise((resolve, reject) => {
+    const video = document.createElement('video');
+    video.preload = 'metadata';
+    video.src = URL.createObjectURL(file);
+    video.muted = true;
+
+    video.onloadedmetadata = async () => {
+      const duration = video.duration;
+      const thumbnails: string[] = [];
+      const canvas = document.createElement('canvas');
+      const ctx = canvas.getContext('2d');
+
+      if (!ctx) {
+        URL.revokeObjectURL(video.src);
+        reject(new Error('Could not get canvas context'));
+        return;
+      }
+
+      // Use video's actual dimensions for proper aspect ratio
+      // Scale down while maintaining aspect ratio (max 400px on longest side)
+      const maxSize = 400;
+      const videoWidth = video.videoWidth || 1080;
+      const videoHeight = video.videoHeight || 1920;
+      const scale = Math.min(maxSize / videoWidth, maxSize / videoHeight);
+      
+      canvas.width = Math.round(videoWidth * scale);
+      canvas.height = Math.round(videoHeight * scale);
+
+      for (let i = 0; i < count; i++) {
+        const time = (duration / count) * i;
+        video.currentTime = time;
+        await new Promise<void>((res) => {
+          video.onseeked = () => res();
+        });
+        ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
+        thumbnails.push(canvas.toDataURL('image/jpeg', 0.85));
+      }
+
+      URL.revokeObjectURL(video.src);
+      resolve(thumbnails);
+    };
+
+    video.onerror = () => {
+      URL.revokeObjectURL(video.src);
+      reject(new Error('Failed to load video'));
+    };
+  });
+}
+
+// Wait for video completion using SSE
+export function waitForKlingVideo(taskId: string, timeoutMs: number = 300000): Promise<string> {
+  return new Promise((resolve, reject) => {
+    const eventSource = createKlingEventSource(taskId);
+    const startTime = Date.now();
+
+    const timeout = setTimeout(() => {
+      eventSource.close();
+      reject(new Error('Video generation timed out'));
+    }, timeoutMs);
+
+    eventSource.onmessage = (event) => {
+      try {
+        const data = JSON.parse(event.data);
+        
+        if (data.status === 'succeeded' && data.url) {
+          clearTimeout(timeout);
+          eventSource.close();
+          resolve(data.url);
+        } else if (data.status === 'failed' || data.code !== undefined && data.code !== 200) {
+          clearTimeout(timeout);
+          eventSource.close();
+          const errorMsg = data.error || data.msg || `Video generation failed (code: ${data.code || 'unknown'})`;
+          reject(new Error(errorMsg));
+        }
+      } catch (err) {
+        console.error('Failed to parse SSE data:', err);
+        // If we can't parse, don't reject immediately - might be a partial message
+      }
+    };
+
+    eventSource.onerror = () => {
+      // If connection error and we've been waiting a while, reject
+      const elapsed = Date.now() - startTime;
+      if (elapsed > 5000) { // Wait at least 5 seconds before rejecting on connection error
+        clearTimeout(timeout);
+        eventSource.close();
+        reject(new Error('SSE connection error - video generation may have failed'));
+      }
+    };
+  });
+}
+
+// Generate video with automatic retry (retries once on failure)
+export async function generateVideoWithRetry(
+  generateFn: () => Promise<{ taskId: string }>,
+  timeoutMs: number = 300000,
+  onRetry?: (attempt: number) => void
+): Promise<string> {
+  let lastError: Error | null = null;
+  
+  for (let attempt = 0; attempt < 2; attempt++) {
+    try {
+      if (attempt > 0) {
+        console.log(`🔄 Retrying video generation (attempt ${attempt + 1}/2)...`);
+        if (onRetry) {
+          onRetry(attempt + 1);
+        }
+      }
+      
+      const result = await generateFn();
+      const videoUrl = await waitForKlingVideo(result.taskId, timeoutMs);
+      return videoUrl;
+    } catch (error) {
+      lastError = error instanceof Error ? error : new Error(String(error));
+      console.error(`❌ Video generation attempt ${attempt + 1} failed:`, lastError.message);
+      
+      // If this was the first attempt, retry once
+      if (attempt === 0) {
+        console.log('⏳ Waiting 2 seconds before retry...');
+        await new Promise(resolve => setTimeout(resolve, 2000)); // Wait 2 seconds before retry
+        continue;
+      }
+      
+      // If both attempts failed, throw the error
+      throw lastError;
+    }
+  }
+  
+  // This should never be reached, but TypeScript needs it
+  throw lastError || new Error('Video generation failed');
+}
+
+// ==================== VIDEO MERGE/EXPORT ====================
+
+export interface ClipMetadata {
+  index: number;
+  startTime: number;
+  endTime: number;
+  type: 'video' | 'image';
+  duration?: number;
+}
+
+// Merge multiple video files into a single video
+export async function mergeVideos(
+  videoBlobs: Blob[],
+  clipMetadata: ClipMetadata[]
+): Promise<Blob> {
+  const formData = new FormData();
+  
+  // Add clip metadata as JSON
+  formData.append('clips_data', JSON.stringify(clipMetadata));
+  
+  // Add video files
+  videoBlobs.forEach((blob, index) => {
+    formData.append('files', blob, `video_${index}.mp4`);
+  });
+  
+  const response = await fetch(`${API_BASE}/api/export/merge`, {
+    method: 'POST',
+    body: formData,
+  });
+  
+  if (!response.ok) {
+    let errorMessage = 'Failed to merge videos';
+    try {
+      const errorData = await response.json();
+      errorMessage = errorData.detail || errorMessage;
+    } catch {
+      // Ignore JSON parse errors
+    }
+    throw new Error(errorMessage);
+  }
+  
+  return response.blob();
+}
+

frontend/src/vite-env.d.ts

@@ -0,0 +1,10 @@
+/// <reference types="vite/client" />
+
+interface ImportMetaEnv {
+  readonly VITE_API_BASE_URL?: string;
+  // Add more env variables as needed
+}
+
+interface ImportMeta {
+  readonly env: ImportMetaEnv;
+}

frontend/tailwind.config.js

@@ -0,0 +1,91 @@
+/** @type {import('tailwindcss').Config} */
+export default {
+  content: [
+    "./index.html",
+    "./src/**/*.{js,ts,jsx,tsx}",
+  ],
+  theme: {
+    extend: {
+      colors: {
+        // Deep ocean-inspired dark theme
+        void: {
+          50: '#f0f4f8',
+          100: '#d9e2ec',
+          200: '#bcccdc',
+          300: '#9fb3c8',
+          400: '#829ab1',
+          500: '#627d98',
+          600: '#486581',
+          700: '#334e68',
+          800: '#243b53',
+          900: '#102a43',
+          950: '#0a1929',
+        },
+        // Electric coral accent
+        coral: {
+          50: '#fff5f5',
+          100: '#ffe3e3',
+          200: '#ffc9c9',
+          300: '#ffa8a8',
+          400: '#ff8787',
+          500: '#ff6b6b',
+          600: '#fa5252',
+          700: '#f03e3e',
+          800: '#e03131',
+          900: '#c92a2a',
+        },
+        // Cyan electric accent
+        electric: {
+          50: '#e3fafc',
+          100: '#c5f6fa',
+          200: '#99e9f2',
+          300: '#66d9e8',
+          400: '#3bc9db',
+          500: '#22b8cf',
+          600: '#15aabf',
+          700: '#1098ad',
+          800: '#0c8599',
+          900: '#0b7285',
+        },
+        // Golden amber for highlights
+        amber: {
+          400: '#fbbf24',
+          500: '#f59e0b',
+          600: '#d97706',
+        },
+      },
+      fontFamily: {
+        display: ['Clash Display', 'system-ui', 'sans-serif'],
+        body: ['Satoshi', 'system-ui', 'sans-serif'],
+        mono: ['JetBrains Mono', 'Menlo', 'monospace'],
+      },
+      backgroundImage: {
+        'gradient-radial': 'radial-gradient(var(--tw-gradient-stops))',
+        'gradient-conic': 'conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))',
+        'mesh-pattern': `url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.03'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E")`,
+      },
+      animation: {
+        'float': 'float 6s ease-in-out infinite',
+        'pulse-glow': 'pulse-glow 2s ease-in-out infinite',
+        'shimmer': 'shimmer 2s linear infinite',
+        'spin-slow': 'spin 3s linear infinite',
+      },
+      keyframes: {
+        float: {
+          '0%, 100%': { transform: 'translateY(0)' },
+          '50%': { transform: 'translateY(-10px)' },
+        },
+        'pulse-glow': {
+          '0%, 100%': { opacity: '1', boxShadow: '0 0 20px rgba(255, 107, 107, 0.5)' },
+          '50%': { opacity: '0.8', boxShadow: '0 0 40px rgba(255, 107, 107, 0.8)' },
+        },
+        shimmer: {
+          '0%': { backgroundPosition: '-200% 0' },
+          '100%': { backgroundPosition: '200% 0' },
+        },
+      },
+    },
+  },
+  plugins: [],
+}
+

frontend/tsconfig.app.json

@@ -0,0 +1,28 @@
+{
+  "compilerOptions": {
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
+    "target": "ES2022",
+    "useDefineForClassFields": true,
+    "lib": ["ES2022", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "types": ["vite/client"],
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "verbatimModuleSyntax": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+    "jsx": "react-jsx",
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "erasableSyntaxOnly": true,
+    "noFallthroughCasesInSwitch": true,
+    "noUncheckedSideEffectImports": true
+  },
+  "include": ["src"]
+}

frontend/tsconfig.json

@@ -0,0 +1,25 @@
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "useDefineForClassFields": true,
+    "lib": ["ES2020", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "skipLibCheck": true,
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
+    "jsx": "react-jsx",
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true,
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["./src/*"]
+    }
+  },
+  "include": ["src"],
+  "references": [{ "path": "./tsconfig.node.json" }]
+}

frontend/tsconfig.node.json

@@ -0,0 +1,10 @@
+{
+  "compilerOptions": {
+    "composite": true,
+    "skipLibCheck": true,
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "allowSyntheticDefaultImports": true
+  },
+  "include": ["vite.config.ts"]
+}

frontend/vite.config.ts

@@ -0,0 +1,21 @@
+import { defineConfig } from 'vite';
+import react from '@vitejs/plugin-react';
+import path from 'path';
+
+export default defineConfig({
+  plugins: [react()],
+  resolve: {
+    alias: {
+      '@': path.resolve(__dirname, './src'),
+    },
+  },
+  server: {
+    port: 3000,
+    proxy: {
+      '/api': {
+        target: 'http://localhost:4000',
+        changeOrigin: true,
+      },
+    },
+  },
+});

main.py

@@ -0,0 +1,180 @@
+"""
+FastAPI Backend for React Video Editor
+Handles video generation, image processing, and API integrations
+"""
+
+from fastapi import FastAPI, HTTPException, Request, Response
+from fastapi.middleware.cors import CORSMiddleware
+from fastapi.responses import StreamingResponse, JSONResponse
+from fastapi.staticfiles import StaticFiles
+from contextlib import asynccontextmanager
+import uvicorn
+import os
+from dotenv import load_dotenv
+
+from api.video_generation import router as video_router
+from api.image_service import router as image_router
+from api.frame_extraction import router as frame_router
+from api.prompt_generation import router as prompt_router
+from api.video_export import router as export_router
+from api.replicate_service import router as replicate_router
+from api.whisper_service import router as whisper_router
+from api.auth import router as auth_router
+from utils.storage import cleanup_old_files
+
+# Load environment variables
+load_dotenv('.env.local')
+
+# Lifespan context manager for startup/shutdown
+@asynccontextmanager
+async def lifespan(app: FastAPI):
+    """Handle startup and shutdown events"""
+    # Startup
+    print("🚀 Starting FastAPI server...")
+    print(f"📁 Storage directory: {os.path.join(os.getcwd(), 'storage')}")
+    
+    # Create storage directory if it doesn't exist
+    os.makedirs('storage/images', exist_ok=True)
+    os.makedirs('storage/videos', exist_ok=True)
+    
+    # Check for API keys
+    kie_api_key = os.getenv('KIE_API_KEY')
+    if not kie_api_key:
+        print("⚠️  Warning: KIE_API_KEY not set. Video generation will fail.")
+        print("   Get your API key at: https://kie.ai/api-key")
+    else:
+        print("✅ KIE_API_KEY configured")
+    
+    gemini_api_key = os.getenv('VITE_GEMINI_API_KEY')
+    if gemini_api_key:
+        print("✅ GEMINI_API_KEY configured")
+    
+    openai_api_key = os.getenv('OPENAI_API_KEY')
+    if openai_api_key:
+        print("✅ OPENAI_API_KEY configured (GPT-4o prompt generation)")
+    
+    replicate_api_token = os.getenv('REPLICATE_API_TOKEN')
+    if replicate_api_token:
+        print("✅ REPLICATE_API_TOKEN configured")
+    else:
+        print("⚠️  Warning: REPLICATE_API_TOKEN not set. Replicate video generation will fail.")
+    
+    # Check environment mode
+    environment = os.getenv('ENVIRONMENT', 'dev').lower()
+    is_dev_mode = environment == 'dev' or environment == 'development'
+    if is_dev_mode:
+        print("🧪 DEV MODE: Segment generation limited to 2 segments")
+    else:
+        print("🚀 PROD MODE: Generating all segments")
+    
+    yield
+    
+    # Shutdown
+    print("🛑 Shutting down FastAPI server...")
+    cleanup_old_files()
+
+# Create FastAPI app
+app = FastAPI(
+    title="React Video Editor API",
+    description="Python backend for video generation and processing",
+    version="1.0.0",
+    lifespan=lifespan
+)
+
+# CORS middleware
+app.add_middleware(
+    CORSMiddleware,
+    allow_origins=["*"],  # In production, specify exact origins
+    allow_credentials=True,
+    allow_methods=["*"],
+    allow_headers=["*"],
+)
+
+# Include routers
+app.include_router(auth_router, prefix="/api")
+app.include_router(video_router, prefix="/api")
+app.include_router(image_router, prefix="/api")
+app.include_router(frame_router, prefix="/api")
+app.include_router(prompt_router, prefix="/api")
+app.include_router(export_router, prefix="/api")
+app.include_router(replicate_router, prefix="/api")
+app.include_router(whisper_router, prefix="/api")
+
+# Health check endpoints (must be before catch-all route)
+@app.get("/health")
+async def health_check():
+    """Health check endpoint"""
+    environment = os.getenv('ENVIRONMENT', 'dev').lower()
+    is_dev_mode = environment == 'dev' or environment == 'development'
+    return {
+        "status": "healthy",
+        "environment": environment,
+        "is_dev_mode": is_dev_mode,
+        "max_segments": 2 if is_dev_mode else None,
+        "kie_api_configured": bool(os.getenv('KIE_API_KEY')),
+        "replicate_api_configured": bool(os.getenv('REPLICATE_API_TOKEN')),
+        "gemini_api_configured": bool(os.getenv('VITE_GEMINI_API_KEY')),
+        "openai_api_configured": bool(os.getenv('OPENAI_API_KEY'))
+    }
+
+# Serve static files (frontend) in production
+frontend_dist_path = os.path.join(os.getcwd(), "frontend", "dist")
+if os.path.exists(frontend_dist_path):
+    # Serve static files
+    app.mount("/assets", StaticFiles(directory=os.path.join(frontend_dist_path, "assets")), name="assets")
+    
+    # Root endpoint - serve frontend or API info
+    @app.get("/")
+    async def root():
+        """Root endpoint - serve frontend in production, API info in dev"""
+        index_path = os.path.join(frontend_dist_path, "index.html")
+        if os.path.exists(index_path):
+            from fastapi.responses import FileResponse
+            return FileResponse(index_path)
+        # Fallback if frontend not built
+        return {
+            "status": "healthy",
+            "service": "React Video Editor API",
+            "version": "1.0.0"
+        }
+    
+    # Serve frontend index.html for all non-API routes
+    @app.get("/{full_path:path}")
+    async def serve_frontend(full_path: str):
+        """Serve frontend for all non-API routes"""
+        # Don't serve frontend for API routes or docs
+        if (full_path.startswith("api") or 
+            full_path.startswith("docs") or 
+            full_path.startswith("redoc") or 
+            full_path.startswith("openapi.json") or
+            full_path == "health"):
+            raise HTTPException(status_code=404, detail="Not found")
+        
+        # Serve index.html for frontend routes
+        index_path = os.path.join(frontend_dist_path, "index.html")
+        if os.path.exists(index_path):
+            from fastapi.responses import FileResponse
+            return FileResponse(index_path)
+        raise HTTPException(status_code=404, detail="Frontend not found")
+else:
+    # Root endpoint when frontend not built
+    @app.get("/")
+    async def root():
+        """Root endpoint - health check"""
+        return {
+            "status": "healthy",
+            "service": "React Video Editor API",
+            "version": "1.0.0"
+        }
+
+if __name__ == "__main__":
+    # Support both SERVER_PORT and PORT (Hugging Face uses PORT)
+    port = int(os.getenv('PORT') or os.getenv('SERVER_PORT', 4000))
+    uvicorn.run(
+        "main:app",
+        host="0.0.0.0",
+        port=port,
+        reload=True,
+        log_level="info"
+    )
+

models/__init__.py

@@ -0,0 +1,2 @@
+# Models package
+