Added Project

.env.example

@@ -0,0 +1,22 @@
+# Sikho Environment Configuration
+# Copy this file to .env and fill in your actual values
+
+# ====================================
+# REQUIRED: Google Gemini API Key
+# ====================================
+
+GEMINI_API_KEY=your_gemini_api_key_here
+
+# ====================================
+# OPTIONAL: Additional Configuration
+# ====================================
+
+# Server Configuration (uncomment to override defaults)
+# HOST=0.0.0.0
+# PORT=8000
+
+# Manim Quality Settings (low, medium, high)
+# MANIM_QUALITY=medium
+
+# Maximum concurrent video generations
+# MAX_WORKERS=2

.gitignore

@@ -0,0 +1,52 @@
+# Python
+__pycache__/
+*.pyc
+*.pyo
+*.pyd
+.Python
+env/
+venv/
+.venv/
+pip-log.txt
+pip-delete-this-directory.txt
+
+# Environment Variables
+.env
+
+# Manim / Media Output
+media/
+backend/media/
+backend/images/
+backend/videos/
+backend/texts/
+
+# Logs and Debug Output
+*.log
+error.log
+merge_error.log
+reproduction_output.txt
+models.txt
+models_clean.txt
+*_log.txt
+*_log_*.txt
+
+# Generated Files
+backend/scene_*.py
+backend/step_*_narration.mp3
+backend/narration_*.mp3
+
+# OS generated files
+.DS_Store
+Thumbs.db
+*.swp
+*.swo
+
+# IDEs
+.vscode/
+.idea/
+*.code-workspace
+
+# Models
+backend/models/*.gguf
+RENDER_DEPLOY.md
+HUGGINGFACE_DEPLOY.md

CONTRIBUTING.md

@@ -0,0 +1,93 @@
+# Contributing to Sikho
+
+Thank you for your interest in contributing to Sikho! We welcome contributions from the community.
+
+## How to Contribute
+
+### Reporting Bugs
+
+If you find a bug, please create an issue with:
+
+- Clear description of the problem
+- Steps to reproduce
+- Expected vs actual behavior
+- Environment details (OS, Python version, etc.)
+
+### Suggesting Features
+
+Feature suggestions are welcome! Please:
+
+- Check existing issues first
+- Provide clear use case
+- Explain expected behavior
+- Include examples if possible
+
+### Pull Requests
+
+1. **Fork the repository**
+
+   ```bash
+   git clone https://github.com/MdZaheen/sikho-scaler.git
+   ```
+
+2. **Create a feature branch**
+
+   ```bash
+   git checkout -b feature/your-feature-name
+   ```
+
+3. **Make your changes**
+
+   - Follow existing code style
+   - Add comments for complex logic
+   - Update documentation if needed
+
+4. **Test your changes**
+
+   ```bash
+   # Run the application
+   cd backend
+   uvicorn main:app --reload
+
+   # Test with various prompts
+   ```
+
+5. **Commit with clear messages**
+
+   ```bash
+   git commit -m "Add: description of your changes"
+   ```
+
+6. **Push and create PR**
+   ```bash
+   git push origin feature/your-feature-name
+   ```
+
+## Code Style
+
+- Follow PEP 8 for Python code
+- Use meaningful variable names
+- Add docstrings for functions
+- Keep functions focused and small
+
+## Areas for Contribution
+
+- 🎨 Frontend improvements
+- 🤖 Additional AI model integrations
+- 🎬 New animation effects
+- 📚 Documentation enhancements
+- 🐛 Bug fixes
+- ⚡ Performance optimizations
+- 🧪 Test coverage
+
+## Development Setup
+
+See [README.md](README.md) for setup instructions.
+
+## Questions?
+
+Feel free to open an issue for any questions!
+
+---
+
+Thank you for making Sikho better! 🙏

DEPLOYMENT.md

@@ -0,0 +1,216 @@
+# 🚀 Deployment Guide
+
+This guide will help you deploy Sikho to production.
+
+## Prerequisites
+
+- Python 3.8+
+- FFmpeg installed
+- Google Gemini API key
+- Server with at least 2GB RAM
+
+## Quick Deployment Steps
+
+### 1. Environment Setup
+
+```bash
+# Clone repository
+git clone https://github.com/MdZaheen/sikho-scaler.git
+cd sikho-scaler
+
+# Create virtual environment
+python -m venv sikho
+source sikho/bin/activate  # Linux/Mac
+# sikho\Scripts\activate  # Windows
+```
+
+### 2. Install Dependencies
+
+```bash
+cd backend
+pip install -r requirements.txt
+```
+
+### 3. Configure Environment Variables
+
+Create a `.env` file in the project root:
+
+```env
+GEMINI_API_KEY=your_actual_gemini_api_key
+```
+
+### 4. Configure FFmpeg Path
+
+Edit `backend/main.py` lines 13-18 and set your FFmpeg path:
+
+**Windows:**
+
+```python
+ffmpeg_path = r"C:\ffmpeg\bin"
+```
+
+**Linux/Mac:**
+FFmpeg should be in your system PATH. You can comment out the FFmpeg configuration block.
+
+### 5. Test Locally
+
+```bash
+cd backend
+uvicorn main:app --reload
+```
+
+Visit `http://localhost:8000` to verify everything works.
+
+## Production Deployment
+
+### Option 1: Using Gunicorn (Linux/Mac)
+
+```bash
+pip install gunicorn
+
+# Run with 4 workers
+gunicorn -w 4 -k uvicorn.workers.UvicornWorker main:app --bind 0.0.0.0:8000
+```
+
+### Option 2: Using Uvicorn in Production
+
+```bash
+uvicorn main:app --host 0.0.0.0 --port 8000 --workers 4
+```
+
+### Option 3: Docker Deployment
+
+Create `Dockerfile`:
+
+```dockerfile
+FROM python:3.10-slim
+
+# Install FFmpeg
+RUN apt-get update && apt-get install -y ffmpeg && rm -rf /var/lib/apt/lists/*
+
+WORKDIR /app
+
+# Copy requirements and install dependencies
+COPY backend/requirements.txt .
+RUN pip install --no-cache-dir -r requirements.txt
+
+# Copy application
+COPY backend/ .
+COPY .env .
+
+EXPOSE 8000
+
+CMD ["uvicorn", "main:app", "--host", "0.0.0.0", "--port", "8000"]
+```
+
+Build and run:
+
+```bash
+docker build -t sikho-scaler .
+docker run -p 8000:8000 --env-file .env sikho-scaler
+```
+
+### Option 4: Nginx Reverse Proxy
+
+Configure Nginx:
+
+```nginx
+server {
+    listen 80;
+    server_name your-domain.com;
+
+    location / {
+        proxy_pass http://127.0.0.1:8000;
+        proxy_set_header Host $host;
+        proxy_set_header X-Real-IP $remote_addr;
+        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
+        proxy_set_header X-Forwarded-Proto $scheme;
+
+        # Increase timeout for video generation
+        proxy_read_timeout 300s;
+        proxy_connect_timeout 300s;
+    }
+}
+```
+
+## Performance Optimization
+
+### 1. Enable Caching
+
+Add response caching for static files in `main.py`:
+
+```python
+app.mount("/static", StaticFiles(directory=STATIC_DIR), name="static")
+```
+
+### 2. Cleanup Generated Files
+
+Add a cleanup task to remove old videos:
+
+```bash
+# Cron job to clean files older than 24 hours
+0 */6 * * * find /path/to/sikho-scaler/backend/media -name "*.mp4" -mtime +1 -delete
+```
+
+### 3. Resource Limits
+
+Monitor RAM usage during rendering. Manim can be memory-intensive for complex animations.
+
+## Security Checklist
+
+- ✅ Keep `.env` file secure (never commit to git)
+- ✅ Use HTTPS in production (Let's Encrypt/Certbot)
+- ✅ Set rate limiting for API endpoints
+- ✅ Regularly update dependencies
+- ✅ Use environment-based configuration
+
+## Monitoring
+
+### Health Check Endpoint
+
+The API includes a health check at `/status`:
+
+```bash
+curl http://localhost:8000/status
+```
+
+### Logs
+
+Monitor application logs:
+
+```bash
+# With uvicorn
+uvicorn main:app --log-level info
+
+# With Docker
+docker logs -f container_id
+```
+
+## Troubleshooting
+
+| Issue                     | Solution                                                         |
+| ------------------------- | ---------------------------------------------------------------- |
+| FFmpeg not found          | Install FFmpeg: `apt install ffmpeg` or download from ffmpeg.org |
+| Gemini API quota exceeded | Check your API usage at console.cloud.google.com                 |
+| Out of memory             | Reduce concurrent workers or increase server RAM                 |
+| Slow rendering            | Use lower quality settings or optimize prompts                   |
+
+## Scaling
+
+For high-traffic deployments:
+
+1. **Use a task queue** (Celery + Redis) for async video generation
+2. **CDN for videos** - Store generated videos on S3/Cloud Storage
+3. **Load balancer** - Distribute requests across multiple instances
+4. **Database** - Track generation history and cache results
+
+## Support
+
+For issues or questions:
+
+- GitHub Issues: https://github.com/MdZaheen/sikho-scaler/issues
+- Email: [Your contact email]
+
+---
+
+**Happy Deploying! 🎉**

Dockerfile

@@ -0,0 +1,27 @@
+FROM python:3.10-slim
+
+# Install system dependencies including FFmpeg
+RUN apt-get update && apt-get install -y \
+    ffmpeg \
+    && rm -rf /var/lib/apt/lists/*
+
+# Set working directory
+WORKDIR /app
+
+# Copy requirements and install Python dependencies
+COPY backend/requirements.txt .
+RUN pip install --no-cache-dir -r requirements.txt
+
+# Copy application code
+COPY backend/ .
+COPY .env .env
+
+# Expose port
+EXPOSE 8000
+
+# Health check
+HEALTHCHECK --interval=30s --timeout=10s --start-period=5s --retries=3 \
+    CMD python -c "import requests; requests.get('http://localhost:8000/status')"
+
+# Run the application
+CMD ["uvicorn", "main:app", "--host", "0.0.0.0", "--port", "8000"]

HF_README.md

@@ -0,0 +1,70 @@
+---
+title: Animetrix AI
+emoji: 🎬
+colorFrom: orange
+colorTo: red
+sdk: gradio
+sdk_version: 4.50.0
+app_file: app.py
+pinned: false
+license: mit
+python_version: 3.10
+models:
+  - google/gemini-2.0-flash-exp
+---
+
+# 🎬 Animetrix AI - Educational Animation Generator
+
+Transform text descriptions into professional educational animations using AI and Manim.
+
+## ✨ Features
+
+- 🤖 **AI-Powered**: Uses Google Gemini for intelligent content generation
+- 🎨 **Professional Quality**: Manim Community Edition for stunning visuals
+- 🎙️ **Synchronized Narration**: Auto-generated voiceover with perfect timing
+- ⚡ **Fast Rendering**: Optimized pipeline for quick results
+- 🎯 **Easy to Use**: Just describe your concept in plain English
+
+## 🚀 How It Works
+
+1. **Enter your prompt** - Describe the concept you want to visualize
+2. **AI plans the animation** - Gemini creates a structured outline
+3. **Code generation** - Automatic Manim script creation
+4. **Rendering** - Professional video with narration
+5. **Done!** - Download or share your animation
+
+## 📝 Example Prompts
+
+- "Explain the Pythagorean theorem with a visual proof"
+- "Show how binary search works step by step"
+- "Visualize how compound interest grows over time"
+- "Demonstrate the structure of an atom"
+
+## 🛠️ Tech Stack
+
+- **AI Model**: Google Gemini 2.0 Flash
+- **Animation**: Manim Community Edition
+- **Text-to-Speech**: gTTS
+- **Video Processing**: MoviePy + FFmpeg
+- **Interface**: Gradio
+
+## 🔗 Links
+
+- [GitHub Repository](https://github.com/MdZaheen/sikho-scaler)
+- [Documentation](https://github.com/MdZaheen/sikho-scaler#readme)
+- [Report Issues](https://github.com/MdZaheen/sikho-scaler/issues)
+
+## 📄 License
+
+MIT License - See [LICENSE](LICENSE) for details
+
+## 👨‍💻 Author
+
+**Md Zaheen**
+
+- GitHub: [@MdZaheen](https://github.com/MdZaheen)
+- Repository: [sikho-scaler](https://github.com/MdZaheen/sikho-scaler)
+
+---
+
+**Made with ❤️ using AI and Manim**

LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Sayed Zahur
+
+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,367 @@
+# � Animetrix AI - AI Educational Animation Generator
+
+> Create professional educational animations from natural language using AI and Manim
+
+---
+
+## 📋 Overview
+
+**Animetrix AI** is an intelligent animation generation platform that transforms simple text descriptions into high-quality educational videos. Powered by Google Gemini AI and Manim Community Edition, it automatically interprets concepts, generates animation code, and renders professional videos with synchronized voiceovers.
+
+### Key Features
+
+- 🤖 **AI-Powered Generation** — Natural language to animated video pipeline
+- 🎬 **Synchronized Narration** — Step-by-step voiceover perfectly timed with animations
+- 🎨 **Professional Quality** — Clean Manim animations with smart post-processing
+- 🔧 **Self-Correcting** — Automatic error detection and code sanitization
+- 🚀 **Production Ready** — FastAPI backend with modern web interface
+
+---
+
+## 🏗 Architecture
+
+```mermaid
+graph TD
+    A[User Prompt] --> B[Teacher Module]
+    B --> C[Gemini AI - Outline Generation]
+    C --> D[Structured JSON with Steps]
+    D --> E[Narrator - Per-Step Audio]
+    E --> F[Compiler - Code Generation]
+    F --> G[Gemini AI - Manim Code]
+    G --> H[Code Sanitization]
+    H --> I[Runner - Manim Rendering]
+    I --> J[Video + Audio Merge]
+    J --> K[Final MP4 Output]
+```
+
+### Pipeline Stages
+
+1. **Teacher** (`teacher.py`) - Converts prompts into structured educational outlines
+2. **Narrator** (`narrator.py`) - Generates per-step narration audio with gTTS
+3. **Compiler** (`compiler.py`) - Creates clean Manim code with audio synchronization
+4. **Runner** (`runner.py`) - Executes rendering and merges audio/video
+
+---
+
+## 🛠 Tech Stack
+
+### Backend
+
+- **FastAPI** - High-performance async API framework
+- **Google Gemini 2.5 Flash** - AI model for outline and code generation
+- **Manim Community Edition** - Professional animation engine
+- **gTTS** - Text-to-speech for narration
+- **MoviePy** - Audio/video processing
+
+### Frontend
+
+- **Tailwind CSS** - Modern, responsive design
+- **Three.js** - Animated particle background
+- **Vanilla JavaScript** - Lightweight, no framework overhead
+
+### Infrastructure
+
+- Python 3.8+
+- FFmpeg for video encoding
+- Environment-based configuration
+
+---
+
+## 📁 Project Structure
+
+```
+animetrix-ai/
+├── backend/
+│   ├── main.py              # FastAPI application & pipeline orchestration
+│   ├── teacher.py           # Outline generation (Gemini)
+│   ├── compiler.py          # Code generation & sanitization (Gemini)
+│   ├── runner.py            # Manim rendering
+│   ├── narrator.py          # Audio generation & merging
+│   ├── requirements.txt     # Python dependencies
+│   ├── static/
+│   │   └── index.html       # Web interface
+│   └── media/               # Generated videos & audio
+├── .env                     # Environment variables
+├── .gitignore
+└── README.md
+```
+
+---
+
+## 🚀 Quick Start
+
+### Prerequisites
+
+- Python 3.8 or higher
+- FFmpeg installed and in PATH
+- Google Gemini API key
+
+### Installation
+
+1. **Clone the repository**
+
+   ```bash
+   git clone https://github.com/MdZaheen/sikho-scaler.git
+   cd sikho-scaler
+   ```
+
+2. **Create virtual environment**
+
+   ```bash
+   python -m venv venv
+   venv\Scripts\activate  # Windows
+   # source venv/bin/activate  # Linux/Mac
+   ```
+
+3. **Install dependencies**
+
+   ```bash
+   cd backend
+   pip install -r requirements.txt
+   ```
+
+4. **Configure environment**
+
+   Create `.env` file in the root directory:
+
+   ```env
+   GEMINI_API_KEY=your_gemini_api_key_here
+   ```
+
+5. **Update FFmpeg path** (Windows)
+
+   Edit [main.py](backend/main.py#L13) and set your FFmpeg path:
+
+   ```python
+   ffmpeg_path = r"C:\path\to\ffmpeg\bin"
+   ```
+
+### Running the Application
+
+```bash
+cd backend
+uvicorn main:app --reload
+```
+
+Open your browser and navigate to:
+
+```
+http://localhost:8000
+```
+
+---
+
+## 🎯 Usage
+
+1. **Enter a prompt** in the text area (e.g., "Explain the Pythagorean theorem with a visual proof")
+2. **Click Generate** to start the pipeline
+3. **Monitor progress** through real-time status updates:
+   - Planning (outline generation)
+   - Coding (Manim script creation)
+   - Executing (animation rendering)
+4. **Watch the result** - video automatically plays when ready
+
+### Example Prompts
+
+- "Show how compound interest grows over time"
+- "Visualize the concept of derivatives with a tangent line"
+- "Demonstrate bubble sort algorithm step by step"
+- "Explain photosynthesis with animated diagrams"
+
+---
+
+## 🔧 Configuration
+
+### Environment Variables
+
+| Variable         | Description           | Required |
+| ---------------- | --------------------- | -------- |
+| `GEMINI_API_KEY` | Google Gemini API key | Yes      |
+
+### FFmpeg Configuration
+
+Update the FFmpeg path in [main.py](backend/main.py) line 13:
+
+```python
+ffmpeg_path = r"M:\Ap\ffmpeg-7.1.1-essentials_build\ffmpeg-7.1.1-essentials_build\bin"
+```
+
+---
+
+## 📡 API Reference
+
+### POST `/generate`
+
+Generate an educational animation from a text prompt.
+
+**Request Body:**
+
+```json
+{
+  "prompt": "Explain Newton's first law of motion"
+}
+```
+
+**Response:**
+
+```json
+{
+  "status": "started"
+}
+```
+
+### GET `/status`
+
+Check the current generation status.
+
+**Response:**
+
+```json
+{
+  "stage": "executing",
+  "message": "Rendering Animation Frames...",
+  "video_path": null,
+  "error": null
+}
+```
+
+### GET `/video/{path}`
+
+Retrieve the generated video file.
+
+---
+
+## 🐛 Troubleshooting
+
+| Issue                 | Solution                                                          |
+| --------------------- | ----------------------------------------------------------------- |
+| FFmpeg not found      | Ensure FFmpeg is installed and path is correctly set in `main.py` |
+| Gemini API errors     | Verify your API key is valid and has sufficient quota             |
+| Import errors         | Run `pip install -r requirements.txt` in the backend directory    |
+| Manim rendering fails | Check that Manim CE is properly installed: `pip install manim`    |
+
+---
+
+## 🌐 Free Deployment Options
+
+### Option 1: Render.com (Recommended)
+
+**Best for: Simple, automated deployments**
+
+- ✅ Free tier with 750 hours/month
+- ✅ Auto-deploy from GitHub
+- ✅ Built-in SSL
+- ⚠️ Spins down after inactivity (cold starts ~30s)
+
+**Steps:**
+
+1. Push code to GitHub
+2. Connect to [Render.com](https://render.com)
+3. Create new Web Service
+4. Add environment variable: `GEMINI_API_KEY`
+5. Build command: `cd backend && pip install -r requirements.txt`
+6. Start command: `cd backend && uvicorn main:app --host 0.0.0.0 --port $PORT`
+
+### Option 2: Railway.app
+
+**Best for: Quick deployments with generous free tier**
+
+- ✅ $5 free credit/month
+- ✅ No sleep/cold starts
+- ✅ GitHub integration
+
+**Steps:**
+
+1. Connect GitHub repo to [Railway.app](https://railway.app)
+2. Add `GEMINI_API_KEY` in Variables
+3. Set start command: `cd backend && uvicorn main:app --host 0.0.0.0 --port $PORT`
+
+### Option 3: Fly.io
+
+**Best for: Global edge deployment**
+
+- ✅ Free tier: 3 shared VMs
+- ✅ Global CDN
+- ✅ Fast performance
+
+**Steps:**
+
+1. Install Fly CLI: `curl -L https://fly.io/install.sh | sh`
+2. Login: `fly auth login`
+3. Launch: `fly launch`
+4. Set secrets: `fly secrets set GEMINI_API_KEY=your_key`
+
+### Option 4: Google Cloud Run
+
+**Best for: Pay-per-use, scales to zero**
+
+- ✅ 2 million requests/month free
+- ✅ No cold start issues
+- ✅ Integrated with Google services
+
+**Steps:**
+
+1. Create `Dockerfile` in project root:
+   ```dockerfile
+   FROM python:3.10-slim
+   RUN apt-get update && apt-get install -y ffmpeg && rm -rf /var/lib/apt/lists/*
+   WORKDIR /app
+   COPY backend/requirements.txt .
+   RUN pip install --no-cache-dir -r requirements.txt
+   COPY backend/ .
+   EXPOSE 8080
+   CMD ["uvicorn", "main:app", "--host", "0.0.0.0", "--port", "8080"]
+   ```
+2. Deploy: `gcloud run deploy animetrix-ai --source .`
+
+### Option 5: Hugging Face Spaces
+
+**Best for: ML/AI community exposure**
+
+- ✅ Free GPU access (limited)
+- ✅ Great for demos
+- ✅ Built-in community
+
+**Steps:**
+
+1. Create new Space at [huggingface.co/spaces](https://huggingface.co/spaces)
+2. Select "Gradio" or "Streamlit" SDK
+3. Push code to Space repository
+4. Add `GEMINI_API_KEY` in Space secrets
+
+### Comparison Table
+
+| Platform             | Free Tier      | Cold Starts | Deployment | Best For        |
+| -------------------- | -------------- | ----------- | ---------- | --------------- |
+| **Render.com**       | ✅ 750h/month  | Yes (~30s)  | Easiest    | Beginners       |
+| **Railway.app**      | ✅ $5 credit   | No          | Easy       | Active projects |
+| **Fly.io**           | ✅ 3 VMs       | Minimal     | Moderate   | Performance     |
+| **Google Cloud Run** | ✅ 2M requests | Minimal     | Advanced   | Scale           |
+| **Hugging Face**     | ✅ Free GPU    | No          | Easy       | ML Community    |
+
+**💡 Recommendation:** Start with **Render.com** for easiest setup, then migrate to **Railway.app** or **Fly.io** for production use.
+
+---
+
+## 🤝 Contributing
+
+Contributions are welcome! Please feel free to submit issues or pull requests.
+
+---
+
+## 📄 License
+
+This project is open source and available under the MIT License.
+
+---
+
+## 👨‍💻 Author
+
+**Md Zaheen**
+
+- GitHub: [@MdZaheen](https://github.com/MdZaheen)
+- Repository: [sikho-scaler](https://github.com/MdZaheen/sikho-scaler)
+
+---
+
+**Made with ❤️ using AI and Manim**

app.py

@@ -0,0 +1,213 @@
+"""
+Animetrix AI - Gradio Interface for Hugging Face Spaces
+Educational Animation Generator powered by AI and Manim
+"""
+
+import gradio as gr
+import os
+import sys
+from pathlib import Path
+import asyncio
+import shutil
+
+# Add backend to path
+backend_path = Path(__file__).parent / "backend"
+sys.path.insert(0, str(backend_path))
+
+from dotenv import load_dotenv
+load_dotenv()
+
+# Configure FFmpeg for Hugging Face Spaces (already available in system PATH)
+if shutil.which('ffmpeg') is None:
+    print("⚠️ FFmpeg not found - installing...")
+    os.system("apt-get update && apt-get install -y ffmpeg")
+
+# Import backend functions
+from teacher import generate_outline
+from compiler import generate_manim_code
+from runner import render_scene
+from narrator import generate_narration_audio, merge_audio_video
+
+async def generate_animation(prompt, progress=gr.Progress()):
+    """Generate educational animation from text prompt"""
+    try:
+        # Validate input
+        if not prompt or len(prompt.strip()) < 10:
+            return None, "❌ Please enter a more detailed prompt (at least 10 characters)"
+        
+        progress(0, desc="🎯 Initializing...")
+        
+        # Step 1: Generate outline
+        progress(0.1, desc="📚 Planning animation structure...")
+        outline = await generate_outline(prompt)
+        
+        # Step 2: Generate per-step narration
+        progress(0.3, desc="🎙️ Generating narration audio...")
+        steps = outline.get("steps", [])
+        step_audio_paths = []
+        
+        for idx, step in enumerate(steps):
+            narration = step.get("narration", "")
+            if narration:
+                audio_filename = f"step_{idx+1}_narration.mp3"
+                audio_path = generate_narration_audio(narration, filename=audio_filename)
+                step_audio_paths.append(audio_path)
+                progress(0.3 + (0.1 * (idx+1) / len(steps)), desc=f"🎙️ Narration {idx+1}/{len(steps)}...")
+            else:
+                step_audio_paths.append(None)
+        
+        # Step 3: Generate Manim code
+        progress(0.5, desc="💻 Generating animation code...")
+        code = await generate_manim_code(outline, step_audio_paths=step_audio_paths)
+        
+        # Step 4: Render video
+        progress(0.7, desc="🎬 Rendering video (this takes 30-60s)...")
+        video_path = await render_scene(code)
+        
+        # Step 5: Merge audio
+        progress(0.9, desc="🔊 Finalizing with audio...")
+        if any(step_audio_paths):
+            # For now, merge the first available audio
+            first_audio = next((a for a in step_audio_paths if a), None)
+            if first_audio and os.path.exists(first_audio):
+                video_path = merge_audio_video(video_path, first_audio)
+        
+        progress(1.0, desc="✅ Complete!")
+        
+        # Return video and success message
+        if os.path.exists(video_path):
+            return video_path, f"✅ Animation generated successfully!\n\n📊 Stats:\n- Steps: {len(steps)}\n- Topic: {outline.get('topic', 'N/A')}"
+        else:
+            return None, "❌ Video file not found after rendering"
+        
+    except Exception as e:
+        error_msg = f"❌ Error: {str(e)}\n\nPlease try:\n1. A simpler prompt\n2. Check if GEMINI_API_KEY is set\n3. Report this issue on GitHub"
+        print(f"Error in generate_animation: {e}")
+        import traceback
+        traceback.print_exc()
+        return None, error_msg
+
+def generate_sync(prompt):
+    """Synchronous wrapper for Gradio"""
+    return asyncio.run(generate_animation(prompt))
+
+# Example prompts
+EXAMPLES = [
+    ["Explain the Pythagorean theorem with a right triangle and show a^2 + b^2 = c^2"],
+    ["Show how binary search algorithm works with a sorted array"],
+    ["Visualize the structure of an atom with nucleus and orbiting electrons"],
+    ["Demonstrate how compound interest grows over time with a graph"],
+    ["Explain Newton's first law of motion with a simple example"],
+    ["Show bubble sort algorithm sorting an array step by step"],
+]
+
+# Custom CSS
+custom_css = """
+.gradio-container {
+    font-family: 'Inter', sans-serif;
+}
+.contain {
+    max-width: 1200px;
+    margin: auto;
+}
+footer {
+    display: none !important;
+}
+"""
+
+# Create Gradio interface
+with gr.Blocks(
+    theme=gr.themes.Soft(
+        primary_hue="orange",
+        secondary_hue="gray",
+        neutral_hue="slate",
+    ),
+    css=custom_css,
+    title="Animetrix AI - Educational Animation Generator"
+) as demo:
+    
+    gr.Markdown(
+        """
+        # 🎬 Animetrix AI
+        ## AI-Powered Educational Animation Generator
+        
+        Transform your ideas into professional educational animations using AI and Manim.
+        Powered by Google Gemini and Manim Community Edition.
+        """
+    )
+    
+    with gr.Row():
+        with gr.Column(scale=3):
+            prompt_input = gr.Textbox(
+                label="💡 Describe the concept you want to animate",
+                placeholder="e.g., Explain how photosynthesis works in plants...",
+                lines=4,
+                max_lines=6
+            )
+            
+            with gr.Row():
+                clear_btn = gr.ClearButton([prompt_input])
+                submit_btn = gr.Button("🎬 Generate Animation", variant="primary", size="lg")
+        
+        with gr.Column(scale=2):
+            gr.Markdown(
+                """
+                ### 💡 Tips for Best Results
+                
+                - **Be specific**: Include what you want to see
+                - **Use simple language**: Avoid complex jargon
+                - **Mention visuals**: Circles, arrows, graphs, etc.
+                - **Keep it focused**: One concept per animation
+                
+                ### ⏱️ Processing Time
+                - Planning: ~5 seconds
+                - Narration: ~10 seconds  
+                - Rendering: ~30-60 seconds
+                
+                **Total: 1-2 minutes**
+                """
+            )
+    
+    video_output = gr.Video(label="📹 Generated Animation", height=400)
+    status_output = gr.Textbox(label="Status", lines=4, show_label=True)
+    
+    gr.Markdown("### 📚 Example Prompts (Click to try)")
+    gr.Examples(
+        examples=EXAMPLES,
+        inputs=[prompt_input],
+        label="Try these examples:"
+    )
+    
+    gr.Markdown(
+        """
+        ---
+        ### 🛠️ Tech Stack
+        - **AI**: Google Gemini 2.0 Flash
+        - **Animation**: Manim Community Edition
+        - **Narration**: gTTS (Google Text-to-Speech)
+        - **Video Processing**: MoviePy + FFmpeg
+        
+        ### 🔗 Links
+        - [GitHub Repository](https://github.com/MdZaheen/sikho-scaler)
+        - [Report Issues](https://github.com/MdZaheen/sikho-scaler/issues)
+        - [Documentation](https://github.com/MdZaheen/sikho-scaler#readme)
+        
+        **Made with ❤️ by Md Zaheen**
+        """
+    )
+    
+    # Event handlers
+    submit_btn.click(
+        fn=generate_sync,
+        inputs=[prompt_input],
+        outputs=[video_output, status_output],
+        api_name="generate"
+    )
+
+# Launch configuration
+if __name__ == "__main__":
+    demo.queue(max_size=5).launch(
+        server_name="0.0.0.0",
+        server_port=7860,
+        show_error=True
+    )

backend/compiler.py

@@ -0,0 +1,290 @@
+
+import os
+import json
+import re
+from google import genai
+from google.genai import types
+
+COMPILER_SYSTEM_PROMPT = """
+You are a deterministic Manim script generator for a text-to-educational-animation engine.
+
+Your job:
+Convert the user prompt into a single clean Manim Community Edition Python script.
+
+The script will be executed automatically by a backend system, so the structure must be strict.
+
+────────────────────────────
+
+ABSOLUTE REQUIREMENTS
+
+────────────────────────────
+
+Always output ONLY Python code.
+
+No markdown
+No explanations
+No comments
+No triple quotes
+
+Exactly 1 Scene class:
+
+class GenScene(Scene):
+
+
+Never use any other scene name.
+
+Imports:
+
+from manim import *
+
+
+No LaTeX
+Never use:
+MathTex
+Tex
+Matrix
+TexTemplate
+
+Use only:
+Text("expression or label")
+
+
+────────────────────────────
+
+ASCII RULES (CRITICAL)
+
+────────────────────────────
+
+1. NEVER output Unicode mathematical characters or subscript/superscript glyphs.
+   ❌ Do not use: ² ₁ ₓ α β γ θ π σ → ∞ × ÷
+   ✔️ Instead use ONLY plain ASCII text:
+   "x^2" instead of "x²"
+   "x_1" instead of "x₁"
+   "pi" instead of "π"
+   "velocity" instead of "→v"
+
+2. The script must be compatible with Windows console and UTF-8 only.
+   - No special glyphs, emoji, arrows, smart quotes, curly quotes, or accents.
+
+────────────────────────────
+
+VISUAL RULES (CRITICAL)
+
+────────────────────────────
+
+1. NEVER allow visuals to go outside the video frame.
+   - Keep all objects centered or inside safe boundaries.
+   - Do not let squares, shapes, or arrows clip off-screen.
+   - Standard frame is [-7, 7] horizontally and [-4, 4] vertically. Keep well within this.
+
+2. No overlapping elements.
+   - All text must be positioned with next_to(), move_to(), or buff>=0.4.
+   - All shapes must have spacing.
+   - If a square represents a², show the label inside or beside — never over other shapes.
+
+3. Visual accuracy FIRST.
+   - Show geometry clearly.
+   - Avoid rotating or stretching objects unnecessarily.
+   - Avoid random effects.
+
+────────────────────────────
+
+ANIMATION RULES
+
+────────────────────────────
+
+1. Slow down animations & make them educational.
+   - Use 0.5–1 second durations for Create(), Write(), FadeIn().
+   - Avoid sudden transitions.
+   - Avoid instant scaling or teleporting.
+
+2. Only use these animations:
+   Create
+   FadeIn
+   FadeOut
+   Write
+   Transform
+   MoveTo
+   Scale
+   Rotate
+
+3. No 3D, no camera zoom, no cinematic effects, no physics.
+
+────────────────────────────
+
+STRUCTURE & PACING
+
+────────────────────────────
+
+1. Follow step-by-step logic:
+   - Introduce main idea
+   - Draw objects (one-by-one, not overlapping)
+   - Highlight key components
+   - Explain or show the formula visually
+   - Conclude cleanly
+
+2. Keep total runtime 12–18 seconds.
+   - Use self.wait(1) or self.wait(2) to pace the video.
+
+────────────────────────────
+
+OUTPUT FORMAT EXAMPLE
+
+────────────────────────────
+
+from manim import *
+
+class GenScene(Scene):
+    def construct(self):
+        # 1. Introduce
+        title = Text("Concept Name").scale(0.8).to_edge(UP)
+        self.play(Write(title), run_time=1)
+        self.wait(0.5)
+
+        # 2. Draw Objects
+        box = Square(side_length=2, color=BLUE)
+        self.play(Create(box), run_time=1)
+        self.wait(0.5)
+
+        # 3. Label (No overlap)
+        label = Text("Side = 2").next_to(box, DOWN, buff=0.5)
+        self.play(Write(label), run_time=1)
+        self.wait(1)
+
+        # 4. Conclude
+        self.play(FadeOut(box), FadeOut(label), run_time=1)
+        self.wait(1)
+
+────────────────────────────
+
+FINAL OUTPUT RULE
+
+────────────────────────────
+
+➡️ Return ONLY Python code.
+➡️ No formatting, no text, no explanations.
+➡️ Only 1 Scene class named GenScene.
+"""
+
+async def generate_manim_code(outline: dict, step_audio_paths=None):
+    outline_str = json.dumps(outline, indent=2)
+    api_key = os.environ.get("GEMINI_API_KEY")
+    if not api_key:
+        raise ValueError("GEMINI_API_KEY not found in environment variables.")
+    
+    client = genai.Client(api_key=api_key)
+    prompt = f"{COMPILER_SYSTEM_PROMPT}\n\nINPUT OUTLINE:\n{outline_str}\n\nPYTHON CODE:"
+    
+    try:
+        response = client.models.generate_content(
+            model='gemini-2.0-flash-exp',
+            contents=prompt
+        )
+        code = response.text.strip()
+        # Cleanup markdown if present
+        if code.startswith("```python"):
+            code = code[9:]
+        elif code.startswith("```"):
+            code = code[3:]
+        if code.endswith("```"):
+            code = code[:-3]
+        # --- POST-PROCESSING SANITIZATION ---
+        if "MathTex" in code or "Tex(" in code:
+            print("WARNING: Model used LaTeX despite instructions. Sanitizing code...")
+            code = code.replace("MathTex", "Text")
+            code = code.replace("Tex(", "Text(")
+            replacements = {
+                r"^\\circ": " degrees", r"\\circ": " degrees", "°": " degrees",
+                r"\\theta": "theta", "θ": "theta",
+                r"\\pi": "pi", "π": "pi",
+                r"\\alpha": "alpha", "α": "alpha",
+                r"\\beta": "beta", "β": "beta",
+                r"\\gamma": "gamma", "γ": "gamma",
+                r"\\sigma": "sigma", "σ": "sigma",
+                r"\\Delta": "Delta", "Δ": "Delta",
+                r"\\times": "x", "×": "x",
+                r"\\cdot": "*", "·": "*",
+                r"\\div": "/", "÷": "/",
+                r"\\pm": "+/-", "±": "+/-",
+                r"\\approx": "~", "≈": "~",
+                r"\\neq": "!=", "≠": "!=",
+                r"\\le": "<=", "≤": "<=",
+                r"\\ge": ">=", "≥": ">=",
+                r"\\infty": "infinity", "∞": "infinity",
+                r"\\Rightarrow": "->", "⇒": "->",
+                r"\\rightarrow": "->", "→": "->",
+                r"\\leftarrow": "<-", "←": "<-",
+                "²": "^2", "³": "^3", "₁": "_1", "₂": "_2", "ₓ": "_x",
+                r"\\\\": "\n", # Double backslash to newline
+                "–": "-", # En dash to hyphen
+                "—": "-", # Em dash to hyphen
+                "’": "'", # Smart quotes
+                "“": '"',
+                "”": '"',
+            }
+            for pattern, replacement in replacements.items():
+                code = code.replace(pattern, replacement)
+        # Remove any model-generated self.add_sound calls (we'll insert our own)
+        lines = code.split('\n')
+        code = '\n'.join([line for line in lines if "self.add_sound" not in line])
+        # Fix .center usage (replace .center with .get_center() only when used as an argument)
+        code = re.sub(r'([\w\)\]]+)\.center(\s*\))', r'\1.get_center()\2', code)
+        code = re.sub(r'class\s+\w+\(Scene\):', 'class GenScene(Scene):', code)
+
+        # --- Insert self.add_sound and self.wait for each step ---
+        if step_audio_paths and isinstance(step_audio_paths, list):
+            # Try to find the construct() method and insert after each animation step
+            import ast
+            try:
+                # Parse the code to find the construct() method
+                class ConstructVisitor(ast.NodeVisitor):
+                    def __init__(self):
+                        self.construct_node = None
+                    def visit_FunctionDef(self, node):
+                        if node.name == "construct":
+                            self.construct_node = node
+
+                tree = ast.parse(code)
+                visitor = ConstructVisitor()
+                visitor.visit(tree)
+                if visitor.construct_node:
+                    # Get the lines of the code
+                    code_lines = code.split('\n')
+                    func = visitor.construct_node
+                    # Find the start and end of the construct() method
+                    start = func.lineno - 1
+                    end = func.end_lineno if hasattr(func, 'end_lineno') else None
+                    if end is None:
+                        # Fallback: find the next function/class or end of file
+                        for i in range(start+1, len(code_lines)):
+                            if code_lines[i].startswith('    def ') or code_lines[i].startswith('class '):
+                                end = i
+                                break
+                        if end is None:
+                            end = len(code_lines)
+                    # Insert self.add_sound and self.wait after each animation step
+                    new_func_lines = []
+                    step_idx = 0
+                    for line in code_lines[start:end]:
+                        new_func_lines.append(line)
+                        # Heuristic: insert after self.play( or self.wait( lines
+                        if ("self.play(" in line or "self.wait(" in line) and step_idx < len(step_audio_paths):
+                            audio_path = step_audio_paths[step_idx]
+                            if audio_path:
+                                # Indent matches the line
+                                indent = ' ' * (len(line) - len(line.lstrip()))
+                                new_func_lines.append(f'{indent}self.add_sound(r"{audio_path}")')
+                                # Optionally, add a wait (e.g., 1.5s)
+                                new_func_lines.append(f'{indent}self.wait(1.5)')
+                            step_idx += 1
+                    # Replace the function in the code
+                    code_lines[start:end] = new_func_lines
+                    code = '\n'.join(code_lines)
+            except Exception as e:
+                print(f"Error inserting per-step audio: {e}")
+                # Fallback: do nothing
+
+        return code
+    except Exception as e:
+        print(f"Error generating code with Gemini: {e}")
+        raise e

backend/main.py

@@ -0,0 +1,155 @@
+from fastapi import FastAPI, HTTPException, BackgroundTasks
+from fastapi.staticfiles import StaticFiles
+from fastapi.responses import FileResponse, JSONResponse
+from pydantic import BaseModel
+import os
+from dotenv import load_dotenv
+import asyncio
+
+# Load environment variables FIRST
+load_dotenv()
+
+# ⚙️ DEPLOYMENT CONFIGURATION
+# FFmpeg Configuration - Tries to find FFmpeg automatically
+import shutil
+
+# Check if ffmpeg is already in system PATH
+if shutil.which('ffmpeg') is None:
+    # If not in PATH, try custom path (update this for your system)
+    # Common Windows path: r"C:\ffmpeg\bin"
+    # Linux/Mac: Usually already in PATH, no need to set
+    custom_ffmpeg_path = os.environ.get('FFMPEG_PATH', r"M:\Ap\ffmpeg-7.1.1-essentials_build\ffmpeg-7.1.1-essentials_build\bin")
+    
+    if os.path.exists(custom_ffmpeg_path):
+        os.environ["PATH"] += os.pathsep + custom_ffmpeg_path
+        print(f"✅ FFmpeg found at: {custom_ffmpeg_path}")
+    else:
+        print("⚠️  FFmpeg not found in system PATH")
+        print("   Options:")
+        print("   1. Install FFmpeg and add to system PATH")
+        print("   2. Set FFMPEG_PATH environment variable")
+        print(f"   3. Update custom_ffmpeg_path in main.py (currently: {custom_ffmpeg_path})")
+else:
+    print("✅ FFmpeg found in system PATH")
+
+from teacher import generate_outline
+from compiler import generate_manim_code
+from runner import render_scene
+from narrator import generate_narration_audio
+
+app = FastAPI()
+
+# Get the directory of the current script (backend/)
+BASE_DIR = os.path.dirname(os.path.abspath(__file__))
+MEDIA_DIR = os.path.join(BASE_DIR, "media")
+STATIC_DIR = os.path.join(BASE_DIR, "static")
+
+# Ensure the media directory exists
+os.makedirs(MEDIA_DIR, exist_ok=True)
+app.mount("/media", StaticFiles(directory=MEDIA_DIR), name="media")
+
+# Serve static frontend files
+app.mount("/static", StaticFiles(directory=STATIC_DIR), name="static")
+
+# Global Job Status
+job_status = {
+    "stage": "idle", # idle, planning, coding, executing, success, failed
+    "message": "System Ready",
+    "video_path": None,
+    "error": None
+}
+
+class PromptRequest(BaseModel):
+    prompt: str
+
+async def process_video_generation(prompt: str):
+    global job_status
+    try:
+        # 1. Planning
+        job_status["stage"] = "planning"
+        job_status["message"] = "Analyzing Prompt & Generating Outline..."
+        outline = await generate_outline(prompt)
+        
+
+        # 2. Narrator: Generate per-step narration audio files
+        steps = outline.get("steps", [])
+        step_audio_paths = []
+        from narrator import generate_narration_audio
+        for idx, step in enumerate(steps):
+            narration = step.get("narration", "")
+            if narration:
+                audio_filename = f"step_{idx+1}_narration.mp3"
+                audio_path = generate_narration_audio(narration, filename=audio_filename)
+                step_audio_paths.append(audio_path)
+            else:
+                step_audio_paths.append(None)
+
+        # 3. Coding
+        job_status["stage"] = "coding"
+        job_status["message"] = "Generating Manim Script..."
+        code = await generate_manim_code(outline, step_audio_paths=step_audio_paths)
+
+        # 4. Executing
+        job_status["stage"] = "executing"
+        job_status["message"] = "Rendering Animation Frames..."
+        video_path = await render_scene(code)
+
+        # 5. Merge audio if available
+        if audio_path:
+            from narrator import merge_audio_video
+            video_path = merge_audio_video(video_path, audio_path)
+
+        # Success
+        relative_path = os.path.relpath(video_path, start=MEDIA_DIR).replace("\\", "/")
+        job_status["stage"] = "success"
+        job_status["message"] = "Render Complete!"
+        job_status["video_path"] = relative_path
+        
+    except Exception as e:
+        error_msg = str(e)
+        print(f"Error generating video: {error_msg}")
+        job_status["stage"] = "failed"
+        job_status["message"] = "Process Failed"
+        job_status["error"] = error_msg
+        
+        # Log error
+        with open("error.log", "w") as f:
+            f.write(error_msg)
+            import traceback
+            traceback.print_exc(file=f)
+
+@app.get("/")
+async def read_index():
+    return FileResponse(os.path.join(STATIC_DIR, 'index.html'))
+
+@app.post("/generate")
+async def generate_video(request: PromptRequest, background_tasks: BackgroundTasks):
+    global job_status
+    
+    # Reset status
+    job_status = {
+        "stage": "planning",
+        "message": "Initializing...",
+        "video_path": None,
+        "error": None
+    }
+    
+    # Start background task
+    background_tasks.add_task(process_video_generation, request.prompt)
+    
+    return {"status": "started"}
+
+@app.get("/status")
+async def get_status():
+    return job_status
+
+@app.get("/video/{path:path}")
+async def get_video(path: str):
+    video_path = os.path.join(MEDIA_DIR, path)
+    if os.path.exists(video_path):
+        return FileResponse(video_path)
+    raise HTTPException(status_code=404, detail="Video not found")
+
+if __name__ == "__main__":
+    import uvicorn
+    uvicorn.run(app, host="0.0.0.0", port=8000)

backend/models/Modelfile

@@ -0,0 +1,6 @@
+FROM ./Qwen2.5-Manim-3B-Instruct-q4_k_m.gguf
+
+PARAMETER temperature 0.1
+PARAMETER top_p 0.1
+PARAMETER top_k 1
+PARAMETER repeat_penalty 1.1

backend/narrator.py

@@ -0,0 +1,92 @@
+import os
+from gtts import gTTS
+from moviepy import VideoFileClip, AudioFileClip, CompositeAudioClip
+import uuid
+
+# Get the directory of the current script (backend/)
+BASE_DIR = os.path.dirname(os.path.abspath(__file__))
+MEDIA_DIR = os.path.join(BASE_DIR, "media")
+AUDIO_DIR = os.path.join(MEDIA_DIR, "audio")
+
+# Ensure audio directory exists
+os.makedirs(AUDIO_DIR, exist_ok=True)
+
+def generate_narration_audio(text: str, filename: str = None) -> str:
+    """
+    Generates an MP3 audio file from the given text using gTTS.
+    Returns the absolute path to the generated audio file.
+    """
+    try:
+        if not filename:
+            run_id = str(uuid.uuid4())
+            filename = f"narration_{run_id}.mp3"
+            
+        # Save in BASE_DIR (backend/) so it's accessible to the script
+        filepath = os.path.join(BASE_DIR, filename)
+        
+        tts = gTTS(text=text, lang='en', slow=False)
+        tts.save(filepath)
+        
+        return filepath
+    except Exception as e:
+        print(f"Error generating audio: {e}")
+        return None
+
+def merge_audio_video(video_path: str, audio_path: str) -> str:
+    """
+    Merges the given audio file into the video file.
+    Returns the path to the new video file with audio.
+    If merging fails, returns the original video path.
+    """
+    try:
+        if not audio_path or not os.path.exists(audio_path):
+            print("Audio file not found, skipping merge.")
+            return video_path
+            
+        if not video_path or not os.path.exists(video_path):
+            print("Video file not found, skipping merge.")
+            return video_path
+
+        # Generate output path
+        video_dir = os.path.dirname(video_path)
+        video_filename = os.path.basename(video_path)
+        output_filename = f"narrated_{video_filename}"
+        output_path = os.path.join(video_dir, output_filename)
+
+        # Load clips
+        video_clip = VideoFileClip(video_path)
+        audio_clip = AudioFileClip(audio_path)
+
+        # Handle duration mismatch
+        # If audio is longer, we might need to loop video or cut audio. 
+        # For simplicity, we'll let the video dictate duration, but if audio is longer, 
+        # we might lose the end. Ideally, we'd extend the last frame of video.
+        # Here, we'll just set audio to video duration (cut off) or loop video?
+        # Let's just set the audio to the video.
+        
+        # Better approach: If audio is longer, extend video? No, that's hard with compiled video.
+        # Let's just set the audio. If it's too long, it gets cut.
+        
+        final_audio = audio_clip
+        
+        # Set audio to video
+        final_video = video_clip.with_audio(final_audio)
+        
+        # Write output
+        # codec='libx264' is standard. audio_codec='aac'
+        final_video.write_videofile(output_path, codec='libx264', audio_codec='aac', logger=None)
+        
+        # Cleanup
+        video_clip.close()
+        audio_clip.close()
+        
+        return output_path
+
+    except Exception as e:
+        print(f"Error merging audio and video: {e}")
+        with open("merge_error.log", "w") as f:
+            f.write(str(e))
+            import traceback
+            traceback.print_exc(file=f)
+        # Return original video on failure
+        return video_path

backend/requirements.txt

@@ -0,0 +1,9 @@
+fastapi
+uvicorn
+manim
+google-genai
+pydantic
+python-dotenv
+gTTS
+moviepy
+ollama

backend/runner.py

@@ -0,0 +1,40 @@
+import os
+import subprocess
+import uuid
+
+# Get the directory of the current script (backend/)
+BASE_DIR = os.path.dirname(os.path.abspath(__file__))
+MEDIA_DIR = os.path.join(BASE_DIR, "media")
+
+async def render_scene(code: str):
+    # Create a unique ID for this run
+    run_id = str(uuid.uuid4())
+    filename = f"scene_{run_id}.py"
+    
+    # Save code to file in the backend directory
+    filepath = os.path.join(BASE_DIR, filename)
+    with open(filepath, "w") as f:
+        f.write(code)
+        
+    # Run Manim
+    # manim -qm --media_dir MEDIA_DIR filename.py GenScene
+    
+    cmd = ["manim", "-qm", "--media_dir", MEDIA_DIR, filepath, "GenScene"]
+    
+    try:
+        result = subprocess.run(cmd, capture_output=True, text=True, check=True)
+        print("Manim Output:", result.stdout)
+    except subprocess.CalledProcessError as e:
+        print("Manim Error:", e.stderr)
+        raise Exception(f"Manim failed: {e.stderr}")
+        
+    # Construct expected output path
+    # Manim structure with --media_dir: {MEDIA_DIR}/videos/{filename_without_extension}/720p30/GenScene.mp4
+    
+    video_folder = filename.replace(".py", "")
+    video_path = os.path.join(MEDIA_DIR, "videos", video_folder, "720p30", "GenScene.mp4")
+    
+    if not os.path.exists(video_path):
+        raise Exception(f"Video file not found at {video_path}")
+        
+    return video_path

backend/static/index.html

@@ -0,0 +1,724 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta
+      name="viewport"
+      content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"
+    />
+    <title>Animetrix AI | AI Animation Engine</title>
+
+    <!-- Fonts: Inter (Modern, Clean) -->
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap"
+      rel="stylesheet"
+    />
+
+    <!-- Tailwind CSS -->
+    <script src="https://cdn.tailwindcss.com"></script>
+
+    <!-- Three.js -->
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r134/three.min.js"></script>
+
+    <!-- Custom Config -->
+    <script>
+      tailwind.config = {
+        theme: {
+          extend: {
+            fontFamily: {
+              sans: ["Inter", "sans-serif"],
+            },
+            colors: {
+              black: "#000000",
+              obsidian: "#0A0A0A",
+              orange: {
+                50: "#FFF7ED",
+                100: "#FFEDD5",
+                200: "#FED7AA",
+                300: "#FDBA74",
+                400: "#FB923C",
+                500: "#F97316",
+                600: "#EA580C",
+                700: "#C2410C",
+                800: "#9A3412",
+                900: "#7C2D12",
+                950: "#431407",
+                brand: "#FF6B00", // Vibrant Neon Orange
+              },
+            },
+            animation: {
+              glow: "glow 4s ease-in-out infinite",
+              float: "float 6s ease-in-out infinite",
+            },
+            keyframes: {
+              glow: {
+                "0%, 100%": { opacity: 0.3 },
+                "50%": { opacity: 0.6 },
+              },
+              float: {
+                "0%, 100%": { transform: "translateY(0)" },
+                "50%": { transform: "translateY(-10px)" },
+              },
+            },
+          },
+        },
+      };
+    </script>
+
+    <style>
+      body {
+        background-color: #000000;
+        color: #ffffff;
+        overflow-x: hidden;
+        width: 100vw;
+        min-height: 100vh;
+      }
+
+      #canvas-container {
+        position: fixed;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        z-index: 0;
+        pointer-events: none;
+      }
+
+      .glass {
+        background: rgba(10, 10, 10, 0.7);
+        backdrop-filter: blur(20px);
+        -webkit-backdrop-filter: blur(20px);
+        border: 1px solid rgba(255, 107, 0, 0.1);
+        box-shadow: 0 8px 32px rgba(0, 0, 0, 0.8);
+      }
+
+      .glass-hover:hover {
+        border-color: rgba(255, 107, 0, 0.3);
+        background: rgba(15, 15, 15, 0.8);
+      }
+
+      .orange-gradient-text {
+        background: linear-gradient(135deg, #ff6b00 0%, #ffa500 100%);
+        -webkit-background-clip: text;
+        -webkit-text-fill-color: transparent;
+      }
+
+      .btn-orange {
+        background: linear-gradient(135deg, #ff6b00 0%, #ea580c 100%);
+        color: white;
+        font-weight: 600;
+        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+        position: relative;
+        overflow: hidden;
+      }
+
+      .btn-orange::after {
+        content: "";
+        position: absolute;
+        top: 0;
+        left: -100%;
+        width: 100%;
+        height: 100%;
+        background: linear-gradient(
+          90deg,
+          transparent,
+          rgba(255, 255, 255, 0.2),
+          transparent
+        );
+        transition: 0.5s;
+      }
+
+      .btn-orange:hover::after {
+        left: 100%;
+      }
+
+      .btn-orange:hover {
+        transform: translateY(-2px);
+        box-shadow: 0 10px 20px rgba(255, 107, 0, 0.3);
+      }
+
+      .input-dark {
+        background: rgba(0, 0, 0, 0.4);
+        border: 1px solid rgba(255, 255, 255, 0.05);
+        transition: all 0.3s ease;
+      }
+
+      .input-dark:focus {
+        border-color: #ff6b00;
+        background: rgba(0, 0, 0, 0.6);
+        outline: none;
+        box-shadow: 0 0 0 2px rgba(255, 107, 0, 0.1);
+      }
+
+      /* Custom Scrollbar */
+      ::-webkit-scrollbar {
+        width: 4px;
+      }
+
+      ::-webkit-scrollbar-track {
+        background: #000;
+      }
+
+      ::-webkit-scrollbar-thumb {
+        background: #333;
+        border-radius: 10px;
+      }
+
+      ::-webkit-scrollbar-thumb:hover {
+        background: #ff6b00;
+      }
+
+      .mesh-gradient {
+        position: fixed;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        background: radial-gradient(
+            at 0% 0%,
+            rgba(255, 107, 0, 0.15) 0px,
+            transparent 50%
+          ),
+          radial-gradient(
+            at 100% 100%,
+            rgba(255, 107, 0, 0.1) 0px,
+            transparent 50%
+          );
+        z-index: -1;
+      }
+    </style>
+  </head>
+
+  <body class="antialiased font-sans">
+    <div class="mesh-gradient"></div>
+    <div id="canvas-container"></div>
+
+    <!-- Header -->
+    <nav
+      class="fixed top-0 w-full z-50 border-b border-white/5 bg-black/50 backdrop-blur-xl"
+    >
+      <div
+        class="max-w-7xl mx-auto px-6 h-16 flex items-center justify-between"
+      >
+        <div class="flex items-center gap-3 group cursor-pointer">
+          <div
+            class="w-8 h-8 rounded bg-orange-brand flex items-center justify-center transition-transform group-hover:rotate-12"
+          >
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              class="h-5 w-5 text-black"
+              fill="none"
+              viewBox="0 0 24 24"
+              stroke="currentColor"
+              stroke-width="3"
+            >
+              <path
+                stroke-linecap="round"
+                stroke-linejoin="round"
+                d="M13 10V3L4 14h7v7l9-11h-7z"
+              />
+            </svg>
+          </div>
+          <span class="font-extrabold text-xl tracking-tighter text-white"
+            >ANIMETRIX AI</span
+          >
+        </div>
+        <div class="flex items-center gap-6">
+          <div
+            class="hidden md:flex items-center gap-2 px-3 py-1 rounded-full bg-orange-950/30 border border-orange-900/50"
+          >
+            <span
+              class="w-2 h-2 rounded-full bg-orange-brand animate-pulse"
+            ></span>
+            <span
+              class="text-[10px] font-bold text-orange-400 uppercase tracking-widest"
+              >Engine Online</span
+            >
+          </div>
+        </div>
+      </div>
+    </nav>
+
+    <main class="relative z-10 pt-24 pb-20 px-6 max-w-7xl mx-auto">
+      <div class="flex flex-col lg:flex-row gap-12">
+        <!-- Left: Controls -->
+        <div class="w-full lg:w-5/12 space-y-8">
+          <div class="space-y-4">
+            <h1
+              class="text-5xl md:text-6xl font-black tracking-tighter leading-[0.9]"
+            >
+              ANIMATE <br />
+              <span class="orange-gradient-text">IDEAS.</span>
+            </h1>
+            <p class="text-zinc-400 text-lg font-medium max-w-sm leading-snug">
+              The next generation of educational content. Powered by AI,
+              rendered with Manim.
+            </p>
+          </div>
+
+          <div class="glass rounded-3xl p-8 space-y-6">
+            <div class="space-y-2">
+              <label
+                class="text-[10px] font-black text-orange-brand uppercase tracking-[0.2em]"
+                >Prompt Input</label
+              >
+              <textarea
+                id="promptInput"
+                rows="4"
+                class="w-full input-dark rounded-2xl p-5 text-white placeholder-zinc-600 text-base font-medium resize-none"
+                placeholder="Describe the concept you want to visualize..."
+              ></textarea>
+            </div>
+
+            <div class="space-y-4">
+              <div class="flex flex-wrap gap-2">
+                <button
+                  onclick="setPrompt('Pythagorean theorem visualization')"
+                  class="px-4 py-2 rounded-xl bg-zinc-900/50 border border-white/5 text-xs font-semibold text-zinc-400 hover:text-orange-400 hover:border-orange-900/50 transition-all"
+                >
+                  📐 Geometry
+                </button>
+                <button
+                  onclick="setPrompt('Binary search algorithm step by step')"
+                  class="px-4 py-2 rounded-xl bg-zinc-900/50 border border-white/5 text-xs font-semibold text-zinc-400 hover:text-orange-400 hover:border-orange-900/50 transition-all"
+                >
+                  💻 Algorithms
+                </button>
+                <button
+                  onclick="setPrompt('Structure of an atom with orbiting electrons')"
+                  class="px-4 py-2 rounded-xl bg-zinc-900/50 border border-white/5 text-xs font-semibold text-zinc-400 hover:text-orange-400 hover:border-orange-900/50 transition-all"
+                >
+                  ⚛️ Physics
+                </button>
+              </div>
+
+              <button
+                onclick="generate()"
+                id="generateBtn"
+                class="w-full btn-orange py-5 rounded-2xl text-sm uppercase tracking-[0.15em] flex items-center justify-center gap-3"
+              >
+                <span>Generate Animation</span>
+                <svg
+                  xmlns="http://www.w3.org/2000/svg"
+                  class="h-5 w-5"
+                  viewBox="0 0 20 20"
+                  fill="currentColor"
+                >
+                  <path
+                    fill-rule="evenodd"
+                    d="M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z"
+                    clip-rule="evenodd"
+                  />
+                </svg>
+              </button>
+            </div>
+          </div>
+
+          <div class="grid grid-cols-3 gap-4">
+            <div class="glass p-4 rounded-2xl text-center">
+              <div class="text-xl font-black text-white">4K</div>
+              <div
+                class="text-[8px] text-zinc-500 uppercase font-bold tracking-widest"
+              >
+                Ready
+              </div>
+            </div>
+            <div class="glass p-4 rounded-2xl text-center">
+              <div class="text-xl font-black text-white">AI</div>
+              <div
+                class="text-[8px] text-zinc-500 uppercase font-bold tracking-widest"
+              >
+                Driven
+              </div>
+            </div>
+            <div class="glass p-4 rounded-2xl text-center">
+              <div class="text-xl font-black text-white">FAST</div>
+              <div
+                class="text-[8px] text-zinc-500 uppercase font-bold tracking-widest"
+              >
+                Render
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <!-- Right: Preview -->
+        <div class="w-full lg:w-7/12">
+          <div
+            class="relative aspect-video rounded-[2rem] overflow-hidden glass border-2 border-white/5 group"
+          >
+            <!-- Standby -->
+            <div
+              id="standbyScreen"
+              class="absolute inset-0 flex flex-col items-center justify-center bg-black/40"
+            >
+              <div class="relative">
+                <div
+                  class="absolute inset-0 bg-orange-brand blur-3xl opacity-10 animate-pulse"
+                ></div>
+                <div
+                  class="w-20 h-20 rounded-full border border-orange-brand/20 flex items-center justify-center animate-float"
+                >
+                  <svg
+                    xmlns="http://www.w3.org/2000/svg"
+                    class="h-10 w-10 text-orange-brand"
+                    fill="none"
+                    viewBox="0 0 24 24"
+                    stroke="currentColor"
+                  >
+                    <path
+                      stroke-linecap="round"
+                      stroke-linejoin="round"
+                      stroke-width="1"
+                      d="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.263a1 1 0 001.555.832l3.197-2.132a1 1 0 000-1.664z"
+                    />
+                    <path
+                      stroke-linecap="round"
+                      stroke-linejoin="round"
+                      stroke-width="1"
+                      d="M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
+                    />
+                  </svg>
+                </div>
+              </div>
+              <p
+                class="mt-6 text-zinc-500 font-bold text-xs uppercase tracking-[0.3em]"
+              >
+                System Idle
+              </p>
+            </div>
+
+            <!-- Video -->
+            <video
+              id="videoPlayer"
+              class="absolute inset-0 w-full h-full object-cover hidden"
+              controls
+              playsinline
+            >
+              <source id="videoSource" src="" type="video/mp4" />
+            </video>
+
+            <!-- Status Overlay -->
+            <div
+              id="statusSection"
+              class="hidden absolute inset-0 bg-black/90 backdrop-blur-2xl flex flex-col items-center justify-center p-12 z-20"
+            >
+              <div class="w-full max-w-sm space-y-8">
+                <div class="flex justify-center">
+                  <div class="relative">
+                    <div
+                      class="absolute inset-0 bg-orange-brand blur-2xl opacity-20 animate-ping"
+                    ></div>
+                    <div
+                      class="w-16 h-16 rounded-2xl bg-orange-brand flex items-center justify-center shadow-2xl shadow-orange-brand/50"
+                    >
+                      <svg
+                        xmlns="http://www.w3.org/2000/svg"
+                        class="h-8 w-8 text-black animate-spin"
+                        fill="none"
+                        viewBox="0 0 24 24"
+                        stroke="currentColor"
+                      >
+                        <path
+                          stroke-linecap="round"
+                          stroke-linejoin="round"
+                          stroke-width="3"
+                          d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"
+                        />
+                      </svg>
+                    </div>
+                  </div>
+                </div>
+
+                <div class="text-center space-y-2">
+                  <h3
+                    class="text-2xl font-black text-white tracking-tight"
+                    id="statusTitle"
+                  >
+                    Processing
+                  </h3>
+                  <p
+                    class="text-orange-brand/60 text-xs font-bold uppercase tracking-widest"
+                    id="statusMessage"
+                  >
+                    Initializing...
+                  </p>
+                </div>
+
+                <div class="space-y-4">
+                  <div
+                    class="h-1 w-full bg-zinc-900 rounded-full overflow-hidden"
+                  >
+                    <div
+                      id="progressFill"
+                      class="h-full bg-orange-brand w-0 transition-all duration-500 shadow-[0_0_15px_rgba(255,107,0,0.5)]"
+                    ></div>
+                  </div>
+                  <div
+                    class="flex justify-between text-[8px] font-black text-zinc-600 uppercase tracking-[0.2em]"
+                  >
+                    <span>Plan</span>
+                    <span>Code</span>
+                    <span>Render</span>
+                  </div>
+                </div>
+              </div>
+            </div>
+
+            <!-- Error -->
+            <div
+              id="errorSection"
+              class="hidden absolute inset-0 bg-red-950/95 backdrop-blur-xl flex flex-col items-center justify-center p-12 text-center z-30"
+            >
+              <div
+                class="w-16 h-16 rounded-full bg-red-500/10 border border-red-500/20 flex items-center justify-center mb-6"
+              >
+                <svg
+                  xmlns="http://www.w3.org/2000/svg"
+                  class="h-8 w-8 text-red-500"
+                  fill="none"
+                  viewBox="0 0 24 24"
+                  stroke="currentColor"
+                >
+                  <path
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                    stroke-width="2"
+                    d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"
+                  />
+                </svg>
+              </div>
+              <h3 class="text-xl font-black text-white mb-2">System Failure</h3>
+              <p
+                id="errorMessage"
+                class="text-red-400/60 text-xs font-mono bg-black/40 p-4 rounded-xl border border-red-500/10 max-w-md overflow-auto max-h-32"
+              >
+                Error details...
+              </p>
+              <button
+                onclick="resetUI()"
+                class="mt-8 px-8 py-3 bg-white text-black text-xs font-black uppercase tracking-widest rounded-xl hover:bg-zinc-200 transition-colors"
+              >
+                Reset Engine
+              </button>
+            </div>
+          </div>
+        </div>
+      </div>
+    </main>
+
+    <!-- Three.js Background -->
+    <script>
+      const scene = new THREE.Scene();
+      const camera = new THREE.PerspectiveCamera(
+        75,
+        window.innerWidth / window.innerHeight,
+        0.1,
+        1000
+      );
+      const renderer = new THREE.WebGLRenderer({
+        alpha: true,
+        antialias: true,
+      });
+
+      renderer.setSize(window.innerWidth, window.innerHeight);
+      renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));
+      document
+        .getElementById("canvas-container")
+        .appendChild(renderer.domElement);
+
+      // Particles
+      const particlesGeometry = new THREE.BufferGeometry();
+      const count = 1500;
+      const positions = new Float32Array(count * 3);
+      const colors = new Float32Array(count * 3);
+
+      for (let i = 0; i < count * 3; i++) {
+        positions[i] = (Math.random() - 0.5) * 15;
+        // Orange to Black gradient for particles
+        const mixedColor = new THREE.Color("#FF6B00").lerp(
+          new THREE.Color("#000000"),
+          Math.random() * 0.8
+        );
+        colors[i] = mixedColor.r;
+        colors[i + 1] = mixedColor.g;
+        colors[i + 2] = mixedColor.b;
+      }
+
+      particlesGeometry.setAttribute(
+        "position",
+        new THREE.BufferAttribute(positions, 3)
+      );
+      particlesGeometry.setAttribute(
+        "color",
+        new THREE.BufferAttribute(colors, 3)
+      );
+
+      const particlesMaterial = new THREE.PointsMaterial({
+        size: 0.015,
+        vertexColors: true,
+        transparent: true,
+        opacity: 0.4,
+        blending: THREE.AdditiveBlending,
+      });
+
+      const particles = new THREE.Points(particlesGeometry, particlesMaterial);
+      scene.add(particles);
+
+      camera.position.z = 5;
+
+      let mouseX = 0;
+      let mouseY = 0;
+
+      document.addEventListener("mousemove", (e) => {
+        mouseX = e.clientX / window.innerWidth - 0.5;
+        mouseY = e.clientY / window.innerHeight - 0.5;
+      });
+
+      function animate() {
+        requestAnimationFrame(animate);
+
+        particles.rotation.y += 0.001;
+        particles.rotation.x += 0.0005;
+
+        camera.position.x += (mouseX * 2 - camera.position.x) * 0.05;
+        camera.position.y += (-mouseY * 2 - camera.position.y) * 0.05;
+        camera.lookAt(scene.position);
+
+        renderer.render(scene, camera);
+      }
+
+      animate();
+
+      window.addEventListener("resize", () => {
+        camera.aspect = window.innerWidth / window.innerHeight;
+        camera.updateProjectionMatrix();
+        renderer.setSize(window.innerWidth, window.innerHeight);
+      });
+    </script>
+
+    <!-- Logic -->
+    <script>
+      let statusCheckInterval = null;
+
+      function setPrompt(text) {
+        const input = document.getElementById("promptInput");
+        input.value = text;
+        input.focus();
+      }
+
+      function resetUI() {
+        document.getElementById("errorSection").classList.add("hidden");
+        document.getElementById("statusSection").classList.add("hidden");
+        document.getElementById("standbyScreen").classList.remove("hidden");
+        document.getElementById("videoPlayer").classList.add("hidden");
+        document.getElementById("videoPlayer").pause();
+
+        const btn = document.getElementById("generateBtn");
+        btn.disabled = false;
+        btn.querySelector("span").textContent = "Generate Animation";
+      }
+
+      async function generate() {
+        const prompt = document.getElementById("promptInput").value.trim();
+        if (!prompt) return;
+
+        document.getElementById("statusSection").classList.remove("hidden");
+        document.getElementById("errorSection").classList.add("hidden");
+        document.getElementById("standbyScreen").classList.add("hidden");
+
+        const btn = document.getElementById("generateBtn");
+        btn.disabled = true;
+        btn.querySelector("span").textContent = "Processing...";
+
+        try {
+          const response = await fetch("/generate", {
+            method: "POST",
+            headers: { "Content-Type": "application/json" },
+            body: JSON.stringify({ prompt: prompt }),
+          });
+          if (!response.ok) throw new Error("Network response was not ok");
+          startStatusPolling();
+        } catch (error) {
+          showError(error.message);
+        }
+      }
+
+      function startStatusPolling() {
+        if (statusCheckInterval) clearInterval(statusCheckInterval);
+        statusCheckInterval = setInterval(checkStatus, 1000);
+      }
+
+      async function checkStatus() {
+        try {
+          const response = await fetch("/status");
+          const status = await response.json();
+          updateUI(status);
+          if (status.stage === "success" || status.stage === "failed") {
+            clearInterval(statusCheckInterval);
+          }
+        } catch (error) {
+          console.error(error);
+        }
+      }
+
+      function updateUI(status) {
+        const titles = {
+          idle: "System Ready",
+          planning: "Strategizing",
+          coding: "Synthesizing Code",
+          executing: "Rendering Reality",
+          success: "Generation Complete",
+          failed: "System Error",
+        };
+
+        document.getElementById("statusTitle").textContent =
+          titles[status.stage] || "Processing";
+        document.getElementById("statusMessage").textContent = status.message;
+
+        const progressMap = {
+          idle: 0,
+          planning: 25,
+          coding: 50,
+          executing: 80,
+          success: 100,
+          failed: 100,
+        };
+        document.getElementById("progressFill").style.width =
+          (progressMap[status.stage] || 0) + "%";
+
+        if (status.stage === "success" && status.video_path) {
+          setTimeout(() => {
+            document.getElementById("statusSection").classList.add("hidden");
+            const video = document.getElementById("videoPlayer");
+            video.classList.remove("hidden");
+            document.getElementById("videoSource").src =
+              "/video/" + status.video_path;
+            video.load();
+            video.play();
+
+            const btn = document.getElementById("generateBtn");
+            btn.disabled = false;
+            btn.querySelector("span").textContent = "Generate New";
+          }, 800);
+        }
+
+        if (status.stage === "failed") {
+          showError(status.error || "Unknown error occurred");
+        }
+      }
+
+      function showError(msg) {
+        document.getElementById("statusSection").classList.add("hidden");
+        document.getElementById("errorSection").classList.remove("hidden");
+        document.getElementById("errorMessage").textContent = msg;
+
+        const btn = document.getElementById("generateBtn");
+        btn.disabled = false;
+        btn.querySelector("span").textContent = "Retry";
+      }
+    </script>
+  </body>
+</html>

backend/teacher.py

@@ -0,0 +1,65 @@
+from google import genai
+from google.genai import types
+import os
+import json
+
+# Configure Gemini inside the function to ensure env vars are loaded
+
+TEACHER_SYSTEM_PROMPT = """
+You are the "Teacher Brain" of an educational video generator.
+Your goal is to take a raw user prompt and convert it into a structured educational OUTLINE JSON.
+
+Your output must be a valid JSON object with the following structure:
+{
+  "topic": "The topic of the video",
+  "mode": "education",
+  "steps": [
+    {
+      "action": "draw shape",
+      "shape": "triangle|circle|square|line|arrow",
+      "scale": 1.0,
+      "label": "optional label",
+      "position": "optional position (e.g., LEFT, RIGHT, UP, DOWN)",
+      "narration": "A short, clear sentence describing this step, to be spoken as the animation happens."
+    },
+    // ... more steps
+  ]
+}
+
+Rules:
+- Each step MUST have a "narration" field: a short, clear sentence describing what is happening in that step, to be spoken exactly as the animation for that step occurs.
+- Do NOT write any code.
+- Do NOT write formulas in LaTeX (use simple text representation like a^2 + b^2 = c^2).
+- Keep steps simple and sequential.
+- Focus on visual explanation.
+- The "action" field determines what happens. Supported actions: "draw shape", "show text", "wait", "clear".
+"""
+
+async def generate_outline(prompt: str):
+    api_key = os.environ.get("GEMINI_API_KEY")
+    if not api_key:
+        raise ValueError("GEMINI_API_KEY not found in environment variables.")
+    
+    client = genai.Client(api_key=api_key)
+    
+    full_prompt = f"{TEACHER_SYSTEM_PROMPT}\n\nUSER PROMPT: {prompt}\n\nOUTPUT JSON:"
+    
+    response = client.models.generate_content(
+        model='gemini-2.0-flash-exp',
+        contents=full_prompt
+    )
+    
+    try:
+        # cleanup response text to ensure it's valid JSON
+        text = response.text.strip()
+        if text.startswith("```json"):
+            text = text[7:]
+        if text.endswith("```"):
+            text = text[:-3]
+        
+        return json.loads(text)
+    except Exception as e:
+        print(f"Error parsing Gemini response: {e}")
+        print(f"Raw response: {response.text}")
+        # Fallback or re-raise
+        raise e

docker-compose.yml

@@ -0,0 +1,19 @@
+version: '3.8'
+
+services:
+  animetrix-ai:
+    build: .
+    container_name: animetrix-ai
+    ports:
+      - "8000:8000"
+    environment:
+      - GEMINI_API_KEY=${GEMINI_API_KEY}
+    volumes:
+      - ./backend/media:/app/media
+    restart: unless-stopped
+    healthcheck:
+      test: ["CMD", "curl", "-f", "http://localhost:8000/status"]
+      interval: 30s
+      timeout: 10s
+      retries: 3
+      start_period: 40s