🎨 GenAI Studio — Universal Generative AI Suite

A high-performance, decoupled generative AI platform featuring a pure FastAPI backend engineered for cloud GPUs (Lightning AI) and a modular, sleek light-mode frontend designed for zero-build deployment on Cloudflare Pages.

Inspired by modern creation studios like SeaArt.ai and Midjourney Web, the platform provides a unified interface for both image and video generation across styles (Anime, Photorealistic, Digital Art, 3D CGI, and Raw).

---

🏛️ Architecture Overview

┌────────────────────────────────────────────────────────────────────────┐
│                   CLOUDFLARE PAGES FRONTEND                            │
│                        (frontend/)                                     │
│                                                                        │
│  - Modern SeaArt / Midjourney 2-Column Interface (No Left Sidebar)     │
│  - Topbar: Brand, Model badge, Live VRAM meter & Memory Flush button   │
│  - Center Workspace: Scrollable feed stream + Docked bottom prompt bar │
│  - Right Studio Drawer: Modality selector, reference dropzone,         │
│    denoising strength slider, universal style presets, ratio grid,     │
│    and safe 4k+1 temporal stride video controls                        │
│  - Live Hugging Face Model Hub with automatic VRAM feasibility check   │
└───────────────────────────────────┬────────────────────────────────────┘
                                    │ HTTPS / REST (CORS enabled)
                                    ▼
┌────────────────────────────────────────────────────────────────────────┐
│                    LIGHTNING AI CLOUD GPU BACKEND                      │
│                           (FastAPI)                                    │
│                                                                        │
│  - 4 Modalities Supported: txt2img, img2img, txt2vid, img2vid          │
│  - Asynchronous Background Queue with Step-by-Step Progress Callbacks  │
│  - Strict VRAM Reclamation: gc.collect() + torch.cuda.empty_cache()   │
│  - Dynamic Model Swapping via config.yaml                              │
│  - OpenAI-Compatible Endpoint: POST /v1/images/generations             │
└────────────────────────────────────────────────────────────────────────┘

---

🌟 4 Core Generative Modalities

1. Text to Image (txt2img):
   • High-resolution synthesis (Square 1:1, Portrait 9:16, Landscape 16:9, Classic 4:3, Photo 3:2, Cinema 21:9).
   • Universal style presets: Anime/Danbooru, Photorealistic Cinematic, Digital Art, 3D CGI, or Raw.
   • Inference steps, CFG scale, negative prompt, seed randomizer.
2. Image to Image (img2img):
   • Reference image upload dropzone with thumbnail preview.
   • Adjustable Denoising Strength ($0.10$ to $1.00$):
     • $0.1 - 0.3$: Subtle retouching & artifact cleanups.
     • $0.5 - 0.7$: Balanced transformation preserving composition and posing.
     • $0.8 - 1.0$: Radical creative reimagining.
3. Text to Video (txt2vid):
   • Generates motion video purely from a descriptive prompt.
   • Synthesizes an initial anchor keyframe then diffuses temporal motion frames seamlessly.
4. Image to Video (img2vid):
   • Animates any reference image (or 1-click output from the image generator).
   • Camera motion presets: Cinematic Push-In (Zoom In), Pull-Out (Zoom Out), Pan Right, Tilt Up, Dynamic Action, Ambient Breathing.
   • Safe $4k+1$ temporal frame strides (17, 33, 49, 81 frames) preventing 3D VAE frame corruption.

---

⚡ 1. Lightning AI Studio Setup (Remote GPU Backend)

Treat Lightning AI as your dedicated GPU server.

Step 1: Launch Studio

In Lightning.ai, launch a Studio with an NVIDIA GPU (e.g. T4 16GB, L4 24GB, or A10G).

Step 2: Clone & Install Dependencies

Open the Terminal inside your Lightning AI Studio:

git clone <your-repo-url>
cd anime_ai
pip install -r requirements.txt

Step 3: Run FastAPI Server

python -m uvicorn backend.main:app --host 0.0.0.0 --port 8000

Step 4: Expose Port 8000

In Lightning AI Studio:

1. Open the Ports tab on the right panel.
2. Forward port 8000.
3. Set the port visibility to Public.
4. Copy the generated public URL (e.g., https://8000-xxx.cloudspaces.litng.ai).

---

🌐 2. Cloudflare Pages Setup (Frontend)

The frontend is a modular, zero-build, static web application in frontend/:

• index.html: Modern SeaArt layout with topbar, center feed, bottom prompt dock, and right control drawer.
• css/: styles.css, feed.css, settings.css.
• js/: api.js, settings.js, feed.js, model-hub.js, app.js.

Deploying to Cloudflare Pages:

1. Go to Cloudflare Dashboard $\rightarrow$ Workers & Pages.
2. Click Create Application $\rightarrow$ Pages $\rightarrow$ Upload Assets.
3. Drag the frontend/ directory into Cloudflare.
4. Click Deploy Site.

Connecting to Backend:

1. Open your deployed Cloudflare Pages URL.
2. Click the backend connection status pill in the topbar (or open the connection modal).
3. Enter your public Lightning AI Studio URL (e.g., https://8000-xxx.cloudspaces.litng.ai).
4. Click Connect. The status dot will turn 🟢 Online.

---

🧠 3. Dynamic Model Switching & VRAM Management

Config-Driven Models (config.yaml)

Models are never hardcoded. The backend reads and writes active models to config.yaml:

active_models:
  image_model: "cagliostrolab/animagine-xl-3.1"
  video_model: "IndexTeam/Index-anisora"

hardware:
  device: "cuda"
  dtype: "fp16"

Real-Time Hugging Face Model Hub

Click the active model pill in the topbar to open the Model Hub:

• Search any text-to-image or image-to-video model live on Hugging Face.
• Checks download stats, likes, architecture, and estimated VRAM.
• Automatically flags whether the model fits a 15GB NVIDIA T4 (🟢) or requires higher VRAM (🔴).
• 1-click model selection immediately updates backend configuration.

Strict GPU VRAM Reclamation

Every generation cycle executes strict VRAM reclamation to prevent OOM errors:

del pipeline
gc.collect()
torch.cuda.empty_cache()
torch.cuda.ipc_collect()

Users can also click the Flush button in the topbar at any time to purge PyTorch CUDA allocations.

---

🧪 4. Running the Integration Test Suite

The test suite validates all endpoints, asynchronous workers, polling loops, model switches, and frontend assets:

pytest tests/test_full_suite.py -v

Tests verify:

• ✅ Heuristic VRAM estimation (T4 15GB compatibility)
• ✅ System health, VRAM telemetry, and CUDA flush
• ✅ Dynamic model search and configuration switching
• ✅ Asynchronous txt2img job queue and result download
• ✅ Image-to-image with reference image and denoising strength
• ✅ Pure text-to-video with synthetic anchor frame generation
• ✅ Image-to-video with camera motion presets
• ✅ Persistent job catalog (outputs/history.json)
• ✅ OpenAI-compatible /v1/images/generations
• ✅ Complete frontend asset integrity and SeaArt DOM structure