demo

VIEWER_DEBUG_GUIDE.md

@@ -0,0 +1,209 @@
+# Viewer Debugging Guide
+
+## How to Check Where the PLY File Is
+
+### 1. Check the Debug Info Panel
+
+After generating a 3D model, look at the **"🔍 Debug Info"** textbox which will show:
+
+```
+PLY Path: /path/to/outputs/splats/xxxxx/gaussians.ply
+PLY URL: /file=/path/to/outputs/splats/xxxxx/gaussians.ply
+File exists: True
+```
+
+This tells you:
+- **PLY Path**: The actual file system path where the PLY was saved
+- **PLY URL**: The URL the viewer is trying to fetch
+- **File exists**: Whether the file actually exists on disk
+
+### 2. Check Browser Console
+
+Open your browser's developer console (F12 or Cmd+Option+I) and look for:
+
+```
+=== PLY Loading Debug ===
+PLY URL: /file=/path/to/outputs/splats/xxxxx/gaussians.ply
+Current location: http://localhost:7860/
+Worker exists: true/false
+Fetch response status: 200 OK (or error)
+Response headers: [...]
+✓ PLY loaded successfully!
+Buffer size: 245678 bytes
+```
+
+### 3. Check Loading Indicator
+
+The loading message in the viewer will update to show:
+- `"Loading 3D model..."` → Initial state
+- `"Fetching PLY from: /file=..."` → Fetch started
+- `"Processing 245.6 KB..."` → File loaded, processing
+- `"Error: [message]"` (in red) → Something went wrong
+
+## Common Issues and Fixes
+
+### Issue 1: File Not Found (404 Error)
+
+**Symptoms:**
+- Debug Info shows: `File exists: True`
+- Console shows: `HTTP 404: Not Found`
+
+**Problem:** Gradio's file serving path is incorrect
+
+**Fix:** Update the PLY URL format in `_generate_and_filter_outputs()`:
+```python
+# Try different URL formats:
+ply_url = f"/file={ply_path}"                    # Current
+# OR
+ply_url = ply_path                               # Direct path
+# OR  
+ply_url = f"/file/{Path(ply_path).name}"        # Just filename
+```
+
+### Issue 2: Worker Not Initialized
+
+**Symptoms:**
+- Console shows: `Worker exists: false`
+- Loading shows: `"Error: Viewer worker not ready"`
+
+**Problem:** viewer.js didn't initialize properly
+
+**Possible causes:**
+1. **viewer.js file is empty or corrupt**
+   - Check: `ls -lh viewer.js` should show ~51KB
+   - Fix: Re-download from GitHub
+
+2. **viewer.js has syntax errors**
+   - Check browser console for JavaScript errors
+   - Fix: Verify file integrity
+
+3. **Gradio HTML component limitations**
+   - The embedded script might be too large
+   - Fix: Serve viewer.js as a static file instead of embedding
+
+### Issue 3: Stuck on "Loading 3D model..."
+
+**Symptoms:**
+- No console logs appear
+- Loading message never changes
+
+**Problem:** JavaScript not executing
+
+**Check:**
+1. Is the viewer HTML actually being rendered?
+   - Inspect the `out_viewer` component in browser DevTools
+   - Should see `<canvas id="canvas">`, scripts, etc.
+
+2. Are there Content Security Policy (CSP) errors?
+   - Check console for CSP violations
+   - Gradio might be blocking inline scripts
+
+### Issue 4: CORS Error
+
+**Symptoms:**
+- Console shows: `CORS policy: No 'Access-Control-Allow-Origin'`
+
+**Problem:** Cross-origin resource sharing blocked
+
+**Fix:** Ensure PLY file is served from the same origin as the app
+
+## Quick Diagnosis Checklist
+
+Run through these checks in order:
+
+- [ ] **Debug Info shows `File exists: True`**
+  - ✓ File was created successfully
+  - ✗ Check `generate_3d_head()` function
+
+- [ ] **Console shows `Worker exists: true`**
+  - ✓ viewer.js loaded and initialized
+  - ✗ Check viewer.js file and embedding
+
+- [ ] **Console shows fetch starting**
+  - ✓ Script is executing
+  - ✗ Check for JavaScript errors earlier in console
+
+- [ ] **Console shows `200 OK` response**
+  - ✓ File is accessible
+  - ✗ Check PLY URL format and Gradio file serving
+
+- [ ] **Console shows buffer size**
+  - ✓ File downloaded successfully
+  - ✗ Check fetch error message
+
+- [ ] **Loading indicator disappears**
+  - ✓ Everything works!
+  - ✗ Check worker message passing
+
+## Alternative Approach: Static File Serving
+
+If embedding doesn't work, serve files statically:
+
+```python
+# In app.py, after imports:
+import gradio as gr
+
+# Setup static file serving
+gr.set_static_paths(paths=["./outputs"])
+
+# Then in create_splat_viewer_html():
+def create_splat_viewer_html(ply_url: str) -> str:
+    # Use external script tag instead of embedding
+    return f"""
+<div id="splat-viewer-container" style="...">
+    <canvas id="canvas"></canvas>
+    ...
+</div>
+<script src="/file/viewer.js"></script>
+<script>
+    // Load PLY
+    fetch('{ply_url}')...
+</script>
+"""
+```
+
+## Testing Locally
+
+To test the viewer independently:
+
+```bash
+# 1. Generate a PLY file
+python app.py
+# Upload image, click generate
+
+# 2. Find the PLY path from Debug Info
+# Example: outputs/splats/xxxxx/gaussians.ply
+
+# 3. Test direct file access
+curl http://localhost:7860/file=outputs/splats/xxxxx/gaussians.ply
+# Should download the PLY file
+
+# 4. Test viewer.js loading
+curl http://localhost:7860/file/viewer.js
+# Should return JavaScript code
+```
+
+## Getting Help
+
+When reporting issues, provide:
+1. **Debug Info** textbox contents
+2. **Browser console** logs (full "=== PLY Loading Debug ===" section)
+3. **Browser** and version
+4. **File size** from `ls -lh outputs/splats/xxxxx/gaussians.ply`
+5. Any **error messages** shown in red
+
+## Next Steps
+
+After identifying the issue:
+1. Fix the PLY URL format if it's a 404
+2. Re-download viewer.js if it's corrupt
+3. Switch to static file serving if embedding fails
+4. Check Gradio documentation for HTML component limitations
+
+---
+
+**Current Status**: Debugging mode enabled ✓  
+**Debug Info**: Visible in UI  
+**Console Logging**: Verbose  
+**Error Display**: In viewer and console
+

app.py

@@ -351,31 +351,51 @@ def create_splat_viewer_html(ply_url: str) -> str:
     // Auto-load the PLY file when viewer is ready
     setTimeout(function() {{
         const plyUrl = '{ply_url}';
-        console.log('Loading PLY from:', plyUrl);
         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;
+        
         fetch(plyUrl)
             .then(response => {{
-                if (!response.ok) throw new Error('Failed to load PLY file');
+                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, size:', buffer.byteLength, 'bytes');
-                if (loadingDiv) loadingDiv.textContent = 'Processing...';
+                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
-                const event = new MessageEvent('message', {{ data: {{ ply: buffer }} }});
                 if (window.worker) {{
+                    console.log('Dispatching to worker...');
+                    const event = new MessageEvent('message', {{ data: {{ ply: buffer }} }});
                     window.worker.dispatchEvent(event);
-                    if (loadingDiv) loadingDiv.style.display = 'none';
+                    setTimeout(() => {{
+                        if (loadingDiv) loadingDiv.style.display = 'none';
+                    }}, 2000);
                 }} else {{
-                    console.error('Worker not initialized');
-                    if (loadingDiv) loadingDiv.textContent = 'Error: Viewer not ready';
+                    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);
-                if (loadingDiv) loadingDiv.textContent = 'Error loading model';
+                console.error('✗ Error loading PLY:', error);
+                console.error('Error stack:', error.stack);
+                loadingDiv.textContent = 'Error: ' + error.message;
+                loadingDiv.style.color = '#ff4444';
             }});
     }}, 1000);
 </script>
@@ -402,7 +422,10 @@ def main():
             ply_url = f"/file={ply_path}"
             viewer_html = create_splat_viewer_html(ply_url)
             
-            return viewer_html, output_path, turntable_path, ply_path
+            # Debug info showing the paths
+            debug_info = f"PLY Path: {ply_path}\nPLY URL: {ply_url}\nFile exists: {Path(ply_path).exists()}"
+            
+            return viewer_html, output_path, turntable_path, ply_path, debug_info
 
         gr.Markdown("## FaceLift: Single Image 3D Face Reconstruction.")
         
@@ -431,6 +454,7 @@ def main():
 
             with gr.Column(scale=1):
                 out_viewer = gr.HTML(label="🎮 Interactive 3D Viewer")
+                out_debug = gr.Textbox(label="🔍 Debug Info", lines=3, visible=True)
                 out_recon = gr.Image(label="3D Reconstruction Views")
                 out_video = gr.PlayableVideo(label="Turntable Animation (360° View)", height=400)
                 out_ply   = gr.File(label="Download 3D Model (.ply)")
@@ -444,7 +468,7 @@ def main():
         run_btn.click(
             fn=_generate_and_filter_outputs,
             inputs=[in_image, auto_crop, guidance, seed, steps],
-            outputs=[out_viewer, out_recon, out_video, out_ply],
+            outputs=[out_viewer, out_recon, out_video, out_ply, out_debug],
         )
 
         demo.queue(max_size=10)