🎬 NovaVideo AI (Sparkling Frames)

An open-source, full-stack AI Video Generation platform built using a ReactJS frontend and a Python FastAPI backend powered by AnimateDiff and Stable Diffusion.

This monorepo architecture demonstrates how to bridge heavy asynchronous machine learning pipelines with responsive, real-time client web frameworks.

---

🚀 Project Architecture & Workflow

[ React Frontend ] --( POST /api/generate )--> [ FastAPI Backend ]
        ^                                               │ (Triggers Worker Thread)
        │                                               ▼
[ Polling Loop 5s ] <--( GET /api/status/:id )-- [ Runs AnimateDiff Model ]
        │                                               │ (Saves .mp4 to disk)
        ▼                                               ▼
[ Success State ] <========( Plays Video )======== [ Static Server Exposes Video ]

1. Frontend Request: The user inputs a textual description. React posts the data to the backend.
2. Instant Response: The FastAPI server hands back a unique task_id and pushes the generation task to a background computational worker thread.
3. Polling Loop: The frontend continuously checks the server status using the task_id every 5 seconds.
4. Delivery: Once the frame rendering loop hits 100%, the backend hosts the final .mp4 file statically, and the frontend updates its state to display a custom playback frame.

---

🛠️ Tech Stack

• Frontend: ReactJS, Tailwind CSS, Lucide Icons, Fetch API (Polling Strategy)
• Backend: Python, FastAPI, PyTorch, Diffusers (AnimateDiffPipeline), Uvicorn
• Tunneling/Proxy: ngrok (For seamless free development connectivity)

---

📦 Local Setup Guide

1. Prerequisites

• Python 3.10+ installed
• Node.js & npm installed
• A free ngrok Auth Token

2. Backend Setup

cd backend
pip install -r requirements.txt
# Set your ngrok token as an environment variable
export NGROK_AUTH_TOKEN="your_token_here"
python main.py

Take note of the dynamic public proxy URL printed in your terminal.

3. Frontend Setup

1. Paste the generated backend public URL into your React environment file configuration (BASE_API_URL).
2. Run the client:

cd frontend
npm install
npm run dev

---

🔒 Security & Optimization Note

Heavy model files (.bin, .safetensors), localized static rendering outputs (.mp4), node modules, and environment authentication credentials are strictly scrubbed out using global context styling rules inside the root .gitignore file.