Update app.py

app.py

@@ -7,19 +7,20 @@ import struct
 import logging
 from pathlib import Path
 from typing import Tuple
+import shutil
 
 # Configure logging
 logging.basicConfig(level=logging.INFO)
 logger = logging.getLogger(__name__)
 
 class VoxParser:
-    """Parse MagicaVoxel .vox files"""
+    """MagicaVoxel .vox file parser"""
     
     def __init__(self, file_path):
         self.file_path = file_path
         
     def parse(self) -> dict:
-        """Parse the .vox file and extract voxel data"""
+        """Parse the .vox file structure"""
         try:
             with open(self.file_path, 'rb') as f:
                 data = f.read()
@@ -102,7 +103,7 @@ class VoxParser:
         return colors
 
 class VoxToGlbConverter:
-    """Convert MagicaVoxel files to GLB format"""
+    """MagicaVoxel to GLB converter"""
     
     def __init__(self):
         self.voxel_size = 1.0
@@ -110,32 +111,29 @@ class VoxToGlbConverter:
     def vox_to_glb(self, vox_file_path: str) -> Tuple[str, str]:
         """Convert .vox file to .glb file"""
         try:
-            # Parse the .vox file
             parser = VoxParser(vox_file_path)
             voxel_data = parser.parse()
             
             if not voxel_data['voxels']:
                 return "", "No voxels found in the file"
             
-            # Create mesh from voxels
             mesh = self.create_mesh_from_voxels(voxel_data)
             
-            # Save as GLB
             output_path = str(Path(tempfile.gettempdir()) / f"converted_model.glb")
             mesh.export(output_path)
             
-            return output_path, f"Successfully converted {len(voxel_data['voxels'])} voxels to GLB format"
+            voxel_count = len(voxel_data['voxels'])
+            return output_path, f"Converted {voxel_count} voxels to GLB format"
                 
         except Exception as e:
             logger.error(f"Conversion error: {e}")
             return "", f"Error converting file: {str(e)}"
     
     def create_mesh_from_voxels(self, voxel_data: dict) -> trimesh.Trimesh:
-        """Create a trimesh from voxel data"""
+        """Create mesh from voxel data"""
         voxels = voxel_data['voxels']
         palette = voxel_data['palette']
         
-        # Group voxels by color
         color_groups = {}
         for voxel in voxels:
             color_idx = voxel['color_index']
@@ -173,64 +171,190 @@ class VoxToGlbConverter:
             return trimesh.creation.box(extents=[self.voxel_size, self.voxel_size, self.voxel_size])
 
 def process_vox_file(vox_file) -> Tuple[str, str]:
-    """Process uploaded .vox file and convert to .glb - FIXED for Error 21"""
+    """Process uploaded .vox file and convert to .glb"""
     if vox_file is None:
         return "", "Please upload a .vox file"
     
     try:
         converter = VoxToGlbConverter()
         
-        # PROPER FIX FOR ERROR 21:
-        # Create temp file and copy the actual uploaded file
-        with tempfile.NamedTemporaryFile(delete=False, suffix='.vox') as tmp_file:
-            # Get the actual file path from Gradio's file object
-            if hasattr(vox_file, 'name'):
-                real_file_path = vox_file.name
-                
-                # Verify it's a file, not a directory
-                if os.path.isfile(real_file_path):
-                    # Copy the uploaded file to temp location
-                    import shutil
-                    shutil.copy(real_file_path, tmp_file.name)
-                    temp_vox_path = tmp_file.name
-                else:
-                    return "", "Could not access uploaded file - may be a directory"
-            else:
-                return "", "Invalid file format"
-            
-            # Convert using the temp file path
-            glb_path, message = converter.vox_to_glb(temp_vox_path)
-            
-            # Clean up temp file
-            if os.path.exists(temp_vox_path):
-                os.unlink(temp_vox_path)
+        if hasattr(vox_file, 'name'):
+            real_file_path = vox_file.name
             
-            return glb_path, message
+            if os.path.isfile(real_file_path):
+                glb_path, message = converter.vox_to_glb(real_file_path)
+                return glb_path, message
+            else:
+                return "", "Could not access uploaded file"
+        else:
+            return "", "Invalid file format"
             
     except Exception as e:
         return "", f"Error: {str(e)}"
 
+# GLB Preview Component
+def create_glb_preview(glb_file):
+    """Create HTML preview for GLB file"""
+    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
+    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", theme=gr.themes.Soft()) as app:
+    with gr.Blocks(title="VOX to GLB Converter with Preview", theme=gr.themes.Soft()) as app:
         gr.Markdown("""
-        # 🧊 MagicaVoxel to GLB Converter
-        Convert your MagicaVoxel `.vox` files to `.glb` format
+        # 🧊 MagicaVoxel VOX to GLB Converter with 3D Preview
+        Convert your MagicaVoxel `.vox` files to `.glb` format and preview them in 3D
         """)
         
         with gr.Row():
             with gr.Column():
                 vox_input = gr.File(label="Upload VOX File", file_types=[".vox"], file_count="single")
-                convert_btn = gr.Button("Convert to GLB", variant="primary")
+                convert_btn = gr.Button("🔄 Convert to GLB", variant="primary")
                 status_output = gr.Textbox(label="Status", interactive=False, placeholder="Ready...")
                 
             with gr.Column():
                 glb_output = gr.File(label="Download GLB File", file_types=[".glb"], interactive=False)
         
+        # 3D Preview Section
+        gr.Markdown("### 🎮 3D Preview")
+        preview_html = gr.HTML(label="GLB Preview")
+        
+        # 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
+            else:
+                return None, message, "<p>❌ Conversion failed - no preview available</p>"
+        
         convert_btn.click(
-            fn=process_vox_file,
+            fn=convert_with_preview,
             inputs=[vox_input],
-            outputs=[glb_output, status_output]
+            outputs=[glb_output, status_output, preview_html]
         )
+        
+        gr.Markdown("""
+        ### 📋 How to Use
+        1. Upload your `.vox` file
+        2. Click "Convert to GLB"
+        3. Download the GLB file
+        4. Preview your voxel model in 3D above
+        """)
     
     return app