Update demo

VIEWER_DEBUG.md

@@ -0,0 +1,94 @@
+# Viewer Debugging Guide
+
+The viewer now has extensive console logging to help diagnose issues.
+
+## How to Debug
+
+1. **Run the app:**
+   ```bash
+   python app.py
+   ```
+
+2. **Open the browser console:**
+   - Chrome/Edge: Press `F12` or `Ctrl+Shift+J` (Windows) / `Cmd+Option+J` (Mac)
+   - Firefox: Press `F12` or `Ctrl+Shift+K` (Windows) / `Cmd+Option+K` (Mac)
+   - Safari: Enable Developer menu in Preferences, then press `Cmd+Option+C`
+
+3. **Check the Console tab** and look for these key messages:
+
+## Expected Console Messages
+
+### On Page Load:
+```
+DOM already loaded, initializing viewer in 100ms
+initViewer called, isInitialized: false
+Container found: <div...>
+Canvas created and added
+WebGL2 context created
+Worker created
+Starting render loop
+✓ Viewer initialized successfully
+Rendering black screen, waiting for data...  (repeats every 60 frames)
+```
+
+### After Generating a Model:
+```
+=== Starting PLY load ===
+URL: /gradio_api/file=outputs/splats/xxxxx/xxxxx.ply?v=xxxxx
+Initialized? true
+Worker? true
+Fetching: /gradio_api/file=...
+Response status: 200
+ArrayBuffer size: XXXXX bytes
+Magic bytes: Uint8Array(4) [112, 108, 121, 10]  (this is correct for PLY files)
+PLY file sent to worker
+
+[Worker] Message received: {ply: ArrayBuffer}
+[Worker] Processing PLY buffer...
+[Worker] Buffer processed, vertex count: XXXXX
+[Worker] Generating texture...
+[Worker] Texture generated and sent
+
+Worker message received: {texdata: Uint32Array, ...}
+Texture data: {texwidth: 2048, texheight: XXX, vertexCount: XXXXX}
+✓ Successfully loaded XXXXX gaussians
+
+First render with XXXXX vertices
+```
+
+## Common Issues and Solutions
+
+### Issue 1: "Container #splat-container not found"
+**Problem:** The viewer container isn't in the DOM yet
+**Solution:** This should auto-retry, but if it persists, check that the Gradio interface loaded correctly
+
+### Issue 2: "Failed to load: 404"
+**Problem:** The PLY file URL is incorrect or the file doesn't exist
+**Solution:** Check that the generation completed successfully and the file was saved
+
+### Issue 3: Worker doesn't receive message
+**Problem:** The fetch failed or the ArrayBuffer is empty
+**Solution:** Check the ArrayBuffer size in the console - it should be > 0
+
+### Issue 4: Worker error during processing
+**Problem:** The PLY file format might be incompatible
+**Solution:** Check the magic bytes - should be [112, 108, 121, 10] which is "ply\n"
+
+### Issue 5: Black screen but no errors
+**Problem:** vertexCount might be 0 or rendering issue
+**Solution:** Check that "Successfully loaded X gaussians" appears with X > 0
+
+## Quick Test
+
+Run this in the browser console after the page loads:
+
+```javascript
+console.log('Testing viewer state:');
+console.log('Window function:', typeof window.__load_splat__);  // should be "function"
+console.log('Container exists:', !!document.getElementById('splat-container'));  // should be true
+```
+
+## Next Steps
+
+Copy the console output and we can diagnose the exact issue!
+

app.py

@@ -527,10 +527,20 @@ void main () {
       self.postMessage({ texdata, texwidth, texheight, vertexCount }, [texdata.buffer]);
     }
     self.onmessage = (e) => {
+      console.log('[Worker] Message received:', e.data);
       if (e.data.ply) {
-        buffer = processPlyBuffer(e.data.ply);
-        vertexCount = Math.floor(buffer.byteLength / rowLength);
-        generateTexture();
+        try {
+          console.log('[Worker] Processing PLY buffer...');
+          buffer = processPlyBuffer(e.data.ply);
+          vertexCount = Math.floor(buffer.byteLength / rowLength);
+          console.log('[Worker] Buffer processed, vertex count:', vertexCount);
+          console.log('[Worker] Generating texture...');
+          generateTexture();
+          console.log('[Worker] Texture generated and sent');
+        } catch (error) {
+          console.error('[Worker] Error:', error);
+          console.error('[Worker] Stack:', error.stack);
+        }
       }
     };
     \`;
@@ -561,17 +571,32 @@ void main () {
   };
 
   function initViewer() {
-    if (isInitialized) return;
+    console.log('initViewer called, isInitialized:', isInitialized);
+    if (isInitialized) {
+      console.log('Already initialized, skipping');
+      return;
+    }
+    
     const container = document.getElementById('splat-container');
-    if (!container) { console.error('Container not found'); setTimeout(initViewer, 100); return; }
+    if (!container) { 
+      console.error('Container #splat-container not found, retrying in 100ms'); 
+      setTimeout(initViewer, 100); 
+      return; 
+    }
     
+    console.log('Container found:', container);
     canvas = document.createElement('canvas');
     canvas.id = 'gs-canvas';
     container.innerHTML = '';
     container.appendChild(canvas);
+    console.log('Canvas created and added');
     
     gl = canvas.getContext('webgl2', { antialias: false });
-    if (!gl) { console.error('WebGL2 not supported'); return; }
+    if (!gl) { 
+      console.error('WebGL2 not supported'); 
+      return; 
+    }
+    console.log('WebGL2 context created');
     
     const vShader = gl.createShader(gl.VERTEX_SHADER);
     gl.shaderSource(vShader, vertexShaderSource);
@@ -658,61 +683,111 @@ void main () {
       viewMatrix = invert4(inv);
     }, { passive: false });
     
+    let renderCount = 0;
     function render() {
       if (vertexCount > 0) {
+        if (renderCount === 0) console.log('First render with', vertexCount, 'vertices');
         gl.uniformMatrix4fv(u_view, false, viewMatrix);
         gl.clear(gl.COLOR_BUFFER_BIT);
         gl.drawArraysInstanced(gl.TRIANGLE_FAN, 0, 4, vertexCount);
+        renderCount++;
       } else {
+        if (renderCount % 60 === 0) console.log('Rendering black screen, waiting for data...');
         gl.clearColor(0, 0, 0, 1);
         gl.clear(gl.COLOR_BUFFER_BIT);
+        renderCount++;
       }
       requestAnimationFrame(render);
     }
+    console.log('Starting render loop');
     render();
     
     worker = createWorker();
+    console.log('Worker created');
+    
     worker.onmessage = (e) => {
+      console.log('Worker message received:', e.data);
       if (e.data.texdata) {
         const { texdata, texwidth, texheight, vertexCount: vc } = e.data;
+        console.log('Texture data:', {texwidth, texheight, vertexCount: vc, textureSize: texdata.byteLength});
         vertexCount = vc;
+        
         gl.bindTexture(gl.TEXTURE_2D, texture);
         gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
         gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
         gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.NEAREST);
         gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.NEAREST);
         gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA32UI, texwidth, texheight, 0, gl.RGBA_INTEGER, gl.UNSIGNED_INT, texdata);
+        
         const depthIndex = new Uint32Array(vc);
         for (let i = 0; i < vc; i++) depthIndex[i] = i;
         gl.bindBuffer(gl.ARRAY_BUFFER, indexBuffer);
         gl.bufferData(gl.ARRAY_BUFFER, depthIndex, gl.STATIC_DRAW);
-        console.log('Loaded', vc, 'gaussians');
+        
+        console.log('✓ Successfully loaded', vc, 'gaussians');
       }
     };
     
+    worker.onerror = (error) => {
+      console.error('Worker error:', error);
+    };
+    
     isInitialized = true;
-    console.log('Viewer initialized');
+    console.log('✓ Viewer initialized successfully');
   }
 
   async function loadPlyFile(url) {
     try {
-      console.log('Loading PLY from:', url);
-      if (!isInitialized) initViewer();
-      if (!worker) { console.error('Worker not initialized'); return; }
+      console.log('=== Starting PLY load ===');
+      console.log('URL:', url);
+      console.log('Initialized?', isInitialized);
+      console.log('Worker?', !!worker);
+      
+      if (!isInitialized) {
+        console.log('Initializing viewer...');
+        initViewer();
+        // Wait for initialization
+        await new Promise(resolve => setTimeout(resolve, 500));
+      }
+      
+      if (!worker) { 
+        console.error('Worker not initialized after init attempt'); 
+        return; 
+      }
+      
+      console.log('Fetching:', url);
       const response = await fetch(url);
+      console.log('Response status:', response.status);
+      console.log('Response headers:', [...response.headers.entries()]);
+      
       if (!response.ok) throw new Error('Failed to load: ' + response.status);
+      
       const arrayBuffer = await response.arrayBuffer();
+      console.log('ArrayBuffer size:', arrayBuffer.byteLength, 'bytes');
+      
+      // Check PLY magic bytes
+      const magic = new Uint8Array(arrayBuffer.slice(0, 4));
+      console.log('Magic bytes:', magic, 'Expected: [112, 108, 121, 10] for "ply\\n"');
+      
       worker.postMessage({ ply: arrayBuffer }, [arrayBuffer]);
       console.log('PLY file sent to worker');
     } catch (error) {
-      console.error('Error loading PLY:', error);
+      console.error('=== Error loading PLY ===');
+      console.error('Error:', error);
+      console.error('Stack:', error.stack);
     }
   }
 
   window.__load_splat__ = loadPlyFile;
+  
+  // Initialize on load
   if (document.readyState === 'loading') {
-    document.addEventListener('DOMContentLoaded', () => setTimeout(initViewer, 100));
+    document.addEventListener('DOMContentLoaded', () => {
+      console.log('DOM loaded, initializing viewer in 100ms');
+      setTimeout(initViewer, 100);
+    });
   } else {
+    console.log('DOM already loaded, initializing viewer in 100ms');
     setTimeout(initViewer, 100);
   }
 })();