Update app.py

app.py

@@ -192,126 +192,6 @@ def process_vox_file(vox_file) -> Tuple[str, str]:
     except Exception as e:
         return "", f"Error: {str(e)}"
 
-def create_glb_preview(glb_file):
-    """Create HTML preview for GLB file - FIXED SYNTAX ERROR"""
-    if glb_file is None:
-        return "<p>No GLB file to preview</p>"
-    
-    if hasattr(glb_file, 'name'):
-        glb_path = glb_file.name
-    else:
-        glb_path = str(glb_file)
-    
-    if not os.path.exists(glb_path):
-        return "<p>GLB file not found</p>"
-    
-    # Create HTML with Three.js viewer - FIXED THE SYNTAX ERROR
-    html_content = f"""
-    <div style="width: 100%; height: 400px; position: relative; background: #1a1a1a; border-radius: 8px; overflow: hidden;">
-        <div id="preview-container" style="width: 100%; height: 100%;"></div>
-        <div style="position: absolute; top: 10px; left: 10px; color: white; font-size: 12px; background: rgba(0,0,0,0.7); padding: 5px 10px; border-radius: 4px;">
-            🎮 Drag to rotate • Scroll to zoom • Right-click to pan
-        </div>
-    </div>
-    
-    <script src="https://cdn.jsdelivr.net/npm/[email protected]/build/three.min.js"></script>
-    <script src="https://cdn.jsdelivr.net/npm/[email protected]/examples/js/controls/OrbitControls.js"></script>
-    <script src="https://cdn.jsdelivr.net/npm/[email protected]/examples/js/loaders/GLTFLoader.js"></script>
-    
-    <script>
-        // Initialize Three.js scene
-        const container = document.getElementById('preview-container');
-        const scene = new THREE.Scene();
-        scene.background = new THREE.Color(0x2a2a2a);
-        
-        const camera = new THREE.PerspectiveCamera(75, container.clientWidth / container.clientHeight, 0.1, 1000);
-        camera.position.set(5, 5, 5);
-        
-        const renderer = new THREE.WebGLRenderer({{ antialias: true }});
-        renderer.setSize(container.clientWidth, container.clientHeight);
-        renderer.setPixelRatio(window.devicePixelRatio);
-        renderer.shadowMap.enabled = true;
-        renderer.shadowMap.type = THREE.PCFSoftShadowMap;
-        container.appendChild(renderer.domElement);
-        
-        // Controls
-        const controls = new THREE.OrbitControls(camera, renderer.domElement);
-        controls.enableDamping = true;
-        controls.dampingFactor = 0.05;
-        controls.target.set(0, 0, 0);
-        
-        // Lights
-        const ambientLight = new THREE.AmbientLight(0xffffff, 0.6);
-        scene.add(ambientLight);
-        
-        const directionalLight = new THREE.DirectionalLight(0xffffff, 0.8);
-        directionalLight.position.set(10, 10, 10);
-        directionalLight.castShadow = true;
-        scene.add(directionalLight);
-        
-        // Grid helper
-        const gridHelper = new THREE.GridHelper(20, 20, 0x444444, 0x333333);
-        scene.add(gridHelper);
-        
-        // Load GLB file
-        const loader = new THREE.GLTFLoader();
-        const glbPath = '{glb_path}';
-        
-        loader.load(
-            glbPath,
-            function (gltf) {{
-                const model = gltf.scene;
-                
-                // Center and scale the model
-                const box = new THREE.Box3().setFromObject(model);
-                const center = box.getCenter(new THREE.Vector3());
-                const size = box.getSize(new THREE.Vector3());
-                
-                // Center the model
-                model.position.sub(center);
-                
-                // Auto-scale to fit view
-                const maxDim = Math.max(size.x, size.y, size.z);
-                const scale = 10 / maxDim;
-                model.scale.multiplyScalar(scale);
-                
-                scene.add(model);
-                
-                // Auto-rotate camera
-                function animate() {{
-                    requestAnimationFrame(animate);
-                    controls.update();
-                    
-                    // Gentle auto-rotation
-                    const time = Date.now() * 0.001;
-                    camera.position.x = Math.cos(time * 0.1) * 8;
-                    camera.position.z = Math.sin(time * 0.1) * 8;
-                    camera.lookAt(0, 0, 0);
-                    
-                    renderer.render(scene, camera);
-                }}
-                animate();
-            }},
-            function (progress) {{
-                console.log('Loading:', progress);
-            }},
-            function (error) {{
-                console.error('Error loading GLB:', error);
-                container.innerHTML = '<p style="color: white; text-align: center; padding: 20px;">Error loading GLB file</p>';
-            }}
-        );
-        
-        // Handle resize
-        window.addEventListener('resize', function() {{
-            camera.aspect = container.clientWidth / container.clientHeight;
-            camera.updateProjectionMatrix();
-            renderer.setSize(container.clientWidth, container.clientHeight);
-        }});
-    </script>
-    """
-    
-    return html_content
-
 def create_gradio_interface():
     with gr.Blocks(title="VOX to GLB Converter with Preview", theme=gr.themes.Soft()) as app:
         gr.Markdown("""
@@ -328,23 +208,33 @@ def create_gradio_interface():
             with gr.Column():
                 glb_output = gr.File(label="Download GLB File", file_types=[".glb"], interactive=False)
         
-        # 3D Preview Section
+        # 3D Preview Section - Using Gradio's built-in 3D viewer
         gr.Markdown("### 🎮 3D Preview")
-        preview_html = gr.HTML(label="GLB Preview")
+        
+        # Use Gradio's native Model3D component for GLB files
+        model_3d = gr.Model3D(
+            label="GLB Preview",
+            height=400,
+            camera_radius=10.0,
+            camera_center=(0, 0, 0),
+            zoom_speed=1.0,
+            pan_speed=2.0,
+            rotate_speed=0.8,
+            interactive=True
+        )
         
         # Connect conversion to preview
         def convert_with_preview(vox_file):
             glb_path, message = process_vox_file(vox_file)
-            if glb_path:
-                preview = create_glb_preview(glb_path)
-                return glb_path, message, preview
+            if glb_path and os.path.exists(glb_path):
+                return glb_path, message, glb_path  # Return path for both file and 3D viewer
             else:
-                return None, message, "<p>❌ Conversion failed - no preview available</p>"
+                return None, message, None
         
         convert_btn.click(
             fn=convert_with_preview,
             inputs=[vox_input],
-            outputs=[glb_output, status_output, preview_html]
+            outputs=[glb_output, status_output, model_3d]
         )
         
         gr.Markdown("""