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)