Delete app.py

app.py

@@ -1,635 +0,0 @@
-import gradio as gr
-import subprocess
-import sys
-import os
-import base64
-import tempfile
-import time
-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>
-# See: https://gradio.app/guides/file-access
-# Building this URL ourselves in Python is deterministic — unlike reading
-# it back off a File component's FileData, whose `.url` field can still be
-# null at the moment a change event fires (it gets filled in later by the
-# frontend's own render pass), which is what left the viewer stuck idle.
-def make_load_trigger(ply_path: str, size_mb) -> str:
-    import urllib.parse
-    url = "/gradio_api/file=" + urllib.parse.quote(ply_path, safe="/")
-    url_js = url.replace("\\", "\\\\").replace("'", "\\'")
-    return f"""
-<script>
-(function() {{
-  var tries = 0;
-  (function tryLoad() {{
-    tries++;
-    if (typeof window.swLoadUrl === 'function') {{
-      window.swLoadUrl('{url_js}', '{size_mb}');
-    }} else if (tries < 50) {{
-      setTimeout(tryLoad, 100);
-    }} else if (window.swLog) {{
-      window.swLog('ERROR: viewer script never became ready — try reloading the page');
-    }}
-  }})();
-}})();
-</script>
-"""
-
-
-# ────────────────────────────────────────────────────────────────
-# 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)
-
-            # Hidden trigger — a tiny script (just a URL string, never the
-            # file bytes) telling the viewer where to fetch the model from.
-            trigger1 = gr.HTML(value="", visible=False)
-
-        # ── 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(value="", 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(value="", 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)
-            return status, gr.update(value=make_load_trigger(ply, size_mb), visible=True)
-        return status, gr.update(value="", 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, trigger1])
-    btn2.click(fn=handle_dual,   inputs=[imgA, imgB, anim_toggle], outputs=[st2, anim_file])
-
-    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)