Spaces:

myhzht
/

Navigator

Running

App Files Files Community

myhzht commited on Oct 1

Commit

57399bc

verified ·

1 Parent(s): ffc67ff

Upload 2 files

Browse files

Files changed (2) hide show

index.html +485 -0
style.css +28 -0

index.html ADDED Viewed

	@@ -0,0 +1,485 @@

+<!DOCTYPE html>
+<html>
+<head>
+    <title>Hunyuan World Navigator</title>
+    <style>
+        body {
+            margin: 0;
+            font-family: Arial, sans-serif;
+            background: #1a1a1a;
+            color: white;
+            text-align: center;
+        }
+        #header {
+            padding: 20px;
+            background: #282828;
+            border-bottom: 1px solid #444;
+        }
+        #header h1 {
+            margin: 0 0 10px 0;
+            font-size: 2em;
+        }
+        #header p {
+            margin: 0 0 20px 0;
+            color: #ccc;
+        }
+        #header a {
+            color: #61dafb;
+            text-decoration: none;
+        }
+        #header a:hover {
+            text-decoration: underline;
+        }
+        #examples-container {
+            display: flex;
+            flex-wrap: wrap;
+            justify-content: center;
+            padding: 20px;
+            gap: 20px;
+            background: #222;
+        }
+        .example-card {
+            background: #333;
+            border-radius: 8px;
+            overflow: hidden;
+            width: 200px;
+            cursor: pointer;
+            transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
+            box-shadow: 0 4px 8px rgba(0,0,0,0.2);
+        }
+        .example-card:hover {
+            transform: scale(1.05);
+            box-shadow: 0 8px 16px rgba(0,0,0,0.3);
+        }
+        .example-card img {
+            width: 100%;
+            height: 120px;
+            object-fit: cover;
+            display: block;
+        }
+        .example-card p {
+            margin: 0;
+            padding: 15px;
+            font-weight: bold;
+        }
+        #viewer-container {
+            position: relative;
+            width: 100%;
+            height: 65vh;
+        }
+        canvas {
+            display: block;
+            width: 100%;
+            height: 100%;
+        }
+        #upload-container {
+            margin-top: 15px;
+        }
+        #file-input {
+            display: none;
+        }
+        .upload-btn {
+            background: #4CAF50;
+            color: white;
+            padding: 10px 15px;
+            border: none;
+            border-radius: 4px;
+            cursor: pointer;
+            font-size: 16px;
+        }
+        .upload-btn:hover {
+            background: #45a049;
+        }
+        #loading {
+            display: none; /* Hidden by default */
+            padding: 15px;
+        }
+        #loading-text {
+            color: #aaa;
+            font-size: 18px;
+            margin-bottom: 10px;
+        }
+        #progress-container {
+            width: 80%;
+            max-width: 400px;
+            margin: 0 auto;
+            background-color: #555;
+            border-radius: 5px;
+            overflow: hidden;
+            display: none; /* Hidden by default, shown for web loads */
+        }
+        #progress-bar {
+            width: 0%;
+            height: 20px;
+            background-color: #4CAF50;
+            /* Smoother transition for the bar */
+            transition: width 0.2s ease-out;
+        }
+        #controls {
+            position: absolute;
+            top: 10px;
+            left: 10px;
+            z-index: 10;
+        }
+        .control-btn {
+            padding: 8px 12px;
+            margin-right: 5px;
+            border: none;
+            border-radius: 4px;
+            cursor: pointer;
+            background: rgba(85, 85, 85, 0.8);
+            color: white;
+        }
+        .control-btn:hover {
+            background: rgba(102, 102, 102, 0.9);
+        }
+        #instructions {
+            position: absolute;
+            bottom: 10px;
+            left: 10px;
+            color: white;
+            background: rgba(0,0,0,0.5);
+            padding: 10px;
+            border-radius: 5px;
+            font-size: 14px;
+            z-index: 10;
+        }
+    </style>
+</head>
+<body>
+    <div id="header">
+        <h1>Hunyuan World Navigator</h1>
+        <p>
+            <a href="https://huggingface.co/tencent/HunyuanWorld-1" target="_blank" rel="noopener noreferrer">HunyuanWorld-1 on Hugging Face</a> |
+            <a href="https://github.com/camenduru/HunyuanWorld-1.0-jupyter" target="_blank" rel="noopener noreferrer">Generate your own on Google Colab</a>
+        </p>
+        <p>Click an example below or upload your own files to begin.</p>
+        <div id="upload-container">
+            <label for="file-input" class="upload-btn">Select Custom PLY/DRC Files</label>
+            <input id="file-input" type="file" accept=".ply,.drc" multiple>
+        </div>
+    </div>
+    <div id="examples-container"></div>
+    <div id="loading">
+        <div id="loading-text">Loading...</div>
+        <div id="progress-container">
+            <div id="progress-bar"></div>
+        </div>
+    </div>
+    <div id="viewer-container">
+        <div id="controls">
+            <button id="rotate-toggle" class="control-btn">Pause Rotation</button>
+            <button id="reset-view" class="control-btn">Reset View</button>
+        </div>
+        <div id="instructions">
+            Controls: WASD to move, Mouse drag to look around
+        </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/loaders/PLYLoader.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/[email protected]/examples/js/loaders/DRACOLoader.js"></script>
+    <script>
+        // --- CACHE & DATA ---
+        const modelCache = new Map();
+        const baseURL = 'https://huggingface.co/datasets/multimodalart/HunyuanWorld-panoramas/resolve/main/';
+        const examplesData = [
+            { name: 'Cyberpunk City', previewImage: 'cyberpunk/cyberpunk.webp', files: ['cyberpunk/mesh_layer0.ply', 'cyberpunk/mesh_layer1.ply'] },
+            { name: 'European Town', previewImage: 'european/european.webp', files: ['european/mesh_layer0.ply', 'european/mesh_layer1.ply'] },
+            { name: 'Restaurant', previewImage: 'italian/italian.webp', files: ['italian/mesh_layer0.ply', 'italian/mesh_layer1.ply', 'italian/mesh_layer2.ply', 'italian/mesh_layer3.ply'] },
+            { name: 'Mountain', previewImage: 'mountain/mountain.webp', files: ['mountain/mesh_layer0.ply', 'mountain/mesh_layer1.ply'] },
+            { name: 'Windows XP', previewImage: 'wxp/wxp.webp', files: ['wxp/mesh_layer0.ply', 'wxp/mesh_layer1.ply', 'wxp/mesh_layer2.ply'] },
+            { name: 'Zelda', previewImage: 'zld/zld.webp', files: ['zld/mesh_layer0.ply', 'zld/mesh_layer1.ply'] }
+        ];
+        const examples = examplesData.map(ex => ({
+            name: ex.name,
+            previewImage: baseURL + ex.previewImage,
+            files: ex.files.map(file => baseURL + file)
+        }));
+        // --- UI & DOM ELEMENTS ---
+        const examplesContainer = document.getElementById('examples-container');
+        const loadingDiv = document.getElementById('loading');
+        const loadingText = document.getElementById('loading-text');
+        const progressContainer = document.getElementById('progress-container');
+        const progressBar = document.getElementById('progress-bar');
+        // --- UI SETUP ---
+        examples.forEach(example => {
+            const card = document.createElement('div');
+            card.className = 'example-card';
+            card.innerHTML = `<img src="${example.previewImage}" alt="${example.name}"><p>${example.name}</p>`;
+            card.addEventListener('click', () => loadExample(example));
+            examplesContainer.appendChild(card);
+        });
+        // --- THREE.JS INITIALIZATION ---
+        const viewerContainer = document.getElementById('viewer-container');
+        const scene = new THREE.Scene();
+        scene.background = new THREE.Color(0x222222);
+        const camera = new THREE.PerspectiveCamera(75, viewerContainer.clientWidth / viewerContainer.clientHeight, 0.1, 1000);
+        const renderer = new THREE.WebGLRenderer({ antialias: true });
+        renderer.setSize(viewerContainer.clientWidth, viewerContainer.clientHeight);
+        viewerContainer.appendChild(renderer.domElement);
+        // --- LOADERS ---
+        const plyLoader = new THREE.PLYLoader();
+        const dracoLoader = new THREE.DRACOLoader();
+        dracoLoader.setDecoderPath('https://cdn.jsdelivr.net/npm/[email protected]/examples/js/libs/draco/');
+        // --- MOVEMENT & CONTROL VARIABLES ---
+        const moveSpeed = 0.01;
+        const maxDistance = 0.3;
+        const keys = { w: false, a: false, s: false, d: false };
+        let isMouseDown = false;
+        let previousMousePosition = { x: 0, y: 0 };
+        let isRotating = false;
+        let animationId = null;
+        // --- SCENE HELPER FUNCTIONS ---
+        function clearScene() {
+            scene.children.slice().forEach(child => {
+                if (child instanceof THREE.Mesh) {
+                    if (child.geometry) child.geometry.dispose();
+                    if (child.material) child.material.dispose();
+                    scene.remove(child);
+                }
+            });
+        }
+        function onLoadingComplete() {
+            loadingDiv.style.display = 'none';
+            positionCamera();
+            isRotating = true;
+            document.getElementById('rotate-toggle').textContent = 'Pause Rotation';
+            if (!animationId) {
+                animate();
+            }
+        }
+        function positionCamera() {
+            scene.rotation.y = 0;
+            camera.position.set(0, 0, 0);
+            camera.quaternion.set(0, 0, 0, 1);
+            camera.lookAt(0, 0, -10);
+        }
+        // --- LOADING LOGIC ---
+        async function fetchWithProgress(url, onProgress) {
+            const response = await fetch(url);
+            if (!response.ok) throw new Error(`HTTP error! status: ${response.status} for ${url}`);
+            if (!response.body) throw new Error('Response body is null');
+            const reader = response.body.getReader();
+            const chunks = [];
+            while (true) {
+                const { done, value } = await reader.read();
+                if (done) break;
+                chunks.push(value);
+                onProgress(value.length);
+            }
+            let totalLength = chunks.reduce((acc, chunk) => acc + chunk.length, 0);
+            const buffer = new Uint8Array(totalLength);
+            let offset = 0;
+            chunks.forEach(chunk => {
+                buffer.set(chunk, offset);
+                offset += chunk.length;
+            });
+            return buffer.buffer;
+        }
+        async function loadExample(example) {
+            clearScene();
+            loadingDiv.style.display = 'block';
+            if (modelCache.has(example.name)) {
+                loadingText.textContent = 'Loading from cache...';
+                progressContainer.style.display = 'none';
+                const cachedMeshes = modelCache.get(example.name);
+                cachedMeshes.forEach(mesh => scene.add(mesh.clone()));
+                setTimeout(onLoadingComplete, 50);
+                return;
+            }
+            progressContainer.style.display = 'block';
+            progressBar.style.width = '0%';
+            loadingText.textContent = 'Calculating size...';
+            let loadedSize = 0;
+            let totalSize = 0;
+            let progressAnimationId = null;
+            try {
+                const headPromises = example.files.map(url => fetch(url, { method: 'HEAD' }));
+                const responses = await Promise.all(headPromises);
+                totalSize = responses.reduce((acc, res) => acc + Number(res.headers.get('Content-Length') || 0), 0);
+                const updateProgressUI = () => {
+                    const percent = totalSize > 0 ? (loadedSize / totalSize) * 100 : 0;
+                    progressBar.style.width = `${percent}%`;
+                    loadingText.textContent = `Downloading... ${Math.round(percent)}%`;
+                    if (loadedSize < totalSize) {
+                        progressAnimationId = requestAnimationFrame(updateProgressUI);
+                    }
+                };
+                progressAnimationId = requestAnimationFrame(updateProgressUI);
+                const onProgress = (chunkSize) => { loadedSize += chunkSize; };
+                const contentPromises = example.files.map(url => fetchWithProgress(url, onProgress));
+                const buffers = await Promise.all(contentPromises);
+                cancelAnimationFrame(progressAnimationId);
+                loadingText.textContent = `Processing files...`;
+                const newMeshes = [];
+                buffers.forEach(buffer => {
+                    const geometry = plyLoader.parse(buffer);
+                    const material = new THREE.MeshBasicMaterial({ side: THREE.DoubleSide, vertexColors: true });
+                    const mesh = new THREE.Mesh(geometry, material);
+                    mesh.rotateX(-Math.PI / 2);
+                    mesh.rotateZ(-Math.PI / 2);
+                    scene.add(mesh);
+                    newMeshes.push(mesh);
+                });
+                modelCache.set(example.name, newMeshes);
+                onLoadingComplete();
+            } catch (error) {
+                console.error('Error loading example:', error);
+                alert('Failed to load example files. Check console for details.');
+                if (progressAnimationId) cancelAnimationFrame(progressAnimationId);
+                loadingDiv.style.display = 'none';
+            }
+        }
+        document.getElementById('file-input').addEventListener('change', function(e) {
+            const files = e.target.files;
+            if (files.length === 0) return;
+            loadingDiv.style.display = 'block';
+            loadingText.textContent = 'Loading...';
+            progressContainer.style.display = 'none';
+            clearScene();
+            let loadedCount = 0;
+            const totalFiles = files.length;
+            Array.from(files).forEach(file => {
+                const reader = new FileReader();
+                reader.onload = function(event) {
+                    try {
+                        const buffer = event.target.result;
+                        let geometry;
+                        if (file.name.endsWith('.ply')) {
+                            geometry = plyLoader.parse(buffer);
+                        } else if (file.name.endsWith('.drc')) {
+                            dracoLoader.parse(buffer, (decodedGeometry) => {
+                                geometry = decodedGeometry;
+                                if (!geometry.attributes.normal) geometry.computeVertexNormals();
+                                const material = new THREE.MeshBasicMaterial({ side: THREE.DoubleSide, vertexColors: true });
+                                const mesh = new THREE.Mesh(geometry, material);
+                                mesh.rotateX(-Math.PI / 2);
+                                mesh.rotateZ(-Math.PI / 2);
+                                scene.add(mesh);
+                                loadedCount++;
+                                if (loadedCount === totalFiles) onLoadingComplete();
+                            });
+                            return;
+                        }
+                        if (geometry) {
+                            const material = new THREE.MeshBasicMaterial({ side: THREE.DoubleSide, vertexColors: true });
+                            const mesh = new THREE.Mesh(geometry, material);
+                            mesh.rotateX(-Math.PI / 2);
+                            mesh.rotateZ(-Math.PI / 2);
+                            scene.add(mesh);
+                        }
+                    } catch (error) {
+                        console.error('Error loading file:', file.name, error);
+                    }
+                    loadedCount++;
+                    if (loadedCount === totalFiles) onLoadingComplete();
+                };
+                reader.readAsArrayBuffer(file);
+            });
+        });
+        // --- CONTROLS & EVENT LISTENERS ---
+        document.getElementById('rotate-toggle').addEventListener('click', function() {
+            isRotating = !isRotating;
+            this.textContent = isRotating ? 'Pause Rotation' : 'Start Rotation';
+        });
+        document.getElementById('reset-view').addEventListener('click', () => {
+            positionCamera();
+            if (!animationId) animate();
+        });
+        document.addEventListener('keydown', (event) => {
+            if (event.key.toLowerCase() in keys) {
+                keys[event.key.toLowerCase()] = true;
+                // BUG FIX: Ensure the animation loop is running when a key is pressed.
+                if (!animationId) {
+                    animate();
+                }
+            }
+        });
+        document.addEventListener('keyup', (event) => {
+            if (event.key.toLowerCase() in keys) keys[event.key.toLowerCase()] = false;
+        });
+        renderer.domElement.addEventListener('mousedown', (event) => {
+            isMouseDown = true;
+            previousMousePosition = { x: event.clientX, y: event.clientY };
+            event.preventDefault();
+        });
+        document.addEventListener('mouseup', () => { isMouseDown = false; });
+        document.addEventListener('mousemove', (event) => {
+            if (isMouseDown) {
+                const deltaMove = { x: event.clientX - previousMousePosition.x, y: event.clientY - previousMousePosition.y };
+                const up = new THREE.Vector3(0, 1, 0);
+                const right = new THREE.Vector3(1, 0, 0);
+                camera.rotateOnWorldAxis(up, -deltaMove.x * 0.002);
+                camera.rotateOnAxis(right, -deltaMove.y * 0.002);
+                previousMousePosition = { x: event.clientX, y: event.clientY };
+            }
+        });
+        renderer.domElement.addEventListener('contextmenu', (event) => event.preventDefault());
+        window.addEventListener('resize', function() {
+            camera.aspect = viewerContainer.clientWidth / viewerContainer.clientHeight;
+            camera.updateProjectionMatrix();
+            renderer.setSize(viewerContainer.clientWidth, viewerContainer.clientHeight);
+        });
+        // --- ANIMATION LOOP ---
+        function animate() {
+            // Process movement
+            if (keys.w || keys.a || keys.s || keys.d) {
+                const forward = new THREE.Vector3(0, 0, -1).applyQuaternion(camera.quaternion);
+                const right = new THREE.Vector3(1, 0, 0).applyQuaternion(camera.quaternion);
+                forward.y = 0; right.y = 0;
+                forward.normalize(); right.normalize();
+                const movement = new THREE.Vector3();
+                if (keys.w) movement.add(forward);
+                if (keys.s) movement.sub(forward);
+                if (keys.a) movement.sub(right);
+                if (keys.d) movement.add(right);
+                if (movement.length() > 0) {
+                    movement.normalize().multiplyScalar(moveSpeed);
+                    camera.position.add(movement);
+                }
+            }
+            if (camera.position.length() > maxDistance) camera.position.setLength(maxDistance);
+            // Process rotation
+            if (isRotating && scene.children.some(c => c instanceof THREE.Mesh)) scene.rotation.y += 0.0005;
+            // Render the scene
+            renderer.render(scene, camera);
+            // BUG FIX: Request the next frame at the *end* of the function for robustness.
+            animationId = requestAnimationFrame(animate);
+        }
+        // Start the initial animation loop
+        animate();
+    </script>
+</body>
+</html>

style.css ADDED Viewed

	@@ -0,0 +1,28 @@

+body {
+	padding: 2rem;
+	font-family: -apple-system, BlinkMacSystemFont, "Arial", sans-serif;
+}
+h1 {
+	font-size: 16px;
+	margin-top: 0;
+}
+p {
+	color: rgb(107, 114, 128);
+	font-size: 15px;
+	margin-bottom: 10px;
+	margin-top: 5px;
+}
+.card {
+	max-width: 620px;
+	margin: 0 auto;
+	padding: 16px;
+	border: 1px solid lightgray;
+	border-radius: 16px;
+}
+.card p:last-child {
+	margin-bottom: 0;
+}