update

app.py

@@ -119,86 +119,321 @@ def download_smpl_assets(body_models_path):
 def pack_sequence_to_glb(base_dir, output_path, start_frame, end_frame, scene_rate=1.0):
     """
     Pack a sequence of meshes/pointclouds into a single GLB file for visualization.
+    Uses a specific naming convention 'frame_{i}' for each mesh to allow 
+    'stop motion' style visualization in the frontend.
     """
     # Create a scene
     scene = trimesh.Scene()
     
-    # Iterate over frames
+    # 1. Add Accumulated Scene Point Cloud (Static Background)
+    # The frontend looks for 'scene' in the name to adjust point size.
+    scene_ply = os.path.join(os.path.dirname(output_path), f"{os.path.basename(base_dir)}_scene.ply")
+    if os.path.exists(scene_ply):
+        scene_pc = trimesh.load(scene_ply)
+        # Add to scene
+        scene.add_geometry(scene_pc, node_name='scene_cloud', geom_name='scene_cloud')
+
+    # 2. Iterate over frames and add Human Meshes
+    # The frontend looks for 'frame_{i}' to toggle visibility.
     for i in range(start_frame, end_frame):
-        # Load Human Mesh
         human_mesh_path = os.path.join(base_dir, f"smpl_{i:06d}.ply")
         if os.path.exists(human_mesh_path):
             human_mesh = trimesh.load(human_mesh_path)
-            # Add to scene with time-based visibility if possible, 
-            # but GLB animation is complex. 
-            # Simplified approach: Merge all into one static scene for now, 
-            # or just one frame.
-            # 
-            # Better approach for "Video" visualization in web:
-            # We can't easily make a 4D GLB in pure python without complex animation rigging.
-            # 
-            # Alternative: Just show the first frame, or a merged static scene.
-            # The prompt implies a 3D result viewing.
-            #
-            # Let's merge all 'scene' points (static) and 'human' meshes (dynamic).
-            # But showing all human meshes at once looks messy (motion trail).
             
-            # Strategy:
-            # 1. Add Scene Point Cloud (once, it's static-ish or accumulated)
-            # 2. Add Human Mesh from the middle frame or first frame?
+            # Color it if needed (default logic seemed to want colors)
+            # But usually ply has colors. If not, maybe set a default.
+            # user previous logic: human_mesh.visual.vertex_colors = [200, 100, 100, 255]
             
-            pass
-
-    # For the purpose of this demo app, let's load the accumulated scene and one human mesh
-    # or just the accumulated scene if available.
-    
-    # Load Accumulated Scene
-    scene_ply = os.path.join(os.path.dirname(output_path), f"{os.path.basename(base_dir)}_scene.ply")
-    if os.path.exists(scene_ply):
-        scene_pc = trimesh.load(scene_ply)
-        scene.add_geometry(scene_pc)
-        
-    # Load one human mesh (e.g. middle frame)
-    mid_frame = (start_frame + end_frame) // 2
-    human_mesh_path = os.path.join(base_dir, f"smpl_{mid_frame:06d}.ply")
-    if os.path.exists(human_mesh_path):
-        human_mesh = trimesh.load(human_mesh_path)
-        human_mesh.visual.vertex_colors = [200, 100, 100, 255] # Reddish
-        scene.add_geometry(human_mesh)
+            # Naming is CRITICAL for the frontend logic
+            node_name = f"frame_{i}"
+            scene.add_geometry(human_mesh, node_name=node_name, geom_name=node_name)
 
     scene.export(output_path)
 
 
 def get_player_html(glb_path):
     """
-    Generate HTML to display the GLB file using model-viewer.
+    Generate HTML to display the GLB file using Three.js with 'Stop Motion' logic.
+    Extracts logic from index.html provided by user.
     """
-    # We need to serve the file. Gradio handles file paths in output components.
-    # So we return the path to the GLB file, but the output component is HTML.
-    # To display 3D in HTML, we can use <model-viewer>.
-    # However, Gradio's Model3D component is easier.
-    # Let's switch the output to Model3D if possible?
-    # The user code had `output_html = gr.HTML(...)`.
-    
-    # If we stick to HTML:
-    # We need to base64 encode the GLB or assume it's accessible. 
-    # Gradio files are accessible.
-    
     import base64
     with open(glb_path, "rb") as f:
         data = f.read()
         b64_data = base64.b64encode(data).decode('utf-8')
         
     html = f"""
-    <script type="module" src="https://ajax.googleapis.com/ajax/libs/model-viewer/3.4.0/model-viewer.min.js"></script>
-    <model-viewer 
-        src="data:model/gltf-binary;base64,{b64_data}" 
-        camera-controls 
-        auto-rotate
-        shadow-intensity="1"
-        style="width: 100%; height: 600px;"
-    >
-    </model-viewer>
+    <!DOCTYPE html>
+    <html>
+    <head>
+      <meta charset="utf-8">
+      <style>
+        #canvas-container {{
+          width: 100%;
+          height: 600px; /* Increased height */
+          background: #f5f5f5;
+          border-radius: 8px;
+          position: relative;
+          overflow: hidden;
+          box-shadow: inset 0 0 20px rgba(0,0,0,0.05);
+        }}
+
+        #loading-overlay {{
+          position: absolute; top:0; left:0; width:100%; height:100%; 
+          background: rgba(0,0,0,0.7); color: white; 
+          display: flex; flex-direction: column; justify-content: center; align-items: center; 
+          z-index: 10;
+        }}
+
+        .player-controls {{
+          margin-top: 10px; 
+          padding: 10px; 
+          background: #fff; 
+          border-radius: 8px; 
+          box-shadow: 0 2px 10px rgba(0,0,0,0.1);
+          display: flex;
+          align-items: center;
+          gap: 15px;
+        }}
+
+        .button {{
+          padding: 8px 16px;
+          border: none;
+          border-radius: 4px;
+          background: #363636;
+          color: white;
+          cursor: pointer;
+          font-weight: bold;
+        }}
+        .button:hover {{ background: #4a4a4a; }}
+
+        input[type=range] {{
+          flex-grow: 1;
+          cursor: pointer;
+        }}
+        
+        .tag {{
+          background: #f5f5f5;
+          padding: 5px 10px;
+          border-radius: 4px;
+          font-family: monospace;
+          white-space: nowrap;
+        }}
+      </style>
+      
+      <!-- Import Map for Three.js -->
+      <script type="importmap">
+      {{
+        "imports": {{
+          "three": "https://unpkg.com/three@0.158.0/build/three.module.js",
+          "three/addons/": "https://unpkg.com/three@0.158.0/examples/jsm/"
+        }}
+      }}
+      </script>
+    </head>
+    <body>
+      <div id="player-wrapper">
+        <div id="canvas-container">
+          <div id="loading-overlay">
+            <p>Loading 3D Sequence...</p>
+          </div>
+        </div>
+
+        <div class="player-controls">
+          <button id="play-btn" class="button">Play</button>
+          <input id="frame-slider" type="range" min="0" max="0" value="0" step="1">
+          <span id="frame-count" class="tag">Frame: 0</span>
+        </div>
+      </div>
+
+      <script type="module">
+        import * as THREE from 'three';
+        import {{ OrbitControls }} from 'three/addons/controls/OrbitControls.js';
+        import {{ GLTFLoader }} from 'three/addons/loaders/GLTFLoader.js';
+      
+        // Config
+        const MODEL_DATA = "data:model/gltf-binary;base64,{b64_data}";
+        const FPS = 10; 
+      
+        let scene, camera, renderer, controls;
+        let frames = []; 
+        let currentFrame = 0;
+        let isPlaying = false;
+        let intervalId = null;
+      
+        const container = document.getElementById('canvas-container');
+        const slider = document.getElementById('frame-slider');
+        const playBtn = document.getElementById('play-btn');
+        const frameLabel = document.getElementById('frame-count');
+        const loadingOverlay = document.getElementById('loading-overlay');
+      
+        init();
+      
+        function init() {{
+          scene = new THREE.Scene();
+          scene.background = new THREE.Color(0xf5f5f5);
+      
+          // Setup Camera
+          camera = new THREE.PerspectiveCamera(50, container.clientWidth / container.clientHeight, 0.1, 1000);
+          // Initial position - will be roughly looking at origin
+          camera.position.set(0, 0, 5); 
+      
+          renderer = new THREE.WebGLRenderer({{ antialias: true, alpha: true }});
+          renderer.setSize(container.clientWidth, container.clientHeight);
+          renderer.setPixelRatio(window.devicePixelRatio);
+          renderer.useLegacyLights = false; 
+      
+          container.appendChild(renderer.domElement);
+      
+          // Lights
+          const hemiLight = new THREE.HemisphereLight(0xffffff, 0x444444, 3.0);
+          scene.add(hemiLight);
+          
+          const dirLight = new THREE.DirectionalLight(0xffffff, 3.0);
+          dirLight.position.set(5, 10, 7);
+          scene.add(dirLight);
+      
+          const frontLight = new THREE.DirectionalLight(0xffffff, 2.0);
+          frontLight.position.set(0, 0, 5); 
+          scene.add(frontLight);
+      
+          // Controls
+          controls = new OrbitControls(camera, renderer.domElement);
+          controls.enableDamping = true;
+          controls.dampingFactor = 0.05;
+          controls.target.set(0, 0, 0);
+      
+          // Load GLB
+          const loader = new GLTFLoader();
+          
+          loader.load(MODEL_DATA, function (gltf) {{
+            const root = gltf.scene;
+            scene.add(root);
+      
+            frames = [];
+            
+            // Traverse to find frames and fix materials
+            root.traverse((node) => {{
+              
+              // Material adjustments for visual appeal
+              if (node.isMesh) {{
+                  node.geometry.computeVertexNormals();
+                  // Reset colors if needed to avoid black meshes
+                  if (node.geometry.attributes.color) {{
+                      // Optionally keep vertex colors if they are good
+                      // node.geometry.deleteAttribute('color'); 
+                  }}
+                  
+                  // Simple material override for consistency
+                  node.material = new THREE.MeshStandardMaterial({{
+                      color: 0xff9966,
+                      roughness: 0.4,
+                      metalness: 0.0,
+                      side: THREE.DoubleSide
+                  }});
+              }}
+      
+              // Point cloud adjustments
+              if (node.isPoints) {{
+                  if (node.name && node.name.toLowerCase().includes('scene')) {{
+                      node.material.size = 0.05; 
+                      node.material.sizeAttenuation = true; 
+                  }}
+                  if (node.name && node.name.toLowerCase().includes('human')) {{
+                      node.material.size = 0.005; 
+                  }}
+              }}
+      
+              // Collect Frames based on naming convention
+              if (node.name && node.name.startsWith('frame_')) {{
+                  const parts = node.name.split('_');
+                  // Expect frame_0, frame_1, etc.
+                  if (parts.length >= 2 && !isNaN(parseInt(parts[1]))) {{
+                      const idx = parseInt(parts[1]);
+                      frames[idx] = node;
+                      node.visible = false;
+                  }}
+              }}
+            }});
+            
+            // Filter out undefined slots in case of non-sequential or gaps (though logic should be sequential)
+            // Note: If using frames[idx], gaps might leave undefined. 
+            // Better to compact if we just want a sequence, but index matching is good.
+            // Let's rely on filter to clean up.
+            frames = frames.filter(n => n !== undefined);
+            
+            console.log(`Loaded ${{frames.length}} frames.`);
+      
+            if (frames.length > 0) {{
+              slider.max = frames.length - 1;
+              loadingOverlay.style.display = 'none';
+              showFrame(0);
+              
+              // Auto-center camera on the first frame if possible
+              // const box = new THREE.Box3().setFromObject(frames[0]);
+              // const center = box.getCenter(new THREE.Vector3());
+              // controls.target.copy(center);
+              // camera.position.add(center); // Adjust relative to new center
+              
+            }} else {{
+              loadingOverlay.innerHTML = "<p>No frames found (looking for nodes named 'frame_N').</p>";
+            }}
+      
+          }}, undefined, function (error) {{
+            console.error(error);
+            loadingOverlay.innerHTML = "<p>Error loading model.</p>";
+          }});
+      
+          window.addEventListener('resize', onWindowResize);
+          animate();
+        }}
+      
+        function showFrame(idx) {{
+          if (!frames[idx]) return;
+          if (frames[currentFrame]) frames[currentFrame].visible = false;
+          frames[idx].visible = true;
+          currentFrame = idx;
+          slider.value = idx;
+          frameLabel.innerText = `Frame: ${{idx}}`;
+        }}
+      
+        function togglePlay() {{
+          if (frames.length === 0) return;
+          isPlaying = !isPlaying;
+          
+          playBtn.innerText = isPlaying ? "Pause" : "Play";
+          
+          if (isPlaying) {{
+            intervalId = setInterval(() => {{
+              let next = currentFrame + 1;
+              if (next >= frames.length) next = 0;
+              showFrame(next);
+            }}, 1000 / FPS);
+          }} else {{
+            clearInterval(intervalId);
+          }}
+        }}
+      
+        slider.addEventListener('input', (e) => {{
+          if (isPlaying) togglePlay();
+          showFrame(parseInt(e.target.value));
+        }});
+        
+        playBtn.addEventListener('click', togglePlay);
+      
+        function onWindowResize() {{
+          camera.aspect = container.clientWidth / container.clientHeight;
+          camera.updateProjectionMatrix();
+          renderer.setSize(container.clientWidth, container.clientHeight);
+        }}
+      
+        function animate() {{
+          requestAnimationFrame(animate);
+          controls.update();
+          renderer.render(scene, camera);
+        }}
+      </script>
+    </body>
+    </html>
     """
     return html
 

requirements.txt

@@ -3,19 +3,20 @@ torchvision==0.19.1
 numpy
 scipy
 trimesh
-tqdm
+plyfile
+open3d==0.19.0
 opencv-python-headless
 pillow
-gradio
-spaces
-ninja
 einops
 safetensors
-huggingface_hub<0.25.0
-open3d==0.19.0
+gradio>=5.0.0
+spaces
+huggingface_hub>=0.25.0
+tqdm
+ninja
 ultralytics==8.3.227
 timm==1.0.24
 git+https://github.com/EasternJournalist/utils3d.git@3fab839f0be9931dac7c8488eb0e1600c236e183
 mmcv==2.2.0 --find-links https://download.openmmlab.com/mmcv/dist/cu121/torch2.4/index.html
 pytorch3d @ https://dl.fbaipublicfiles.com/pytorch3d/packaging/wheels/py310_cu121_pyt241/pytorch3d-0.7.8-cp310-cp310-linux_x86_64.whl
-smplx
+smplx