Update app.py

app.py

@@ -300,11 +300,14 @@ VIEWER_SHELL = """
 <script type="module">
 import * as GaussianSplats3D from '@mkkellogg/gaussian-splats-3d';
 
-// Expose loadSplat globally so Gradio JS can call it
-window._swViewer = null;
-window._swB64    = null;
-
-window.swLoadB64 = async function(b64, sizeMb) {
+// 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.
+window._swViewer   = null;
+window._swBlobUrl  = null;
+
+window.swLoadUrl = async function(fileUrl, sizeMb) {
   const idle     = document.getElementById('sw-idle');
   const loading  = document.getElementById('sw-loading');
   const controls = document.getElementById('sw-controls');
@@ -313,28 +316,26 @@ window.swLoadB64 = async function(b64, sizeMb) {
   const canvas   = document.getElementById('sw-canvas');
   const msg      = document.getElementById('sw-load-msg');
 
-  // Store b64 for download
-  window._swB64 = b64;
-
-  // Hide idle, show loading
-  idle.style.display    = 'none';
-  loading.style.display = 'flex';
+  idle.style.display     = 'none';
+  loading.style.display  = 'flex';
   controls.style.display = 'none';
-  if (sizeEl) sizeEl.textContent = sizeMb + ' MB · WebGL · your GPU';
-
-  // Decode base64 → Blob URL
-  const bin  = atob(b64);
-  const buf  = new Uint8Array(bin.length);
-  for (let i = 0; i < bin.length; i++) buf[i] = bin.charCodeAt(i);
-  const url  = URL.createObjectURL(new Blob([buf], { type: 'application/octet-stream' }));
-
-  // Dispose old viewer if any
-  if (window._swViewer) {
-    try { window._swViewer.dispose(); } catch(e) {}
-    window._swViewer = null;
-  }
+  if (sizeEl) sizeEl.textContent = (sizeMb ? sizeMb + ' MB · ' : '') + 'WebGL · your GPU';
 
   try {
+    msg.textContent = 'DOWNLOADING SCENE…';
+    const resp = await fetch(fileUrl);
+    if (!resp.ok) throw new Error('fetch failed: ' + resp.status);
+    const buf = await resp.arrayBuffer();
+    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;
+    }
+
     const viewer = new GaussianSplats3D.Viewer({
       canvas,
       cameraUp: [0, -1, 0],
@@ -345,7 +346,7 @@ window.swLoadB64 = async function(b64, sizeMb) {
     window._swViewer = viewer;
 
     msg.textContent = 'RENDERING GAUSSIANS…';
-    await viewer.addSplatScene(url, { progressiveLoad: true });
+    await viewer.addSplatScene(blobUrl, { progressiveLoad: true });
 
     loading.style.display   = 'none';
     controls.style.display  = 'flex';
@@ -360,15 +361,11 @@ window.swLoadB64 = async function(b64, sizeMb) {
 </script>
 
 <script>
-// Download using stored b64
+// Download using the blob URL we already fetched — no re-decoding needed.
 function swDownload() {
-  if (!window._swB64) return;
-  const bin  = atob(window._swB64);
-  const buf  = new Uint8Array(bin.length);
-  for (let i = 0; i < bin.length; i++) buf[i] = bin.charCodeAt(i);
-  const blob = new Blob([buf], { type: 'application/octet-stream' });
+  if (!window._swBlobUrl) return;
   const a    = document.createElement('a');
-  a.href     = URL.createObjectURL(blob);
+  a.href     = window._swBlobUrl;
   a.download = 'scene.ply';
   document.body.appendChild(a);
   a.click();
@@ -378,20 +375,29 @@ function swDownload() {
 """
 
 
-# ── Build the JS trigger to auto-load PLY into the viewer ──
-def make_load_script(ply_path: str) -> str:
-    """Returns a tiny HTML snippet that calls swLoadB64() with the PLY data."""
-    with open(ply_path, "rb") as f:
-        b64 = base64.b64encode(f.read()).decode("utf-8")
-    size_mb = round(os.path.getsize(ply_path) / 1024 / 1024, 2)
+# ── 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 tryLoad() {{
-  if (typeof window.swLoadB64 === 'function') {{
-    window.swLoadB64(`{b64}`, '{size_mb}');
-  }} else {{
-    setTimeout(tryLoad, 200);
+(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>
 """
@@ -454,7 +460,13 @@ with gr.Blocks(css=CSS, title="SplatWeb") as demo:
             # 3D viewer — always visible, waits for content
             gr.HTML(VIEWER_SHELL)
 
-            # Hidden trigger — populated after processing, fires JS to load PLY
+            # 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.
+            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 ───────────────────
@@ -516,15 +528,16 @@ with gr.Blocks(css=CSS, title="SplatWeb") as demo:
     # ── Handlers ──────────────────────────────────────────────
     def handle_single(img):
         if img is None:
-            return "⚠ Please upload a photo first.", gr.update(value="", visible=False)
+            return "⚠ Please upload a photo first.", gr.update(value=None, visible=False), gr.update(value="", visible=False)
         try:
             ply, status = run_sharp(img)
         except Exception as e:
-            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)
+            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))
         if ply:
-            script = make_load_script(ply)
-            return status, gr.update(value=script, visible=True)
-        return status, gr.update(value="", visible=False)
+            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)
 
     def handle_dual(a, b, do_anim):
         if a is None or b is None:
@@ -563,7 +576,7 @@ with gr.Blocks(css=CSS, title="SplatWeb") as demo:
 
         return msg, html_out
 
-    btn1.click(fn=handle_single, inputs=[img1], outputs=[st1, trigger1])
+    btn1.click(fn=handle_single, inputs=[img1], outputs=[st1, ply_file, trigger1])
     btn2.click(fn=handle_dual,   inputs=[imgA, imgB, anim_toggle], outputs=[st2, anim_file])
 
     gr.HTML("""