HunyuanWorld-viewer

Running

App Files Files Community

multimodalart HF Staff commited on Aug 1

Commit

fa7f101

verified ·

1 Parent(s): e32591c

Update index.html

Browse files

Files changed (1) hide show

index.html +54 -41

index.html CHANGED Viewed

@@ -112,7 +112,8 @@
             width: 0%;
             height: 20px;
             background-color: #4CAF50;
-            transition: width 0.1s linear;
         }
         #controls {
             position: absolute;
@@ -143,9 +144,6 @@
             font-size: 14px;
             z-index: 10;
         }
-        #progress-container{
-            display: none;
-        }
     </style>
 </head>
 <body>
@@ -186,15 +184,16 @@
     <script src="https://cdn.jsdelivr.net/npm/three@0.132.2/examples/js/loaders/PLYLoader.js"></script>
     <script src="https://cdn.jsdelivr.net/npm/three@0.132.2/examples/js/loaders/DRACOLoader.js"></script>
     <script>
-        // --- DATA FOR EXAMPLES ---
         const baseURL = 'https://huggingface.co/datasets/multimodalart/HunyuanWorld-panoramas/resolve/main/';
         const examplesData = [
             { name: 'Cyberpunk', 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: 'Italian Village', 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,
@@ -268,73 +267,90 @@
         }
         // --- LOADING LOGIC ---
-        /**
-         * Fetches a file and reports progress via a callback.
-         * @param {string} url - The URL of the file to fetch.
-         * @param {function(number)} onProgress - Callback function that receives the size of each downloaded chunk.
-         * @returns {Promise<ArrayBuffer>} - A promise that resolves with the file's ArrayBuffer.
-         */
         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 = 0;
-            chunks.forEach(chunk => totalLength += chunk.length);
             const buffer = new Uint8Array(totalLength);
             let offset = 0;
             chunks.forEach(chunk => {
                 buffer.set(chunk, offset);
                 offset += chunk.length;
             });
             return buffer.buffer;
         }
-        // Load pre-defined examples from server with progress
         async function loadExample(example) {
             loadingDiv.style.display = 'block';
             progressContainer.style.display = 'block';
             progressBar.style.width = '0%';
             loadingText.textContent = 'Calculating size...';
-            clearScene();
             try {
-                // Step 1: Get total size of all files
                 const headPromises = example.files.map(url => fetch(url, { method: 'HEAD' }));
                 const responses = await Promise.all(headPromises);
-                const totalSize = responses.reduce((acc, res) => {
                     if (!res.ok) throw new Error(`Failed to get headers for ${res.url}`);
-                    return acc + Number(res.headers.get('Content-Length'));
                 }, 0);
-                let loadedSize = 0;
-                loadingText.textContent = 'Loading... 0%';
-                // Step 2: Fetch files with progress tracking
                 const onProgress = (chunkSize) => {
                     loadedSize += chunkSize;
-                    const percent = totalSize > 0 ? (loadedSize / totalSize) * 100 : 0;
-                    progressBar.style.width = `${percent}%`;
-                    loadingText.textContent = `Loading... ${Math.round(percent)}%`;
                 };
                 const contentPromises = example.files.map(url => fetchWithProgress(url, onProgress));
                 const buffers = await Promise.all(contentPromises);
-                // Step 3: Process downloaded files
-                loadingText.textContent = 'Processing files...';
                 buffers.forEach(buffer => {
                     const geometry = plyLoader.parse(buffer);
                     const material = new THREE.MeshBasicMaterial({ side: THREE.DoubleSide, vertexColors: true });
@@ -342,13 +358,16 @@
                     mesh.rotateX(-Math.PI / 2);
                     mesh.rotateZ(-Math.PI / 2);
                     scene.add(mesh);
                 });
                 onLoadingComplete();
             } catch (error) {
                 console.error('Error loading example:', error);
                 alert('Failed to load example files. Check console for details.');
                 loadingDiv.style.display = 'none';
             }
         }
@@ -357,15 +376,12 @@
         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'; // Hide progress bar for local files
             clearScene();
             let loadedCount = 0;
             const totalFiles = files.length;
             Array.from(files).forEach(file => {
                 const reader = new FileReader();
                 reader.onload = function(event) {
@@ -384,13 +400,11 @@
                                 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);
@@ -419,7 +433,6 @@
         });
         document.addEventListener('keydown', (event) => {
             if (event.key.toLowerCase() in keys) keys[event.key.toLowerCase()] = true;
-            if (!animationId && Object.values(keys).some(k => k)) animate();
         });
         document.addEventListener('keyup', (event) => {
             if (event.key.toLowerCase() in keys) keys[event.key.toLowerCase()] = false;

             width: 0%;
             height: 20px;
             background-color: #4CAF50;
+            /* Smoother transition for the bar */
+            transition: width 0.2s ease-out;
         }
         #controls {
             position: absolute;
             font-size: 14px;
             z-index: 10;
         }
     </style>
 </head>
 <body>
     <script src="https://cdn.jsdelivr.net/npm/three@0.132.2/examples/js/loaders/PLYLoader.js"></script>
     <script src="https://cdn.jsdelivr.net/npm/three@0.132.2/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', 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: 'Italian Village', 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: 'WXP', previewImage: 'wxp/wxp.webp', files: ['wxp/mesh_layer0.ply', 'wxp/mesh_layer1.ply', 'wxp/mesh_layer2.ply'] },
+            { name: 'ZLD', previewImage: 'zld/zld.webp', files: ['zld/mesh_layer0.ply', 'zld/mesh_layer1.ply'] }
         ];
         const examples = examplesData.map(ex => ({
             name: ex.name,
         }
         // --- 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';
+            // --- CACHE CHECK ---
+            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())); // Clone to avoid issues
+                // Use a short timeout to let the "Loading from cache..." message be visible
+                setTimeout(onLoadingComplete, 50);
+                return;
+            }
+            // --- DOWNLOAD & PROCESS (CACHE MISS) ---
             progressContainer.style.display = 'block';
             progressBar.style.width = '0%';
             loadingText.textContent = 'Calculating size...';
+            let loadedSize = 0;
+            let totalSize = 0;
+            let progressAnimationId = null;
             try {
+                // Step 1: Get total size
                 const headPromises = example.files.map(url => fetch(url, { method: 'HEAD' }));
                 const responses = await Promise.all(headPromises);
+                totalSize = responses.reduce((acc, res) => {
                     if (!res.ok) throw new Error(`Failed to get headers for ${res.url}`);
+                    return acc + Number(res.headers.get('Content-Length') || 0);
                 }, 0);
+                // Step 2: Animate progress bar smoothly
+                const updateProgressUI = () => {
+                    if (loadedSize < totalSize) {
+                        const percent = totalSize > 0 ? (loadedSize / totalSize) * 100 : 0;
+                        progressBar.style.width = `${percent}%`;
+                        loadingText.textContent = `Downloading... ${Math.round(percent)}%`;
+                        progressAnimationId = requestAnimationFrame(updateProgressUI);
+                    } else {
+                         progressBar.style.width = `100%`;
+                         loadingText.textContent = `Processing files...`;
+                    }
+                };
+                progressAnimationId = requestAnimationFrame(updateProgressUI);
+                // Step 3: Fetch files and update progress
                 const onProgress = (chunkSize) => {
                     loadedSize += chunkSize;
                 };
                 const contentPromises = example.files.map(url => fetchWithProgress(url, onProgress));
                 const buffers = await Promise.all(contentPromises);
+                // Stop the progress animation loop
+                cancelAnimationFrame(progressAnimationId);
+                // Step 4: Process and cache downloaded files
+                const newMeshes = [];
                 buffers.forEach(buffer => {
                     const geometry = plyLoader.parse(buffer);
                     const material = new THREE.MeshBasicMaterial({ side: THREE.DoubleSide, vertexColors: true });
                     mesh.rotateX(-Math.PI / 2);
                     mesh.rotateZ(-Math.PI / 2);
                     scene.add(mesh);
+                    newMeshes.push(mesh);
                 });
+                modelCache.set(example.name, newMeshes); // Store in cache
                 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) {
                                 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);
         });
         document.addEventListener('keydown', (event) => {
             if (event.key.toLowerCase() in keys) keys[event.key.toLowerCase()] = true;
         });
         document.addEventListener('keyup', (event) => {
             if (event.key.toLowerCase() in keys) keys[event.key.toLowerCase()] = false;