Nicous commited on
Commit
ebaa7d1
·
verified ·
1 Parent(s): a865bbf

Update app.py

Browse files
Files changed (1) hide show
  1. app.py +50 -27
app.py CHANGED
@@ -98,6 +98,19 @@ title_markdown = """
98
  </div>
99
  </div>
100
  """
 
 
 
 
 
 
 
 
 
 
 
 
 
101
 
102
  bibtext = """
103
  ### Citation
@@ -347,99 +360,109 @@ button.lg.secondary.svelte-1gz44hr span {
347
  </style>
348
 
349
  <script>
 
350
  function initializeControls() {
 
351
  const video = document.querySelector('[data-testid="Video-player"]');
352
  const waveform = document.getElementById('waveform');
353
-
354
- // 如果元素还没准备好,直接返回
355
- if (!video || !waveform) {
356
- console.log("Video or waveform element not found");
357
  return;
358
  }
 
 
 
359
 
360
- // 尝试获取音频元素
361
  const audio = waveform.querySelector('div')?.shadowRoot?.querySelector('audio');
362
  if (!audio) {
363
- console.log("Audio element not found");
364
  return;
365
  }
366
 
367
- console.log('Elements found:', { video, audio });
368
-
369
- // 监听视频播放进度
370
  video.addEventListener("play", () => {
371
  if (audio.paused) {
372
- audio.play(); // 如果音频暂停,开始播放
373
  }
374
  });
375
 
376
- // 监听音频播放进度
377
  audio.addEventListener("play", () => {
378
  if (video.paused) {
379
- video.play(); // 如果视频暂停,开始播放
380
  }
381
  });
382
 
383
- // 同步视频和音频的播放进度
384
  video.addEventListener("timeupdate", () => {
385
  if (Math.abs(video.currentTime - audio.currentTime) > 0.1) {
386
- audio.currentTime = video.currentTime; // 如果时间差超过0.1秒,同步
387
  }
388
  });
389
 
390
  audio.addEventListener("timeupdate", () => {
391
  if (Math.abs(audio.currentTime - video.currentTime) > 0.1) {
392
- video.currentTime = audio.currentTime; // 如果时间差超过0.1秒,同步
393
  }
394
  });
395
 
396
- // 监听暂停事件,确保视频和音频都暂停
397
  video.addEventListener("pause", () => {
398
  if (!audio.paused) {
399
- audio.pause(); // 如果音频未暂停,暂停音频
400
  }
401
  });
402
 
403
  audio.addEventListener("pause", () => {
404
  if (!video.paused) {
405
- video.pause(); // 如果视频未暂停,暂停视频
406
  }
407
  });
408
  }
409
 
410
- // 创建观察器监听DOM变化
411
  const observer = new MutationObserver((mutations) => {
412
  for (const mutation of mutations) {
413
  if (mutation.addedNodes.length) {
414
- // 当有新节点添加时,尝试初始化
415
- const waveform = document.getElementById('waveform');
416
- if (waveform?.querySelector('div')?.shadowRoot?.querySelector('audio')) {
417
- console.log('Audio element detected');
418
  initializeControls();
419
- // 可选:如果不需要继续监听,可以断开观察器
420
- // observer.disconnect();
421
  }
422
  }
423
  }
424
  });
425
 
426
- // 开始观察
427
  observer.observe(document.body, {
428
  childList: true,
429
  subtree: true
430
  });
431
 
432
- // 页面加载完成时也尝试初始化
433
  document.addEventListener('DOMContentLoaded', () => {
434
  console.log('DOM Content Loaded');
435
  initializeControls();
436
  });
437
 
 
 
 
 
 
 
 
 
 
 
438
  </script>
439
  """
440
 
441
  with gr.Blocks(head=head) as demo:
442
  gr.HTML(title_markdown)
 
443
 
444
  with gr.Row():
445
  with gr.Column():
 
98
  </div>
99
  </div>
100
  """
101
+ notice_html = """
102
+ <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);">
103
+ <h2 style="font-size: 1.8em; font-weight: 600; color: #2d3436; margin-bottom: 15px;">NOTICE!!!</h2>
104
+ <ul style="list-style-type: none; padding-left: 0; font-size: 1.1em; color: #555;">
105
+ <li>1. Due to hardware limitations on this demo page, we recommend users only try 10 second videos.</li>
106
+ <li>2. The demo model is used for egocentric video captioning step for EgoRAG framework. The recommended prompt includes:</li>
107
+ <ul style="padding-left: 20px; margin-top: 10px; color: #333;">
108
+ <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>
109
+ <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>
110
+ </ul>
111
+ </ul>
112
+ </div>
113
+ """
114
 
115
  bibtext = """
116
  ### Citation
 
360
  </style>
361
 
362
  <script>
363
+ // Function to initialize controls once elements are found
364
  function initializeControls() {
365
+ const textbox = document.querySelector('[data-testid="textbox"]');
366
  const video = document.querySelector('[data-testid="Video-player"]');
367
  const waveform = document.getElementById('waveform');
368
+
369
+ // Ensure the elements exist before proceeding
370
+ if (!textbox || !video || !waveform) {
371
+ console.log("Textbox, video, or waveform element not found.");
372
  return;
373
  }
374
+
375
+ // Example of setting up interactions if textbox and other elements are found
376
+ console.log("Elements found:", { textbox, video, waveform });
377
 
378
+ // Your logic for controlling the video and audio goes here
379
  const audio = waveform.querySelector('div')?.shadowRoot?.querySelector('audio');
380
  if (!audio) {
381
+ console.log("Audio element not found.");
382
  return;
383
  }
384
 
 
 
 
385
  video.addEventListener("play", () => {
386
  if (audio.paused) {
387
+ audio.play();
388
  }
389
  });
390
 
 
391
  audio.addEventListener("play", () => {
392
  if (video.paused) {
393
+ video.play();
394
  }
395
  });
396
 
 
397
  video.addEventListener("timeupdate", () => {
398
  if (Math.abs(video.currentTime - audio.currentTime) > 0.1) {
399
+ audio.currentTime = video.currentTime;
400
  }
401
  });
402
 
403
  audio.addEventListener("timeupdate", () => {
404
  if (Math.abs(audio.currentTime - video.currentTime) > 0.1) {
405
+ video.currentTime = audio.currentTime;
406
  }
407
  });
408
 
 
409
  video.addEventListener("pause", () => {
410
  if (!audio.paused) {
411
+ audio.pause();
412
  }
413
  });
414
 
415
  audio.addEventListener("pause", () => {
416
  if (!video.paused) {
417
+ video.pause();
418
  }
419
  });
420
  }
421
 
422
+ // Create an observer to listen for DOM changes
423
  const observer = new MutationObserver((mutations) => {
424
  for (const mutation of mutations) {
425
  if (mutation.addedNodes.length) {
426
+ // When new nodes are added, try to initialize
427
+ const textbox = document.querySelector('[data-testid="textbox"]');
428
+ if (textbox) {
429
+ console.log("Textbox element detected");
430
  initializeControls();
431
+ // Optionally disconnect the observer after initialization
432
+ observer.disconnect();
433
  }
434
  }
435
  }
436
  });
437
 
438
+ // Start observing DOM changes
439
  observer.observe(document.body, {
440
  childList: true,
441
  subtree: true
442
  });
443
 
444
+ // Ensure initialization happens after the DOM is fully loaded
445
  document.addEventListener('DOMContentLoaded', () => {
446
  console.log('DOM Content Loaded');
447
  initializeControls();
448
  });
449
 
450
+ // Example of delayed execution to ensure all elements have loaded
451
+ window.addEventListener("load", () => {
452
+ const textbox = document.querySelector('[data-testid="textbox"]');
453
+ if (textbox) {
454
+ console.log("Textbox element found on window load.");
455
+ initializeControls();
456
+ }
457
+ });
458
+
459
+
460
  </script>
461
  """
462
 
463
  with gr.Blocks(head=head) as demo:
464
  gr.HTML(title_markdown)
465
+ gr.HTML(notice_html)
466
 
467
  with gr.Row():
468
  with gr.Column():