Migrate UI to gradio.Server with custom HTML frontend

Replace gr.Blocks demo with gradio.Server + @app .api() endpoints so the
inference pipeline runs through Gradio's queue (concurrency, ZeroGPU,
gradio_client). Serve a polished vanilla HTML/CSS/JS UI via @app .get("/")
that talks to the backend through the Gradio JS client.

- Split pipeline into /reconstruct (GPU), /export_ply, /export_viewer,
/export_html, /viewer_html @app .api() endpoints
- Custom UI: drag-and-drop upload, live progress, viewer iframe fade-in,
toast notifications, example gallery, responsive layout
- Preloads viewer template for instant first paint when results arrive

app.py

@@ -1,28 +1,847 @@
 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 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)
+
+
+@app.api(name="/reconstruct", queue=True, concurrency_limit=1, concurrency_id="gpu")
+@spaces.GPU(duration=GPU_DURATION_SECONDS)
+def reconstruct(image_path: FileData) -> FileData:
+    """Run GPU reconstruction and return the artifact path."""
+    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=Path(image_path["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 FileData(path=str(artifact))
+
+
+@app.api(name="/export_ply", queue=True, concurrency_limit=2)
+def export_ply(artifact: FileData) -> FileData:
+    """Filter and expose a PLY artifact."""
+    started = time.perf_counter()
+    internal = Path(artifact["path"])
+    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 FileData(path=str(scene_ply))
+
+
+@app.api(name="/export_viewer", queue=True, concurrency_limit=2)
+def export_viewer(scene_ply: FileData) -> FileData:
+    """Build the browser viewer and return its iframe-ready HTML."""
+    started = time.perf_counter()
+    exported = export_browser_viewer(
+        scene_ply=Path(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,
+        html_bytes=exported.viewer_html.stat().st_size,
+    )
+    return FileData(path=str(exported.viewer_html))
+
+
+@app.api(name="/export_html", queue=True, concurrency_limit=2)
+def export_html(viewer_html: FileData) -> FileData:
+    """Bundle a standalone HTML viewer for download."""
+    started = time.perf_counter()
+    standalone = export_standalone_viewer(
+        viewer_html=Path(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 FileData(path=str(standalone))
+
+
+@app.api(name="/examples", queue=False)
+def list_examples() -> FileData:
+    """Serve the README as a lightweight payload marker."""
+    from gradio.data_classes import FileData as _FD
+
+    return _FD(path=str(Path(__file__).resolve()))
+
+
+@app.api(name="/viewer_html", queue=False)
+def viewer_html() -> FileData:
+    """Serve the preloaded viewer template HTML for fast first paint."""
+    return FileData(path=str(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 — Implicit Gaussian Decoding</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@500&display=swap" rel="stylesheet" />
+  <style>
+    :root {
+      color-scheme: light;
+      --bg: #f4f5f4;
+      --surface: #ffffff;
+      --surface-muted: #f8f9f9;
+      --border: #dfe3e1;
+      --border-strong: #c6ceca;
+      --text: #17201e;
+      --muted: #68716f;
+      --viewer: #101413;
+      --primary: #087f62;
+      --primary-hover: #066b53;
+      --primary-soft: #edf8f4;
+      --accent: #c27616;
+      --danger: #b42318;
+      --radius: 10px;
+      --shadow: 0 8px 28px rgba(23, 32, 30, 0.06);
+    }
+    * { box-sizing: border-box; margin: 0; }
+    html, body { height: 100%; }
+    body {
+      background: var(--bg);
+      color: var(--text);
+      font-family: 'Inter', system-ui, -apple-system, sans-serif;
+      font-feature-settings: "ss01", "cv11";
+      -webkit-font-smoothing: antialiased;
+      line-height: 1.5;
+    }
+    .app {
+      max-width: 1440px;
+      margin: 0 auto;
+      padding: 28px clamp(20px, 4vw, 60px) 60px;
+    }
+    /* Header */
+    .header {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      gap: 24px;
+      margin-bottom: 24px;
+      flex-wrap: wrap;
+    }
+    .brand {
+      display: flex;
+      flex-direction: column;
+      gap: 6px;
+      min-width: 0;
+    }
+    .brand-row {
+      display: flex;
+      align-items: baseline;
+      gap: 12px;
+      flex-wrap: wrap;
+    }
+    .brand-name {
+      font-size: clamp(1.75rem, 2.6vw, 2.25rem);
+      font-weight: 800;
+      letter-spacing: -0.02em;
+      color: var(--text);
+    }
+    .brand-name .accent { color: var(--primary); }
+    .brand-tag {
+      color: var(--muted);
+      font-size: clamp(0.95rem, 1.3vw, 1.08rem);
+      font-weight: 500;
+    }
+    .brand-meta {
+      display: flex;
+      gap: 14px;
+      color: var(--muted);
+      font-size: 0.78rem;
+      flex-wrap: wrap;
+    }
+    .brand-meta span::before { content: "·"; margin-right: 14px; color: var(--border-strong); }
+    .brand-meta span:first-child::before { content: ""; margin: 0; }
+    .actions { display: flex; gap: 8px; flex-shrink: 0; }
+    .pill {
+      display: inline-flex;
+      align-items: center;
+      gap: 6px;
+      min-height: 38px;
+      padding: 0 14px;
+      border: 1px solid var(--border-strong);
+      border-radius: 999px;
+      background: var(--surface);
+      color: var(--text);
+      font-size: 0.8rem;
+      font-weight: 600;
+      text-decoration: none;
+      transition: border-color 150ms ease, background 150ms ease;
+    }
+    .pill:hover { border-color: var(--primary); background: var(--primary-soft); }
+    .pill svg { width: 14px; height: 14px; }
+
+    /* Layout */
+    .workspace {
+      display: grid;
+      grid-template-columns: minmax(320px, 1fr) minmax(380px, 1.55fr);
+      gap: 18px;
+      margin-bottom: 36px;
+    }
+    @media (max-width: 980px) { .workspace { grid-template-columns: 1fr; } }
+
+    .panel {
+      background: var(--surface);
+      border: 1px solid var(--border);
+      border-radius: var(--radius);
+      box-shadow: var(--shadow);
+      overflow: hidden;
+    }
+    .panel-head {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      padding: 16px 18px 14px;
+      border-bottom: 1px solid var(--border);
+      gap: 12px;
+    }
+    .panel-title {
+      display: flex;
+      align-items: center;
+      gap: 10px;
+      font-size: 0.9rem;
+      font-weight: 700;
+    }
+    .panel-title .idx {
+      color: var(--accent);
+      font-family: 'JetBrains Mono', ui-monospace, monospace;
+      font-size: 0.72rem;
+      letter-spacing: 0.05em;
+    }
+    .panel-hint {
+      color: var(--muted);
+      font-size: 0.72rem;
+      text-align: right;
+      flex: 1;
+    }
+    .panel-body { padding: 16px 18px 18px; }
+
+    /* Drop zone */
+    .drop {
+      position: relative;
+      min-height: 480px;
+      border: 1.5px dashed var(--border-strong);
+      border-radius: 8px;
+      background: var(--surface-muted);
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      overflow: hidden;
+      transition: border-color 150ms ease, background 150ms ease;
+      cursor: pointer;
+    }
+    .drop.dragover { border-color: var(--primary); background: var(--primary-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: 10px;
+      color: var(--muted); text-align: center; padding: 24px;
+    }
+    .drop-empty .icon {
+      width: 44px; height: 44px; border-radius: 12px;
+      background: var(--surface);
+      display: grid; place-items: center;
+      border: 1px solid var(--border);
+    }
+    .drop-empty .icon svg { width: 22px; height: 22px; color: var(--primary); }
+    .drop-empty strong { color: var(--text); font-weight: 600; font-size: 0.95rem; }
+    .drop-empty span { font-size: 0.78rem; }
+    .drop-preview {
+      width: 100%; height: 100%; object-fit: contain; display: block;
+      background: #0e1110;
+    }
+    .drop-overlay {
+      position: absolute; inset: auto 12px 12px 12px;
+      display: flex; justify-content: space-between; gap: 8px;
+    }
+    .chip {
+      display: inline-flex; align-items: center; gap: 6px;
+      padding: 6px 10px; border-radius: 999px;
+      background: rgba(15, 17, 16, 0.65); color: #fff;
+      font-size: 0.72rem; backdrop-filter: blur(6px);
+    }
+    .chip button {
+      border: 0; background: transparent; color: inherit;
+      cursor: pointer; font: inherit; padding: 0;
+    }
+    .chip button:hover { color: #fca5a5; }
+
+    /* Controls */
+    .controls { display: flex; flex-direction: column; gap: 12px; margin-top: 14px; }
+    .primary-btn {
+      display: inline-flex; align-items: center; justify-content: center; gap: 8px;
+      width: 100%; min-height: 48px;
+      border: 0; border-radius: 8px;
+      background: var(--primary); color: #fff;
+      font: 600 0.95rem 'Inter', sans-serif;
+      cursor: pointer;
+      box-shadow: 0 4px 12px rgba(8, 127, 98, 0.18);
+      transition: background 150ms ease, transform 80ms ease;
+    }
+    .primary-btn:hover { background: var(--primary-hover); }
+    .primary-btn:active { transform: translateY(1px); }
+    .primary-btn:disabled { background: var(--border-strong); cursor: not-allowed; box-shadow: none; }
+    .primary-btn .spinner {
+      width: 16px; height: 16px; border: 2px solid rgba(255,255,255,0.4);
+      border-top-color: #fff; border-radius: 50%;
+      animation: spin 0.8s linear infinite;
+    }
+    @keyframes spin { to { transform: rotate(360deg); } }
+
+    /* Viewer */
+    .viewer-shell {
+      position: relative;
+      width: 100%;
+      aspect-ratio: 16 / 10;
+      min-height: 480px;
+      border-radius: 8px;
+      overflow: hidden;
+      background: var(--viewer);
+    }
+    .viewer-iframe {
+      width: 100%; height: 100%; border: 0; display: block; opacity: 0;
+      transition: opacity 200ms ease;
+    }
+    .viewer-iframe.ready { opacity: 1; }
+    .viewer-overlay {
+      position: absolute; inset: 0;
+      display: flex; flex-direction: column; align-items: center; justify-content: center;
+      gap: 10px; color: #f4f7f6; text-align: center; padding: 24px;
+      transition: opacity 200ms ease, visibility 200ms ease;
+    }
+    .viewer-overlay.hidden { opacity: 0; visibility: hidden; pointer-events: none; }
+    .viewer-overlay .ring {
+      width: 38px; height: 38px;
+      border: 3px solid #35413d; border-top-color: #34d399;
+      border-radius: 50%; animation: spin 0.9s linear infinite;
+    }
+    .viewer-overlay .bar { width: 36px; height: 3px; background: #f87171; border-radius: 2px; }
+    .viewer-overlay .idle { width: 36px; height: 2px; background: #46514e; border-radius: 2px; }
+    .viewer-overlay strong { font-weight: 650; font-size: 0.95rem; }
+    .viewer-overlay span { color: #94a19d; font-size: 0.78rem; }
+    .viewer-overlay .progress {
+      width: 220px; height: 4px; background: #1f2926; border-radius: 999px; overflow: hidden;
+      margin-top: 4px;
+    }
+    .viewer-overlay .progress > div {
+      height: 100%; background: #34d399; width: 0%;
+      transition: width 250ms ease;
+    }
+
+    /* Download row */
+    .downloads {
+      display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 14px;
+    }
+    .dl {
+      display: inline-flex; align-items: center; justify-content: center; gap: 8px;
+      min-height: 44px; padding: 0 12px;
+      border: 1px solid var(--border-strong); border-radius: 8px;
+      background: var(--surface-muted); color: var(--text);
+      font: 600 0.82rem 'Inter', sans-serif;
+      text-decoration: none; cursor: pointer;
+      transition: border-color 150ms ease, background 150ms ease;
+    }
+    .dl:hover { border-color: var(--accent); background: #fff; }
+    .dl.ready { border-color: #8ac6b5; background: var(--primary-soft); color: #075e49; }
+    .dl.ready:hover { border-color: var(--primary); background: #e3f4ee; }
+    .dl:disabled, .dl[aria-disabled="true"] {
+      opacity: 0.55; cursor: not-allowed; background: var(--surface-muted);
+    }
+    .dl svg { width: 14px; height: 14px; }
+
+    /* Examples */
+    .examples-head {
+      display: flex; align-items: baseline; justify-content: space-between;
+      margin-bottom: 12px; padding: 0 2px;
+    }
+    .examples-head h2 { font-size: 0.9rem; font-weight: 700; }
+    .examples-head span { color: var(--muted); font-size: 0.78rem; }
+    .gallery {
+      display: grid;
+      grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
+      gap: 10px;
+    }
+    .thumb {
+      position: relative; aspect-ratio: 4 / 3;
+      border-radius: 8px; overflow: hidden; cursor: pointer;
+      border: 1px solid var(--border); background: var(--surface);
+      transition: transform 120ms ease, border-color 120ms ease;
+    }
+    .thumb:hover { transform: translateY(-2px); border-color: var(--primary); }
+    .thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
+    .thumb .label {
+      position: absolute; inset: auto 0 0 0;
+      padding: 16px 10px 8px;
+      background: linear-gradient(to top, rgba(0,0,0,0.55), transparent);
+      color: #fff; font-size: 0.72rem; font-weight: 500;
+    }
+
+    /* Toast */
+    .toast {
+      position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%);
+      background: #17201e; color: #fff; padding: 10px 16px; border-radius: 8px;
+      font-size: 0.85rem; box-shadow: 0 10px 30px rgba(0,0,0,0.2);
+      opacity: 0; transition: opacity 200ms ease, transform 200ms ease;
+      pointer-events: none; z-index: 100;
+    }
+    .toast.show { opacity: 1; transform: translateX(-50%) translateY(-4px); }
+    .toast.error { background: var(--danger); }
+
+    /* Spinner utilities */
+    .hidden { display: none !important; }
+  </style>
+</head>
+<body>
+  <div class="app">
+    <header class="header">
+      <div class="brand">
+        <div class="brand-row">
+          <div class="brand-name">Infini<span class="accent">Splat</span></div>
+          <div class="brand-tag">Implicit Gaussian decoding for monocular view synthesis</div>
+        </div>
+        <div class="brand-meta">
+          <span>Upload one photo</span>
+          <span>Get a Gaussian splat scene</span>
+          <span>Export to PLY or HTML</span>
+        </div>
+      </div>
+      <div class="actions">
+        <a class="pill" 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="pill" href="https://zju3dv.github.io/InfiniSplat" target="_blank" rel="noopener">
+          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M3 12h18M12 3v18"/></svg>
+          Project page
+        </a>
+      </div>
+    </header>
+
+    <section class="workspace">
+      <div class="panel">
+        <div class="panel-head">
+          <div class="panel-title"><span class="idx">01</span> Input image</div>
+          <div class="panel-hint">Better for indoor scenes (HyperSim training)</div>
+        </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 or click to upload</strong>
+              <span>JPG, PNG, or WebP — pick a clear subject</span>
+            </div>
+            <img class="drop-preview hidden" id="preview" alt="" />
+          </label>
+          <div class="controls">
+            <button class="primary-btn" id="runBtn" disabled>
+              <span class="btn-label">Reconstruct scene</span>
+            </button>
+          </div>
+        </div>
+      </div>
+
+      <div class="panel">
+        <div class="panel-head">
+          <div class="panel-title"><span class="idx">02</span> Scene viewer</div>
+          <div class="panel-hint">Interactive · drag to orbit · scroll to zoom</div>
+        </div>
+        <div class="panel-body">
+          <div class="viewer-shell" id="viewerShell">
+            <div class="viewer-overlay" id="viewerIdle">
+              <div class="idle"></div>
+              <strong>Ready</strong>
+              <span>Upload an image to begin</span>
+            </div>
+            <div class="viewer-overlay hidden" id="viewerLoading">
+              <div class="ring"></div>
+              <strong id="loadingTitle">Reconstructing scene</strong>
+              <span id="loadingDetail">Running model inference</span>
+              <div class="progress"><div id="progressBar"></div></div>
+            </div>
+            <div class="viewer-overlay hidden" id="viewerError">
+              <div class="bar"></div>
+              <strong>Reconstruction stopped</strong>
+              <span id="errorDetail">See console for details</span>
+            </div>
+            <iframe class="viewer-iframe" id="viewerFrame" title="Gaussian scene"></iframe>
+          </div>
+          <div class="downloads">
+            <button class="dl" id="dlPly" disabled aria-disabled="true">
+              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="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="dl" id="dlHtml" disabled aria-disabled="true">
+              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="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 HTML viewer</span>
+            </button>
+          </div>
+        </div>
+      </div>
+    </section>
+
+    <section>
+      <div class="examples-head">
+        <h2>Examples</h2>
+        <span id="examplesCount">— scenes</span>
+      </div>
+      <div class="gallery" id="gallery"></div>
+    </section>
+  </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"),
+          viewerShell = $("viewerShell"), viewerFrame = $("viewerFrame"),
+          viewerIdle = $("viewerIdle"), viewerLoading = $("viewerLoading"),
+          viewerError = $("viewerError"), loadingTitle = $("loadingTitle"),
+          loadingDetail = $("loadingDetail"), progressBar = $("progressBar"),
+          errorDetail = $("errorDetail"),
+          dlPly = $("dlPly"), dlHtml = $("dlHtml"),
+          gallery = $("gallery"), examplesCount = $("examplesCount"),
+          toast = $("toast");
+
+    let pendingFile = null;
+    let lastPlyUrl = null;
+    let lastHtmlUrl = null;
+
+    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 setViewerState(state, opts) {
+      opts = opts || {};
+      viewerIdle.classList.toggle("hidden", state !== "idle");
+      viewerLoading.classList.toggle("hidden", state !== "loading");
+      viewerError.classList.toggle("hidden", state !== "error");
+      if (state === "loading") {
+        loadingTitle.textContent = opts.title || "Reconstructing scene";
+        loadingDetail.textContent = opts.detail || "Running model inference";
+        progressBar.style.width = (opts.progress || 0) + "%";
+      }
+      if (state === "error") errorDetail.textContent = opts.detail || "Unknown error";
+    }
+
+    function setReady(ready) {
+      runBtn.disabled = !ready;
+      const lbl = runBtn.querySelector(".btn-label");
+      lbl.textContent = ready ? "Reconstruct scene" : "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, lbl);
+        }
+      }
+    }
+
+    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");
+      // revoke later to free memory
+      setTimeout(() => URL.revokeObjectURL(url), 60_000);
+    }
+
+    function clearPreview() {
+      pendingFile = null;
+      preview.src = "";
+      preview.classList.add("hidden");
+      dropEmpty.classList.remove("hidden");
+      drop.classList.remove("has-image");
+      setReady(false);
+    }
+
+    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);
+      }
+    });
+
+    // Connect to backend
+    let client;
+    try {
+      client = await Client.connect(window.location.origin);
+    } catch (err) {
+      toastMsg("Failed to connect to backend", true);
+      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";
+      }
+    } catch (err) {
+      console.warn("Viewer preload skipped:", err);
+    }
+
+    async function runPipeline() {
+      if (!pendingFile || !client) return;
+      setReady(false);
+      setDownload(dlPly, null, "Preparing PLY…");
+      setDownload(dlHtml, null, "Preparing HTML…");
+      viewerFrame.classList.remove("ready");
+
+      try {
+        setViewerState("loading", { title: "Reconstructing scene", detail: "Running model inference", progress: 15 });
+        const recon = await client.predict("/reconstruct", { image_path: handle_file(pendingFile) });
+        const artifactUrl = recon.data[0].url;
+        const artifactResp = await fetch(artifactUrl);
+        const artifactBlob = await artifactResp.blob();
+        const artifactFile = new File([artifactBlob], "gaussians.pt");
+
+        setViewerState("loading", { title: "Preparing PLY", detail: "Filtering Gaussians", progress: 45 });
+        const ply = await client.predict("/export_ply", { artifact: handle_file(artifactFile) });
+        const plyUrl = ply.data[0].url;
+        lastPlyUrl = plyUrl;
+        setDownload(dlPly, plyUrl, "Download PLY — Ready");
+
+        setViewerState("loading", { title: "Encoding viewer", detail: "Building WebGL scene", progress: 70 });
+        const view = await client.predict("/export_viewer", { scene_ply: handle_file(await (await fetch(plyUrl)).blob()) });
+        const viewerUrl = view.data[0].url + "?v=" + Date.now();
+        viewerFrame.src = viewerUrl;
+        viewerFrame.onload = () => {
+          viewerFrame.classList.add("ready");
+          setViewerState("idle");
+        };
+
+        setViewerState("loading", { title: "Bundling HTML", detail: "Embedding assets for download", progress: 92 });
+        const html = await client.predict("/export_html", {
+          viewer_html: handle_file(await (await fetch(viewerUrl)).blob())
+        });
+        const htmlUrl = html.data[0].url;
+        lastHtmlUrl = htmlUrl;
+        setDownload(dlHtml, htmlUrl, "Download HTML viewer — Ready");
+
+        setViewerState("idle");
+        toastMsg("Reconstruction complete");
+      } catch (err) {
+        console.error(err);
+        setViewerState("error", { detail: err.message || "Pipeline failed" });
+        toastMsg(err.message || "Reconstruction failed", true);
+      } finally {
+        setReady(true);
+      }
+    }
+
+    runBtn.addEventListener("click", runPipeline);
+
+    // Examples — pull from /gradio_api examples endpoint or static list
+    // We fall back to a curated list of bundled examples (HF Spaces serves /examples).
+    const FALLBACK_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" },
+    ];
+    gallery.innerHTML = FALLBACK_EXAMPLES.map(ex => `
+      <div class="thumb" data-path="${ex.path}" title="${ex.label}">
+        <img loading="lazy" src="${ex.path}" alt="${ex.label}" />
+        <div class="label">${ex.label}</div>
+      </div>
+    `).join("");
+    examplesCount.textContent = `${FALLBACK_EXAMPLES.length} scenes`;
+
+    gallery.addEventListener("click", async (e) => {
+      const t = e.target.closest(".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);
+        toastMsg("Example loaded — ready to reconstruct");
+      } catch (err) {
+        toastMsg("Failed to load example", true);
+      }
+    });
+  </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,
-    )
+    )