更新静态页面生成逻辑

hymotion/utils/t2m_runtime.py

@@ -10,7 +10,7 @@ import yaml
 
 from ..prompt_engineering.prompt_rewrite import PromptRewriter
 from .loaders import load_object
-from .visualize_mesh_web import save_visualization_data
+from .visualize_mesh_web import save_visualization_data, generate_static_html
 
 try:
     import fbx
@@ -75,12 +75,10 @@ class T2MRuntime:
 
         self.prompt_rewriter = PromptRewriter(backend="our_rewriter", host=self.prompt_engineering_host)
 
-        # Skip model loading if checkpoint not found
+        # Load model (with or without checkpoint)
         if self.skip_model_loading:
-            print(">>> [WARNING] Model loading skipped - checkpoint not found")
-            self._loaded = True  # Mark as loaded to prevent further load attempts
-        else:
-            self.load()
+            print(">>> [WARNING] Checkpoint not found, will use randomly initialized model weights")
+        self.load()
         self.fbx_available = FBX_AVAILABLE
         if self.fbx_available:
             try:
@@ -97,7 +95,7 @@ class T2MRuntime:
 
         device_info = self.device_ids if self.device_ids else 'cpu'
         if self.skip_model_loading:
-            print(f">>> T2MRuntime initialized (model NOT loaded) in IP {self.local_ip}, devices={device_info}")
+            print(f">>> T2MRuntime initialized (using randomly initialized weights) in IP {self.local_ip}, devices={device_info}")
         else:
             print(f">>> T2MRuntime loaded in IP {self.local_ip}, devices={device_info}")
 
@@ -109,6 +107,9 @@ class T2MRuntime:
         with open(self.config_path, "r") as f:
             config = yaml.load(f, Loader=yaml.FullLoader)
 
+        # Use allow_empty_ckpt=True when skip_model_loading is True
+        allow_empty_ckpt = self.skip_model_loading
+
         if not self.device_ids:
             pipeline = load_object(
                 config["train_pipeline"],
@@ -118,7 +119,7 @@ class T2MRuntime:
             )
             device = torch.device("cpu")
             pipeline.load_in_demo(
-                self.ckpt_name, os.path.dirname(self.ckpt_name), build_text_encoder=not self.skip_text
+                self.ckpt_name, os.path.dirname(self.ckpt_name), build_text_encoder=not self.skip_text, allow_empty_ckpt=allow_empty_ckpt
             )
             pipeline.to(device)
             self.pipelines = [pipeline]
@@ -131,7 +132,7 @@ class T2MRuntime:
                     network_module=config["network_module"],
                     network_module_args=config["network_module_args"],
                 )
-                p.load_in_demo(self.ckpt_name, os.path.dirname(self.ckpt_name), build_text_encoder=not self.skip_text)
+                p.load_in_demo(self.ckpt_name, os.path.dirname(self.ckpt_name), build_text_encoder=not self.skip_text, allow_empty_ckpt=allow_empty_ckpt)
                 p.to(torch.device(f"cuda:{gid}"))
                 self.pipelines.append(p)
             self._gpu_load = [0] * len(self.pipelines)
@@ -260,13 +261,6 @@ class T2MRuntime:
         original_text: Optional[str] = None,
         use_special_game_feat: bool = False,
     ) -> Tuple[Union[str, list[str]], dict]:
-        # Check if model was skipped due to missing checkpoint
-        if self.skip_model_loading:
-            raise RuntimeError(
-                "Motion generation is not available: model checkpoint was not found. "
-                "Please ensure the checkpoint file exists at the specified path."
-            )
-
         self.load()
         seeds = [int(s.strip()) for s in seeds_csv.split(",") if s.strip() != ""]
         pi = self._acquire_pipeline()
@@ -318,8 +312,8 @@ class T2MRuntime:
         )
 
         if output_format == "fbx" and not self.fbx_available:
-            print(">>> Warning: FBX export requested but FBX SDK is not available. Falling back to html.")
-            output_format = "html"
+            print(">>> Warning: FBX export requested but FBX SDK is not available. Falling back to dict format.")
+            output_format = "dict"
 
         if output_format == "fbx" and self.fbx_available:
             fbx_files = self._generate_fbx_files(
@@ -328,6 +322,9 @@ class T2MRuntime:
                 fbx_filename=output_filename,
             )
             return view_url, fbx_files, model_output
+        elif output_format == "dict":
+            # Return HTML URL and empty list for fbx_files when using dict format
+            return view_url, [], model_output
         else:
             raise ValueError(f">>> Invalid output format: {output_format}")
 
@@ -337,10 +334,46 @@ class T2MRuntime:
         file_path: str,
         output_dir: Optional[str] = None,
     ) -> str:
-        print(f">>> HTML ready, timestamp: {timestamp}")
+        """
+        Generate a static HTML file with embedded data and return the URL for iframe.
+        All JavaScript code is embedded directly in the HTML, no external static resources needed.
+
+        Args:
+            timestamp: Timestamp string for logging
+            file_path: Base filename (without extension)
+            output_dir: Directory where NPZ/meta files are stored and HTML will be saved
+
+        Returns:
+            URL path for the static HTML file (to be used in iframe src)
+        """
+        print(f">>> Generating static HTML, timestamp: {timestamp}")
         gradio_dir = output_dir if output_dir is not None else "output/gradio"
-        view_url = f"/view/{gradio_dir}/{file_path}"
-        return view_url
+
+        try:
+            # Generate static HTML file with embedded data (all JS is embedded in template)
+            output_html_path = generate_static_html(
+                folder_name=gradio_dir,
+                file_name=file_path,
+                output_dir=gradio_dir,
+                hide_captions=False,
+            )
+
+            # The HTML file is saved in output_dir (e.g., output/gradio)
+            # We mount output/gradio at /output, so the URL is /output/{filename}_vis.html
+            html_filename = f"{file_path}_vis.html"
+            view_url = f"/output/{html_filename}"
+
+            print(f">>> Static HTML generated: {output_html_path}")
+            print(f">>> View URL: {view_url}")
+            return view_url
+
+        except Exception as e:
+            print(f">>> Failed to generate static HTML: {e}")
+            import traceback
+            traceback.print_exc()
+            # Fallback to old dynamic route
+            view_url = f"/view/{gradio_dir}/{file_path}"
+            return view_url
 
     def _generate_fbx_files(
         self,

hymotion/utils/visualize_mesh_web.py

@@ -10,6 +10,12 @@ from torch import Tensor
 
 _FILE_ACCESS_LOCK = threading.Lock()
 
+# Template directory path
+_TEMPLATE_DIR = os.path.join(
+    os.path.dirname(os.path.dirname(os.path.dirname(__file__))),
+    "scripts", "gradio", "templates"
+)
+
 
 def sanitize_filename(filename: str) -> str:
     """
@@ -340,3 +346,94 @@ def get_cached_smpl_frames(folder_name: str, file_name: str) -> List[list]:
         combined_frames.append(frame_content)
 
     return combined_frames
+
+
+def generate_static_html(
+    folder_name: str,
+    file_name: str,
+    output_dir: str,
+    hide_captions: bool = False,
+) -> str:
+    """
+    Generate a static HTML file with embedded SMPL data and captions.
+    All JavaScript code is embedded directly in the HTML template,
+    so no external static resources are needed.
+
+    Args:
+        folder_name: The folder name containing the NPZ/meta files
+        file_name: The base file name (without extension)
+        output_dir: Directory to save the generated HTML file
+        hide_captions: Whether to hide captions in the visualization
+
+    Returns:
+        The path to the generated HTML file
+    """
+    # Load SMPL data
+    smpl_frames = get_cached_smpl_frames(folder_name, file_name)
+    if not smpl_frames:
+        raise ValueError(f"No SMPL data found for {folder_name}/{file_name}")
+
+    # Load captions
+    captions = []
+    if not hide_captions:
+        captions = get_cached_captions(folder_name, file_name)
+
+    # Generate caption HTML
+    caption_html = _generate_caption_html(captions, hide_captions)
+
+    # Convert SMPL data to JSON
+    smpl_data_json = json.dumps(smpl_frames, ensure_ascii=False)
+
+    # Load template
+    template_path = os.path.join(_TEMPLATE_DIR, "index_wooden_static.html")
+    with open(template_path, "r", encoding="utf-8") as f:
+        template_content = f.read()
+
+    # Replace placeholders with actual data
+    html_content = template_content.replace("{{ smpl_data_json }}", smpl_data_json)
+    html_content = html_content.replace("{{ caption_html }}", caption_html)
+
+    # Generate output path
+    os.makedirs(output_dir, exist_ok=True)
+    output_html_path = os.path.join(output_dir, f"{file_name}_vis.html")
+
+    # Write HTML file
+    with _FILE_ACCESS_LOCK:
+        with open(output_html_path, "w", encoding="utf-8") as f:
+            f.write(html_content)
+
+    print(f">>> Generated static HTML: {output_html_path}")
+    return output_html_path
+
+
+def _generate_caption_html(captions: List[dict], hide_captions: bool = False) -> str:
+    """
+    Generate the caption overlay HTML.
+
+    Args:
+        captions: List of caption dictionaries
+        hide_captions: Whether to hide captions
+
+    Returns:
+        HTML string for caption overlay
+    """
+    if hide_captions or not captions:
+        return ""
+
+    caption_items = []
+    for caption in captions:
+        # Get the display text (prefer rewritten text)
+        text = caption.get("short caption+") or caption.get("short caption") or "No caption"
+        caption_items.append(f'<div class="caption-item">{text}</div>')
+
+    captions_html = "\n".join(caption_items)
+
+    return f'''
+    <div class="caption-overlay">
+        <div class="motion-info" id="motion-info">
+            <div class="captions-section">
+                {captions_html}
+            </div>
+        </div>
+    </div>
+    '''

scripts/gradio/templates/index_wooden_static.html

@@ -0,0 +1,1205 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+    <title>Motion Visualization</title>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
+    <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>
+        html, body {
+            background: #1a1a2e !important;
+            color: #e2e8f0;
+            margin: 0;
+            padding: 0;
+        }
+        .container {
+            padding: 0;
+            border: none;
+            background: #1a1a2e;
+        }
+        .alert-success {
+            display: none;
+        }
+    </style>
+</head>
+
+<body>
+
+<!-- Fullscreen 3D container -->
+<div class="fullscreen-container">
+    <!-- 3D viewport -->
+    <div id="vis3d"></div>
+
+    <!-- Floating caption overlay (centered at top) -->
+    {{ caption_html }}
+
+    <!-- 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>
+
+<!-- Embedded SMPL Data - Generated by Python -->
+<script type="application/json" id="smpl-data-json">
+{{ smpl_data_json }}
+</script>
+
+<script type="module">
+    import * as THREE from 'three';
+    import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
+
+    // ============================================================
+    // EMBEDDED: create_ground.js functions
+    // ============================================================
+
+    function getAdaptiveGridSize(sample_data, default_size = 5) {
+        if (sample_data) {
+            const bounds = calculateDataBounds(sample_data);
+            const grid_size = Math.max(bounds.maxRange * 3, 5);
+            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,
+    ) {
+        if (sample_data) {
+            grid_size = getAdaptiveGridSize(sample_data, grid_size);
+        }
+
+        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");
+        context.imageSmoothingEnabled = false;
+
+        var step = adjusted_texture_size / divisions;
+        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);
+        texture.wrapS = THREE.RepeatWrapping;
+        texture.wrapT = THREE.RepeatWrapping;
+        texture.magFilter = THREE.NearestFilter;
+        texture.minFilter = THREE.NearestFilter;
+        texture.generateMipmaps = false;
+
+        var planeGeometry = new THREE.PlaneGeometry(grid_size, grid_size);
+
+        var planeMaterial = new THREE.MeshStandardMaterial({
+            map: texture,
+            side: THREE.DoubleSide,
+            transparent: true,
+            opacity: 0.85,
+            roughness: 0.9,
+            metalness: 0.1,
+            emissiveIntensity: 0.05,
+        });
+
+        var plane = new THREE.Mesh(planeGeometry, planeMaterial);
+        plane.receiveShadow = true;
+
+        return plane;
+    }
+
+    function getChessboard(...args) {
+        var plane = createBaseChessboard(...args);
+        plane.rotation.x = -Math.PI;
+        return plane;
+    }
+
+    function getChessboardXZ(...args) {
+        var plane = createBaseChessboard(...args);
+        plane.rotation.x = -Math.PI / 2;
+        return plane;
+    }
+
+    function getCoordinate(axisLength) {
+        var axes = new THREE.Group();
+        var materialX = new THREE.LineBasicMaterial({ color: 0xff0000 });
+        var materialY = new THREE.LineBasicMaterial({ color: 0x00ff00 });
+        var materialZ = new THREE.LineBasicMaterial({ color: 0x0000ff });
+
+        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);
+
+        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;
+
+        if (sample_data && sample_data.length > 0) {
+            sample_data.forEach((frame) => {
+                if (frame.positions && Array.isArray(frame.positions)) {
+                    frame.positions.forEach((pos) => {
+                        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 (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);
+        const maxRange = Math.max(rangeX, rangeZ);
+
+        return { minX, maxX, minY, maxY, minZ, maxZ, rangeX, rangeY, rangeZ, maxRange };
+    }
+
+    // ============================================================
+    // EMBEDDED: create_scene.js functions
+    // ============================================================
+
+    function create_scene(scene, camera, renderer, use_ground = true, axis_up = "z", axis_forward = "-y") {
+        const width = document.querySelector(".container") ? document.querySelector(".container").offsetWidth : window.innerWidth;
+        const height = width;
+
+        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);
+        scene.fog = new THREE.FogExp2(0x424242, 0.06);
+
+        renderer.shadowMap.enabled = true;
+        renderer.shadowMap.type = THREE.PCFSoftShadowMap;
+
+        const hemisphereLight = new THREE.HemisphereLight(0xffffff, 0x444444, 1.8);
+        hemisphereLight.position.set(0, 2, 0);
+        scene.add(hemisphereLight);
+
+        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);
+
+        const fillLight = new THREE.DirectionalLight(0xaaccff, 0.4);
+        fillLight.position.set(-3, 3, -2);
+        scene.add(fillLight);
+
+        const rimLight = new THREE.DirectionalLight(0xffeedd, 0.3);
+        rimLight.position.set(0, 4, -5);
+        scene.add(rimLight);
+
+        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);
+            }
+        }
+
+        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;
+
+        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();
+        }
+    }
+
+    // ============================================================
+    // EMBEDDED: load_wooden.js functions
+    // ============================================================
+
+    const NUM_SKIN_WEIGHTS = 4;
+
+    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",
+    ];
+
+    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];
+
+    async function load_wooden(shapes, gender, basePath = '/static/assets/dump_wooden') {
+        console.log("Loading wooden model...");
+        basePath = "https://raw.githubusercontent.com/chingswy/WoodenModel/refs/heads/main/dump_wooden"
+        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`,
+        ];
+
+        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');
+        }
+
+        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');
+        }
+
+        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}`);
+
+        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));
+
+        const numJoints = keypoints.length / 3;
+
+        while (edges.length < numJoints) {
+            edges.push(0);
+        }
+
+        var rootBone = new THREE.Bone();
+        rootBone.position.set(keypoints[0], keypoints[1], keypoints[2]);
+        rootBone.name = jointNames[0] || 'Pelvis';
+        var bones = [rootBone];
+
+        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();
+
+        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),
+        ]);
+
+        const material = new THREE.MeshStandardMaterial({
+            map: baseColorMap,
+            roughness: 0.6,
+            metalness: 0.2,
+            envMapIntensity: 1.5,
+        });
+
+        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 };
+    }
+
+    // ============================================================
+    // Main Application Code
+    // ============================================================
+
+    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');
+
+        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();
+        });
+
+        progressSlider.addEventListener('touchstart', () => {
+            if (!modelsLoaded) return;
+            wasPlaying = isPlaying;
+            if (isPlaying) pauseAnimation();
+        });
+
+        progressSlider.addEventListener('touchend', () => {
+            if (!modelsLoaded) return;
+            if (wasPlaying) playAnimation();
+        });
+
+        const speedSlider = document.getElementById('speedSlider');
+        const speedValue = document.getElementById('speedValue');
+        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;
+            }
+        });
+    }
+
+    // Load embedded SMPL data directly (no fetch needed)
+    function loadEmbeddedData() {
+        try {
+            const smplDataElement = document.getElementById('smpl-data-json');
+            if (!smplDataElement) {
+                console.error('SMPL data element not found');
+                return;
+            }
+
+            const datas = JSON.parse(smplDataElement.textContent);
+
+            if (!datas || datas.length === 0) {
+                console.error('No SMPL data available');
+                return;
+            }
+
+            console.log(`Loaded ${datas.length} frames of embedded SMPL data`);
+            infos = datas;
+            total_frame = datas.length;
+
+            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();
+        } catch (error) {
+            console.error('Error loading embedded data:', error);
+        }
+    }
+
+    init();
+    loadEmbeddedData();
+
+    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);
+        scene.fog = new THREE.FogExp2(0x424242, 0.06);
+
+        scene.children = scene.children.filter(child => !child.isLight);
+
+        const hemisphereLight = new THREE.HemisphereLight(0xffffff, 0x444444, 1.2);
+        hemisphereLight.position.set(0, 2, 0);
+        scene.add(hemisphereLight);
+
+        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);
+
+        const fillLight = new THREE.DirectionalLight(0xaaccff, 0.5);
+        fillLight.position.set(-3, 3, -2);
+        scene.add(fillLight);
+
+        const rimLight = new THREE.DirectionalLight(0xffeedd, 0.4);
+        rimLight.position.set(0, 4, -5);
+        scene.add(rimLight);
+
+        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);
+
+        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'] });
+
+        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) => {
+            if (!isDragging && Date.now() - mouseDownTime < 300) {
+                if (modelsLoaded) {
+                    isPlaying ? pauseAnimation() : playAnimation();
+                }
+            }
+        });
+
+        renderer.domElement.addEventListener('dblclick', () => {
+            if (modelsLoaded) {
+                pauseAnimation();
+                currentFrame = 0;
+                updateFrame();
+            }
+        });
+    }
+
+    function animate() {
+        requestAnimationFrame(animate);
+        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 */
+    .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 */
+    .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 */
+    .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;
+    }
+
+    .captions-section {
+        padding: 12px 20px;
+        white-space: nowrap;
+    }
+
+    .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;
+        text-align: center;
+    }
+
+    .caption-item:last-child {
+        margin-bottom: 0;
+    }
+</style>
+
+</body>
+</html>