Spaces:
Running
on
Zero
Running
on
Zero
Update app.py
Browse files
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("
|
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;
|
387 |
}
|
388 |
});
|
389 |
|
390 |
audio.addEventListener("timeupdate", () => {
|
391 |
if (Math.abs(audio.currentTime - video.currentTime) > 0.1) {
|
392 |
-
video.currentTime = audio.currentTime;
|
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 |
-
//
|
411 |
const observer = new MutationObserver((mutations) => {
|
412 |
for (const mutation of mutations) {
|
413 |
if (mutation.addedNodes.length) {
|
414 |
-
//
|
415 |
-
const
|
416 |
-
if (
|
417 |
-
console.log(
|
418 |
initializeControls();
|
419 |
-
//
|
420 |
-
|
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():
|