Update app.py

app.py

@@ -98,6 +98,19 @@ title_markdown = """
     </div>
 </div>
 """
+notice_html = """
+<div style="background-color: #f9f9f9; border-left: 5px solid #48dbfb; padding: 20px; margin-top: 20px; border-radius: 10px; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);">
+    <h2 style="font-size: 1.8em; font-weight: 600; color: #2d3436; margin-bottom: 15px;">NOTICE!!!</h2>
+    <ul style="list-style-type: none; padding-left: 0; font-size: 1.1em; color: #555;">
+        <li>1. Due to hardware limitations on this demo page, we recommend users only try 10 second videos.</li>
+        <li>2. The demo model is used for egocentric video captioning step for 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>Hey, 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>
+</div>
+"""
 
 bibtext = """
 ### Citation
@@ -347,99 +360,109 @@ button.lg.secondary.svelte-1gz44hr span {
 </style>
 
 <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');
-    
-    // 如果元素还没准备好，直接返回
-    if (!video || !waveform) {
-        console.log("Video or waveform element not found");
+
+    // Ensure the elements exist before proceeding
+    if (!textbox || !video || !waveform) {
+        console.log("Textbox, video, or waveform element not found.");
         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");
+        console.log("Audio element not found.");
         return;
     }
 
-    console.log('Elements found:', { video, audio });
-    
-    // 监听视频播放进度
     video.addEventListener("play", () => {
         if (audio.paused) {
-            audio.play();  // 如果音频暂停，开始播放
+            audio.play();
         }
     });
 
-    // 监听音频播放进度
     audio.addEventListener("play", () => {
         if (video.paused) {
-            video.play();  // 如果视频暂停，开始播放
+            video.play();
         }
     });
 
-    // 同步视频和音频的播放进度
     video.addEventListener("timeupdate", () => {
         if (Math.abs(video.currentTime - audio.currentTime) > 0.1) {
-            audio.currentTime = video.currentTime; // 如果时间差超过0.1秒，同步
+            audio.currentTime = video.currentTime;
         }
     });
 
     audio.addEventListener("timeupdate", () => {
         if (Math.abs(audio.currentTime - video.currentTime) > 0.1) {
-            video.currentTime = audio.currentTime; // 如果时间差超过0.1秒，同步
+            video.currentTime = audio.currentTime;
         }
     });
 
-    // 监听暂停事件，确保视频和音频都暂停
     video.addEventListener("pause", () => {
         if (!audio.paused) {
-            audio.pause();  // 如果音频未暂停，暂停音频
+            audio.pause();
         }
     });
 
     audio.addEventListener("pause", () => {
         if (!video.paused) {
-            video.pause();  // 如果视频未暂停，暂停视频
+            video.pause();
         }
     });
 }
 
-// 创建观察器监听DOM变化
+// Create an observer to listen for DOM changes
 const observer = new MutationObserver((mutations) => {
     for (const mutation of mutations) {
         if (mutation.addedNodes.length) {
-            // 当有新节点添加时，尝试初始化
-            const waveform = document.getElementById('waveform');
-            if (waveform?.querySelector('div')?.shadowRoot?.querySelector('audio')) {
-                console.log('Audio element detected');
+            // When new nodes are added, try to initialize
+            const textbox = document.querySelector('[data-testid="textbox"]');
+            if (textbox) {
+                console.log("Textbox element detected");
                 initializeControls();
-                // 可选：如果不需要继续监听，可以断开观察器
-                // observer.disconnect();
+                // Optionally disconnect the observer after initialization
+                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>
 """
 
 with gr.Blocks(head=head) as demo:
     gr.HTML(title_markdown)
+    gr.HTML(notice_html)
     
     with gr.Row():
         with gr.Column():