use gradio server

app.py

@@ -1,28 +1,1487 @@
 from __future__ import annotations
 
 import os
+import shutil
+import time
+import uuid
+from pathlib import Path
 
 os.environ.setdefault("GRADIO_SSR_MODE", "false")
 
 import spaces  # noqa: F401 - must patch torch before model modules are imported
 
-from src.demo.hf_runtime import InfiniSplatRuntime
-from src.demo.hf_ui import APP_CSS, APP_THEME, OUTPUT_ROOT, create_demo
+from fastapi.responses import HTMLResponse
+from gradio import Server
+from gradio.data_classes import FileData
+
+from urllib.parse import quote, urlparse
+
+from src.demo.hf_runtime import (
+    InfiniSplatRuntime,
+    ViewerTemplate,
+    export_browser_viewer,
+    export_filtered_gaussian_ply,
+    export_standalone_viewer,
+    prepare_viewer_template,
+)
+
+OUTPUT_ROOT = Path(os.environ.get("GRADIO_TEMP_DIR", "/tmp/gradio")) / "infinisplat"
+OUTPUT_ROOT.mkdir(parents=True, exist_ok=True)
+GPU_DURATION_SECONDS = 6
 
 
 runtime = InfiniSplatRuntime.load()
-demo = create_demo(runtime)
+viewer_template = prepare_viewer_template(OUTPUT_ROOT)
+
+
+app = Server(
+    title="InfiniSplat",
+    description="Implicit Gaussian decoding for large-baseline monocular view synthesis.",
+)
+
+
+def _log(stage: str, **metrics) -> None:
+    import json
+
+    print(f"INFINISPLAT_TIMING {json.dumps({'stage': stage, **metrics}, sort_keys=True)}", flush=True)
+
+
+def _file_url(path: Path) -> str:
+    """Return the public Gradio file URL for a server-side path."""
+    return f"/gradio_api/file={quote(str(path.resolve()))}"
+
+
+def _resolve_file_path(value: FileData | str) -> Path:
+    """Resolve a FileData input (or URL/path string) back to a local file path."""
+    if isinstance(value, str):
+        path_str = value
+    elif isinstance(value, dict):
+        path_str = value.get("path") or value.get("url") or ""
+    else:
+        path_str = str(value)
+    if not path_str:
+        raise ValueError(f"Cannot resolve file path from input: {value!r}")
+    # Strip Gradio's /gradio_api/file= URL prefix to get the real path
+    if path_str.startswith("/gradio_api/file="):
+        decoded = urlparse(path_str).path[len("/gradio_api/file="):]
+        return Path(decoded)
+    # Already a server-local path
+    if path_str.startswith("/"):
+        return Path(path_str)
+    return Path(path_str)
+
+
+@app.api(name="reconstruct", queue=True, concurrency_limit=1, concurrency_id="gpu")
+@spaces.GPU(duration=GPU_DURATION_SECONDS)
+def reconstruct(image_path: FileData) -> dict:
+    """Run GPU reconstruction and return a public URL for the artifact."""
+    started = time.perf_counter()
+    request_dir = OUTPUT_ROOT / uuid.uuid4().hex
+    request_dir.mkdir(parents=True, exist_ok=True)
+    artifact = runtime.infer_to_artifact(
+        image_path=_resolve_file_path(image_path),
+        artifact_path=request_dir / "gaussians.pt",
+    )
+    _log(
+        "gpu_reconstruct",
+        request=request_dir.name,
+        seconds=round(time.perf_counter() - started, 3),
+        bytes=artifact.stat().st_size,
+    )
+    return {"url": _file_url(artifact), "size": artifact.stat().st_size}
+
+
+@app.api(name="export_ply", queue=True, concurrency_limit=2)
+def export_ply(artifact_url: str) -> dict:
+    """Filter one PLY artifact and return its public URL."""
+    started = time.perf_counter()
+    internal = _resolve_file_path(artifact_url)
+    scene_ply = export_filtered_gaussian_ply(
+        artifact_path=internal,
+        output_dir=internal.parent,
+    )
+    internal.unlink(missing_ok=True)
+    _log(
+        "ply_export",
+        request=scene_ply.parent.name,
+        seconds=round(time.perf_counter() - started, 3),
+        bytes=scene_ply.stat().st_size,
+    )
+    return {"url": _file_url(scene_ply), "size": scene_ply.stat().st_size}
+
+
+@app.api(name="export_viewer", queue=True, concurrency_limit=2)
+def export_viewer(scene_ply_url: str) -> dict:
+    """Build the browser viewer and return its iframe-ready HTML URL."""
+    started = time.perf_counter()
+    scene_ply_path = _resolve_file_path(scene_ply_url)
+    exported = export_browser_viewer(
+        scene_ply=scene_ply_path,
+        viewer_template=viewer_template,
+    )
+    _log(
+        "browser_viewer",
+        request=exported.viewer_html.parent.name,
+        seconds=round(time.perf_counter() - started, 3),
+        sog_bytes=exported.scene_sog.stat().st_size,
+        viewer_html_bytes=exported.viewer_html.stat().st_size,
+    )
+    return {"url": _file_url(exported.viewer_html), "size": exported.viewer_html.stat().st_size}
+
+
+@app.api(name="export_html", queue=True, concurrency_limit=2)
+def export_html(viewer_html_url: str) -> dict:
+    """Bundle a standalone HTML viewer and return its public URL."""
+    started = time.perf_counter()
+    viewer_html_path = _resolve_file_path(viewer_html_url)
+    standalone = export_standalone_viewer(
+        viewer_html=viewer_html_path,
+        viewer_template=viewer_template,
+    )
+    _log(
+        "standalone_html",
+        request=standalone.parent.name,
+        seconds=round(time.perf_counter() - started, 3),
+        bytes=standalone.stat().st_size,
+    )
+    return {"url": _file_url(standalone), "size": standalone.stat().st_size}
+
+
+@app.api(name="viewer_html", queue=False)
+def viewer_html() -> dict:
+    """Serve the preloaded viewer template HTML for fast first paint."""
+    return {"url": _file_url(viewer_template.viewer_html)}
+
+
+INDEX_HTML = r"""<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="utf-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1" />
+  <title>InfiniSplat — Studio</title>
+  <link rel="preconnect" href="https://fonts.googleapis.com" />
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600&display=swap" rel="stylesheet" />
+  <style>
+    /* ─────────────── Design tokens ─────────────── */
+    :root {
+      color-scheme: dark;
+      --bg: #0c1014;
+      --bg-grid: #0e1217;
+      --surface: #151a21;
+      --surface-2: #1a2028;
+      --surface-3: #222932;
+      --panel: #161b22;
+      --panel-hi: #1d242e;
+      --border: #232b35;
+      --border-strong: #34404e;
+      --text: #e7eaed;
+      --text-2: #b6bec8;
+      --muted: #8a95a3;
+      --muted-2: #5c6675;
+      --accent: #ffb547;
+      --accent-hi: #ffc870;
+      --accent-soft: rgba(255, 181, 71, 0.14);
+      --accent-glow: rgba(255, 181, 71, 0.28);
+      --success: #34d399;
+      --success-soft: rgba(52, 211, 153, 0.14);
+      --danger: #f87171;
+      --warn: #fbbf24;
+      --info: #60a5fa;
+      --viewer: #0a0d10;
+      --radius: 6px;
+      --radius-sm: 4px;
+      --shadow: 0 1px 0 rgba(255,255,255,0.02), 0 8px 24px rgba(0,0,0,0.35);
+      --grid-line: rgba(255,255,255,0.02);
+    }
+    * { box-sizing: border-box; margin: 0; padding: 0; }
+    html, body { height: 100%; }
+    body {
+      background: var(--bg);
+      color: var(--text);
+      font-family: 'Inter', system-ui, sans-serif;
+      font-size: 13px;
+      line-height: 1.5;
+      -webkit-font-smoothing: antialiased;
+      overflow: hidden;
+    }
+    .mono { font-family: 'JetBrains Mono', ui-monospace, monospace; font-feature-settings: "tnum"; }
+
+    /* ─────────────── App shell ─────────────── */
+    .app {
+      display: grid;
+      grid-template-rows: 44px 1fr 24px;
+      height: 100vh;
+      background: var(--bg);
+    }
+
+    /* ─────────────── Toolbar ─────────────── */
+    .toolbar {
+      display: grid;
+      grid-template-columns: auto 1fr auto auto;
+      align-items: center;
+      gap: 16px;
+      padding: 0 12px;
+      background: var(--surface);
+      border-bottom: 1px solid var(--border);
+      user-select: none;
+    }
+    .tb-brand {
+      display: flex; align-items: center; gap: 10px;
+      padding-right: 14px; height: 100%;
+      border-right: 1px solid var(--border);
+    }
+    .tb-logo {
+      width: 22px; height: 22px;
+      display: grid; place-items: center;
+      background: var(--accent);
+      color: #0c1014;
+      border-radius: var(--radius-sm);
+      box-shadow: 0 0 12px var(--accent-glow);
+    }
+    .tb-logo svg { width: 14px; height: 14px; }
+    .tb-name {
+      font-weight: 800; font-size: 13px; letter-spacing: -0.01em;
+    }
+    .tb-name .accent { color: var(--accent); }
+    .tb-build {
+      font-family: 'JetBrains Mono', monospace;
+      font-size: 10px; color: var(--muted-2);
+      padding: 2px 6px; border: 1px solid var(--border);
+      border-radius: 3px; margin-left: 4px;
+    }
+    .tb-scene {
+      display: flex; align-items: center; gap: 8px;
+      min-width: 0;
+    }
+    .tb-scene-label { font-size: 11px; color: var(--muted); }
+    .tb-scene-name {
+      font-weight: 600; font-size: 12px;
+      padding: 4px 8px;
+      background: var(--surface-2);
+      border: 1px solid var(--border);
+      border-radius: var(--radius-sm);
+      max-width: 200px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
+    }
+    .tb-actions { display: flex; align-items: center; gap: 6px; }
+    .tb-shortcut {
+      font-family: 'JetBrains Mono', monospace;
+      font-size: 10px; color: var(--muted-2);
+      padding: 1px 4px; border: 1px solid var(--border-strong);
+      border-radius: 3px; margin-left: 6px;
+    }
+    .icon-btn {
+      display: inline-flex; align-items: center; justify-content: center; gap: 6px;
+      min-height: 28px; padding: 0 10px;
+      background: var(--surface-2);
+      border: 1px solid var(--border);
+      border-radius: var(--radius-sm);
+      color: var(--text-2);
+      font: 500 12px 'Inter', sans-serif;
+      text-decoration: none;
+      cursor: pointer;
+      transition: border-color 120ms ease, background 120ms ease, color 120ms ease;
+    }
+    .icon-btn:hover { border-color: var(--accent); color: var(--text); }
+    .icon-btn svg { width: 13px; height: 13px; }
+    .icon-btn.ghost { background: transparent; border-color: transparent; }
+    .icon-btn.ghost:hover { background: var(--surface-2); border-color: var(--border); }
+
+    /* Primary reconstruct button */
+    .reconstruct-btn {
+      display: inline-flex; align-items: center; justify-content: center; gap: 8px;
+      min-height: 32px; padding: 0 16px;
+      background: var(--accent); color: #0c1014;
+      border: 0; border-radius: var(--radius-sm);
+      font: 700 12px 'Inter', sans-serif;
+      text-transform: uppercase; letter-spacing: 0.04em;
+      cursor: pointer;
+      box-shadow: 0 0 0 1px var(--accent), 0 0 16px var(--accent-glow);
+      transition: background 120ms ease, box-shadow 120ms ease;
+    }
+    .reconstruct-btn:hover { background: var(--accent-hi); }
+    .reconstruct-btn:active { transform: translateY(1px); }
+    .reconstruct-btn:disabled {
+      background: var(--surface-3); color: var(--muted-2);
+      box-shadow: 0 0 0 1px var(--border);
+      cursor: not-allowed;
+    }
+    .reconstruct-btn .spinner {
+      width: 12px; height: 12px;
+      border: 2px solid rgba(12,16,20,0.3);
+      border-top-color: #0c1014;
+      border-radius: 50%;
+      animation: spin 0.8s linear infinite;
+    }
+    @keyframes spin { to { transform: rotate(360deg); } }
+
+    /* ─────────────── Workspace ─────────────── */
+    .workspace {
+      display: grid;
+      grid-template-columns: 240px 1fr 280px;
+      gap: 1px;
+      background: var(--border);
+      min-height: 0;
+      overflow: hidden;
+    }
+    @media (max-width: 1100px) { .workspace { grid-template-columns: 220px 1fr 240px; } }
+    @media (max-width: 900px) {
+      .workspace { grid-template-columns: 1fr; grid-template-rows: auto 1fr auto; }
+    }
+
+    .col {
+      display: flex; flex-direction: column;
+      background: var(--bg);
+      min-height: 0; min-width: 0;
+      overflow: hidden;
+    }
+
+    /* ─────────────── Panel chrome ─────────────── */
+    .panel {
+      display: flex; flex-direction: column;
+      background: var(--panel);
+      min-height: 0; flex: 1 1 auto;
+      overflow: hidden;
+    }
+    .panel + .panel { border-top: 1px solid var(--border); }
+    .panel-head {
+      display: grid;
+      grid-template-columns: auto 1fr auto;
+      align-items: center;
+      gap: 10px;
+      padding: 0 12px;
+      min-height: 30px;
+      background: var(--surface);
+      border-bottom: 1px solid var(--border);
+      user-select: none;
+    }
+    .panel-head .bar {
+      width: 3px; height: 14px;
+      background: var(--accent);
+      border-radius: 1px;
+    }
+    .panel-head h3 {
+      font-size: 11px; font-weight: 700;
+      text-transform: uppercase; letter-spacing: 0.08em;
+      color: var(--text-2);
+    }
+    .panel-head .meta {
+      font-family: 'JetBrains Mono', monospace;
+      font-size: 10px; color: var(--muted);
+    }
+    .panel-body {
+      padding: 12px;
+      overflow: auto;
+      flex: 1 1 auto;
+      min-height: 0;
+    }
+    .panel-body.tight { padding: 8px; }
+
+    /* ─────────────── Drop zone ─────────────── */
+    .drop {
+      position: relative;
+      aspect-ratio: 4 / 3;
+      border: 1.5px dashed var(--border-strong);
+      border-radius: var(--radius);
+      background: var(--surface-2);
+      display: grid; place-items: center;
+      overflow: hidden;
+      cursor: pointer;
+      transition: border-color 150ms ease, background 150ms ease;
+    }
+    .drop.dragover { border-color: var(--accent); background: var(--accent-soft); }
+    .drop.has-image { border-style: solid; border-color: var(--border); cursor: default; }
+    .drop input[type="file"] {
+      position: absolute; inset: 0; opacity: 0; cursor: pointer;
+    }
+    .drop.has-image input[type="file"] { pointer-events: none; }
+    .drop-empty {
+      display: flex; flex-direction: column; align-items: center; gap: 8px;
+      color: var(--muted); text-align: center; padding: 16px;
+    }
+    .drop-empty .icon {
+      width: 36px; height: 36px;
+      display: grid; place-items: center;
+      background: var(--surface-3);
+      border: 1px solid var(--border-strong);
+      border-radius: var(--radius);
+    }
+    .drop-empty .icon svg { width: 18px; height: 18px; color: var(--accent); }
+    .drop-empty strong { color: var(--text); font-weight: 600; font-size: 12px; }
+    .drop-empty span { font-size: 11px; color: var(--muted); }
+    .drop-preview {
+      width: 100%; height: 100%; object-fit: contain;
+      background: #0a0d10; display: block;
+    }
+    .drop-meta {
+      margin-top: 10px;
+      display: grid; grid-template-columns: auto 1fr; gap: 4px 10px;
+      font-family: 'JetBrains Mono', monospace; font-size: 11px;
+    }
+    .drop-meta dt { color: var(--muted); }
+    .drop-meta dd { color: var(--text-2); }
+
+    /* ─────────────── Viewport ─────────────── */
+    .viewport {
+      position: relative;
+      flex: 1 1 auto;
+      min-height: 0;
+      background: var(--viewer);
+      overflow: hidden;
+    }
+    .viewport-frame {
+      width: 100%; height: 100%; border: 0; display: block;
+      background: var(--viewer);
+      opacity: 0; transition: opacity 240ms ease;
+    }
+    .viewport-frame.ready { opacity: 1; }
+
+    /* Viewport overlay (corner badges, status) */
+    .vp-overlay {
+      position: absolute; pointer-events: none;
+      transition: opacity 200ms ease;
+    }
+    .vp-overlay.hidden { opacity: 0; visibility: hidden; }
+    .vp-top-left {
+      top: 12px; left: 12px;
+      display: flex; flex-direction: column; gap: 6px;
+    }
+    .vp-bottom-left {
+      bottom: 12px; left: 12px;
+      display: flex; flex-direction: column; gap: 6px;
+    }
+    .vp-bottom-right {
+      bottom: 12px; right: 12px;
+      display: flex; gap: 6px;
+      pointer-events: auto;
+    }
+    .vp-top-right {
+      top: 12px; right: 12px;
+      pointer-events: auto;
+    }
+    .vp-badge {
+      display: inline-flex; align-items: center; gap: 6px;
+      padding: 4px 8px;
+      background: rgba(10, 13, 16, 0.7);
+      backdrop-filter: blur(8px);
+      border: 1px solid rgba(255,255,255,0.06);
+      border-radius: var(--radius-sm);
+      font-family: 'JetBrains Mono', monospace;
+      font-size: 10px;
+      color: var(--text-2);
+      letter-spacing: 0.04em;
+      text-transform: uppercase;
+    }
+    .vp-badge .dot {
+      width: 6px; height: 6px; border-radius: 50%;
+      background: var(--muted);
+    }
+    .vp-badge.ok .dot { background: var(--success); box-shadow: 0 0 6px var(--success); }
+    .vp-badge.warn .dot { background: var(--accent); box-shadow: 0 0 6px var(--accent); }
+    .vp-badge.err .dot { background: var(--danger); box-shadow: 0 0 6px var(--danger); }
+    .vp-badge.run .dot {
+      background: var(--accent);
+      animation: pulse 1.2s ease-in-out infinite;
+    }
+    @keyframes pulse {
+      0%, 100% { opacity: 1; transform: scale(1); }
+      50% { opacity: 0.5; transform: scale(0.85); }
+    }
+    .vp-crosshair {
+      position: absolute; top: 50%; left: 50%;
+      width: 20px; height: 20px;
+      transform: translate(-50%, -50%);
+      pointer-events: none;
+    }
+    .vp-crosshair::before, .vp-crosshair::after {
+      content: ""; position: absolute;
+      background: rgba(255,255,255,0.06);
+    }
+    .vp-crosshair::before { top: 50%; left: 0; right: 0; height: 1px; }
+    .vp-crosshair::after { left: 50%; top: 0; bottom: 0; width: 1px; }
+
+    /* Viewport controls (view cube + zoom) */
+    .vp-controls {
+      display: flex; gap: 4px;
+      background: rgba(10, 13, 16, 0.7);
+      backdrop-filter: blur(8px);
+      border: 1px solid rgba(255,255,255,0.06);
+      border-radius: var(--radius-sm);
+      padding: 4px;
+    }
+    .vp-ctrl {
+      width: 26px; height: 26px;
+      display: grid; place-items: center;
+      background: transparent;
+      border: 0; border-radius: 3px;
+      color: var(--text-2);
+      cursor: pointer;
+      transition: background 120ms ease, color 120ms ease;
+    }
+    .vp-ctrl:hover { background: rgba(255,255,255,0.08); color: var(--text); }
+    .vp-ctrl svg { width: 14px; height: 14px; }
+
+    /* Loading + idle + error states inside viewport */
+    .vp-state {
+      position: absolute; inset: 0;
+      display: flex; flex-direction: column; align-items: center; justify-content: center;
+      gap: 12px;
+      color: var(--text-2); text-align: center;
+      padding: 24px;
+      background: var(--viewer);
+      transition: opacity 200ms ease, visibility 200ms ease;
+    }
+    .vp-state.hidden { opacity: 0; visibility: hidden; pointer-events: none; }
+    .vp-state .ring {
+      width: 32px; height: 32px;
+      border: 2px solid var(--surface-3);
+      border-top-color: var(--accent);
+      border-radius: 50%;
+      animation: spin 0.9s linear infinite;
+    }
+    .vp-state .idle-ring {
+      width: 48px; height: 48px;
+      border: 1px dashed var(--border-strong);
+      border-radius: 50%;
+      display: grid; place-items: center;
+      color: var(--muted);
+    }
+    .vp-state .idle-ring svg { width: 22px; height: 22px; }
+    .vp-state strong { font-size: 13px; font-weight: 600; color: var(--text); }
+    .vp-state span { font-size: 11px; color: var(--muted); }
+    .vp-state .vp-progress {
+      width: 200px; height: 3px;
+      background: var(--surface-3);
+      border-radius: 999px; overflow: hidden;
+      margin-top: 4px;
+    }
+    .vp-state .vp-progress > div {
+      height: 100%; background: var(--accent);
+      width: 0%; transition: width 250ms ease;
+    }
+    .vp-state .err-bar { width: 32px; height: 3px; background: var(--danger); border-radius: 2px; }
+
+    /* Export bar inside viewport panel */
+    .export-bar {
+      display: grid; grid-template-columns: 1fr 1fr; gap: 1px;
+      background: var(--border);
+      border-top: 1px solid var(--border);
+    }
+    .export-btn {
+      display: inline-flex; align-items: center; justify-content: center; gap: 8px;
+      min-height: 36px; padding: 0 12px;
+      background: var(--surface);
+      border: 0;
+      color: var(--text-2);
+      font: 600 11px 'Inter', sans-serif;
+      text-transform: uppercase; letter-spacing: 0.06em;
+      cursor: pointer;
+      transition: background 120ms ease, color 120ms ease;
+    }
+    .export-btn:hover { background: var(--surface-2); color: var(--text); }
+    .export-btn[aria-disabled="true"], .export-btn:disabled {
+      opacity: 0.4; cursor: not-allowed; pointer-events: none;
+    }
+    .export-btn.ready { color: var(--accent); }
+    .export-btn.ready:hover { color: var(--accent-hi); }
+    .export-btn svg { width: 14px; height: 14px; }
+
+    /* ─────────────── Inspector (right column) ─────────────── */
+    .inspector { display: flex; flex-direction: column; min-height: 0; }
+
+    /* Section group inside inspector */
+    .section {
+      border-bottom: 1px solid var(--border);
+    }
+    .section:last-child { border-bottom: 0; flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
+    .section-head {
+      display: flex; align-items: center; justify-content: space-between;
+      padding: 8px 12px;
+      background: var(--surface);
+      border-bottom: 1px solid var(--border);
+      user-select: none;
+      cursor: pointer;
+    }
+    .section-head h4 {
+      font-size: 10px; font-weight: 700;
+      text-transform: uppercase; letter-spacing: 0.08em;
+      color: var(--text-2);
+    }
+    .section-head .chev {
+      color: var(--muted); font-size: 10px;
+      transition: transform 150ms ease;
+    }
+    .section.collapsed .chev { transform: rotate(-90deg); }
+    .section.collapsed .section-body { display: none; }
+    .section-body { padding: 10px 12px; }
+
+    /* Scene tree */
+    .tree { display: flex; flex-direction: column; gap: 4px; font-size: 12px; }
+    .tree-row {
+      display: grid; grid-template-columns: 14px 1fr auto;
+      align-items: center; gap: 8px;
+      padding: 4px 6px;
+      border-radius: 3px;
+      color: var(--text-2);
+    }
+    .tree-row:hover { background: var(--surface-2); }
+    .tree-row .ico {
+      width: 14px; height: 14px;
+      display: grid; place-items: center;
+      color: var(--accent);
+    }
+    .tree-row .ico svg { width: 12px; height: 12px; }
+    .tree-row .val {
+      font-family: 'JetBrains Mono', monospace;
+      font-size: 11px; color: var(--text-2);
+    }
+    .tree-row.pending .ico { color: var(--muted); }
+    .tree-row.pending .val { color: var(--muted-2); }
+    .tree-row.active .ico svg { animation: pulse 1.2s ease-in-out infinite; }
+    .tree-row.done .ico { color: var(--success); }
+    .tree-row.error .ico { color: var(--danger); }
+
+    /* Telemetry */
+    .telemetry { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 12px; font-size: 11px; }
+    .telemetry .label { color: var(--muted); }
+    .telemetry .val {
+      font-family: 'JetBrains Mono', monospace;
+      color: var(--text-2); text-align: right;
+    }
+    .telemetry .val.accent { color: var(--accent); }
+
+    /* Pipeline log */
+    .log {
+      flex: 1 1 auto; min-height: 80px;
+      overflow: auto;
+      font-family: 'JetBrains Mono', monospace;
+      font-size: 11px;
+      line-height: 1.6;
+      color: var(--text-2);
+      background: var(--bg);
+      padding: 8px 12px;
+    }
+    .log-line { display: grid; grid-template-columns: 56px 60px 1fr; gap: 8px; }
+    .log-time { color: var(--muted-2); }
+    .log-stage { color: var(--accent); }
+    .log-stage.info { color: var(--info); }
+    .log-stage.ok { color: var(--success); }
+    .log-stage.err { color: var(--danger); }
+    .log-msg { color: var(--text-2); }
+    .log-empty { color: var(--muted); padding: 12px 0; text-align: center; }
+
+    /* Examples */
+    .examples-grid {
+      display: grid;
+      grid-template-columns: 1fr 1fr;
+      gap: 6px;
+    }
+    .ex-thumb {
+      position: relative;
+      aspect-ratio: 4 / 3;
+      border: 1px solid var(--border);
+      border-radius: var(--radius-sm);
+      overflow: hidden;
+      cursor: pointer;
+      background: var(--surface-2);
+      transition: border-color 120ms ease, transform 120ms ease;
+    }
+    .ex-thumb:hover { border-color: var(--accent); transform: translateY(-1px); }
+    .ex-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
+    .ex-thumb .ex-label {
+      position: absolute; inset: auto 0 0 0;
+      padding: 14px 6px 4px;
+      background: linear-gradient(to top, rgba(0,0,0,0.7), transparent);
+      color: #fff; font-size: 10px; font-weight: 500;
+    }
+
+    /* ─────────────── Status bar ─────────────── */
+    .statusbar {
+      display: grid;
+      grid-template-columns: auto auto auto auto 1fr auto;
+      align-items: center;
+      gap: 16px;
+      padding: 0 12px;
+      background: var(--surface);
+      border-top: 1px solid var(--border);
+      font-family: 'JetBrains Mono', monospace;
+      font-size: 10px;
+      color: var(--muted);
+      user-select: none;
+    }
+    .status-item { display: flex; align-items: center; gap: 6px; }
+    .status-item .label { color: var(--muted-2); }
+    .status-item .val { color: var(--text-2); }
+    .status-item .val.accent { color: var(--accent); }
+    .status-item .val.success { color: var(--success); }
+    .status-item .val.danger { color: var(--danger); }
+    .status-dot {
+      width: 6px; height: 6px; border-radius: 50%;
+      background: var(--muted-2);
+    }
+    .status-dot.idle { background: var(--success); box-shadow: 0 0 4px var(--success); }
+    .status-dot.run { background: var(--accent); animation: pulse 1.2s ease-in-out infinite; }
+    .status-dot.err { background: var(--danger); box-shadow: 0 0 4px var(--danger); }
+
+    /* Toast */
+    .toast {
+      position: fixed; bottom: 36px; left: 50%;
+      transform: translateX(-50%) translateY(8px);
+      background: var(--surface-3); color: var(--text);
+      padding: 8px 14px; border-radius: var(--radius-sm);
+      border: 1px solid var(--border-strong);
+      font-size: 12px;
+      box-shadow: var(--shadow);
+      opacity: 0; transition: opacity 200ms ease, transform 200ms ease;
+      pointer-events: none; z-index: 100;
+    }
+    .toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
+    .toast.error { border-color: var(--danger); color: var(--danger); }
+
+    /* Utility */
+    .hidden { display: none !important; }
+    .sr-only {
+      position: absolute; width: 1px; height: 1px;
+      padding: 0; margin: -1px; overflow: hidden;
+      clip: rect(0,0,0,0); white-space: nowrap; border: 0;
+    }
+  </style>
+</head>
+<body>
+  <div class="app">
+    <!-- ───── Toolbar ───── -->
+    <header class="toolbar">
+      <div class="tb-brand">
+        <div class="tb-logo" aria-hidden="true">
+          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
+            <path d="M12 2 L22 7 L22 17 L12 22 L2 17 L2 7 Z"/>
+            <path d="M12 2 L12 12 M22 7 L12 12 M2 7 L12 12"/>
+          </svg>
+        </div>
+        <div class="tb-name">Infini<span class="accent">Splat</span><span class="tb-build">v1.0</span></div>
+      </div>
+      <div class="tb-scene">
+        <span class="tb-scene-label">SCENE</span>
+        <span class="tb-scene-name mono" id="sceneName">untitled.gsplat</span>
+      </div>
+      <div class="tb-actions">
+        <button class="reconstruct-btn" id="runBtn" disabled>
+          <span class="btn-label">Reconstruct</span>
+          <span class="tb-shortcut">R</span>
+        </button>
+      </div>
+      <div class="tb-actions">
+        <a class="icon-btn ghost" href="https://github.com/zju3dv/InfiniSplat" target="_blank" rel="noopener">
+          <svg viewBox="0 0 24 24" fill="currentColor"><path d="M12 .3a12 12 0 0 0-3.8 23.4c.6.1.8-.3.8-.6v-2.2c-3.3.7-4-1.6-4-1.6-.6-1.4-1.4-1.8-1.4-1.8-1.1-.7.1-.7.1-.7 1.2.1 1.9 1.3 1.9 1.3 1.1 1.9 2.9 1.4 3.6 1 .1-.8.4-1.4.8-1.7-2.7-.3-5.5-1.3-5.5-6 0-1.3.5-2.4 1.3-3.2-.1-.3-.6-1.6.1-3.3 0 0 1-.3 3.3 1.2a11.4 11.4 0 0 1 6 0c2.3-1.5 3.3-1.2 3.3-1.2.7 1.7.2 3 .1 3.3.8.8 1.3 1.9 1.3 3.2 0 4.7-2.8 5.7-5.5 6 .4.4.8 1.1.8 2.2v3.3c0 .3.2.7.8.6A12 12 0 0 0 12 .3"/></svg>
+          GitHub
+        </a>
+        <a class="icon-btn ghost" href="https://zju3dv.github.io/InfiniSplat" target="_blank" rel="noopener">
+          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><path d="M3 12h18M12 3v18"/></svg>
+          Project
+        </a>
+      </div>
+    </header>
+
+    <!-- ───── Workspace ───── -->
+    <main class="workspace">
+      <!-- LEFT: Input -->
+      <section class="col">
+        <div class="panel">
+          <div class="panel-head">
+            <div class="bar"></div>
+            <h3>Input</h3>
+            <span class="meta mono" id="inputMeta">no source</span>
+          </div>
+          <div class="panel-body">
+            <label class="drop" id="drop">
+              <input type="file" id="file" accept="image/*" />
+              <div class="drop-empty" id="dropEmpty">
+                <div class="icon">
+                  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                    <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/>
+                    <polyline points="17 8 12 3 7 8"/>
+                    <line x1="12" y1="3" x2="12" y2="15"/>
+                  </svg>
+                </div>
+                <strong>Drop image</strong>
+                <span>JPG · PNG · WebP</span>
+              </div>
+              <img class="drop-preview hidden" id="preview" alt="" />
+            </label>
+            <dl class="drop-meta">
+              <dt>FILE</dt><dd class="mono" id="inputFileName">—</dd>
+              <dt>SIZE</dt><dd class="mono" id="inputFileSize">—</dd>
+              <dt>FORMAT</dt><dd class="mono" id="inputFormat">—</dd>
+            </dl>
+          </div>
+        </div>
+      </section>
+
+      <!-- CENTER: Viewport -->
+      <section class="col">
+        <div class="panel" style="flex: 1 1 auto;">
+          <div class="panel-head">
+            <div class="bar"></div>
+            <h3>Viewport</h3>
+            <span class="meta mono" id="viewportMeta">idle</span>
+          </div>
+          <div class="viewport" id="viewport">
+            <!-- Corner overlays -->
+            <div class="vp-overlay vp-top-left" id="vpTopLeft">
+              <div class="vp-badge" id="vpBadge">
+                <span class="dot"></span>
+                <span id="vpBadgeText">STAGE 0 / 4</span>
+              </div>
+            </div>
+            <div class="vp-overlay vp-bottom-left" id="vpBottomLeft">
+              <div class="vp-badge mono">
+                <span id="vpSceneLabel">—</span>
+              </div>
+            </div>
+            <div class="vp-overlay vp-bottom-right" id="vpBottomRight">
+              <div class="vp-controls">
+                <button class="vp-ctrl" id="vpReset" title="Reset view (V)">
+                  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M3 12a9 9 0 1 0 3-6.7"/><path d="M3 4v5h5"/></svg>
+                </button>
+                <button class="vp-ctrl" id="vpZoomIn" title="Zoom in (+)">
+                  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><circle cx="11" cy="11" r="7"/><line x1="11" y1="8" x2="11" y2="14"/><line x1="8" y1="11" x2="14" y2="11"/><line x1="16" y1="16" x2="21" y2="21"/></svg>
+                </button>
+                <button class="vp-ctrl" id="vpZoomOut" title="Zoom out (−)">
+                  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><circle cx="11" cy="11" r="7"/><line x1="8" y1="11" x2="14" y2="11"/><line x1="16" y1="16" x2="21" y2="21"/></svg>
+                </button>
+              </div>
+            </div>
+
+            <!-- State overlays -->
+            <div class="vp-state" id="vpIdle">
+              <div class="idle-ring">
+                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
+                  <path d="M12 2 L22 7 L22 17 L12 22 L2 17 L2 7 Z"/>
+                  <path d="M2 7 L12 12 L22 7 M12 12 L12 22"/>
+                </svg>
+              </div>
+              <strong>No scene loaded</strong>
+              <span>Upload an image to begin reconstruction</span>
+            </div>
+            <div class="vp-state hidden" id="vpLoading">
+              <div class="ring"></div>
+              <strong id="vpLoadingTitle">Reconstructing scene</strong>
+              <span id="vpLoadingDetail">Running model inference</span>
+              <div class="vp-progress"><div id="vpProgressBar"></div></div>
+            </div>
+            <div class="vp-state hidden" id="vpError">
+              <div class="err-bar"></div>
+              <strong>Reconstruction stopped</strong>
+              <span id="vpErrorDetail">See console for details</span>
+            </div>
+
+            <!-- The actual iframe (always present, faded in when ready) -->
+            <iframe class="viewport-frame" id="viewerFrame" title="Gaussian scene"></iframe>
+          </div>
+          <div class="export-bar">
+            <button class="export-btn" id="dlPly" aria-disabled="true">
+              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="7 10 12 15 17 10"/><line x1="12" y1="15" x2="12" y2="3"/></svg>
+              <span class="dl-label">Download PLY</span>
+            </button>
+            <button class="export-btn" id="dlHtml" aria-disabled="true">
+              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="16 18 22 12 16 6"/><polyline points="8 6 2 12 8 18"/></svg>
+              <span class="dl-label">Download HTML</span>
+            </button>
+          </div>
+        </div>
+      </section>
+
+      <!-- RIGHT: Inspector -->
+      <aside class="col inspector">
+        <div class="section">
+          <div class="section-head" data-toggle>
+            <h4>Scene tree</h4>
+            <span class="chev">▾</span>
+          </div>
+          <div class="section-body" id="sceneTree">
+            <div class="tree">
+              <div class="tree-row pending" data-stage="input">
+                <div class="ico"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><rect x="3" y="3" width="18" height="18" rx="2"/><circle cx="8.5" cy="8.5" r="1.5"/><polyline points="21 15 16 10 5 21"/></svg></div>
+                <span>Input image</span>
+                <span class="val">—</span>
+              </div>
+              <div class="tree-row pending" data-stage="reconstruct">
+                <div class="ico"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><rect x="4" y="4" width="16" height="16" rx="2"/><rect x="9" y="9" width="6" height="6"/><line x1="9" y1="2" x2="9" y2="4"/><line x1="15" y1="2" x2="15" y2="4"/><line x1="9" y1="20" x2="9" y2="22"/><line x1="15" y1="20" x2="15" y2="22"/></svg></div>
+                <span>Reconstruct</span>
+                <span class="val">—</span>
+              </div>
+              <div class="tree-row pending" data-stage="ply">
+                <div class="ico"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 2 L22 7 L22 17 L12 22 L2 17 L2 7 Z"/></svg></div>
+                <span>Filter PLY</span>
+                <span class="val">—</span>
+              </div>
+              <div class="tree-row pending" data-stage="viewer">
+                <div class="ico"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="9"/><line x1="12" y1="3" x2="12" y2="21"/><line x1="3" y1="12" x2="21" y2="12"/></svg></div>
+                <span>WebGL viewer</span>
+                <span class="val">—</span>
+              </div>
+              <div class="tree-row pending" data-stage="html">
+                <div class="ico"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="16 18 22 12 16 6"/><polyline points="8 6 2 12 8 18"/></svg></div>
+                <span>Standalone HTML</span>
+                <span class="val">—</span>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <div class="section">
+          <div class="section-head" data-toggle>
+            <h4>Telemetry</h4>
+            <span class="chev">▾</span>
+          </div>
+          <div class="section-body">
+            <div class="telemetry">
+              <span class="label">Gaussians</span><span class="val accent" id="telGaussians">—</span>
+              <span class="label">Artifact</span><span class="val" id="telArtifact">—</span>
+              <span class="label">PLY</span><span class="val" id="telPly">—</span>
+              <span class="label">Viewer</span><span class="val" id="telViewer">—</span>
+              <span class="label">GPU time</span><span class="val" id="telGpu">—</span>
+              <span class="label">Total</span><span class="val" id="telTotal">—</span>
+            </div>
+          </div>
+        </div>
+
+        <div class="section">
+          <div class="section-head" data-toggle>
+            <h4>Pipeline log</h4>
+            <span class="chev">▾</span>
+          </div>
+          <div class="log mono" id="log">
+            <div class="log-empty">ready · awaiting input</div>
+          </div>
+        </div>
+
+        <div class="section">
+          <div class="section-head" data-toggle>
+            <h4>Examples</h4>
+            <span class="meta mono" id="examplesCount">—</span>
+            <span class="chev">▾</span>
+          </div>
+          <div class="section-body">
+            <div class="examples-grid" id="gallery"></div>
+          </div>
+        </div>
+      </aside>
+    </main>
+
+    <!-- ───── Status bar ───── -->
+    <footer class="statusbar">
+      <div class="status-item">
+        <span class="status-dot idle" id="statusDot"></span>
+        <span class="label">STATE</span>
+        <span class="val" id="statusState">idle</span>
+      </div>
+      <div class="status-item">
+        <span class="label">GPU</span>
+        <span class="val" id="statusGpu">idle</span>
+      </div>
+      <div class="status-item">
+        <span class="label">QUEUE</span>
+        <span class="val" id="statusQueue">0</span>
+      </div>
+      <div class="status-item">
+        <span class="label">STAGE</span>
+        <span class="val" id="statusStage">0 / 4</span>
+      </div>
+      <div></div>
+      <div class="status-item">
+        <span class="label">zju3dv / InfiniSplat</span>
+      </div>
+    </footer>
+  </div>
+
+  <div class="toast" id="toast"></div>
+
+  <script type="module">
+    import { Client, handle_file } from "https://cdn.jsdelivr.net/npm/@gradio/client/dist/index.min.js";
+
+    const $ = (id) => document.getElementById(id);
+    const fileInput = $("file"), drop = $("drop"), preview = $("preview"),
+          dropEmpty = $("dropEmpty"), runBtn = $("runBtn"),
+          btnLabel = runBtn.querySelector(".btn-label"),
+          viewerFrame = $("viewerFrame"),
+          vpIdle = $("vpIdle"), vpLoading = $("vpLoading"), vpError = $("vpError"),
+          vpLoadingTitle = $("vpLoadingTitle"), vpLoadingDetail = $("vpLoadingDetail"),
+          vpProgressBar = $("vpProgressBar"), vpErrorDetail = $("vpErrorDetail"),
+          vpBadge = $("vpBadge"), vpBadgeText = $("vpBadgeText"),
+          vpSceneLabel = $("vpSceneLabel"),
+          dlPly = $("dlPly"), dlHtml = $("dlHtml"),
+          sceneName = $("sceneName"),
+          inputMeta = $("inputMeta"),
+          inputFileName = $("inputFileName"), inputFileSize = $("inputFileSize"), inputFormat = $("inputFormat"),
+          viewportMeta = $("viewportMeta"),
+          gallery = $("gallery"), examplesCount = $("examplesCount"),
+          log = $("log"),
+          statusDot = $("statusDot"), statusState = $("statusState"),
+          statusGpu = $("statusGpu"), statusQueue = $("statusQueue"), statusStage = $("statusStage"),
+          toast = $("toast");
+
+    let pendingFile = null;
+    let pipelineStart = 0;
+    const stageTimings = {};
+    const STAGES = ["input", "reconstruct", "ply", "viewer", "html"];
+
+    function logLine(stage, kind, msg) {
+      const time = new Date().toLocaleTimeString("en-US", { hour12: false });
+      const line = document.createElement("div");
+      line.className = "log-line";
+      line.innerHTML = `
+        <span class="log-time">${time}</span>
+        <span class="log-stage ${kind}">${stage}</span>
+        <span class="log-msg">${msg}</span>
+      `;
+      // Remove empty placeholder
+      const empty = log.querySelector(".log-empty");
+      if (empty) empty.remove();
+      log.appendChild(line);
+      log.scrollTop = log.scrollHeight;
+    }
+
+    function clearLog() {
+      log.innerHTML = '<div class="log-empty">ready · awaiting input</div>';
+    }
+
+    function setStage(stageId, state, val) {
+      const row = document.querySelector(`.tree-row[data-stage="${stageId}"]`);
+      if (!row) return;
+      row.classList.remove("pending", "active", "done", "error");
+      row.classList.add(state);
+      if (val !== undefined) row.querySelector(".val").textContent = val;
+    }
+    function resetStages() {
+      STAGES.forEach((s) => {
+        const row = document.querySelector(`.tree-row[data-stage="${s}"]`);
+        if (row) {
+          row.classList.remove("active", "done", "error");
+          row.classList.add("pending");
+          row.querySelector(".val").textContent = "—";
+        }
+      });
+      document.getElementById("telGaussians").textContent = "—";
+      document.getElementById("telArtifact").textContent = "—";
+      document.getElementById("telPly").textContent = "—";
+      document.getElementById("telViewer").textContent = "—";
+      document.getElementById("telGpu").textContent = "—";
+      document.getElementById("telTotal").textContent = "—";
+    }
+
+    function setStatus(state, opts) {
+      opts = opts || {};
+      statusDot.classList.remove("idle", "run", "err");
+      statusDot.classList.add(state);
+      const stateMap = { idle: "idle", run: "running", err: "error" };
+      statusState.textContent = stateMap[state] || state;
+      statusState.classList.remove("accent", "success", "danger");
+      if (state === "idle") statusState.classList.add("success");
+      if (state === "err") statusState.classList.add("danger");
+      if (state === "run") statusState.classList.add("accent");
+      if (opts.gpu) statusGpu.textContent = opts.gpu;
+      if (opts.queue !== undefined) statusQueue.textContent = String(opts.queue);
+      if (opts.stage !== undefined) statusStage.textContent = opts.stage;
+    }
+
+    function setViewerState(state, opts) {
+      opts = opts || {};
+      const isReady = state === "ready";
+      const isLoading = state === "loading";
+      const isError = state === "error";
+      vpIdle.classList.toggle("hidden", !(!isReady && !isLoading && !isError));
+      vpLoading.classList.toggle("hidden", !isLoading);
+      vpError.classList.toggle("hidden", !isError);
+      if (isLoading) {
+        vpLoadingTitle.textContent = opts.title || "Reconstructing scene";
+        vpLoadingDetail.textContent = opts.detail || "Running model inference";
+        vpProgressBar.style.width = (opts.progress || 0) + "%";
+      }
+      if (isError) vpErrorDetail.textContent = opts.detail || "Unknown error";
+      if (isReady) {
+        vpIdle.classList.add("hidden");
+        vpLoading.classList.add("hidden");
+        vpError.classList.add("hidden");
+        viewerFrame.classList.add("ready");
+      } else {
+        viewerFrame.classList.remove("ready");
+      }
+      // Top-left badge
+      vpBadge.classList.remove("ok", "warn", "err", "run");
+      const badgeText = $("vpBadgeText");
+      if (isLoading) {
+        vpBadge.classList.add("run");
+        badgeText.textContent = opts.stageLabel || "STAGE";
+      } else if (isReady) {
+        vpBadge.classList.add("ok");
+        badgeText.textContent = "RENDERING";
+      } else if (isError) {
+        vpBadge.classList.add("err");
+        badgeText.textContent = "ERROR";
+      } else {
+        badgeText.textContent = "IDLE";
+      }
+    }
+
+    function setReady(ready) {
+      runBtn.disabled = !ready;
+      btnLabel.textContent = ready ? "Reconstruct" : "Reconstructing";
+      if (ready) {
+        const sp = runBtn.querySelector(".spinner");
+        if (sp) sp.remove();
+      } else {
+        if (!runBtn.querySelector(".spinner")) {
+          const sp = document.createElement("span");
+          sp.className = "spinner";
+          runBtn.insertBefore(sp, btnLabel);
+        }
+      }
+    }
+
+    function setDownload(btn, url, label) {
+      btn.disabled = !url;
+      btn.setAttribute("aria-disabled", String(!url));
+      const lbl = btn.querySelector(".dl-label");
+      lbl.textContent = label;
+      btn.classList.toggle("ready", !!url);
+      if (url) {
+        btn.onclick = () => {
+          const a = document.createElement("a");
+          a.href = url; a.download = ""; a.click();
+        };
+      } else {
+        btn.onclick = null;
+      }
+    }
+
+    function showPreview(file) {
+      const url = URL.createObjectURL(file);
+      preview.src = url;
+      preview.classList.remove("hidden");
+      dropEmpty.classList.add("hidden");
+      drop.classList.add("has-image");
+      setTimeout(() => URL.revokeObjectURL(url), 60_000);
+
+      // Update source metadata
+      const fname = file.name || "image";
+      inputFileName.textContent = fname.length > 22 ? fname.slice(0, 20) + "…" : fname;
+      const sizeKb = (file.size / 1024);
+      inputFileSize.textContent = sizeKb > 1024 ? (sizeKb / 1024).toFixed(2) + " MB" : sizeKb.toFixed(1) + " KB";
+      inputFormat.textContent = (file.type || "image").split("/").pop().toUpperCase();
+      inputMeta.textContent = (file.size / 1024 / 1024).toFixed(2) + " MB";
+
+      // Update scene name
+      const stem = fname.replace(/\.[^.]+$/, "");
+      sceneName.textContent = `${stem}.gsplat`;
+      vpSceneLabel.textContent = `${stem}.gsplat`;
+
+      setStage("input", "done", inputFormat.textContent);
+    }
+
+    function clearPreview() {
+      pendingFile = null;
+      preview.src = "";
+      preview.classList.add("hidden");
+      dropEmpty.classList.remove("hidden");
+      drop.classList.remove("has-image");
+      setReady(false);
+      resetStages();
+      sceneName.textContent = "untitled.gsplat";
+      inputFileName.textContent = "—";
+      inputFileSize.textContent = "—";
+      inputFormat.textContent = "—";
+      inputMeta.textContent = "no source";
+      viewportMeta.textContent = "idle";
+    }
+
+    function toastMsg(msg, isError) {
+      toast.textContent = msg;
+      toast.classList.toggle("error", !!isError);
+      toast.classList.add("show");
+      clearTimeout(toast._t);
+      toast._t = setTimeout(() => toast.classList.remove("show"), 2400);
+    }
+
+    function fmtBytes(n) {
+      if (!n) return "—";
+      if (n > 1024 * 1024) return (n / 1024 / 1024).toFixed(2) + " MB";
+      if (n > 1024) return (n / 1024).toFixed(1) + " KB";
+      return n + " B";
+    }
+    function fmtSec(s) {
+      if (s == null) return "—";
+      if (s > 60) return Math.floor(s / 60) + "m " + (s % 60).toFixed(1) + "s";
+      return s.toFixed(2) + "s";
+    }
+
+    fileInput.addEventListener("change", (e) => {
+      const f = e.target.files && e.target.files[0];
+      if (f) {
+        pendingFile = f;
+        showPreview(f);
+        setReady(true);
+      }
+    });
+
+    ["dragenter", "dragover"].forEach(ev =>
+      drop.addEventListener(ev, (e) => { e.preventDefault(); drop.classList.add("dragover"); })
+    );
+    ["dragleave", "drop"].forEach(ev =>
+      drop.addEventListener(ev, (e) => { e.preventDefault(); drop.classList.remove("dragover"); })
+    );
+    drop.addEventListener("drop", (e) => {
+      const f = e.dataTransfer.files && e.dataTransfer.files[0];
+      if (f && f.type.startsWith("image/")) {
+        pendingFile = f;
+        showPreview(f);
+        setReady(true);
+      }
+    });
+
+    // Collapsible sections
+    document.querySelectorAll(".section-head[data-toggle]").forEach((head) => {
+      head.addEventListener("click", () => {
+        head.parentElement.classList.toggle("collapsed");
+      });
+    });
+
+    // Connect to backend
+    let client;
+    try {
+      client = await Client.connect(window.location.origin);
+      logLine("client", "ok", "backend connected");
+    } catch (err) {
+      toastMsg("Failed to connect to backend", true);
+      logLine("client", "err", err.message || String(err));
+      console.error(err);
+    }
+
+    // Preload viewer template so the iframe swaps in instantly
+    try {
+      const pre = await client.predict("/viewer_html", {});
+      if (pre && pre.data && pre.data[0]) {
+        const url = pre.data[0].url;
+        viewerFrame.src = url + "#preload";
+        logLine("viewer", "info", "template preloaded");
+      }
+    } catch (err) {
+      console.warn("Viewer preload skipped:", err);
+    }
+
+    async function timeStage(fn) {
+      const t0 = performance.now();
+      const result = await fn();
+      return { result, ms: performance.now() - t0 };
+    }
+
+    async function runPipeline() {
+      if (!pendingFile || !client) return;
+      setReady(false);
+      setDownload(dlPly, null, "Preparing PLY…");
+      setDownload(dlHtml, null, "Preparing HTML…");
+      viewerFrame.classList.remove("ready");
+      pipelineStart = performance.now();
+      setStatus("run", { gpu: "queued", queue: 1, stage: "0 / 4" });
+
+      try {
+        // Stage 1: Reconstruct (GPU)
+        setViewerState("loading", { title: "Reconstructing scene", detail: "Running model inference", progress: 15, stageLabel: "STAGE 1 / 4 · GPU" });
+        setStage("reconstruct", "active");
+        setStatus("run", { gpu: "running", queue: 1, stage: "1 / 4" });
+        const reconWrap = await timeStage(() =>
+          client.predict("/reconstruct", { image_path: handle_file(pendingFile) })
+        );
+        const artifactUrl = reconWrap.result.data[0].url;
+        const artifactSize = reconWrap.result.data[0].size;
+        stageTimings.gpu = reconWrap.ms;
+        setStage("reconstruct", "done", fmtSec(reconWrap.ms / 1000));
+        document.getElementById("telGpu").textContent = fmtSec(reconWrap.ms / 1000);
+        document.getElementById("telArtifact").textContent = fmtBytes(artifactSize);
+        logLine("reconstruct", "ok", `${fmtSec(reconWrap.ms / 1000)} · ${fmtBytes(artifactSize)}`);
+
+        // Stage 2: PLY export
+        setViewerState("loading", { title: "Preparing PLY", detail: "Filtering Gaussians", progress: 45, stageLabel: "STAGE 2 / 4 · CPU" });
+        setStage("ply", "active");
+        setStatus("run", { gpu: "—", queue: 1, stage: "2 / 4" });
+        const plyWrap = await timeStage(() =>
+          client.predict("/export_ply", { artifact_url: artifactUrl })
+        );
+        const plyUrl = plyWrap.result.data[0].url;
+        const plySize = plyWrap.result.data[0].size;
+        setStage("ply", "done", fmtBytes(plySize));
+        setDownload(dlPly, plyUrl, "Download PLY");
+        document.getElementById("telPly").textContent = fmtBytes(plySize);
+        logLine("ply", "ok", `${fmtSec(plyWrap.ms / 1000)} · ${fmtBytes(plySize)}`);
+
+        // Stage 3: Viewer
+        setViewerState("loading", { title: "Encoding viewer", detail: "Building WebGL scene", progress: 70, stageLabel: "STAGE 3 / 4 · ENCODE" });
+        setStage("viewer", "active");
+        setStatus("run", { gpu: "—", queue: 1, stage: "3 / 4" });
+        const viewWrap = await timeStage(() =>
+          client.predict("/export_viewer", { scene_ply_url: plyUrl })
+        );
+        const viewerUrl = viewWrap.result.data[0].url + "?v=" + Date.now();
+        const viewerSize = viewWrap.result.data[0].size;
+        setStage("viewer", "done", fmtBytes(viewerSize));
+        document.getElementById("telViewer").textContent = fmtBytes(viewerSize);
+        viewerFrame.src = viewerUrl;
+        viewerFrame.onload = () => {
+          viewerFrame.classList.add("ready");
+          setViewerState("ready");
+          viewportMeta.textContent = "ready";
+        };
+        logLine("viewer", "ok", `${fmtSec(viewWrap.ms / 1000)} · ${fmtBytes(viewerSize)}`);
+
+        // Stage 4: HTML
+        setViewerState("loading", { title: "Bundling HTML", detail: "Embedding assets for download", progress: 92, stageLabel: "STAGE 4 / 4 · BUNDLE" });
+        setStage("html", "active");
+        setStatus("run", { gpu: "—", queue: 1, stage: "4 / 4" });
+        const htmlWrap = await timeStage(() =>
+          client.predict("/export_html", { viewer_html_url: viewerUrl.replace(/[?#].*/, "") })
+        );
+        const htmlUrl = htmlWrap.result.data[0].url;
+        const htmlSize = htmlWrap.result.data[0].size;
+        setStage("html", "done", fmtBytes(htmlSize));
+        setDownload(dlHtml, htmlUrl, "Download HTML");
+
+        const totalSec = (performance.now() - pipelineStart) / 1000;
+        document.getElementById("telTotal").textContent = fmtSec(totalSec);
+        logLine("html", "ok", `${fmtSec(htmlWrap.ms / 1000)} · ${fmtBytes(htmlSize)}`);
+
+        setViewerState("ready");
+        setStatus("idle", { gpu: "idle", queue: 0, stage: "4 / 4" });
+        viewportMeta.textContent = "ready";
+        toastMsg("Reconstruction complete");
+      } catch (err) {
+        console.error(err);
+        setViewerState("error", { detail: err.message || "Pipeline failed" });
+        setStage("reconstruct", "error");
+        setStatus("err", { gpu: "—", queue: 0, stage: "—" });
+        logLine("error", "err", err.message || String(err));
+        toastMsg(err.message || "Reconstruction failed", true);
+      } finally {
+        setReady(true);
+      }
+    }
+
+    runBtn.addEventListener("click", runPipeline);
+
+    // Keyboard shortcuts
+    document.addEventListener("keydown", (e) => {
+      if (e.target.tagName === "INPUT" && e.target.type !== "button") return;
+      if (e.key === "r" || e.key === "R") {
+        if (!runBtn.disabled) runBtn.click();
+      }
+    });
+
+    // Viewport controls — postMessage to the embedded viewer when supported
+    function postToViewer(msg) {
+      try { viewerFrame.contentWindow?.postMessage(msg, "*"); } catch (_) {}
+    }
+    $("vpReset").addEventListener("click", () => postToViewer({ type: "infinisplat:reset" }));
+    $("vpZoomIn").addEventListener("click", () => postToViewer({ type: "infinisplat:zoom", delta: 1 }));
+    $("vpZoomOut").addEventListener("click", () => postToViewer({ type: "infinisplat:zoom", delta: -1 }));
+
+    // Examples — fall back to a curated list served via /__examples/{name}
+    const EXAMPLES = [
+      { label: "Bedroom", path: "/__examples/bedroom.jpg" },
+      { label: "Living room", path: "/__examples/living_room.jpg" },
+      { label: "Loft", path: "/__examples/loft_room.jpg" },
+      { label: "Gym", path: "/__examples/gym.png" },
+      { label: "Meerkat", path: "/__examples/meerkat.jpg" },
+      { label: "Painting", path: "/__examples/painting_room.jpg" },
+      { label: "Ghibli room", path: "/__examples/ghibli_room.jpg" },
+      { label: "Sofa", path: "/__examples/sofa_ai.jpg" },
+      { label: "Summer", path: "/__examples/summer_room.jpg" },
+      { label: "Animate", path: "/__examples/animate_room.jpg" },
+      { label: "My bedroom", path: "/__examples/my_bedroom.JPG" },
+      { label: "Cave", path: "/__examples/cave_ai.jpg" },
+    ];
+    gallery.innerHTML = EXAMPLES.map((ex) => `
+      <div class="ex-thumb" data-path="${ex.path}" title="${ex.label}">
+        <img loading="lazy" src="${ex.path}" alt="${ex.label}" />
+        <div class="ex-label">${ex.label}</div>
+      </div>
+    `).join("");
+    examplesCount.textContent = `${EXAMPLES.length}`;
+
+    gallery.addEventListener("click", async (e) => {
+      const t = e.target.closest(".ex-thumb");
+      if (!t) return;
+      const path = t.dataset.path;
+      try {
+        const resp = await fetch(path);
+        const blob = await resp.blob();
+        const f = new File([blob], path.split("/").pop(), { type: blob.type });
+        pendingFile = f;
+        showPreview(f);
+        setReady(true);
+        logLine("input", "info", `loaded example: ${path.split("/").pop()}`);
+        toastMsg("Example loaded");
+      } catch (err) {
+        toastMsg("Failed to load example", true);
+        logLine("input", "err", err.message || String(err));
+      }
+    });
+
+    // Initial status
+    setStatus("idle", { gpu: "idle", queue: 0, stage: "0 / 4" });
+  </script>
+</body>
+</html>
+"""
+
+
+@app.get("/", response_class=HTMLResponse)
+async def homepage() -> str:
+    return INDEX_HTML
+
+
+@app.get("/__examples/{name}")
+async def serve_example(name: str):
+    """Serve curated example images from the bundled examples directory."""
+    from fastapi.responses import FileResponse
+
+    examples_dir = Path(__file__).resolve().parent / "examples" / "data" / "rgb_demo"
+    candidate = examples_dir / name
+    if not candidate.is_file() or not str(candidate.resolve()).startswith(str(examples_dir.resolve())):
+        from fastapi import HTTPException
+
+        raise HTTPException(status_code=404, detail="Example not found")
+    return FileResponse(candidate)
+
+
+def _cleanup() -> None:
+    """Remove expired per-request directories on shutdown."""
+    if not OUTPUT_ROOT.is_dir():
+        return
+    cutoff = time.time() - 3600
+    for request_dir in OUTPUT_ROOT.iterdir():
+        if request_dir.is_symlink() or not request_dir.is_dir():
+            continue
+        try:
+            if uuid.UUID(hex=request_dir.name).hex != request_dir.name:
+                continue
+        except ValueError:
+            continue
+        if request_dir.lstat().st_mtime > cutoff:
+            continue
+        shutil.rmtree(request_dir, ignore_errors=True)
+
+
+import atexit as _atexit
+
+_atexit.register(_cleanup)
 
 
 if __name__ == "__main__":
-    demo.launch(
+    app.launch(
         server_name="0.0.0.0",
         server_port=int(os.environ.get("PORT", "7860")),
         allowed_paths=[str(OUTPUT_ROOT)],
         max_file_size="20mb",
-        show_error=False,
+        show_error=True,
         ssr_mode=False,
         footer_links=[],
-        theme=APP_THEME,
-        css=APP_CSS,
     )