Restoring repo state for deployment

.env.example

@@ -0,0 +1,10 @@
+# Our selected models, replace these with your own choices if you want to modify the models used
+PROMPT_SCENE_GEN_MODEL=groq/llama-3.3-70b-versatile
+PDF_SCENE_GEN_MODEL=gemini/gemini-1.5-flash
+PDF_RETRY_MODEL=gemini/gemini-2.0-flash-exp #Optional, only if you want to retry the PDF generation
+CODE_GEN_MODEL=openrouter/deepseek/deepseek-chat:free
+
+# Use the LiteLLM convention of naming the API keys depending on the models you choose
+GROQ_API_KEY=
+OPENROUTER_API_KEY=
+GEMINI_API_KEY=

.gitignore

@@ -0,0 +1,67 @@
+# 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
+MANIFEST
+
+# Virtual environments
+venv/
+ENV/
+env/
+.venv
+
+# IDE
+.vscode/
+.idea/
+*.swp
+*.swo
+*~
+
+# OS
+.DS_Store
+.DS_Store?
+._*
+.Spotlight-V100
+.Trashes
+ehthumbs.db
+Thumbs.db
+
+# Test output files
+*.mp4
+test_*.py
+
+# Generated files
+scene_*.py
+scaling_*.py
+generated_*.py
+*.log
+
+# Generated directories
+media/
+/jobs/
+jobs_3d/
+
+# Environment variables
+.env
+.env.local
+
+# Project-specific
+packages.txt
+Error_free_videos.zip

DEPLOYMENT.md

@@ -0,0 +1,38 @@
+# Deployment Configuration Guide
+
+## Environment Variables
+
+For a secure production deployment, you must set the following environment variables.
+
+### 1. Frontend (Next.js)
+These variables should be set in your Vercel project settings or `.env.production`.
+
+| Variable | Description | Example Value |
+|----------|-------------|---------------|
+| `NEXTAUTH_URL` | The canonical URL of your site | `https://your-app.com` |
+| `NEXTAUTH_SECRET` | A random string used to hash tokens | `openssl rand -base64 32` |
+| `GOOGLE_CLIENT_ID` | OAuth Client ID from Google Cloud | `123...apps.googleusercontent.com` |
+| `GOOGLE_CLIENT_SECRET` | OAuth Client Secret from Google Cloud | `GOCSPX-...` |
+| `INTERNAL_API_KEY` | **CRITICAL**: Shared secret to talk to Python backend | `long-random-string-shared-with-backend` |
+| `PYTHON_API_URL` | URL of your deployed Python backend | `https://api.your-app.com` |
+| `DATABASE_URL` | Connection string for your production DB (e.g., Postgres) | `postgresql://user:pass@host:5432/db` |
+
+> **Note on Database**: Currently, the app uses SQLite (`file:./dev.db`). For production, you should switch the `provider` in `prisma/schema.prisma` to `postgresql` or `mysql` and use a real database URL.
+
+### 2. Backend (Python / FastAPI)
+These variables should be set in your backend hosting service (e.g., Railway, Render, AWS).
+
+| Variable | Description | Example Value |
+|----------|-------------|---------------|
+| `INTERNAL_API_KEY` | **CRITICAL**: Must match the Frontend key exactly | `long-random-string-shared-with-backend` |
+| `OPENAI_API_KEY` | For generating animation code | `sk-...` |
+| `ELEVENLABS_API_KEY` | For generating voiceovers | `...` |
+| `ANTHROPIC_API_KEY` | (Optional) If using Claude models | `sk-ant-...` |
+| `CODE_GEN_MODEL` | Model to use for code generation | `gpt-4o` or `claude-3-5-sonnet-20240620` |
+
+## Security Checklist
+
+1.  [ ] **Generate a Strong `INTERNAL_API_KEY`**: Use `openssl rand -hex 32` to generate a secure key. Set this on BOTH frontend and backend.
+2.  [ ] **HTTPS Everywhere**: Ensure both your frontend and backend are served over HTTPS.
+3.  [ ] **Database**: Do not use SQLite in production if you have multiple server instances (serverless). Use a managed Postgres database (e.g., Supabase, Neon, Railway).
+4.  [ ] **CORS**: In `api_server.py`, update `allow_origins` to only allow your production frontend domain, not `*` or `localhost`.

Dockerfile

@@ -0,0 +1,45 @@
+FROM python:3.11-slim
+
+# Install system dependencies for Manim and general usage
+RUN apt-get update && apt-get install -y --no-install-recommends \
+    build-essential \
+    ffmpeg \
+    libcairo2-dev \
+    libpango1.0-dev \
+    texlive \
+    texlive-latex-extra \
+    texlive-fonts-recommended \
+    dvisvgm \
+    pkg-config \
+    python3-dev \
+    sudo \
+    && rm -rf /var/lib/apt/lists/*
+
+# Create a non-root user (Hugging Face requirement)
+RUN useradd -m -u 1000 user
+USER user
+ENV HOME=/home/user \
+    PATH=/home/user/.local/bin:$PATH
+
+WORKDIR $HOME/app
+
+# Copy requirements first to leverage Docker cache
+COPY --chown=user requirements.txt .
+
+# Install Python dependencies
+RUN pip install --no-cache-dir -r requirements.txt
+
+# Copy the rest of the application
+COPY --chown=user . .
+
+# Make start script executable
+RUN chmod +x start.sh
+
+# Expose the port (Hugging Face Spaces uses 7860 by default)
+EXPOSE 7860
+
+# Set environment variables
+ENV PYTHONUNBUFFERED=1
+
+# Run the start script
+CMD ["./start.sh"]

LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2025 HyperCluster
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

README.md

@@ -0,0 +1,7 @@
+title: Vidsimplify AI Video Generator
+emoji: 🎬
+colorFrom: red
+colorTo: purple
+sdk: docker
+pinned: false
+app_port: 7860

api_client.py

@@ -0,0 +1,364 @@
+"""
+Python client library for Manim Video Generation API
+"""
+
+import requests
+import time
+from typing import Optional, Dict, Any
+from enum import Enum
+
+
+class QualityLevel(str, Enum):
+    """Video quality levels"""
+    LOW = "low"
+    MEDIUM = "medium"
+    HIGH = "high"
+    ULTRA = "ultra"
+
+
+class JobStatus(str, Enum):
+    """Job status"""
+    PENDING = "pending"
+    GENERATING_CODE = "generating_code"
+    RENDERING = "rendering"
+    COMPLETED = "completed"
+    FAILED = "failed"
+
+
+class ManimVideoClient:
+    """Client for Manim Video Generation API"""
+    
+    def __init__(self, base_url: str = "http://localhost:8000"):
+        """
+        Initialize client
+        
+        Args:
+            base_url: Base URL of the API server
+        """
+        self.base_url = base_url.rstrip('/')
+        self.session = requests.Session()
+    
+    def create_video(
+        self,
+        prompt: str,
+        quality: QualityLevel = QualityLevel.HIGH,
+        scene_name: Optional[str] = None
+    ) -> Dict[str, Any]:
+        """
+        Create a new video generation job
+        
+        Args:
+            prompt: Detailed animation prompt
+            quality: Video quality level
+            scene_name: Optional custom scene name
+        
+        Returns:
+            Job information including job_id
+        
+        Example:
+            >>> client = ManimVideoClient()
+            >>> job = client.create_video(
+            ...     prompt="Explain bubble sort with animations",
+            ...     quality=QualityLevel.HIGH
+            ... )
+            >>> print(job['job_id'])
+        """
+        response = self.session.post(
+            f"{self.base_url}/api/videos",
+            json={
+                "prompt": prompt,
+                "quality": quality.value,
+                "scene_name": scene_name
+            }
+        )
+        response.raise_for_status()
+        return response.json()
+    
+    def get_status(self, job_id: str) -> Dict[str, Any]:
+        """
+        Get job status
+        
+        Args:
+            job_id: Job ID returned from create_video()
+        
+        Returns:
+            Job status information
+        
+        Example:
+            >>> status = client.get_status(job_id)
+            >>> print(status['status'])
+            >>> print(status['progress']['percentage'])
+        """
+        response = self.session.get(f"{self.base_url}/api/jobs/{job_id}")
+        response.raise_for_status()
+        return response.json()
+    
+    def wait_for_completion(
+        self,
+        job_id: str,
+        poll_interval: int = 5,
+        timeout: Optional[int] = None,
+        callback: Optional[callable] = None
+    ) -> Dict[str, Any]:
+        """
+        Wait for job to complete
+        
+        Args:
+            job_id: Job ID
+            poll_interval: Seconds between status checks
+            timeout: Maximum seconds to wait (None = no timeout)
+            callback: Optional function called with status on each poll
+        
+        Returns:
+            Final job status
+        
+        Example:
+            >>> def progress_callback(status):
+            ...     print(f"{status['progress']['percentage']}%: {status['progress']['message']}")
+            >>> 
+            >>> result = client.wait_for_completion(
+            ...     job_id,
+            ...     callback=progress_callback
+            ... )
+        """
+        start_time = time.time()
+        
+        while True:
+            status = self.get_status(job_id)
+            
+            if callback:
+                callback(status)
+            
+            if status['status'] in [JobStatus.COMPLETED, JobStatus.FAILED]:
+                return status
+            
+            if timeout and (time.time() - start_time > timeout):
+                raise TimeoutError(f"Job did not complete within {timeout} seconds")
+            
+            time.sleep(poll_interval)
+    
+    def download_video(self, job_id: str, output_path: str) -> str:
+        """
+        Download completed video
+        
+        Args:
+            job_id: Job ID
+            output_path: Path to save video file
+        
+        Returns:
+            Path to downloaded file
+        
+        Example:
+            >>> client.download_video(job_id, "my_animation.mp4")
+            'my_animation.mp4'
+        """
+        response = self.session.get(
+            f"{self.base_url}/api/videos/{job_id}",
+            stream=True
+        )
+        response.raise_for_status()
+        
+        with open(output_path, 'wb') as f:
+            for chunk in response.iter_content(chunk_size=8192):
+                f.write(chunk)
+        
+        return output_path
+    
+    def list_jobs(self, limit: int = 50) -> Dict[str, Any]:
+        """
+        List all jobs
+        
+        Args:
+            limit: Maximum number of jobs to return
+        
+        Returns:
+            Dictionary with job list
+        
+        Example:
+            >>> jobs = client.list_jobs(limit=10)
+            >>> for job in jobs['jobs']:
+            ...     print(f"{job['job_id']}: {job['status']}")
+        """
+        response = self.session.get(
+            f"{self.base_url}/api/jobs",
+            params={"limit": limit}
+        )
+        response.raise_for_status()
+        return response.json()
+    
+    def delete_job(self, job_id: str) -> Dict[str, Any]:
+        """
+        Delete a job and its files
+        
+        Args:
+            job_id: Job ID
+        
+        Returns:
+            Deletion confirmation
+        
+        Example:
+            >>> client.delete_job(job_id)
+            {'message': 'Job deleted successfully', 'job_id': '...'}
+        """
+        response = self.session.delete(f"{self.base_url}/api/jobs/{job_id}")
+        response.raise_for_status()
+        return response.json()
+    
+    def health_check(self) -> Dict[str, Any]:
+        """
+        Check API health
+        
+        Returns:
+            Health status and statistics
+        
+        Example:
+            >>> health = client.health_check()
+            >>> print(f"Total jobs: {health['jobs']['total']}")
+        """
+        response = self.session.get(f"{self.base_url}/health")
+        response.raise_for_status()
+        return response.json()
+    
+    def generate_and_download(
+        self,
+        prompt: str,
+        output_path: str,
+        quality: QualityLevel = QualityLevel.HIGH,
+        poll_interval: int = 5,
+        progress_callback: Optional[callable] = None
+    ) -> Dict[str, Any]:
+        """
+        Complete workflow: create, wait, and download
+        
+        Args:
+            prompt: Animation prompt
+            output_path: Where to save video
+            quality: Video quality
+            poll_interval: Status check interval
+            progress_callback: Optional progress callback
+        
+        Returns:
+            Final job status
+        
+        Example:
+            >>> def show_progress(status):
+            ...     pct = status['progress']['percentage']
+            ...     msg = status['progress']['message']
+            ...     print(f"[{pct}%] {msg}")
+            >>> 
+            >>> client.generate_and_download(
+            ...     prompt="Explain merge sort",
+            ...     output_path="merge_sort.mp4",
+            ...     progress_callback=show_progress
+            ... )
+        """
+        # Create job
+        job = self.create_video(prompt, quality)
+        job_id = job['job_id']
+        
+        print(f"✓ Job created: {job_id}")
+        
+        # Wait for completion
+        result = self.wait_for_completion(
+            job_id,
+            poll_interval=poll_interval,
+            callback=progress_callback
+        )
+        
+        if result['status'] == JobStatus.COMPLETED:
+            # Download video
+            self.download_video(job_id, output_path)
+            print(f"✓ Video downloaded: {output_path}")
+            return result
+        else:
+            raise Exception(f"Job failed: {result.get('error', 'Unknown error')}")
+
+
+# ============================================================================
+# CLI Tool
+# ============================================================================
+
+def main():
+    """Command-line interface"""
+    import argparse
+    
+    parser = argparse.ArgumentParser(
+        description="Manim Video Generation API Client"
+    )
+    parser.add_argument(
+        "command",
+        choices=["create", "status", "download", "list", "generate"],
+        help="Command to execute"
+    )
+    parser.add_argument("--prompt", help="Animation prompt")
+    parser.add_argument("--job-id", help="Job ID")
+    parser.add_argument("--output", "-o", help="Output file path")
+    parser.add_argument(
+        "--quality",
+        choices=["low", "medium", "high", "ultra"],
+        default="high",
+        help="Video quality"
+    )
+    parser.add_argument(
+        "--url",
+        default="http://localhost:8000",
+        help="API base URL"
+    )
+    
+    args = parser.parse_args()
+    client = ManimVideoClient(args.url)
+    
+    if args.command == "create":
+        if not args.prompt:
+            print("Error: --prompt required")
+            return
+        
+        job = client.create_video(args.prompt, QualityLevel(args.quality))
+        print(f"Job created: {job['job_id']}")
+        print(f"Status: {job['status']}")
+    
+    elif args.command == "status":
+        if not args.job_id:
+            print("Error: --job-id required")
+            return
+        
+        status = client.get_status(args.job_id)
+        print(f"Job ID: {status['job_id']}")
+        print(f"Status: {status['status']}")
+        print(f"Progress: {status['progress']['percentage']}%")
+        print(f"Message: {status['progress']['message']}")
+    
+    elif args.command == "download":
+        if not args.job_id or not args.output:
+            print("Error: --job-id and --output required")
+            return
+        
+        path = client.download_video(args.job_id, args.output)
+        print(f"Downloaded: {path}")
+    
+    elif args.command == "list":
+        jobs = client.list_jobs()
+        print(f"Total jobs: {jobs['total']}")
+        for job in jobs['jobs']:
+            print(f"  {job['job_id']}: {job['status']}")
+    
+    elif args.command == "generate":
+        if not args.prompt or not args.output:
+            print("Error: --prompt and --output required")
+            return
+        
+        def progress(status):
+            pct = status['progress']['percentage']
+            msg = status['progress']['message']
+            print(f"[{pct:3d}%] {msg}")
+        
+        client.generate_and_download(
+            args.prompt,
+            args.output,
+            QualityLevel(args.quality),
+            progress_callback=progress
+        )
+
+
+if __name__ == "__main__":
+    main()

api_server.py

@@ -0,0 +1,811 @@
+"""
+Unified FastAPI Video Generation Server
+Supports text prompts, PDFs, and URLs for all animation categories.
+"""
+
+from fastapi import FastAPI, HTTPException, BackgroundTasks
+from fastapi.responses import FileResponse, JSONResponse
+from pydantic import BaseModel, Field
+from typing import Optional, List, Dict, Any, Literal, Union
+from enum import Enum
+import uuid
+import os
+import json
+import subprocess
+import shutil
+from datetime import datetime
+from pathlib import Path
+import asyncio
+import logging
+import base64
+
+# Load environment variables from .env file
+from dotenv import load_dotenv
+load_dotenv()
+
+from manimator.api.animation_generation import generate_animation_response
+from manimator.utils.code_fixer import CodeFixer
+# from manimator.api.input_processor import process_input
+
+# Configure logging
+logging.basicConfig(
+    level=logging.INFO,
+    format='%(asctime)s - %(name)s - %(levelname)s - %(message)s'
+)
+logger = logging.getLogger("api_server_unified")
+
+# ============================================================================
+# Configuration
+# ============================================================================
+
+class Config:
+    """Application configuration"""
+    BASE_DIR = Path(__file__).parent
+    JOBS_DIR = BASE_DIR / "jobs"
+    VIDEOS_DIR = BASE_DIR / "media" / "videos"
+    MAX_JOB_AGE_DAYS = 7
+    
+    # Ensure directories exist
+    JOBS_DIR.mkdir(exist_ok=True)
+    VIDEOS_DIR.mkdir(parents=True, exist_ok=True)
+
+
+# ============================================================================
+# Models
+# ============================================================================
+
+class JobStatus(str, Enum):
+    """Job status enumeration"""
+    PENDING = "pending"
+    GENERATING_CODE = "generating_code"
+    RENDERING = "rendering"
+    COMPLETED = "completed"
+    FAILED = "failed"
+
+
+class QualityLevel(str, Enum):
+    """Video quality levels"""
+    LOW = "low"       # 480p15
+    MEDIUM = "medium" # 720p30
+    HIGH = "high"     # 1080p60
+    ULTRA = "ultra"   # 4K60
+
+
+class AnimationCategory(str, Enum):
+    """Animation categories"""
+    TECH_SYSTEM = "tech_system"
+    PRODUCT_STARTUP = "product_startup"
+    MATHEMATICAL = "mathematical"
+
+
+QUALITY_FLAGS = {
+    QualityLevel.LOW: "-pql",
+    QualityLevel.MEDIUM: "-pqm",
+    QualityLevel.HIGH: "-pqh",
+    QualityLevel.ULTRA: "-pqk",
+}
+
+
+class VideoRequest(BaseModel):
+    """Request model for video generation"""
+    input_type: Literal["text", "pdf", "url"] = Field(..., description="Type of input")
+    input_data: Union[str, bytes] = Field(..., description="Input data (text prompt, base64 PDF, or URL)")
+    quality: QualityLevel = Field(default=QualityLevel.HIGH, description="Video quality level")
+    category: AnimationCategory = Field(default=AnimationCategory.MATHEMATICAL, description="Animation category")
+    scene_name: Optional[str] = Field(default=None, description="Custom scene class name")
+    
+    class Config:
+        json_schema_extra = {
+            "example": {
+                "input_type": "text",
+                "input_data": "Explain how a distributed system handles requests",
+                "quality": "high",
+                "category": "tech_system"
+            }
+        }
+
+
+class JobResponse(BaseModel):
+    """Response model for job creation"""
+    job_id: str
+    status: JobStatus
+    message: str
+    created_at: str
+
+
+class JobStatusResponse(BaseModel):
+    """Response model for job status"""
+    job_id: str
+    status: JobStatus
+    category: str
+    progress: Dict[str, Any]
+    created_at: str
+    updated_at: str
+    error: Optional[str] = None
+    video_url: Optional[str] = None
+    duration: Optional[float] = None
+
+
+# ============================================================================
+# Job Manager
+# ============================================================================
+
+class JobManager:
+    """Manages video generation jobs"""
+    
+    def __init__(self):
+        self.jobs: Dict[str, Dict] = {}
+        self._load_existing_jobs()
+        self._cleanup_task = None
+    
+    def _load_existing_jobs(self):
+        """Load existing jobs from disk"""
+        for job_file in Config.JOBS_DIR.glob("*.json"):
+            try:
+                with open(job_file) as f:
+                    job_data = json.load(f)
+                    self.jobs[job_data["job_id"]] = job_data
+            except Exception as e:
+                logger.error(f"Error loading job {job_file}: {e}")
+    
+    def create_job(
+        self,
+        input_type: str,
+        input_data: Union[str, bytes],
+        quality: QualityLevel,
+        category: AnimationCategory,
+        scene_name: Optional[str] = None
+    ) -> str:
+        """Create a new job"""
+        job_id = str(uuid.uuid4())
+        
+        if not scene_name:
+            scene_name = f"Scene_{uuid.uuid4().hex[:8]}"
+        
+        job_data = {
+            "job_id": job_id,
+            "status": JobStatus.PENDING,
+            "input_type": input_type,
+            "quality": quality,
+            "category": category.value,
+            "scene_name": scene_name,
+            "created_at": datetime.now().isoformat(),
+            "updated_at": datetime.now().isoformat(),
+            "progress": {
+                "stage": "queued",
+                "percentage": 0,
+                "message": "Job queued for processing"
+            },
+            "error": None,
+            "video_path": None,
+            "code_path": None,
+        }
+        
+        # Store input data (truncate if too long for display)
+        if input_type == "text":
+            job_data["input_preview"] = str(input_data)[:200] + "..." if len(str(input_data)) > 200 else str(input_data)
+        elif input_type == "url":
+            job_data["input_preview"] = str(input_data)
+        else:
+            job_data["input_preview"] = "[PDF file]"
+        
+        self.jobs[job_id] = job_data
+        self._save_job(job_id)
+        return job_id
+    
+    def update_job(self, job_id: str, **kwargs):
+        """Update job data"""
+        if job_id not in self.jobs:
+            return
+        
+        self.jobs[job_id].update(kwargs)
+        self.jobs[job_id]["updated_at"] = datetime.now().isoformat()
+        self._save_job(job_id)
+    
+    def get_job(self, job_id: str) -> Optional[Dict]:
+        """Get job by ID"""
+        return self.jobs.get(job_id)
+    
+    def _save_job(self, job_id: str):
+        """Save job to disk"""
+        # Ensure directory exists
+        Config.JOBS_DIR.mkdir(parents=True, exist_ok=True)
+        job_file = Config.JOBS_DIR / f"{job_id}.json"
+        with open(job_file, 'w') as f:
+            json.dump(self.jobs[job_id], f, indent=2)
+    
+    def list_jobs(self, limit: int = 50) -> List[Dict]:
+        """List recent jobs"""
+        jobs = sorted(
+            self.jobs.values(),
+            key=lambda x: x["created_at"],
+            reverse=True
+        )
+        return jobs[:limit]
+    
+    def start_periodic_cleanup(self):
+        """Start periodic cleanup task (call this after event loop is running)"""
+        if self._cleanup_task is None:
+            self._cleanup_task = asyncio.create_task(self._periodic_cleanup())
+    
+    async def _periodic_cleanup(self):
+        """Periodic cleanup of old jobs and voiceover cache"""
+        import time
+        # Wait a bit before starting cleanup
+        await asyncio.sleep(60)
+        while True:
+            try:
+                await asyncio.sleep(3600)  # Run every hour
+                await self._cleanup_old_jobs()
+                await self._cleanup_old_voiceovers()
+            except Exception as e:
+                logger.warning(f"Periodic cleanup error: {e}")
+    
+    async def _cleanup_old_jobs(self):
+        """Remove old job files and their associated data"""
+        cutoff_date = datetime.now().timestamp() - (Config.MAX_JOB_AGE_DAYS * 24 * 3600)
+        removed_count = 0
+        
+        for job_id, job_data in list(self.jobs.items()):
+            try:
+                job_time = datetime.fromisoformat(job_data["created_at"]).timestamp()
+                if job_time < cutoff_date:
+                    # Remove job file
+                    job_file = Config.JOBS_DIR / f"{job_id}.json"
+                    if job_file.exists():
+                        job_file.unlink()
+                    
+                    # Remove from memory
+                    del self.jobs[job_id]
+                    removed_count += 1
+            except Exception as e:
+                logger.warning(f"Error cleaning up job {job_id[:8]}: {e}")
+        
+        if removed_count > 0:
+            logger.info(f"🧹 Cleaned up {removed_count} old jobs")
+    
+    async def _cleanup_old_voiceovers(self):
+        """Clean up old voiceover cache files (keep recent ones)"""
+        import time
+        try:
+            # Clean both ElevenLabs and gTTS cache
+            for service_dir in ["elevenlabs", "gtts"]:
+                voiceover_dir = Config.BASE_DIR / "media" / "voiceover" / service_dir
+                if not voiceover_dir.exists():
+                    continue
+                
+                # Keep voiceover files from last 7 days
+                cutoff_time = time.time() - (7 * 24 * 3600)
+                removed_count = 0
+                
+                for voice_file in voiceover_dir.glob("*.mp3"):
+                    try:
+                        if voice_file.stat().st_mtime < cutoff_time:
+                            voice_file.unlink()
+                            removed_count += 1
+                    except Exception:
+                        pass
+                
+                if removed_count > 0:
+                    logger.info(f"🧹 Cleaned up {removed_count} old {service_dir} voiceover files")
+        except Exception as e:
+            logger.warning(f"Error cleaning up voiceovers: {e}")
+
+
+# ============================================================================
+# Video Generator
+# ============================================================================
+
+class VideoGenerator:
+    """Handles video generation workflow"""
+    
+    def __init__(self, job_manager: JobManager):
+        self.job_manager = job_manager
+    
+    async def generate_video(self, job_id: str):
+        """Generate video for a job"""
+        job = self.job_manager.get_job(job_id)
+        if not job:
+            return
+        
+        logger.info(f"🎬 Starting video generation for job {job_id[:8]}...")
+        
+        try:
+            # Stage 2: Generate Manim code
+            logger.info(f"🤖 Generating Manim code for job {job_id[:8]}...")
+            self.job_manager.update_job(
+                job_id,
+                status=JobStatus.GENERATING_CODE,
+                progress={
+                    "stage": "generating_code",
+                    "percentage": 30,
+                    "message": "Generating Manim code using AI..."
+                }
+            )
+            
+            # Pass raw input to generation function which now handles processing
+            code = generate_animation_response(
+                input_data=job.get("input_data", ""),
+                input_type=job["input_type"],
+                category=job["category"]
+            )
+            
+            logger.info(f"✅ Code generation complete for job {job_id[:8]}...")
+            
+            # Save code
+            code_file = Config.BASE_DIR / f"scene_{job_id}.py"
+            with open(code_file, 'w') as f:
+                f.write(code)
+            
+            logger.info(f"💾 Code saved to {code_file.name}")
+            
+            # Ensure voiceover directories exist
+            voiceover_dir = Config.BASE_DIR / "media" / "voiceover"
+            (voiceover_dir / "elevenlabs").mkdir(parents=True, exist_ok=True)
+            (voiceover_dir / "gtts").mkdir(parents=True, exist_ok=True)
+            
+            self.job_manager.update_job(
+                job_id,
+                code_path=str(code_file),
+                progress={
+                    "stage": "code_generated",
+                    "percentage": 50,
+                    "message": "Code generated successfully"
+                }
+            )
+            
+            # Stage 3: Render video with Self-Healing Loop
+            fixer = CodeFixer()
+            max_retries = 3
+            video_path = None
+            
+            for attempt in range(max_retries):
+                try:
+                    logger.info(f"🎥 Starting Manim rendering for job {job_id[:8]} (Attempt {attempt+1}/{max_retries})...")
+                    
+                    self.job_manager.update_job(
+                        job_id,
+                        status=JobStatus.RENDERING,
+                        progress={
+                            "stage": "rendering",
+                            "percentage": 60 + (attempt * 5),
+                            "message": f"Rendering video (Attempt {attempt+1})..."
+                        }
+                    )
+                    
+                    video_path = await self._render_video(
+                        code_file,
+                        job["scene_name"],
+                        QualityLevel(job["quality"])
+                    )
+                    
+                    # If successful, break the loop
+                    break
+                    
+                except Exception as e:
+                    error_msg = str(e)
+                    logger.warning(f"⚠️ Rendering failed on attempt {attempt+1}: {error_msg}")
+                    
+                    if attempt < max_retries - 1:
+                        # Try to fix the code
+                        logger.info(f"🔧 Attempting to auto-fix code for job {job_id[:8]}...")
+                        
+                        self.job_manager.update_job(
+                            job_id,
+                            progress={
+                                "stage": "fixing_code",
+                                "percentage": 60 + (attempt * 5),
+                                "message": f"Fixing rendering error..."
+                            }
+                        )
+                        
+                        # Read current code
+                        with open(code_file, 'r') as f:
+                            current_code = f.read()
+                        
+                        # Fix code using LLM
+                        fixed_code = fixer.fix_runtime_error(current_code, error_msg)
+                        
+                        # Save fixed code
+                        with open(code_file, 'w') as f:
+                            f.write(fixed_code)
+                            
+                        logger.info(f"💾 Saved fixed code for job {job_id[:8]}")
+                    else:
+                        # Out of retries, re-raise exception
+                        raise e
+            
+            logger.info(f"✅ Video rendering complete for job {job_id[:8]}...")
+            
+            # Stage 4: Complete
+            self.job_manager.update_job(
+                job_id,
+                status=JobStatus.COMPLETED,
+                video_path=str(video_path),
+                progress={
+                    "stage": "completed",
+                    "percentage": 100,
+                    "message": "Video generation completed successfully!"
+                }
+            )
+            
+            # Stage 5: Cleanup intermediate files in background
+            asyncio.create_task(self._cleanup_intermediate_files(job_id, code_file, video_path))
+            
+        except Exception as e:
+            logger.error(f"❌ Error generating video for job {job_id[:8]}: {str(e)}")
+            self.job_manager.update_job(
+                job_id,
+                status=JobStatus.FAILED,
+                error=str(e),
+                progress={
+                    "stage": "failed",
+                    "percentage": 0,
+                    "message": f"Error: {str(e)}"
+                }
+            )
+    
+    async def _render_video(self, code_file: Path, scene_name: str, quality: QualityLevel) -> Path:
+        """Render Manim scene to video"""
+        quality_flag = QUALITY_FLAGS[quality]
+        
+        # Ensure ALL media directories exist before rendering
+        media_dir = Config.BASE_DIR / "media"
+        voiceover_dir = media_dir / "voiceover" / "elevenlabs"
+        voiceover_dir.mkdir(parents=True, exist_ok=True)
+        
+        # Also create gTTS cache directory in case of fallback
+        gtts_dir = media_dir / "voiceover" / "gtts"
+        gtts_dir.mkdir(parents=True, exist_ok=True)
+        
+        # Create videos directory structure
+        Config.VIDEOS_DIR.mkdir(parents=True, exist_ok=True)
+        
+        cmd = [
+            "manim",
+            quality_flag,
+            "--media_dir",
+            str(Config.BASE_DIR / "media"),
+            str(code_file),
+            scene_name,
+        ]
+        
+        # Set working directory to base dir to ensure relative paths work
+        env = os.environ.copy()
+        # Set MEDIA_DIR as absolute path to help voiceover services find cache directory
+        env["MEDIA_DIR"] = str(media_dir.resolve())
+
+        process = await asyncio.create_subprocess_exec(
+            *cmd,
+            stdout=asyncio.subprocess.PIPE,
+            stderr=asyncio.subprocess.PIPE,
+            cwd=str(Config.BASE_DIR),
+            env=env
+        )
+        
+        stdout, stderr = await process.communicate()
+        
+        if process.returncode != 0:
+            error_output = stderr.decode()[-500:] if stderr else "Unknown error"
+            raise Exception(f"Manim rendering failed: {error_output}")
+        
+        # Find generated video
+        quality_dir = {
+            QualityLevel.LOW: "480p15",
+            QualityLevel.MEDIUM: "720p30",
+            QualityLevel.HIGH: "1080p60",
+            QualityLevel.ULTRA: "2160p60"
+        }[quality]
+        
+        video_dir = Config.VIDEOS_DIR / code_file.stem / quality_dir
+        video_files = list(video_dir.glob("*.mp4"))
+        
+        if not video_files:
+            raise Exception(f"No video file found in {video_dir}")
+        
+        video_path = video_files[0]
+        logger.info(f"📹 Found video: {video_path.name}")
+        
+        return video_path
+    
+    async def _cleanup_intermediate_files(self, job_id: str, code_file: Path, final_video_path: Path):
+        """
+        Clean up intermediate files in background after video is successfully created.
+        Removes: scene code files, partial videos, voiceover files (keeps final video).
+        
+        Args:
+            job_id: Job ID
+            code_file: Path to generated scene code file
+            final_video_path: Path to final rendered video (keep this)
+        """
+        try:
+            logger.info(f"🧹 Starting cleanup for job {job_id[:8]}...")
+            
+            # 1. Remove scene code file
+            if code_file.exists():
+                try:
+                    code_file.unlink()
+                    logger.info(f"   ✅ Removed scene code: {code_file.name}")
+                except Exception as e:
+                    logger.warning(f"   ⚠️  Could not remove scene code: {e}")
+            
+            # 2. Remove partial video files (keep only final video)
+            # Find all video files in the scene directory
+            scene_video_dir = Config.VIDEOS_DIR / code_file.stem
+            if scene_video_dir.exists():
+                # Keep only the final video, remove all other quality versions and partial files
+                final_video_name = final_video_path.name
+                for quality_dir in scene_video_dir.iterdir():
+                    if quality_dir.is_dir():
+                        for video_file in quality_dir.glob("*.mp4"):
+                            # Keep only the final video file
+                            if video_file.name != final_video_name:
+                                try:
+                                    video_file.unlink()
+                                    logger.info(f"   ✅ Removed partial video: {video_file.name}")
+                                except Exception as e:
+                                    logger.warning(f"   ⚠️  Could not remove partial video: {e}")
+                        
+                        # Remove partial movie files directory if exists
+                        partial_dir = quality_dir / "partial_movie_files"
+                        if partial_dir.exists():
+                            try:
+                                shutil.rmtree(partial_dir)
+                                logger.info(f"   ✅ Removed partial movie files directory")
+                            except Exception as e:
+                                logger.warning(f"   ⚠️  Could not remove partial files: {e}")
+            
+            # 3. Remove voiceover files for this job (they're cached, so safe to remove)
+            # Voiceover files are cached by text hash, so we can't easily identify job-specific ones
+            # Instead, we'll clean up old voiceover files periodically (not per-job)
+            # This is handled by a separate cleanup task
+            
+            # 4. Remove any temporary files in media directory for this scene
+            scene_media_dir = Config.BASE_DIR / "media" / "videos" / code_file.stem
+            if scene_media_dir.exists():
+                # Remove text SVGs, images, etc. but keep the final video directory structure
+                for item in scene_media_dir.iterdir():
+                    if item.is_file() and item.suffix in ['.svg', '.png', '.jpg', '.txt', '.srt']:
+                        try:
+                            item.unlink()
+                            logger.info(f"   ✅ Removed temporary file: {item.name}")
+                        except Exception as e:
+                            logger.warning(f"   ⚠️  Could not remove temp file: {e}")
+            
+            logger.info(f"✅ Cleanup completed for job {job_id[:8]}")
+            
+        except Exception as e:
+            # Don't fail the job if cleanup fails
+            logger.warning(f"⚠️  Cleanup error for job {job_id[:8]}: {e}")
+
+
+# ============================================================================
+# FastAPI Application
+# ============================================================================
+
+app = FastAPI(
+    title="Unified Manim Video Generation API",
+    description="Generate educational animation videos from text, PDFs, or URLs",
+    version="2.0.0",
+    docs_url="/docs",
+    redoc_url="/redoc"
+)
+
+from fastapi.middleware.cors import CORSMiddleware
+
+app.add_middleware(
+    CORSMiddleware,
+    allow_origins=["http://localhost:3000", "http://localhost:8000"],
+    allow_credentials=True,
+    allow_methods=["*"],
+    allow_headers=["*"],
+)
+
+# Security
+from fastapi import Security, HTTPException, status
+from fastapi.security.api_key import APIKeyHeader
+
+API_KEY_NAME = "X-API-KEY"
+API_KEY = os.getenv("INTERNAL_API_KEY")
+
+if not API_KEY:
+    logger.warning("⚠️  INTERNAL_API_KEY is not set. API is insecure or will fail auth checks.")
+
+api_key_header = APIKeyHeader(name=API_KEY_NAME, auto_error=True)
+
+async def get_api_key(api_key_header: str = Security(api_key_header)):
+    if not API_KEY:
+        raise HTTPException(
+            status_code=status.HTTP_500_INTERNAL_SERVER_ERROR,
+            detail="Server security configuration error"
+        )
+        
+    if api_key_header != API_KEY:
+        raise HTTPException(
+            status_code=status.HTTP_403_FORBIDDEN,
+            detail="Could not validate credentials"
+        )
+    return api_key_header
+
+# Initialize managers
+job_manager = JobManager()
+video_generator = VideoGenerator(job_manager)
+
+
+@app.on_event("startup")
+async def startup_event():
+    """Startup event - initialize background tasks"""
+    job_manager.start_periodic_cleanup()
+    logger.info("✅ Background cleanup tasks started")
+
+
+# ============================================================================
+# Endpoints
+# ============================================================================
+
+@app.get("/")
+async def root():
+    """API root endpoint"""
+    return {
+        "name": "Unified Manim Video Generation API",
+        "version": "2.0.0",
+        "description": "Supports text prompts, PDFs, and URLs",
+        "categories": ["tech_system", "product_startup", "mathematical"],
+        "input_types": ["text", "pdf", "url"],
+        "endpoints": {
+            "docs": "/docs",
+            "create_video": "POST /api/videos",
+            "get_status": "GET /api/jobs/{job_id}",
+            "download_video": "GET /api/videos/{job_id}",
+            "list_jobs": "GET /api/jobs"
+        }
+    }
+
+
+@app.post("/api/videos", response_model=JobResponse)
+async def create_video(request: VideoRequest, background_tasks: BackgroundTasks):
+    """
+    Create a new video generation job
+    
+    Supports three input types:
+    - text: Plain text prompt
+    - pdf: Base64 encoded PDF file
+    - url: URL to scrape content from
+    """
+    # Store input data in job
+    input_data = request.input_data
+    
+    # Create job
+    job_id = job_manager.create_job(
+        input_type=request.input_type,
+        input_data=input_data,
+        quality=request.quality,
+        category=request.category,
+        scene_name=request.scene_name
+    )
+    
+    # Store full input data for processing
+    job_manager.jobs[job_id]["input_data"] = input_data
+    
+    logger.info(f"📝 New job created: {job_id} (type: {request.input_type}, category: {request.category})")
+    
+    # Start generation in background
+    background_tasks.add_task(video_generator.generate_video, job_id)
+    
+    return JobResponse(
+        job_id=job_id,
+        status=JobStatus.PENDING,
+        message="Job created successfully. Video generation started.",
+        created_at=datetime.now().isoformat()
+    )
+
+
+@app.get("/api/jobs/{job_id}", response_model=JobStatusResponse)
+async def get_job_status(job_id: str):
+    """Get the status of a video generation job"""
+    job = job_manager.get_job(job_id)
+    
+    if not job:
+        raise HTTPException(status_code=404, detail="Job not found")
+    
+    video_url = None
+    duration = None
+    
+    if job["status"] == JobStatus.COMPLETED and job.get("video_path"):
+        video_url = f"/api/videos/{job_id}"
+        
+        # Get video duration if available
+        try:
+            video_path = Path(job["video_path"])
+            if video_path.exists():
+                result = subprocess.run(
+                    ["ffprobe", "-v", "error", "-show_entries", "format=duration",
+                     "-of", "default=noprint_wrappers=1:nokey=1", str(video_path)],
+                    capture_output=True,
+                    text=True
+                )
+                duration = float(result.stdout.strip())
+        except:
+            pass
+    
+    return JobStatusResponse(
+        job_id=job_id,
+        status=job["status"],
+        category=job["category"],
+        progress=job["progress"],
+        created_at=job["created_at"],
+        updated_at=job["updated_at"],
+        error=job.get("error"),
+        video_url=video_url,
+        duration=duration
+    )
+
+
+@app.get("/api/videos/{job_id}")
+async def download_video(job_id: str):
+    """Download the generated video file"""
+    job = job_manager.get_job(job_id)
+    
+    if not job:
+        raise HTTPException(status_code=404, detail="Job not found")
+    
+    if job["status"] != JobStatus.COMPLETED:
+        raise HTTPException(
+            status_code=400,
+            detail=f"Video not ready. Status: {job['status']}"
+        )
+    
+    video_path = Path(job["video_path"])
+    if not video_path.exists():
+        raise HTTPException(status_code=404, detail="Video file not found")
+    
+    return FileResponse(
+        video_path,
+        media_type="video/mp4",
+        filename=f"animation_{job_id[:8]}.mp4"
+    )
+
+
+@app.get("/api/jobs")
+async def list_jobs(limit: int = 50):
+    """List recent jobs"""
+    jobs = job_manager.list_jobs(limit)
+    return {"jobs": jobs, "total": len(jobs)}
+
+
+@app.get("/health")
+async def health_check():
+    """Health check endpoint"""
+    return {
+        "status": "healthy",
+        "version": "2.0.0",
+        "jobs": {
+            "total": len(job_manager.jobs),
+            "pending": sum(1 for j in job_manager.jobs.values() if j["status"] == JobStatus.PENDING),
+            "processing": sum(1 for j in job_manager.jobs.values() if j["status"] in [JobStatus.GENERATING_CODE, JobStatus.RENDERING]),
+            "completed": sum(1 for j in job_manager.jobs.values() if j["status"] == JobStatus.COMPLETED),
+            "failed": sum(1 for j in job_manager.jobs.values() if j["status"] == JobStatus.FAILED)
+        }
+    }
+
+
+# ============================================================================
+# Main
+# ============================================================================
+
+if __name__ == "__main__":
+    import uvicorn
+    
+    print("🚀 Starting Unified Manim Video Generation API Server...")
+    print("📚 API Documentation: http://localhost:8000/docs")
+    print("🔍 ReDoc Documentation: http://localhost:8000/redoc")
+    print("✨ Supports: Text, PDF, and URL inputs")
+    print("🎨 Categories: Tech System, Product Startup, Mathematical")
+    
+    uvicorn.run(
+        "api_server:app",
+        host="0.0.0.0",
+        port=8003,
+        reload=False,
+        log_level="info"
+    )

docs/IMPLEMENTATION_COMPLETE.md

@@ -0,0 +1,162 @@
+# Implementation Complete ✅
+
+All phases of the enhanced video generation system have been implemented.
+
+## What's New
+
+### 1. **Unified Input Support**
+- ✅ Text prompts
+- ✅ PDF files (base64 encoded)
+- ✅ URL scraping (blogs, documentation, etc.)
+
+### 2. **Category-Specific Visual Themes**
+- ✅ **Tech System**: Dark blue background (#0a0e27), professional diagrams
+- ✅ **Product Startup**: White background (#ffffff), modern gradients
+- ✅ **Research/Mathematical**: Dark background (#1e1e1e), educational style
+
+### 3. **Robust Code Validation & Auto-Fix**
+- ✅ Pre-render syntax validation
+- ✅ Import checking
+- ✅ Structure validation
+- ✅ Auto-fix common issues
+- ✅ Retry with fallback models
+
+### 4. **Unified API Server**
+- ✅ Single endpoint for all input types
+- ✅ Async job processing
+- ✅ Progress tracking
+- ✅ Error handling
+
+## New Files Created
+
+### Core Components
+- `manimator/services/web_scraper.py` - Web content scraping
+- `manimator/api/input_processor.py` - Unified input handler
+- `manimator/utils/visual_themes.py` - Theme configurations
+- `manimator/utils/theme_injector.py` - Theme code injection
+- `manimator/utils/code_validator.py` - Code validation
+- `manimator/utils/code_fixer.py` - Auto-fix functionality
+- `manimator/utils/validation_pipeline.py` - Complete validation pipeline
+- `api_server_unified.py` - New unified API server
+
+### Modified Files
+- `manimator/api/scene_description.py` - Added URL processing
+- `manimator/api/animation_generation.py` - Added validation & retry logic
+- `manimator/utils/system_prompts.py` - Enhanced with theme instructions
+- `pyproject.toml` - Added new dependencies
+
+## Dependencies Added
+
+```toml
+beautifulsoup4 = "^4.12.0"
+requests = "^2.31.0"
+readability-lxml = "^0.8.1"
+```
+
+## How to Use
+
+### Start the Unified API Server
+
+```bash
+python api_server_unified.py
+```
+
+Server runs on `http://localhost:8000`
+
+### API Endpoints
+
+#### Create Video
+```bash
+POST /api/videos
+{
+    "input_type": "text|pdf|url",
+    "input_data": "...",
+    "quality": "low|medium|high|ultra",
+    "category": "tech_system|product_startup|mathematical"
+}
+```
+
+#### Check Job Status
+```bash
+GET /api/jobs/{job_id}
+```
+
+#### Download Video
+```bash
+GET /api/videos/{job_id}
+```
+
+### Example Requests
+
+**Text Input:**
+```json
+{
+    "input_type": "text",
+    "input_data": "Explain how a distributed system handles requests",
+    "category": "tech_system",
+    "quality": "high"
+}
+```
+
+**URL Input:**
+```json
+{
+    "input_type": "url",
+    "input_data": "https://example.com/blog/post",
+    "category": "product_startup",
+    "quality": "medium"
+}
+```
+
+**PDF Input:**
+```json
+{
+    "input_type": "pdf",
+    "input_data": "base64_encoded_pdf_string",
+    "category": "mathematical",
+    "quality": "high"
+}
+```
+
+## Features
+
+### Visual Themes
+Each category has distinct visual styling:
+- **Tech**: Dark professional backgrounds, architecture diagrams
+- **Product**: Light modern backgrounds, UI elements, gradients
+- **Research**: Dark educational backgrounds, mathematical equations
+
+### Error Handling
+- Automatic code validation before rendering
+- Auto-fix for common issues (missing imports, undefined colors, etc.)
+- Retry with fallback models if generation fails
+- Detailed error messages
+
+### Input Processing
+- **Text**: Direct prompt processing
+- **PDF**: Base64 decoding and content extraction
+- **URL**: Web scraping with content extraction
+
+## Next Steps
+
+1. Install new dependencies:
+   ```bash
+   poetry install
+   ```
+
+2. Test the unified server:
+   ```bash
+   python api_server_unified.py
+   ```
+
+3. Try different input types and categories
+
+4. Monitor job status and video generation
+
+## Notes
+
+- The unified server replaces the need for separate 2D/3D servers
+- All categories use the same code generation pipeline with different themes
+- Web scraping respects robots.txt and handles authentication errors gracefully
+- Code validation prevents most rendering failures
+

docs/IMPLEMENTATION_PLAN.md

@@ -0,0 +1,293 @@
+# Implementation Plan: Enhanced Video Generation System
+
+## Phase 1: Unified Input Processor
+
+### 1.1 Create Web Content Scraper
+**File**: `manimator/utils/web_scraper.py`
+- Use `requests` + `beautifulsoup4` for HTML parsing
+- Extract main content, remove navigation/ads
+- Support: blogs, documentation sites, Medium, Dev.to, etc.
+- Handle authentication-required pages (return error with clear message)
+- Extract text content and structure (headings, paragraphs, code blocks)
+- Convert to structured format similar to PDF processing
+
+**Dependencies to add**:
+```python
+beautifulsoup4>=4.12.0
+requests>=2.31.0
+readability-lxml>=0.8.1  # For cleaner content extraction
+```
+
+### 1.2 Unified Input Handler
+**File**: `manimator/api/input_processor.py`
+- Single entry point: `process_input(input_type, input_data, category)`
+- Input types: `text`, `pdf`, `url`
+- Route to appropriate processor:
+  - Text → `process_prompt_scene()`
+  - PDF → `process_pdf_prompt()`
+  - URL → new `process_url_content()`
+- Return standardized scene description format
+
+### 1.3 URL Content Processor
+**File**: `manimator/api/scene_description.py` (extend existing)
+- Function: `process_url_content(url: str) -> str`
+- Scrape web content
+- Extract main text (similar to PDF processing)
+- Generate scene description using LLM with web content context
+- Handle errors: invalid URLs, access denied, parsing failures
+
+---
+
+## Phase 2: Category-Specific Visual Themes
+
+### 2.1 Theme Configuration System
+**File**: `manimator/utils/visual_themes.py`
+- Define theme configs for each category:
+  ```python
+  TECH_THEME = {
+      "background_color": "#0a0e27",  # Dark blue
+      "accent_colors": [BLUE, GREEN, ORANGE, RED, PURPLE],
+      "text_color": WHITE,
+      "component_style": "rounded_rectangles",
+      "animation_style": "professional",
+      "voice_id": "Adam"
+  }
+  
+  PRODUCT_THEME = {
+      "background_color": "#ffffff",  # White/light
+      "accent_colors": [ORANGE, BLUE, PURPLE, GREEN],
+      "text_color": "#1a1a1a",
+      "component_style": "modern_gradients",
+      "animation_style": "engaging",
+      "voice_id": "Bella"
+  }
+  
+  RESEARCH_THEME = {
+      "background_color": "#1e1e1e",  # Dark
+      "accent_colors": [BLUE, GREEN, YELLOW, RED],
+      "text_color": WHITE,
+      "component_style": "mathematical",
+      "animation_style": "educational",
+      "voice_id": "Rachel"
+  }
+  ```
+
+### 2.2 Theme Injection into System Prompts
+**File**: `manimator/utils/system_prompts.py` (modify)
+- Update `get_system_prompt(category)` to include theme instructions
+- Add theme-specific code snippets to each prompt:
+  - Tech: Dark background setup, component colors
+  - Product: Light background, gradient examples
+  - Research: Dark background, equation styling
+- Include background setup code in each prompt template
+
+### 2.3 Background Setup Code Generator
+**File**: `manimator/utils/theme_injector.py`
+- Function: `inject_theme_setup(code: str, category: str) -> str`
+- Parse generated code
+- Insert background setup at start of `construct()` method:
+  ```python
+  # Tech theme
+  self.camera.background_color = "#0a0e27"
+  
+  # Product theme  
+  self.camera.background_color = "#ffffff"
+  
+  # Research theme
+  self.camera.background_color = "#1e1e1e"
+  ```
+- Ensure theme colors are used consistently
+
+---
+
+## Phase 3: Enhanced Code Validation & Error Handling
+
+### 3.1 Pre-Render Code Validator
+**File**: `manimator/utils/code_validator.py`
+- Function: `validate_code(code: str) -> Tuple[bool, List[str]]`
+- Checks:
+  - Valid Python syntax (use `ast.parse()`)
+  - Required imports present (`from manim import *`, `VoiceoverScene`, `ElevenLabsService`)
+  - Scene class inherits from `VoiceoverScene`
+  - `construct()` method exists
+  - Voiceover service initialized
+  - No undefined variables/colors
+  - No overlapping object warnings (spatial analysis)
+- Return: (is_valid, list_of_errors)
+
+### 3.2 Code Fixer
+**File**: `manimator/utils/code_fixer.py`
+- Function: `auto_fix_code(code: str, errors: List[str]) -> str`
+- Auto-fixes:
+  - Missing imports (add if not present)
+  - Undefined colors (use existing `fix_undefined_colors()`)
+  - Missing voiceover setup (inject if missing)
+  - Syntax errors (try to fix common issues)
+- Use existing `code_postprocessor.py` functions
+- Chain fixes until valid or max attempts
+
+### 3.3 Retry Logic with Model Fallback
+**File**: `manimator/api/animation_generation.py` (modify)
+- Enhanced `generate_animation_response()`:
+  - Try generation with primary model
+  - Validate code
+  - If invalid, try auto-fix
+  - If still invalid, retry with different model (fallback)
+  - Max 3 attempts total
+  - Return best valid code or raise clear error
+
+### 3.4 Render Error Handler
+**File**: `manimator/utils/schema.py` (modify `ManimProcessor`)
+- Enhanced `render_scene()`:
+  - Capture full error output
+  - Parse common Manim errors:
+    - LaTeX errors → suggest fixes
+    - Import errors → auto-add imports
+    - Scene not found → validate class name
+  - Return detailed error messages
+  - Attempt auto-fix and re-render if possible
+
+---
+
+## Phase 4: Unified API Server
+
+### 4.1 New Unified API Server
+**File**: `api_server_unified.py`
+- Single server handling all input types and categories
+- Endpoints:
+  - `POST /api/videos` - Create video (text/PDF/URL)
+  - `GET /api/jobs/{job_id}` - Check status
+  - `GET /api/videos/{job_id}` - Download video
+  - `GET /api/jobs` - List jobs
+- Request model:
+  ```python
+  class VideoRequest(BaseModel):
+      input_type: Literal["text", "pdf", "url"]
+      input_data: str  # text prompt, PDF bytes (base64), or URL
+      category: Literal["tech_system", "product_startup", "mathematical"]
+      quality: QualityLevel
+      scene_name: Optional[str] = None
+  ```
+
+### 4.2 Input Router
+**File**: `manimator/api/input_router.py`
+- Route based on `input_type`:
+  - `text` → `process_prompt_scene()`
+  - `pdf` → `process_pdf_prompt()` (decode base64)
+  - `url` → `process_url_content()`
+- All return scene description → pass to `generate_animation_response()`
+
+### 4.3 Job Manager Enhancement
+**File**: `api_server_unified.py` (extend existing JobManager)
+- Track input type and category
+- Store theme used
+- Better error messages with category context
+
+---
+
+## Phase 5: System Prompts Enhancement
+
+### 5.1 Category-Specific Prompt Templates
+**File**: `manimator/utils/system_prompts.py` (enhance existing)
+- **Tech System Prompt**: 
+  - Emphasize architecture diagrams
+  - Component-based visuals
+  - Dark background setup
+  - Professional color scheme
+  - Data flow animations
+  
+- **Product Startup Prompt**:
+  - Modern UI elements
+  - Gradient backgrounds
+  - Light/colorful theme
+  - Feature showcases
+  - Statistics displays
+  
+- **Research/Mathematical Prompt**:
+  - Equation-heavy
+  - Dark background
+  - Step-by-step proofs
+  - Graph visualizations
+  - Educational pacing
+
+### 5.2 Few-Shot Examples Update
+**File**: `manimator/few_shot/few_shot_prompts.py`
+- Add category-specific examples:
+  - Tech: System architecture example
+  - Product: Feature demo example
+  - Research: Mathematical proof example
+- Include theme setup in examples
+
+---
+
+## Phase 6: Testing & Validation Pipeline
+
+### 6.1 Code Validation Pipeline
+**File**: `manimator/utils/validation_pipeline.py`
+- Pre-render checks:
+  1. Syntax validation
+  2. Import validation
+  3. Structure validation
+  4. Theme compliance
+  5. Auto-fix attempts
+- Post-render checks:
+  1. Video file exists
+  2. Video duration > 0
+  3. Video is playable
+
+### 6.2 Error Recovery
+- If validation fails → auto-fix → re-validate
+- If auto-fix fails → retry generation with different model
+- If all fails → return detailed error to user
+
+---
+
+## Implementation Order
+
+1. **Week 1**: Phase 1 (Input Processor) + Phase 2 (Themes)
+2. **Week 2**: Phase 3 (Validation) + Phase 5 (Prompts)
+3. **Week 3**: Phase 4 (Unified API) + Phase 6 (Testing)
+
+---
+
+## File Structure Changes
+
+```
+manimator/
+├── api/
+│   ├── animation_generation.py (existing, enhance)
+│   ├── scene_description.py (existing, extend)
+│   ├── input_processor.py (NEW)
+│   └── input_router.py (NEW)
+├── utils/
+│   ├── code_postprocessor.py (existing)
+│   ├── code_validator.py (NEW)
+│   ├── code_fixer.py (NEW)
+│   ├── visual_themes.py (NEW)
+│   ├── theme_injector.py (NEW)
+│   └── validation_pipeline.py (NEW)
+└── services/
+    └── web_scraper.py (NEW)
+
+api_server_unified.py (NEW - main server)
+```
+
+---
+
+## Dependencies to Add
+
+```toml
+beautifulsoup4 = "^4.12.0"
+requests = "^2.31.0"
+readability-lxml = "^0.8.1"
+```
+
+---
+
+## Key Success Metrics
+
+1. **Reliability**: < 5% code generation failures
+2. **Visual Differentiation**: Clear visual distinction between categories
+3. **Error Recovery**: 80%+ of errors auto-fixed
+4. **Input Support**: All 3 input types working (text/PDF/URL)
+

ensure_rpc.sql

@@ -0,0 +1,33 @@
+create or replace function public.handle_user_login(
+  user_email text,
+  user_full_name text,
+  user_avatar_url text
+)
+returns void
+language plpgsql
+security definer
+as $$
+declare
+  current_user_id uuid;
+begin
+  current_user_id := auth.uid();
+  if current_user_id is null then
+    raise exception 'Not authenticated';
+  end if;
+
+  insert into public.users (id, email, full_name, avatar_url, credits)
+  values (
+    current_user_id,
+    user_email,
+    user_full_name,
+    user_avatar_url,
+    5
+  )
+  on conflict (id) do update set
+    email = excluded.email,
+    full_name = excluded.full_name,
+    avatar_url = excluded.avatar_url;
+end;
+$$;
+
+grant execute on function public.handle_user_login to authenticated;

fix_columns_and_trigger.sql

@@ -0,0 +1,52 @@
+-- 1. Add missing columns if they don't exist
+DO $$
+BEGIN
+    IF NOT EXISTS (SELECT 1 FROM information_schema.columns WHERE table_name = 'users' AND column_name = 'full_name') THEN
+        ALTER TABLE public.users ADD COLUMN full_name text;
+    END IF;
+
+    IF NOT EXISTS (SELECT 1 FROM information_schema.columns WHERE table_name = 'users' AND column_name = 'avatar_url') THEN
+        ALTER TABLE public.users ADD COLUMN avatar_url text;
+    END IF;
+
+    IF NOT EXISTS (SELECT 1 FROM information_schema.columns WHERE table_name = 'users' AND column_name = 'credits') THEN
+        ALTER TABLE public.users ADD COLUMN credits integer default 5;
+    END IF;
+END $$;
+
+-- 2. Create the Trigger Function (Updated to be safe)
+create or replace function public.handle_new_user()
+returns trigger as $$
+begin
+  insert into public.users (id, email, full_name, avatar_url, credits)
+  values (
+    new.id,
+    new.email,
+    new.raw_user_meta_data->>'full_name',
+    new.raw_user_meta_data->>'avatar_url',
+    5
+  )
+  ON CONFLICT (id) DO UPDATE SET
+    email = EXCLUDED.email,
+    full_name = EXCLUDED.full_name,
+    avatar_url = EXCLUDED.avatar_url;
+  return new;
+end;
+$$ language plpgsql security definer;
+
+-- 3. Create the Trigger
+drop trigger if exists on_auth_user_created on auth.users;
+create trigger on_auth_user_created
+  after insert on auth.users
+  for each row execute procedure public.handle_new_user();
+
+-- 4. Backfill existing users
+insert into public.users (id, email, full_name, avatar_url, credits)
+select 
+    id, 
+    email, 
+    raw_user_meta_data->>'full_name', 
+    raw_user_meta_data->>'avatar_url', 
+    5
+from auth.users
+where id not in (select id from public.users);

fix_rls.sql

@@ -0,0 +1,24 @@
+-- Enable RLS
+ALTER TABLE public.users ENABLE ROW LEVEL SECURITY;
+
+-- Allow users to insert their own profile
+CREATE POLICY "Users can insert their own profile" 
+ON public.users 
+FOR INSERT 
+WITH CHECK (auth.uid() = id);
+
+-- Allow users to view their own profile
+CREATE POLICY "Users can view their own profile" 
+ON public.users 
+FOR SELECT 
+USING (auth.uid() = id);
+
+-- Allow users to update their own profile
+CREATE POLICY "Users can update their own profile" 
+ON public.users 
+FOR UPDATE 
+USING (auth.uid() = id);
+
+-- Grant access to authenticated users
+GRANT ALL ON public.users TO authenticated;
+GRANT ALL ON public.users TO service_role;

frontend/.env.example

@@ -0,0 +1,14 @@
+# Google Authentication
+GOOGLE_CLIENT_ID=your_google_client_id_here
+GOOGLE_CLIENT_SECRET=your_google_client_secret_here
+NEXTAUTH_URL=http://localhost:3000
+NEXTAUTH_SECRET=generate_a_random_string_here
+
+# Internal Security
+INTERNAL_API_KEY=secure-internal-key-123
+
+# Database (Supabase / Postgres)
+# Connect to port 6543 (Transaction Pooler) for DATABASE_URL
+DATABASE_URL="postgresql://postgres.[project-ref]:[password]@aws-0-[region].pooler.supabase.com:6543/postgres?pgbouncer=true"
+# Connect to port 5432 (Session) for DIRECT_URL (Used for migrations)
+DIRECT_URL="postgresql://postgres.[project-ref]:[password]@aws-0-[region].supabase.co:5432/postgres"

frontend/.gitignore

@@ -0,0 +1,30 @@
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+.pnpm-debug.log*
+
+# local env files
+.env*.local
+
+# vercel
+.vercel

frontend/README.md

@@ -0,0 +1,35 @@
+# VidSimplify Frontend
+
+This is the Next.js frontend for the VidSimplify video generation platform.
+
+## 🚀 Getting Started
+
+1.  **Install Dependencies**:
+    ```bash
+    npm install
+    ```
+
+2.  **Run Development Server**:
+    ```bash
+    npm run dev
+    ```
+
+3.  **Open in Browser**:
+    Navigate to [http://localhost:3000](http://localhost:3000).
+
+## 🏗️ Architecture
+
+-   **Framework**: Next.js 14 (App Router)
+-   **Styling**: Tailwind CSS
+-   **Icons**: Lucide React
+-   **Animations**: Framer Motion
+-   **API Client**: `src/lib/api.ts` connects to the Python backend at `http://localhost:8000`.
+
+## 📄 Pages
+
+-   `/` - Landing page with features and demo.
+-   `/app` - Main application for generating videos.
+
+## 🔧 Configuration
+
+The API URL is configured in `src/lib/api.ts`. Default is `http://localhost:8000`.

frontend/eslint.config.mjs

@@ -0,0 +1,18 @@
+import { defineConfig, globalIgnores } from "eslint/config";
+import nextVitals from "eslint-config-next/core-web-vitals";
+import nextTs from "eslint-config-next/typescript";
+
+const eslintConfig = defineConfig([
+  ...nextVitals,
+  ...nextTs,
+  // Override default ignores of eslint-config-next.
+  globalIgnores([
+    // Default ignores of eslint-config-next:
+    ".next/**",
+    "out/**",
+    "build/**",
+    "next-env.d.ts",
+  ]),
+]);
+
+export default eslintConfig;

frontend/next-env.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="next" />
+/// <reference types="next/image-types/global" />
+
+// NOTE: This file should not be edited
+// see https://nextjs.org/docs/app/building-your-application/configuring/typescript for more information.

frontend/next.config.mjs

@@ -0,0 +1,17 @@
+/** @type {import('next').NextConfig} */
+const nextConfig = {
+    images: {
+        remotePatterns: [
+            {
+                protocol: 'https',
+                hostname: 'lh3.googleusercontent.com',
+            },
+            {
+                protocol: 'https',
+                hostname: 'googleusercontent.com',
+            }
+        ],
+    },
+};
+
+export default nextConfig;

frontend/package.json

@@ -0,0 +1,39 @@
+{
+  "name": "frontend",
+  "version": "0.1.0",
+  "private": true,
+  "scripts": {
+    "dev": "next dev",
+    "build": "next build",
+    "start": "next start",
+    "lint": "eslint"
+  },
+  "dependencies": {
+    "@radix-ui/react-avatar": "^1.1.11",
+    "@radix-ui/react-dropdown-menu": "^2.1.16",
+    "@radix-ui/react-slot": "^1.2.4",
+    "@radix-ui/react-tabs": "^1.1.13",
+    "@supabase/auth-helpers-nextjs": "^0.15.0",
+    "@supabase/ssr": "^0.8.0",
+    "@supabase/supabase-js": "^2.86.0",
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
+    "framer-motion": "^12.23.24",
+    "lucide-react": "^0.554.0",
+    "next": "^14.2.3",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "tailwind-merge": "^3.4.0"
+  },
+  "devDependencies": {
+    "@tailwindcss/postcss": "^4",
+    "@types/node": "^20",
+    "@types/react": "^18.3.27",
+    "@types/react-dom": "^18.3.7",
+    "babel-plugin-react-compiler": "1.0.0",
+    "eslint": "^9",
+    "eslint-config-next": "16.0.3",
+    "tailwindcss": "^4",
+    "typescript": "^5"
+  }
+}

frontend/postcss.config.mjs

@@ -0,0 +1,7 @@
+const config = {
+  plugins: {
+    "@tailwindcss/postcss": {},
+  },
+};
+
+export default config;

frontend/public/robots.txt

@@ -0,0 +1,4 @@
+User-agent: *
+Allow: /
+Disallow: /app/
+Disallow: /api/

frontend/src/app/api-docs/page.tsx

@@ -0,0 +1,166 @@
+"use client";
+
+import { Navbar } from "@/components/landing/Navbar";
+import { Button } from "@/components/ui/button";
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
+import { Check, Copy, Terminal, Play, BarChart3, Coins } from "lucide-react";
+
+export default function ApiDocs() {
+    return (
+        <main className="min-h-screen bg-slate-950">
+            <Navbar />
+
+            <div className="pt-24 pb-16 px-4 sm:px-6 lg:px-8 max-w-7xl mx-auto">
+                <div className="text-center mb-16">
+                    <h1 className="text-4xl font-bold text-white mb-4">VidSimplify API</h1>
+                    <p className="text-xl text-slate-400 max-w-2xl mx-auto">
+                        Integrate precision animation generation directly into your product.
+                        Simple, RESTful, and scalable.
+                    </p>
+                </div>
+
+                <div className="grid lg:grid-cols-3 gap-8">
+                    {/* Main Documentation Area */}
+                    <div className="lg:col-span-2 space-y-8">
+                        <Card className="bg-slate-900 border-slate-800">
+                            <CardHeader className="p-4 sm:p-6">
+                                <CardTitle className="text-white flex items-center gap-2">
+                                    <Terminal className="h-5 w-5 text-blue-400" />
+                                    Quick Start
+                                </CardTitle>
+                                <CardDescription className="text-slate-400">
+                                    Generate your first video in 3 steps
+                                </CardDescription>
+                            </CardHeader>
+                            <CardContent className="p-4 sm:p-6">
+                                <Tabs defaultValue="python" className="w-full">
+                                    <TabsList className="bg-slate-950 border border-slate-800 mb-4">
+                                        <TabsTrigger value="python">Python</TabsTrigger>
+                                        <TabsTrigger value="curl">cURL</TabsTrigger>
+                                        <TabsTrigger value="node">Node.js</TabsTrigger>
+                                    </TabsList>
+
+                                    <TabsContent value="python" className="space-y-4">
+                                        <div className="bg-slate-950 p-4 rounded-lg border border-slate-800 font-mono text-sm text-slate-300 overflow-x-auto">
+                                            <div className="flex justify-between items-start mb-2">
+                                                <span className="text-slate-500"># 1. Create a video job</span>
+                                                <Copy className="h-4 w-4 text-slate-600 cursor-pointer hover:text-white" />
+                                            </div>
+                                            <pre className="text-blue-300">import <span className="text-white">requests</span></pre>
+                                            <pre className="mt-2">
+                                                {`response = requests.post(
+  "https://api.vidsimplify.com/v1/videos",
+  headers={"Authorization": "Bearer YOUR_API_KEY"},
+  json={
+    "prompt": "Explain database sharding",
+    "category": "tech_system",
+    "duration_minutes": 5
+  }
+)
+
+job_id = response.json()["job_id"]
+print(f"Job started: {job_id}")`}
+                                            </pre>
+                                        </div>
+                                    </TabsContent>
+
+                                    <TabsContent value="curl">
+                                        <div className="bg-slate-950 p-4 rounded-lg border border-slate-800 font-mono text-sm text-slate-300 overflow-x-auto">
+                                            <pre>
+                                                {`curl -X POST https://api.vidsimplify.com/v1/videos \\
+  -H "Authorization: Bearer YOUR_API_KEY" \\
+  -H "Content-Type: application/json" \\
+  -d '{
+    "prompt": "Explain database sharding",
+    "category": "tech_system"
+  }'`}
+                                            </pre>
+                                        </div>
+                                    </TabsContent>
+                                </Tabs>
+                            </CardContent>
+                        </Card>
+
+                        <Card className="bg-slate-900 border-slate-800">
+                            <CardHeader className="p-4 sm:p-6">
+                                <CardTitle className="text-white">Endpoints</CardTitle>
+                            </CardHeader>
+                            <CardContent className="space-y-4 p-4 sm:p-6">
+                                {[
+                                    { method: "POST", path: "/v1/videos", desc: "Create a new video generation job" },
+                                    { method: "GET", path: "/v1/jobs/{job_id}", desc: "Check generation status and progress" },
+                                    { method: "GET", path: "/v1/videos/{video_id}/download", desc: "Get secure download URL" },
+                                    { method: "GET", path: "/v1/usage", desc: "Get current billing period usage" }
+                                ].map((ep, i) => (
+                                    <div key={i} className="flex flex-col md:flex-row md:items-center justify-between p-3 rounded bg-slate-950/50 border border-slate-800/50 gap-2 md:gap-0">
+                                        <div className="flex items-center gap-3">
+                                            <span className={`px-2 py-1 rounded text-xs font-bold ${ep.method === "POST" ? "bg-blue-900/30 text-blue-400" : "bg-green-900/30 text-green-400"
+                                                }`}>
+                                                {ep.method}
+                                            </span>
+                                            <span className="font-mono text-sm text-slate-300 break-all">{ep.path}</span>
+                                        </div>
+                                        <span className="text-sm text-slate-500">{ep.desc}</span>
+                                    </div>
+                                ))}
+                            </CardContent>
+                        </Card>
+                    </div>
+
+                    {/* Sidebar / Dashboard Simulation */}
+                    <div className="space-y-6">
+                        <Card className="bg-slate-900 border-slate-800">
+                            <CardHeader>
+                                <CardTitle className="text-white flex items-center gap-2">
+                                    <BarChart3 className="h-5 w-5 text-green-400" />
+                                    Usage & Cost
+                                </CardTitle>
+                            </CardHeader>
+                            <CardContent>
+                                <div className="space-y-6">
+                                    <div>
+                                        <div className="flex justify-between text-sm mb-2">
+                                            <span className="text-slate-400">API Calls</span>
+                                            <span className="text-white font-medium">8,432 / 10,000</span>
+                                        </div>
+                                        <div className="h-2 bg-slate-800 rounded-full overflow-hidden">
+                                            <div className="h-full w-[84%] bg-blue-500"></div>
+                                        </div>
+                                    </div>
+
+                                    <div>
+                                        <div className="flex justify-between text-sm mb-2">
+                                            <span className="text-slate-400">Video Minutes</span>
+                                            <span className="text-white font-medium">450 / 500</span>
+                                        </div>
+                                        <div className="h-2 bg-slate-800 rounded-full overflow-hidden">
+                                            <div className="h-full w-[90%] bg-purple-500"></div>
+                                        </div>
+                                    </div>
+
+                                    <div className="pt-4 border-t border-slate-800">
+                                        <div className="flex justify-between items-center">
+                                            <span className="text-slate-400">Current Bill</span>
+                                            <span className="text-2xl font-bold text-white">$45.00</span>
+                                        </div>
+                                    </div>
+                                </div>
+                            </CardContent>
+                        </Card>
+
+                        <div className="bg-gradient-to-br from-blue-900/20 to-violet-900/20 border border-blue-500/20 rounded-xl p-6">
+                            <h3 className="text-lg font-semibold text-white mb-2">Enterprise Plan</h3>
+                            <p className="text-sm text-slate-400 mb-4">
+                                Need higher limits or dedicated rendering clusters?
+                            </p>
+                            <Button className="w-full bg-white text-slate-900 hover:bg-slate-200">
+                                Contact Sales
+                            </Button>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </main>
+    );
+}

frontend/src/app/api/auth/sync/route.ts

@@ -0,0 +1,98 @@
+import { createServerClient, type CookieOptions } from '@supabase/ssr'
+import { cookies } from 'next/headers'
+import { NextResponse } from 'next/server'
+
+export async function POST() {
+    console.log("\n🔄 === SYNC API CALLED ===");
+    const cookieStore = cookies()
+
+    // Debug: Log all cookies to see if auth token is present
+    const allCookies = cookieStore.getAll().map(c => c.name);
+    console.log("Cookies received:", allCookies);
+
+    // Create authenticated Supabase client
+    const supabase = createServerClient(
+        process.env.NEXT_PUBLIC_SUPABASE_URL!,
+        process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!,
+        {
+            cookies: {
+                get(name: string) {
+                    return cookieStore.get(name)?.value
+                },
+                set(name: string, value: string, options: CookieOptions) {
+                    try {
+                        cookieStore.set({ name, value, ...options })
+                    } catch (error) {
+                        // Route handlers can't set cookies in some Next.js versions/contexts, 
+                        // but we only need to READ them for auth here.
+                    }
+                },
+                remove(name: string, options: CookieOptions) {
+                    try {
+                        cookieStore.delete({ name, ...options })
+                    } catch (error) {
+                        // Ignore
+                    }
+                },
+            },
+        }
+    )
+
+    // Get current user
+    console.log("Getting current user...");
+    const { data: { user }, error: authError } = await supabase.auth.getUser()
+
+    if (authError || !user) {
+        console.error("❌ Not authenticated:", authError?.message);
+        return NextResponse.json({ error: 'Not authenticated', details: authError?.message }, { status: 401 })
+    }
+
+    console.log("✅ User authenticated:", user.id);
+
+    try {
+        // Check if user exists
+        console.log("Checking if user exists in DB...");
+        const { data: existingUser, error: fetchError } = await supabase
+            .from('users')
+            .select('id')
+            .eq('id', user.id)
+            .single()
+
+        console.log("Fetch result:", { existingUser, fetchError });
+
+        if (!existingUser) {
+            console.log(`🔄 User ${user.id} not found. Inserting...`)
+
+            const insertData = {
+                id: user.id,
+                email: user.email,
+                full_name: user.user_metadata.full_name || null,
+                avatar_url: user.user_metadata.avatar_url || null,
+                credits: 5
+            };
+
+            console.log("Insert data:", insertData);
+
+            // Insert user using the AUTHENTICATED client (acting as the user)
+            const { data: insertResult, error: insertError } = await supabase
+                .from('users')
+                .insert(insertData)
+                .select()
+
+            if (insertError) {
+                console.error('❌ Sync insert error:', insertError)
+                return NextResponse.json({ error: insertError.message }, { status: 500 })
+            }
+
+            console.log("✅ User created successfully:", insertResult);
+            return NextResponse.json({ status: 'created', user: insertResult })
+        }
+
+        console.log("✅ User already exists");
+        return NextResponse.json({ status: 'exists' })
+
+    } catch (err) {
+        console.error('❌ Sync error:', err)
+        return NextResponse.json({ error: 'Internal Server Error' }, { status: 500 })
+    }
+}

frontend/src/app/api/generate/route.ts

@@ -0,0 +1,149 @@
+
+import { NextResponse } from "next/server";
+import { createServerClient, type CookieOptions } from '@supabase/ssr'
+import { cookies } from "next/headers";
+import { supabase as supabaseAdmin } from "@/lib/supabase";
+
+const PYTHON_API_URL = process.env.PYTHON_API_URL || "http://127.0.0.1:8000";
+
+const SHOWCASE_KEYWORDS = [
+    "database sharding",
+    "kafka",
+    "transformers",
+    "quantum entanglement",
+    "netflix",
+    "black hole",
+    "sorting algorithms",
+    "uber",
+    "quicksort",
+    "bubble sort"
+];
+
+export async function POST(req: Request) {
+    try {
+        // Get request body first to check for demo mode
+        const body = await req.json();
+        const { input_data, input_type, category, quality } = body;
+
+        // Check for showcase prompt (Demo Mode) - Bypass Auth and Credits
+        const lowerInput = (input_data || "").toLowerCase();
+        const isShowcase = SHOWCASE_KEYWORDS.some(keyword => lowerInput.includes(keyword));
+
+        if (isShowcase) {
+            console.log("🎨 Demo Mode activated for prompt:", input_data);
+
+            // Return a fake job ID encoded with timestamp to track progress
+            const timestamp = Date.now();
+            return NextResponse.json({
+                job_id: `demo-${timestamp}`,
+                status: "pending",
+                message: "Job started (Demo)"
+            });
+        }
+
+        const cookieStore = cookies() // Removed await for Next.js 14 compatibility
+
+        // Create authenticated Supabase client
+        const supabase = createServerClient(
+            process.env.NEXT_PUBLIC_SUPABASE_URL!,
+            process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!,
+            {
+                cookies: {
+                    getAll() {
+                        return cookieStore.getAll()
+                    },
+                    setAll(cookiesToSet) {
+                        cookiesToSet.forEach(({ name, value, options }) => {
+                            cookieStore.set(name, value, options)
+                        })
+                    },
+                },
+            }
+        )
+
+        // Get current user
+        const { data: { user }, error: authError } = await supabase.auth.getUser()
+
+        if (authError || !user) {
+            return NextResponse.json(
+                { error: "Unauthorized" },
+                { status: 401 }
+            );
+        }
+
+        // Check credits
+        const { data: userData, error: userError } = await supabaseAdmin
+            .from("users")
+            .select("credits")
+            .eq("id", user.id)
+            .single();
+
+        if (userError || !userData) {
+            return NextResponse.json(
+                { error: "User not found" },
+                { status: 404 }
+            );
+        }
+
+        if (userData.credits < 1) {
+            return NextResponse.json(
+                { error: "Insufficient credits" },
+                { status: 402 }
+            );
+        }
+
+        // Real Generation Flow
+        // Deduct credit
+        const { error: updateError } = await supabaseAdmin
+            .from("users")
+            .update({ credits: userData.credits - 1 })
+            .eq("id", user.id);
+
+        if (updateError) {
+            return NextResponse.json(
+                { error: "Failed to deduct credits" },
+                { status: 500 }
+            );
+        }
+
+        // Call Python API
+        const response = await fetch(`${PYTHON_API_URL}/api/generate`, {
+            method: "POST",
+            headers: {
+                "Content-Type": "application/json",
+                "X-API-Key": process.env.INTERNAL_API_KEY || "",
+            },
+            body: JSON.stringify({
+                input_data,
+                input_type,
+                category,
+                quality,
+                user_id: user.id
+            }),
+        });
+
+        if (!response.ok) {
+            // Refund credit on failure
+            await supabaseAdmin
+                .from("users")
+                .update({ credits: userData.credits })
+                .eq("id", user.id);
+
+            const error = await response.json();
+            return NextResponse.json(
+                { error: error.detail || "Generation failed" },
+                { status: response.status }
+            );
+        }
+
+        const data = await response.json();
+        return NextResponse.json(data);
+
+    } catch (error) {
+        console.error("Generate error:", error);
+        return NextResponse.json(
+            { error: "Internal server error" },
+            { status: 500 }
+        );
+    }
+}

frontend/src/app/api/jobs/[id]/route.ts

@@ -0,0 +1,77 @@
+import { NextResponse } from "next/server";
+
+const PYTHON_API_URL = process.env.PYTHON_API_URL || "http://127.0.0.1:8000";
+const DEMO_VIDEO_URL = "https://storage.googleapis.com/vidsimplify/GeneratedScene.mp4";
+
+export async function GET(
+    req: Request,
+    { params }: { params: { id: string } }
+) {
+    const jobId = params.id;
+
+    // Handle Demo Jobs
+    if (jobId.startsWith("demo-")) {
+        const timestamp = parseInt(jobId.split("-")[1]);
+        const now = Date.now();
+        const elapsed = (now - timestamp) / 1000; // seconds
+
+        if (elapsed < 3) {
+            return NextResponse.json({
+                job_id: jobId,
+                status: "pending",
+                progress: { percentage: 10, message: "Initializing system..." },
+                created_at: new Date(timestamp).toISOString()
+            });
+        } else if (elapsed < 6) {
+            return NextResponse.json({
+                job_id: jobId,
+                status: "generating_code",
+                progress: { percentage: 40, message: "Generating Manim script..." },
+                created_at: new Date(timestamp).toISOString()
+            });
+        } else if (elapsed < 10) {
+            return NextResponse.json({
+                job_id: jobId,
+                status: "rendering",
+                progress: { percentage: 70, message: "Rendering animation frames..." },
+                created_at: new Date(timestamp).toISOString()
+            });
+        } else if (elapsed < 14) {
+             return NextResponse.json({
+                job_id: jobId,
+                status: "rendering",
+                progress: { percentage: 90, message: "Finalizing video..." },
+                created_at: new Date(timestamp).toISOString()
+            });
+        } else {
+            return NextResponse.json({
+                job_id: jobId,
+                status: "completed",
+                progress: { percentage: 100, message: "Completed" },
+                output_url: DEMO_VIDEO_URL,
+                created_at: new Date(timestamp).toISOString()
+            });
+        }
+    }
+
+    // Handle Real Jobs - Proxy to Python Backend
+    try {
+        const response = await fetch(`${PYTHON_API_URL}/api/jobs/${jobId}`);
+        
+        if (!response.ok) {
+            return NextResponse.json(
+                { error: "Failed to fetch job status" },
+                { status: response.status }
+            );
+        }
+
+        const data = await response.json();
+        return NextResponse.json(data);
+    } catch (error) {
+        console.error("Proxy error:", error);
+        return NextResponse.json(
+            { error: "Internal server error" },
+            { status: 500 }
+        );
+    }
+}

frontend/src/app/api/videos/[id]/route.ts

@@ -0,0 +1,44 @@
+import { NextResponse } from "next/server";
+
+const PYTHON_API_URL = process.env.PYTHON_API_URL || "http://127.0.0.1:8000";
+const DEMO_VIDEO_URL = "https://storage.googleapis.com/vidsimplify/GeneratedScene.mp4";
+
+export async function GET(
+    req: Request,
+    { params }: { params: { id: string } }
+) {
+    const jobId = params.id;
+
+    // Handle Demo Jobs
+    if (jobId.startsWith("demo-")) {
+        return NextResponse.redirect(DEMO_VIDEO_URL);
+    }
+
+    // Handle Real Jobs - Proxy to Python Backend
+    try {
+        const response = await fetch(`${PYTHON_API_URL}/api/videos/${jobId}`);
+        
+        if (!response.ok) {
+            return NextResponse.json(
+                { error: "Failed to fetch video" },
+                { status: response.status }
+            );
+        }
+
+        // Forward the video content
+        const blob = await response.blob();
+        const headers = new Headers(response.headers);
+        
+        return new NextResponse(blob, {
+            status: 200,
+            headers: headers
+        });
+
+    } catch (error) {
+        console.error("Proxy error:", error);
+        return NextResponse.json(
+            { error: "Internal server error" },
+            { status: 500 }
+        );
+    }
+}

frontend/src/app/app/page.tsx

@@ -0,0 +1,12 @@
+import { Suspense } from "react";
+import { VideoGenerator } from "@/components/app/VideoGenerator";
+
+export const dynamic = "force-dynamic";
+
+export default function AppPage() {
+    return (
+        <Suspense fallback={<div className="flex items-center justify-center h-screen bg-slate-950 text-slate-400">Loading...</div>}>
+            <VideoGenerator />
+        </Suspense>
+    );
+}

frontend/src/app/auth/callback/route.ts

@@ -0,0 +1,99 @@
+import { createServerClient, type CookieOptions } from '@supabase/ssr'
+import { createClient } from '@supabase/supabase-js'
+import { cookies } from 'next/headers'
+import { NextResponse } from 'next/server'
+
+export async function GET(request: Request) {
+    console.log("\n=== AUTH CALLBACK START ===");
+    const { searchParams, origin } = new URL(request.url)
+    const code = searchParams.get('code')
+    const next = searchParams.get('next') ?? '/'
+
+    console.log("Code present:", !!code);
+    console.log("Redirect target:", next);
+
+    if (code) {
+        const cookieStore = await cookies()
+
+        const supabase = createServerClient(
+            process.env.NEXT_PUBLIC_SUPABASE_URL!,
+            process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!,
+            {
+                cookies: {
+                    getAll() {
+                        return cookieStore.getAll()
+                    },
+                    setAll(cookiesToSet) {
+                        cookiesToSet.forEach(({ name, value, options }) => {
+                            cookieStore.set(name, value, options)
+                        })
+                    },
+                },
+            }
+        )
+
+        console.log("Exchanging code for session...");
+        const { data: { session }, error } = await supabase.auth.exchangeCodeForSession(code)
+
+        if (error) {
+            console.error('❌ Auth exchange error:', error)
+            return NextResponse.redirect(`${origin}/auth/error?error=${encodeURIComponent(error.message)}`)
+        }
+
+        if (session?.user) {
+            console.log("✅ Auth successful. User ID:", session.user.id);
+            console.log("User email:", session.user.email);
+
+            // SYNC USER TO DATABASE
+            console.log("Checking if user exists in DB...");
+
+            // Use the authenticated supabase client (has the session)
+            const { data: existingUser, error: fetchError } = await supabase
+                .from('users')
+                .select('id')
+                .eq('id', session.user.id)
+                .single();
+
+            console.log("Fetch result:", { existingUser, fetchError });
+
+            if (fetchError && fetchError.code !== 'PGRST116') {
+                console.error("❌ Error checking user existence:", fetchError);
+            }
+
+            if (!existingUser) {
+                console.log("🔄 User not found in DB. Attempting insert...");
+
+                const insertData = {
+                    id: session.user.id,
+                    email: session.user.email,
+                    full_name: session.user.user_metadata.full_name || null,
+                    avatar_url: session.user.user_metadata.avatar_url || null,
+                    credits: 5
+                };
+
+                console.log("Insert data:", insertData);
+
+                const { data: insertResult, error: insertError } = await supabase
+                    .from('users')
+                    .insert(insertData)
+                    .select();
+
+                if (insertError) {
+                    console.error("❌ INSERT FAILED:", insertError);
+                    console.error("Error code:", insertError.code);
+                    console.error("Error message:", insertError.message);
+                    console.error("Error details:", insertError.details);
+                    console.error("Error hint:", insertError.hint);
+                } else {
+                    console.log("✅ Successfully inserted user:", insertResult);
+                }
+            } else {
+                console.log("✅ User already exists in DB");
+            }
+        }
+    }
+
+    console.log("Redirecting to:", `${origin}${next}`);
+    console.log("=== AUTH CALLBACK END ===\n");
+    return NextResponse.redirect(`${origin}${next}`)
+}

frontend/src/app/billing/page.tsx

@@ -0,0 +1,157 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import { supabaseClient } from "@/lib/supabase-client";
+import { Button } from "@/components/ui/button";
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
+import { Loader2, CreditCard, Zap, CheckCircle, AlertCircle } from "lucide-react";
+import { useRouter } from "next/navigation";
+import Link from "next/link";
+
+export default function BillingPage() {
+    const [user, setUser] = useState<any>(null);
+    const [credits, setCredits] = useState(0);
+    const [loading, setLoading] = useState(true);
+    const router = useRouter();
+    const supabase = supabaseClient;
+
+    useEffect(() => {
+        const getData = async () => {
+            const { data: { user } } = await supabase.auth.getUser();
+            if (!user) {
+                router.push("/auth/signin");
+                return;
+            }
+            setUser(user);
+
+            // Fetch user credits only
+            const { data: userData } = await supabase
+                .from("users")
+                .select("credits")
+                .eq("id", user.id)
+                .single();
+
+            setCredits(userData?.credits ?? 0);
+            setLoading(false);
+        };
+        getData();
+    }, [supabase, router]);
+
+    if (loading) {
+        return (
+            <div className="flex h-screen items-center justify-center bg-slate-950">
+                <Loader2 className="h-8 w-8 animate-spin text-blue-500" />
+            </div>
+        );
+    }
+
+    // Static plan info for now
+    const plan = {
+        name: "Free",
+        price: "$0",
+        features: [
+            "5 video credits per month",
+            "720p video quality",
+            "Standard generation speed"
+        ]
+    };
+
+    return (
+        <div className="min-h-screen bg-slate-950 text-slate-200 py-12 px-4 sm:px-6 lg:px-8">
+            <div className="max-w-4xl mx-auto space-y-8">
+                <div>
+                    <h1 className="text-3xl font-bold text-white">Billing & Usage</h1>
+                    <p className="text-slate-400 mt-2">Manage your subscription and view credit usage.</p>
+                </div>
+
+                <div className="grid gap-6 md:grid-cols-2">
+                    {/* Current Plan */}
+                    <Card className="bg-slate-900 border-slate-800">
+                        <CardHeader>
+                            <CardTitle className="text-white flex items-center gap-2">
+                                <CreditCard className="h-5 w-5 text-blue-500" />
+                                Current Plan
+                            </CardTitle>
+                            <CardDescription className="text-slate-400">
+                                You are currently on the <span className="text-white font-medium">{plan.name} Tier</span>.
+                            </CardDescription>
+                        </CardHeader>
+                        <CardContent className="space-y-6">
+                            <div className="flex items-center justify-between p-4 bg-slate-950/50 rounded-lg border border-slate-800">
+                                <div>
+                                    <p className="text-sm font-medium text-slate-300">{plan.name} Plan</p>
+                                    <p className="text-2xl font-bold text-white">{plan.price}<span className="text-sm text-slate-500 font-normal">/month</span></p>
+                                </div>
+                                <div className="h-2 w-2 rounded-full bg-green-500 animate-pulse" />
+                            </div>
+
+                            <div className="space-y-2">
+                                {plan.features.map((feature: string) => (
+                                    <div key={feature} className="flex items-center gap-2 text-sm text-slate-300">
+                                        <CheckCircle className="h-4 w-4 text-green-500" />
+                                        <span>{feature}</span>
+                                    </div>
+                                ))}
+                            </div>
+
+                            <Button asChild className="w-full bg-gradient-to-r from-blue-600 to-violet-600 hover:from-blue-500 hover:to-violet-500 text-white border-0">
+                                <Link href="/pricing">Upgrade Plan</Link>
+                            </Button>
+                        </CardContent>
+                    </Card>
+
+                    {/* Credit Usage */}
+                    <Card className="bg-slate-900 border-slate-800">
+                        <CardHeader>
+                            <CardTitle className="text-white flex items-center gap-2">
+                                <Zap className="h-5 w-5 text-yellow-500" />
+                                Credit Usage
+                            </CardTitle>
+                            <CardDescription className="text-slate-400">
+                                Your monthly generation credits.
+                            </CardDescription>
+                        </CardHeader>
+                        <CardContent className="space-y-6">
+                            <div className="space-y-2">
+                                <div className="flex justify-between text-sm">
+                                    <span className="text-slate-300">Credits Remaining</span>
+                                    <span className="text-white font-mono">{credits} / 5</span>
+                                </div>
+                                <div className="h-3 bg-slate-950 rounded-full overflow-hidden border border-slate-800">
+                                    <div
+                                        className="h-full bg-gradient-to-r from-blue-500 to-violet-500 transition-all duration-500"
+                                        style={{ width: `${Math.min((credits / 5) * 100, 100)}%` }}
+                                    />
+                                </div>
+                                <p className="text-xs text-slate-500 pt-1">
+                                    Credits reset on the 1st of every month.
+                                </p>
+                            </div>
+
+                            {credits === 0 && (
+                                <div className="p-3 bg-red-500/10 border border-red-500/20 rounded-lg flex gap-3">
+                                    <AlertCircle className="h-5 w-5 text-red-400 shrink-0" />
+                                    <p className="text-sm text-red-300">
+                                        You have run out of credits. Upgrade your plan to continue generating videos.
+                                    </p>
+                                </div>
+                            )}
+                        </CardContent>
+                    </Card>
+                </div>
+
+                {/* Invoice History Placeholder */}
+                <Card className="bg-slate-900 border-slate-800">
+                    <CardHeader>
+                        <CardTitle className="text-white">Billing History</CardTitle>
+                    </CardHeader>
+                    <CardContent>
+                        <div className="text-center py-8 text-slate-500 text-sm">
+                            No invoices found.
+                        </div>
+                    </CardContent>
+                </Card>
+            </div>
+        </div>
+    );
+}

frontend/src/app/globals.css

@@ -0,0 +1,74 @@
+@import "tailwindcss";
+
+:root {
+  --background: #020617;
+  --foreground: #f8fafc;
+  --card: #020617;
+  --card-foreground: #f8fafc;
+  --popover: #020617;
+  --popover-foreground: #f8fafc;
+  --primary: #2563eb;
+  --primary-foreground: #f8fafc;
+  --secondary: #1e293b;
+  --secondary-foreground: #f8fafc;
+  --muted: #1e293b;
+  --muted-foreground: #94a3b8;
+  --accent: #1e293b;
+  --accent-foreground: #f8fafc;
+  --destructive: #7f1d1d;
+  --destructive-foreground: #f8fafc;
+  --border: #1e293b;
+  --input: #1e293b;
+  --ring: #1d4ed8;
+  --radius: 0.5rem;
+}
+
+@theme inline {
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+  --color-card: var(--card);
+  --color-card-foreground: var(--card-foreground);
+  --color-popover: var(--popover);
+  --color-popover-foreground: var(--popover-foreground);
+  --color-primary: var(--primary);
+  --color-primary-foreground: var(--primary-foreground);
+  --color-secondary: var(--secondary);
+  --color-secondary-foreground: var(--secondary-foreground);
+  --color-muted: var(--muted);
+  --color-muted-foreground: var(--muted-foreground);
+  --color-accent: var(--accent);
+  --color-accent-foreground: var(--accent-foreground);
+  --color-destructive: var(--destructive);
+  --color-destructive-foreground: var(--destructive-foreground);
+  --color-border: var(--border);
+  --color-input: var(--input);
+  --color-ring: var(--ring);
+  --radius-sm: calc(var(--radius) - 2px);
+  --radius-md: calc(var(--radius) - 2px);
+  --radius-lg: var(--radius);
+  --font-sans: var(--font-inter);
+  --font-mono: monospace;
+}
+
+body {
+  background: var(--background);
+  color: var(--foreground);
+  font-family: Arial, Helvetica, sans-serif;
+}
+
+/* Strictly hide scrollbars for everything */
+::-webkit-scrollbar {
+  display: none !important;
+  width: 0 !important;
+  height: 0 !important;
+  background: transparent !important;
+}
+
+html,
+body,
+* {
+  -ms-overflow-style: none !important;
+  /* IE and Edge */
+  scrollbar-width: none !important;
+  /* Firefox */
+}

frontend/src/app/layout.tsx

@@ -0,0 +1,35 @@
+import type { Metadata } from "next";
+import { Inter } from "next/font/google";
+import "./globals.css";
+import { cn } from "@/lib/utils";
+
+const inter = Inter({
+  subsets: ["latin"],
+  variable: "--font-inter",
+});
+
+export const metadata: Metadata = {
+  title: "VidSimplify - AI-Powered Animation Generator",
+  description: "Transform text, PDFs, and URLs into stunning educational animations powered by AI and Manim",
+};
+
+
+
+// ... imports
+
+export default function RootLayout({
+  children,
+}: Readonly<{
+  children: React.ReactNode;
+}>) {
+  return (
+    <html lang="en">
+      <body className={cn(
+        "min-h-screen bg-slate-950 font-sans antialiased",
+        inter.variable
+      )}>
+        {children}
+      </body>
+    </html>
+  );
+}

frontend/src/app/page.tsx

@@ -0,0 +1,105 @@
+import { Navbar } from "@/components/landing/Navbar";
+import { Hero } from "@/components/landing/Hero";
+import { Showcase } from "@/components/landing/Showcase";
+import { Footer } from "@/components/landing/Footer";
+import { Check, Edit, Layers, Zap } from "lucide-react";
+
+export default function Home() {
+  return (
+    <main className="min-h-screen bg-slate-950">
+      <Navbar />
+      <Hero />
+      <Showcase />
+
+      {/* Problem vs Solution Section */}
+      <section className="py-24 bg-slate-900">
+        <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
+          <div className="grid md:grid-cols-2 gap-16 items-center">
+            <div>
+              <h2 className="text-3xl font-bold text-white mb-6">
+                The Problem with <span className="text-red-400">Random AI Video</span>
+              </h2>
+              <ul className="space-y-4">
+                {[
+                  "Hallucinated facts and visuals",
+                  "Inconsistent style and branding",
+                  "Impossible to edit specific details",
+                  "Black box generation process"
+                ].map((item, i) => (
+                  <li key={i} className="flex items-center text-slate-400">
+                    <div className="h-2 w-2 rounded-full bg-red-500 mr-3" />
+                    {item}
+                  </li>
+                ))}
+              </ul>
+            </div>
+            <div>
+              <h2 className="text-3xl font-bold text-white mb-6">
+                The <span className="text-blue-400">VidSimplify</span> Solution
+              </h2>
+              <ul className="space-y-4">
+                {[
+                  "Mathematically precise animations",
+                  "Granular control to edit every detail",
+                  "Consistent, professional styling",
+                  "Explainable and transparent generation"
+                ].map((item, i) => (
+                  <li key={i} className="flex items-center text-slate-300">
+                    <div className="h-6 w-6 rounded-full bg-blue-500/20 text-blue-400 flex items-center justify-center mr-3">
+                      <Check className="h-4 w-4" />
+                    </div>
+                    {item}
+                  </li>
+                ))}
+              </ul>
+            </div>
+          </div>
+        </div>
+      </section>
+
+      {/* Features Grid */}
+      <section id="features" className="py-24 bg-slate-950">
+        <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
+          <div className="text-center mb-16">
+            <h2 className="text-3xl font-bold tracking-tight text-white sm:text-4xl">
+              Engineered for Complexity
+            </h2>
+            <p className="mt-4 text-lg text-slate-400 max-w-2xl mx-auto">
+              In a growing complex world, we need tools that can explain the working of any system, research, or product in depth.
+            </p>
+          </div>
+
+          <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
+            {[
+              {
+                title: "Multi-Dimensional",
+                description: "Generate 2D and 3D visualizations that capture every angle of your concept.",
+                icon: <Layers className="h-8 w-8 text-blue-400" />
+              },
+              {
+                title: "Fully Editable",
+                description: "Don't like a color? Want to change a speed? Tweak parameters instantly.",
+                icon: <Edit className="h-8 w-8 text-violet-400" />
+              },
+              {
+                title: "Instant Repurposing",
+                description: "Generate once, then tweak for different formats, audiences, and platforms.",
+                icon: <Zap className="h-8 w-8 text-indigo-400" />
+              }
+            ].map((feature, i) => (
+              <div key={i} className="bg-slate-900/50 border border-white/5 p-8 rounded-2xl hover:bg-slate-900 transition-colors">
+                <div className="mb-6 bg-slate-800/50 w-16 h-16 rounded-xl flex items-center justify-center border border-white/5">
+                  {feature.icon}
+                </div>
+                <h3 className="text-xl font-semibold text-white mb-3">{feature.title}</h3>
+                <p className="text-slate-400 leading-relaxed">{feature.description}</p>
+              </div>
+            ))}
+          </div>
+        </div>
+      </section>
+
+      <Footer />
+    </main>
+  );
+}

frontend/src/app/pricing/page.tsx

@@ -0,0 +1,123 @@
+"use client";
+
+import { Check } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import Link from "next/link";
+import { cn } from "@/lib/utils";
+
+export default function PricingPage() {
+    const tiers = [
+        {
+            name: "Free",
+            price: "$0",
+            description: "Perfect for experimenting and personal projects.",
+            features: [
+                "5 video credits per month",
+                "720p video quality",
+                "Standard generation speed",
+                "Public community access",
+            ],
+            cta: "Get Started",
+            href: "/app",
+            popular: false,
+        },
+        {
+            name: "Pro",
+            price: "$29",
+            description: "For content creators and professionals.",
+            features: [
+                "50 video credits per month",
+                "1080p HD video quality",
+                "Fast generation speed",
+                "Priority support",
+                "Commercial usage rights",
+                "Remove watermarks",
+            ],
+            cta: "Upgrade to Pro",
+            href: "/auth/signin",
+            popular: true,
+        },
+        {
+            name: "Enterprise",
+            price: "Custom",
+            description: "For teams and high-volume needs.",
+            features: [
+                "Unlimited video credits",
+                "4K video quality",
+                "Instant generation",
+                "Dedicated account manager",
+                "Custom branding & templates",
+                "API access",
+            ],
+            cta: "Contact Sales",
+            href: "mailto:sales@vidsimplify.com",
+            popular: false,
+        },
+    ];
+
+    return (
+        <div className="min-h-screen bg-slate-950 text-slate-200 py-24 px-4 sm:px-6 lg:px-8">
+            <div className="max-w-7xl mx-auto">
+                <div className="text-center mb-16">
+                    <h1 className="text-4xl font-bold tracking-tight text-white sm:text-5xl mb-4">
+                        Simple, transparent pricing
+                    </h1>
+                    <p className="text-xl text-slate-400 max-w-2xl mx-auto">
+                        Choose the plan that best fits your needs. All plans include access to our core AI generation features.
+                    </p>
+                </div>
+
+                <div className="grid grid-cols-1 gap-8 lg:grid-cols-3">
+                    {tiers.map((tier) => (
+                        <div
+                            key={tier.name}
+                            className={cn(
+                                "relative flex flex-col p-8 bg-slate-900/50 backdrop-blur-sm border rounded-2xl transition-all duration-200 hover:scale-105",
+                                tier.popular
+                                    ? "border-blue-500/50 shadow-2xl shadow-blue-500/10 z-10 scale-105"
+                                    : "border-white/10 hover:border-white/20"
+                            )}
+                        >
+                            {tier.popular && (
+                                <div className="absolute -top-4 left-1/2 -translate-x-1/2 px-4 py-1 bg-gradient-to-r from-blue-600 to-violet-600 text-white text-sm font-medium rounded-full shadow-lg">
+                                    Most Popular
+                                </div>
+                            )}
+
+                            <div className="mb-8">
+                                <h3 className="text-lg font-semibold text-white mb-2">{tier.name}</h3>
+                                <div className="flex items-baseline gap-1">
+                                    <span className="text-4xl font-bold text-white">{tier.price}</span>
+                                    {tier.price !== "Custom" && <span className="text-slate-500">/month</span>}
+                                </div>
+                                <p className="mt-4 text-sm text-slate-400">{tier.description}</p>
+                            </div>
+
+                            <ul className="space-y-4 mb-8 flex-1">
+                                {tier.features.map((feature) => (
+                                    <li key={feature} className="flex items-start gap-3 text-sm text-slate-300">
+                                        <Check className="h-5 w-5 text-blue-500 shrink-0" />
+                                        <span>{feature}</span>
+                                    </li>
+                                ))}
+                            </ul>
+
+                            <Button
+                                asChild
+                                className={cn(
+                                    "w-full",
+                                    tier.popular
+                                        ? "bg-blue-600 hover:bg-blue-700 text-white"
+                                        : "bg-slate-800 hover:bg-slate-700 text-white"
+                                )}
+                                variant={tier.popular ? "default" : "outline"}
+                            >
+                                <Link href={tier.href}>{tier.cta}</Link>
+                            </Button>
+                        </div>
+                    ))}
+                </div>
+            </div>
+        </div>
+    );
+}

frontend/src/app/profile/page.tsx

@@ -0,0 +1,136 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import { supabaseClient } from "@/lib/supabase-client";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
+import { Loader2, User, Mail, Save } from "lucide-react";
+import { useRouter } from "next/navigation";
+
+export default function ProfilePage() {
+    const [user, setUser] = useState<any>(null);
+    const [loading, setLoading] = useState(true);
+    const [fullName, setFullName] = useState("");
+    const [saving, setSaving] = useState(false);
+    const router = useRouter();
+    const supabase = supabaseClient;
+
+    useEffect(() => {
+        const getUser = async () => {
+            const { data: { user } } = await supabase.auth.getUser();
+            if (!user) {
+                router.push("/auth/signin");
+                return;
+            }
+            setUser(user);
+            setFullName(user.user_metadata?.full_name || "");
+            setLoading(false);
+        };
+        getUser();
+    }, [supabase, router]);
+
+    const handleUpdateProfile = async () => {
+        setSaving(true);
+        const { error } = await supabase.auth.updateUser({
+            data: { full_name: fullName },
+        });
+
+        if (error) {
+            alert("Error updating profile");
+        } else {
+            alert("Profile updated successfully");
+            router.refresh();
+        }
+        setSaving(false);
+    };
+
+    if (loading) {
+        return (
+            <div className="flex h-screen items-center justify-center bg-slate-950">
+                <Loader2 className="h-8 w-8 animate-spin text-blue-500" />
+            </div>
+        );
+    }
+
+    return (
+        <div className="min-h-screen bg-slate-950 text-slate-200 py-12 px-4 sm:px-6 lg:px-8">
+            <div className="max-w-2xl mx-auto space-y-8">
+                <div>
+                    <h1 className="text-3xl font-bold text-white">Profile Settings</h1>
+                    <p className="text-slate-400 mt-2">Manage your account settings and preferences.</p>
+                </div>
+
+                <Card className="bg-slate-900 border-slate-800">
+                    <CardHeader>
+                        <CardTitle className="text-white">Personal Information</CardTitle>
+                        <CardDescription className="text-slate-400">
+                            Update your personal details here.
+                        </CardDescription>
+                    </CardHeader>
+                    <CardContent className="space-y-6">
+                        <div className="flex items-center gap-6">
+                            <Avatar className="h-20 w-20 border-2 border-slate-700">
+                                <AvatarImage src={user?.user_metadata?.avatar_url} />
+                                <AvatarFallback className="text-lg bg-slate-800 text-slate-300">
+                                    {user?.email?.charAt(0).toUpperCase()}
+                                </AvatarFallback>
+                            </Avatar>
+                            <div>
+                                <p className="text-sm font-medium text-slate-300 mb-1">Profile Picture</p>
+                                <p className="text-xs text-slate-500">
+                                    Managed by your identity provider (Google).
+                                </p>
+                            </div>
+                        </div>
+
+                        <div className="space-y-2">
+                            <label className="text-sm font-medium text-slate-300">Full Name</label>
+                            <div className="relative">
+                                <User className="absolute left-3 top-3 h-4 w-4 text-slate-500" />
+                                <Input
+                                    value={fullName}
+                                    onChange={(e) => setFullName(e.target.value)}
+                                    className="pl-9 bg-slate-950 border-slate-700 text-slate-200 focus:border-blue-500"
+                                />
+                            </div>
+                        </div>
+
+                        <div className="space-y-2">
+                            <label className="text-sm font-medium text-slate-300">Email Address</label>
+                            <div className="relative">
+                                <Mail className="absolute left-3 top-3 h-4 w-4 text-slate-500" />
+                                <Input
+                                    value={user?.email}
+                                    disabled
+                                    className="pl-9 bg-slate-950/50 border-slate-800 text-slate-500 cursor-not-allowed"
+                                />
+                            </div>
+                        </div>
+
+                        <div className="pt-4">
+                            <Button
+                                onClick={handleUpdateProfile}
+                                disabled={saving}
+                                className="bg-blue-600 hover:bg-blue-700 text-white"
+                            >
+                                {saving ? (
+                                    <>
+                                        <Loader2 className="mr-2 h-4 w-4 animate-spin" />
+                                        Saving...
+                                    </>
+                                ) : (
+                                    <>
+                                        <Save className="mr-2 h-4 w-4" />
+                                        Save Changes
+                                    </>
+                                )}
+                            </Button>
+                        </div>
+                    </CardContent>
+                </Card>
+            </div>
+        </div>
+    );
+}

frontend/src/components/app/VideoGenerator.tsx

@@ -0,0 +1,602 @@
+"use client";
+
+import React, { useState, useEffect } from "react";
+import { useSearchParams } from "next/navigation";
+import { motion, AnimatePresence } from "framer-motion";
+import { Loader2, Upload, Link as LinkIcon, FileText, CheckCircle, AlertCircle, Download, Play, Layout, Clock, Settings, Menu, X, Video, ChevronRight, Sparkles } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import { Input, Textarea } from "@/components/ui/input";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { api, type InputType, type Category, type JobStatus } from "@/lib/api";
+import { cn } from "@/lib/utils";
+import Link from "next/link";
+import { supabaseClient } from "@/lib/supabase-client";
+
+export function VideoGenerator() {
+  const searchParams = useSearchParams();
+  const [inputType, setInputType] = useState<InputType>("text");
+  const [category, setCategory] = useState<Category>("tech_system");
+  const [content, setContent] = useState("");
+  const [isGenerating, setIsGenerating] = useState(false);
+  const [currentJob, setCurrentJob] = useState<JobStatus | null>(null);
+  const [error, setError] = useState<string | null>(null);
+  const [isSidebarOpen, setIsSidebarOpen] = useState(false);
+  const [credits, setCredits] = useState(0);
+  const [demoVideoUrl, setDemoVideoUrl] = useState<string | null>(null);
+
+  const supabase = supabaseClient;
+
+  // Fetch credits
+  useEffect(() => {
+    const fetchCredits = async () => {
+      const { data: { user } } = await supabase.auth.getUser();
+      if (user) {
+        const { data } = await supabase
+          .from("users")
+          .select("credits")
+          .eq("id", user.id)
+          .single();
+        setCredits(data?.credits ?? 0);
+      }
+    };
+    fetchCredits();
+  }, [supabase]);
+
+  // Initialize from URL params
+  useEffect(() => {
+    const promptParam = searchParams.get("prompt");
+    const categoryParam = searchParams.get("category");
+    const demoUrlParam = searchParams.get("demoVideoUrl");
+
+    if (promptParam) {
+      setContent(promptParam);
+      setInputType("text");
+    }
+
+    if (categoryParam && ["tech_system", "product_startup", "mathematical"].includes(categoryParam)) {
+      setCategory(categoryParam as Category);
+    }
+
+    if (demoUrlParam) {
+      setDemoVideoUrl(demoUrlParam);
+      // Removed auto-start: simulateGeneration(demoUrlParam);
+    } else {
+      setDemoVideoUrl(null);
+    }
+  }, [searchParams]);
+
+  const simulateGeneration = (videoUrl: string) => {
+    setIsGenerating(true);
+    const jobId = "demo-" + Date.now();
+
+    const steps = [
+      { percentage: 10, message: "Analyzing Input..." },
+      { percentage: 30, message: "Generating Script..." },
+      { percentage: 60, message: "Validating Code..." },
+      { percentage: 85, message: "Rendering Frames..." },
+      { percentage: 100, message: "Finalizing..." }
+    ];
+
+    let step = 0;
+    // Clear any existing job
+    setCurrentJob({
+      job_id: jobId,
+      status: "pending",
+      progress: { percentage: 0, message: "Initializing..." },
+      created_at: new Date().toISOString()
+    });
+
+    const interval = setInterval(() => {
+      if (step >= steps.length) {
+        clearInterval(interval);
+        setCurrentJob({
+          job_id: jobId,
+          status: "completed",
+          progress: { percentage: 100, message: "Completed" },
+          created_at: new Date().toISOString()
+        });
+        setIsGenerating(false);
+        return;
+      }
+
+      setCurrentJob({
+        job_id: jobId,
+        status: "rendering",
+        progress: steps[step],
+        created_at: new Date().toISOString()
+      });
+      step++;
+    }, 1000); // 1 second per step for a nice flow
+  };
+
+  // Poll for job status
+  useEffect(() => {
+    let interval: NodeJS.Timeout;
+
+    // Only poll if it's NOT a demo job (demo jobs start with "demo-")
+    if (currentJob && ["pending", "generating_code", "rendering"].includes(currentJob.status) && !currentJob.job_id.startsWith("demo-")) {
+      interval = setInterval(async () => {
+        try {
+          const status = await api.getJobStatus(currentJob.job_id);
+          setCurrentJob(status);
+
+          if (status.status === "failed") {
+            setError(status.error || "Job failed");
+            setIsGenerating(false);
+          } else if (status.status === "completed") {
+            setIsGenerating(false);
+          }
+        } catch (e) {
+          console.error("Polling error", e);
+        }
+      }, 2000);
+    }
+
+    return () => clearInterval(interval);
+  }, [currentJob]);
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    if (!content) return;
+
+    // If we have a demo video URL, simulate the generation instead of calling the API
+    if (demoVideoUrl) {
+      simulateGeneration(demoVideoUrl);
+      return;
+    }
+
+    setIsGenerating(true);
+    setError(null);
+    setCurrentJob(null);
+    // setDemoVideoUrl(null); // Don't clear it here, we might want to keep it if user retries? 
+    // Actually, if it's a real generation, we should probably clear it. 
+    // But wait, if we are here, demoVideoUrl is NULL (because of the check above).
+    // So we don't need to clear it.
+
+    try {
+      const job = await api.createVideo(content, inputType, category);
+      setCurrentJob({
+        job_id: job.job_id,
+        status: "pending",
+        progress: { percentage: 0, message: "Initializing system..." },
+        created_at: new Date().toISOString()
+      });
+      // Optimistically update credits
+      setCredits(prev => Math.max(0, prev - 1));
+    } catch (e: any) {
+      setError(e.message);
+      setIsGenerating(false);
+    }
+  };
+
+  const categories: { value: Category; label: string; description: string }[] = [
+    { value: "tech_system", label: "Tech & Systems", description: "Architecture, Data Flow, APIs" },
+    { value: "product_startup", label: "Product Demo", description: "Features, Value Prop, UI/UX" },
+    { value: "mathematical", label: "Math & Research", description: "Equations, Graphs, Concepts" },
+  ];
+
+  const SHOWCASE_KEYWORDS = [
+    "database sharding",
+    "kafka",
+    "transformers",
+    "quantum entanglement",
+    "netflix",
+    "black hole",
+    "sorting algorithms",
+    "uber",
+    "sorting",
+    "bubble sort",
+    "url shortener"
+  ];
+
+  const isShowcasePrompt = SHOWCASE_KEYWORDS.some(keyword => (content || "").toLowerCase().includes(keyword));
+  const canEdit = credits > 0;
+  const canGenerate = canEdit || isShowcasePrompt;
+
+  return (
+    <div className="flex h-screen bg-slate-950 overflow-hidden">
+      {/* Mobile Sidebar Overlay */}
+      <AnimatePresence>
+        {isSidebarOpen && (
+          <motion.div
+            initial={{ opacity: 0 }}
+            animate={{ opacity: 1 }}
+            exit={{ opacity: 0 }}
+            onClick={() => setIsSidebarOpen(false)}
+            className="fixed inset-0 bg-black/60 backdrop-blur-sm z-40 md:hidden"
+          />
+        )}
+      </AnimatePresence>
+
+      {/* Sidebar */}
+      <motion.div
+        className={cn(
+          "fixed inset-y-0 left-0 z-50 w-72 bg-slate-900/50 backdrop-blur-xl border-r border-white/5 flex flex-col transition-transform duration-300 md:translate-x-0 md:static",
+          isSidebarOpen ? "translate-x-0" : "-translate-x-full"
+        )}
+      >
+        <div className="p-6 border-b border-white/5 flex items-center justify-between">
+          <Link href="/" className="flex items-center gap-2">
+            <div className="flex h-8 w-8 items-center justify-center rounded-lg bg-gradient-to-br from-blue-500 to-violet-600">
+              <Video className="h-4 w-4 text-white" />
+            </div>
+            <span className="text-lg font-bold text-white">VidSimplify</span>
+          </Link>
+          <button onClick={() => setIsSidebarOpen(false)} className="md:hidden text-slate-400 hover:text-white">
+            <X className="h-5 w-5" />
+          </button>
+        </div>
+
+        <div className="flex-1 py-6 px-4 space-y-2 overflow-y-auto custom-scrollbar">
+          <Button variant="ghost" className="w-full justify-start text-blue-400 bg-blue-500/10 hover:bg-blue-500/20 hover:text-blue-300 font-medium">
+            <Layout className="mr-3 h-4 w-4" />
+            Create New
+          </Button>
+          <Button variant="ghost" className="w-full justify-start text-slate-400 hover:text-white hover:bg-white/5">
+            <Clock className="mr-3 h-4 w-4" />
+            History
+          </Button>
+          <Button variant="ghost" className="w-full justify-start text-slate-400 hover:text-white hover:bg-white/5">
+            <Settings className="mr-3 h-4 w-4" />
+            Settings
+          </Button>
+        </div>
+
+        <div className="p-4 border-t border-white/5 bg-slate-900/50">
+          <div className="bg-gradient-to-br from-slate-800 to-slate-900 rounded-xl p-4 border border-white/5">
+            <div className="flex justify-between items-center mb-2">
+              <div className="text-xs font-medium text-slate-300">Credits</div>
+              <div className="text-xs font-mono text-blue-400">{credits} / 5</div>
+            </div>
+            <div className="h-1.5 bg-slate-700/50 rounded-full overflow-hidden mb-3">
+              <div
+                className="h-full bg-gradient-to-r from-blue-500 to-violet-500 rounded-full transition-all duration-500"
+                style={{ width: `${Math.min((credits / 5) * 100, 100)}%` }}
+              ></div>
+            </div>
+            <Button
+              size="sm"
+              variant="outline"
+              className="w-full text-xs h-8 border-slate-700 hover:bg-slate-800 text-slate-300"
+              onClick={() => window.open("https://calendly.com/aditya-vidsimplify/demo-call", "_blank")}
+            >
+              Upgrade Plan
+            </Button>
+          </div>
+        </div>
+      </motion.div>
+
+      {/* Main Content */}
+      <div className="flex-1 flex flex-col min-w-0 overflow-hidden relative">
+        {/* App Header */}
+        <header className="h-16 border-b border-white/5 bg-slate-950/50 backdrop-blur-md flex items-center justify-between px-4 sm:px-8 z-30">
+          <div className="flex items-center gap-4">
+            <button onClick={() => setIsSidebarOpen(true)} className="md:hidden text-slate-400 hover:text-white p-1">
+              <Menu className="h-6 w-6" />
+            </button>
+            <h1 className="text-lg font-semibold text-white flex items-center gap-2">
+              <span className="text-slate-500 font-normal">Project /</span> Untitled Animation
+            </h1>
+          </div>
+          <div className="flex items-center gap-4">
+            <Button
+              variant="ghost"
+              size="sm"
+              className="hidden sm:flex text-slate-400 hover:text-white font-medium"
+              onClick={() => window.open("https://calendly.com/aditya-vidsimplify/demo-call", "_blank")}
+            >
+              Book a Call
+            </Button>
+            <div className="hidden sm:flex items-center gap-2 px-3 py-1.5 rounded-full bg-green-500/10 border border-green-500/20 text-xs font-medium text-green-400">
+              <div className="w-1.5 h-1.5 rounded-full bg-green-500 animate-pulse" />
+              System Operational
+            </div>
+            <div className="w-8 h-8 rounded-full bg-gradient-to-tr from-blue-500 to-violet-500 border border-white/20 shadow-lg" />
+          </div>
+        </header>
+
+        <main className="flex-1 overflow-y-auto p-4 sm:p-8 custom-scrollbar">
+          <div className="max-w-6xl mx-auto">
+            <div className="grid lg:grid-cols-12 gap-8">
+
+              {/* Left Column: Input Configuration */}
+              <div className="lg:col-span-7 space-y-8">
+                <div>
+                  <h2 className="text-2xl font-bold text-white mb-2">Configure Generation</h2>
+                  <p className="text-slate-400">Define the parameters for your AI-generated animation.</p>
+                </div>
+
+                <form onSubmit={handleSubmit} className="space-y-8">
+                  {/* Input Source */}
+                  <div className="space-y-4">
+                    <label className="text-sm font-medium text-slate-300 uppercase tracking-wider">Input Source</label>
+                    <div className="grid grid-cols-3 gap-4">
+                      {[
+                        { id: "text", icon: FileText, label: "Text Prompt" },
+                        { id: "url", icon: LinkIcon, label: "URL / Blog" },
+                        { id: "pdf", icon: Upload, label: "PDF Document" }
+                      ].map((type) => (
+                        <button
+                          key={type.id}
+                          type="button"
+                          onClick={() => setInputType(type.id as InputType)}
+                          className={cn(
+                            "flex flex-col items-center justify-center p-4 rounded-xl border transition-all duration-200",
+                            inputType === type.id
+                              ? "bg-blue-600/10 border-blue-500/50 text-blue-400 shadow-[0_0_20px_rgba(59,130,246,0.15)]"
+                              : "bg-slate-900/50 border-white/5 text-slate-400 hover:bg-slate-800 hover:border-white/10"
+                          )}
+                        >
+                          <type.icon className="w-6 h-6 mb-2" />
+                          <span className="text-sm font-medium">{type.label}</span>
+                        </button>
+                      ))}
+                    </div>
+                  </div>
+
+                  {/* Animation Style */}
+                  <div className="space-y-4">
+                    <label className="text-sm font-medium text-slate-300 uppercase tracking-wider">Visual Style</label>
+                    <div className="grid gap-3">
+                      {categories.map((cat) => (
+                        <button
+                          key={cat.value}
+                          type="button"
+                          onClick={() => setCategory(cat.value)}
+                          className={cn(
+                            "flex items-center p-4 rounded-xl border text-left transition-all duration-200",
+                            category === cat.value
+                              ? "bg-violet-600/10 border-violet-500/50 shadow-[0_0_20px_rgba(139,92,246,0.15)]"
+                              : "bg-slate-900/50 border-white/5 hover:bg-slate-800 hover:border-white/10"
+                          )}
+                        >
+                          <div className={cn(
+                            "w-10 h-10 rounded-lg flex items-center justify-center mr-4 transition-colors",
+                            category === cat.value ? "bg-violet-500/20 text-violet-400" : "bg-slate-800 text-slate-400"
+                          )}>
+                            {cat.value === 'tech_system' && <Layout className="w-5 h-5" />}
+                            {cat.value === 'product_startup' && <Sparkles className="w-5 h-5" />}
+                            {cat.value === 'mathematical' && <Clock className="w-5 h-5" />}
+                          </div>
+                          <div>
+                            <div className={cn("font-medium", category === cat.value ? "text-violet-300" : "text-slate-200")}>
+                              {cat.label}
+                            </div>
+                            <div className="text-xs text-slate-500 mt-0.5">{cat.description}</div>
+                          </div>
+                          {category === cat.value && (
+                            <div className="ml-auto text-violet-400">
+                              <CheckCircle className="w-5 h-5" />
+                            </div>
+                          )}
+                        </button>
+                      ))}
+                    </div>
+                  </div>
+
+                  {/* Content Input */}
+                  <div className="space-y-4">
+                    <label className="text-sm font-medium text-slate-300 uppercase tracking-wider">
+                      {inputType === "text" ? "Description" : inputType === "url" ? "Source URL" : "Upload File"}
+                    </label>
+
+                    <div className="relative group">
+                      <div className="absolute -inset-0.5 bg-gradient-to-r from-blue-500 to-violet-500 rounded-xl opacity-0 group-hover:opacity-20 transition duration-500 blur"></div>
+                      {inputType === "text" ? (
+                        <Textarea
+                          placeholder="Explain the concept of neural networks using a simple analogy..."
+                          className="relative min-h-[200px] text-base resize-none bg-slate-900/80 border-white/10 text-slate-200 focus:border-blue-500/50 focus:ring-blue-500/20 rounded-xl p-4"
+                          value={content}
+                          onChange={(e) => setContent(e.target.value)}
+                          disabled={!canEdit}
+                        />
+                      ) : inputType === "url" ? (
+                        <Input
+                          placeholder="https://example.com/article"
+                          value={content}
+                          onChange={(e) => setContent(e.target.value)}
+                          className="relative h-12 bg-slate-900/80 border-white/10 text-slate-200 focus:border-blue-500/50 focus:ring-blue-500/20 rounded-xl px-4"
+                          disabled={!canEdit}
+                        />
+                      ) : (
+                        <div className={cn(
+                          "relative border-2 border-dashed border-slate-700 rounded-xl p-12 text-center transition-all",
+                          canEdit ? "hover:border-blue-500/50 hover:bg-slate-900/50 cursor-pointer" : "opacity-50 cursor-not-allowed"
+                        )}>
+                          <Input
+                            type="file"
+                            accept=".pdf"
+                            onChange={async (e) => {
+                              const file = e.target.files?.[0];
+                              if (file) {
+                                const reader = new FileReader();
+                                reader.onload = (event) => {
+                                  const base64 = event.target?.result as string;
+                                  const base64Content = base64.split(',')[1];
+                                  setContent(base64Content);
+                                };
+                                reader.readAsDataURL(file);
+                              }
+                            }}
+                            className="hidden"
+                            id="pdf-upload"
+                            disabled={!canEdit}
+                          />
+                          <label htmlFor="pdf-upload" className={cn("w-full h-full block", canEdit ? "cursor-pointer" : "cursor-not-allowed")}>
+                            <div className="w-16 h-16 bg-slate-800 rounded-full flex items-center justify-center mx-auto mb-4 group-hover:scale-110 transition-transform">
+                              <Upload className="h-8 w-8 text-slate-400 group-hover:text-blue-400 transition-colors" />
+                            </div>
+                            <p className="text-lg font-medium text-slate-300 mb-2">Click to upload PDF</p>
+                            <p className="text-sm text-slate-500">Maximum file size 10MB</p>
+                          </label>
+                          {content && (
+                            <div className="absolute top-4 right-4 flex items-center gap-2 text-green-400 text-xs bg-green-500/10 py-1.5 px-3 rounded-full border border-green-500/20">
+                              <CheckCircle className="h-3 w-3" />
+                              <span>Ready</span>
+                            </div>
+                          )}
+                        </div>
+                      )}
+                    </div>
+                  </div>
+
+                  <Button
+                    type="submit"
+                    size="lg"
+                    className="w-full h-16 text-lg font-semibold bg-gradient-to-r from-blue-600 to-violet-600 hover:from-blue-500 hover:to-violet-500 text-white shadow-lg shadow-blue-500/25 rounded-xl transition-all hover:scale-[1.02] active:scale-[0.98]"
+                    disabled={isGenerating || !content || !canGenerate}
+                  >
+                    {isGenerating ? (
+                      <div className="flex items-center gap-3">
+                        <Loader2 className="h-6 w-6 animate-spin" />
+                        <span>Processing Request...</span>
+                      </div>
+                    ) : (
+                      <div className="flex items-center gap-3">
+                        <Play className="h-6 w-6 fill-current" />
+                        <span>Generate Animation</span>
+                      </div>
+                    )}
+                  </Button>
+                </form>
+              </div>
+
+              {/* Right Column: Preview & Status */}
+              <div className="lg:col-span-5 space-y-8">
+                <div>
+                  <h2 className="text-2xl font-bold text-white mb-2">Live Preview</h2>
+                  <p className="text-slate-400">Real-time generation status and output.</p>
+                </div>
+
+                <div className="sticky top-8">
+                  <AnimatePresence mode="wait">
+                    {currentJob ? (
+                      <motion.div
+                        initial={{ opacity: 0, y: 20 }}
+                        animate={{ opacity: 1, y: 0 }}
+                        exit={{ opacity: 0, y: -20 }}
+                        className="space-y-6"
+                      >
+                        <Card className="bg-slate-900 border-white/10 overflow-hidden shadow-2xl">
+                          <CardHeader className="border-b border-white/5 bg-slate-950/30 py-4">
+                            <div className="flex items-center justify-between">
+                              <CardTitle className="text-sm font-medium text-slate-300 flex items-center gap-2">
+                                {currentJob.status === "completed" ? (
+                                  <span className="flex items-center gap-2 text-green-400">
+                                    <CheckCircle className="h-4 w-4" /> Completed
+                                  </span>
+                                ) : currentJob.status === "failed" ? (
+                                  <span className="flex items-center gap-2 text-red-400">
+                                    <AlertCircle className="h-4 w-4" /> Failed
+                                  </span>
+                                ) : (
+                                  <span className="flex items-center gap-2 text-blue-400">
+                                    <Loader2 className="h-4 w-4 animate-spin" /> Processing
+                                  </span>
+                                )}
+                              </CardTitle>
+                              <div className="text-xs font-mono text-slate-500">{currentJob.job_id.slice(0, 8)}</div>
+                            </div>
+                          </CardHeader>
+
+                          <CardContent className="p-0">
+                            {/* Video Player or Progress State */}
+                            <div className="aspect-video bg-black relative group">
+                              {currentJob.status === "completed" ? (
+                                <video
+                                  key={demoVideoUrl || currentJob.job_id}
+                                  src={demoVideoUrl || api.getVideoUrl(currentJob.job_id)}
+                                  controls
+                                  className="w-full h-full"
+                                  poster="/placeholder-video.jpg"
+                                />
+                              ) : (
+                                <div className="absolute inset-0 flex flex-col items-center justify-center p-8 text-center">
+                                  <div className="relative w-24 h-24 mb-6">
+                                    <div className="absolute inset-0 rounded-full border-4 border-slate-800"></div>
+                                    <div className="absolute inset-0 rounded-full border-4 border-t-blue-500 border-r-transparent border-b-transparent border-l-transparent animate-spin"></div>
+                                    <div className="absolute inset-4 rounded-full bg-slate-800/50 backdrop-blur flex items-center justify-center">
+                                      <span className="text-sm font-bold text-white">{currentJob.progress.percentage}%</span>
+                                    </div>
+                                  </div>
+                                  <h3 className="text-lg font-medium text-white mb-2">Generating Animation</h3>
+                                  <p className="text-sm text-slate-400 max-w-xs mx-auto animate-pulse">
+                                    {currentJob.progress.message}
+                                  </p>
+                                </div>
+                              )}
+                            </div>
+
+                            {/* Actions */}
+                            {currentJob.status === "completed" && (
+                              <div className="p-4 bg-slate-900 border-t border-white/5">
+                                <Button className="w-full bg-white text-slate-900 hover:bg-slate-200 font-medium" asChild>
+                                  <a href={demoVideoUrl || api.getVideoUrl(currentJob.job_id)} download>
+                                    <Download className="mr-2 h-4 w-4" />
+                                    Download MP4 (1080p)
+                                  </a>
+                                </Button>
+                              </div>
+                            )}
+
+                            {/* Error Message */}
+                            {error && (
+                              <div className="p-4 bg-red-500/10 border-t border-red-500/20">
+                                <p className="text-sm text-red-400 flex items-start gap-2">
+                                  <AlertCircle className="h-4 w-4 mt-0.5 flex-shrink-0" />
+                                  {error}
+                                </p>
+                              </div>
+                            )}
+                          </CardContent>
+                        </Card>
+
+                        {/* Process Steps (Visual Decoration) */}
+                        {currentJob.status !== "completed" && currentJob.status !== "failed" && (
+                          <div className="space-y-3">
+                            {["Analyzing Input", "Generating Script", "Validating Code", "Rendering Frames"].map((step, i) => {
+                              const currentStepIndex = Math.floor((currentJob.progress.percentage / 100) * 4);
+                              const isActive = i === currentStepIndex;
+                              const isCompleted = i < currentStepIndex;
+
+                              return (
+                                <div key={step} className="flex items-center gap-3 text-sm">
+                                  <div className={cn(
+                                    "w-6 h-6 rounded-full flex items-center justify-center border transition-colors",
+                                    isCompleted ? "bg-green-500 border-green-500 text-slate-900" :
+                                      isActive ? "border-blue-500 text-blue-500" : "border-slate-700 text-slate-700"
+                                  )}>
+                                    {isCompleted ? <CheckCircle className="w-4 h-4" /> : <div className={cn("w-2 h-2 rounded-full", isActive ? "bg-blue-500 animate-pulse" : "bg-slate-700")} />}
+                                  </div>
+                                  <span className={cn(
+                                    "transition-colors",
+                                    isCompleted ? "text-slate-300" :
+                                      isActive ? "text-white font-medium" : "text-slate-600"
+                                  )}>{step}</span>
+                                </div>
+                              );
+                            })}
+                          </div>
+                        )}
+                      </motion.div>
+                    ) : (
+                      <div className="h-[400px] rounded-2xl border-2 border-dashed border-slate-800 bg-slate-900/30 flex flex-col items-center justify-center text-slate-500 p-8 text-center">
+                        <div className="w-20 h-20 rounded-full bg-slate-800/50 flex items-center justify-center mb-6">
+                          <Video className="h-10 w-10 opacity-50" />
+                        </div>
+                        <h3 className="text-lg font-medium text-slate-300 mb-2">Ready to Generate</h3>
+                        <p className="max-w-xs text-sm">
+                          Configure your animation parameters on the left and click generate to see the magic happen.
+                        </p>
+                      </div>
+                    )}
+                  </AnimatePresence>
+                </div>
+              </div>
+            </div>
+          </div>
+        </main>
+      </div>
+    </div>
+  );
+}

frontend/src/components/auth/LoginButton.tsx

@@ -0,0 +1,40 @@
+"use client";
+
+import { Button } from "@/components/ui/button";
+import { supabaseClient } from "@/lib/supabase-client";
+import { cn } from "@/lib/utils";
+
+interface LoginButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+    text?: string;
+    variant?: "default" | "outline" | "secondary" | "ghost";
+    redirectTo?: string;
+}
+
+export function LoginButton({
+    text = "Sign In",
+    variant = "default",
+    className,
+    redirectTo = "/",
+    ...props
+}: LoginButtonProps) {
+
+    const handleLogin = async () => {
+        await supabaseClient.auth.signInWithOAuth({
+            provider: "google",
+            options: {
+                redirectTo: `${location.origin}/auth/callback?next=${redirectTo}`,
+            },
+        });
+    };
+
+    return (
+        <Button
+            variant={variant}
+            className={cn(className)}
+            onClick={handleLogin}
+            {...props}
+        >
+            {text}
+        </Button>
+    );
+}

frontend/src/components/auth/UserAuth.tsx

@@ -0,0 +1,124 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import { Button } from "@/components/ui/button";
+import {
+    DropdownMenu,
+    DropdownMenuContent,
+    DropdownMenuItem,
+    DropdownMenuLabel,
+    DropdownMenuSeparator,
+    DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
+import { LogOut, User, CreditCard } from "lucide-react";
+import Link from "next/link";
+import { useRouter } from "next/navigation";
+import { supabaseClient } from "@/lib/supabase-client";
+import { LoginButton } from "./LoginButton";
+import { cn } from "@/lib/utils";
+
+export function UserAuth() {
+    const [user, setUser] = useState<any>(null);
+    const supabase = supabaseClient;
+    const router = useRouter();
+
+    useEffect(() => {
+        const getUser = async () => {
+            const { data: { user } } = await supabase.auth.getUser();
+            setUser(user);
+            if (user) {
+                console.log("🔄 UserAuth: Calling RPC handle_user_login on mount");
+                await supabase.rpc('handle_user_login', {
+                    user_email: user.email,
+                    user_full_name: user.user_metadata.full_name || '',
+                    user_avatar_url: user.user_metadata.avatar_url || ''
+                }).then(({ error }) => {
+                    if (error) console.error("❌ RPC Error:", error);
+                    else console.log("✅ RPC Success: User synced");
+                });
+            }
+        };
+        getUser();
+
+        const { data: { subscription } } = supabase.auth.onAuthStateChange(async (_event, session) => {
+            setUser(session?.user ?? null);
+            if (session?.user) {
+                console.log("🔄 UserAuth: Calling RPC handle_user_login on auth change");
+                await supabase.rpc('handle_user_login', {
+                    user_email: session.user.email,
+                    user_full_name: session.user.user_metadata.full_name || '',
+                    user_avatar_url: session.user.user_metadata.avatar_url || ''
+                }).then(({ error }) => {
+                    if (error) console.error("❌ RPC Error:", error);
+                    else {
+                        console.log("✅ RPC Success: User synced");
+                        router.refresh();
+                    }
+                });
+            }
+            router.refresh();
+        });
+
+        return () => subscription.unsubscribe();
+    }, [supabase, router]);
+
+    const handleLogin = async () => {
+        await supabase.auth.signInWithOAuth({
+            provider: "google",
+            options: {
+                redirectTo: `${location.origin}/auth/callback`,
+            },
+        });
+    };
+
+    const handleLogout = async () => {
+        await supabase.auth.signOut();
+        router.refresh();
+    };
+
+    if (!user) {
+        return (
+            <LoginButton text="Sign In" className="bg-blue-600 hover:bg-blue-700 text-white font-medium px-6" />
+        );
+    }
+
+    return (
+        <DropdownMenu>
+            <DropdownMenuTrigger asChild>
+                <Button variant="ghost" className="relative h-10 w-10 rounded-full">
+                    <Avatar className="h-10 w-10 border border-slate-700">
+                        <AvatarImage src={user.user_metadata?.avatar_url} alt={user.user_metadata?.full_name} />
+                        <AvatarFallback>{user.email?.charAt(0).toUpperCase()}</AvatarFallback>
+                    </Avatar>
+                </Button>
+            </DropdownMenuTrigger>
+            <DropdownMenuContent className="w-56 bg-slate-900 border-slate-800 text-slate-200" align="end" forceMount>
+                <DropdownMenuLabel className="font-normal">
+                    <div className="flex flex-col space-y-1">
+                        <p className="text-sm font-medium leading-none text-white">{user.user_metadata?.full_name}</p>
+                        <p className="text-xs leading-none text-slate-400">{user.email}</p>
+                    </div>
+                </DropdownMenuLabel>
+                <DropdownMenuSeparator className="bg-slate-800" />
+                <DropdownMenuItem asChild>
+                    <Link href="/profile" className="cursor-pointer hover:bg-slate-800 focus:bg-slate-800">
+                        <User className="mr-2 h-4 w-4" />
+                        <span>Profile</span>
+                    </Link>
+                </DropdownMenuItem>
+                <DropdownMenuItem asChild>
+                    <Link href="/billing" className="cursor-pointer hover:bg-slate-800 focus:bg-slate-800">
+                        <CreditCard className="mr-2 h-4 w-4" />
+                        <span>Billing</span>
+                    </Link>
+                </DropdownMenuItem>
+                <DropdownMenuSeparator className="bg-slate-800" />
+                <DropdownMenuItem onClick={handleLogout} className="cursor-pointer text-red-400 hover:bg-red-950/30 focus:bg-red-950/30 hover:text-red-300 focus:text-red-300">
+                    <LogOut className="mr-2 h-4 w-4" />
+                    <span>Log out</span>
+                </DropdownMenuItem>
+            </DropdownMenuContent>
+        </DropdownMenu>
+    );
+}

frontend/src/components/landing/Footer.tsx

@@ -0,0 +1,72 @@
+import Link from "next/link";
+import { Video, Github, Twitter, Linkedin } from "lucide-react";
+
+export function Footer() {
+    return (
+        <footer className="bg-slate-950 border-t border-white/5 pt-16 pb-8">
+            <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
+                <div className="grid grid-cols-1 md:grid-cols-4 gap-12 mb-16">
+                    <div className="col-span-1 md:col-span-1">
+                        <Link href="/" className="flex items-center gap-2 mb-6">
+                            <img src="/logo.svg" alt="Logo" className="h-8 w-8" />
+                            <span className="text-lg font-bold text-white">VidSimplify</span>
+                        </Link>
+                        <p className="text-slate-400 text-sm leading-relaxed mb-6">
+                            Precision animation engine for the modern web. Explain complex systems with mathematical accuracy.
+                        </p>
+                        <div className="flex gap-4">
+                            <Link href="#" className="text-slate-400 hover:text-white transition-colors">
+                                <Twitter className="h-5 w-5" />
+                            </Link>
+                            <Link href="#" className="text-slate-400 hover:text-white transition-colors">
+                                <Github className="h-5 w-5" />
+                            </Link>
+                            <Link href="#" className="text-slate-400 hover:text-white transition-colors">
+                                <Linkedin className="h-5 w-5" />
+                            </Link>
+                        </div>
+                    </div>
+
+                    <div>
+                        <h3 className="text-white font-semibold mb-4">Product</h3>
+                        <ul className="space-y-3 text-sm text-slate-400">
+                            <li><Link href="#features" className="hover:text-blue-400 transition-colors">Features</Link></li>
+                            <li><Link href="#showcase" className="hover:text-blue-400 transition-colors">Showcase</Link></li>
+                            <li><Link href="/api-docs" className="hover:text-blue-400 transition-colors">API</Link></li>
+                            <li><Link href="#" className="hover:text-blue-400 transition-colors">Pricing</Link></li>
+                        </ul>
+                    </div>
+
+                    <div>
+                        <h3 className="text-white font-semibold mb-4">Resources</h3>
+                        <ul className="space-y-3 text-sm text-slate-400">
+                            <li><Link href="#" className="hover:text-blue-400 transition-colors">Documentation</Link></li>
+                            <li><Link href="#" className="hover:text-blue-400 transition-colors">Blog</Link></li>
+                            <li><Link href="#" className="hover:text-blue-400 transition-colors">Community</Link></li>
+                            <li><Link href="#" className="hover:text-blue-400 transition-colors">Help Center</Link></li>
+                        </ul>
+                    </div>
+
+                    <div>
+                        <h3 className="text-white font-semibold mb-4">Legal</h3>
+                        <ul className="space-y-3 text-sm text-slate-400">
+                            <li><Link href="#" className="hover:text-blue-400 transition-colors">Privacy Policy</Link></li>
+                            <li><Link href="#" className="hover:text-blue-400 transition-colors">Terms of Service</Link></li>
+                            <li><Link href="#" className="hover:text-blue-400 transition-colors">Cookie Policy</Link></li>
+                        </ul>
+                    </div>
+                </div>
+
+                <div className="border-t border-white/5 pt-8 flex flex-col md:flex-row justify-between items-center gap-4">
+                    <p className="text-slate-500 text-sm">
+                        © {new Date().getFullYear()} VidSimplify Inc. All rights reserved.
+                    </p>
+                    <div className="flex items-center gap-2 text-sm text-slate-500">
+                        <div className="h-2 w-2 rounded-full bg-green-500"></div>
+                        All Systems Operational
+                    </div>
+                </div>
+            </div>
+        </footer>
+    );
+}