demo

app.py

@@ -333,71 +333,99 @@ def create_splat_viewer_html(ply_url: str) -> str:
     viewer_js_content = viewer_js_path.read_text() if viewer_js_path.exists() else ""
     
     return f"""
-<div id="splat-viewer-container" style="width:100%; height:600px; position:relative; background:#000; border:1px solid #333; border-radius:8px;">
+<div id="splat-viewer-container" style="width:100%; height:600px; position:relative; background:#000; border:1px solid #333; border-radius:8px; overflow:hidden;">
     <canvas id="canvas" style="width:100%; height:100%; display:block;"></canvas>
-    <div id="controls" style="position:absolute; top:10px; left:10px; color:white; font-family:Arial; font-size:12px; background:rgba(0,0,0,0.8); padding:10px; border-radius:4px;">
-        <strong>Controls:</strong><br>
-        Drag: Rotate | Scroll: Zoom<br>
-        Right-drag: Pan
+    
+    <!-- Required elements for viewer.js -->
+    <div id="spinner" style="position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); color:white; font-family:Arial; z-index:10;">
+        <div style="text-align:center; background:rgba(0,0,0,0.8); padding:20px; border-radius:8px;">
+            <div style="font-size:14px; margin-bottom:10px;">Loading 3D Viewer...</div>
+            <div style="background:#333; height:4px; width:200px; border-radius:2px; overflow:hidden;">
+                <div id="progress" style="background:#4CAF50; height:100%; width:0%; transition:width 0.3s;"></div>
+            </div>
+        </div>
     </div>
-    <div id="loading" style="position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); color:white; font-family:Arial; font-size:14px; background:rgba(0,0,0,0.8); padding:20px; border-radius:8px;">
-        Loading 3D model...
+    
+    <div id="message" style="position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); color:#ff4444; font-family:Arial; font-size:14px; background:rgba(0,0,0,0.9); padding:20px; border-radius:8px; display:none; z-index:11;"></div>
+    
+    <div id="fps" style="position:absolute; top:10px; right:10px; color:white; font-family:monospace; font-size:11px; background:rgba(0,0,0,0.7); padding:6px 10px; border-radius:4px; display:none;"></div>
+    
+    <div id="camid" style="position:absolute; top:40px; right:10px; color:white; font-family:monospace; font-size:11px; background:rgba(0,0,0,0.7); padding:6px 10px; border-radius:4px; display:none;"></div>
+    
+    <div id="controls-info" style="position:absolute; bottom:10px; left:10px; color:white; font-family:Arial; font-size:11px; background:rgba(0,0,0,0.7); padding:8px 12px; border-radius:4px;">
+        <strong>Controls:</strong> Drag: Rotate | Scroll: Zoom | Right-drag: Pan
     </div>
 </div>
+
 <script>
-{viewer_js_content}
+// Inject viewer.js
+(function() {{
+    {viewer_js_content}
+}})();
 </script>
+
 <script>
-    // Auto-load the PLY file when viewer is ready
-    setTimeout(function() {{
-        const plyUrl = '{ply_url}';
-        const loadingDiv = document.getElementById('loading');
-        
-        console.log('=== PLY Loading Debug ===');
-        console.log('PLY URL:', plyUrl);
-        console.log('Current location:', window.location.href);
-        console.log('Worker exists:', !!window.worker);
-        
-        loadingDiv.textContent = 'Fetching PLY from: ' + plyUrl;
+// Auto-load the PLY file after viewer initializes
+(function() {{
+    const plyUrl = '{ply_url}';
+    console.log('=== Splat Viewer Init ===');
+    console.log('PLY URL:', plyUrl);
+    
+    // Wait for viewer to initialize
+    let attempts = 0;
+    const maxAttempts = 50;
+    
+    const checkAndLoad = setInterval(function() {{
+        attempts++;
         
-        fetch(plyUrl)
-            .then(response => {{
-                console.log('Fetch response status:', response.status, response.statusText);
-                console.log('Response headers:', Array.from(response.headers.entries()));
-                console.log('Response OK:', response.ok);
-                
-                if (!response.ok) {{
-                    throw new Error(`HTTP ${{response.status}}: ${{response.statusText}}`);
-                }}
-                return response.arrayBuffer();
-            }})
-            .then(buffer => {{
-                console.log('✓ PLY loaded successfully!');
-                console.log('Buffer size:', buffer.byteLength, 'bytes');
-                loadingDiv.textContent = 'Processing ' + (buffer.byteLength / 1024).toFixed(1) + ' KB...';
-                
-                // Trigger the viewer to process the PLY
-                if (window.worker) {{
-                    console.log('Dispatching to worker...');
-                    const event = new MessageEvent('message', {{ data: {{ ply: buffer }} }});
-                    window.worker.dispatchEvent(event);
-                    setTimeout(() => {{
-                        if (loadingDiv) loadingDiv.style.display = 'none';
-                    }}, 2000);
-                }} else {{
-                    console.error('✗ Worker not initialized!');
-                    console.log('Window keys:', Object.keys(window).filter(k => k.includes('work')));
-                    loadingDiv.textContent = 'Error: Viewer worker not ready';
-                    loadingDiv.style.color = '#ff4444';
-                }}
-            }})
-            .catch(error => {{
-                console.error('✗ Error loading PLY:', error);
-                console.error('Error stack:', error.stack);
-                loadingDiv.textContent = 'Error: ' + error.message;
-                loadingDiv.style.color = '#ff4444';
-            }});
-    }}, 1000);
+        if (window.worker) {{
+            console.log('✓ Worker initialized after', attempts * 100, 'ms');
+            clearInterval(checkAndLoad);
+            
+            // Load the PLY file
+            fetch(plyUrl)
+                .then(response => {{
+                    console.log('Fetch status:', response.status);
+                    if (!response.ok) throw new Error(`HTTP ${{response.status}}`);
+                    return response.arrayBuffer();
+                }})
+                .then(buffer => {{
+                    console.log('✓ PLY loaded:', buffer.byteLength, 'bytes');
+                    
+                    // Send to worker (viewer.js will handle it)
+                    const file = new File([buffer], "model.ply");
+                    const reader = new FileReader();
+                    reader.onload = function() {{
+                        window.worker.postMessage({{ ply: reader.result }});
+                        console.log('✓ PLY sent to worker');
+                    }};
+                    reader.readAsArrayBuffer(file);
+                }})
+                .catch(error => {{
+                    console.error('✗ Error:', error);
+                    const spinner = document.getElementById('spinner');
+                    const message = document.getElementById('message');
+                    if (spinner) spinner.style.display = 'none';
+                    if (message) {{
+                        message.textContent = 'Error loading model: ' + error.message;
+                        message.style.display = 'block';
+                    }}
+                }});
+        }} else if (attempts >= maxAttempts) {{
+            console.error('✗ Worker failed to initialize');
+            clearInterval(checkAndLoad);
+            const spinner = document.getElementById('spinner');
+            const message = document.getElementById('message');
+            if (spinner) spinner.style.display = 'none';
+            if (message) {{
+                message.textContent = 'Viewer failed to initialize. Please refresh the page.';
+                message.style.display = 'block';
+            }}
+        }} else {{
+            console.log('Waiting for worker...', attempts);
+        }}
+    }}, 100);
+}})();
 </script>
 """
 
@@ -433,6 +461,7 @@ def main():
         ### 💡 Tips for Best Results
         - Works best with near-frontal portrait images
         - The provided checkpoints were not trained with accessories (glasses, hats, etc.). Portraits containing accessories may produce suboptimal results.
+        - If face detection fails, try disabling auto-cropping and manually crop to square
         """)
         
         with gr.Row():