Update app.py

app.py

@@ -4,6 +4,7 @@ import sys
 import os
 import base64
 import tempfile
+import time
 from PIL import Image
 
 # ── ZeroGPU optional ──
@@ -58,26 +59,37 @@ 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}"
-        return os.path.join(out_dir, ply_files[0]), "✓ Done — 3D scene loading below ↓"
+        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:
@@ -286,6 +298,17 @@ VIEWER_SHELL = """
   </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">
@@ -300,13 +323,21 @@ VIEWER_SHELL = """
 <script type="module">
 import * as GaussianSplats3D from '@mkkellogg/gaussian-splats-3d';
 
-// Expose loader globally so Gradio's tiny trigger script can call it.
-// This version fetches the file as raw binary (no base64) — much faster
-// on mobile, since base64 inflates size ~33% AND forces a slow manual
-// byte-by-byte decode loop that can freeze the page for large models.
+// 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');
@@ -316,6 +347,8 @@ window.swLoadUrl = async function(fileUrl, sizeMb) {
   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';
@@ -323,9 +356,13 @@ window.swLoadUrl = async function(fileUrl, sizeMb) {
 
   try {
     msg.textContent = 'DOWNLOADING SCENE…';
+    swLog('fetching file…');
     const resp = await fetch(fileUrl);
-    if (!resp.ok) throw new Error('fetch failed: ' + resp.status);
+    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) {} }
@@ -336,6 +373,7 @@ window.swLoadUrl = async function(fileUrl, sizeMb) {
       window._swViewer = null;
     }
 
+    swLog('initializing WebGL viewer…');
     const viewer = new GaussianSplats3D.Viewer({
       canvas,
       cameraUp: [0, -1, 0],
@@ -346,7 +384,9 @@ window.swLoadUrl = async function(fileUrl, sizeMb) {
     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';
@@ -354,7 +394,9 @@ window.swLoadUrl = async function(fileUrl, sizeMb) {
     viewer.start();
 
   } catch(err) {
-    msg.textContent = '⚠ Viewer error — try Chrome or Firefox desktop.';
+    const emsg = (err && err.message) ? err.message : String(err);
+    swLog('ERROR: ' + emsg);
+    msg.textContent = '⚠ ' + emsg;
     console.error(err);
   }
 };
@@ -375,34 +417,6 @@ function swDownload() {
 """
 
 
-# ── Tiny trigger: waits for the hidden File component's link to appear/
-# update in the DOM, then hands its URL to the viewer. No file bytes ever
-# pass through Python string formatting or the Gradio websocket payload —
-# only a short bit of JS does, so this stays fast no matter how big the
-# .ply is.
-def make_load_trigger(size_mb) -> str:
-    return f"""
-<script>
-(function() {{
-  const host = document.getElementById('sw-ply-file');
-  if (!host) return;
-  function tryFire() {{
-    const a = host.querySelector('a[href]');
-    if (a && a.href && typeof window.swLoadUrl === 'function') {{
-      window.swLoadUrl(a.href, '{size_mb}');
-      return true;
-    }}
-    return false;
-  }}
-  if (tryFire()) return;
-  const obs = new MutationObserver(function() {{ if (tryFire()) obs.disconnect(); }});
-  obs.observe(host, {{ childList: true, subtree: true, attributes: true }});
-  setTimeout(function() {{ obs.disconnect(); }}, 15000);
-}})();
-</script>
-"""
-
-
 # ────────────────────────────────────────────────────────────────
 # UI — css in gr.Blocks() (correct for all Gradio versions)
 # ────────────────────────────────────────────────────────────────
@@ -461,14 +475,12 @@ with gr.Blocks(css=CSS, title="SplatWeb") as demo:
             gr.HTML(VIEWER_SHELL)
 
             # Hidden File component — Gradio serves this over its normal
-            # file route, so the browser can fetch() the raw bytes instead
-            # of us shipping a giant base64 string through the page.
+            # file route and gives the frontend a real URL for it (via the
+            # .change(js=...) wiring below), so the browser can fetch() the
+            # raw bytes directly instead of us shipping a giant base64
+            # string through the page.
             ply_file = gr.File(visible=False, elem_id="sw-ply-file", label="ply")
 
-            # Hidden trigger — tiny script (no file data) that tells the
-            # viewer where to fetch the model from once ply_file updates
-            trigger1 = gr.HTML(value="", visible=False)
-
         # ── Tab 2: Two angles + animation ───────────────────
         with gr.TabItem("🎬 Two Angles → Animation"):
 
@@ -527,17 +539,19 @@ with gr.Blocks(css=CSS, title="SplatWeb") as demo:
 
     # ── 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=None, visible=False), gr.update(value="", visible=False)
+            return "⚠ Please upload a photo first.", gr.update(value=None, 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=None, visible=False), gr.update(value="", visible=False))
+                    gr.update(value=None, 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=ply, visible=False), gr.update(value=make_load_trigger(size_mb), visible=True)
-        return status, gr.update(value=None, visible=False), gr.update(value="", visible=False)
+            return status, gr.update(value=ply, visible=False)
+        return status, gr.update(value=None, visible=False)
 
     def handle_dual(a, b, do_anim):
         if a is None or b is None:
@@ -576,9 +590,34 @@ with gr.Blocks(css=CSS, title="SplatWeb") as demo:
 
         return msg, html_out
 
-    btn1.click(fn=handle_single, inputs=[img1], outputs=[st1, ply_file, trigger1])
+    btn1.click(fn=handle_single, inputs=[img1], outputs=[st1, ply_file])
     btn2.click(fn=handle_dual,   inputs=[imgA, imgB, anim_toggle], outputs=[st2, anim_file])
 
+    # This is the load-bearing wire: whenever ply_file's value changes
+    # (including programmatically, from handle_single's return), Gradio
+    # hands this JS function the component's real FileData — the same
+    # {path, url, size, ...} object it uses internally — no DOM-scraping,
+    # no guessing routes. fn=None means this runs client-side only, no
+    # extra server round-trip.
+    ply_file.change(
+        fn=None, inputs=[ply_file], outputs=[],
+        js="""
+        (file) => {
+          const log = (m) => { if (window.swLog) window.swLog(m); else console.log('[SplatWeb]', m); };
+          log('ply_file component changed: ' + JSON.stringify(file));
+          if (file && file.url) {
+            const mb = file.size ? (file.size / 1024 / 1024).toFixed(2) : '';
+            if (window.swLoadUrl) { window.swLoadUrl(file.url, mb); }
+            else { log('ERROR: viewer script not ready yet — reload the page and try again'); }
+          } else if (file) {
+            log('ERROR: file has no .url field (got: ' + Object.keys(file).join(',') + ') — Gradio version mismatch?');
+          } else {
+            log('cleared / no 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;">