| --- |
| 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 |
|
|
|
|
