Upload app.py

app.py

@@ -0,0 +1,649 @@
+import gradio as gr
+import subprocess
+import sys
+import os
+import base64
+import tempfile
+import time
+import json
+import urllib.parse
+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
+
+# ── 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
+
+# ── Run SHARP ──
+# NOTE on 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 with "requested GPU duration is
+# larger than the maximum allowed" (an "illegal duration" error) — it fails
+# instantly, before your function even runs, and retrying won't help.
+# Keeping this comfortably under the cap lets a free/unauthenticated user
+# actually get a few conversions in per day instead of burning the whole
+# quota (or being rejected) on a single call.
+GPU_DURATION = 90
+
+@spaces.GPU(duration=GPU_DURATION)
+def run_sharp(image_path):
+    t0 = time.time()
+    print(f"[run_sharp] 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
+    try:
+        resized = resize_image(image_path, 512)
+        print(f"[run_sharp] resized -> {resized}  (+{time.time()-t0:.1f}s)", flush=True)
+        result = subprocess.run(
+            ["sharp", "predict", "-i", resized, "-o", out_dir],
+            capture_output=True, text=True, timeout=GPU_DURATION - 15
+        )
+        print(f"[run_sharp] sharp exited code={result.returncode}  (+{time.time()-t0:.1f}s)", flush=True)
+        ply_files = [f for f in os.listdir(out_dir) if f.endswith(".ply")]
+        if not ply_files:
+            err = (result.stderr or result.stdout or "No .ply produced.")[-800:]
+            print(f"[run_sharp] 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"[run_sharp] DONE ply={ply_path} size={size_mb:.2f}MB total={time.time()-t0:.1f}s", flush=True)
+        return ply_path, "✓ Done — 3D scene loading below ↓"
+    except subprocess.TimeoutExpired:
+        print(f"[run_sharp] TIMEOUT after {time.time()-t0:.1f}s", flush=True)
+        return None, "⚠ Timed out inside the GPU window. Try a smaller/simpler photo, or increase GPU_DURATION near the top of app.py if you have more quota (PRO/Team/Enterprise)."
+    except FileNotFoundError:
+        print("[run_sharp] 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"[run_sharp] EXCEPTION: {e}", flush=True)
+        return None, f"⚠ Error: {str(e)}"
+    finally:
+        if resized:
+            try: os.unlink(resized)
+            except: pass
+
+# ── 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&display=swap');
+
+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;
+}
+
+button.lg { font-family: 'Syne', sans-serif !important; font-weight: 700 !important; }
+"""
+
+# ────────────────────────────────────────────────────────────────
+# The 3D viewer HTML — always visible, loads instantly
+# After processing, JavaScript swaps in the PLY via base64
+# ────────────────────────────────────────────────────────────────
+VIEWER_SHELL = """
+<div id="splatweb-viewer"
+  style="background:#050810;border:1px solid rgba(77,138,255,0.18);
+         border-radius:18px;overflow:hidden;">
+
+  <!-- Header bar -->
+  <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 id="sw-size" style="font-family:monospace;font-size:0.55rem;
+                                color:rgba(180,200,255,0.3);margin-left:0.5rem;"></span>
+    </div>
+    <button id="sw-dl-btn" onclick="swDownload()"
+      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>
+
+  <!-- Canvas area -->
+  <div style="position:relative;width:100%;height:460px;" id="sw-wrap">
+    <canvas id="sw-canvas"
+      style="width:100%;height:100%;display:block;
+             background:radial-gradient(ellipse at center,#071020,#020408);"></canvas>
+
+    <!-- Idle state (shown before any file is processed) -->
+    <div id="sw-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>
+
+    <!-- Loading spinner (shown while PLY loads into viewer) -->
+    <div id="sw-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 id="sw-load-msg"
+        style="font-family:monospace;font-size:0.68rem;
+               color:rgba(180,200,255,0.55);letter-spacing:0.1em;">
+        BUILDING 3D SCENE…
+      </div>
+    </div>
+
+    <!-- Controls (shown after scene loads) -->
+    <div id="sw-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>
+</div>
+
+<details style="margin-top:0.6rem;border:1px solid rgba(77,138,255,0.12);border-radius:10px;
+                 background:rgba(5,8,16,0.6);">
+  <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 — shows what the browser is doing)
+  </summary>
+  <pre id="sw-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>
+
+<style>@keyframes sw_spin { to { transform: rotate(360deg); } }</style>
+
+<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';
+
+// Expose loader + logger globally so Gradio's js= callback can call them.
+window._swViewer   = null;
+window._swBlobUrl  = null;
+
+window.swLog = function(msg) {
+  const t = new Date().toTimeString().slice(0, 8);
+  console.log('[SplatWeb]', msg);
+  const dbg = document.getElementById('sw-debug');
+  if (dbg) {
+    dbg.textContent += `[${t}] ${msg}\n`;
+    dbg.scrollTop = dbg.scrollHeight;
+  }
+};
+window.swLog('viewer module loaded, waiting for a build…');
+
+window.swLoadUrl = async function(fileUrl, sizeMb) {
+  const idle     = document.getElementById('sw-idle');
+  const loading  = document.getElementById('sw-loading');
+  const controls = document.getElementById('sw-controls');
+  const dlBtn    = document.getElementById('sw-dl-btn');
+  const sizeEl   = document.getElementById('sw-size');
+  const canvas   = document.getElementById('sw-canvas');
+  const msg      = document.getElementById('sw-load-msg');
+
+  swLog('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…';
+    swLog('fetching file…');
+    const resp = await fetch(fileUrl);
+    swLog('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();
+    swLog('downloaded ' + (buf.byteLength / 1024 / 1024).toFixed(2) + ' MB');
+    const blobUrl = URL.createObjectURL(new Blob([buf], { type: 'application/octet-stream' }));
+
+    if (window._swBlobUrl) { try { URL.revokeObjectURL(window._swBlobUrl); } catch(e) {} }
+    window._swBlobUrl = blobUrl;
+
+    if (window._swViewer) {
+      try { window._swViewer.dispose(); } catch(e) {}
+      window._swViewer = null;
+    }
+
+    swLog('initializing WebGL viewer…');
+    const viewer = new GaussianSplats3D.Viewer({
+      canvas,
+      cameraUp: [0, -1, 0],
+      initialCameraPosition: [-1, -4, 6],
+      initialCameraLookAt:   [0, 0, 0],
+      selfDrivenMode: true,
+    });
+    window._swViewer = viewer;
+
+    msg.textContent = 'RENDERING GAUSSIANS…';
+    swLog('parsing splat data + uploading to GPU…');
+    await viewer.addSplatScene(blobUrl, { progressiveLoad: true });
+    swLog('scene loaded ✓');
+
+    loading.style.display   = 'none';
+    controls.style.display  = 'flex';
+    dlBtn.style.display     = 'block';
+    viewer.start();
+
+  } catch(err) {
+    const emsg = (err && err.message) ? err.message : String(err);
+    swLog('ERROR: ' + emsg);
+    msg.textContent = '⚠ ' + emsg;
+    console.error(err);
+  }
+};
+</script>
+
+<script>
+// Download using the blob URL we already fetched — no re-decoding needed.
+function swDownload() {
+  if (!window._swBlobUrl) return;
+  const a    = document.createElement('a');
+  a.href     = window._swBlobUrl;
+  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 · APPLE SHARP · 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
+- **ZeroGPU hardware must be selected in your Space's Settings → Hardware** (it isn't automatic just because it's free now)
+- **Free HF account:** 5 min of GPU time per day total (~3 conversions at current settings) — resets 24h after your first run
+- **Not signed in:** only 2 min/day — sign in to a free HF account for more
+- **PRO/Team/Enterprise:** much larger daily quota, plus pay-as-you-go
+                """)
+
+            btn1 = gr.Button("✦  Build My 3D Scene", variant="primary", size="lg")
+            st1  = gr.Textbox(
+                label="// status", interactive=False, lines=2,
+                placeholder="Upload a photo and press the button…"
+            )
+
+            # 3D viewer — always visible, waits for content
+            gr.HTML(VIEWER_SHELL)
+
+            # 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). We used to
+            # push a <script> tag through a gr.HTML update, but browsers
+            # (and Gradio's Svelte renderer) never execute <script> tags
+            # inserted via innerHTML on a dynamic update — only on the
+            # page's *initial* load. That's almost certainly why nothing
+            # ever fired. 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 —
+            # no ambiguity, no timing races.
+            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>
+            """)
+
+    # ── Handlers ──────────────────────────────────────────────
+    def handle_single(img):
+        print(f"[handle_single] click received, img={img}", flush=True)
+        if img is None:
+            return "⚠ Please upload a photo first.", gr.update(visible=False), ""
+        try:
+            ply, status = run_sharp(img)
+        except Exception as e:
+            print(f"[handle_single] GPU call raised: {e}", flush=True)
+            return (f"⚠ GPU rejected the request: {str(e)}\n(If this mentions quota/duration, you've hit your daily free ZeroGPU limit — wait for it to reset, or sign in with a HF account for a bigger quota.)",
+                    gr.update(visible=False), "")
+        print(f"[handle_single] run_sharp returned ply={ply!r} status={status!r}", flush=True)
+        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):
+        if a is None or b is None:
+            return "⚠ Please upload BOTH photos.", gr.update(visible=False)
+
+        try:
+            ply1, s1 = run_sharp(a)
+        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(b)
+        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
+
+    btn1.click(fn=handle_single, inputs=[img1], outputs=[st1, dl1, url_holder])
+    btn2.click(fn=handle_dual,   inputs=[imgA, imgB, anim_toggle], outputs=[st2, anim_file])
+
+    # This is the load-bearing wire for the preview: whenever url_holder's
+    # value changes (including programmatically, from handle_single'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(m); else console.log('[SplatWeb]', m); };
+          if (!payload) { log('trigger cleared, nothing to load'); return; }
+          try {
+            const data = JSON.parse(payload);
+            log('trigger fired -> ' + data.url);
+            if (window.swLoadUrl) { window.swLoadUrl(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);
+          }
+        }
+        """
+    )
+
+    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 · 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)