Update app.py

app.py

@@ -104,7 +104,8 @@ notice_html = """
         <li>- Due to hardware limitations on this demo page, we recommend users only try 10-second videos.</li>
         <li>- The demo model is used for the egocentric video captioning step for the EgoRAG framework. The recommended prompt includes:</li>
         <ul style="padding-left: 20px; margin-top: 10px; color: #333;">
-            <li>Can you help me log everything I do and the key things I see, like a personal journal? Describe them in a natural style. Please provide your response using the first person, with "I" as the subject. Make sure the descriptions are detailed and natural.</li>
+            <li>Can you help me log everything I do and the key things I see, like a personal journal? Describe them in a natural style. 
+            <li>Please provide your response using the first person, with "I" as the subject. Make sure the descriptions are detailed and natural.</li>
             <li>Can you write down important things I notice or interact with? Please respond in the first person, using "I" as the subject. Describe them in a natural style.</li>
         </ul>
     </ul>
@@ -361,101 +362,91 @@ button.lg.secondary.svelte-1gz44hr span {
 <script>
 // Function to initialize controls once elements are found
 function initializeControls() {
-    const textbox = document.querySelector('[data-testid="textbox"]');
     const video = document.querySelector('[data-testid="Video-player"]');
     const waveform = document.getElementById('waveform');
-
-    // Ensure the elements exist before proceeding
-    if (!textbox || !video || !waveform) {
-        console.log("Textbox, video, or waveform element not found.");
+    
+    // 如果元素还没准备好，直接返回
+    if (!video || !waveform) {
         return;
     }
-
-    // Example of setting up interactions if textbox and other elements are found
-    console.log("Elements found:", { textbox, video, waveform });
     
-    // Your logic for controlling the video and audio goes here
+    // 尝试获取音频元素
     const audio = waveform.querySelector('div')?.shadowRoot?.querySelector('audio');
     if (!audio) {
-        console.log("Audio element not found.");
         return;
     }
 
-    video.addEventListener("play", () => {
-        if (audio.paused) {
-            audio.play();
-        }
-    });
+    console.log('Elements found:', { video, audio });
+    
+   // 监听视频播放进度
+  video.addEventListener("play", () => {
+    if (audio.paused) {
+      audio.play();  // 如果音频暂停，开始播放
+    }
+  });
 
-    audio.addEventListener("play", () => {
-        if (video.paused) {
-            video.play();
-        }
-    });
+  // 监听音频播放进度
+  audio.addEventListener("play", () => {
+    if (video.paused) {
+      video.play();  // 如果视频暂停，开始播放
+    }
+  });
 
-    video.addEventListener("timeupdate", () => {
-        if (Math.abs(video.currentTime - audio.currentTime) > 0.1) {
-            audio.currentTime = video.currentTime;
-        }
-    });
+  // 同步视频和音频的播放进度
+  video.addEventListener("timeupdate", () => {
+    if (Math.abs(video.currentTime - audio.currentTime) > 0.1) {
+      audio.currentTime = video.currentTime; // 如果时间差超过0.1秒，同步
+    }
+  });
 
-    audio.addEventListener("timeupdate", () => {
-        if (Math.abs(audio.currentTime - video.currentTime) > 0.1) {
-            video.currentTime = audio.currentTime;
-        }
-    });
+  audio.addEventListener("timeupdate", () => {
+    if (Math.abs(audio.currentTime - video.currentTime) > 0.1) {
+      video.currentTime = audio.currentTime; // 如果时间差超过0.1秒，同步
+    }
+  });
 
-    video.addEventListener("pause", () => {
-        if (!audio.paused) {
-            audio.pause();
-        }
-    });
+  // 监听暂停事件，确保视频和音频都暂停
+  video.addEventListener("pause", () => {
+    if (!audio.paused) {
+      audio.pause();  // 如果音频未暂停，暂停音频
+    }
+  });
 
-    audio.addEventListener("pause", () => {
-        if (!video.paused) {
-            video.pause();
-        }
-    });
+  audio.addEventListener("pause", () => {
+    if (!video.paused) {
+      video.pause();  // 如果视频未暂停，暂停视频
+    }
+  });
 }
 
-// Create an observer to listen for DOM changes
+// 创建观察器监听DOM变化
 const observer = new MutationObserver((mutations) => {
     for (const mutation of mutations) {
         if (mutation.addedNodes.length) {
-            // When new nodes are added, try to initialize
-            const textbox = document.querySelector('[data-testid="textbox"]');
-            if (textbox) {
-                console.log("Textbox element detected");
+            // 当有新节点添加时，尝试初始化
+            const waveform = document.getElementById('waveform');
+            if (waveform?.querySelector('div')?.shadowRoot?.querySelector('audio')) {
+                console.log('Audio element detected');
                 initializeControls();
-                // Optionally disconnect the observer after initialization
-                observer.disconnect();
+                // 可选：如果不需要继续监听，可以断开观察器
+                // observer.disconnect();
             }
         }
     }
 });
 
-// Start observing DOM changes
+// 开始观察
 observer.observe(document.body, {
     childList: true,
     subtree: true
 });
 
-// Ensure initialization happens after the DOM is fully loaded
+// 页面加载完成时也尝试初始化
 document.addEventListener('DOMContentLoaded', () => {
     console.log('DOM Content Loaded');
     initializeControls();
 });
 
-// Example of delayed execution to ensure all elements have loaded
-window.addEventListener("load", () => {
-    const textbox = document.querySelector('[data-testid="textbox"]');
-    if (textbox) {
-        console.log("Textbox element found on window load.");
-        initializeControls();
-    }
-});
-
-
 </script>
 """