Spaces:

VISHAL18for4
/

splatweb

Sleeping

Upload app.py
0f2f4d9 verified 3 months ago
51.1 kB
import gradio as gr
import subprocess
import sys
import os
import base64
import tempfile
import time
import json
import urllib.parse
import numpy as np
from PIL import Image

# ── ZeroGPU optional ──
try:
    import spaces
    HAS_GPU = True
except Exception:
    HAS_GPU = False
    class spaces:
        @staticmethod
        def GPU(duration=60):
            return lambda fn: fn

# ── gradio_client optional (for the TripoSplat alt-model call) ──
try:
    from gradio_client import Client as GradioClient, handle_file as gradio_handle_file
    HAS_GRADIO_CLIENT = True
except Exception:
    HAS_GRADIO_CLIENT = False

# ── plyfile optional (for the auto-clean / noise-pruning step) ──
try:
    from plyfile import PlyData, PlyElement
    HAS_PLYFILE = True
except Exception:
    HAS_PLYFILE = False

# ── Install SHARP ──
def install_sharp():
    try:
        r = subprocess.run(["sharp", "--help"], capture_output=True, timeout=10)
        if r.returncode == 0:
            return
    except Exception:
        pass
    print("Installing Apple SHARP...")
    subprocess.check_call([
        sys.executable, "-m", "pip", "install",
        "git+https://github.com/apple/ml-sharp.git",
        "--quiet"
    ])

install_sharp()

# ── Resize before SHARP ──
def resize_image(path, max_size=512):
    img = Image.open(path).convert("RGB")
    w, h = img.size
    if max(w, h) > max_size:
        r = max_size / max(w, h)
        img = img.resize((int(w*r), int(h*r)), Image.LANCZOS)
    tmp = tempfile.NamedTemporaryFile(suffix=".jpg", delete=False, prefix="sharp_in_")
    img.save(tmp.name, "JPEG", quality=90)
    return tmp.name


# ────────────────────────────────────────────────────────────────
# Core SHARP runner — shared by the GPU and CPU code paths.
#
# Progress: SHARP's CLI doesn't stream fine-grained step-by-step progress,
# so we can't show a "true" per-layer progress bar. What we *can* do
# honestly: launch it with Popen (not the blocking .run()) and poll it in
# a loop from this same function, calling gr.Progress() each tick. Gradio
# streams those calls live to the frontend as the function runs — no
# threading needed, and no risk of interfering with ZeroGPU's execution
# context. The percentage is paced against historically observed timing
# (we logged ~49s for a typical run), so it's a real, live-updating bar —
# just not literally tied to internal model layers, which SHARP doesn't
# expose to us.
# ────────────────────────────────────────────────────────────────
def _sharp_core(image_path, timeout_s, env_overrides=None, progress=None, label="", desc_prefix="", est_total=45.0):
    t0 = time.time()
    print(f"[{label}] START image_path={image_path}", flush=True)
    if image_path is None:
        return None, "⚠ Please upload a photo first."
    out_dir = tempfile.mkdtemp(prefix="splat_")
    resized = None

    def _p(frac, desc):
        if progress is not None:
            try:
                progress(frac, desc=desc_prefix + desc)
            except Exception:
                pass

    try:
        _p(0.05, "Resizing photo…")
        resized = resize_image(image_path, 512)
        print(f"[{label}] resized -> {resized}  (+{time.time()-t0:.1f}s)", flush=True)

        env = os.environ.copy()
        if env_overrides:
            env.update(env_overrides)

        _p(0.12, "Starting SHARP…")
        proc = subprocess.Popen(
            ["sharp", "predict", "-i", resized, "-o", out_dir],
            stdout=subprocess.PIPE, stderr=subprocess.STDOUT, text=True, env=env
        )

        while proc.poll() is None:
            elapsed = time.time() - t0
            if elapsed > timeout_s:
                proc.kill()
                proc.wait(timeout=5)
                raise subprocess.TimeoutExpired(cmd="sharp", timeout=timeout_s)
            frac = 0.12 + 0.78 * min(elapsed / est_total, 1.0)
            _p(frac, f"Generating gaussians… {elapsed:.0f}s")
            time.sleep(0.4)

        stdout, _ = proc.communicate()
        print(f"[{label}] sharp exited code={proc.returncode}  (+{time.time()-t0:.1f}s)", flush=True)

        _p(0.93, "Reading result…")
        ply_files = [f for f in os.listdir(out_dir) if f.endswith(".ply")]
        if not ply_files:
            err = (stdout or "No .ply produced.")[-800:]
            print(f"[{label}] FAILED, no .ply produced:\n{err}", flush=True)
            return None, f"SHARP failed:\n{err}"

        ply_path = os.path.join(out_dir, ply_files[0])
        size_mb = os.path.getsize(ply_path) / 1024 / 1024
        print(f"[{label}] DONE ply={ply_path} size={size_mb:.2f}MB total={time.time()-t0:.1f}s", flush=True)
        _p(1.0, "Done")
        return ply_path, "✓ Done — 3D scene loading below ↓"

    except subprocess.TimeoutExpired:
        print(f"[{label}] TIMEOUT after {time.time()-t0:.1f}s", flush=True)
        return None, "⚠ Timed out. Try a smaller/simpler photo, or (if on GPU) increase GPU_DURATION near the top of app.py if you have more quota."
    except FileNotFoundError:
        print(f"[{label}] SHARP binary not found on PATH", flush=True)
        return None, "⚠ SHARP not found yet — wait 1 minute and try again."
    except Exception as e:
        print(f"[{label}] EXCEPTION: {e}", flush=True)
        return None, f"⚠ Error: {str(e)}"
    finally:
        if resized:
            try: os.unlink(resized)
            except: pass


# NOTE on GPU_DURATION: HuggingFace's free-tier ZeroGPU accounts get a
# 5-minute (300s) TOTAL daily quota. Requesting a duration at or above that
# cap makes the platform reject the call outright ("illegal duration") —
# instantly, before your function even runs. Keeping this comfortably
# under the cap lets a free/unauthenticated user get a few conversions in
# per day instead of burning the whole quota on one call.
GPU_DURATION = 90
# CPU has no ZeroGPU quota at all, but is much slower — this is just a
# generous soft cap for our own subprocess, not a platform guarantee.
CPU_TIMEOUT = 300


@spaces.GPU(duration=GPU_DURATION)
def run_sharp_gpu(image_path, progress=None, desc_prefix=""):
    return _sharp_core(image_path, GPU_DURATION - 15, env_overrides=None,
                        progress=progress, label="run_sharp_gpu", desc_prefix=desc_prefix,
                        est_total=45.0)

def run_sharp_cpu(image_path, progress=None, desc_prefix=""):
    # Forcing CUDA_VISIBLE_DEVICES empty makes SHARP (and torch under it)
    # fall back to CPU even if a GPU happens to be visible in this
    # container, regardless of whether SHARP itself exposes a --device flag.
    return _sharp_core(image_path, CPU_TIMEOUT, env_overrides={"CUDA_VISIBLE_DEVICES": ""},
                        progress=progress, label="run_sharp_cpu", desc_prefix=desc_prefix,
                        est_total=150.0)


# ────────────────────────────────────────────────────────────────
# Alt model: TripoSplat, called via its own live public HF Space
# (VAST-AI/TripoSplat) instead of vendored locally.
#
# Why not run it in this Space directly? TripoSplat's own pipeline needs
# several GB of diffusion/VAE/background-removal checkpoints and a
# heavier runtime than SHARP's single CLI call — that would blow past
# both our GPU_DURATION budget and this Space's disk allowance. Calling
# their existing Space offloads the heavy compute to VAST-AI's own
# ZeroGPU quota instead of ours.
#
# Honesty note: the exact positional argument order below is my best
# reading of their public UI (image, seed, steps, guidance scale, gaussian
# count, format) — I couldn't verify the literal function signature
# without live-testing it. If it's wrong, client.view_api()'s output
# (logged below) will show the real one, and it's a one-line fix.
# ────────────────────────────────────────────────────────────────
_tripo_client = None

def get_tripo_client():
    global _tripo_client
    if _tripo_client is None:
        _tripo_client = GradioClient("VAST-AI/TripoSplat")
        try:
            print(f"[tripo] API schema:\n{_tripo_client.view_api(print_info=False)}", flush=True)
        except Exception as e:
            print(f"[tripo] view_api() failed (non-fatal): {e}", flush=True)
    return _tripo_client


def _extract_ply_path(result):
    """gradio_client results can be nested tuples/dicts/strings depending
    on the target Space's output components — walk them looking for
    anything that looks like a .ply (or .splat) file path/url."""
    def _walk(x):
        if isinstance(x, str) and x.lower().endswith((".ply", ".splat")):
            return x
        if isinstance(x, dict):
            for k in ("path", "url", "name"):
                v = x.get(k)
                if isinstance(v, str) and v.lower().endswith((".ply", ".splat")):
                    return v
            for v in x.values():
                found = _walk(v)
                if found:
                    return found
        if isinstance(x, (list, tuple)):
            for v in x:
                found = _walk(v)
                if found:
                    return found
        return None
    return _walk(result)


def run_tripo(image_path, progress=None, desc_prefix="", num_gaussians=131072):
    t0 = time.time()
    print(f"[run_tripo] START image_path={image_path}", flush=True)

    def _p(frac, desc):
        if progress is not None:
            try:
                progress(frac, desc=desc_prefix + desc)
            except Exception:
                pass

    if not HAS_GRADIO_CLIENT:
        return None, "⚠ gradio_client isn't installed on this Space yet — add `gradio_client` to requirements.txt and redeploy."

    try:
        _p(0.1, "Connecting to TripoSplat's live demo…")
        client = get_tripo_client()
        _p(0.25, "Generating on TripoSplat (may take 20–90s, longer if their Space is asleep)…")
        # Verified against TripoSplat's own app.py source (they use a custom
        # gradio.Server + @app.api() endpoint, not a plain gr.Blocks demo —
        # their real signature is:
        #   generate(image, seed=42, steps=20, guidance_scale=3.0,
        #            num_gaussians=262144, output_format="ply")
        #     -> (preprocessed_image, ply_file, download_file, info_string)
        # Calling with keyword args + their real api_name, not guessed
        # positional args against an assumed "/predict" name.
        result = client.predict(
            image=gradio_handle_file(image_path),
            seed=42,
            steps=20,
            guidance_scale=3.0,
            num_gaussians=int(num_gaussians),
            output_format="ply",
            api_name="/generate"
        )
        print(f"[run_tripo] raw result (+{time.time()-t0:.1f}s): {str(result)[:500]}", flush=True)
        _p(0.9, "Finalizing…")
        ply_path = _extract_ply_path(result)
        if not ply_path or not os.path.exists(ply_path):
            return None, (f"⚠ TripoSplat responded but I couldn't find a .ply in the result. "
                           f"Raw response logged to the HF Space logs for debugging.")
        _p(1.0, "Done")
        return ply_path, "✓ Done (via TripoSplat) — 3D scene loading below ↓"
    except Exception as e:
        print(f"[run_tripo] EXCEPTION: {e}", flush=True)
        return None, (f"⚠ TripoSplat call failed: {str(e)}\n"
                       f"(This calls VAST-AI's public demo directly — it may be asleep, "
                       f"rate-limited, or have changed its API since. Check the HF "
                       f"Space logs for the exact error and the real API schema.)")


# ────────────────────────────────────────────────────────────────
# Auto-clean: prune near-invisible / statistically-stray gaussians.
# This is a pure-CPU numpy pass over the vertex data — runs outside the
# GPU-decorated functions on purpose, so it never eats into ZeroGPU quota.
# ────────────────────────────────────────────────────────────────
def clean_ply(ply_path, opacity_thresh=0.04, mad_k=6.0):
    if not HAS_PLYFILE:
        return ply_path, "skipped (plyfile not installed)"

    plydata = PlyData.read(ply_path)
    if "vertex" not in plydata:
        return ply_path, "skipped (no vertex element)"

    v = plydata["vertex"]
    n0 = len(v.data)
    if n0 == 0:
        return ply_path, "skipped (empty)"

    names = v.data.dtype.names
    if not all(k in names for k in ("x", "y", "z")):
        return ply_path, "skipped (unexpected format)"

    xyz = np.stack([v["x"], v["y"], v["z"]], axis=1).astype(np.float64)

    if "opacity" in names:
        op = np.asarray(v["opacity"], dtype=np.float64)
        # 3DGS often stores opacity as a raw pre-sigmoid logit rather than
        # a 0-1 probability — detect that and convert if so.
        if op.min() < -0.01 or op.max() > 1.01:
            op_prob = 1.0 / (1.0 + np.exp(-op))
        else:
            op_prob = op
        keep_opacity = op_prob >= opacity_thresh
    else:
        keep_opacity = np.ones(n0, dtype=bool)

    # Robust outlier rejection via median absolute deviation (MAD) — more
    # resistant to the very outliers we're trying to remove than mean/std.
    med = np.median(xyz, axis=0)
    mad = np.median(np.abs(xyz - med), axis=0) + 1e-6
    dist = np.abs(xyz - med) / mad
    keep_pos = np.all(dist <= mad_k, axis=1)

    keep = keep_opacity & keep_pos
    n1 = int(keep.sum())

    if n1 == 0 or n1 == n0:
        return ply_path, f"{n0:,} gaussians (no change)"

    new_data = v.data[keep]
    new_el = PlyElement.describe(new_data, "vertex")
    out_path = ply_path[:-4] + "_clean.ply" if ply_path.endswith(".ply") else ply_path + "_clean.ply"
    PlyData([new_el], text=plydata.text, byte_order=plydata.byte_order).write(out_path)

    size_before = os.path.getsize(ply_path) / 1024 / 1024
    size_after  = os.path.getsize(out_path) / 1024 / 1024
    pct = (1 - n1 / n0) * 100
    return out_path, f"{n0:,} → {n1:,} gaussians ({pct:.0f}% pruned) · {size_before:.1f}MB → {size_after:.1f}MB"


# ── Animation HTML (two angles, camera flies between them) ──
def generate_animation_html(ply1, ply2):
    def enc(p):
        with open(p, "rb") as f:
            return base64.b64encode(f.read()).decode("utf-8")
    b1, b2 = enc(ply1), enc(ply2)
    return f"""<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8"/>
<meta name="viewport" content="width=device-width,initial-scale=1.0"/>
<title>SplatWeb Animation</title>
<style>
*{{box-sizing:border-box;margin:0;padding:0}}
body{{background:#050810;color:#dce8ff;font-family:monospace;height:100vh;display:flex;flex-direction:column;overflow:hidden}}
#hdr{{display:flex;align-items:center;justify-content:space-between;padding:.8rem 1.4rem;
      border-bottom:1px solid rgba(77,138,255,.15);background:rgba(5,8,16,.9);backdrop-filter:blur(10px);flex-shrink:0;gap:.8rem}}
.logo{{font-size:1.1rem;font-weight:bold;letter-spacing:.06em;background:linear-gradient(90deg,#4d8aff,#8b5cf6);-webkit-background-clip:text;-webkit-text-fill-color:transparent}}
.hr{{display:flex;align-items:center;gap:.6rem;flex-wrap:wrap;justify-content:flex-end}}
.badge{{font-size:.58rem;color:#22d3a0;border:1px solid rgba(34,211,160,.3);padding:.22rem .65rem;border-radius:100px;white-space:nowrap}}
#btndl{{background:linear-gradient(135deg,#4d8aff,#8b5cf6);border:none;border-radius:8px;padding:.32rem .85rem;
        color:#fff;font-family:monospace;font-size:.6rem;cursor:pointer;white-space:nowrap;transition:all .2s}}
#btndl:hover{{transform:translateY(-1px)}}
#wrap{{flex:1;position:relative;overflow:hidden}}
canvas{{width:100%!important;height:100%!important;display:block}}
#ov{{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1rem;background:rgba(5,8,16,.78);backdrop-filter:blur(4px)}}
#ov.hidden{{display:none}}
.sp{{width:42px;height:42px;border:2px solid rgba(77,138,255,.18);border-top-color:#4d8aff;border-radius:50%;animation:spin 1s linear infinite}}
@keyframes spin{{to{{transform:rotate(360deg)}}}}
#lm{{font-size:.7rem;color:rgba(180,200,255,.5);letter-spacing:.1em}}
#sl{{position:absolute;top:1rem;left:50%;transform:translateX(-50%);font-size:.6rem;color:rgba(180,200,255,.4);
     background:rgba(0,0,0,.55);padding:.25rem .9rem;border-radius:100px;border:1px solid rgba(77,138,255,.12);display:none;white-space:nowrap}}
#ctrls{{position:absolute;bottom:1.2rem;left:50%;transform:translateX(-50%);display:flex;gap:.5rem;flex-wrap:wrap;justify-content:center}}
.pill{{background:rgba(0,0,0,.62);border:1px solid rgba(255,255,255,.07);border-radius:100px;padding:.28rem .72rem;font-size:.57rem;color:rgba(180,200,255,.42)}}
#pbw{{position:absolute;bottom:0;left:0;right:0;height:3px;background:rgba(77,138,255,.1)}}
#pb{{height:100%;background:linear-gradient(90deg,#4d8aff,#8b5cf6,#22d3a0);width:0%;transition:width .12s linear}}
</style>
</head>
<body>
<div id="hdr">
  <div class="logo">SPLATWEB</div>
  <div class="hr">
    <div class="badge">✦ 3D KEYFRAME ANIMATION</div>
    <button id="btndl" onclick="saveme()">⬇ SAVE HTML</button>
  </div>
</div>
<div id="wrap">
  <canvas id="c"></canvas>
  <div id="ov"><div class="sp"></div><div id="lm">LOADING 3D SCENES…</div></div>
  <div id="sl">ANGLE 1</div>
  <div id="ctrls">
    <div class="pill">Drag → Orbit</div>
    <div class="pill">Scroll → Zoom</div>
    <div class="pill">Camera auto-animates</div>
  </div>
  <div id="pbw"><div id="pb"></div></div>
</div>
<script type="importmap">{{"imports":{{"@mkkellogg/gaussian-splats-3d":"https://cdn.jsdelivr.net/npm/@mkkellogg/gaussian-splats-3d@0.4.2/build/gaussian-splats-3d.module.js"}}}}</script>
<script type="module">
import * as G from '@mkkellogg/gaussian-splats-3d';
function b2u(b){{const bin=atob(b),buf=new Uint8Array(bin.length);for(let i=0;i<bin.length;i++)buf[i]=bin.charCodeAt(i);return URL.createObjectURL(new Blob([buf],{{type:'application/octet-stream'}}));}}
const u1=b2u(`{b1}`),u2=b2u(`{b2}`);
const canvas=document.getElementById('c'),ov=document.getElementById('ov'),lm=document.getElementById('lm'),pb=document.getElementById('pb'),sl=document.getElementById('sl');
const A={{x:-2.5,y:-1.2,z:5}},B={{x:2.5,y:-.4,z:5}},TRAVEL=4000,HOLD=1500;
let viewer=null,phase='hold_a',ps=null;
const ease=t=>t<.5?2*t*t:-1+(4-2*t)*t,lerp=(a,b,t)=>a+(b-a)*t;
function tick(now){{
  if(!viewer||!viewer.camera){{requestAnimationFrame(tick);return;}}
  if(!ps)ps=now;const e=now-ps,cam=viewer.camera;
  if(phase==='hold_a'){{cam.position.set(A.x,A.y,A.z);pb.style.width='0%';sl.textContent='ANGLE 1';if(e>=HOLD){{phase='a_to_b';ps=now;}}}}
  else if(phase==='a_to_b'){{const t=ease(Math.min(e/TRAVEL,1));cam.position.set(lerp(A.x,B.x,t),lerp(A.y,B.y,t),lerp(A.z,B.z,t));pb.style.width=(t*100)+'%';sl.textContent='ANGLE 1 → ANGLE 2';if(e>=TRAVEL){{phase='hold_b';ps=now;}}}}
  else if(phase==='hold_b'){{cam.position.set(B.x,B.y,B.z);pb.style.width='100%';sl.textContent='ANGLE 2';if(e>=HOLD){{phase='b_to_a';ps=now;}}}}
  else if(phase==='b_to_a'){{const t=ease(Math.min(e/TRAVEL,1));cam.position.set(lerp(B.x,A.x,t),lerp(B.y,A.y,t),lerp(B.z,A.z,t));pb.style.width=((1-t)*100)+'%';sl.textContent='ANGLE 2 → ANGLE 1';if(e>=TRAVEL){{phase='hold_a';ps=now;}}}}
  cam.lookAt(0,0,0);requestAnimationFrame(tick);
}}
async function init(){{
  viewer=new G.Viewer({{canvas,cameraUp:[0,-1,0],initialCameraPosition:[A.x,A.y,A.z],initialCameraLookAt:[0,0,0],selfDrivenMode:true,dynamicScene:true}});
  try{{
    lm.textContent='LOADING ANGLE 1…';await viewer.addSplatScene(u1,{{progressiveLoad:false}});
    lm.textContent='LOADING ANGLE 2…';await viewer.addSplatScene(u2,{{progressiveLoad:false}});
    ov.classList.add('hidden');sl.style.display='block';viewer.start();requestAnimationFrame(tick);
  }}catch(err){{lm.textContent='⚠ Load error.';console.error(err);}}
}}
init();
</script>
<script>function saveme(){{const blob=new Blob([document.documentElement.outerHTML],{{type:'text/html'}});const a=document.createElement('a');a.href=URL.createObjectURL(blob);a.download='splatweb-animation.html';document.body.appendChild(a);a.click();document.body.removeChild(a);}}</script>
</body></html>"""


# ────────────────────────────────────────────────────────────────
# CSS — back in gr.Blocks() where it belongs in Gradio 6
# (shows a harmless warning in logs but does NOT crash)
# ────────────────────────────────────────────────────────────────
CSS = """
@import url('https://fonts.googleapis.com/css2?family=Syne:wght@700;800&family=JetBrains+Mono:wght@300;400;500&display=swap');
/* ── Theme via Gradio's own CSS variables — the stable, documented way
   to reskin native components (radios, sliders, buttons, tabs, inputs)
   without depending on internal class names that change between
   Gradio versions. ── */
:root, .dark {
    --body-background-fill: #050810;
    --background-fill-primary: #050810;
    --background-fill-secondary: #0a0f1c;
    --block-background-fill: #0a0f1c;
    --block-border-color: rgba(77,138,255,0.16);
    --block-label-text-color: #8b9ac4;
    --block-title-text-color: #dce8ff;
    --body-text-color: #dce8ff;
    --body-text-color-subdued: #8b9ac4;
    --border-color-primary: rgba(77,138,255,0.18);
    --border-color-accent: #4d8aff;
    --input-background-fill: #0d1220;
    --input-border-color: rgba(77,138,255,0.22);
    --input-border-color-focus: #4d8aff;
    --checkbox-background-color: #0d1220;
    --checkbox-background-color-selected: #4d8aff;
    --checkbox-border-color: rgba(77,138,255,0.3);
    --checkbox-border-color-selected: #4d8aff;
    --checkbox-label-background-fill: #0d1220;
    --checkbox-label-background-fill-selected: linear-gradient(135deg,#4d8aff,#8b5cf6);
    --checkbox-label-border-color: rgba(77,138,255,0.22);
    --checkbox-label-border-color-selected: #4d8aff;
    --checkbox-label-text-color: #8b9ac4;
    --checkbox-label-text-color-selected: #fff;
    --slider-color: #4d8aff;
    --button-primary-background-fill: linear-gradient(135deg,#4d8aff,#8b5cf6);
    --button-primary-background-fill-hover: linear-gradient(135deg,#5f97ff,#9a6cf7);
    --button-primary-text-color: #fff;
    --button-secondary-background-fill: #0d1220;
    --button-secondary-border-color: rgba(77,138,255,0.25);
    --button-secondary-text-color: #dce8ff;
    --panel-background-fill: #0a0f1c;
    --shadow-drop: 0 4px 20px rgba(77,138,255,0.08);
}
body, .gradio-container {
    background: #050810 !important;
    font-family: 'JetBrains Mono', monospace !important;
}
.gradio-container { max-width: 820px !important; margin: 0 auto !important; }
h1 {
    font-family: 'Syne', sans-serif !important;
    font-weight: 800 !important;
    font-size: 2.6rem !important;
    background: linear-gradient(135deg, #4d8aff, #8b5cf6, #22d3a0) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    letter-spacing: -0.02em !important;
    line-height: 1.1 !important;
    margin-bottom: 0.5rem !important;
}
/* Buttons */
button.lg { font-family: 'Syne', sans-serif !important; font-weight: 700 !important; letter-spacing: 0.02em; }
button.primary, .gradio-container button[variant="primary"] {
    border: none !important;
    box-shadow: 0 4px 18px rgba(77,138,255,0.35) !important;
    transition: transform 0.15s ease, box-shadow 0.15s ease !important;
}
button.primary:hover { transform: translateY(-1px) !important; box-shadow: 0 6px 22px rgba(139,92,246,0.4) !important; }
/* Panels / blocks (image uploader, textboxes, tips accordion, etc.) */
.block, .form {
    border-radius: 14px !important;
    border: 1px solid rgba(77,138,255,0.14) !important;
}
/* Tab navigation */
.tab-nav {
    border-bottom: 1px solid rgba(77,138,255,0.14) !important;
    gap: 0.4rem !important;
}
.tab-nav button {
    font-family: 'JetBrains Mono', monospace !important;
    color: #8b9ac4 !important;
    border-radius: 10px 10px 0 0 !important;
}
.tab-nav button.selected {
    color: #4d8aff !important;
    font-weight: 600 !important;
    border-bottom: 2px solid #4d8aff !important;
    background: rgba(77,138,255,0.06) !important;
}
/* Radio / checkbox pill groups */
label.selected, .selected > label {
    box-shadow: 0 2px 12px rgba(77,138,255,0.25) !important;
}
input[type="radio"], input[type="checkbox"] {
    accent-color: #4d8aff !important;
}
/* Sliders */
input[type="range"] { accent-color: #4d8aff !important; }
/* Accordion (Tips section) */
.label-wrap {
    border-radius: 10px !important;
}
/* Textboxes / status output */
textarea, input[type="text"] {
    font-family: 'JetBrains Mono', monospace !important;
    border-radius: 10px !important;
}
@keyframes sw_spin { to { transform: rotate(360deg); } }
"""


# ────────────────────────────────────────────────────────────────
# 3D viewer — parameterized so multiple independent instances can exist
# on the page (Single Photo tab + the standalone .ply viewer tab) without
# colliding on element IDs. Each instance is looked up by its instance_id
# via data-role attributes scoped inside its own container div.
# ────────────────────────────────────────────────────────────────
def make_viewer_shell(instance_id: str) -> str:
    return f"""
<div id="splatweb-viewer-{instance_id}"
  style="background:#050810;border:1px solid rgba(77,138,255,0.18);
         border-radius:18px;overflow:hidden;">
  <div style="display:flex;align-items:center;justify-content:space-between;
              padding:0.7rem 1.2rem;border-bottom:1px solid rgba(77,138,255,0.1);
              background:rgba(5,8,16,0.95);gap:0.6rem;flex-wrap:wrap;">
    <div>
      <span style="font-family:monospace;font-size:0.68rem;font-weight:bold;
                   background:linear-gradient(90deg,#4d8aff,#8b5cf6);
                   -webkit-background-clip:text;-webkit-text-fill-color:transparent;
                   letter-spacing:0.06em;">✦ 3D SCENE VIEWER</span>
      <span data-role="size" style="font-family:monospace;font-size:0.55rem;
                                color:rgba(180,200,255,0.3);margin-left:0.5rem;"></span>
    </div>
    <button data-role="dlbtn" onclick="swDownload('{instance_id}')"
      style="display:none;background:linear-gradient(135deg,#4d8aff,#8b5cf6);
             border:none;border-radius:8px;padding:0.3rem 0.9rem;color:#fff;
             font-family:monospace;font-size:0.6rem;letter-spacing:0.07em;
             cursor:pointer;box-shadow:0 2px 10px rgba(77,138,255,0.3);">
      ⬇ DOWNLOAD .PLY
    </button>
  </div>
  <div style="position:relative;width:100%;height:460px;">
    <canvas data-role="canvas"
      style="width:100%;height:100%;display:block;
             background:radial-gradient(ellipse at center,#071020,#020408);"></canvas>
    <div data-role="idle"
      style="position:absolute;inset:0;display:flex;flex-direction:column;
             align-items:center;justify-content:center;gap:0.8rem;
             background:rgba(5,8,16,0.85);">
      <div style="font-size:2.5rem;opacity:0.3;">✦</div>
      <div style="font-family:monospace;font-size:0.7rem;color:rgba(180,200,255,0.35);
                  letter-spacing:0.12em;text-align:center;line-height:1.7;">
        3D SCENE WILL APPEAR HERE<br/>
        <span style="font-size:0.58rem;opacity:0.6;">Upload a photo and press Build →</span>
      </div>
    </div>
    <div data-role="loading"
      style="position:absolute;inset:0;display:none;flex-direction:column;
             align-items:center;justify-content:center;gap:1rem;
             background:rgba(5,8,16,0.82);backdrop-filter:blur(4px);">
      <div style="width:40px;height:40px;
                  border:2px solid rgba(77,138,255,0.2);
                  border-top-color:#4d8aff;border-radius:50%;
                  animation:sw_spin 1s linear infinite;"></div>
      <div data-role="loadmsg"
        style="font-family:monospace;font-size:0.68rem;
               color:rgba(180,200,255,0.55);letter-spacing:0.1em;">
        BUILDING 3D SCENE…
      </div>
    </div>
    <div data-role="controls"
      style="position:absolute;bottom:0.9rem;left:50%;transform:translateX(-50%);
             display:none;gap:0.4rem;flex-wrap:wrap;justify-content:center;pointer-events:none;">
      <span style="background:rgba(0,0,0,0.65);backdrop-filter:blur(6px);
             border:1px solid rgba(255,255,255,0.07);border-radius:100px;
             padding:0.25rem 0.65rem;font-family:monospace;font-size:0.55rem;
             color:rgba(180,200,255,0.4);">Drag → Orbit</span>
      <span style="background:rgba(0,0,0,0.65);backdrop-filter:blur(6px);
             border:1px solid rgba(255,255,255,0.07);border-radius:100px;
             padding:0.25rem 0.65rem;font-family:monospace;font-size:0.55rem;
             color:rgba(180,200,255,0.4);">Scroll → Zoom</span>
      <span style="background:rgba(0,0,0,0.65);backdrop-filter:blur(6px);
             border:1px solid rgba(255,255,255,0.07);border-radius:100px;
             padding:0.25rem 0.65rem;font-family:monospace;font-size:0.55rem;
             color:rgba(180,200,255,0.4);">Shift+Drag → Pan</span>
    </div>
  </div>
  <details style="border-top:1px solid rgba(77,138,255,0.1);">
    <summary style="cursor:pointer;padding:0.5rem 0.8rem;font-family:monospace;font-size:0.6rem;
                     color:rgba(180,200,255,0.45);letter-spacing:0.08em;">
      // debug log (tap to expand)
    </summary>
    <pre data-role="debug" style="font-family:monospace;font-size:0.58rem;line-height:1.5;
         color:rgba(180,200,255,0.55);padding:0 0.8rem 0.7rem;margin:0;
         max-height:180px;overflow-y:auto;white-space:pre-wrap;word-break:break-all;"></pre>
  </details>
</div>
"""


# One shared script block driving every viewer instance on the page,
# keyed by instance_id via data-role lookups scoped to each container.
VIEWER_SCRIPT = """
<script type="importmap">
{
  "imports": {
    "@mkkellogg/gaussian-splats-3d":
      "https://cdn.jsdelivr.net/npm/@mkkellogg/gaussian-splats-3d@0.4.2/build/gaussian-splats-3d.module.js"
  }
}
</script>
<script type="module">
import * as GaussianSplats3D from '@mkkellogg/gaussian-splats-3d';
window._swState = window._swState || {};
function _swEls(id) {
  const root = document.getElementById('splatweb-viewer-' + id);
  if (!root) return null;
  return {
    idle:     root.querySelector('[data-role="idle"]'),
    loading:  root.querySelector('[data-role="loading"]'),
    controls: root.querySelector('[data-role="controls"]'),
    dlBtn:    root.querySelector('[data-role="dlbtn"]'),
    sizeEl:   root.querySelector('[data-role="size"]'),
    canvas:   root.querySelector('[data-role="canvas"]'),
    msg:      root.querySelector('[data-role="loadmsg"]'),
    debug:    root.querySelector('[data-role="debug"]'),
  };
}
window.swLog = function(id, msg) {
  const t = new Date().toTimeString().slice(0, 8);
  console.log('[SplatWeb:' + id + ']', msg);
  const els = _swEls(id);
  if (els && els.debug) {
    els.debug.textContent += `[${t}] ${msg}\\n`;
    els.debug.scrollTop = els.debug.scrollHeight;
  }
};
window.swLoadUrl = async function(id, fileUrl, sizeMb) {
  const els = _swEls(id);
  if (!els) { console.error('SplatWeb: no viewer found for instance', id); return; }
  const { idle, loading, controls, dlBtn, sizeEl, canvas, msg } = els;
  window.swLog(id, 'trigger fired → ' + fileUrl);
  idle.style.display     = 'none';
  loading.style.display  = 'flex';
  controls.style.display = 'none';
  if (sizeEl) sizeEl.textContent = (sizeMb ? sizeMb + ' MB · ' : '') + 'WebGL · your GPU';
  try {
    msg.textContent = 'DOWNLOADING SCENE…';
    window.swLog(id, 'fetching file…');
    const resp = await fetch(fileUrl);
    window.swLog(id, 'fetch responded: HTTP ' + resp.status);
    if (!resp.ok) throw new Error('server returned HTTP ' + resp.status + ' for the file URL');
    const buf = await resp.arrayBuffer();
    window.swLog(id, 'downloaded ' + (buf.byteLength / 1024 / 1024).toFixed(2) + ' MB');
    const blobUrl = URL.createObjectURL(new Blob([buf], { type: 'application/octet-stream' }));
    const prev = window._swState[id];
    if (prev) {
      if (prev.blobUrl) { try { URL.revokeObjectURL(prev.blobUrl); } catch(e) {} }
      if (prev.viewer)  { try { prev.viewer.dispose(); } catch(e) {} }
    }
    window.swLog(id, 'initializing WebGL viewer…');
    const viewer = new GaussianSplats3D.Viewer({
      canvas,
      cameraUp: [0, -1, 0],
      initialCameraPosition: [-1, -4, 6],
      initialCameraLookAt:   [0, 0, 0],
      selfDrivenMode: true,
    });
    msg.textContent = 'RENDERING GAUSSIANS…';
    window.swLog(id, 'parsing splat data + uploading to GPU…');
    await viewer.addSplatScene(blobUrl, { progressiveLoad: true });
    window.swLog(id, 'scene loaded ✓');
    window._swState[id] = { viewer, blobUrl };
    loading.style.display   = 'none';
    controls.style.display  = 'flex';
    if (dlBtn) dlBtn.style.display = 'block';
    viewer.start();
  } catch(err) {
    const emsg = (err && err.message) ? err.message : String(err);
    window.swLog(id, 'ERROR: ' + emsg);
    msg.textContent = '⚠ ' + emsg;
    console.error(err);
  }
};
window.swDownload = function(id) {
  const state = window._swState[id];
  if (!state || !state.blobUrl) return;
  const a = document.createElement('a');
  a.href = state.blobUrl;
  a.download = 'scene.ply';
  document.body.appendChild(a);
  a.click();
  document.body.removeChild(a);
};
</script>
"""


# Gradio serves any file under its allowed paths (which includes the
# system temp dir — where our .ply files live) at this documented route:
#   /gradio_api/file=<path>
def make_ply_url(ply_path: str) -> str:
    return "/gradio_api/file=" + urllib.parse.quote(ply_path, safe="/")


# ────────────────────────────────────────────────────────────────
# UI — css in gr.Blocks() (correct for all Gradio versions)
# ────────────────────────────────────────────────────────────────
with gr.Blocks(css=CSS, title="SplatWeb") as demo:

    gr.HTML("""
    <div style="text-align:center;padding:2.5rem 1rem 1.5rem;
                border-bottom:1px solid rgba(80,130,255,0.1);margin-bottom:1.5rem;">
      <h1>SPLATWEB</h1>
      <p style="color:rgba(180,200,255,0.4);font-size:0.72rem;
                letter-spacing:0.1em;margin-top:0.3rem;">
        PHOTO → 3D GAUSSIAN SPLAT · MULTI-MODEL · FREE
      </p>
      <div style="display:inline-flex;gap:0.6rem;margin-top:0.8rem;
                  flex-wrap:wrap;justify-content:center;">
        <span style="background:rgba(34,211,160,0.08);border:1px solid rgba(34,211,160,0.2);
                     color:#22d3a0;font-size:0.6rem;padding:0.2rem 0.7rem;border-radius:100px;">
          ✓ 100% FREE</span>
        <span style="background:rgba(77,138,255,0.08);border:1px solid rgba(77,138,255,0.2);
                     color:#4d8aff;font-size:0.6rem;padding:0.2rem 0.7rem;border-radius:100px;">
          ⚡ AUTO 3D PREVIEW</span>
        <span style="background:rgba(139,92,246,0.08);border:1px solid rgba(139,92,246,0.2);
                     color:#8b5cf6;font-size:0.6rem;padding:0.2rem 0.7rem;border-radius:100px;">
          ✦ CAMERA ANIMATION</span>
      </div>
    </div>
    """)

    with gr.Tabs():

        # ── Tab 1: Single photo ──────────────────────────────
        with gr.TabItem("📷 Single Photo → 3D"):

            img1 = gr.Image(
                type="filepath", label="// upload photo",
                sources=["upload", "webcam"], height=260
            )
            with gr.Accordion("📸 Tips for best results", open=False):
                gr.Markdown("""
- Any size photo — app auto-resizes to 512px before processing
- Clear, well-lit subject gives the best 3D quality
- Works on: objects, rooms, food, people, landscapes
- **GPU:** fast (~45s), but free HF accounts get 5 min/day total ZeroGPU quota
- **CPU:** slow (~2-4 min), but no daily quota limit
- **ZeroGPU hardware must be selected in your Space's Settings → Hardware**
- **TripoSplat (alt model):** experimental — calls a different team's live public demo, so it can be slower/less reliable, but lets you control the Gaussian count
- **Auto-clean:** prunes near-invisible and statistically stray gaussians — usually shrinks the file and reduces noise with no visible quality loss
                """)

            with gr.Row():
                device_choice = gr.Radio(
                    ["⚡ GPU (fast, uses daily quota)", "🐢 CPU (slower, no quota limit)"],
                    value="⚡ GPU (fast, uses daily quota)",
                    label="Processing device"
                )
            model_choice = gr.Radio(
                ["Apple SHARP (built-in)", "TripoSplat (experimental, via live demo)"],
                value="Apple SHARP (built-in)",
                label="Model"
            )
            tripo_gaussians = gr.Slider(
                minimum=32768, maximum=262144, step=32768, value=131072,
                label="Gaussian count (TripoSplat only)",
                info="Higher = more detail + bigger file. Ignored when using SHARP."
            )
            clean_toggle = gr.Checkbox(
                value=True,
                label="✂ Auto-clean stray noise gaussians (recommended)"
            )

            btn1 = gr.Button("✦  Build My 3D Scene", variant="primary", size="lg")
            st1  = gr.Textbox(
                label="// status", interactive=False, lines=3,
                placeholder="Upload a photo and press the button…"
            )

            # 3D viewer — always visible, waits for content
            gr.HTML(make_viewer_shell("v1"))

            # Real, native Gradio download — works regardless of whether
            # the custom WebGL preview above loads, so you always have a
            # reliable way to get the file and open it in another app.
            dl1 = gr.DownloadButton("⬇ Download .ply", visible=False)

            # Hidden trigger — a plain Textbox (not gr.HTML). Browsers (and
            # Gradio's Svelte renderer) never execute <script> tags inserted
            # via innerHTML on a dynamic update — only on the page's
            # *initial* load. A Textbox's .change(js=...) event is Gradio's
            # actual supported mechanism for running JS off a Python return
            # value, and reliably passes the exact string we set.
            url_holder = gr.Textbox(value="", visible=False, elem_id="sw-url-holder")

        # ── Tab 2: Two angles + animation ───────────────────
        with gr.TabItem("🎬 Two Angles → Animation"):

            gr.HTML("""
            <div style="background:rgba(139,92,246,0.06);
                        border:1px solid rgba(139,92,246,0.18);
                        border-radius:12px;padding:1rem 1.2rem;margin-bottom:1rem;">
              <div style="font-size:0.62rem;color:#8b5cf6;
                          letter-spacing:0.1em;margin-bottom:0.4rem;">✦ HOW THIS WORKS</div>
              <div style="font-size:0.72rem;color:rgba(180,200,255,0.55);line-height:1.65;">
                Upload 2 photos of the same object from different angles.
                Both convert to 3D. Enable animation to get a downloadable HTML file —
                open it on any phone, camera flies between both angles in a loop.
                The HTML has a <strong style="color:#dce8ff;">⬇ SAVE HTML</strong> button inside.
              </div>
            </div>
            """)

            with gr.Row():
                imgA = gr.Image(
                    type="filepath", label="// angle 1 — front / left",
                    sources=["upload"], height=220
                )
                imgB = gr.Image(
                    type="filepath", label="// angle 2 — back / right",
                    sources=["upload"], height=220
                )

            anim_toggle = gr.Checkbox(
                label="✦ Generate camera animation HTML",
                value=True,
                info="Downloadable .html — camera flies between angles in a loop, has ⬇ SAVE HTML inside"
            )
            btn2 = gr.Button("✦  Build 3D + Animation", variant="primary", size="lg")
            st2  = gr.Textbox(
                label="// status", interactive=False, lines=3,
                placeholder="Upload both photos and press the button…"
            )

            anim_file = gr.File(
                label="// animation .html — download & open on any phone",
                visible=False, file_types=[".html"]
            )

            gr.HTML("""
            <div style="margin-top:0.8rem;padding:0.9rem 1rem;
                        background:rgba(34,211,160,0.04);
                        border:1px solid rgba(34,211,160,0.1);
                        border-radius:10px;font-size:0.65rem;
                        color:rgba(180,200,255,0.38);line-height:1.8;">
              📱 Download animation .html → open in Chrome or Safari on any phone → 3D plays.<br/>
              📤 Share via WhatsApp / email — recipient just opens the file, no app needed.<br/>
              💾 Tap <strong style="color:#dce8ff;">⬇ SAVE HTML</strong> inside to re-download anytime.
            </div>
            """)

        # ── Tab 3: standalone .ply viewer (NEW) ──────────────
        with gr.TabItem("🗂 View a .PLY File"):

            gr.HTML("""
            <div style="background:rgba(34,211,160,0.06);
                        border:1px solid rgba(34,211,160,0.18);
                        border-radius:12px;padding:1rem 1.2rem;margin-bottom:1rem;">
              <div style="font-size:0.72rem;color:rgba(180,200,255,0.55);line-height:1.65;">
                Already have a Gaussian Splat <strong style="color:#dce8ff;">.ply</strong> file
                (from this app, SuperSplat, Luma, Polycam, etc.)? Drop it here to preview it
                directly — no GPU processing needed, this just loads it into the same viewer.
              </div>
            </div>
            """)

            ply_upload = gr.File(label="// upload a .ply file", file_types=[".ply"], type="filepath")
            btn3 = gr.Button("👁  Load in Viewer", variant="primary", size="lg")
            st3  = gr.Textbox(label="// status", interactive=False, lines=1)

            gr.HTML(make_viewer_shell("v3"))
            url_holder3 = gr.Textbox(value="", visible=False, elem_id="sw-url-holder-v3")

    # ── Handlers ──────────────────────────────────────────────
    def handle_single(img, device_choice, model_choice, clean_toggle, tripo_gaussians, progress=gr.Progress()):
        print(f"[handle_single] click received img={img} device={device_choice!r} model={model_choice!r} clean={clean_toggle}", flush=True)
        if img is None:
            return "⚠ Please upload a photo first.", gr.update(visible=False), ""

        use_tripo = bool(model_choice and "TripoSplat" in model_choice)
        use_cpu   = bool(device_choice and "CPU" in device_choice)

        try:
            if use_tripo:
                ply, status = run_tripo(img, progress=progress, num_gaussians=tripo_gaussians)
            elif use_cpu:
                ply, status = run_sharp_cpu(img, progress=progress)
            else:
                ply, status = run_sharp_gpu(img, progress=progress)
        except Exception as e:
            print(f"[handle_single] backend call raised: {e}", flush=True)
            return (f"⚠ Request failed: {str(e)}\n(If this mentions quota/duration, you've hit your daily free ZeroGPU limit — wait for it to reset, switch to CPU, or sign in with a HF account for a bigger quota.)",
                    gr.update(visible=False), "")

        print(f"[handle_single] backend returned ply={ply!r} status={status!r}", flush=True)

        if ply and clean_toggle:
            try:
                cleaned_path, stats = clean_ply(ply)
                print(f"[handle_single] clean_ply: {stats}", flush=True)
                if cleaned_path != ply:
                    status += f"\n✂ Cleaned: {stats}"
                    ply = cleaned_path
            except Exception as e:
                print(f"[handle_single] cleanup skipped: {e}", flush=True)
                status += "\n(cleanup skipped — using raw output)"

        if ply:
            size_mb = round(os.path.getsize(ply) / 1024 / 1024, 2)
            dl_update = gr.update(value=ply, visible=True, label=f"⬇ Download .ply ({size_mb} MB)")
            payload = json.dumps({"url": make_ply_url(ply), "size_mb": size_mb, "ts": time.time()})
            return status, dl_update, payload
        return status, gr.update(visible=False), ""

    def handle_dual(a, b, do_anim, progress=gr.Progress()):
        if a is None or b is None:
            return "⚠ Please upload BOTH photos.", gr.update(visible=False)

        try:
            ply1, s1 = run_sharp_gpu(a, progress=progress, desc_prefix="Angle 1: ")
        except Exception as e:
            return f"⚠ GPU rejected angle 1: {str(e)}", gr.update(visible=False)
        if not ply1:
            return f"⚠ Angle 1 failed:\n{s1}", gr.update(visible=False)

        try:
            ply2, s2 = run_sharp_gpu(b, progress=progress, desc_prefix="Angle 2: ")
        except Exception as e:
            return f"✓ Angle 1 done.\n⚠ GPU rejected angle 2: {str(e)}", gr.update(visible=False)
        if not ply2:
            return f"✓ Angle 1 done.\n⚠ Angle 2 failed:\n{s2}", gr.update(visible=False)

        msg = "✓ Both angles done!"
        html_out = gr.update(visible=False)

        if do_anim:
            try:
                content = generate_animation_html(ply1, ply2)
                tmp = tempfile.NamedTemporaryFile(
                    suffix=".html", prefix="splatweb_anim_",
                    delete=False, mode="w", encoding="utf-8"
                )
                tmp.write(content)
                tmp.close()
                html_out = gr.update(value=tmp.name, visible=True)
                msg += "\n✦ Animation HTML ready — download below and open on your phone!"
            except Exception as e:
                msg += f"\n⚠ Animation failed: {str(e)}"

        return msg, html_out

    def handle_view_ply(f):
        if f is None:
            return "⚠ Please upload a .ply file first.", ""
        size_mb = round(os.path.getsize(f) / 1024 / 1024, 2)
        payload = json.dumps({"url": make_ply_url(f), "size_mb": size_mb, "ts": time.time()})
        return f"✓ Loaded {os.path.basename(f)} ({size_mb} MB)", payload

    btn1.click(fn=handle_single, inputs=[img1, device_choice, model_choice, clean_toggle, tripo_gaussians],
               outputs=[st1, dl1, url_holder])
    btn2.click(fn=handle_dual, inputs=[imgA, imgB, anim_toggle], outputs=[st2, anim_file])
    btn3.click(fn=handle_view_ply, inputs=[ply_upload], outputs=[st3, url_holder3])

    # This is the load-bearing wire for both viewer instances: whenever
    # url_holder's value changes (including programmatically, from a
    # handler's return), Gradio calls this JS function with that exact
    # string — the documented, reliable way to run custom JS off a Python
    # result.
    url_holder.change(
        fn=None, inputs=[url_holder], outputs=[],
        js="""
        (payload) => {
          const log = (m) => { if (window.swLog) window.swLog('v1', m); else console.log('[SplatWeb]', m); };
          if (!payload) { log('trigger cleared, nothing to load'); return; }
          try {
            const data = JSON.parse(payload);
            if (window.swLoadUrl) { window.swLoadUrl('v1', data.url, data.size_mb); }
            else { log('ERROR: viewer script not ready yet — reload the page and try again'); }
          } catch (e) {
            log('ERROR parsing trigger payload: ' + e.message);
          }
        }
        """
    )
    url_holder3.change(
        fn=None, inputs=[url_holder3], outputs=[],
        js="""
        (payload) => {
          const log = (m) => { if (window.swLog) window.swLog('v3', m); else console.log('[SplatWeb]', m); };
          if (!payload) { log('trigger cleared, nothing to load'); return; }
          try {
            const data = JSON.parse(payload);
            if (window.swLoadUrl) { window.swLoadUrl('v3', data.url, data.size_mb); }
            else { log('ERROR: viewer script not ready yet — reload the page and try again'); }
          } catch (e) {
            log('ERROR parsing trigger payload: ' + e.message);
          }
        }
        """
    )

    # Shared viewer script — placed once, after every viewer container it
    # controls already exists in the initial page HTML, so its <script>
    # tags execute normally (this is the page's *first* render, not a
    # dynamic update, so the innerHTML-script caveat above doesn't apply).
    gr.HTML(VIEWER_SCRIPT)

    gr.HTML("""
    <div style="text-align:center;padding:1.5rem 1rem;
                border-top:1px solid rgba(80,130,255,0.07);margin-top:1.5rem;">
      <p style="font-size:0.6rem;color:rgba(180,200,255,0.22);line-height:1.8;">
        SplatWeb · Apple SHARP + TripoSplat · HuggingFace · 3D renders on your device GPU via WebGL
      </p>
    </div>
    """)

if __name__ == "__main__":
    demo.launch(server_name="0.0.0.0", server_port=7860)