---
title: Immersive Vibe Development Studio
emoji: 🎮
colorFrom: purple
colorTo: green
sdk: gradio
sdk_version: "6.13.0"
app_file: app.py
hf_oauth: true
hf_oauth_scopes:
  - inference-api
pinned: true
license: mit
---

# 🎮 Immersive Vibe Development Studio

Pick **2–5 frontier AI models**, type a **2-word theme** (e.g. `jungle monkey`), and watch them collaboratively build a playable Three.js platformer — live, in your browser.

While the game is being generated, an **isometric Game Dev Story-style studio** plays out: each model gets a character at a desk, speech bubbles show their output in real time, and the scene reacts to each pipeline phase. When done, the result monitor zooms in and the game runs directly in the canvas.

---

## How it works

1. **Log in** with your HuggingFace account (OAuth — your token is used only for Inference API calls, never stored)
2. **Type a 2-word trigger** — `theme hero`, e.g. `space robot`, `medieval knight`, `ocean dolphin`
3. **Select 2–5 models** — roles are assigned automatically (fastest → Art Director, most powerful → Lead Coder)
4. Click **Generate** and watch the studio come alive (~15–30 min)
5. **Download** the self-contained ZIP when done — open `index.html` locally, no server needed

---

## Pipeline phases

| Phase | Role | What happens |
|-------|------|-------------|
| 1 | Art Director | Asset manifest — 9 assets, palette, silhouettes |
| 2 | Char Designer | Hero geometry spec (box primitives) |
| 3 | Geom Builder | Three.js geometry for all assets |
| 4 | Texture Director | Canvas2D procedural textures |
| 5 | Game Architect | Physics, mechanics, tile recycling |
| 6 | Scene Composer | Lighting, fog, atmosphere |
| 7 | Lead Coder | Complete `main.js` initial build |
| 8 | Lead Coder + Geom Builder | Round-robin refinement (4 rounds) |
| 9 | QA | Auto-lint + one auto-fix pass |

---

## Download contents

| File | Description |
|------|-------------|
| `index.html` | The complete playable game (file://-safe, CDN Three.js) |
| `trace.html` | Full pipeline trace with per-phase timing |

---

## Local development

```bash
git clone https://huggingface.co/spaces/BladeSzaSza/Immersive-Vibe-Development-Studio
cd Immersive-Vibe-Development-Studio

python -m venv .venv && source .venv/bin/activate
pip install -e ".[dev]"          # or: pip install -r requirements.txt

# Re-extract character pool from your own playground games (optional):
python scripts/extract_characters.py

# Run locally (OAuth mocked — HF CLI login required):
huggingface-cli login
python app.py
# → open http://localhost:7860
```

> **Note:** OAuth features are mocked outside HF Spaces. Run `huggingface-cli login` first so local mode can resolve your token.

---

## Tech stack

- **[Gradio 6](https://gradio.app)** — UI, OAuth, streaming
- **[Three.js r167](https://threejs.org)** — isometric studio scene + generated game (CDN)
- **[HuggingFace Inference API](https://huggingface.co/docs/api-inference)** — all model calls (no GPU required)
- **[openfloor](https://pypi.org/project/openfloor/)** — protocol types for trace formatting