Merge branch 'master' of https://github.com/OpenPerceptionX/OpenPerceptionX.github.io

Author: faikit

public/WholeBodyVLA/index.html

@@ -780,8 +780,9 @@ <h2 class="subtitle">
     <div class="container is-max-desktop">
       <div class="hero-body">
         <h1 class="title is-2" style="text-align: center; padding-bottom: 10px;">Method Overview</h1>
-        <div align="center">
-          <img src="https://assets.kinetixai.cn/WholeBodyVLA/20251217-123804.gif" alt="WholeBodyVLA Method" width="100%">
+        <div align="center" style="position: relative; width: 100%;">
+          <img id="method-gif" src="https://assets.kinetixai.cn/WholeBodyVLA/20251217-123804.gif" alt="WholeBodyVLA Method" width="100%" style="display: block;">
+          <img id="method-static" src="https://assets.kinetixai.cn/WholeBodyVLA/method_wbvla.png" alt="WholeBodyVLA Method" width="100%" style="visibility: hidden; position: absolute; top: 0; left: 0;">
         </div>  
         <br> 
         <h2 class="subtitle">
@@ -2346,5 +2347,73 @@ <h2 class="section-title" id="whats-more">What's More</h2>
     video.addEventListener("click", enableControlsOnce);
   });
   </script>
+  <script>
+  // Method GIF 播放控制：播放完成后切换到静态图片，然后循环
+  document.addEventListener("DOMContentLoaded", () => {
+    const methodGif = document.getElementById("method-gif");
+    const methodStatic = document.getElementById("method-static");
+    
+    if (!methodGif || !methodStatic) return;
+    
+    let gifTimer = null;
+    let staticTimer = null;
+    
+    // 估计 GIF 播放时长（秒），可以根据实际 GIF 时长调整
+    const GIF_DURATION = 8; // 假设 GIF 播放时长为 8 秒，你可以根据实际调整
+    const STATIC_DURATION = 30; // 静态图片显示 3 秒
+    
+    function showGif() {
+      // GIF 显示，静态图片隐藏
+      methodGif.style.visibility = "visible";
+      methodStatic.style.visibility = "hidden";
+      
+      // 清除之前的定时器
+      if (staticTimer) {
+        clearTimeout(staticTimer);
+        staticTimer = null;
+      }
+      
+      // GIF 播放完成后切换到静态图片
+      if (gifTimer) clearTimeout(gifTimer);
+      gifTimer = setTimeout(() => {
+        showStatic();
+      }, GIF_DURATION * 1000);
+    }
+    
+    function showStatic() {
+      // 使用 visibility 而不是 display，这样 GIF 仍然占据空间，保持容器高度
+      // GIF 隐藏但占据空间，静态图片显示并覆盖在上面
+      methodGif.style.visibility = "hidden";
+      methodStatic.style.visibility = "visible";
+      
+      // 清除之前的定时器
+      if (gifTimer) {
+        clearTimeout(gifTimer);
+        gifTimer = null;
+      }
+      
+      // 静态图片显示一段时间后重新播放 GIF
+      if (staticTimer) clearTimeout(staticTimer);
+      staticTimer = setTimeout(() => {
+        // 重新加载 GIF 以重新播放
+        const gifSrc = methodGif.src;
+        methodGif.src = "";
+        setTimeout(() => {
+          methodGif.src = gifSrc;
+          showGif();
+        }, 100);
+      }, STATIC_DURATION * 1000);
+    }
+    
+    // 监听 GIF 加载完成
+    if (methodGif.complete) {
+      showGif();
+    } else {
+      methodGif.addEventListener("load", () => {
+        showGif();
+      });
+    }
+  });
+  </script>
 </body>
 </html>