Update app.py

app.py

@@ -1,314 +1,53 @@
 """
-Single-file Gradio app: .vox + .gltf/.glb viewer using a WebGL (three.js) embedded viewer.
+Gradio app: .vox → .glb conversion + built-in Model3D viewer.
 
-Run: python gradio_vox_gltf_viewer.py
-
-Dependencies:
-    pip install gradio numpy pyvox
-
-Notes:
-- .vox files are parsed server-side with pyvox and serialized to JSON (positions + palette indices/colors).
-- The HTML viewer (three.js) receives the JSON payload and constructs an InstancedMesh of cubes for fast rendering.
-- .gltf/.glb files are passed through to the client and loaded with GLTFLoader.
-- This is a minimal starter; performance and features (lighting, orbit controls options, palette editing, LOD) can be added.
+Now we no longer use HTML + WebGL. This is simpler, more reliable, and fully compatible with Gradio 5+.
 """
 
-import base64
-import json
-import io
-import os
-from pathlib import Path
-from typing import Tuple
-
 import gradio as gr
-import numpy as np
+import tempfile
+import trimesh
+from pathlib import Path
 from pyvox.parser import VoxParser
 
 
-def parse_vox_to_json(file) -> dict:
-    """Parse a .vox file (MagicaVoxel) and return a small JSON structure with positions and colors.
-
-    We'll extract voxels from the first model and transform them into two lists:
-      - positions: flat list [x0,y0,z0,x1,y1,z1,...]
-      - colors: flat list [r,g,b,a, ...] (0-255)
-
-    Keep it compact so we can send it to the client and reconstruct an InstancedMesh.
-    """
-    # pyvox expects a filename or file-like; ensure we give it a file-like with a name
-    if hasattr(file, "name") and os.path.exists(file.name):
-        vox = VoxParser(file.name).parse()
-    else:
-        # save to a temporary buffer
-        data = file.read()
-        buf = io.BytesIO(data)
-        # pyvox parser needs a real filename to determine extension in some versions; work around by using parse_from_bytes
-        # but to keep compatibility, write to a temp file
-        tmp_path = Path("_tmp_upload.vox")
-        tmp_path.write_bytes(data)
-        vox = VoxParser(str(tmp_path)).parse()
-        try:
-            tmp_path.unlink()
-        except Exception:
-            pass
-
+def vox_to_glb(file_path):
+    vox = VoxParser(file_path).parse()
     model = vox.models[0]
-    voxels = model.voxels  # list of Voxel(x,y,z,c)
-
-    positions = []
-    colors = []
-
-    # MagicaVoxel palette: vox.palette is a list of 256 RGBA ints or tuples depending on pyvox version
-    palette = None
-    try:
-        palette = vox.palette
-    except Exception:
-        palette = None
+    voxels = model.voxels
 
+    cubes = []
     for v in voxels:
-        positions.extend([int(v.x), int(v.y), int(v.z)])
-        # color index (1-based in MagicaVoxel). pyvox Voxel.c is 1..n
-        ci = int(v.c) - 1
-        if palette is not None and 0 <= ci < len(palette):
-            col = palette[ci]
-            # palette entries may be ints or tuples
-            if isinstance(col, int):
-                # ARGB or 0xAARRGGBB? We'll fallback to splitting
-                a = (col >> 24) & 0xFF
-                r = (col >> 16) & 0xFF
-                g = (col >> 8) & 0xFF
-                b = col & 0xFF
-                colors.extend([r, g, b, a])
-            else:
-                # assume tuple/list
-                if len(col) >= 4:
-                    r, g, b, a = col[:4]
-                else:
-                    r, g, b = col[:3]
-                    a = 255
-                colors.extend([int(r), int(g), int(b), int(a)])
-        else:
-            # fallback: map palette index to a color via a simple hash
-            h = (ci * 2654435761) & 0xFFFFFFFF
-            r = (h >> 16) & 0xFF
-            g = (h >> 8) & 0xFF
-            b = h & 0xFF
-            colors.extend([r, g, b, 255])
-
-    bbox = {
-        "size_x": int(model.size.x),
-        "size_y": int(model.size.y),
-        "size_z": int(model.size.z),
-    }
-
-    return {"positions": positions, "colors": colors, "bbox": bbox}
-
-
-def file_to_dataurl(file) -> Tuple[str, str]:
-    """Return (data_url, mime) for uploaded file to pass to client (for glTF).
-
-    We'll base64 encode the file and produce a data URL.
-    """
-    name = getattr(file, "name", None)
-    content = file.read() if hasattr(file, "read") else file
-    if isinstance(content, str):
-        content = content.encode("utf-8")
-
-    if name is None:
-        # try to sniff from start of bytes
-        ext = ".bin"
-    else:
-        ext = Path(name).suffix.lower()
-
-    if ext in (".gltf", ".json"):
-        mime = "model/gltf+json"
-    elif ext == ".glb":
-        mime = "model/gltf-binary"
-    else:
-        # fallback
-        mime = "application/octet-stream"
-
-    b64 = base64.b64encode(content).decode("ascii")
-    data_url = f"data:{mime};base64,{b64}"
-    return data_url, mime
-
-
-# HTML viewer template (three.js via module imports). We'll inject a JSON payload for .vox or a data URL for glTF.
-HTML_TEMPLATE = r"""
-<!doctype html>
-<html>
-<head>
-  <meta charset="utf-8" />
-  <title>VOX / glTF Viewer</title>
-  <style>
-    html,body { height: 100%; margin: 0; }
-    #viewer { width: 100%; height: 640px; display: block; }
-  </style>
-</head>
-<body>
-  <div id="viewer"></div>
-
-  <script type="module">
-    import * as THREE from 'https://unpkg.com/three@0.153.0/build/three.module.js';
-    import { OrbitControls } from 'https://unpkg.com/three@0.153.0/examples/jsm/controls/OrbitControls.js';
-    import { GLTFLoader } from 'https://unpkg.com/three@0.153.0/examples/jsm/loaders/GLTFLoader.js';
-
-    const container = document.getElementById('viewer');
-    const width = container.clientWidth;
-    const height = container.clientHeight;
-
-    const scene = new THREE.Scene();
-    scene.background = new THREE.Color(0x111111);
-
-    const camera = new THREE.PerspectiveCamera(45, width / height, 0.1, 2000);
-    camera.position.set(100, 100, 200);
+        cube = trimesh.creation.box(extents=(1,1,1))
+        cube.apply_translation([v.x, v.y, v.z])
+        cubes.append(cube)
 
-    const renderer = new THREE.WebGLRenderer({ antialias: true });
-    renderer.setSize(width, height);
-    container.appendChild(renderer.domElement);
+    mesh = trimesh.util.concatenate(cubes)
+    tmp = tempfile.NamedTemporaryFile(suffix='.glb', delete=False)
+    mesh.export(tmp.name)
+    return tmp.name
 
-    const controls = new OrbitControls(camera, renderer.domElement);
-    controls.target.set(0, 0, 0);
-    controls.update();
 
-    const ambient = new THREE.AmbientLight(0xffffff, 0.6);
-    scene.add(ambient);
-    const dir = new THREE.DirectionalLight(0xffffff, 0.8);
-    dir.position.set(100, 100, 100);
-    scene.add(dir);
-
-    // receive payload from Python via global 'PAYLOAD'
-    // PAYLOAD: { type: 'vox'|'gltf', data: {...} }
-
-    function buildVoxScene(data) {
-      const positions = data.positions; // flat list
-      const colors = data.colors; // flat list
-
-      const n = positions.length / 3;
-      const instanceCount = n;
-
-      const box = new THREE.BoxGeometry(1, 1, 1);
-      const material = new THREE.MeshStandardMaterial({ vertexColors: true });
-
-      // InstancedMesh with instanceColor attribute
-      const mesh = new THREE.InstancedMesh(box, material, instanceCount);
-      mesh.instanceMatrix.setUsage(THREE.DynamicDrawUsage);
-
-      const colorArray = new Float32Array(instanceCount * 3);
-
-      const dummy = new THREE.Object3D();
-      for (let i = 0; i < n; i++) {
-        const x = positions[i*3 + 0];
-        const y = positions[i*3 + 1];
-        const z = positions[i*3 + 2];
-        dummy.position.set(x - data.bbox.size_x/2, y - data.bbox.size_y/2, z - data.bbox.size_z/2);
-        dummy.updateMatrix();
-        mesh.setMatrixAt(i, dummy.matrix);
-
-        // color: r,g,b,a (0..255)
-        const r = colors[i*4 + 0] / 255.0;
-        const g = colors[i*4 + 1] / 255.0;
-        const b = colors[i*4 + 2] / 255.0;
-        colorArray[i*3 + 0] = r;
-        colorArray[i*3 + 1] = g;
-        colorArray[i*3 + 2] = b;
-      }
-
-      mesh.instanceColor = new THREE.InstancedBufferAttribute(colorArray, 3);
-      scene.add(mesh);
-
-      // center camera
-      const maxDim = Math.max(data.bbox.size_x, data.bbox.size_y, data.bbox.size_z);
-      camera.position.set(maxDim * 1.2, maxDim * 1.2, maxDim * 1.2);
-      controls.target.set(0, 0, 0);
-      controls.update();
-    }
-
-    function loadGltfFromDataUrl(dataUrl) {
-      const loader = new GLTFLoader();
-      loader.parse(atob(dataUrl.split(',')[1]), '', function(gltf) {
-        scene.add(gltf.scene);
-        // center
-        const box = new THREE.Box3().setFromObject(gltf.scene);
-        const size = new THREE.Vector3(); box.getSize(size);
-        const maxDim = Math.max(size.x, size.y, size.z);
-        camera.position.set(maxDim * 1.2, maxDim * 1.2, maxDim * 1.2);
-        controls.target.copy(box.getCenter(new THREE.Vector3()));
-        controls.update();
-      }, function(err){ console.error(err); });
-    }
-
-    function animate() {
-      requestAnimationFrame(animate);
-      renderer.render(scene, camera);
-    }
-    animate();
-
-    // payload inserted by Python when HTML is generated
-    if (window.PAYLOAD) {
-      if (window.PAYLOAD.type === 'vox') {
-        buildVoxScene(window.PAYLOAD.data);
-      } else if (window.PAYLOAD.type === 'gltf') {
-        loadGltfFromDataUrl(window.PAYLOAD.dataUrl);
-      }
-    }
-
-    // handle resize
-    window.addEventListener('resize', () => {
-      const w = container.clientWidth; const h = container.clientHeight;
-      camera.aspect = w/h; camera.updateProjectionMatrix(); renderer.setSize(w,h);
-    });
-
-  </script>
-</body>
-</html>
-"""
-
-
-def build_html_for_vox(vox_json: dict) -> str:
-    """Return final HTML with the PAYLOAD injected as a JS global."""
-    payload = {"type": "vox", "data": vox_json}
-    # JSON must be safe inside the HTML; use json.dumps
-    injected = f"<script>window.PAYLOAD = {json.dumps(payload)};</script>"
-    html = injected + HTML_TEMPLATE
-    return html
-
-
-def build_html_for_gltf(data_url: str) -> str:
-    payload_script = f"<script>window.PAYLOAD = {{type:'gltf', dataUrl: '{data_url}'}};</script>"
-    html = payload_script + HTML_TEMPLATE
-    return html
-
-
-def viewer_from_upload(file) -> str:
-    """Main Gradio callback: accept uploaded file, return HTML string with viewer."""
+def handle_upload(file):
     if file is None:
-        return "<div style='color:#eee'>No file uploaded yet.</div>"
-
-    ext = Path(getattr(file, 'name', '')).suffix.lower()
+        return None
+    ext = Path(file.name).suffix.lower()
     if ext == '.vox':
-        vox_json = parse_vox_to_json(file)
-        return build_html_for_vox(vox_json)
-    elif ext in ('.gltf', '.glb'):
-        data_url, mime = file_to_dataurl(file)
-        return build_html_for_gltf(data_url)
+        return vox_to_glb(file.name)
+    elif ext in ['.glb', '.gltf']:
+        return file.name
     else:
-        return f"<div style='color:#f88'>Unsupported extension: {ext}. Upload .vox, .gltf or .glb</div>"
+        return None
 
 
-# Build Gradio interface
-with gr.Blocks(css="""
-#viewer { border: 1px solid #444 }
-""") as demo:
-    gr.Markdown("# VOX + glTF Viewer\nUpload a `.vox` (MagicaVoxel) or `.gltf` / `.glb` file and preview it in a Three.js WebGL viewer.")
+with gr.Blocks() as demo:
+    gr.Markdown("# VOX / GLB Viewer\nUpload a `.vox` or `.glb/.gltf` file to preview.")
+    upload = gr.File(file_types=['.vox','.glb','.gltf'], label="Upload File")
+    viewer = gr.Model3D(label="Preview")
 
-    with gr.Row():
-        uploader = gr.File(label="Upload .vox / .gltf / .glb", file_types=['.vox', '.gltf', '.glb'])
-        html_out = gr.HTML("<div style='color:#888'>Upload a file to preview</div>")
-
-    uploader.change(viewer_from_upload, inputs=[uploader], outputs=[html_out])
-
-    gr.Markdown("---\nNotes: Viewer uses InstancedMesh for voxel rendering; large scenes may be heavy. Consider downsampling or LOD.")
+    upload.change(handle_upload, upload, viewer)
 
 
 if __name__ == '__main__':
     demo.launch()
+