Create app.py

app.py

@@ -0,0 +1,314 @@
+"""
+Single-file Gradio app: .vox + .gltf/.glb viewer using a WebGL (three.js) embedded 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.
+"""
+
+import base64
+import json
+import io
+import os
+from pathlib import Path
+from typing import Tuple
+
+import gradio as gr
+import numpy as np
+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
+
+    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
+
+    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/[email protected]/build/three.module.js';
+    import { OrbitControls } from 'https://unpkg.com/[email protected]/examples/jsm/controls/OrbitControls.js';
+    import { GLTFLoader } from 'https://unpkg.com/[email protected]/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);
+
+    const renderer = new THREE.WebGLRenderer({ antialias: true });
+    renderer.setSize(width, height);
+    container.appendChild(renderer.domElement);
+
+    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."""
+    if file is None:
+        return "<div style='color:#eee'>No file uploaded yet.</div>"
+
+    ext = Path(getattr(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)
+    else:
+        return f"<div style='color:#f88'>Unsupported extension: {ext}. Upload .vox, .gltf or .glb</div>"
+
+
+# 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.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.")
+
+
+if __name__ == '__main__':
+    demo.launch()