gradio server

app.py

@@ -1,16 +1,20 @@
-"""TripoSplat Gradio demo with Spark.js in-browser viewer.
+"""TripoSplat – gradio.Server with custom frontend.
 Usage: python app.py
 """
 import base64
+import os
 import subprocess
 import tempfile
 import time
 from pathlib import Path
 from uuid import uuid4
 
-import gradio as gr
 import spaces
 import torch
+from PIL import Image
+from fastapi.responses import HTMLResponse, FileResponse, JSONResponse
+from gradio import Server
+from gradio.data_classes import FileData
 
 from triposplat import TripoSplatPipeline
 import example_inputs_b64 as _b64
@@ -41,145 +45,167 @@ PIPE = TripoSplatPipeline(
     device                 = "cuda",
 )
 
-OUT_ROOT    = Path("gradio_outputs").resolve()
+OUT_ROOT = Path("gradio_outputs").resolve()
 OUT_ROOT.mkdir(parents=True, exist_ok=True)
-VIEWER_HTML = Path("static/viewer/viewer.html").resolve()
 
 # Decode example images from base64 into a persistent temp directory so that
-# gr.Examples (which needs file paths) works without binary files in the repo.
+# the custom frontend can serve them via FastAPI routes.
 _EXAMPLES_TMPDIR = tempfile.mkdtemp(prefix="triposplat_examples_")
+
+
 def _write_example(varname: str, filename: str) -> str:
     path = Path(_EXAMPLES_TMPDIR) / filename
     path.write_bytes(base64.b64decode(getattr(_b64, varname)))
     return str(path)
 
+
 EXAMPLES = [
-    _write_example("CREATURE_BUTTERFLY",   "creature_butterfly.webp"),
-    _write_example("BUILDING_STONE_HOUSE", "building_stone_house.webp"),
-    _write_example("VEHICLE_PIRATE_SHIP",  "vehicle_pirate_ship.webp"),
-    _write_example("PLANT_WATER_LILY",     "plant_water_lily.webp"),
+    {"name": "Creature Butterfly",  "file": _write_example("CREATURE_BUTTERFLY",   "creature_butterfly.webp")},
+    {"name": "Building Stone House","file": _write_example("BUILDING_STONE_HOUSE", "building_stone_house.webp")},
+    {"name": "Vehicle Pirate Ship", "file": _write_example("VEHICLE_PIRATE_SHIP",  "vehicle_pirate_ship.webp")},
+    {"name": "Plant Water Lily",    "file": _write_example("PLANT_WATER_LILY",     "plant_water_lily.webp")},
 ]
 
-PLACEHOLDER_HTML = (
-    "<div style='display:flex;align-items:center;justify-content:center;height:520px;"
-    "color:#94a3b8;font:16px system-ui;background:#111318;border-radius:12px'>"
-    "3D viewer will appear here after generation</div>"
-)
+# ----------------------------------------------------------------------------
+# gradio.Server
+# ----------------------------------------------------------------------------
 
+app = Server()
 
-def _gr_file(path: Path) -> str:
-    """Gradio serves any file under `allowed_paths` at `/gradio_api/file=<abspath>`."""
-    return f"/gradio_api/file={path.as_posix()}"
 
+# ---- Static pages ----------------------------------------------------------
 
-def _viewer_iframe(ply_path: Path) -> str:
-    ts = time.time()  # cache-bust so the iframe reloads each generation
-    src = f"{_gr_file(VIEWER_HTML)}?ply={_gr_file(ply_path)}&ts={ts}"
-    return (
-        f"<iframe src='{src}' "
-        "style='width:100%;height:520px;border:0;border-radius:12px;background:#0a0b0e'></iframe>"
+@app.get("/")
+async def homepage():
+    """Serve the custom frontend."""
+    html_path = os.path.join(os.path.dirname(os.path.abspath(__file__)), "index.html")
+    with open(html_path, "r", encoding="utf-8") as f:
+        return HTMLResponse(f.read())
+
+
+@app.get("/viewer")
+async def viewer_page():
+    """Serve the Spark.js 3D viewer (loaded inside an iframe)."""
+    viewer_path = os.path.join(
+        os.path.dirname(os.path.abspath(__file__)),
+        "static", "viewer", "viewer.html",
     )
+    with open(viewer_path, "r", encoding="utf-8") as f:
+        return HTMLResponse(f.read())
+
+
+# ---- Example images --------------------------------------------------------
+
+@app.get("/api/examples")
+async def get_examples():
+    """Return a JSON list of example images the frontend can display."""
+    return JSONResponse([
+        {"name": ex["name"], "url": f"/api/example/{i}"}
+        for i, ex in enumerate(EXAMPLES)
+    ])
+
+
+@app.get("/api/example/{idx}")
+async def get_example(idx: int):
+    """Serve an individual example image by index."""
+    if 0 <= idx < len(EXAMPLES):
+        return FileResponse(EXAMPLES[idx]["file"], media_type="image/webp")
+    return JSONResponse({"error": "not found"}, status_code=404)
 
 
 # ----------------------------------------------------------------------------
-# Event handlers
+# GPU pipeline helper
 # ----------------------------------------------------------------------------
 
 @spaces.GPU
-def generate(image, seed: int, steps: int, guidance_scale: float,
-             num_gaussians: int, output_format: str,
-             progress=gr.Progress(track_tqdm=True)):
-    """Run the full pipeline (preprocess + encode + sample + decode) in a
-    single GPU acquisition."""
-    if image is None:
-        raise gr.Error("Please upload an image first.")
-
-    progress(0, desc="Generating...")
+def _run_pipeline(pil_image, seed, steps, guidance_scale, num_gaussians,
+                  out_dir, output_format):
+    """Run the full pipeline (preprocess → encode → sample → decode → save)
+    in a single GPU acquisition.
+
+    All file I/O happens here so the unpicklable Gaussian object never
+    crosses the ZeroGPU multiprocessing boundary.
+    """
     t0 = time.time()
-    prepared = PIPE.preprocess_image(image)
+    prepared = PIPE.preprocess_image(pil_image)
     gen = torch.Generator(device=PIPE._device).manual_seed(int(seed))
     cond = PIPE.encode_image(prepared, generator=gen)
-    out  = PIPE.sample_latent(cond, steps=int(steps),
-                              guidance_scale=float(guidance_scale),
-                              generator=gen, show_progress=True)
+    out = PIPE.sample_latent(
+        cond,
+        steps=int(steps),
+        guidance_scale=float(guidance_scale),
+        generator=gen,
+        show_progress=True,
+    )
     gaussian = PIPE.decode_latent(out["latent"], num_gaussians=int(num_gaussians))
     gen_dt = time.time() - t0
 
-    out_dir = OUT_ROOT / uuid4().hex[:12]
-    out_dir.mkdir(parents=True, exist_ok=True)
+    # Save preprocessed image
+    prep_path = out_dir / "preprocessed.png"
+    prepared.save(str(prep_path))
+
+    # Save PLY (always needed for the viewer)
     ply_path = out_dir / "splat.ply"
     gaussian.save_ply(str(ply_path))
 
+    # Save in the requested download format
     fmt = output_format.lower()
-    if fmt == "ply":
-        download_path = ply_path
-    elif fmt == "splat":
+    if fmt == "splat":
         download_path = out_dir / "splat.splat"
         gaussian.save_splat(str(download_path))
     else:
-        raise gr.Error(f"Unknown output format: {output_format}")
+        download_path = ply_path
 
-    info = (f"{gaussian.get_xyz.shape[0]:,} gaussians  ·  "
-            f"generation: {gen_dt:.1f}s  ·  saved: {download_path.name}")
-    return prepared, _viewer_iframe(ply_path), gr.update(value=str(download_path), interactive=True), info
+    n_gaussians = gaussian.get_xyz.shape[0]
+
+    # Return only picklable primitives / paths
+    return str(prep_path), str(ply_path), str(download_path), n_gaussians, gen_dt
 
 
 # ----------------------------------------------------------------------------
-# Gradio UI
+# Main API endpoint  (queued via Gradio's engine)
 # ----------------------------------------------------------------------------
 
-with gr.Blocks(title="TripoSplat") as demo:
-    gr.Markdown("# TripoSplat")
-    gr.Markdown(
-        "TripoSplat converts a single 2D image into high-quality and variable number of 3D Gaussians, developed by [TripoAI](https://www.tripo3d.ai/). "
-        "It can serve as a powerful pipeline tool for asset creation, AR/VR, game development, simulation environments, and beyond.\n\n"
-        "[Read Paper](https://arxiv.org/abs/2605.16355) | [Technical Blog](https://www.tripo3d.ai/research/triposplat) | [GitHub](https://github.com/VAST-AI-Research/TripoSplat)"
+@app.api()
+def generate(
+    image: FileData,
+    seed: int = 42,
+    steps: int = 20,
+    guidance_scale: float = 3.0,
+    num_gaussians: int = 262144,
+    output_format: str = "ply",
+) -> tuple[FileData, FileData, FileData, str]:
+    """Generate 3D Gaussians from an input image.
+
+    Returns (preprocessed_image, ply_file, download_file, info_string).
+    The frontend receives these as result.data[0..3].
+    """
+    pil_image = Image.open(image["path"]).convert("RGBA")
+
+    out_dir = OUT_ROOT / uuid4().hex[:12]
+    out_dir.mkdir(parents=True, exist_ok=True)
+
+    prep_path, ply_path, download_path, n_gaussians, gen_dt = _run_pipeline(
+        pil_image, seed, steps, guidance_scale, num_gaussians,
+        out_dir, output_format,
+    )
+
+    info = (
+        f"{n_gaussians:,} gaussians  ·  "
+        f"generation: {gen_dt:.1f}s  ·  saved: {Path(download_path).name}"
     )
 
-    with gr.Row():
-        with gr.Column(scale=1):
-            image_in = gr.Image(label="Input image", type="pil", image_mode="RGBA",
-                                height=320)
-
-            gr.Examples(
-                examples=[[p] for p in EXAMPLES],
-                inputs=[image_in],
-                label="Examples (click to load)",
-                examples_per_page=10,
-                cache_examples=False,
-            )
-
-            with gr.Accordion("Sampling settings", open=False):
-                seed_in = gr.Number(label="Seed", value=42, precision=0)
-                steps_in = gr.Slider(label="Inference steps", minimum=1, maximum=50, step=1, value=20)
-                cfg_in = gr.Slider(label="Guidance scale", minimum=1.0, maximum=10.0, step=0.5, value=3.0)
-                num_g_in = gr.Dropdown(
-                    label="Number of gaussians",
-                    choices=["32768", "65536", "131072", "262144"],
-                    value="262144",
-                )
-                fmt_in = gr.Dropdown(label="Download format", choices=["ply", "splat"], value="ply")
-
-            run_btn = gr.Button("Generate", variant="primary")
-            prepared_out = gr.Image(label="Preprocessed input", interactive=False, height=240)
-            info_out = gr.Markdown()
-
-        with gr.Column(scale=2):
-            viewer_out = gr.HTML(value=PLACEHOLDER_HTML, label="Spark.js viewer")
-            file_out = gr.DownloadButton(label="Download", value=None, interactive=False)
-
-    run_btn.click(
-        fn=generate,
-        inputs=[image_in, seed_in, steps_in, cfg_in, num_g_in, fmt_in],
-        outputs=[prepared_out, viewer_out, file_out, info_out],
+    return (
+        FileData(path=prep_path),
+        FileData(path=ply_path),
+        FileData(path=download_path),
+        info,
     )
 
 
+# ----------------------------------------------------------------------------
+# Launch
+# ----------------------------------------------------------------------------
+
 if __name__ == "__main__":
-    demo.launch(
-        allowed_paths=[
-            str(VIEWER_HTML.parent),
-            str(OUT_ROOT),
-            _EXAMPLES_TMPDIR,
-        ],
-    )
+    app.launch(show_error=True)

index.html

@@ -0,0 +1,1254 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<title>TripoSplat — Image to 3D Gaussians</title>
+<meta name="description" content="Convert a single 2D image into high-quality 3D Gaussian splats using TripoSplat by TripoAI.">
+<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@300;400;500;600;700&display=swap" rel="stylesheet">
+<style>
+/* ======================================================================
+   DESIGN TOKENS
+   ====================================================================== */
+:root {
+  --bg-base: #08090d;
+  --bg-panel: rgba(13, 15, 22, 0.75);
+  --bg-surface: rgba(255, 255, 255, 0.035);
+  --bg-surface-hover: rgba(255, 255, 255, 0.065);
+  --bg-input: rgba(255, 255, 255, 0.045);
+  --border: rgba(255, 255, 255, 0.06);
+  --border-hover: rgba(255, 255, 255, 0.12);
+  --border-focus: rgba(255, 77, 79, 0.45);
+  --text: #e2e8f0;
+  --text-secondary: #94a3b8;
+  --text-muted: #64748b;
+  --text-faint: #475569;
+  --accent: #ff4d4f;
+  --accent-dark: #d9363e;
+  --accent-glow: rgba(255, 77, 79, 0.25);
+  --accent-subtle: rgba(255, 77, 79, 0.08);
+  --success: #34d399;
+  --error: #f87171;
+  --radius-sm: 6px;
+  --radius-md: 10px;
+  --radius-lg: 14px;
+  --radius-xl: 18px;
+  --transition-fast: 0.15s ease;
+  --transition: 0.25s ease;
+  --transition-slow: 0.4s ease;
+  --panel-left-w: 320px;
+  --panel-right-w: 300px;
+  --header-h: 56px;
+}
+
+/* ======================================================================
+   RESET & BASE
+   ====================================================================== */
+*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
+html, body { height: 100%; overflow: hidden; }
+body {
+  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
+  background: var(--bg-base);
+  color: var(--text);
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+/* ======================================================================
+   BACKGROUND EFFECTS
+   ====================================================================== */
+body::before {
+  content: '';
+  position: fixed;
+  inset: 0;
+  background:
+    radial-gradient(ellipse at 15% 25%, rgba(255, 77, 79, 0.07) 0%, transparent 55%),
+    radial-gradient(ellipse at 85% 75%, rgba(255, 120, 117, 0.05) 0%, transparent 50%),
+    radial-gradient(ellipse at 50% 50%, rgba(63, 27, 27, 0.15) 0%, transparent 70%);
+  pointer-events: none;
+  z-index: 0;
+  animation: bgPulse 25s ease-in-out infinite alternate;
+}
+@keyframes bgPulse {
+  0%   { opacity: 0.6; }
+  100% { opacity: 1; }
+}
+
+/* ======================================================================
+   SCROLLBAR
+   ====================================================================== */
+::-webkit-scrollbar { width: 5px; }
+::-webkit-scrollbar-track { background: transparent; }
+::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.08); border-radius: 3px; }
+::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.14); }
+
+/* ======================================================================
+   HEADER
+   ====================================================================== */
+#app-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  height: var(--header-h);
+  padding: 0 24px;
+  border-bottom: 1px solid var(--border);
+  background: var(--bg-panel);
+  backdrop-filter: blur(24px);
+  -webkit-backdrop-filter: blur(24px);
+  position: relative;
+  z-index: 20;
+}
+.header-left {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+.logo-img {
+  height: 24px;
+  width: auto;
+  object-fit: contain;
+}
+.logo-text {
+  font-size: 18px;
+  font-weight: 700;
+  background: linear-gradient(135deg, #ff9c6e, #ff4d4f);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-clip: text;
+  letter-spacing: -0.3px;
+}
+.header-center {
+  position: absolute;
+  left: 50%;
+  transform: translateX(-50%);
+  font-size: 12px;
+  color: var(--text-muted);
+  max-width: 400px;
+  text-align: center;
+  line-height: 1.4;
+  display: none;
+}
+@media (min-width: 1100px) { .header-center { display: block; } }
+.header-right {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+}
+.header-link {
+  padding: 6px 12px;
+  font-size: 12px;
+  font-weight: 500;
+  color: var(--text-secondary);
+  text-decoration: none;
+  border-radius: var(--radius-sm);
+  transition: all var(--transition-fast);
+}
+.header-link:hover {
+  color: var(--text);
+  background: var(--bg-surface);
+}
+
+/* ======================================================================
+   MAIN LAYOUT
+   ====================================================================== */
+#app-main {
+  display: flex;
+  height: calc(100vh - var(--header-h));
+  position: relative;
+  z-index: 1;
+}
+
+/* ======================================================================
+   PANELS (shared)
+   ====================================================================== */
+.panel {
+  background: var(--bg-panel);
+  backdrop-filter: blur(24px);
+  -webkit-backdrop-filter: blur(24px);
+}
+.panel-left, .panel-right {
+  display: flex;
+  flex-direction: column;
+  overflow-y: auto;
+  padding: 20px;
+}
+.panel-left {
+  width: var(--panel-left-w);
+  min-width: 280px;
+  border-right: 1px solid var(--border);
+}
+.panel-right {
+  width: var(--panel-right-w);
+  min-width: 260px;
+  border-left: 1px solid var(--border);
+}
+.panel-center {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  padding: 20px;
+  min-width: 0;
+  background: transparent;
+  backdrop-filter: none;
+}
+.panel-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 18px;
+}
+.panel-title {
+  font-size: 14px;
+  font-weight: 600;
+  color: var(--text);
+  letter-spacing: -0.2px;
+}
+.badge {
+  font-size: 10px;
+  font-weight: 600;
+  padding: 3px 8px;
+  border-radius: 20px;
+  background: var(--accent-subtle);
+  color: var(--accent);
+  letter-spacing: 0.3px;
+  text-transform: uppercase;
+}
+
+/* ======================================================================
+   SECTION
+   ====================================================================== */
+.section {
+  margin-bottom: 16px;
+}
+.section-title {
+  font-size: 11px;
+  font-weight: 600;
+  color: var(--text-muted);
+  text-transform: uppercase;
+  letter-spacing: 0.6px;
+  margin-bottom: 10px;
+}
+
+/* ======================================================================
+   UPLOAD AREA
+   ====================================================================== */
+#upload-area {
+  border: 2px dashed rgba(255,255,255,0.08);
+  border-radius: var(--radius-lg);
+  cursor: pointer;
+  transition: all var(--transition);
+  background: var(--bg-surface);
+  margin-bottom: 16px;
+  position: relative;
+  overflow: hidden;
+}
+#upload-area:hover {
+  border-color: rgba(255, 77, 79, 0.35);
+  background: var(--accent-subtle);
+}
+#upload-area.drag-over {
+  border-color: var(--accent);
+  background: rgba(255, 77, 79, 0.12);
+  transform: scale(1.01);
+}
+#upload-area.has-image {
+  border-style: solid;
+  border-color: var(--border);
+  padding: 0;
+}
+.upload-placeholder {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 36px 16px;
+  gap: 8px;
+}
+.upload-icon {
+  width: 36px; height: 36px;
+  color: var(--text-muted);
+  margin-bottom: 4px;
+}
+.upload-text {
+  font-size: 13px;
+  font-weight: 500;
+  color: var(--text-secondary);
+}
+.upload-hint {
+  font-size: 11px;
+  color: var(--text-muted);
+}
+.upload-preview {
+  position: relative;
+}
+.upload-preview img {
+  width: 100%;
+  display: block;
+  border-radius: calc(var(--radius-lg) - 2px);
+}
+.btn-clear {
+  position: absolute;
+  top: 8px; right: 8px;
+  width: 28px; height: 28px;
+  border-radius: 50%;
+  border: none;
+  background: rgba(0,0,0,0.65);
+  backdrop-filter: blur(8px);
+  color: var(--text-secondary);
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: all var(--transition-fast);
+  z-index: 2;
+}
+.btn-clear:hover {
+  background: rgba(248, 113, 113, 0.5);
+  color: #fff;
+}
+.btn-clear svg {
+  width: 14px; height: 14px;
+}
+
+/* ======================================================================
+   EXAMPLES
+   ====================================================================== */
+.examples-grid {
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  gap: 8px;
+  margin-bottom: 16px;
+}
+.example-thumb {
+  aspect-ratio: 1;
+  border-radius: var(--radius-md);
+  overflow: hidden;
+  cursor: pointer;
+  border: 2px solid transparent;
+  transition: all var(--transition);
+  position: relative;
+}
+.example-thumb:hover {
+  border-color: rgba(255, 77, 79, 0.35);
+  transform: scale(1.06);
+  box-shadow: 0 4px 16px rgba(0,0,0,0.3);
+}
+.example-thumb.selected {
+  border-color: var(--accent);
+  box-shadow: 0 0 0 1px var(--accent), 0 0 12px var(--accent-glow);
+}
+.example-thumb img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  display: block;
+}
+
+/* ======================================================================
+   ACCORDION
+   ====================================================================== */
+.accordion-btn {
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 10px 12px;
+  background: var(--bg-surface);
+  border: 1px solid var(--border);
+  border-radius: var(--radius-md);
+  color: var(--text-secondary);
+  font-family: inherit;
+  font-size: 12px;
+  font-weight: 500;
+  cursor: pointer;
+  transition: all var(--transition-fast);
+}
+.accordion-btn:hover {
+  background: var(--bg-surface-hover);
+  color: var(--text);
+}
+.accordion-icon {
+  width: 16px; height: 16px;
+  transition: transform var(--transition);
+}
+.accordion-icon.rotated {
+  transform: rotate(180deg);
+}
+.accordion-body {
+  max-height: 0;
+  overflow: hidden;
+  transition: max-height var(--transition-slow) ease, padding var(--transition-slow) ease;
+  padding: 0 4px;
+}
+.accordion-body.open {
+  max-height: 400px;
+  padding: 14px 4px 4px;
+}
+
+/* ======================================================================
+   FORM CONTROLS
+   ====================================================================== */
+.form-group {
+  margin-bottom: 14px;
+}
+.form-group label {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  font-size: 11px;
+  font-weight: 500;
+  color: var(--text-muted);
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+  margin-bottom: 6px;
+}
+.value-display {
+  font-size: 11px;
+  font-weight: 600;
+  color: var(--accent);
+  font-variant-numeric: tabular-nums;
+  background: var(--accent-subtle);
+  padding: 1px 6px;
+  border-radius: 4px;
+}
+input[type="number"],
+select {
+  width: 100%;
+  padding: 9px 12px;
+  background: var(--bg-input);
+  border: 1px solid var(--border);
+  border-radius: var(--radius-sm);
+  color: var(--text);
+  font-family: inherit;
+  font-size: 13px;
+  outline: none;
+  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
+}
+input[type="number"]:focus,
+select:focus {
+  border-color: var(--border-focus);
+  box-shadow: 0 0 0 3px rgba(255, 77, 79, 0.1);
+}
+select {
+  appearance: none;
+  -webkit-appearance: none;
+  cursor: pointer;
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
+  background-repeat: no-repeat;
+  background-position: right 10px center;
+  padding-right: 32px;
+}
+
+/* Range slider */
+input[type="range"] {
+  -webkit-appearance: none;
+  appearance: none;
+  width: 100%;
+  height: 4px;
+  background: rgba(255,255,255,0.08);
+  border-radius: 2px;
+  outline: none;
+  cursor: pointer;
+}
+input[type="range"]::-webkit-slider-thumb {
+  -webkit-appearance: none;
+  width: 16px; height: 16px;
+  background: var(--accent);
+  border-radius: 50%;
+  border: 2.5px solid var(--bg-base);
+  box-shadow: 0 0 8px var(--accent-glow), 0 1px 3px rgba(0,0,0,0.3);
+  cursor: grab;
+  transition: transform var(--transition-fast), box-shadow var(--transition-fast);
+}
+input[type="range"]::-webkit-slider-thumb:hover {
+  transform: scale(1.15);
+  box-shadow: 0 0 14px var(--accent-glow), 0 1px 3px rgba(0,0,0,0.3);
+}
+input[type="range"]::-moz-range-thumb {
+  width: 16px; height: 16px;
+  background: var(--accent);
+  border-radius: 50%;
+  border: 2.5px solid var(--bg-base);
+  box-shadow: 0 0 8px var(--accent-glow);
+  cursor: grab;
+}
+
+/* ======================================================================
+   GENERATE BUTTON
+   ====================================================================== */
+.btn-primary {
+  width: 100%;
+  padding: 13px 16px;
+  margin-top: auto;
+  background: linear-gradient(135deg, #ff4d4f 0%, #d9363e 100%);
+  border: none;
+  border-radius: var(--radius-md);
+  color: #fff;
+  font-family: inherit;
+  font-size: 14px;
+  font-weight: 600;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  transition: all var(--transition);
+  position: relative;
+  overflow: hidden;
+  flex-shrink: 0;
+}
+.btn-primary::before {
+  content: '';
+  position: absolute;
+  inset: 0;
+  background: linear-gradient(120deg, transparent 25%, rgba(255,255,255,0.12) 50%, transparent 75%);
+  transform: translateX(-120%);
+  transition: transform 0.65s ease;
+}
+.btn-primary:hover:not(:disabled)::before {
+  transform: translateX(120%);
+}
+.btn-primary:hover:not(:disabled) {
+  box-shadow: 0 6px 24px rgba(255, 77, 79, 0.35), 0 0 0 1px rgba(255, 77, 79, 0.2);
+  transform: translateY(-1px);
+}
+.btn-primary:active:not(:disabled) {
+  transform: translateY(0);
+}
+.btn-primary:disabled {
+  opacity: 0.4;
+  cursor: not-allowed;
+}
+.btn-primary.loading {
+  background: linear-gradient(135deg, #d9363e 0%, #ad2128 100%);
+  pointer-events: none;
+}
+.btn-icon {
+  width: 16px; height: 16px;
+  flex-shrink: 0;
+}
+
+/* ======================================================================
+   VIEWER
+   ====================================================================== */
+.viewer-wrap {
+  flex: 1;
+  border-radius: var(--radius-xl);
+  overflow: hidden;
+  position: relative;
+  background: radial-gradient(ellipse at 50% 55%, #151a2e 0%, #0a0b10 100%);
+  border: 1px solid var(--border);
+  transition: box-shadow var(--transition-slow);
+}
+.viewer-wrap.active {
+  box-shadow: 0 0 40px rgba(255, 77, 79, 0.08), 0 0 80px rgba(255, 120, 117, 0.04);
+}
+.viewer-placeholder {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+  gap: 14px;
+  color: var(--text-faint);
+  user-select: none;
+}
+.placeholder-icon {
+  width: 56px; height: 56px;
+  opacity: 0.35;
+}
+.viewer-placeholder p {
+  font-size: 14px;
+  font-weight: 500;
+}
+.viewer-placeholder .hint {
+  font-size: 12px;
+  color: var(--text-muted);
+  opacity: 0.6;
+}
+#viewer-iframe {
+  width: 100%;
+  height: 100%;
+  border: none;
+  position: absolute;
+  inset: 0;
+}
+.viewer-bar {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 10px 0 0;
+  flex-shrink: 0;
+}
+.viewer-hint {
+  font-size: 11px;
+  color: var(--text-muted);
+  letter-spacing: 0.3px;
+}
+
+/* ======================================================================
+   OUTPUT PANEL
+   ====================================================================== */
+.output-placeholder {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 48px 16px;
+  text-align: center;
+  gap: 12px;
+  color: var(--text-faint);
+}
+.output-placeholder .placeholder-icon {
+  width: 40px; height: 40px;
+  opacity: 0.25;
+}
+.output-placeholder p {
+  font-size: 13px;
+}
+
+/* Info card */
+.info-card {
+  background: var(--bg-surface);
+  border: 1px solid var(--border);
+  border-radius: var(--radius-md);
+  padding: 4px 0;
+  margin-bottom: 16px;
+}
+.info-row {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 10px 14px;
+}
+.info-row + .info-row {
+  border-top: 1px solid rgba(255,255,255,0.03);
+}
+.info-key {
+  font-size: 11px;
+  font-weight: 500;
+  color: var(--text-muted);
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+}
+.info-val {
+  font-size: 13px;
+  font-weight: 600;
+  color: var(--text);
+  font-variant-numeric: tabular-nums;
+}
+
+/* Download button */
+.btn-download {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  width: 100%;
+  padding: 11px 16px;
+  background: var(--bg-surface);
+  border: 1px solid var(--border);
+  border-radius: var(--radius-md);
+  color: var(--text);
+  font-family: inherit;
+  font-size: 13px;
+  font-weight: 500;
+  cursor: pointer;
+  transition: all var(--transition);
+  text-decoration: none;
+  margin-bottom: 20px;
+}
+.btn-download:hover {
+  background: var(--bg-surface-hover);
+  border-color: var(--border-hover);
+  box-shadow: 0 2px 12px rgba(0,0,0,0.2);
+}
+.btn-download svg {
+  width: 16px; height: 16px;
+}
+
+/* Preprocessed image */
+.preprocessed-section img {
+  width: 100%;
+  border-radius: var(--radius-md);
+  margin-top: 10px;
+  border: 1px solid var(--border);
+}
+
+/* Status bar */
+.status-bar {
+  margin-top: auto;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 10px 0 0;
+  flex-shrink: 0;
+  transition: opacity var(--transition-slow);
+}
+.status-bar.fade-out {
+  opacity: 0;
+}
+.status-dot {
+  width: 7px; height: 7px;
+  border-radius: 50%;
+  flex-shrink: 0;
+}
+.status-dot.connecting {
+  background: #fbbf24;
+  animation: dotPulse 1.2s ease infinite;
+}
+.status-dot.connected {
+  background: var(--success);
+}
+.status-dot.error {
+  background: var(--error);
+}
+@keyframes dotPulse {
+  0%, 100% { opacity: 1; }
+  50% { opacity: 0.3; }
+}
+.status-text {
+  font-size: 11px;
+  color: var(--text-muted);
+}
+
+/* ======================================================================
+   ERROR TOAST
+   ====================================================================== */
+.error-toast {
+  position: fixed;
+  bottom: 24px;
+  left: 50%;
+  transform: translateX(-50%);
+  padding: 12px 24px;
+  background: rgba(127, 29, 29, 0.9);
+  backdrop-filter: blur(12px);
+  border: 1px solid rgba(248, 113, 113, 0.3);
+  border-radius: var(--radius-md);
+  color: #fca5a5;
+  font-size: 13px;
+  font-weight: 500;
+  z-index: 100;
+  box-shadow: 0 8px 32px rgba(0,0,0,0.4);
+  white-space: nowrap;
+  max-width: 90vw;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+/* ======================================================================
+   ANIMATIONS
+   ====================================================================== */
+@keyframes fadeIn {
+  from { opacity: 0; transform: translateY(8px); }
+  to   { opacity: 1; transform: translateY(0); }
+}
+.fade-in { animation: fadeIn 0.35s ease forwards; }
+
+@keyframes spin {
+  to { transform: rotate(360deg); }
+}
+.spin { animation: spin 0.9s linear infinite; }
+
+/* ======================================================================
+   UTILITIES
+   ====================================================================== */
+.hidden { display: none !important; }
+
+/* ======================================================================
+   RESPONSIVE
+   ====================================================================== */
+@media (max-width: 960px) {
+  #app-main { flex-direction: column; overflow-y: auto; }
+  .panel-left, .panel-right {
+    width: 100%;
+    min-width: auto;
+    border-right: none;
+    border-left: none;
+    border-bottom: 1px solid var(--border);
+  }
+  .panel-center { min-height: 400px; }
+  .header-center { display: none; }
+  :root {
+    --panel-left-w: 100%;
+    --panel-right-w: 100%;
+  }
+}
+</style>
+</head>
+<body>
+
+<!-- =====================================================================
+     HEADER
+     ===================================================================== -->
+<header id="app-header">
+  <div class="header-left">
+    <img class="logo-img" src="https://cdn-web.tripo3d.ai/tripo-web/logo/tripo-logo1.webp" alt="Tripo AI Logo">
+    <span class="logo-text">Splat</span>
+  </div>
+  <div class="header-center">
+    Single image → high-quality 3D Gaussians by <a href="https://www.tripo3d.ai/" style="color:var(--accent);text-decoration:none" target="_blank">TripoAI</a>
+  </div>
+  <div class="header-right">
+    <a class="header-link" href="https://arxiv.org/abs/2605.16355" target="_blank" rel="noopener">Paper</a>
+    <a class="header-link" href="https://www.tripo3d.ai/research/triposplat" target="_blank" rel="noopener">Blog</a>
+    <a class="header-link" href="https://github.com/VAST-AI-Research/TripoSplat" target="_blank" rel="noopener">GitHub</a>
+  </div>
+</header>
+
+<!-- =====================================================================
+     MAIN
+     ===================================================================== -->
+<main id="app-main">
+
+  <!-- =============== LEFT PANEL =============== -->
+  <aside class="panel panel-left" id="panel-left">
+    <div class="panel-header">
+      <h2 class="panel-title">Image to 3D</h2>
+      <span class="badge">Gaussian Splatting</span>
+    </div>
+
+    <!-- Upload area -->
+    <div id="upload-area">
+      <input type="file" id="file-input" accept="image/*" hidden>
+      <div class="upload-placeholder" id="upload-placeholder">
+        <svg class="upload-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
+          <path d="M12 16V4"/>
+          <path d="M8 8l4-4 4 4"/>
+          <path d="M3 17l.621 2.485A2 2 0 0 0 5.561 21h12.878a2 2 0 0 0 1.94-1.515L21 17"/>
+        </svg>
+        <p class="upload-text">Drop image or click to upload</p>
+        <p class="upload-hint">PNG, JPG, WEBP up to 20 MB</p>
+      </div>
+      <div class="upload-preview hidden" id="upload-preview">
+        <img id="preview-image" alt="Preview">
+        <button class="btn-clear" id="clear-btn" title="Remove image">
+          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round"><path d="M18 6L6 18M6 6l12 12"/></svg>
+        </button>
+      </div>
+    </div>
+
+    <!-- Examples -->
+    <div class="section">
+      <h3 class="section-title">Examples</h3>
+      <div class="examples-grid" id="examples-grid"></div>
+    </div>
+
+    <!-- Settings accordion -->
+    <div class="section">
+      <button class="accordion-btn" id="settings-toggle" type="button">
+        <span>Sampling Settings</span>
+        <svg class="accordion-icon" id="settings-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M6 9l6 6 6-6"/></svg>
+      </button>
+      <div class="accordion-body" id="settings-body">
+        <div class="form-group">
+          <label for="seed">Seed</label>
+          <input type="number" id="seed" value="42" min="0" max="999999999">
+        </div>
+        <div class="form-group">
+          <label for="steps">Inference Steps <span class="value-display" id="steps-val">20</span></label>
+          <input type="range" id="steps" min="1" max="50" value="20" step="1">
+        </div>
+        <div class="form-group">
+          <label for="guidance">Guidance Scale <span class="value-display" id="guidance-val">3.0</span></label>
+          <input type="range" id="guidance" min="1" max="10" value="3" step="0.5">
+        </div>
+        <div class="form-group">
+          <label for="gaussians">Number of Gaussians</label>
+          <select id="gaussians">
+            <option value="32768">32,768</option>
+            <option value="65536">65,536</option>
+            <option value="131072">131,072</option>
+            <option value="262144" selected>262,144</option>
+          </select>
+        </div>
+        <div class="form-group">
+          <label for="format">Download Format</label>
+          <select id="format">
+            <option value="ply" selected>PLY</option>
+            <option value="splat">SPLAT</option>
+          </select>
+        </div>
+      </div>
+    </div>
+
+    <!-- Spacer -->
+    <div style="flex:1;min-height:12px"></div>
+
+    <!-- Generate button -->
+    <button class="btn-primary" id="generate-btn" type="button" disabled>
+      <svg class="btn-icon" id="generate-icon" viewBox="0 0 24 24" fill="currentColor"><path d="M12 0L14.59 8.41 23 12 14.59 15.59 12 24 9.41 15.59 1 12 9.41 8.41Z"/></svg>
+      <span id="generate-label">Generate</span>
+      <svg class="btn-icon spin hidden" id="generate-spinner" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round"><path d="M12 2a10 10 0 0 1 10 10"/></svg>
+    </button>
+  </aside>
+
+  <!-- =============== CENTER PANEL =============== -->
+  <section class="panel panel-center" id="panel-center">
+    <div class="viewer-wrap" id="viewer-wrap">
+      <div class="viewer-placeholder" id="viewer-placeholder">
+        <svg class="placeholder-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1" stroke-linecap="round" stroke-linejoin="round">
+          <path d="M12 2L3 7v10l9 5 9-5V7l-9-5z"/>
+          <path d="M12 22V12"/>
+          <path d="M3 7l9 5"/>
+          <path d="M21 7l-9 5"/>
+        </svg>
+        <p>3D viewer will appear here after generation</p>
+        <p class="hint">Upload an image and click Generate</p>
+      </div>
+      <iframe id="viewer-iframe" class="hidden" allowfullscreen></iframe>
+    </div>
+    <div class="viewer-bar">
+      <span class="viewer-hint">drag to orbit &nbsp;·&nbsp; scroll to zoom &nbsp;·&nbsp; right-drag to pan</span>
+    </div>
+  </section>
+
+  <!-- =============== RIGHT PANEL =============== -->
+  <aside class="panel panel-right" id="panel-right">
+    <div class="panel-header">
+      <h2 class="panel-title">Output</h2>
+    </div>
+
+    <!-- Placeholder -->
+    <div class="output-placeholder" id="output-placeholder">
+      <svg class="placeholder-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round">
+        <rect x="3" y="3" width="18" height="18" rx="3"/>
+        <path d="M9 9h.01M15 9h.01"/>
+        <path d="M8 14s1.5 2 4 2 4-2 4-2"/>
+      </svg>
+      <p>Generation results<br>will appear here</p>
+    </div>
+
+    <!-- Results (hidden until generation) -->
+    <div class="hidden" id="output-content">
+      <div class="info-card">
+        <div class="info-row">
+          <span class="info-key">Gaussians</span>
+          <span class="info-val" id="out-gaussians">—</span>
+        </div>
+        <div class="info-row">
+          <span class="info-key">Time</span>
+          <span class="info-val" id="out-time">—</span>
+        </div>
+        <div class="info-row">
+          <span class="info-key">File</span>
+          <span class="info-val" id="out-file">—</span>
+        </div>
+      </div>
+
+      <a class="btn-download" id="download-btn" download>
+        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round">
+          <path d="M12 4v12"/>
+          <path d="M8 12l4 4 4-4"/>
+          <path d="M3 17l.621 2.485A2 2 0 0 0 5.561 21h12.878a2 2 0 0 0 1.94-1.515L21 17"/>
+        </svg>
+        <span>Download</span>
+      </a>
+
+      <div class="preprocessed-section">
+        <h3 class="section-title">Preprocessed Input</h3>
+        <img id="preprocessed-img" alt="Preprocessed input">
+      </div>
+    </div>
+
+    <!-- Connection status -->
+    <div class="status-bar" id="status-bar">
+      <span class="status-dot connecting" id="status-dot"></span>
+      <span class="status-text" id="status-text">Connecting…</span>
+    </div>
+  </aside>
+
+</main>
+
+<!-- =====================================================================
+     JAVASCRIPT
+     ===================================================================== -->
+<script type="module">
+import { Client, handle_file } from "https://cdn.jsdelivr.net/npm/@gradio/client/dist/index.min.js";
+
+// --------------------------------------------------------------------------
+// State
+// --------------------------------------------------------------------------
+let client = null;
+let currentFile = null;
+let isGenerating = false;
+
+// --------------------------------------------------------------------------
+// DOM helpers
+// --------------------------------------------------------------------------
+const $ = (id) => document.getElementById(id);
+
+// --------------------------------------------------------------------------
+// Initialise
+// --------------------------------------------------------------------------
+async function init() {
+  updateStatus("connecting");
+
+  try {
+    client = await Client.connect(window.location.origin);
+    updateStatus("connected");
+  } catch (e) {
+    updateStatus("error", e.message);
+    console.error("Gradio client connection failed:", e);
+  }
+
+  loadExamples();
+  setupUpload();
+  setupSettings();
+  setupGenerate();
+}
+
+// --------------------------------------------------------------------------
+// Example images
+// --------------------------------------------------------------------------
+async function loadExamples() {
+  try {
+    const res = await fetch("/api/examples");
+    const examples = await res.json();
+    const grid = $("examples-grid");
+
+    examples.forEach((ex, i) => {
+      const thumb = document.createElement("div");
+      thumb.className = "example-thumb";
+      thumb.innerHTML = `<img src="${ex.url}" alt="${ex.name}" loading="lazy" draggable="false">`;
+      thumb.addEventListener("click", () => selectExample(ex, i));
+      grid.appendChild(thumb);
+    });
+  } catch (e) {
+    console.warn("Failed to load examples:", e);
+  }
+}
+
+async function selectExample(ex, idx) {
+  try {
+    const res = await fetch(ex.url);
+    const blob = await res.blob();
+    currentFile = new File([blob], `example_${idx}.webp`, { type: "image/webp" });
+    showPreview(URL.createObjectURL(blob));
+
+    // Highlight the selected thumbnail
+    document.querySelectorAll(".example-thumb").forEach((t, i) => {
+      t.classList.toggle("selected", i === idx);
+    });
+  } catch (e) {
+    console.error("Failed to load example:", e);
+  }
+}
+
+// --------------------------------------------------------------------------
+// File upload / drag & drop
+// --------------------------------------------------------------------------
+function setupUpload() {
+  const area = $("upload-area");
+  const input = $("file-input");
+
+  area.addEventListener("click", (e) => {
+    // Don't trigger if clicking the clear button
+    if (e.target.closest(".btn-clear")) return;
+    input.click();
+  });
+
+  input.addEventListener("change", () => {
+    if (input.files[0]) handleFile(input.files[0]);
+  });
+
+  area.addEventListener("dragover", (e) => {
+    e.preventDefault();
+    area.classList.add("drag-over");
+  });
+  area.addEventListener("dragleave", () => {
+    area.classList.remove("drag-over");
+  });
+  area.addEventListener("drop", (e) => {
+    e.preventDefault();
+    area.classList.remove("drag-over");
+    const file = e.dataTransfer.files[0];
+    if (file && file.type.startsWith("image/")) handleFile(file);
+  });
+
+  $("clear-btn").addEventListener("click", (e) => {
+    e.stopPropagation();
+    clearFile();
+  });
+}
+
+function handleFile(file) {
+  if (!file.type.startsWith("image/")) return;
+  currentFile = file;
+  showPreview(URL.createObjectURL(file));
+  // De-select example thumbnails
+  document.querySelectorAll(".example-thumb").forEach((t) => t.classList.remove("selected"));
+}
+
+function showPreview(url) {
+  $("preview-image").src = url;
+  $("upload-placeholder").classList.add("hidden");
+  $("upload-preview").classList.remove("hidden");
+  $("upload-area").classList.add("has-image");
+  $("generate-btn").disabled = false;
+}
+
+function clearFile() {
+  currentFile = null;
+  $("file-input").value = "";
+  $("upload-placeholder").classList.remove("hidden");
+  $("upload-preview").classList.add("hidden");
+  $("upload-area").classList.remove("has-image");
+  $("generate-btn").disabled = true;
+  document.querySelectorAll(".example-thumb").forEach((t) => t.classList.remove("selected"));
+}
+
+// --------------------------------------------------------------------------
+// Settings accordion & slider labels
+// --------------------------------------------------------------------------
+function setupSettings() {
+  const toggle = $("settings-toggle");
+  const body = $("settings-body");
+  const icon = $("settings-icon");
+  let open = false;
+
+  toggle.addEventListener("click", () => {
+    open = !open;
+    body.classList.toggle("open", open);
+    icon.classList.toggle("rotated", open);
+  });
+
+  $("steps").addEventListener("input", (e) => {
+    $("steps-val").textContent = e.target.value;
+  });
+  $("guidance").addEventListener("input", (e) => {
+    $("guidance-val").textContent = parseFloat(e.target.value).toFixed(1);
+  });
+}
+
+// --------------------------------------------------------------------------
+// Generation
+// --------------------------------------------------------------------------
+function setupGenerate() {
+  $("generate-btn").addEventListener("click", generate);
+}
+
+async function generate() {
+  if (!currentFile || isGenerating || !client) return;
+
+  isGenerating = true;
+  const btn = $("generate-btn");
+  btn.disabled = true;
+  btn.classList.add("loading");
+  $("generate-label").textContent = "Generating…";
+  $("generate-icon").classList.add("hidden");
+  $("generate-spinner").classList.remove("hidden");
+
+  try {
+    const result = await client.predict("/generate", {
+      image: handle_file(currentFile),
+      seed: parseInt($("seed").value) || 42,
+      steps: parseInt($("steps").value) || 20,
+      guidance_scale: parseFloat($("guidance").value) || 3.0,
+      num_gaussians: parseInt($("gaussians").value) || 262144,
+      output_format: $("format").value || "ply",
+    });
+
+    showResults(result);
+  } catch (error) {
+    console.error("Generation failed:", error);
+    showError(error.message || "Generation failed. Please try again.");
+  } finally {
+    isGenerating = false;
+    btn.disabled = false;
+    btn.classList.remove("loading");
+    $("generate-label").textContent = "Generate";
+    $("generate-icon").classList.remove("hidden");
+    $("generate-spinner").classList.add("hidden");
+  }
+}
+
+// --------------------------------------------------------------------------
+// Display results
+// --------------------------------------------------------------------------
+function showResults(result) {
+  // 1. 3D Viewer — load PLY in the iframe
+  const plyUrl = result.data[1].url;
+  const viewerSrc = `/viewer?ply=${encodeURIComponent(plyUrl)}`;
+  const iframe = $("viewer-iframe");
+  iframe.src = viewerSrc;
+  iframe.classList.remove("hidden");
+  $("viewer-placeholder").classList.add("hidden");
+  $("viewer-wrap").classList.add("active");
+
+  // 2. Parse info string:  "262,144 gaussians  ·  generation: 15.3s  ·  saved: splat.ply"
+  const info = result.data[3];
+  const match = info.match(
+    /^([\d,]+)\s+gaussians\s+·\s+generation:\s+([\d.]+s)\s+·\s+saved:\s+(.+)$/
+  );
+  if (match) {
+    $("out-gaussians").textContent = match[1];
+    $("out-time").textContent = match[2];
+    $("out-file").textContent = match[3];
+  } else {
+    // Fallback: display the whole string
+    $("out-gaussians").textContent = info;
+    $("out-time").textContent = "";
+    $("out-file").textContent = "";
+  }
+
+  // 3. Download button
+  const dl = $("download-btn");
+  dl.href = result.data[2].url;
+  dl.download = result.data[2].orig_name || "triposplat_output";
+
+  // 4. Preprocessed image
+  $("preprocessed-img").src = result.data[0].url;
+
+  // 5. Reveal output section
+  $("output-placeholder").classList.add("hidden");
+  const content = $("output-content");
+  content.classList.remove("hidden");
+  content.classList.remove("fade-in");
+  // Force reflow for re-triggering animation
+  void content.offsetWidth;
+  content.classList.add("fade-in");
+}
+
+// --------------------------------------------------------------------------
+// Error handling
+// --------------------------------------------------------------------------
+function showError(msg) {
+  const toast = document.createElement("div");
+  toast.className = "error-toast fade-in";
+  toast.textContent = msg;
+  document.body.appendChild(toast);
+  setTimeout(() => {
+    toast.style.opacity = "0";
+    toast.style.transition = "opacity 0.3s ease";
+    setTimeout(() => toast.remove(), 350);
+  }, 5000);
+}
+
+// --------------------------------------------------------------------------
+// Connection status
+// --------------------------------------------------------------------------
+function updateStatus(state, msg) {
+  const dot = $("status-dot");
+  const text = $("status-text");
+
+  dot.className = "status-dot " + state;
+  if (state === "connecting") {
+    text.textContent = "Connecting…";
+  } else if (state === "connected") {
+    text.textContent = "Connected";
+    setTimeout(() => $("status-bar").classList.add("fade-out"), 3000);
+  } else if (state === "error") {
+    text.textContent = msg || "Connection error";
+  }
+}
+
+// --------------------------------------------------------------------------
+// Boot
+// --------------------------------------------------------------------------
+init();
+</script>
+</body>
+</html>

requirements.txt

@@ -1,3 +1,4 @@
+gradio
 torch
 torchvision
 numpy