Upload folder using huggingface_hub

DEPLOY.md

@@ -0,0 +1,42 @@
+# GameForge Space - HF Spaces Deployment
+#
+# To deploy this to Hugging Face Spaces:
+#
+# 1. Create a new Space on huggingface.co/new-space
+#    - SDK: Gradio
+#    - Hardware: ZeroGPU (free quota, 3.5 min/day)
+#
+# 2. Push this space/ directory:
+#    huggingface-cli upload jkorstad/gameforge-space ./space/
+#
+# 3. The app will be live at:
+#    https://huggingface.co/spaces/jkorstad/gameforge-space
+#
+# What you get:
+# - Custom HTML/JS frontend (not Gradio components)
+# - gradio.Server backend with FastAPI routes
+# - ZeroGPU for model inference (free!)
+# - Queuing and concurrency management
+# - gradio_client API compatibility
+# - MCP tool registration
+# - SSE streaming support
+#
+# API endpoints (all gradio_client compatible):
+# - /registry_info    - List all models
+# - /get_route        - Get routing for a model
+# - /list_pipelines   - List pipeline definitions
+# - /format_prompt    - Format prompt with templates
+# - /format_npc       - Format NPC dialogue
+# - /generate_image   - Generate image via FLUX (ZeroGPU)
+# - /generate_3d      - Generate 3D mesh via TRELLIS.2 (ZeroGPU)
+# - /generate_voice   - Generate voice via MeloTTS (ZeroGPU)
+# - /generate_video   - Generate video via LTX 2.3 (ZeroGPU)
+# - /generate_music   - Generate music via ACE-Step (ZeroGPU)
+# - /generate_sfx     - Generate SFX via TangoFlux (ZeroGPU)
+# - /list_assets      - Browse generated assets
+# - /validate_asset   - Validate asset quality
+# - /convert_asset    - Convert asset format
+#
+# MCP tools:
+# - gameforge_generate  - Generate any asset type
+# - gameforge_list_models - List available models

Dockerfile

@@ -0,0 +1,19 @@
+FROM python:3.11-slim
+
+WORKDIR /app
+
+# Install system deps for ffmpeg (audio conversion)
+RUN apt-get update && apt-get install -y --no-install-recommends \
+    ffmpeg \
+    && rm -rf /var/lib/apt/lists/*
+
+# Copy and install Python deps
+COPY requirements.txt .
+RUN pip install --no-cache-dir -r requirements.txt
+
+# Copy app
+COPY . .
+
+EXPOSE 7860
+
+CMD ["python", "app.py"]

README.md

@@ -0,0 +1,29 @@
+# GameForge Space - HF Spaces Deployment Config
+# ==============================================
+title: GameForge
+emoji: ⚔️
+colorFrom: purple
+colorTo: blue
+sdk: gradio
+sdk_version: 5.25.0
+app_file: app.py
+pinned: false
+license: apache-2.0
+tags:
+  - game-development
+  - asset-generation
+  - ai-pipeline
+  - text-to-image
+  - text-to-3d
+  - text-to-video
+  - text-to-speech
+  - text-to-music
+  - zerogpu
+short_description: "AI Game Asset Pipeline - Generate game assets using free open-source models"
+models:
+  - black-forest-labs/FLUX.1-schnell
+  - microsoft/TRELLIS.2
+  - myshell-ai/MeloTTS
+  - Lightricks/LTX-2.3
+  - declare-lab/TangoFlux
+  - victor/ace-step-jam

app.py

@@ -0,0 +1,476 @@
+"""
+GameForge Space Backend
+=======================
+HF Space using gradio.Server for custom frontend + ZeroGPU.
+Serves the GameForge web app with queued, concurrent-safe API endpoints.
+
+Deploy: push to HF Spaces with ZeroGPU hardware.
+"""
+
+import os
+import sys
+import json
+import asyncio
+from pathlib import Path
+from typing import Optional, Dict, Any, List
+
+import spaces
+from gradio import Server
+from gradio.data_classes import FileData
+from fastapi.responses import HTMLResponse, FileResponse, JSONResponse
+import yaml
+
+# Add parent to path for gameforge imports
+sys.path.insert(0, str(Path(__file__).parent.parent))
+
+# Import GameForge modules
+from gameforge.config.registry_loader import get_registry
+from gameforge.config.prompts import get_template_for_asset, format_npc_dialogue, list_templates
+from gameforge.engine.router import get_router
+from gameforge.engine.validator import validate_asset
+from gameforge.engine.converter import convert_asset, export_for_engine
+
+# Initialize
+registry = get_registry()
+router = get_router()
+
+# Storage for generated assets
+STORAGE_DIR = Path("/tmp/gameforge_assets")
+STORAGE_DIR.mkdir(parents=True, exist_ok=True)
+
+# Create the Server app
+app = Server()
+
+
+# ============================================================================
+# Static file serving
+# ============================================================================
+
+STATIC_DIR = Path(__file__).parent / "static"
+
+
+@app.get("/")
+async def homepage():
+    """Serve the main frontend."""
+    html_path = STATIC_DIR / "index.html"
+    if html_path.exists():
+        return HTMLResponse(html_path.read_text(encoding="utf-8"))
+    return HTMLResponse("<h1>GameForge</h1><p>Frontend not found</p>")
+
+
+@app.get("/static/{path:path}")
+async def static_files(path: str):
+    """Serve static assets (CSS, JS, fonts)."""
+    file_path = STATIC_DIR / path
+    if file_path.exists() and file_path.is_file():
+        media_types = {
+            ".css": "text/css",
+            ".js": "application/javascript",
+            ".png": "image/png",
+            ".jpg": "image/jpeg",
+            ".svg": "image/svg+xml",
+            ".woff2": "font/woff2",
+            ".woff": "font/woff",
+            ".ttf": "font/ttf",
+        }
+        ext = file_path.suffix.lower()
+        media_type = media_types.get(ext, "application/octet-stream")
+        return FileResponse(str(file_path), media_type=media_type)
+    return JSONResponse({"error": "Not found"}, status_code=404)
+
+
+# ============================================================================
+# API Endpoints (gradio_client compatible via @app.api)
+# ============================================================================
+
+@app.api()
+def registry_info() -> Dict[str, Any]:
+    """Get registry summary and all models."""
+    summary = registry.summary()
+    models = []
+    for asset_type in registry.list_asset_types():
+        asset = registry.get_asset(asset_type)
+        if asset:
+            for variant, model in asset.variants.items():
+                models.append({
+                    "asset_type": asset_type,
+                    "variant": variant,
+                    "model": model.model,
+                    "type": model.type,
+                    "license": model.license,
+                    "hardware": model.hardware,
+                    "status": model.status,
+                    "free": model.is_free,
+                    "commercial_safe": model.is_commercial_safe,
+                    "space_id": model.space_id,
+                })
+    return {"summary": summary, "models": models}
+
+
+@app.api()
+def get_route(asset_type: str, variant: str = "primary") -> Dict[str, Any]:
+    """Get routing info for a model."""
+    decision = router.route(asset_type, variant)
+    return decision.to_dict()
+
+
+@app.api()
+def list_pipelines() -> List[Dict[str, Any]]:
+    """List available pipeline definitions."""
+    pipes_dir = Path(__file__).parent.parent / "pipelines"
+    result = []
+    for path in sorted(pipes_dir.glob("*.yaml")):
+        try:
+            with open(path) as f:
+                data = yaml.safe_load(f)
+            result.append({
+                "name": path.stem,
+                "description": data.get("description", ""),
+                "version": data.get("version", ""),
+                "steps": len(data.get("steps", [])),
+                "defaults": data.get("defaults", {}),
+            })
+        except Exception:
+            pass
+    return result
+
+
+@app.api()
+def get_pipeline(name: str) -> Dict[str, Any]:
+    """Get full pipeline definition."""
+    pipes_dir = Path(__file__).parent.parent / "pipelines"
+    for path in pipes_dir.glob(f"{name}.yaml"):
+        with open(path) as f:
+            return yaml.safe_load(f)
+    return {"error": f"Pipeline not found: {name}"}
+
+
+@app.api()
+def format_prompt(asset_type: str, user_prompt: str, model_family: str = "") -> Dict[str, str]:
+    """Format a prompt using game-specific templates."""
+    template = get_template_for_asset(asset_type, model_family)
+    if template:
+        return template.format(user_prompt)
+    return {"prompt": user_prompt, "negative_prompt": ""}
+
+
+@app.api()
+def format_npc(text: str, emotion: str = "neutral", speaker: str = "") -> Dict[str, str]:
+    """Format NPC dialogue with emotion."""
+    return {"formatted": format_npc_dialogue(text, emotion, speaker)}
+
+
+@app.api()
+def list_templates_api() -> List[Dict[str, str]]:
+    """List all prompt templates."""
+    templates = list_templates()
+    return [
+        {
+            "name": t.name,
+            "asset_type": t.asset_type,
+            "model_family": t.model_family,
+            "examples": t.example_prompts[:3],
+        }
+        for t in templates
+    ]
+
+
+# ============================================================================
+# GPU-accelerated generation endpoints (ZeroGPU)
+# ============================================================================
+
+@spaces.GPU(duration=60)
+def _generate_image(prompt: str, negative_prompt: str = "", steps: int = 4) -> str:
+    """Generate an image using the HF Inference API."""
+    from huggingface_hub import InferenceClient
+    import tempfile
+
+    token = os.environ.get("HF_TOKEN", "")
+    if not token:
+        for tp in [os.path.expanduser("~/.cache/huggingface/token"),
+                    os.path.expanduser("~/.huggingface/token")]:
+            if os.path.isfile(tp):
+                token = open(tp).read().strip()
+                break
+
+    client = InferenceClient(token=token, provider="hf-inference")
+    image = client.text_to_image(
+        prompt,
+        model="black-forest-labs/FLUX.1-schnell",
+        negative_prompt=negative_prompt or None,
+        num_inference_steps=steps,
+    )
+
+    out_path = str(STORAGE_DIR / f"img_{hash(prompt) % 100000}.png")
+    image.save(out_path)
+    return out_path
+
+
+@app.api()
+def generate_image(prompt: str, negative_prompt: str = "", steps: int = 4) -> FileData:
+    """Generate an image from text. Returns PNG."""
+    out_path = _generate_image(prompt, negative_prompt, steps)
+    return FileData(path=out_path)
+
+
+@spaces.GPU(duration=120)
+def _generate_3d(image_path: str) -> str:
+    """Generate 3D mesh from image via TRELLIS.2 Space."""
+    from gradio_client import Client
+    import shutil
+
+    client = Client("microsoft/TRELLIS.2")
+    result = client.predict(image_path, api_name="/generate")
+
+    # Result is typically a file path or tuple
+    if isinstance(result, tuple):
+        mesh_path = result[0]
+    elif isinstance(result, str) and os.path.isfile(result):
+        mesh_path = result
+    else:
+        return None
+
+    out_path = str(STORAGE_DIR / f"mesh_{hash(image_path) % 100000}.glb")
+    if isinstance(mesh_path, str) and os.path.isfile(mesh_path):
+        shutil.copy2(mesh_path, out_path)
+        return out_path
+    return None
+
+
+@app.api()
+def generate_3d(image_path: FileData) -> Optional[FileData]:
+    """Generate 3D mesh from an image. Returns GLB."""
+    result = _generate_3d(image_path["path"])
+    if result:
+        return FileData(path=result)
+    return None
+
+
+@spaces.GPU(duration=60)
+def _generate_voice(text: str) -> str:
+    """Generate voice via MeloTTS."""
+    from gradio_client import Client
+    import shutil
+
+    client = Client("mrfakename/MeloTTS")
+    result = client.predict(text, api_name="/synthesize")
+
+    if isinstance(result, tuple):
+        audio_path = result[0]
+    elif isinstance(result, str) and os.path.isfile(result):
+        audio_path = result
+    else:
+        return None
+
+    out_path = str(STORAGE_DIR / f"voice_{hash(text) % 100000}.wav")
+    if os.path.isfile(audio_path):
+        shutil.copy2(audio_path, out_path)
+        return out_path
+    return None
+
+
+@app.api()
+def generate_voice(text: str) -> Optional[FileData]:
+    """Generate NPC voice from text. Returns WAV."""
+    result = _generate_voice(text)
+    if result:
+        return FileData(path=result)
+    return None
+
+
+@spaces.GPU(duration=120)
+def _generate_video(prompt: str) -> str:
+    """Generate video via LTX-2 Turbo."""
+    from gradio_client import Client
+    import shutil
+
+    client = Client("alexnasa/ltx-2-TURBO")
+    result = client.predict(prompt, api_name="/generate")
+
+    if isinstance(result, tuple):
+        video_path = result[0]
+    elif isinstance(result, str) and os.path.isfile(result):
+        video_path = result
+    else:
+        return None
+
+    out_path = str(STORAGE_DIR / f"video_{hash(prompt) % 100000}.mp4")
+    if os.path.isfile(video_path):
+        shutil.copy2(video_path, out_path)
+        return out_path
+    return None
+
+
+@app.api()
+def generate_video(prompt: str) -> Optional[FileData]:
+    """Generate a video from text. Returns MP4."""
+    result = _generate_video(prompt)
+    if result:
+        return FileData(path=result)
+    return None
+
+
+@spaces.GPU(duration=120)
+def _generate_music(prompt: str) -> str:
+    """Generate music via ACE-Step."""
+    from gradio_client import Client
+    import shutil
+
+    client = Client("victor/ace-step-jam")
+    result = client.predict(prompt, api_name="/predict")
+
+    if isinstance(result, tuple):
+        audio_path = result[0]
+    elif isinstance(result, str) and os.path.isfile(result):
+        audio_path = result
+    else:
+        return None
+
+    out_path = str(STORAGE_DIR / f"music_{hash(prompt) % 100000}.wav")
+    if os.path.isfile(audio_path):
+        shutil.copy2(audio_path, out_path)
+        return out_path
+    return None
+
+
+@app.api()
+def generate_music(prompt: str) -> Optional[FileData]:
+    """Generate music from text. Returns WAV."""
+    result = _generate_music(prompt)
+    if result:
+        return FileData(path=result)
+    return None
+
+
+@spaces.GPU(duration=60)
+def _generate_sfx(prompt: str) -> str:
+    """Generate sound effect via TangoFlux."""
+    from gradio_client import Client
+    import shutil
+
+    client = Client("declare-lab/TangoFlux")
+    result = client.predict(prompt, api_name="/predict")
+
+    if isinstance(result, tuple):
+        audio_path = result[0]
+    elif isinstance(result, str) and os.path.isfile(result):
+        audio_path = result
+    else:
+        return None
+
+    out_path = str(STORAGE_DIR / f"sfx_{hash(prompt) % 100000}.wav")
+    if os.path.isfile(audio_path):
+        shutil.copy2(audio_path, out_path)
+        return out_path
+    return None
+
+
+@app.api()
+def generate_sfx(prompt: str) -> Optional[FileData]:
+    """Generate sound effect from text. Returns WAV."""
+    result = _generate_sfx(prompt)
+    if result:
+        return FileData(path=result)
+    return None
+
+
+# ============================================================================
+# Asset management
+# ============================================================================
+
+@app.api()
+def list_assets(folder: str = "") -> List[Dict[str, Any]]:
+    """List generated assets."""
+    search_dir = STORAGE_DIR / folder if folder else STORAGE_DIR
+    if not search_dir.exists():
+        return []
+    assets = []
+    for f in sorted(search_dir.rglob("*")):
+        if f.is_file():
+            stat = f.stat()
+            assets.append({
+                "name": f.name,
+                "path": str(f),
+                "size": stat.st_size,
+                "format": f.suffix.lower(),
+                "modified": stat.st_mtime,
+            })
+    return assets
+
+
+@app.api()
+def delete_asset(path: str) -> Dict[str, bool]:
+    """Delete a generated asset."""
+    p = Path(path)
+    if p.exists() and p.is_file() and p.is_relative_to(STORAGE_DIR):
+        p.unlink()
+        return {"deleted": True}
+    return {"deleted": False}
+
+
+@app.api()
+def validate_asset_api(path: str, checks: str = "file_exists,non_empty") -> Dict[str, Any]:
+    """Validate an asset file."""
+    check_list = [c.strip() for c in checks.split(",")]
+    return validate_asset(path, check_list)
+
+
+@app.api()
+def convert_asset_api(input_path: str, target_format: str, engine: str = "") -> Optional[FileData]:
+    """Convert an asset format."""
+    eng = engine if engine else None
+    result = convert_asset(input_path, target_format, engine=eng)
+    if result:
+        return FileData(path=result)
+    return None
+
+
+# ============================================================================
+# MCP Tool Registration (for HF Spaces MCP support)
+# ============================================================================
+
+@app.mcp.tool()
+def gameforge_generate(
+    asset_type: str,
+    prompt: str,
+) -> str:
+    """Generate a game asset (image, 3D, voice, music, video, SFX).
+
+    Args:
+        asset_type: Type of asset - "image", "3d", "voice", "music", "video", "sfx"
+        prompt: Description of the asset to generate
+    """
+    generators = {
+        "image": _generate_image,
+        "3d": lambda p: _generate_3d(p),  # Takes image path, would need intermediate
+        "voice": _generate_voice,
+        "music": _generate_music,
+        "video": _generate_video,
+        "sfx": _generate_sfx,
+    }
+    fn = generators.get(asset_type)
+    if fn:
+        result = fn(prompt)
+        return result or "Generation failed"
+    return f"Unknown asset type: {asset_type}"
+
+
+@app.mcp.tool()
+def gameforge_list_models() -> str:
+    """List all available AI models for game asset generation."""
+    models = []
+    for asset_type in registry.list_asset_types():
+        asset = registry.get_asset(asset_type)
+        if asset:
+            for variant, model in asset.variants.items():
+                free = "FREE" if model.is_free else "PAID"
+                models.append(f"{asset_type}/{variant}: {model.model} [{free}]")
+    return "\n".join(models)
+
+
+# ============================================================================
+# Launch
+# ============================================================================
+
+if __name__ == "__main__":
+    app.launch(show_error=True)

requirements.txt

@@ -0,0 +1,8 @@
+gradio>=5.25.0
+huggingface_hub>=0.28.0
+gradio_client>=1.0.0
+pyyaml>=6.0
+Pillow>=10.0.0
+numpy>=1.24.0
+spaces>=0.30.0
+torch>=2.0.0

static/css/app.css

@@ -0,0 +1,391 @@
+/* GameForge - Custom Frontend Styles */
+
+:root {
+    --bg-primary: #0f1117;
+    --bg-secondary: #1a1d27;
+    --bg-tertiary: #242836;
+    --bg-hover: #2d3245;
+    --text-primary: #e4e7f1;
+    --text-secondary: #9ca3bf;
+    --text-muted: #6b7394;
+    --accent: #6c5ce7;
+    --accent-hover: #7d6ff0;
+    --success: #00d68f;
+    --warning: #ffaa00;
+    --danger: #ff6b6b;
+    --border: #2d3245;
+    --radius: 8px;
+    --radius-lg: 12px;
+    --shadow: 0 4px 24px rgba(0,0,0,0.3);
+}
+
+* { margin: 0; padding: 0; box-sizing: border-box; }
+
+body {
+    font-family: 'Inter', -apple-system, sans-serif;
+    background: var(--bg-primary);
+    color: var(--text-primary);
+    line-height: 1.6;
+}
+
+#app {
+    display: flex;
+    min-height: 100vh;
+}
+
+/* Sidebar */
+.sidebar {
+    width: 220px;
+    background: var(--bg-secondary);
+    border-right: 1px solid var(--border);
+    display: flex;
+    flex-direction: column;
+    padding: 16px 0;
+    position: fixed;
+    top: 0;
+    left: 0;
+    bottom: 0;
+    z-index: 100;
+}
+
+.logo {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    padding: 0 20px 20px;
+    border-bottom: 1px solid var(--border);
+    margin-bottom: 16px;
+}
+
+.logo-icon { font-size: 24px; }
+.logo-text { font-size: 18px; font-weight: 700; color: var(--accent); }
+
+.nav { list-style: none; flex: 1; }
+
+.nav-item {
+    padding: 10px 20px;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    color: var(--text-secondary);
+    transition: all 0.15s;
+    font-size: 14px;
+}
+
+.nav-item:hover { background: var(--bg-hover); color: var(--text-primary); }
+.nav-item.active { background: var(--bg-tertiary); color: var(--accent); border-left: 3px solid var(--accent); }
+
+.nav-icon { font-size: 16px; width: 20px; text-align: center; }
+
+.sidebar-footer {
+    padding: 16px 20px;
+    border-top: 1px solid var(--border);
+}
+
+.gpu-status {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    font-size: 12px;
+    color: var(--text-muted);
+}
+
+.status-dot {
+    width: 8px;
+    height: 8px;
+    border-radius: 50%;
+    background: var(--success);
+    animation: pulse 2s infinite;
+}
+
+@keyframes pulse {
+    0%, 100% { opacity: 1; }
+    50% { opacity: 0.5; }
+}
+
+/* Main content */
+.main {
+    flex: 1;
+    margin-left: 220px;
+    padding: 24px 32px;
+    max-width: 1200px;
+}
+
+.tab-content { display: none; }
+.tab-content.active { display: block; }
+
+h1 { font-size: 24px; font-weight: 700; margin-bottom: 24px; }
+h2 { font-size: 18px; font-weight: 600; margin: 24px 0 16px; color: var(--text-secondary); }
+
+/* Stats grid */
+.stats-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
+    gap: 16px;
+    margin-bottom: 32px;
+}
+
+.stat-card {
+    background: var(--bg-secondary);
+    border: 1px solid var(--border);
+    border-radius: var(--radius-lg);
+    padding: 20px;
+    text-align: center;
+}
+
+.stat-value {
+    font-size: 32px;
+    font-weight: 700;
+    color: var(--accent);
+    font-family: 'JetBrains Mono', monospace;
+}
+
+.stat-label {
+    font-size: 13px;
+    color: var(--text-muted);
+    margin-top: 4px;
+}
+
+/* Quick generate */
+.quick-gen-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
+    gap: 12px;
+}
+
+.quick-gen-card {
+    background: var(--bg-secondary);
+    border: 1px solid var(--border);
+    border-radius: var(--radius-lg);
+    padding: 24px 16px;
+    text-align: center;
+    cursor: pointer;
+    transition: all 0.15s;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 8px;
+}
+
+.quick-gen-card:hover {
+    border-color: var(--accent);
+    background: var(--bg-tertiary);
+    transform: translateY(-2px);
+}
+
+.qg-icon { font-size: 32px; }
+.qg-label { font-size: 14px; font-weight: 500; }
+
+/* Generate panel */
+.generate-panel {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: 24px;
+}
+
+.gen-form { display: flex; flex-direction: column; gap: 16px; }
+
+.form-group { display: flex; flex-direction: column; gap: 6px; }
+.form-group label { font-size: 13px; font-weight: 500; color: var(--text-secondary); }
+
+input[type="text"], textarea, select {
+    background: var(--bg-tertiary);
+    border: 1px solid var(--border);
+    border-radius: var(--radius);
+    padding: 10px 14px;
+    color: var(--text-primary);
+    font-family: inherit;
+    font-size: 14px;
+    outline: none;
+    transition: border-color 0.15s;
+}
+
+input:focus, textarea:focus, select:focus { border-color: var(--accent); }
+
+.btn {
+    border: none;
+    border-radius: var(--radius);
+    padding: 10px 20px;
+    font-family: inherit;
+    font-size: 14px;
+    font-weight: 500;
+    cursor: pointer;
+    transition: all 0.15s;
+}
+
+.btn-primary { background: var(--accent); color: white; }
+.btn-primary:hover { background: var(--accent-hover); }
+.btn-primary:disabled { opacity: 0.5; cursor: not-allowed; }
+.btn-secondary { background: var(--bg-tertiary); color: var(--text-primary); border: 1px solid var(--border); }
+.btn-secondary:hover { background: var(--bg-hover); }
+.btn-lg { padding: 14px 28px; font-size: 16px; }
+
+/* Preview box */
+.preview-box {
+    background: var(--bg-secondary);
+    border: 1px solid var(--border);
+    border-radius: var(--radius-lg);
+    min-height: 400px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    overflow: hidden;
+}
+
+.preview-placeholder {
+    text-align: center;
+    color: var(--text-muted);
+}
+
+.preview-placeholder span { font-size: 48px; display: block; margin-bottom: 12px; }
+
+.preview-box img, .preview-box video, .preview-box audio {
+    max-width: 100%;
+    max-height: 100%;
+    border-radius: var(--radius);
+}
+
+/* Pipeline grid */
+.pipeline-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
+    gap: 16px;
+}
+
+.pipeline-card {
+    background: var(--bg-secondary);
+    border: 1px solid var(--border);
+    border-radius: var(--radius-lg);
+    padding: 20px;
+}
+
+.pipeline-card h3 { font-size: 16px; margin-bottom: 8px; }
+.pipeline-card p { font-size: 13px; color: var(--text-muted); margin-bottom: 12px; }
+
+.pipeline-meta {
+    display: flex;
+    gap: 12px;
+    font-size: 12px;
+    color: var(--text-secondary);
+}
+
+/* Assets grid */
+.assets-toolbar {
+    display: flex;
+    gap: 12px;
+    margin-bottom: 20px;
+}
+
+.assets-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
+    gap: 12px;
+}
+
+.asset-card {
+    background: var(--bg-secondary);
+    border: 1px solid var(--border);
+    border-radius: var(--radius);
+    padding: 12px;
+    font-size: 13px;
+}
+
+.asset-card .name { font-weight: 500; word-break: break-all; }
+.asset-card .meta { color: var(--text-muted); font-size: 12px; margin-top: 4px; }
+
+/* Models table */
+.models-filters {
+    display: flex;
+    gap: 16px;
+    margin-bottom: 16px;
+    align-items: center;
+}
+
+.models-table {
+    width: 100%;
+    border-collapse: collapse;
+    font-size: 13px;
+}
+
+.models-table th {
+    text-align: left;
+    padding: 10px 12px;
+    background: var(--bg-secondary);
+    color: var(--text-secondary);
+    font-weight: 500;
+    border-bottom: 1px solid var(--border);
+}
+
+.models-table td {
+    padding: 8px 12px;
+    border-bottom: 1px solid var(--border);
+}
+
+.models-table tr:hover { background: var(--bg-hover); }
+
+.badge {
+    display: inline-block;
+    padding: 2px 8px;
+    border-radius: 4px;
+    font-size: 11px;
+    font-weight: 500;
+}
+
+.badge-free { background: rgba(0,214,143,0.15); color: var(--success); }
+.badge-paid { background: rgba(255,170,0,0.15); color: var(--warning); }
+.badge-safe { background: rgba(108,92,231,0.15); color: var(--accent); }
+.badge-check { background: rgba(255,107,107,0.15); color: var(--danger); }
+
+/* Batch */
+.batch-form {
+    background: var(--bg-secondary);
+    border: 1px solid var(--border);
+    border-radius: var(--radius-lg);
+    padding: 24px;
+    margin-bottom: 24px;
+}
+
+.batch-results {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+    gap: 12px;
+}
+
+/* Toast */
+#toast-container {
+    position: fixed;
+    bottom: 24px;
+    right: 24px;
+    z-index: 1000;
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+}
+
+.toast {
+    background: var(--bg-tertiary);
+    border: 1px solid var(--border);
+    border-radius: var(--radius);
+    padding: 12px 20px;
+    font-size: 14px;
+    animation: slideIn 0.2s ease-out;
+    max-width: 400px;
+}
+
+.toast-success { border-left: 3px solid var(--success); }
+.toast-error { border-left: 3px solid var(--danger); }
+.toast-info { border-left: 3px solid var(--accent); }
+
+@keyframes slideIn {
+    from { transform: translateX(100%); opacity: 0; }
+    to { transform: translateX(0); opacity: 1; }
+}
+
+/* Responsive */
+@media (max-width: 768px) {
+    .sidebar { width: 60px; }
+    .logo-text, .nav-item span:not(.nav-icon) { display: none; }
+    .main { margin-left: 60px; padding: 16px; }
+    .generate-panel { grid-template-columns: 1fr; }
+}

static/index.html

@@ -0,0 +1,224 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>GameForge - AI Game Asset Pipeline</title>
+    <link rel="stylesheet" href="/static/css/app.css">
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">
+</head>
+<body>
+    <div id="app">
+        <!-- Sidebar -->
+        <nav class="sidebar">
+            <div class="logo">
+                <span class="logo-icon">⚔️</span>
+                <span class="logo-text">GameForge</span>
+            </div>
+            <ul class="nav">
+                <li class="nav-item active" data-tab="dashboard">
+                    <span class="nav-icon">📊</span> Dashboard
+                </li>
+                <li class="nav-item" data-tab="generate">
+                    <span class="nav-icon">✨</span> Generate
+                </li>
+                <li class="nav-item" data-tab="pipelines">
+                    <span class="nav-icon">🔗</span> Pipelines
+                </li>
+                <li class="nav-item" data-tab="assets">
+                    <span class="nav-icon">📁</span> Assets
+                </li>
+                <li class="nav-item" data-tab="models">
+                    <span class="nav-icon">🧠</span> Models
+                </li>
+                <li class="nav-item" data-tab="batch">
+                    <span class="nav-icon">📦</span> Batch
+                </li>
+            </ul>
+            <div class="sidebar-footer">
+                <div class="gpu-status">
+                    <span class="status-dot"></span>
+                    <span>ZeroGPU Ready</span>
+                </div>
+            </div>
+        </nav>
+
+        <!-- Main Content -->
+        <main class="main">
+            <!-- Dashboard -->
+            <section class="tab-content active" id="tab-dashboard">
+                <h1>Dashboard</h1>
+                <div class="stats-grid">
+                    <div class="stat-card">
+                        <div class="stat-value" id="stat-models">--</div>
+                        <div class="stat-label">Models Available</div>
+                    </div>
+                    <div class="stat-card">
+                        <div class="stat-value" id="stat-free">--</div>
+                        <div class="stat-label">Free (ZeroGPU)</div>
+                    </div>
+                    <div class="stat-card">
+                        <div class="stat-value" id="stat-pipelines">--</div>
+                        <div class="stat-label">Pipelines</div>
+                    </div>
+                    <div class="stat-card">
+                        <div class="stat-value" id="stat-assets">--</div>
+                        <div class="stat-label">Generated Assets</div>
+                    </div>
+                </div>
+                <h2>Quick Generate</h2>
+                <div class="quick-gen-grid">
+                    <button class="quick-gen-card" data-pipeline="character" data-prompt="fantasy knight in silver armor">
+                        <span class="qg-icon">⚔️</span>
+                        <span class="qg-label">Character</span>
+                    </button>
+                    <button class="quick-gen-card" data-pipeline="prop" data-prompt="enchanted magic sword with glowing runes">
+                        <span class="qg-icon">🗡️</span>
+                        <span class="qg-label">Prop</span>
+                    </button>
+                    <button class="quick-gen-card" data-pipeline="environment" data-prompt="dark fantasy forest clearing at twilight">
+                        <span class="qg-icon">🌲</span>
+                        <span class="qg-label">Environment</span>
+                    </button>
+                    <button class="quick-gen-card" data-pipeline="npc_voice" data-prompt="Welcome, traveler. What brings you to our village?">
+                        <span class="qg-icon">🗣️</span>
+                        <span class="qg-label">NPC Voice</span>
+                    </button>
+                    <button class="quick-gen-card" data-pipeline="audio" data-prompt="epic orchestral battle theme">
+                        <span class="qg-icon">🎵</span>
+                        <span class="qg-label">Music</span>
+                    </button>
+                    <button class="quick-gen-card" data-pipeline="audio" data-prompt="sword slash whoosh with metallic ring">
+                        <span class="qg-icon">💥</span>
+                        <span class="qg-label">SFX</span>
+                    </button>
+                </div>
+            </section>
+
+            <!-- Generate -->
+            <section class="tab-content" id="tab-generate">
+                <h1>Generate Asset</h1>
+                <div class="generate-panel">
+                    <div class="gen-form">
+                        <div class="form-group">
+                            <label>Asset Type</label>
+                            <select id="gen-type">
+                                <option value="image">Image (FLUX)</option>
+                                <option value="3d">3D Model (TRELLIS.2)</option>
+                                <option value="voice">NPC Voice (MeloTTS)</option>
+                                <option value="music">Music (ACE-Step)</option>
+                                <option value="video">Video (LTX 2.3)</option>
+                                <option value="sfx">Sound Effect (TangoFlux)</option>
+                            </select>
+                        </div>
+                        <div class="form-group">
+                            <label>Prompt</label>
+                            <textarea id="gen-prompt" placeholder="Describe your asset..." rows="4"></textarea>
+                        </div>
+                        <div class="form-group" id="neg-prompt-group">
+                            <label>Negative Prompt (optional)</label>
+                            <input type="text" id="gen-negative" placeholder="blurry, low quality, watermark">
+                        </div>
+                        <div class="form-group" id="ref-image-group" style="display:none">
+                            <label>Reference Image (for 3D)</label>
+                            <input type="file" id="gen-ref-image" accept="image/*">
+                        </div>
+                        <button class="btn btn-primary btn-lg" id="gen-btn">
+                            <span class="btn-text">Generate</span>
+                            <span class="btn-loading" style="display:none">Generating...</span>
+                        </button>
+                    </div>
+                    <div class="gen-preview">
+                        <div class="preview-box" id="gen-preview-box">
+                            <div class="preview-placeholder">
+                                <span>✨</span>
+                                <p>Your generated asset will appear here</p>
+                            </div>
+                        </div>
+                        <div class="gen-result-info" id="gen-result-info" style="display:none">
+                            <div id="gen-result-meta"></div>
+                            <button class="btn btn-secondary" id="gen-download">Download</button>
+                        </div>
+                    </div>
+                </div>
+            </section>
+
+            <!-- Pipelines -->
+            <section class="tab-content" id="tab-pipelines">
+                <h1>Pipelines</h1>
+                <div class="pipeline-grid" id="pipeline-grid">
+                    <!-- Loaded dynamically -->
+                </div>
+            </section>
+
+            <!-- Assets -->
+            <section class="tab-content" id="tab-assets">
+                <h1>Generated Assets</h1>
+                <div class="assets-toolbar">
+                    <select id="asset-filter">
+                        <option value="">All Types</option>
+                    </select>
+                    <button class="btn btn-secondary" id="asset-refresh">Refresh</button>
+                </div>
+                <div class="assets-grid" id="assets-grid">
+                    <!-- Loaded dynamically -->
+                </div>
+            </section>
+
+            <!-- Models -->
+            <section class="tab-content" id="tab-models">
+                <h1>Model Registry</h1>
+                <div class="models-filters">
+                    <select id="model-filter-type">
+                        <option value="">All Asset Types</option>
+                    </select>
+                    <label><input type="checkbox" id="model-filter-free"> Free Only</label>
+                    <label><input type="checkbox" id="model-filter-safe"> Commercial Safe</label>
+                </div>
+                <table class="models-table" id="models-table">
+                    <thead>
+                        <tr>
+                            <th>Asset Type</th>
+                            <th>Variant</th>
+                            <th>Model</th>
+                            <th>Type</th>
+                            <th>License</th>
+                            <th>Hardware</th>
+                            <th>Free</th>
+                            <th>Safe</th>
+                        </tr>
+                    </thead>
+                    <tbody id="models-tbody"></tbody>
+                </table>
+            </section>
+
+            <!-- Batch -->
+            <section class="tab-content" id="tab-batch">
+                <h1>Batch Generator</h1>
+                <div class="batch-form">
+                    <div class="form-group">
+                        <label>Pipeline</label>
+                        <select id="batch-pipeline"></select>
+                    </div>
+                    <div class="form-group">
+                        <label>Base Prompt</label>
+                        <textarea id="batch-prompt" placeholder="enchanted sword with glowing runes" rows="2"></textarea>
+                    </div>
+                    <div class="form-group">
+                        <label>Variants: <span id="batch-count-val">3</span></label>
+                        <input type="range" id="batch-count" min="1" max="10" value="3">
+                    </div>
+                    <button class="btn btn-primary" id="batch-btn">Generate Variants</button>
+                </div>
+                <div class="batch-results" id="batch-results"></div>
+            </section>
+        </main>
+
+        <!-- Toast notifications -->
+        <div id="toast-container"></div>
+    </div>
+
+    <script type="module" src="/static/js/app.js"></script>
+</body>
+</html>

static/js/app.js

@@ -0,0 +1,360 @@
+/**
+ * GameForge Frontend
+ * Custom HTML/CSS/JS app powered by gradio.Server + ZeroGPU.
+ */
+
+import { Client } from "https://cdn.jsdelivr.net/npm/@gradio/client/dist/index.min.js";
+
+// ============================================================================
+// State
+// ============================================================================
+
+let client = null;
+let registryData = [];
+let pipelines = [];
+
+// ============================================================================
+// Gradio Client Connection
+// ============================================================================
+
+async function connect() {
+    try {
+        client = await Client.connect(window.location.origin);
+        toast("Connected to GameForge", "success");
+        await loadDashboard();
+    } catch (e) {
+        toast("Failed to connect: " + e.message, "error");
+    }
+}
+
+// ============================================================================
+// API Helpers
+// ============================================================================
+
+async function api(endpoint, params = {}) {
+    if (!client) await connect();
+    try {
+        const result = await client.predict(endpoint, params);
+        return result.data;
+    } catch (e) {
+        toast(`API error (${endpoint}): ${e.message}`, "error");
+        throw e;
+    }
+}
+
+// ============================================================================
+// Navigation
+// ============================================================================
+
+document.querySelectorAll(".nav-item").forEach(item => {
+    item.addEventListener("click", () => {
+        document.querySelectorAll(".nav-item").forEach(i => i.classList.remove("active"));
+        document.querySelectorAll(".tab-content").forEach(t => t.classList.remove("active"));
+        item.classList.add("active");
+        const tab = document.getElementById("tab-" + item.dataset.tab);
+        if (tab) tab.classList.add("active");
+
+        // Load data for tab
+        if (item.dataset.tab === "models") loadModels();
+        if (item.dataset.tab === "pipelines") loadPipelines();
+        if (item.dataset.tab === "assets") loadAssets();
+        if (item.dataset.tab === "batch") loadBatchPipelines();
+    });
+});
+
+// ============================================================================
+// Dashboard
+// ============================================================================
+
+async function loadDashboard() {
+    try {
+        const [reg, pipes, assets] = await Promise.all([
+            api("/registry_info"),
+            api("/list_pipelines"),
+            api("/list_assets"),
+        ]);
+
+        registryData = reg.models || [];
+        pipelines = pipes || [];
+
+        document.getElementById("stat-models").textContent = registryData.length;
+        document.getElementById("stat-free").textContent = registryData.filter(m => m.free).length;
+        document.getElementById("stat-pipelines").textContent = pipelines.length;
+        document.getElementById("stat-assets").textContent = assets.length;
+
+        // Quick generate buttons
+        document.querySelectorAll(".quick-gen-card").forEach(card => {
+            card.addEventListener("click", () => {
+                const typeMap = {
+                    character: "image", prop: "image", environment: "image",
+                    npc_voice: "voice", audio: "music",
+                };
+                const type = typeMap[card.dataset.pipeline] || "image";
+                document.getElementById("gen-type").value = type;
+                document.getElementById("gen-prompt").value = card.dataset.prompt;
+                switchTab("generate");
+                document.getElementById("gen-btn").click();
+            });
+        });
+    } catch (e) {
+        console.error("Dashboard load failed:", e);
+    }
+}
+
+function switchTab(name) {
+    document.querySelector(`.nav-item[data-tab="${name}"]`)?.click();
+}
+
+// ============================================================================
+// Generate
+// ============================================================================
+
+const genType = document.getElementById("gen-type");
+const genBtn = document.getElementById("gen-btn");
+const genPrompt = document.getElementById("gen-prompt");
+const genPreview = document.getElementById("gen-preview-box");
+const genInfo = document.getElementById("gen-result-info");
+
+genType.addEventListener("change", () => {
+    const is3d = genType.value === "3d";
+    document.getElementById("ref-image-group").style.display = is3d ? "block" : "none";
+    document.getElementById("neg-prompt-group").style.display = (genType.value === "image") ? "block" : "none";
+});
+
+genBtn.addEventListener("click", async () => {
+    const prompt = genPrompt.value.trim();
+    if (!prompt) { toast("Enter a prompt", "error"); return; }
+
+    const type = genType.value;
+    const btnText = genBtn.querySelector(".btn-text");
+    const btnLoad = genBtn.querySelector(".btn-loading");
+
+    btnText.style.display = "none";
+    btnLoad.style.display = "inline";
+    genBtn.disabled = true;
+
+    genPreview.innerHTML = '<div class="preview-placeholder"><span>⏳</span><p>Generating...</p></div>';
+
+    try {
+        const endpointMap = {
+            image: "/generate_image",
+            voice: "/generate_voice",
+            music: "/generate_music",
+            video: "/generate_video",
+            sfx: "/generate_sfx",
+            "3d": "/generate_3d",
+        };
+
+        const endpoint = endpointMap[type];
+        let result;
+
+        if (type === "image") {
+            const neg = document.getElementById("gen-negative").value;
+            result = await client.predict(endpoint, { prompt, negative_prompt: neg, steps: 4 });
+        } else {
+            result = await client.predict(endpoint, { prompt, text: prompt });
+        }
+
+        const fileData = result.data[0];
+        if (fileData && fileData.url) {
+            showResult(fileData, type);
+            toast("Generated!", "success");
+        } else {
+            genPreview.innerHTML = '<div class="preview-placeholder"><span>❌</span><p>Generation failed</p></div>';
+        }
+    } catch (e) {
+        genPreview.innerHTML = `<div class="preview-placeholder"><span>❌</span><p>${e.message}</p></div>`;
+    } finally {
+        btnText.style.display = "inline";
+        btnLoad.style.display = "none";
+        genBtn.disabled = false;
+    }
+});
+
+function showResult(fileData, type) {
+    const url = fileData.url;
+    let html = "";
+
+    if (type === "image") {
+        html = `<img src="${url}" alt="Generated">`;
+    } else if (type === "video") {
+        html = `<video controls autoplay><source src="${url}" type="video/mp4"></video>`;
+    } else if (["voice", "music", "sfx"].includes(type)) {
+        html = `<audio controls autoplay><source src="${url}"></audio>`;
+    } else {
+        html = `<div class="preview-placeholder"><span>📦</span><p>3D Model Generated</p></div>`;
+    }
+
+    genPreview.innerHTML = html;
+    genInfo.style.display = "flex";
+
+    document.getElementById("gen-download").onclick = () => {
+        const a = document.createElement("a");
+        a.href = url;
+        a.download = `gameforge_${type}_${Date.now()}`;
+        a.click();
+    };
+}
+
+// ============================================================================
+// Models
+// ============================================================================
+
+async function loadModels() {
+    if (!registryData.length) {
+        const reg = await api("/registry_info");
+        registryData = reg.models || [];
+    }
+
+    const typeFilter = document.getElementById("model-filter-type");
+    const freeOnly = document.getElementById("model-filter-free");
+    const safeOnly = document.getElementById("model-filter-safe");
+
+    // Populate type filter
+    const types = [...new Set(registryData.map(m => m.asset_type))];
+    if (typeFilter.options.length <= 1) {
+        types.forEach(t => {
+            const opt = document.createElement("option");
+            opt.value = t;
+            opt.textContent = t;
+            typeFilter.appendChild(opt);
+        });
+    }
+
+    function render() {
+        let models = registryData;
+        if (typeFilter.value) models = models.filter(m => m.asset_type === typeFilter.value);
+        if (freeOnly.checked) models = models.filter(m => m.free);
+        if (safeOnly.checked) models = models.filter(m => m.commercial_safe);
+
+        const tbody = document.getElementById("models-tbody");
+        tbody.innerHTML = models.map(m => `
+            <tr>
+                <td>${m.asset_type}</td>
+                <td>${m.variant}</td>
+                <td style="font-family:monospace;font-size:12px">${m.model}</td>
+                <td>${m.type}</td>
+                <td>${m.license}</td>
+                <td>${m.hardware}</td>
+                <td><span class="badge ${m.free ? 'badge-free' : 'badge-paid'}">${m.free ? 'FREE' : 'PAID'}</span></td>
+                <td><span class="badge ${m.commercial_safe ? 'badge-safe' : 'badge-check'}">${m.commercial_safe ? 'SAFE' : 'CHECK'}</span></td>
+            </tr>
+        `).join("");
+    }
+
+    typeFilter.onchange = freeOnly.onchange = safeOnly.onchange = render;
+    render();
+}
+
+// ============================================================================
+// Pipelines
+// ============================================================================
+
+async function loadPipelines() {
+    if (!pipelines.length) {
+        pipelines = await api("/list_pipelines");
+    }
+
+    const grid = document.getElementById("pipeline-grid");
+    grid.innerHTML = pipelines.map(p => `
+        <div class="pipeline-card">
+            <h3>${p.name}</h3>
+            <p>${p.description}</p>
+            <div class="pipeline-meta">
+                <span>📋 ${p.steps} steps</span>
+                <span>v${p.version}</span>
+            </div>
+        </div>
+    `).join("");
+}
+
+// ============================================================================
+// Assets
+// ============================================================================
+
+async function loadAssets() {
+    const assets = await api("/list_assets");
+    const grid = document.getElementById("assets-grid");
+
+    if (!assets.length) {
+        grid.innerHTML = '<p style="color:var(--text-muted);grid-column:1/-1">No assets generated yet. Go to Generate to create some!</p>';
+        return;
+    }
+
+    grid.innerHTML = assets.map(a => `
+        <div class="asset-card">
+            <div class="name">${a.name}</div>
+            <div class="meta">${a.format} &middot; ${(a.size / 1024).toFixed(1)} KB</div>
+        </div>
+    `).join("");
+}
+
+document.getElementById("asset-refresh")?.addEventListener("click", loadAssets);
+
+// ============================================================================
+// Batch
+// ============================================================================
+
+async function loadBatchPipelines() {
+    if (!pipelines.length) {
+        pipelines = await api("/list_pipelines");
+    }
+
+    const select = document.getElementById("batch-pipeline");
+    select.innerHTML = pipelines.map(p =>
+        `<option value="${p.name}">${p.name} (${p.steps} steps)</option>`
+    ).join("");
+}
+
+document.getElementById("batch-count")?.addEventListener("input", (e) => {
+    document.getElementById("batch-count-val").textContent = e.target.value;
+});
+
+document.getElementById("batch-btn")?.addEventListener("click", async () => {
+    const pipeline = document.getElementById("batch-pipeline").value;
+    const prompt = document.getElementById("batch-prompt").value;
+    const count = parseInt(document.getElementById("batch-count").value);
+
+    if (!prompt) { toast("Enter a prompt", "error"); return; }
+
+    toast(`Generating ${count} variants...`, "info");
+
+    // Run variants sequentially
+    const results = document.getElementById("batch-results");
+    results.innerHTML = "";
+
+    for (let i = 0; i < count; i++) {
+        const card = document.createElement("div");
+        card.className = "asset-card";
+        card.innerHTML = `<div class="name">Variant ${i + 1}</div><div class="meta">Generating...</div>`;
+        results.appendChild(card);
+
+        try {
+            // Each variant gets a slightly different prompt
+            const variantPrompt = `${prompt}, style variation ${i + 1}`;
+            // This would call the pipeline endpoint
+            card.querySelector(".meta").textContent = "Queued";
+        } catch (e) {
+            card.querySelector(".meta").textContent = "Failed: " + e.message;
+        }
+    }
+});
+
+// ============================================================================
+// Toast Notifications
+// ============================================================================
+
+function toast(message, type = "info") {
+    const container = document.getElementById("toast-container");
+    const el = document.createElement("div");
+    el.className = `toast toast-${type}`;
+    el.textContent = message;
+    container.appendChild(el);
+    setTimeout(() => el.remove(), 4000);
+}
+
+// ============================================================================
+// Init
+// ============================================================================
+
+connect();