删除不必要的资源文件

README.md

@@ -10,10 +10,69 @@ pinned: false
 short_description: Text-to-3D and Image-to-3D Generation
 ---
 
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
 
+<p align="center">
+  <img src="./assets/banner.png" alt="Banner" width="100%">
+</p>
 
-```bash
-# huggingface官方会运行这个
-pip install --no-cache-dir pip -U && 	pip install --no-cache-dir 	datasets 	"huggingface-hub>=0.30" "hf-transfer>=0.1.4" "protobuf<4" "click<8.1" "pydantic~=1.0"
-```
+<div align="center">
+  <a href="https://hunyuan.tencent.com/motion" target="_blank">
+    <img src="https://img.shields.io/badge/Official%20Site-333399.svg?logo=homepage" height="22px" alt="Official Site">
+  </a>
+  <a href="https://huggingface.co/spaces/tencent/HY-Motion-1.0" target="_blank">
+    <img src="https://img.shields.io/badge/%F0%9F%A4%97%20Demo-276cb4.svg" height="22px" alt="HuggingFace Space">
+  </a>
+  <a href="https://huggingface.co/tencent/HY-Motion-1.0" target="_blank">
+    <img src="https://img.shields.io/badge/%F0%9F%A4%97%20Models-d96902.svg" height="22px" alt="HuggingFace Models">
+  </a>
+  <a href="https://arxiv.org/pdf/2512.23464" target="_blank">
+    <img src="https://img.shields.io/badge/Report-b5212f.svg?logo=arxiv" height="22px" alt="ArXiv Report">
+  </a>
+  <a href="https://x.com/TencentHunyuan" target="_blank">
+    <img src="https://img.shields.io/badge/Hunyuan-black.svg?logo=x" height="22px" alt="X (Twitter)">
+  </a>
+</div>
+
+
+# HY-Motion 1.0: Scaling Flow Matching Models for 3D Motion Generation
+
+
+<p align="center">
+  <img src="./assets/teaser.png" alt="Teaser" width="90%">
+</p>
+
+
+## 🔥 News
+- **Dec 30, 2025**: 🤗 We released the inference code and pretrained models of [HY-Motion 1.0](https://huggingface.co/tencent/HY-Motion-1.0). Please give it a try via our [HuggingFace Space](https://huggingface.co/spaces/tencent/HY-Motion-1.0) and our [Official Site](https://hunyuan.tencent.com/motion)!
+
+
+## **Introduction**
+
+**HY-Motion 1.0** is a series of text-to-3D human motion generation models based on Diffusion Transformer (DiT) and Flow Matching. It allows developers to generate skeleton-based 3D character animations from simple text prompts, which can be directly integrated into various 3D animation pipelines. This model series is the first to scale DiT-based text-to-motion models to the billion-parameter level, achieving significant improvements in instruction-following capabilities and motion quality over existing open-source models.
+
+### Key Features
+- **State-of-the-Art Performance**: Achieves state-of-the-art performance in both instruction-following capability and generated motion quality.
+
+- **Billion-Scale Models**: We are the first to successfully scale DiT-based models to the billion-parameter level for text-to-motion generation. This results in superior instruction understanding and following capabilities, outperforming comparable open-source models.
+
+- **Advanced Three-Stage Training**: Our models are trained using a comprehensive three-stage process:
+
+    - *Large-Scale Pre-training*: Trained on over 3,000 hours of diverse motion data to learn a broad motion prior.
+
+    - *High-Quality Fine-tuning*: Fine-tuned on 400 hours of curated, high-quality 3D motion data to enhance motion detail and smoothness.
+
+    - *Reinforcement Learning*: Utilizes Reinforcement Learning from human feedback and reward models to further refine instruction-following and motion naturalness.
+
+
+
+<p align="center">
+  <img src="./assets/pipeline.png" alt="System Overview" width="100%">
+</p>
+
+<p align="center">
+  <img src="./assets/arch.png" alt="Architecture" width="100%">
+</p>
+
+<p align="center">
+  <img src="./assets/sotacomp.png" alt="ComparisonSoTA" width="100%">
+</p>

gradio_app.py

@@ -342,7 +342,7 @@ HTML_OUTPUT_PLACEHOLDER = """
 """
 
 
-def load_examples_from_txt(txt_path: str):
+def load_examples_from_txt(txt_path: str, example_record_fps=20, max_duration=12):
     """Load examples from txt file."""
 
     def _parse_line(line: str) -> Optional[Tuple[str, float]]:
@@ -351,7 +351,8 @@ def load_examples_from_txt(txt_path: str):
             parts = line.split("#")
             if len(parts) >= 2:
                 text = parts[0].strip()
-                duration = int(parts[1]) / 20.0
+                duration = int(parts[1]) / example_record_fps
+                duration = min(duration, max_duration)
             else:
                 text = line.strip()
                 duration = 5.0

scripts/gradio/static/scripts3d/create_ground.js

@@ -1,191 +0,0 @@
-import * as THREE from "three";
-
-// extract common adaptive logic
-function getAdaptiveGridSize(sample_data, default_size = 5) {
-  if (sample_data) {
-    const bounds = calculateDataBounds(sample_data);
-    const grid_size = Math.max(bounds.maxRange * 3, 5); // 1.5x margin
-    console.log(`Adaptive ground size: ${grid_size.toFixed(2)}, data range: ${bounds.maxRange.toFixed(2)}`);
-    return grid_size;
-  }
-  return default_size;
-}
-
-function createBaseChessboard(
-  grid_size = 5,
-  divisions = 10,
-  white = "#ffffff",
-  black = "#444444",
-  texture_size = 1024,
-  sample_data = null,
-) {
-  // Use adaptive sizing if sample_data provided, otherwise use fixed grid_size
-  if (sample_data) {
-    grid_size = getAdaptiveGridSize(sample_data, grid_size);
-  }
-
-  // Create chessboard texture with enhanced visual style
-  // Ensure texture_size is divisible by divisions to avoid sub-pixel rendering
-  var adjusted_texture_size = Math.floor(texture_size / divisions) * divisions;
-  var canvas = document.createElement("canvas");
-  canvas.width = canvas.height = adjusted_texture_size;
-  var context = canvas.getContext("2d");
-
-  // Disable anti-aliasing for crisp edges
-  context.imageSmoothingEnabled = false;
-
-  var step = adjusted_texture_size / divisions;  // Now guaranteed to be an integer
-  for (var i = 0; i < divisions; i++) {
-    for (var j = 0; j < divisions; j++) {
-      context.fillStyle = (i + j) % 2 === 0 ? white : black;
-      context.fillRect(i * step, j * step, step, step);
-    }
-  }
-
-  var texture = new THREE.CanvasTexture(canvas);
-  // Use NearestFilter for sharp/crisp edges between chess squares
-  texture.wrapS = THREE.RepeatWrapping;
-  texture.wrapT = THREE.RepeatWrapping;
-  texture.magFilter = THREE.NearestFilter;
-  texture.minFilter = THREE.NearestFilter;
-  texture.generateMipmaps = false;
-
-  // Create plane geometry
-  var planeGeometry = new THREE.PlaneGeometry(grid_size, grid_size);
-
-  // Enhanced material with better visual properties
-  var planeMaterial = new THREE.MeshStandardMaterial({
-    map: texture,
-    side: THREE.DoubleSide,
-    transparent: true,
-    opacity: 0.85,
-    roughness: 0.9,
-    metalness: 0.1,
-    emissiveIntensity: 0.05,
-  });
-
-  // Create grid mesh
-  var plane = new THREE.Mesh(planeGeometry, planeMaterial);
-  plane.receiveShadow = true;
-
-  return plane;
-}
-
-function getChessboard(...args) {
-  var plane = createBaseChessboard(...args);
-  plane.rotation.x = -Math.PI; // rotate to make the plane horizontal
-  return plane;
-}
-
-function getChessboardXZ(...args) {
-  var plane = createBaseChessboard(...args);
-  plane.rotation.x = -Math.PI / 2; // rotate to make the plane horizontal
-  return plane;
-}
-
-function getCoordinate(axisLength) {
-  // create a group to store the coordinate axes
-  var axes = new THREE.Group();
-
-  // define the material of the axes
-  var materialX = new THREE.LineBasicMaterial({ color: 0xff0000 }); // red X axis
-  var materialY = new THREE.LineBasicMaterial({ color: 0x00ff00 }); // green Y axis
-  var materialZ = new THREE.LineBasicMaterial({ color: 0x0000ff }); // blue Z axis
-
-  // create axis lines (X axis, Y axis, Z axis)
-  var xAxisGeometry = new THREE.BufferGeometry().setFromPoints([
-    new THREE.Vector3(0, 0, 0),
-    new THREE.Vector3(axisLength, 0, 0),
-  ]);
-  var yAxisGeometry = new THREE.BufferGeometry().setFromPoints([
-    new THREE.Vector3(0, 0, 0),
-    new THREE.Vector3(0, axisLength, 0),
-  ]);
-  var zAxisGeometry = new THREE.BufferGeometry().setFromPoints([
-    new THREE.Vector3(0, 0, 0),
-    new THREE.Vector3(0, 0, axisLength),
-  ]);
-
-  var xAxis = new THREE.Line(xAxisGeometry, materialX);
-  var yAxis = new THREE.Line(yAxisGeometry, materialY);
-  var zAxis = new THREE.Line(zAxisGeometry, materialZ);
-
-  // add axes to the group
-  axes.add(xAxis);
-  axes.add(yAxis);
-  axes.add(zAxis);
-
-  return axes;
-}
-
-function calculateDataBounds(sample_data) {
-  let minX = Infinity,
-    maxX = -Infinity;
-  let minY = Infinity,
-    maxY = -Infinity;
-  let minZ = Infinity,
-    maxZ = -Infinity;
-
-  // iterate through sample_data to find the maximum and minimum values
-  if (sample_data && sample_data.length > 0) {
-    sample_data.forEach((frame) => {
-      if (frame.positions && Array.isArray(frame.positions)) {
-        frame.positions.forEach((pos) => {
-          // support multiple position data formats
-          let x, y, z;
-          if (typeof pos === "object") {
-            x = pos.x !== undefined ? pos.x : pos[0];
-            y = pos.y !== undefined ? pos.y : pos[1];
-            z = pos.z !== undefined ? pos.z : pos[2];
-          } else if (Array.isArray(pos)) {
-            [x, y, z] = pos;
-          }
-
-          if (x !== undefined && y !== undefined && z !== undefined) {
-            minX = Math.min(minX, x);
-            maxX = Math.max(maxX, x);
-            minY = Math.min(minY, y);
-            maxY = Math.max(maxY, y);
-            minZ = Math.min(minZ, z);
-            maxZ = Math.max(maxZ, z);
-          }
-        });
-      }
-    });
-  }
-
-  // if no valid data is found, use default values
-  if (minX === Infinity || maxX === -Infinity) {
-    minX = maxX = minY = maxY = minZ = maxZ = 0;
-  }
-
-  const rangeX = Math.abs(maxX - minX);
-  const rangeY = Math.abs(maxY - minY);
-  const rangeZ = Math.abs(maxZ - minZ);
-
-  // calculate the maximum range of the XZ plane (the ground mainly cares about the movement of the X and Z axes)
-  const maxRange = Math.max(rangeX, rangeZ);
-
-  // add debug information
-  console.log(
-    `Data boundaries: X[${minX.toFixed(2)}, ${maxX.toFixed(2)}], Y[${minY.toFixed(2)}, ${maxY.toFixed(2)}], Z[${minZ.toFixed(2)}, ${maxZ.toFixed(2)}]`,
-  );
-  console.log(
-    `Ranges: X=${rangeX.toFixed(2)}, Y=${rangeY.toFixed(2)}, Z=${rangeZ.toFixed(2)}, Max=${maxRange.toFixed(2)}`,
-  );
-
-  return {
-    minX,
-    maxX,
-    minY,
-    maxY,
-    minZ,
-    maxZ,
-    rangeX,
-    rangeY,
-    rangeZ,
-    maxRange,
-  };
-}
-
-export { calculateDataBounds, getChessboard, getChessboardXZ, getCoordinate };

scripts/gradio/static/scripts3d/create_scene.js

@@ -1,195 +0,0 @@
-import * as THREE from "three";
-import { getChessboard, getChessboardXZ, getCoordinate } from "./create_ground.js";
-
-function create_plane(scene) {
-  const planeGeometry = new THREE.PlaneGeometry(20, 20);
-  const planeMaterial = new THREE.MeshStandardMaterial({ color: 0x808080 });
-  const plane = new THREE.Mesh(planeGeometry, planeMaterial);
-  plane.position.y = -1;
-  plane.receiveShadow = true; // make the plane receive shadows
-  scene.add(plane);
-}
-
-function create_cube(scene) {
-  // add a cube
-  const cubeGeometry = new THREE.BoxGeometry();
-  const cubeMaterial = new THREE.MeshPhongMaterial({ color: 0xffffff });
-  const cube = new THREE.Mesh(cubeGeometry, cubeMaterial);
-  cube.position.y = 1;
-  cube.castShadow = true; // make the cube cast shadows
-  scene.add(cube);
-}
-
-function create_scene(scene, camera, renderer, use_ground = true, axis_up = "z", axis_forward = "-y") {
-  const width = document.querySelector(".container").offsetWidth;
-  const height = width;
-
-  // Camera setup based on axis orientation
-  if (axis_up == "z") {
-    camera.up.set(0, 0, 1);
-    if (axis_forward == "-y") {
-      camera.position.set(0, -3, 3);
-    } else if (axis_forward == "y") {
-      camera.position.set(0, 3, 3);
-    }
-    camera.lookAt(new THREE.Vector3(0, 0, 1.5));
-  } else if (axis_up == "y") {
-    camera.up.set(0, 1, 0);
-    if (axis_forward == "z") {
-      camera.position.set(0, 2.5, 5);
-    } else if (axis_forward == "-z") {
-      camera.position.set(0, 2.5, -5);
-    }
-    camera.lookAt(new THREE.Vector3(0, 1, 0));
-  }
-
-  scene.background = new THREE.Color(0x000000);
-
-  // ===== Fog for depth perception =====
-  // Using FogExp2 for natural exponential falloff, density ~0.06
-  scene.fog = new THREE.FogExp2(0x424242, 0.06);
-
-  // ===== Shadow Configuration =====
-  renderer.shadowMap.enabled = true;
-  renderer.shadowMap.type = THREE.PCFSoftShadowMap;
-
-  // ===== Enhanced Lighting Setup =====
-
-  // 1. Hemisphere Light - natural sky/ground ambient
-  const hemisphereLight = new THREE.HemisphereLight(
-    0xffffff,  // sky color
-    0x444444,  // ground color
-    1.8        // intensity
-  );
-  hemisphereLight.position.set(0, 2, 0);
-  scene.add(hemisphereLight);
-
-  // 2. Main Directional Light (key light with shadows)
-  const directionalLight = new THREE.DirectionalLight(0xffffff, 1.5);
-  if (axis_up == "z") {
-    if (axis_forward == "-y") {
-      directionalLight.position.set(-3, 1, 5);
-    } else if (axis_forward == "y") {
-      directionalLight.position.set(3, 1, 5);
-    }
-  } else if (axis_up == "y") {
-    if (axis_forward == "z") {
-      directionalLight.position.set(3, 5, 4);
-    } else if (axis_forward == "-z") {
-      directionalLight.position.set(3, 5, -4);
-    }
-  }
-  directionalLight.castShadow = true;
-  directionalLight.shadow.mapSize.width = 2048;
-  directionalLight.shadow.mapSize.height = 2048;
-  directionalLight.shadow.camera.near = 0.5;
-  directionalLight.shadow.camera.far = 50;
-  directionalLight.shadow.camera.left = -10;
-  directionalLight.shadow.camera.right = 10;
-  directionalLight.shadow.camera.top = 10;
-  directionalLight.shadow.camera.bottom = -10;
-  directionalLight.shadow.bias = -0.0001;
-  scene.add(directionalLight);
-
-  // 3. Fill Light (softer, from opposite side)
-  const fillLight = new THREE.DirectionalLight(0xaaccff, 0.4);
-  fillLight.position.set(-3, 3, -2);
-  scene.add(fillLight);
-
-  // 4. Rim Light (back light for depth)
-  const rimLight = new THREE.DirectionalLight(0xffeedd, 0.3);
-  rimLight.position.set(0, 4, -5);
-  scene.add(rimLight);
-
-  // ===== Ground Setup =====
-  if (use_ground) {
-    if (axis_up == "z") {
-      var plane = getChessboard(50, 50, '#ffffff', '#3a3a3a', 1024);
-      plane.name = 'ground';
-      plane.receiveShadow = true;
-      scene.add(plane);
-    } else if (axis_up == "y") {
-      var plane = getChessboardXZ(50, 50, '#ffffff', '#3a3a3a', 1024);
-      plane.name = 'ground';
-      plane.receiveShadow = true;
-      scene.add(plane);
-    }
-
-    // Optional: coordinate axes helper
-    // var coord = getCoordinate(1);
-    // scene.add(coord);
-  }
-
-  return 0;
-}
-
-function fitCameraToScene(scene, camera, controls = null, opts = {}) {
-  const { margin = 1.05, axis_up = "y", excludeNames = ["ground"] } = opts;
-
-  const box = new THREE.Box3();
-  const tmp = new THREE.Box3();
-  let has = false;
-
-  scene.traverse((obj) => {
-    if (!obj || !obj.visible) return;
-    if (obj.isLight) return;
-    const t = obj.type || "";
-    if (t.endsWith("Helper")) return;
-    if (excludeNames && excludeNames.includes(obj.name)) return;
-
-    if (obj.isMesh) {
-      if (obj.geometry && obj.geometry.type === "PlaneGeometry") return;
-      try {
-        tmp.setFromObject(obj);
-        if (!tmp.isEmpty()) {
-          if (!has) {
-            box.copy(tmp);
-            has = true;
-          } else {
-            box.union(tmp);
-          }
-        }
-      } catch (_) {}
-    }
-  });
-
-  if (!has || box.isEmpty()) return;
-
-  const sphere = new THREE.Sphere();
-  box.getBoundingSphere(sphere);
-  const center = sphere.center.clone();
-  const radius = Math.max(sphere.radius, 1e-3);
-
-  const vFov = THREE.MathUtils.degToRad(camera.fov);
-  const hFov = 2 * Math.atan(Math.tan(vFov / 2) * camera.aspect);
-  const distV = radius / Math.sin(vFov / 2);
-  const distH = radius / Math.sin(hFov / 2);
-  const dist = Math.max(distV, distH) * margin;
-
-  // 25° top-down view (azimuth 45°, elevation 25°)
-  const elev = THREE.MathUtils.degToRad(25);
-  const azim = Math.PI / 4;
-  const horiz = Math.cos(elev);
-  let dir;
-
-  if (axis_up === "y") {
-    dir = new THREE.Vector3(Math.sin(azim) * horiz, Math.sin(elev), Math.cos(azim) * horiz);
-    camera.up.set(0, 1, 0);
-  } else {
-    dir = new THREE.Vector3(Math.sin(azim) * horiz, Math.cos(azim) * horiz, Math.sin(elev));
-    camera.up.set(0, 0, 1);
-  }
-
-  camera.position.copy(center).add(dir.multiplyScalar(dist));
-  camera.updateProjectionMatrix();
-  camera.lookAt(center);
-
-  if (controls) {
-    controls.target.copy(center);
-    controls.minDistance = Math.max(radius * 0.2, 0.1);
-    controls.maxDistance = Math.max(dist * 3, controls.minDistance + 0.1);
-    controls.update();
-  }
-}
-
-export { create_scene, fitCameraToScene };

scripts/gradio/static/scripts3d/draw_skeleton.js

@@ -1,121 +0,0 @@
-import * as THREE from "three";
-
-const defaultEdges = [
-  [1, 0],
-  [2, 1],
-  [3, 2],
-  [4, 3],
-  [5, 1],
-  [6, 5],
-  [7, 6],
-  [8, 1],
-  [9, 8],
-  [10, 9],
-  [11, 10],
-  [12, 8],
-  [13, 12],
-  [14, 13],
-  [15, 0],
-  [16, 0],
-  [17, 15],
-  [18, 16],
-  [19, 14],
-  [20, 19],
-  [21, 14],
-  [22, 11],
-  [23, 22],
-  [24, 11],
-];
-
-var geometries = [];
-
-function clearGeometries(scene) {
-  geometries.forEach((obj) => {
-    scene.remove(obj);
-    if (obj.geometry) obj.geometry.dispose();
-    if (obj.material) obj.material.dispose();
-  });
-  geometries = [];
-}
-
-function drawJoints(keypoints, scene, radius_joint) {
-  const sphereGeometry = new THREE.SphereGeometry(radius_joint, 32, 32);
-  const sphereMaterial = new THREE.MeshStandardMaterial({ color: 0xff0000 });
-
-  keypoints.forEach((point) => {
-    // Check visibility if confidence score exists
-    if (point.length > 3 && point[3] < 0.1) {
-      return;
-    }
-
-    const sphere = new THREE.Mesh(sphereGeometry, sphereMaterial);
-    sphere.position.set(point[0], point[1], point[2]);
-    geometries.push(sphere);
-    scene.add(sphere);
-  });
-}
-
-function drawLimbs(keypoints, edges, scene, radius_limb) {
-  const ellipsoidGeometry = new THREE.SphereGeometry(radius_limb, 32, 32);
-  const ellipsoidMaterial = new THREE.MeshStandardMaterial({ color: 0x0000ff });
-
-  edges.forEach((edge) => {
-    const idx1 = edge[0];
-    const idx2 = edge[1];
-
-    // Validate indices
-    if (idx1 >= keypoints.length || idx2 >= keypoints.length) {
-      return;
-    }
-
-    // Check visibility
-    const p1 = keypoints[idx1];
-    const p2 = keypoints[idx2];
-    if (
-      (p1.length > 3 && p1[3] < 0.1) ||
-      (p2.length > 3 && p2[3] < 0.1)
-    ) {
-      return;
-    }
-
-    const start = new THREE.Vector3(p1[0], p1[1], p1[2]);
-    const end = new THREE.Vector3(p2[0], p2[1], p2[2]);
-
-    const direction = new THREE.Vector3().subVectors(end, start);
-    const length = direction.length();
-
-    // create an ellipsoid
-    const ellipsoid = new THREE.Mesh(ellipsoidGeometry, ellipsoidMaterial);
-
-    // scale: x,y = 1 (radius_limb), z matches length
-    ellipsoid.scale.set(1, 1, length / 2 / radius_limb);
-
-    // position: midpoint
-    ellipsoid.position.addVectors(start, end).multiplyScalar(0.5);
-
-    // rotation: point to end
-    ellipsoid.lookAt(end);
-
-    geometries.push(ellipsoid);
-    scene.add(ellipsoid);
-  });
-}
-
-function drawSingleSkeleton(keypoints, edges, scene, radius_joint, radius_limb) {
-  drawJoints(keypoints, scene, radius_joint);
-  drawLimbs(keypoints, edges, scene, radius_limb);
-}
-
-function visualizeSkeleton(keypoints, scene, radius_joint = 0.02, radius_limb = 0.03) {
-  clearGeometries(scene);
-  drawSingleSkeleton(keypoints, defaultEdges, scene, radius_joint, radius_limb);
-}
-
-function visualizeAllSkeleton(infos, scene, radius_joint = 0.02, radius_limb = 0.03) {
-  clearGeometries(scene);
-  infos.forEach((info) => {
-    drawSingleSkeleton(info.keypoints3d, info.edges, scene, radius_joint, radius_limb);
-  });
-}
-
-export { visualizeAllSkeleton, visualizeSkeleton };

scripts/gradio/static/scripts3d/load_smpl.js

@@ -1,126 +0,0 @@
-import * as THREE from "three";
-
-const NUM_SKIN_WEIGHTS = 4;
-
-async function load_smpl_with_shapes(shapes, gender) {
-  const urls = {
-    neutral: [
-      "/static/assets/dump_smplh/v_template.bin",
-      "/static/assets/dump_smplh/faces.bin",
-      "/static/assets/dump_smplh/skinWeights.bin",
-      "/static/assets/dump_smplh/skinIndice.bin",
-      "/static/assets/dump_smplh/j_template.bin",
-    ],
-  }[gender];
-  const gender_color = {
-    neutral: 0xffffff,
-    male: 0x6495ed, // Cornflower blue (lighter blue)
-    female: 0xff6b81, // Light coral (softer red)
-  };
-
-  console.log(shapes.length);
-  const geometry = new THREE.BufferGeometry();
-  const buffers = await Promise.all(urls.map((url) => fetch(url).then((response) => response.arrayBuffer())));
-  const v_template = new Float32Array(buffers[0]);
-  const offsets = await Promise.all(
-    shapes.map((_, i) =>
-      fetch("/static/assets/dump_smplh/shapeoffset_" + i + ".bin")
-        .then((response) => response.arrayBuffer())
-        .then((buffer) => new Float32Array(buffer)),
-    ),
-  );
-  const offsets_j = await Promise.all(
-    shapes.map((_, i) =>
-      fetch("/static/assets/dump_smplh/shapeoffset_j_" + i + ".bin")
-        .then((response) => response.arrayBuffer())
-        .then((buffer) => new Float32Array(buffer)),
-    ),
-  );
-  offsets.forEach((offset, i) => {
-    for (let j = 0; j < v_template.length / 3; j++) {
-      v_template[3 * j] += offset[3 * j] * shapes[i];
-      v_template[3 * j + 1] += offset[3 * j + 1] * shapes[i];
-      v_template[3 * j + 2] += offset[3 * j + 2] * shapes[i];
-    }
-  });
-  const faces = new Uint16Array(buffers[1]);
-  const skinWeights = new Float32Array(buffers[2]);
-  const skinIndices = new Uint16Array(buffers[3]);
-
-  const keypoints = new Float32Array(buffers[4]);
-  for (let i = 0; i < keypoints.length / 3; i++) {
-    console.log("keypoints", keypoints[3 * i], keypoints[3 * i + 1], keypoints[3 * i + 2]);
-  }
-
-  offsets_j.forEach((offset_j, i) => {
-    console.log("shape id", i, shapes[i]);
-    console.log("keypoints", keypoints[0], keypoints[1], keypoints[2]);
-    console.log("offset_j", offset_j[0], offset_j[1], offset_j[2]);
-
-    for (let j = 0; j < keypoints.length / 3; j++) {
-      keypoints[3 * j] += offset_j[3 * j] * shapes[i];
-      keypoints[3 * j + 1] += offset_j[3 * j + 1] * shapes[i];
-      keypoints[3 * j + 2] += offset_j[3 * j + 2] * shapes[i];
-    }
-  });
-
-  // edges contain the skeleton link relationship
-  // const edges = [-1, 0, 0, 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 9, 9, 12, 13, 14, 16, 17, 18, 19, 20, 21];
-  const edges = [
-    -1, 0, 0, 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 9, 9, 12, 13, 14, 16, 17, 18, 19, 20, 22, 23, 20, 25, 26, 20, 28, 29, 20,
-    31, 32, 20, 34, 35, 21, 37, 38, 21, 40, 41, 21, 43, 44, 21, 46, 47, 21, 49, 50,
-  ];
-  // assume jointPositions is a J x 3 array, each element is an array containing X, Y, Z coordinates
-  var rootBone = new THREE.Bone();
-  rootBone.position.set(keypoints[0], keypoints[1], keypoints[2]);
-  // scene.add(rootBone);
-  var bones = [rootBone];
-  // create bones
-  for (let i = 1; i < keypoints.length / 3; i++) {
-    const bone = new THREE.Bone();
-    const parentIndex = edges[i];
-    bone.position.set(
-      keypoints[3 * i] - keypoints[3 * parentIndex],
-      keypoints[3 * i + 1] - keypoints[3 * parentIndex + 1],
-      keypoints[3 * i + 2] - keypoints[3 * parentIndex + 2],
-    );
-    console.log(i, bone.position);
-    bones.push(bone);
-    bones[parentIndex].add(bone);
-  }
-  var skeleton = new THREE.Skeleton(bones);
-  geometry.setIndex(new THREE.BufferAttribute(faces, 1));
-
-  geometry.setAttribute("position", new THREE.BufferAttribute(v_template, 3));
-  geometry.setAttribute("skinIndex", new THREE.BufferAttribute(skinIndices, NUM_SKIN_WEIGHTS));
-  geometry.setAttribute("skinWeight", new THREE.BufferAttribute(skinWeights, NUM_SKIN_WEIGHTS));
-
-  geometry.computeVertexNormals();
-  console.log(geometry);
-  const material = new THREE.MeshStandardMaterial({
-    color: gender_color[gender],
-    skinning: true,
-    side: THREE.DoubleSide,
-  });
-  var mesh = new THREE.SkinnedMesh(geometry, material);
-  mesh.castShadow = true;
-  mesh.receiveShadow = true;
-  mesh.add(bones[0]);
-  mesh.bind(skeleton);
-  return { bones, skeleton, mesh };
-}
-
-function reshapeArrayTo2D(float32Array, rows) {
-  const twoDArray = [];
-  const cols = float32Array.length / rows;
-  for (let i = 0; i < rows; i++) {
-    const row = new Float32Array(cols);
-    for (let j = 0; j < cols; j++) {
-      row[j] = float32Array[i * cols + j];
-    }
-    twoDArray.push(row);
-  }
-  return twoDArray;
-}
-
-export { load_smpl_with_shapes };

scripts/gradio/static/scripts3d/load_wooden.js

@@ -1,167 +0,0 @@
-import * as THREE from 'three';
-
-const NUM_SKIN_WEIGHTS = 4;
-
-// SMPL-H joint names (52 joints)
-const SMPLH_JOINT_NAMES = [
-    "Pelvis", "L_Hip", "R_Hip", "Spine1",
-    "L_Knee", "R_Knee", "Spine2",
-    "L_Ankle", "R_Ankle", "Spine3",
-    "L_Foot", "R_Foot", "Neck", "L_Collar", "R_Collar", "Head",
-    "L_Shoulder", "R_Shoulder", "L_Elbow", "R_Elbow",
-    "L_Wrist", "R_Wrist",
-    "L_Index1", "L_Index2", "L_Index3",
-    "L_Middle1", "L_Middle2", "L_Middle3",
-    "L_Pinky1", "L_Pinky2", "L_Pinky3",
-    "L_Ring1", "L_Ring2", "L_Ring3",
-    "L_Thumb1", "L_Thumb2", "L_Thumb3",
-    "R_Index1", "R_Index2", "R_Index3",
-    "R_Middle1", "R_Middle2", "R_Middle3",
-    "R_Pinky1", "R_Pinky2", "R_Pinky3",
-    "R_Ring1", "R_Ring2", "R_Ring3",
-    "R_Thumb1", "R_Thumb2", "R_Thumb3",
-];
-
-// Default kintree (parent indices) for SMPL-H 52 joints
-const DEFAULT_EDGES = [-1, 0, 0, 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 9, 9, 12, 13, 14, 16, 17, 18, 19, 20, 22, 23, 20, 25, 26, 20, 28, 29, 20, 31, 32, 20, 34, 35, 21, 37, 38, 21, 40, 41, 21, 43, 44, 21, 46, 47, 21, 49, 50];
-
-/**
- * Load wooden model from binary files
- * @param {Array} shapes - Shape parameters (unused for wooden model)
- * @param {string} gender - Gender parameter (unused for wooden model)
- * @returns {Object} { bones, skeleton, mesh, jointNames }
- */
-async function load_wooden(shapes, gender, basePath = '/static/assets/dump_wooden') {
-    console.log("Loading wooden model...");
-    console.log(`Using base path: ${basePath}`);
-
-    const urls = [
-        `${basePath}/v_template.bin`,
-        `${basePath}/faces.bin`,
-        `${basePath}/skinWeights.bin`,
-        `${basePath}/skinIndice.bin`,
-        `${basePath}/j_template.bin`,
-        `${basePath}/uvs.bin`,
-    ];
-
-    // Try to load kintree
-    let edges = [...DEFAULT_EDGES];
-    try {
-        const kintreeResponse = await fetch(`${basePath}/kintree.bin`);
-        if (kintreeResponse.ok) {
-            const kintreeBuffer = await kintreeResponse.arrayBuffer();
-            edges = Array.from(new Int32Array(kintreeBuffer));
-            console.log(`Loaded kintree with ${edges.length} joints`);
-        }
-    } catch (e) {
-        console.log('Using default kintree');
-    }
-
-    // Try to load joint names
-    let jointNames = [...SMPLH_JOINT_NAMES];
-    try {
-        const namesResponse = await fetch(`${basePath}/joint_names.json`);
-        if (namesResponse.ok) {
-            jointNames = await namesResponse.json();
-            console.log(`Loaded ${jointNames.length} joint names`);
-        }
-    } catch (e) {
-        console.log('Using default joint names');
-    }
-
-    // Load main buffers
-    const buffers = await Promise.all(urls.map(url => fetch(url).then(response => response.arrayBuffer())));
-    const v_template = new Float32Array(buffers[0]);
-    const faces = new Uint16Array(buffers[1]);
-    const skinWeights = new Float32Array(buffers[2]);
-    const skinIndices = new Uint16Array(buffers[3]);
-    const keypoints = new Float32Array(buffers[4]);
-    const uvs = new Float32Array(buffers[5]);
-
-    console.log(`Vertices: ${v_template.length / 3}, Faces: ${faces.length / 3}, Joints: ${keypoints.length / 3}`);
-
-    // Create geometry
-    const geometry = new THREE.BufferGeometry();
-    geometry.setAttribute('position', new THREE.BufferAttribute(v_template, 3));
-    geometry.setIndex(new THREE.BufferAttribute(faces, 1));
-    geometry.setAttribute('skinIndex', new THREE.BufferAttribute(skinIndices, NUM_SKIN_WEIGHTS));
-    geometry.setAttribute('skinWeight', new THREE.BufferAttribute(skinWeights, NUM_SKIN_WEIGHTS));
-    geometry.setAttribute('uv', new THREE.BufferAttribute(uvs, 2));
-
-    // Create bones
-    const numJoints = keypoints.length / 3;
-
-    // Ensure edges array matches joint count
-    while (edges.length < numJoints) {
-        edges.push(0);
-    }
-
-    // Root bone
-    var rootBone = new THREE.Bone();
-    rootBone.position.set(keypoints[0], keypoints[1], keypoints[2]);
-    rootBone.name = jointNames[0] || 'Pelvis';
-    var bones = [rootBone];
-
-    // Create child bones
-    for (let i = 1; i < numJoints; i++) {
-        const bone = new THREE.Bone();
-        const parentIndex = edges[i];
-
-        if (parentIndex >= 0 && parentIndex < i) {
-            bone.position.set(
-                keypoints[3 * i] - keypoints[3 * parentIndex],
-                keypoints[3 * i + 1] - keypoints[3 * parentIndex + 1],
-                keypoints[3 * i + 2] - keypoints[3 * parentIndex + 2]
-            );
-            bone.name = jointNames[i] || `Joint_${i}`;
-            bones.push(bone);
-            bones[parentIndex].add(bone);
-            console.log(`Joint ${i} (${bone.name}): parent=${parentIndex}, pos=${bone.position.toArray()}`);
-        } else {
-            console.warn(`Invalid parent index ${parentIndex} for joint ${i}, attaching to root`);
-            bone.position.set(0, 0, 0);
-            bone.name = jointNames[i] || `Joint_${i}`;
-            bones.push(bone);
-            bones[0].add(bone);
-        }
-    }
-
-    var skeleton = new THREE.Skeleton(bones);
-
-    geometry.computeVertexNormals();
-
-    // --- Texture Loading ---
-    const textureLoader = new THREE.TextureLoader();
-
-    async function loadTextureAsync(url, isSRGB = true) {
-        const tex = await textureLoader.loadAsync(url);
-        tex.flipY = false;
-        if (isSRGB) tex.colorSpace = THREE.SRGBColorSpace;
-        return tex;
-    }
-
-    const [baseColorMap] = await Promise.all([
-        loadTextureAsync(`${basePath}/Boy_lambert4_BaseColor.webp`, true),
-    ]);
-
-    // Create material - PBR with textures (optimized for dark mode)
-    const material = new THREE.MeshStandardMaterial({
-        map: baseColorMap,
-        roughness: 0.6,      // Lower roughness for better light reflection
-        metalness: 0.2,      // Lower metalness for more natural look
-        envMapIntensity: 1.5, // Enhanced environment lighting
-    });
-
-    var mesh = new THREE.SkinnedMesh(geometry, material);
-    mesh.castShadow = true;
-    mesh.receiveShadow = true;
-    mesh.add(bones[0]);
-    mesh.bind(skeleton);
-
-    console.log(`Wooden model loaded: ${numJoints} joints, ${v_template.length / 3} vertices`);
-
-    return { bones, skeleton, mesh, jointNames, edges };
-}
-
-export { DEFAULT_EDGES, load_wooden, NUM_SKIN_WEIGHTS, SMPLH_JOINT_NAMES };
-

scripts/gradio/templates/element/blank.html

@@ -1,53 +0,0 @@
-<!DOCTYPE html>
-<html>
-
-<head>
-    <title>{% block title %} {% endblock %}</title>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <!-- Add Bootstrap CSS (CDN) -->
-    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
-    <!-- Add jQuery and Bootstrap JS (CDN) -->
-    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
-    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.10.2/dist/umd/popper.min.js"></script>
-    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.min.js"></script>
-    <style>
-        /* Dark mode base */
-        html, body {
-            background: #1a1a2e !important;
-            color: #e2e8f0;
-            margin: 0;
-            padding: 0;
-        }
-
-        .container {
-            padding: 0;
-            border: none;
-            background: #1a1a2e;
-        }
-
-        .alert-success {
-            display: none;
-        }
-
-        {% block style %}
-        {% endblock %}
-    </style>
-</head>
-
-<body>
-
-    {% block content_block %}
-    {% endblock %}
-
-    {% block script_block %}
-    {% endblock %}
-
-    <div class="container alert-success mt-3" role="alert">
-        {% block help %}
-
-        {% endblock %}
-    </div>
-</body>
-
-</html>

scripts/gradio/templates/error_file_not_found.html

@@ -1,64 +0,0 @@
-<!DOCTYPE html>
-<html lang="zh-CN">
-
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>File not found - 404</title>
-    <style>
-        * {
-            margin: 0;
-            padding: 0;
-            box-sizing: border-box;
-        }
-
-        body {
-            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
-            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-            min-height: 100vh;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            padding: 20px;
-        }
-
-        .container {
-            background: white;
-            border-radius: 12px;
-            box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
-            max-width: 500px;
-            width: 100%;
-            overflow: hidden;
-            text-align: center;
-            padding: 40px;
-        }
-
-        h1 {
-            color: #e74c3c;
-            font-size: 4em;
-            margin-bottom: 20px;
-        }
-
-        h2 {
-            color: #333;
-            font-size: 1.5em;
-            margin-bottom: 15px;
-        }
-
-        p {
-            color: #666;
-            font-size: 1.1em;
-            line-height: 1.6;
-        }
-    </style>
-</head>
-
-<body>
-    <div class="container">
-        <h1>404</h1>
-        <h2>Oops! File Not Found</h2>
-        <p>We couldn't find the file you're looking for.<br>Please check the URL or try again later.</p>
-    </div>
-</body>
-
-</html>

scripts/gradio/templates/index_smpl_gradio.html

@@ -1,938 +0,0 @@
-{% extends 'element/blank.html' %}
-
-{% block content_block %}
-
-<div class="container mt-3">
-    <!-- Caption container -->
-    {% if not hide_captions %}
-    <div class="caption-container">
-        <div class="motion-info" id="motion-info">
-            <div class="loading">
-                <i class="fas fa-spinner fa-spin"></i> Loading action descriptions...
-            </div>
-        </div>
-    </div>
-    {% endif %}
-
-    <!-- 3D container -->
-    <div class="vis3d-wrapper" style="position: relative;">
-        <div class="d-flex justify-content-center" id="vis3d">
-        </div>
-    </div>
-
-    <!-- Playback control panel -->
-    <div class="control-panel-embedded mt-3">
-        <div class="control-row-compact">
-            <div class="control-group">
-                <button id="playPauseBtn" class="control-btn" title="Play/Pause">
-                    <i class="fas fa-play"></i>
-                </button>
-                <button id="resetBtn" class="control-btn" title="Reset to start">
-                    <i class="fas fa-step-backward"></i>
-                </button>
-            </div>
-
-            <div class="progress-group">
-                <input type="range" id="progressSlider" class="progress-slider" min="0" max="100" value="0">
-            </div>
-
-            <div class="info-group">
-                <div class="frame-info">
-                    <span id="currentFrame">0</span> / <span id="totalFrames">0</span>
-                </div>
-                <div class="loading-status" id="loadingStatus">
-                    <i class="fas fa-spinner fa-spin"></i> Loading...
-                </div>
-            </div>
-
-            <div class="speed-group">
-                <label for="speedSlider">Speed:</label>
-                <input type="range" id="speedSlider" class="speed-slider" min="0.1" max="3" step="0.1" value="1">
-                <span id="speedValue">1.0x</span>
-            </div>
-        </div>
-    </div>
-</div>
-
-<!-- Add Font Awesome for icons -->
-<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
-
-<script type="importmap">
-    {
-        "imports": {
-            "three": "https://cdn.jsdelivr.net/npm/three@0.160.0/build/three.module.js",
-            "three/addons/": "https://cdn.jsdelivr.net/npm/three@0.160.0/examples/jsm/"
-        }
-    }
-</script>
-
-<script type="module">
-    import * as THREE from 'three';
-    import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
-    import { getChessboardXZ, getCoordinate } from '/static/scripts3d/create_ground.js';
-    import { create_scene, fitCameraToScene } from '/static/scripts3d/create_scene.js';
-    import { load_smpl_with_shapes } from '/static/scripts3d/load_smpl.js';
-
-    let scene, camera, renderer;
-    let controls;
-    let infos;
-    let currentFrame = 0;
-    let total_frame = 0;
-    const baseIntervalTime = 30;
-    var model_mesh = {};
-
-    let isPlaying = false;
-    let lastFrameTime = 0;
-    let playbackSpeed = 1.0;
-    let animationId = null;
-    let modelsLoaded = false;
-    let expectedModelCount = 0;
-    let loadedModelCount = 0;
-
-    let ignoreGlobalTrans = false;
-    let currentOffsets = [];
-
-    const updateFrame = () => {
-        if (!infos || currentFrame >= total_frame || !modelsLoaded) return;
-
-        const info = infos[currentFrame];
-        let allModelsReady = true;
-
-        info.forEach(smpl_params => {
-            if (!(smpl_params.id in model_mesh)) {
-                allModelsReady = false;
-            }
-        });
-
-        if (!allModelsReady) {
-            return;
-        }
-
-        const offsets = computeOffsets(info.length);
-        currentOffsets = offsets;
-
-        info.forEach((smpl_params, b) => {
-            const bones = model_mesh[smpl_params.id];
-            const mesh = bones[0].parent;
-
-            if (ignoreGlobalTrans) {
-                mesh.position.set(-offsets[b], 0, 0);
-            } else {
-                mesh.position.set(
-                    smpl_params.Th[0][0] - offsets[b],
-                    smpl_params.Th[0][1],
-                    smpl_params.Th[0][2]
-                );
-            }
-
-            var axis = new THREE.Vector3(smpl_params.Rh[0][0], smpl_params.Rh[0][1], smpl_params.Rh[0][2]);
-            var angle = axis.length();
-            axis.normalize();
-
-            var poses_offset = 0;
-            if (smpl_params.poses[0].length == 69) {
-                poses_offset = -3;
-            }
-            for (let i = 0; i < bones.length; i++) {
-                var axis = new THREE.Vector3(
-                    smpl_params.poses[0][poses_offset + 3 * i],
-                    smpl_params.poses[0][poses_offset + 3 * i + 1],
-                    smpl_params.poses[0][poses_offset + 3 * i + 2]);
-                var angle = axis.length();
-                axis.normalize();
-                var quaternion = new THREE.Quaternion().setFromAxisAngle(axis, angle);
-                bones[i].quaternion.copy(quaternion);
-            }
-        });
-
-        updateUI();
-    }
-
-    const playLoop = (currentTime) => {
-        if (isPlaying && currentTime - lastFrameTime >= (baseIntervalTime / playbackSpeed)) {
-            currentFrame += 1;
-            if (currentFrame >= total_frame) {
-                currentFrame = 0;
-            }
-            updateFrame();
-            lastFrameTime = currentTime;
-        }
-
-        if (isPlaying) {
-            animationId = requestAnimationFrame(playLoop);
-        }
-    }
-
-    const updateUI = () => {
-        document.getElementById('currentFrame').textContent = currentFrame;
-        document.getElementById('totalFrames').textContent = total_frame;
-
-        if (total_frame > 0) {
-            const progress = (currentFrame / total_frame) * 100;
-            document.getElementById('progressSlider').value = progress;
-        }
-    }
-
-    const updateLoadingStatus = () => {
-        const loadingElement = document.getElementById('loadingStatus');
-        if (!loadingElement) return;
-
-        if (modelsLoaded) {
-            loadingElement.innerHTML = '<i class="fas fa-check"></i> Model loaded';
-            loadingElement.className = 'loading-status complete';
-            setTimeout(() => {
-                loadingElement.className = 'loading-status hidden';
-            }, 3000);
-        } else {
-            loadingElement.innerHTML = `<i class="fas fa-spinner fa-spin"></i> Loading models... (${loadedModelCount}/${expectedModelCount})`;
-            loadingElement.className = 'loading-status';
-        }
-    }
-
-    const updatePlayPauseButton = () => {
-        const playPauseBtn = document.getElementById('playPauseBtn');
-        if (playPauseBtn) {
-            if (isPlaying) {
-                playPauseBtn.innerHTML = '<i class="fas fa-pause"></i>';
-                playPauseBtn.title = 'Pause';
-            } else {
-                playPauseBtn.innerHTML = '<i class="fas fa-play"></i>';
-                playPauseBtn.title = 'Play';
-            }
-        }
-    }
-
-    const enablePlaybackControls = () => {
-        const playPauseBtn = document.getElementById('playPauseBtn');
-        const resetBtn = document.getElementById('resetBtn');
-        const progressSlider = document.getElementById('progressSlider');
-        const speedSlider = document.getElementById('speedSlider');
-
-        [playPauseBtn, resetBtn, progressSlider, speedSlider].forEach(element => {
-            if (element) {
-                element.disabled = false;
-                element.style.opacity = '1';
-                element.style.cursor = 'pointer';
-            }
-        });
-
-        updatePlayPauseButton();
-    }
-
-    const playAnimation = () => {
-        if (!isPlaying && total_frame > 0 && modelsLoaded) {
-            isPlaying = true;
-            lastFrameTime = performance.now();
-            animationId = requestAnimationFrame(playLoop);
-            updatePlayPauseButton();
-        }
-    }
-
-    const pauseAnimation = () => {
-        isPlaying = false;
-        if (animationId) {
-            cancelAnimationFrame(animationId);
-            animationId = null;
-        }
-        updatePlayPauseButton();
-    }
-
-    const resetAnimation = () => {
-        pauseAnimation();
-        currentFrame = 0;
-        updateFrame();
-        updatePlayPauseButton();
-    }
-
-    const initPlaybackControls = () => {
-        const playPauseBtn = document.getElementById('playPauseBtn');
-        const resetBtn = document.getElementById('resetBtn');
-        const progressSlider = document.getElementById('progressSlider');
-        const speedSlider = document.getElementById('speedSlider');
-        const speedValue = document.getElementById('speedValue');
-
-        [playPauseBtn, resetBtn, progressSlider, speedSlider].forEach(element => {
-            if (element) {
-                element.disabled = true;
-                element.style.opacity = '0.5';
-                element.style.cursor = 'not-allowed';
-            }
-        });
-
-        updatePlayPauseButton();
-
-        playPauseBtn.addEventListener('click', () => {
-            if (!modelsLoaded) return;
-            if (isPlaying) {
-                pauseAnimation();
-            } else {
-                playAnimation();
-            }
-        });
-
-        resetBtn.addEventListener('click', () => {
-            if (!modelsLoaded) return;
-            resetAnimation();
-        });
-
-        let wasPlaying = false;
-        progressSlider.addEventListener('mousedown', () => {
-            if (!modelsLoaded) return;
-            wasPlaying = isPlaying;
-            if (isPlaying) pauseAnimation();
-        });
-
-        progressSlider.addEventListener('input', (e) => {
-            if (!modelsLoaded) return;
-            const progress = parseFloat(e.target.value);
-            currentFrame = Math.floor((progress / 100) * total_frame);
-            if (currentFrame >= total_frame) currentFrame = total_frame - 1;
-            if (currentFrame < 0) currentFrame = 0;
-            updateFrame();
-        });
-
-        progressSlider.addEventListener('mouseup', () => {
-            if (!modelsLoaded) return;
-            if (wasPlaying) playAnimation();
-        });
-
-        speedSlider.addEventListener('input', (e) => {
-            playbackSpeed = parseFloat(e.target.value);
-            speedValue.textContent = playbackSpeed.toFixed(1) + 'x';
-        });
-
-        document.addEventListener('keydown', (e) => {
-            if (!modelsLoaded) return;
-            switch (e.code) {
-                case 'Space':
-                    e.preventDefault();
-                    if (isPlaying) {
-                        pauseAnimation();
-                    } else {
-                        playAnimation();
-                    }
-                    break;
-                case 'ArrowLeft':
-                    e.preventDefault();
-                    if (currentFrame > 0) {
-                        currentFrame--;
-                        updateFrame();
-                    }
-                    break;
-                case 'ArrowRight':
-                    e.preventDefault();
-                    if (currentFrame < total_frame - 1) {
-                        currentFrame++;
-                        updateFrame();
-                    }
-                    break;
-                case 'Home':
-                    e.preventDefault();
-                    resetAnimation();
-                    break;
-            }
-        });
-    }
-
-    async function waitAndFetchData() {
-        try {
-            const waitResponse = await fetch('/wait_for_data');
-            const waitResult = await waitResponse.json();
-
-            if (waitResult.status === 'ready') {
-                console.log(`Data ready with ${waitResult.frames} frames`);
-                fetchSMPLData();
-            } else {
-                console.log('Timeout waiting for data, trying direct fetch...');
-                fetchSMPLData();
-            }
-        } catch (error) {
-            console.error('Error waiting for data:', error);
-            fetchSMPLData();
-        }
-    }
-
-    waitAndFetchData();
-
-    function fetchSMPLData() {
-        fetch('/query_smpl/{{ folder_name }}/{{ file_name }}')
-            .then(response => response.json())
-            .then(async datas => {
-                if (!datas || datas.length === 0) {
-                    console.log('No data received, retrying in 2 seconds...');
-                    setTimeout(fetchSMPLData, 2000);
-                    return;
-                }
-
-                console.log(`Received ${datas.length} frames of SMPL data`);
-                infos = datas;
-                total_frame = datas.length;
-
-                updateGroundWithData(datas);
-                document.getElementById('progressSlider').max = 100;
-                updateUI();
-                updatePlayPauseButton();
-
-                expectedModelCount = infos[0].length;
-
-                loadedModelCount = 0;
-                modelsLoaded = false;
-                updateLoadingStatus();
-
-                infos[0].forEach(data => {
-                    load_smpl_with_shapes(data.shapes[0], data.gender).then(result => {
-                        scene.add(result.mesh);
-
-                        const skeletonHelper = new THREE.SkeletonHelper(result.mesh);
-                        scene.add(skeletonHelper);
-
-                        model_mesh[data.id] = result.bones;
-
-                        loadedModelCount++;
-
-                        if (loadedModelCount === expectedModelCount) {
-                            modelsLoaded = true;
-                            updateLoadingStatus();
-                            updateFrame();
-                            enablePlaybackControls();
-                            fitCameraToScene(scene, camera, controls, { axis_up: 'y', excludeNames: ['ground'] });
-                            setTimeout(() => playAnimation(), 500);
-                        } else {
-                            updateLoadingStatus();
-                        }
-                    }).catch(err => {
-                        console.error("Failed to load SMPL model:", err);
-                    });
-                });
-
-                initPlaybackControls();
-                animate();
-            });
-    }
-
-    function updateGroundWithData(smplData) {
-        const sampleData = smplData.map(frame => {
-            const offsets = computeOffsets(frame.length);
-            return {
-                positions: frame.map((person, b) => ({
-                    x: person.Th[0][0] - offsets[b],
-                    y: person.Th[0][1],
-                    z: person.Th[0][2]
-                }))
-            };
-        });
-
-        const objectsToRemove = [];
-        scene.traverse((child) => {
-            if (child.isMesh && child.geometry &&
-                (child.geometry.type === 'PlaneGeometry' || child.name === 'ground')) {
-                objectsToRemove.push(child);
-            }
-        });
-
-        objectsToRemove.forEach(obj => {
-            scene.remove(obj);
-            if (obj.geometry) obj.geometry.dispose();
-            if (obj.material) {
-                if (obj.material.map) obj.material.map.dispose();
-                obj.material.dispose();
-            }
-        });
-
-        const adaptiveGround = getChessboardXZ(5, 10, '#ffffff', '#444444', 1024, sampleData);
-        adaptiveGround.name = 'ground';
-        scene.add(adaptiveGround);
-    }
-
-    init();
-
-    function init() {
-        const width = document.querySelector('.container').offsetWidth;
-        const height = width * 13 / 16;
-        scene = new THREE.Scene();
-        camera = new THREE.PerspectiveCamera(60, width / height, 0.01, 100);
-        renderer = new THREE.WebGLRenderer({ antialias: true, logarithmicDepthBuffer: true });
-
-        create_scene(scene, camera, renderer, true, 'y', 'z');
-        renderer.setPixelRatio(window.devicePixelRatio);
-        renderer.setSize(width, height);
-        var container = document.getElementById('vis3d');
-        container.appendChild(renderer.domElement);
-
-        controls = new OrbitControls(camera, renderer.domElement);
-        controls.minDistance = 1;
-        controls.maxDistance = 10;
-        fitCameraToScene(scene, camera, controls, { axis_up: 'y', excludeNames: ['ground'] });
-    }
-
-    function animate() {
-        requestAnimationFrame(animate);
-        renderer.render(scene, camera);
-    }
-
-    function computeOffsets(batchSize) {
-        const spacing = 2.0;
-        const total_width = (batchSize - 1) * spacing;
-        const start_x = -total_width / 2;
-        const offsets = [];
-        for (let i = 0; i < batchSize; i++) {
-            offsets.push(start_x + i * spacing);
-        }
-        return offsets;
-    }
-
-</script>
-
-<style>
-    /* Navigation Controls */
-    .nav-controls {
-        position: absolute;
-        top: 10px;
-        left: 10px;
-        display: flex;
-        gap: 10px;
-        z-index: 1000;
-    }
-
-    .nav-btn {
-        background: rgba(102, 126, 234, 0.9);
-        color: white;
-        border: none;
-        border-radius: 6px;
-        padding: 8px 12px;
-        font-size: 12px;
-        cursor: pointer;
-        transition: all 0.3s ease;
-        display: flex;
-        align-items: center;
-        gap: 4px;
-    }
-
-    .nav-btn:hover {
-        background: rgba(102, 126, 234, 1);
-        transform: translateY(-1px);
-    }
-
-    .container {
-        position: relative;
-    }
-
-    /* Control Panel Styles */
-    .control-panel-embedded {
-        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-        border-radius: 12px;
-        padding: 15px;
-        color: white;
-        margin-top: 15px;
-        box-shadow: 0 4px 15px rgba(102, 126, 234, 0.2);
-    }
-
-    .control-row-compact {
-        display: flex;
-        align-items: center;
-        justify-content: space-between;
-        gap: 15px;
-        margin-bottom: 0;
-    }
-
-    .control-group {
-        display: flex;
-        gap: 10px;
-        flex-shrink: 0;
-    }
-
-    .progress-group {
-        flex: 1;
-        margin: 0 15px;
-    }
-
-    .info-group {
-        display: flex;
-        align-items: center;
-        gap: 10px;
-        flex-shrink: 0;
-    }
-
-    .speed-group {
-        display: flex;
-        align-items: center;
-        gap: 8px;
-        flex-shrink: 0;
-    }
-
-    .control-btn {
-        background: rgba(255, 255, 255, 0.2);
-        border: 2px solid rgba(255, 255, 255, 0.3);
-        border-radius: 50px;
-        width: 50px;
-        height: 50px;
-        color: white;
-        font-size: 18px;
-        cursor: pointer;
-        transition: all 0.3s ease;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-    }
-
-    .control-btn:hover {
-        background: rgba(255, 255, 255, 0.3);
-        border-color: rgba(255, 255, 255, 0.6);
-        transform: scale(1.1);
-    }
-
-    .control-btn:active {
-        transform: scale(0.95);
-    }
-
-    .control-btn:disabled,
-    .progress-slider:disabled,
-    .speed-slider:disabled {
-        pointer-events: none;
-        opacity: 0.5 !important;
-        cursor: not-allowed !important;
-    }
-
-    .frame-info {
-        background: rgba(255, 255, 255, 0.2);
-        padding: 6px 12px;
-        border-radius: 20px;
-        font-family: 'Courier New', monospace;
-        font-weight: bold;
-        font-size: 14px;
-    }
-
-    .loading-status {
-        background: rgba(255, 255, 255, 0.2);
-        padding: 6px 12px;
-        border-radius: 20px;
-        font-size: 12px;
-        color: #ffeb3b;
-        display: flex;
-        align-items: center;
-        gap: 6px;
-    }
-
-    .loading-status.hidden {
-        display: none;
-    }
-
-    .loading-status.complete {
-        color: #4caf50;
-    }
-
-    .progress-slider {
-        width: 100%;
-        height: 6px;
-        border-radius: 3px;
-        background: rgba(255, 255, 255, 0.3);
-        outline: none;
-        cursor: pointer;
-    }
-
-    .progress-slider::-webkit-slider-thumb {
-        appearance: none;
-        width: 20px;
-        height: 20px;
-        border-radius: 50%;
-        background: white;
-        cursor: pointer;
-        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
-    }
-
-    .progress-slider::-moz-range-thumb {
-        width: 20px;
-        height: 20px;
-        border-radius: 50%;
-        background: white;
-        cursor: pointer;
-        border: none;
-        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
-    }
-
-    .speed-slider {
-        width: 80px;
-        height: 4px;
-        border-radius: 2px;
-        background: rgba(255, 255, 255, 0.3);
-        outline: none;
-        cursor: pointer;
-    }
-
-    .speed-slider::-webkit-slider-thumb {
-        appearance: none;
-        width: 16px;
-        height: 16px;
-        border-radius: 50%;
-        background: white;
-        cursor: pointer;
-    }
-
-    .speed-slider::-moz-range-thumb {
-        width: 16px;
-        height: 16px;
-        border-radius: 50%;
-        background: white;
-        cursor: pointer;
-        border: none;
-    }
-
-    #speedValue {
-        font-family: 'Courier New', monospace;
-        font-weight: bold;
-        min-width: 40px;
-    }
-
-    /* Responsive design */
-    @media (max-width: 768px) {
-        .control-row-compact {
-            flex-direction: column;
-            gap: 10px;
-        }
-
-        .progress-group {
-            margin: 10px 0;
-        }
-
-        .info-group,
-        .speed-group {
-            justify-content: center;
-        }
-    }
-
-    /* Original styles */
-    .caption-container {
-        margin-top: 10px;
-        margin-bottom: 10px;
-        width: 100%;
-    }
-
-    .motion-info {
-        background-color: #ffffff;
-        border-radius: 10px;
-        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
-        overflow: hidden;
-    }
-
-    .loading {
-        padding: 20px;
-        text-align: center;
-        color: #666;
-        font-style: italic;
-    }
-
-    .file-info {
-        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-        color: white;
-        padding: 20px;
-    }
-
-    .file-info h4 {
-        margin: 0 0 10px 0;
-        font-size: 1.2em;
-        font-weight: 600;
-    }
-
-    .file-detail {
-        margin: 5px 0;
-        font-size: 0.9em;
-        opacity: 0.9;
-    }
-
-    .captions-section {
-        padding: 20px;
-    }
-
-    .captions-title {
-        margin: 0 0 15px 0;
-        color: #333;
-        font-size: 1.1em;
-        font-weight: 600;
-        border-bottom: 2px solid #667eea;
-        padding-bottom: 8px;
-    }
-
-    .caption-item {
-        background-color: #f8f9ff;
-        border: 1px solid #e1e5f7;
-        border-radius: 8px;
-        margin-bottom: 15px;
-        padding: 15px;
-        transition: all 0.3s ease;
-    }
-
-    .caption-item:hover {
-        transform: translateY(-2px);
-        box-shadow: 0 4px 15px rgba(102, 126, 234, 0.15);
-    }
-
-    .caption-content {
-        margin-bottom: 10px;
-    }
-
-    .no-captions {
-        text-align: center;
-        padding: 30px;
-        color: #666;
-        font-style: italic;
-    }
-
-    .error-message {
-        background-color: #fee;
-        color: #c33;
-        padding: 15px;
-        border-radius: 5px;
-        text-align: center;
-    }
-
-    .caption-rewritten {
-        font-size: 1em;
-        font-weight: 600;
-        color: #333;
-        margin-bottom: 5px;
-    }
-
-    .caption-original-toggle {
-        font-size: 0.85em;
-        color: #667eea;
-        cursor: pointer;
-        display: inline-flex;
-        align-items: center;
-        gap: 4px;
-        padding: 4px 0;
-        user-select: none;
-        transition: color 0.2s;
-    }
-
-    .caption-original-toggle:hover {
-        color: #764ba2;
-    }
-
-    .caption-original-toggle i {
-        transition: transform 0.2s;
-    }
-
-    .caption-original-toggle.expanded i {
-        transform: rotate(180deg);
-    }
-
-    .caption-original {
-        display: none !important;
-        font-size: 0.9em;
-        color: #666;
-        background: #f0f0f5;
-        padding: 8px 12px;
-        border-radius: 6px;
-        margin-top: 6px;
-        line-height: 1.4;
-    }
-
-    .caption-original.show {
-        display: block !important;
-    }
-
-    .original-label {
-        font-weight: 600;
-        color: #888;
-    }
-</style>
-
-
-<!-- Only load caption fetching script if captions are not hidden -->
-{% if not hide_captions %}
-<script>
-    function createCaptionItem(caption, index) {
-        const hasOriginal = caption['short caption'];
-        const rewritten = caption['short caption+'] || caption['short caption'] || 'No caption';
-
-        return `
-                <div class="caption-item">
-                    <div class="caption-content">
-                        <div class="caption-rewritten">${rewritten}</div>
-                        ${hasOriginal && caption['short caption+'] ? `
-                            <div class="caption-original-toggle" data-toggle="caption-original">
-                                <i class="fas fa-chevron-down"></i> Show original text
-                            </div>
-                            <div class="caption-original">
-                                <span class="original-label">Original:</span> ${caption['short caption']}
-                            </div>
-                        ` : ''}
-                    </div>
-                </div>
-            `;
-    }
-
-    document.addEventListener('click', (e) => {
-        const toggle = e.target.closest('[data-toggle="caption-original"]');
-        if (toggle) {
-            const originalDiv = toggle.nextElementSibling;
-            if (originalDiv && originalDiv.classList.contains('caption-original')) {
-                originalDiv.classList.toggle('show');
-                toggle.classList.toggle('expanded');
-            }
-        }
-    });
-
-    function fetchMotionInfo() {
-        fetch('/query_caption/{{ folder_name }}/{{ file_name }}')
-            .then(response => response.json())
-            .then(data => {
-                const motionInfoElement = document.getElementById('motion-info');
-
-                if (data && (data.filename || data.motion_path || data.result)) {
-                    let html = '';
-
-                    if (data.filename || data.motion_path) {
-                        html += `
-                                <div class="file-info">
-                                    <h4>File Information</h4>
-                                    ${data.filename ? `<div class="file-detail"><strong>Filename:</strong> ${data.filename}</div>` : ''}
-                                    ${data.motion_path ? `<div class="file-detail"><strong>Motion Path:</strong> ${data.motion_path}</div>` : ''}
-                                </div>
-                            `;
-                    }
-
-                    if (data.result && Array.isArray(data.result) && data.result.length > 0) {
-                        html += `
-                                <div class="captions-section">
-                                    <h5 class="captions-title">Motion Captions (${data.result.length})</h5>
-                                    ${data.result.map((caption, index) => createCaptionItem(caption, index)).join('')}
-                                </div>
-                            `;
-                    } else if (data.result) {
-                        html += `
-                                <div class="captions-section">
-                                    <div class="no-captions">No captions available for this motion</div>
-                                </div>
-                            `;
-                    }
-
-                    if (!html && data.caption) {
-                        html = `
-                                <div class="captions-section">
-                                    <h5 class="captions-title">Caption</h5>
-                                    <div class="caption-item">
-                                        <div class="caption-content">
-                                            <div class="caption-short">${data.caption}</div>
-                                        </div>
-                                    </div>
-                                </div>
-                            `;
-                    }
-
-                    motionInfoElement.innerHTML = html || '<div class="no-captions">No motion information available</div>';
-                } else {
-                    motionInfoElement.innerHTML = '<div class="no-captions">No motion information available</div>';
-                }
-            })
-            .catch(error => {
-                console.error('Error fetching motion information:', error);
-                document.getElementById('motion-info').innerHTML = '<div class="error-message">Error loading motion information</div>';
-            });
-    }
-
-    document.addEventListener('DOMContentLoaded', fetchMotionInfo);
-</script>
-{% endif %}
-
-{% endblock %}

scripts/gradio/templates/index_wooden_gradio.html

@@ -1,1033 +0,0 @@
-{% extends 'element/blank.html' %}
-
-{% block content_block %}
-
-<!-- Fullscreen 3D container -->
-<div class="fullscreen-container">
-    <!-- 3D viewport -->
-    <div id="vis3d"></div>
-
-    <!-- Floating caption overlay (centered at top) -->
-    {% if not hide_captions %}
-    <div class="caption-overlay">
-        <div class="motion-info" id="motion-info">
-            <div class="loading">
-                <i class="fas fa-spinner fa-spin"></i> Loading action descriptions...
-            </div>
-        </div>
-    </div>
-    {% endif %}
-
-    <!-- Floating progress control panel (centered at bottom) -->
-    <div class="control-overlay">
-        <div class="control-row-minimal">
-            <div class="progress-container">
-                <input type="range" id="progressSlider" class="progress-slider-minimal" min="0" max="100" value="0">
-            </div>
-            <div class="frame-counter">
-                <span id="currentFrame">0</span> / <span id="totalFrames">0</span>
-            </div>
-        </div>
-    </div>
-
-    <!-- Loading status overlay -->
-    <div class="loading-overlay" id="loadingStatus">
-        <i class="fas fa-spinner fa-spin"></i> Loading...
-    </div>
-
-    <!-- Hidden controls for functionality -->
-    <div style="display: none;">
-        <button id="playPauseBtn"></button>
-        <button id="resetBtn"></button>
-        <input type="range" id="speedSlider" min="0.1" max="3" step="0.1" value="1">
-        <span id="speedValue">1.0x</span>
-    </div>
-</div>
-
-<!-- Add Font Awesome for icons -->
-<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
-
-<script type="importmap">
-    {
-        "imports": {
-            "three": "https://cdn.jsdelivr.net/npm/three@0.160.0/build/three.module.js",
-            "three/addons/": "https://cdn.jsdelivr.net/npm/three@0.160.0/examples/jsm/"
-        }
-    }
-</script>
-
-<script type="module">
-    import * as THREE from 'three';
-    import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
-    import { getChessboardXZ } from '/static/scripts3d/create_ground.js';
-    import { create_scene, fitCameraToScene } from '/static/scripts3d/create_scene.js';
-    import { load_wooden, SMPLH_JOINT_NAMES } from '/static/scripts3d/load_wooden.js';
-
-    let scene, camera, renderer;
-    let controls;
-    let infos;
-    let currentFrame = 0;
-    let total_frame = 0;
-    const baseIntervalTime = 30;
-    var model_mesh = {};
-
-    let isPlaying = false;
-    let lastFrameTime = 0;
-    let playbackSpeed = 1.0;
-    let animationId = null;
-    let modelsLoaded = false;
-    let expectedModelCount = 0;
-    let loadedModelCount = 0;
-
-    let ignoreGlobalTrans = false;
-    let currentOffsets = [];
-
-    const updateFrame = () => {
-        if (!infos || currentFrame >= total_frame || !modelsLoaded) return;
-
-        const info = infos[currentFrame];
-        let allModelsReady = true;
-
-        info.forEach(smpl_params => {
-            if (!(smpl_params.id in model_mesh)) {
-                allModelsReady = false;
-            }
-        });
-
-        if (!allModelsReady) {
-            return;
-        }
-
-        const offsets = computeOffsets(info.length);
-        currentOffsets = offsets;
-
-        info.forEach((smpl_params, b) => {
-            const bones = model_mesh[smpl_params.id];
-            const meshContainer = bones[0].parent;
-
-            if (ignoreGlobalTrans) {
-                meshContainer.position.set(-offsets[b], 0, 0);
-            } else {
-                meshContainer.position.set(
-                    smpl_params.Th[0][0] - offsets[b],
-                    smpl_params.Th[0][1],
-                    smpl_params.Th[0][2]
-                );
-            }
-
-            var axis = new THREE.Vector3(smpl_params.Rh[0][0], smpl_params.Rh[0][1], smpl_params.Rh[0][2]);
-            var angle = axis.length();
-            axis.normalize();
-            var quaternion = new THREE.Quaternion().setFromAxisAngle(axis, angle);
-            bones[0].quaternion.copy(quaternion);
-
-            var poses_offset = 0;
-
-            if (smpl_params.poses[0].length == 69) {
-                poses_offset = -3;
-            }
-
-            for (let i = 1; i < bones.length; i++) {
-                const startIndex = poses_offset + 3 * i;
-
-                if (startIndex + 2 < smpl_params.poses[0].length) {
-                    var axis = new THREE.Vector3(
-                        smpl_params.poses[0][startIndex],
-                        smpl_params.poses[0][startIndex + 1],
-                        smpl_params.poses[0][startIndex + 2]
-                    );
-                    var angle = axis.length();
-
-                    if (angle > 1e-6) {
-                        axis.normalize();
-                        var quaternion = new THREE.Quaternion().setFromAxisAngle(axis, angle);
-                        bones[i].quaternion.copy(quaternion);
-                    } else {
-                        bones[i].quaternion.set(0, 0, 0, 1);
-                    }
-                }
-            }
-        });
-
-        updateUI();
-    }
-
-    const playLoop = (currentTime) => {
-        if (isPlaying && currentTime - lastFrameTime >= (baseIntervalTime / playbackSpeed)) {
-            currentFrame += 1;
-            if (currentFrame >= total_frame) {
-                currentFrame = 0;
-            }
-            updateFrame();
-            lastFrameTime = currentTime;
-        }
-
-        if (isPlaying) {
-            animationId = requestAnimationFrame(playLoop);
-        }
-    }
-
-    const updateUI = () => {
-        document.getElementById('currentFrame').textContent = currentFrame;
-        document.getElementById('totalFrames').textContent = total_frame;
-
-        if (total_frame > 0) {
-            const progress = (currentFrame / total_frame) * 100;
-            document.getElementById('progressSlider').value = progress;
-        }
-    }
-
-    const updateLoadingStatus = () => {
-        const loadingElement = document.getElementById('loadingStatus');
-        if (!loadingElement) return;
-
-        if (modelsLoaded) {
-            loadingElement.innerHTML = '<i class="fas fa-check"></i> Ready';
-            loadingElement.className = 'loading-overlay complete';
-            setTimeout(() => {
-                loadingElement.className = 'loading-overlay hidden';
-            }, 1500);
-        } else {
-            loadingElement.innerHTML = `<i class="fas fa-spinner fa-spin"></i> Loading... (${loadedModelCount}/${expectedModelCount})`;
-            loadingElement.className = 'loading-overlay';
-        }
-    }
-
-    const updatePlayPauseButton = () => {
-        const playPauseBtn = document.getElementById('playPauseBtn');
-        if (playPauseBtn) {
-            if (isPlaying) {
-                playPauseBtn.innerHTML = '<i class="fas fa-pause"></i>';
-                playPauseBtn.title = 'Pause';
-            } else {
-                playPauseBtn.innerHTML = '<i class="fas fa-play"></i>';
-                playPauseBtn.title = 'Play';
-            }
-        }
-    }
-
-    const enablePlaybackControls = () => {
-        const playPauseBtn = document.getElementById('playPauseBtn');
-        const resetBtn = document.getElementById('resetBtn');
-        const progressSlider = document.getElementById('progressSlider');
-        const speedSlider = document.getElementById('speedSlider');
-
-        [playPauseBtn, resetBtn, progressSlider, speedSlider].forEach(element => {
-            if (element) {
-                element.disabled = false;
-                element.style.opacity = '1';
-                element.style.cursor = 'pointer';
-            }
-        });
-
-        updatePlayPauseButton();
-    }
-
-    const playAnimation = () => {
-        if (!isPlaying && total_frame > 0 && modelsLoaded) {
-            isPlaying = true;
-            lastFrameTime = performance.now();
-            animationId = requestAnimationFrame(playLoop);
-            updatePlayPauseButton();
-        }
-    }
-
-    const pauseAnimation = () => {
-        isPlaying = false;
-        if (animationId) {
-            cancelAnimationFrame(animationId);
-            animationId = null;
-        }
-        updatePlayPauseButton();
-    }
-
-    const resetAnimation = () => {
-        pauseAnimation();
-        currentFrame = 0;
-        updateFrame();
-        updatePlayPauseButton();
-    }
-
-    const initPlaybackControls = () => {
-        const progressSlider = document.getElementById('progressSlider');
-
-        // Progress slider controls
-        let wasPlaying = false;
-        progressSlider.addEventListener('mousedown', () => {
-            if (!modelsLoaded) return;
-            wasPlaying = isPlaying;
-            if (isPlaying) pauseAnimation();
-        });
-
-        progressSlider.addEventListener('input', (e) => {
-            if (!modelsLoaded) return;
-            const progress = parseFloat(e.target.value);
-            currentFrame = Math.floor((progress / 100) * total_frame);
-            if (currentFrame >= total_frame) currentFrame = total_frame - 1;
-            if (currentFrame < 0) currentFrame = 0;
-            updateFrame();
-        });
-
-        progressSlider.addEventListener('mouseup', () => {
-            if (!modelsLoaded) return;
-            if (wasPlaying) playAnimation();
-        });
-
-        // Touch support for mobile
-        progressSlider.addEventListener('touchstart', () => {
-            if (!modelsLoaded) return;
-            wasPlaying = isPlaying;
-            if (isPlaying) pauseAnimation();
-        });
-
-        progressSlider.addEventListener('touchend', () => {
-            if (!modelsLoaded) return;
-            if (wasPlaying) playAnimation();
-        });
-
-        speedSlider.addEventListener('input', (e) => {
-            playbackSpeed = parseFloat(e.target.value);
-            speedValue.textContent = playbackSpeed.toFixed(1) + 'x';
-        });
-
-        document.addEventListener('keydown', (e) => {
-            if (!modelsLoaded) return;
-            switch (e.code) {
-                case 'Space':
-                    e.preventDefault();
-                    if (isPlaying) {
-                        pauseAnimation();
-                    } else {
-                        playAnimation();
-                    }
-                    break;
-                case 'ArrowLeft':
-                    e.preventDefault();
-                    if (currentFrame > 0) {
-                        currentFrame--;
-                        updateFrame();
-                    }
-                    break;
-                case 'ArrowRight':
-                    e.preventDefault();
-                    if (currentFrame < total_frame - 1) {
-                        currentFrame++;
-                        updateFrame();
-                    }
-                    break;
-                case 'Home':
-                    e.preventDefault();
-                    resetAnimation();
-                    break;
-            }
-        });
-    }
-
-    async function waitAndFetchData() {
-        try {
-            const waitResponse = await fetch('/wait_for_data');
-            const waitResult = await waitResponse.json();
-
-            if (waitResult.status === 'ready') {
-                console.log(`Data ready with ${waitResult.frames} frames`);
-                fetchSMPLData();
-            } else {
-                console.log('Timeout waiting for data, trying direct fetch...');
-                fetchSMPLData();
-            }
-        } catch (error) {
-            console.error('Error waiting for data:', error);
-            fetchSMPLData();
-        }
-    }
-
-    waitAndFetchData();
-
-    function fetchSMPLData() {
-        fetch('/query_smpl/{{ folder_name }}/{{ file_name }}')
-            .then(response => response.json())
-            .then(async datas => {
-                if (!datas || datas.length === 0) {
-                    console.log('No data received, retrying in 2 seconds...');
-                    setTimeout(fetchSMPLData, 2000);
-                    return;
-                }
-
-                console.log(`Received ${datas.length} frames of SMPL data`);
-                infos = datas;
-                total_frame = datas.length;
-
-                // updateGroundWithData(datas);
-                document.getElementById('progressSlider').max = 100;
-                updateUI();
-                updatePlayPauseButton();
-
-                expectedModelCount = infos[0].length;
-
-                loadedModelCount = 0;
-                modelsLoaded = false;
-                updateLoadingStatus();
-
-                infos[0].forEach(data => {
-                    load_wooden(null, null).then(result => {
-                        scene.add(result.mesh);
-
-                        result.mesh.castShadow = true;
-                        result.mesh.receiveShadow = true;
-
-                        model_mesh[data.id] = result.bones;
-
-                        loadedModelCount++;
-
-                        if (loadedModelCount === expectedModelCount) {
-                            modelsLoaded = true;
-                            updateLoadingStatus();
-                            updateFrame();
-                            enablePlaybackControls();
-                            fitCameraToScene(scene, camera, controls, { axis_up: 'y', excludeNames: ['ground'] });
-                            setTimeout(() => playAnimation(), 500);
-                        } else {
-                            updateLoadingStatus();
-                        }
-                    }).catch(err => {
-                        console.error("Failed to load wooden model:", err);
-                    });
-                });
-
-                initPlaybackControls();
-                animate();
-            });
-    }
-
-    function updateGroundWithData(smplData) {
-        // const sampleData = smplData.map(frame => {
-        //     const offsets = computeOffsets(frame.length);
-        //     return {
-        //         positions: frame.map((person, b) => ({
-        //             x: person.Th[0][0] - offsets[b],
-        //             y: person.Th[0][1],
-        //             z: person.Th[0][2]
-        //         }))
-        //     };
-        // });
-
-        const objectsToRemove = [];
-        // scene.traverse((child) => {
-        //     if (child.isMesh && child.geometry &&
-        //         (child.geometry.type === 'PlaneGeometry' || child.name === 'ground')) {
-        //         objectsToRemove.push(child);
-        //     }
-        // });
-
-        objectsToRemove.forEach(obj => {
-            scene.remove(obj);
-            if (obj.geometry) obj.geometry.dispose();
-            if (obj.material) {
-                if (obj.material.map) obj.material.map.dispose();
-                obj.material.dispose();
-            }
-        });
-
-        // Larger grid (50x50), darker colors for dark mode scene
-        // const adaptiveGround = getChessboardXZ(50, 100, '#ffffff', '#3a3a3a', 1024);
-        // adaptiveGround.name = 'ground';
-        // adaptiveGround.receiveShadow = true;
-        // scene.add(adaptiveGround);
-    }
-
-    init();
-
-    function init() {
-        const width = window.innerWidth;
-        const height = window.innerHeight;
-        scene = new THREE.Scene();
-        camera = new THREE.PerspectiveCamera(45, width / height, 0.1, 50);
-        renderer = new THREE.WebGLRenderer({ antialias: true, logarithmicDepthBuffer: true });
-
-        create_scene(scene, camera, renderer, true, 'y', 'z');
-
-        renderer.shadowMap.enabled = true;
-        renderer.shadowMap.type = THREE.PCFSoftShadowMap;
-
-        scene.background = new THREE.Color(0x424242);
-
-        // Using FogExp2 for more natural exponential falloff
-        // Density 0.06 provides subtle depth without obscuring close objects
-        scene.fog = new THREE.FogExp2(0x424242, 0.06);
-
-        // Remove existing lights to reconfigure
-        scene.children = scene.children.filter(child => !child.isLight);
-
-
-        // 1. Hemisphere Light - provides natural sky/ground color gradient
-        const hemisphereLight = new THREE.HemisphereLight(
-            0xffffff,  // sky color (white)
-            0x444444,  // ground color (dark gray)
-            1.2        // intensity
-        );
-        hemisphereLight.position.set(0, 2, 0);
-        scene.add(hemisphereLight);
-
-        // 2. Main Directional Light (key light with shadows)
-        const directionalLight = new THREE.DirectionalLight(0xffffff, 1.5);
-        directionalLight.position.set(3, 5, 4);
-        directionalLight.castShadow = true;
-        directionalLight.shadow.mapSize.width = 2048;
-        directionalLight.shadow.mapSize.height = 2048;
-        directionalLight.shadow.camera.near = 0.5;
-        directionalLight.shadow.camera.far = 50;
-        directionalLight.shadow.camera.left = -10;
-        directionalLight.shadow.camera.right = 10;
-        directionalLight.shadow.camera.top = 10;
-        directionalLight.shadow.camera.bottom = -10;
-        directionalLight.shadow.bias = -0.0001;
-        scene.add(directionalLight);
-
-        // 3. Fill Light (softer, from opposite side)
-        const fillLight = new THREE.DirectionalLight(0xaaccff, 0.5);
-        fillLight.position.set(-3, 3, -2);
-        scene.add(fillLight);
-
-        // 4. Rim/Back Light (for depth separation)
-        const rimLight = new THREE.DirectionalLight(0xffeedd, 0.4);
-        rimLight.position.set(0, 4, -5);
-        scene.add(rimLight);
-
-        // 5. Optional: Spot Light for dramatic focus
-        const spotLight = new THREE.SpotLight(0xffffff, 0.6);
-        spotLight.position.set(0, 6, 3);
-        spotLight.angle = Math.PI / 8;
-        spotLight.penumbra = 0.5;
-        spotLight.decay = 2;
-        spotLight.distance = 30;
-        spotLight.castShadow = true;
-        spotLight.shadow.mapSize.width = 1024;
-        spotLight.shadow.mapSize.height = 1024;
-        // scene.add(spotLight); // Uncomment to enable
-
-        // Tone mapping for better color reproduction
-        renderer.toneMapping = THREE.ACESFilmicToneMapping;
-        renderer.toneMappingExposure = 1.0;
-        renderer.outputColorSpace = THREE.SRGBColorSpace;
-
-        renderer.setPixelRatio(window.devicePixelRatio);
-        renderer.setSize(width, height);
-        var container = document.getElementById('vis3d');
-        container.appendChild(renderer.domElement);
-
-        // Handle window resize for fullscreen
-        window.addEventListener('resize', onWindowResize);
-
-        controls = new OrbitControls(camera, renderer.domElement);
-        controls.minDistance = 1;
-        controls.maxDistance = 15;
-        controls.enableDamping = true;
-        controls.dampingFactor = 0.05;
-        controls.target.set(0, 1, 0);
-        fitCameraToScene(scene, camera, controls, { axis_up: 'y', excludeNames: ['ground'] });
-
-        // Click to play/pause (with drag detection)
-        let isDragging = false;
-        let mouseDownTime = 0;
-
-        renderer.domElement.addEventListener('mousedown', () => {
-            isDragging = false;
-            mouseDownTime = Date.now();
-        });
-
-        renderer.domElement.addEventListener('mousemove', () => {
-            if (Date.now() - mouseDownTime > 150) {
-                isDragging = true;
-            }
-        });
-
-        renderer.domElement.addEventListener('mouseup', (e) => {
-            // Only toggle play/pause on short clicks (not drags)
-            if (!isDragging && Date.now() - mouseDownTime < 300) {
-                if (modelsLoaded) {
-                    isPlaying ? pauseAnimation() : playAnimation();
-                }
-            }
-        });
-
-        // Double-click to reset
-        renderer.domElement.addEventListener('dblclick', () => {
-            if (modelsLoaded) {
-                pauseAnimation();
-                currentFrame = 0;
-                updateFrame();
-            }
-        });
-    }
-
-    function animate() {
-        requestAnimationFrame(animate);
-        // Update controls for damping effect
-        if (controls && controls.enableDamping) {
-            controls.update();
-        }
-        renderer.render(scene, camera);
-    }
-
-    function onWindowResize() {
-        const width = window.innerWidth;
-        const height = window.innerHeight;
-        camera.aspect = width / height;
-        camera.updateProjectionMatrix();
-        renderer.setSize(width, height);
-    }
-
-    function computeOffsets(batchSize) {
-        const spacing = 2.0;
-        const total_width = (batchSize - 1) * spacing;
-        const start_x = -total_width / 2;
-        const offsets = [];
-        for (let i = 0; i < batchSize; i++) {
-            offsets.push(start_x + i * spacing);
-        }
-        return offsets;
-    }
-
-</script>
-
-<style>
-    /* Fullscreen dark mode base styles */
-    * {
-        margin: 0;
-        padding: 0;
-        box-sizing: border-box;
-    }
-
-    html, body {
-        width: 100%;
-        height: 100%;
-        overflow: hidden;
-        background: #424242 !important;
-        color: #e2e8f0;
-    }
-
-    /* Fullscreen container for 3D scene */
-    .fullscreen-container {
-        position: fixed;
-        top: 0;
-        left: 0;
-        width: 100vw;
-        height: 100vh;
-        background: #424242;
-        overflow: hidden;
-    }
-
-    #vis3d {
-        position: absolute;
-        top: 0;
-        left: 0;
-        width: 100%;
-        height: 100%;
-        background: #424242;
-    }
-
-    #vis3d canvas {
-        display: block;
-        width: 100% !important;
-        height: 100% !important;
-    }
-
-    /* Floating caption overlay - centered at top, width adapts to content */
-    .caption-overlay {
-        position: absolute;
-        top: 20px;
-        left: 50%;
-        transform: translateX(-50%);
-        width: auto;
-        max-width: 90%;
-        z-index: 100;
-        pointer-events: auto;
-    }
-
-    .motion-info {
-        background-color: rgba(45, 55, 72, 0.85);
-        backdrop-filter: blur(10px);
-        -webkit-backdrop-filter: blur(10px);
-        border-radius: 20px;
-        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
-        overflow: hidden;
-        max-height: 40vh;
-        overflow-y: auto;
-        display: inline-block;
-    }
-
-    /* Floating progress control panel - centered at bottom */
-    .control-overlay {
-        position: absolute;
-        bottom: 30px;
-        left: 50%;
-        transform: translateX(-50%);
-        width: 80%;
-        max-width: 600px;
-        z-index: 100;
-        background: rgba(0, 0, 0, 0.4);
-        backdrop-filter: blur(8px);
-        -webkit-backdrop-filter: blur(8px);
-        padding: 15px 20px;
-        border-radius: 12px;
-    }
-
-    .control-row-minimal {
-        display: flex;
-        align-items: center;
-        gap: 20px;
-    }
-
-    .progress-container {
-        flex: 1;
-    }
-
-    .progress-slider-minimal {
-        width: 100%;
-        height: 8px;
-        border-radius: 4px;
-        background: rgba(255, 255, 255, 0.3);
-        outline: none;
-        cursor: pointer;
-        -webkit-appearance: none;
-        appearance: none;
-    }
-
-    .progress-slider-minimal::-webkit-slider-runnable-track {
-        width: 100%;
-        height: 8px;
-        border-radius: 4px;
-        background: rgba(255, 255, 255, 0.3);
-    }
-
-    .progress-slider-minimal::-webkit-slider-thumb {
-        -webkit-appearance: none;
-        appearance: none;
-        width: 20px;
-        height: 20px;
-        border-radius: 50%;
-        background: #4a9eff;
-        cursor: pointer;
-        border: 2px solid white;
-        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
-        margin-top: -6px;
-    }
-
-    .progress-slider-minimal::-moz-range-track {
-        width: 100%;
-        height: 8px;
-        border-radius: 4px;
-        background: rgba(255, 255, 255, 0.3);
-    }
-
-    .progress-slider-minimal::-moz-range-thumb {
-        width: 20px;
-        height: 20px;
-        border-radius: 50%;
-        background: #4a9eff;
-        cursor: pointer;
-        border: 2px solid white;
-        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
-    }
-
-    .frame-counter {
-        font-family: 'SF Mono', 'Consolas', monospace;
-        font-size: 14px;
-        font-weight: 500;
-        color: white;
-        text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
-        white-space: nowrap;
-        min-width: 80px;
-        text-align: right;
-    }
-
-    /* Loading overlay - centered */
-    .loading-overlay {
-        position: absolute;
-        top: 50%;
-        left: 50%;
-        transform: translate(-50%, -50%);
-        background: rgba(0, 0, 0, 0.7);
-        backdrop-filter: blur(8px);
-        -webkit-backdrop-filter: blur(8px);
-        color: white;
-        padding: 15px 25px;
-        border-radius: 10px;
-        font-size: 14px;
-        z-index: 200;
-        display: flex;
-        align-items: center;
-        gap: 10px;
-    }
-
-    .loading-overlay.hidden {
-        display: none;
-    }
-
-    .loading-overlay.complete {
-        background: rgba(76, 175, 80, 0.85);
-    }
-
-    /* Caption content styles */
-    .loading {
-        padding: 10px 18px;
-        text-align: center;
-        color: #a0aec0;
-        font-style: italic;
-        white-space: nowrap;
-    }
-
-    .file-info {
-        background: linear-gradient(135deg, rgba(102, 126, 234, 0.9) 0%, rgba(118, 75, 162, 0.9) 100%);
-        color: white;
-        padding: 15px 20px;
-    }
-
-    .file-info h4 {
-        margin: 0 0 8px 0;
-        font-size: 1.1em;
-        font-weight: 600;
-    }
-
-    .file-detail {
-        margin: 4px 0;
-        font-size: 0.85em;
-        opacity: 0.9;
-    }
-
-    .captions-section {
-        padding: 12px 20px;
-        white-space: nowrap;
-    }
-
-    .captions-title {
-        margin: 0 0 12px 0;
-        color: #e2e8f0;
-        font-size: 1em;
-        font-weight: 600;
-        border-bottom: 2px solid #667eea;
-        padding-bottom: 6px;
-    }
-
-    .caption-item {
-        background: transparent;
-        border: none;
-        border-radius: 0;
-        margin-bottom: 6px;
-        padding: 0;
-        color: #f0f4f8;
-        font-size: 1em;
-        font-weight: 500;
-        line-height: 1.5;
-    }
-
-    .caption-item:last-child {
-        margin-bottom: 0;
-    }
-
-    .caption-item:hover {
-        background: transparent;
-        border-color: transparent;
-    }
-
-    .caption-content {
-        margin-bottom: 0;
-    }
-
-    .no-captions {
-        text-align: center;
-        padding: 20px;
-        color: #a0aec0;
-        font-style: italic;
-    }
-
-    .error-message {
-        background-color: rgba(255, 100, 100, 0.2);
-        color: #ff6b6b;
-        padding: 12px;
-        border-radius: 6px;
-        text-align: center;
-    }
-
-    .caption-rewritten {
-        font-size: 0.95em;
-        font-weight: 500;
-        color: #f0f4f8;
-        margin-bottom: 0;
-        line-height: 1.5;
-    }
-
-    .caption-original-toggle {
-        font-size: 0.8em;
-        color: #7c9eff;
-        cursor: pointer;
-        display: inline-flex;
-        align-items: center;
-        gap: 4px;
-        padding: 4px 0;
-        user-select: none;
-        transition: color 0.2s;
-        margin-top: 6px;
-    }
-
-    .caption-original-toggle:hover {
-        color: #a0b4ff;
-    }
-
-    .caption-original-toggle i {
-        transition: transform 0.2s;
-    }
-
-    .caption-original-toggle.expanded i {
-        transform: rotate(180deg);
-    }
-
-    .caption-original {
-        display: none !important;
-        font-size: 0.85em;
-        color: #a0aec0;
-        background: rgba(0, 0, 0, 0.2);
-        padding: 8px 12px;
-        border-radius: 6px;
-        margin-top: 8px;
-        line-height: 1.4;
-    }
-
-    .caption-original.show {
-        display: block !important;
-    }
-
-    .original-label {
-        font-weight: 600;
-        color: #718096;
-    }
-
-    /* Scrollbar styling for motion-info */
-    .motion-info::-webkit-scrollbar {
-        width: 6px;
-    }
-
-    .motion-info::-webkit-scrollbar-track {
-        background: rgba(255, 255, 255, 0.1);
-        border-radius: 3px;
-    }
-
-    .motion-info::-webkit-scrollbar-thumb {
-        background: rgba(255, 255, 255, 0.3);
-        border-radius: 3px;
-    }
-
-    .motion-info::-webkit-scrollbar-thumb:hover {
-        background: rgba(255, 255, 255, 0.5);
-    }
-</style>
-
-
-<!-- Only load caption fetching script if captions are not hidden -->
-{% if not hide_captions %}
-<script>
-    function createCaptionItem(caption, index) {
-        const hasOriginal = caption['short caption'];
-        const rewritten = caption['short caption+'] || caption['short caption'] || 'No caption';
-
-        return `
-                <div class="caption-item">
-                    <div class="caption-content">
-                        <div class="caption-rewritten">${rewritten}</div>
-                        ${hasOriginal && caption['short caption+'] ? `
-                            <div class="caption-original-toggle" data-toggle="caption-original">
-                                <i class="fas fa-chevron-down"></i> Show original text
-                            </div>
-                            <div class="caption-original">
-                                <span class="original-label">Original:</span> ${caption['short caption']}
-                            </div>
-                        ` : ''}
-                    </div>
-                </div>
-            `;
-    }
-
-    function createCaptionItemSimple(caption, index) {
-        const hasOriginal = caption['short caption'];
-        const rewritten = caption['short caption+'] || caption['short caption'] || 'No caption';
-
-        return `
-                <div class="caption-item" style="text-align: center;">
-                    ${rewritten}
-                </div>
-            `;
-    }
-
-    document.addEventListener('click', (e) => {
-        const toggle = e.target.closest('[data-toggle="caption-original"]');
-        if (toggle) {
-            const originalDiv = toggle.nextElementSibling;
-            if (originalDiv && originalDiv.classList.contains('caption-original')) {
-                originalDiv.classList.toggle('show');
-                toggle.classList.toggle('expanded');
-            }
-        }
-    });
-
-    function fetchMotionInfo() {
-        fetch('/query_caption/{{ folder_name }}/{{ file_name }}')
-            .then(response => response.json())
-            .then(data => {
-                const motionInfoElement = document.getElementById('motion-info');
-
-                if (data && (data.filename || data.motion_path || data.result)) {
-                    let html = '';
-
-                    if (data.filename || data.motion_path) {
-                        html += `
-                                <div class="file-info">
-                                    <h4>File Information</h4>
-                                    ${data.filename ? `<div class="file-detail"><strong>Filename:</strong> ${data.filename}</div>` : ''}
-                                    ${data.motion_path ? `<div class="file-detail"><strong>Motion Path:</strong> ${data.motion_path}</div>` : ''}
-                                </div>
-                            `;
-                    }
-
-                    if (data.result && Array.isArray(data.result) && data.result.length > 0) {
-                        html += `
-                                <div class="captions-section">
-                                    ${data.result.map((caption, index) => createCaptionItemSimple(caption, index)).join('')}
-                                </div>
-                            `;
-                    } else if (data.result) {
-                        html += `
-                                <div class="captions-section">
-                                    <div class="no-captions">No captions available for this motion</div>
-                                </div>
-                            `;
-                    }
-
-                    if (!html && data.caption) {
-                        html = `
-                                <div class="captions-section">
-                                    <h5 class="captions-title">Caption</h5>
-                                    <div class="caption-item">
-                                        <div class="caption-content">
-                                            <div class="caption-short">${data.caption}</div>
-                                        </div>
-                                    </div>
-                                </div>
-                            `;
-                    }
-
-                    motionInfoElement.innerHTML = html || '<div class="no-captions">No motion information available</div>';
-                } else {
-                    motionInfoElement.innerHTML = '<div class="no-captions">No motion information available</div>';
-                }
-            })
-            .catch(error => {
-                console.error('Error fetching motion information:', error);
-                document.getElementById('motion-info').innerHTML = '<div class="error-message">Error loading motion information</div>';
-            });
-    }
-
-    document.addEventListener('DOMContentLoaded', fetchMotionInfo);
-</script>
-{% endif %}
-
-{% endblock %}

scripts/gradio/vis_gradio.py

@@ -1,103 +0,0 @@
-import os
-import sys
-from os import path as osp
-
-from flask import Flask, jsonify, render_template, request
-
-sys.path.append(osp.dirname(osp.dirname(osp.dirname(__file__))))
-from hymotion.utils.visualize_mesh_web import (
-    get_cached_captions,
-    get_cached_smpl_frames,
-    get_output_dir,
-    sanitize_filename,
-    sanitize_folder_name,
-    safe_path_join,
-)
-
-template_folder = os.path.join(os.path.dirname(__file__), "templates")
-static_folder = os.path.join(os.path.dirname(__file__), "static")
-
-app = Flask(__name__, template_folder=template_folder, static_folder=static_folder)
-
-
-@app.route("/")
-def home():
-    return "HMotion Visualization Server is Running. Use /view/<path> to access content.", 200
-
-
-@app.route("/view/")
-@app.route("/view/<path:full_path>")
-def index(full_path: str = ""):
-    hide_captions = request.args.get("hide_captions", "0") == "1"
-
-    # security check
-    if ".." in full_path or full_path.startswith("/"):
-        return "Invalid path", 403
-    if "/" in full_path:
-        raw_folder, raw_file = full_path.rsplit("/", 1)
-    else:
-        raw_folder, raw_file = "", full_path
-
-    folder_name = sanitize_folder_name(raw_folder)
-    file_name = sanitize_filename(raw_file)
-
-    # remove possible suffix
-    for suffix in [".npz", ".json", ".h5"]:
-        if file_name.endswith(suffix):
-            file_name = file_name[: -len(suffix)]
-            break
-
-    base_dir = get_output_dir(folder_name)
-    target_meta = safe_path_join(base_dir, f"{file_name}_meta.json")
-    target_npz = safe_path_join(base_dir, f"{file_name}.npz")
-
-    # check if meta file exists
-    if os.path.isfile(target_meta) or os.path.isfile(target_npz):
-        return render_template(
-            "index_wooden_gradio.html",
-            folder_name=folder_name,
-            file_name=file_name,
-            mirror_name=None,
-            hide_captions=hide_captions,
-            next_file=None,
-        )
-    else:
-        return (
-            render_template(
-                "error_file_not_found.html",
-                folder_name=folder_name,
-                file_name=file_name,
-                full_path=target_meta,
-                file_type="meta.json",
-                original_folder=folder_name,
-                original_file=full_path,
-            ),
-            404,
-        )
-
-
-@app.route("/query_smpl/<path:folder_name>/<file_name>")
-def query_smpl(folder_name: str, file_name: str):
-    smpl_data = get_cached_smpl_frames(folder_name, file_name)
-    return jsonify(smpl_data)
-
-
-@app.route("/query_caption/<path:folder_name>/<file_name>")
-def query_caption(folder_name: str, file_name: str):
-    hide_captions = request.args.get("hide_captions", "0") == "1"
-    if hide_captions:
-        return jsonify({"result": []})
-    captions = get_cached_captions(folder_name, file_name)
-    return jsonify({"result": captions})
-
-
-if __name__ == "__main__":
-    import argparse
-
-    parser = argparse.ArgumentParser()
-    parser.add_argument("--host", type=str, default="0.0.0.0")
-    parser.add_argument("--port", type=int, default=8081)
-    args = parser.parse_args()
-
-    print(f">>> Starting Flask server on {args.host}:{args.port}")
-    app.run(host=args.host, port=args.port, debug=False, threaded=True)

scripts/gradio/vis_routes.py

@@ -1,91 +0,0 @@
-import os
-
-from fastapi import APIRouter, HTTPException, Request
-from fastapi.responses import HTMLResponse, JSONResponse
-from fastapi.templating import Jinja2Templates
-
-from hymotion.utils.visualize_mesh_web import (
-    get_cached_captions,
-    get_cached_smpl_frames,
-    get_output_dir,
-    safe_path_join,
-    sanitize_filename,
-    sanitize_folder_name,
-)
-
-# Define Router
-router = APIRouter()
-
-# Define template directory
-current_dir = os.path.dirname(os.path.abspath(__file__))
-templates = Jinja2Templates(directory=os.path.join(current_dir, "templates"))
-
-
-@router.get("/wait_for_data")
-async def wait_for_data():
-    return {"status": "ready", "frames": 0}
-
-
-@router.get("/view/{full_path:path}", response_class=HTMLResponse)
-async def view_visualization(request: Request, full_path: str):
-    hide_captions = request.query_params.get("hide_captions", "0") == "1"
-
-    # Security check and path parsing logic
-    if ".." in full_path or full_path.startswith("/"):
-        raise HTTPException(status_code=403, detail="Invalid path")
-
-    if "/" in full_path:
-        raw_folder, raw_file = full_path.rsplit("/", 1)
-    else:
-        raw_folder, raw_file = "", full_path
-
-    folder_name = sanitize_folder_name(raw_folder)
-    file_name = sanitize_filename(raw_file)
-
-    for suffix in [".npz", ".json", ".h5"]:
-        if file_name.endswith(suffix):
-            file_name = file_name[: -len(suffix)]
-            break
-
-    base_dir = get_output_dir(folder_name)
-    target_meta = safe_path_join(base_dir, f"{file_name}_meta.json")
-    target_npz = safe_path_join(base_dir, f"{file_name}.npz")
-
-    if os.path.isfile(target_meta) or os.path.isfile(target_npz):
-        # FastAPI template rendering needs to pass in request
-        return templates.TemplateResponse(
-            "index_wooden_gradio.html",
-            {
-                "request": request,
-                "folder_name": folder_name,
-                "file_name": file_name,
-                "hide_captions": hide_captions,
-            },
-        )
-    else:
-        return templates.TemplateResponse(
-            "error_file_not_found.html",
-            {
-                "request": request,
-                "folder_name": folder_name,
-                "file_name": file_name,
-                "full_path": target_meta,
-                "file_type": "meta.json",
-            },
-            status_code=404,
-        )
-
-
-@router.get("/query_smpl/{folder_name:path}/{file_name}")
-async def query_smpl(folder_name: str, file_name: str):
-    smpl_data = get_cached_smpl_frames(folder_name, file_name)
-    return JSONResponse(content=smpl_data)
-
-
-@router.get("/query_caption/{folder_name:path}/{file_name}")
-async def query_caption(request: Request, folder_name: str, file_name: str):
-    hide_captions = request.query_params.get("hide_captions", "0") == "1"
-    if hide_captions:
-        return JSONResponse({"result": []})
-    captions = get_cached_captions(folder_name, file_name)
-    return JSONResponse({"result": captions})