streaming from repo

app.py

@@ -40,6 +40,7 @@ def load_video_list() -> List[Dict[str, str]]:
     
     return video_list
 
+
 def score_to_emoji(score):
     if score < 0.2:
         return "😴"
@@ -79,10 +80,11 @@ def format_timestamp(timestamp: str) -> str:
     except Exception as e:
         logger.error(f"Invalid timestamp format: {timestamp}")
         return ""
+
 def create_scene_table(scene: Dict[str, Any]) -> str:
     dynamism_score = scene.get('dynamismScore', 0)
     av_correlation = scene.get('audioVisualCorrelation', 0)
-    cast = ", ".join([cast_member for cast_member in scene.get('cast', []) if cast_member and cast_member != 'None'])
+    cast = ", ".join([cast_member for cast_member in scene.get('cast', [])])
     
     output = f"""
     <div class="scene-container">
@@ -134,29 +136,26 @@ def create_scene_table(scene: Dict[str, Any]) -> str:
                     # Handle mood changes
                     for mood_change in item.get('keyMoments', []):
                         if isinstance(mood_change, dict):
-                            mood_change_description = mood_change.get('changeDescription', '')
-                            if mood_change_description and mood_change_description != 'None':
-                                scene_events.append({
-                                    'timestamp_start': mood_change.get('timestamp', ''),
-                                    'timestamp_end': '',
-                                    'type': 'Mood Change',
-                                    'description': mood_change_description
-                                })
+                            scene_events.append({
+                                'timestamp_start': mood_change.get('timestamp', ''),
+                                'timestamp_end': '',
+                                'type': 'Mood Change',
+                                'description': mood_change.get('changeDescription', '')
+                            })
                 elif data_type == 'Character Interaction':
-                    characters = ', '.join([char for char in item.get('characters', []) if char and char != 'None'])
+                    characters = ', '.join(item.get('characters', []))
                     description = f"{characters}: {item.get('description', '')}"
                 else:
                     start_time = item.get('timestamp', '')
                     description = item.get('description', '')
 
-                if description and description != 'None':  # Only add the event if there's a valid description
-                    scene_events.append({
-                        'timestamp_start': start_time,
-                        'timestamp_end': end_time,
-                        'type': data_type,
-                        'description': description
-                    })
-            elif isinstance(item, str) and item and item != 'None':  # Only add non-empty and non-'None' string items
+                scene_events.append({
+                    'timestamp_start': start_time,
+                    'timestamp_end': end_time,
+                    'type': data_type,
+                    'description': description
+                })
+            elif isinstance(item, str):
                 scene_events.append({
                     'timestamp_start': '',
                     'timestamp_end': '',
@@ -286,38 +285,23 @@ def create_filmstrip(scenes: List[Dict[str, Any]], video_duration: float) -> str
     """
     return filmstrip_html
 
-# def generate_correlation_scores(metadata: Dict[str, Any]) -> str:
-#     dynamism_score = metadata.get('dynamismscore', 0)
-#     av_correlation = metadata.get('audiovisualcorrelation', 0)
-
-#     def score_to_emoji(score):
-#         if score < 0.2:
-#             return "😴"
-#         elif score < 0.4:
-#             return "🙂"
-#         elif score < 0.6:
-#             return "😊"
-#         elif score < 0.8:
-#             return "😃"
-#         else:
-#             return "🤩"
-
-#     return f"""
-#     <div class="correlation-scores">
-#         <p>Dynamism: {score_to_emoji(dynamism_score)} ({dynamism_score:.2f})</p>
-#         <p>Audio-Visual Correlation: {score_to_emoji(av_correlation)} ({av_correlation:.2f})</p>
-#     </div>
-#     """
-
 def process_video(video_id: str):
     try:
-        #logger.info(f"Processing video with ID: {video_id}")
+        logger.info(f"Processing video with ID: {video_id}")
         metadata = load_metadata(video_id)
-        video_path = os.path.join(video_folder, f"{video_id}.mp4")
 
-        if not os.path.exists(video_path):
-            logger.error(f"Video file not found: {video_path}")
-            return None, "", f"Error: Video file not found for ID {video_id}"
+        # Always use the test URL instead of the actual video file
+        video_url = f"https://huggingface.co/spaces/finevideo/viztest/resolve/main/video/{video_id}.mp4"
+
+        # Create HTML for video player
+        video_html = f"""
+        <div id="video-wrapper">
+            <video id="video-player" controls>
+                <source src="{video_url}" type="video/mp4">
+                Your browser does not support the video tag.
+            </video>
+        </div>
+        """
 
         # Character List Table
         character_table = """
@@ -359,7 +343,7 @@ def process_video(video_id: str):
         filmstrip_html = create_filmstrip(metadata['scenes'], video_duration)
 
         logger.info("Video processing completed successfully")
-        return video_path, filmstrip_html, additional_data + scenes_output + storylines_output + qa_output + trimming_suggestions_output
+        return video_html, filmstrip_html, additional_data + scenes_output + storylines_output + qa_output + trimming_suggestions_output
     except Exception as e:
         logger.exception(f"Error processing video: {str(e)}")
         return None, "", f"Error processing video: {str(e)}"
@@ -385,7 +369,6 @@ body {
 #logo {
     width: auto;
     height: 150px;
-    margin-right: 20px;
     box-shadow: none !important;
     border: none !important;
     background: none !important;
@@ -399,7 +382,7 @@ body {
 }
 #header-content h1 {
     margin: 0;
-    font-size: 45px;
+    font-size: 36px;
     font-weight: bold;
 }
 #header-content a {
@@ -411,44 +394,32 @@ body {
     text-decoration: underline;
 }
 #top-panel {
-    position: sticky;
-    top: 10vh;
-    background-color: white;
-    z-index: 100;
-    padding: 20px;
-    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
+    height: 33vh;
     display: flex;
-    height: 35vh;
+    padding: 10px;
+    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
     overflow: hidden;
 }
 #video-list-column {
-    display: flex;
-    flex-direction: column;
-    max-height: 100%;
-    width: 30%;
+
+    max-height: 80vh; /* Adjust as needed */
     overflow-y: auto;
 }
-#video-list label {
-    display: block;
-    width: 100%;
-}
 #video-column {
+    width: 70%;
     display: flex;
     flex-direction: column;
-    max-height: 100%;
-    overflow: hidden;
-    width: 70%;
 }
-#video-column > div:first-child {
+#video-wrapper {
+    flex-grow: 1;
     display: flex;
-    flex-direction: column;
-    height: calc(100% - 100px);
+    justify-content: center;
+    align-items: center;
+    overflow: hidden;
 }
-#video-column video {
-    max-height: 100%;
-    object-fit: contain;
+#video-player {
     width: 100%;
-    margin: 0;
+    max-height: calc(33vh - 120px) !important;
 }
 #filmstrip-container {
     width: 100%;
@@ -457,7 +428,6 @@ body {
     position: relative;
     overflow: hidden;
     cursor: pointer;
-    margin-top: 0;
 }
 #filmstrip-container > div,
 #filmstrip-container > div > div,
@@ -465,10 +435,9 @@ body {
     height: 100% !important;
 }
 #scrollable-content {
-    flex-grow: 1;
+    height: 67vh;
     overflow-y: auto;
     padding: 20px;
-    height: calc(55vh - 40px);
 }
 #metadata-container {
     margin-top: 20px;
@@ -491,6 +460,7 @@ body {
     flex-direction: column !important;
 }
 .content-samples label {
+    display: block;
     padding: 10px;
     cursor: pointer;
     border-bottom: 1px solid #ddd;
@@ -590,56 +560,57 @@ body {
 .icon-buttons button {
     display: none !important;
 }
+
+/* Ensure one element per row in Gradio list */
+#video-list-column .wrap {
+    display: flex;
+    flex-direction: column;
+}
+
+#video-list-column .wrap > .wrap {
+    display: flex !important;
+    flex-direction: column !important;
+}
+
+#video-list-column label {
+    display: block;
+    width: 100%;
+}
 """
 
 js = """
 <script>
+// Wrap everything in an IIFE to avoid polluting the global scope
 (function() {
-    let isReinitializing = false;
-    let lastVideoSrc = null;
-
-    function showOverlay() {
-        let overlay = document.getElementById('reinitialization-overlay');
-        if (!overlay) {
-            overlay = document.createElement('div');
-            overlay.id = 'reinitialization-overlay';
-            overlay.style.position = 'fixed';
-            overlay.style.top = '0';
-            overlay.style.left = '0';
-            overlay.style.width = '100%';
-            overlay.style.height = '100%';
-            overlay.style.backgroundColor = 'rgba(0, 0, 0, 0.5)';
-            overlay.style.display = 'flex';
-            overlay.style.justifyContent = 'center';
-            overlay.style.alignItems = 'center';
-            overlay.style.zIndex = '9999';
-
-            const message = document.createElement('div');
-            message.textContent = 'Loading assets...';
-            message.style.color = 'white';
-            message.style.fontSize = '24px';
-            message.style.fontWeight = 'bold';
-
-            overlay.appendChild(message);
-            document.body.appendChild(overlay);
+    function safeLog(message) {
+        if (typeof console !== 'undefined' && console.log) {
+            console.log(message);
         }
-        overlay.style.display = 'flex';
     }
 
-    function hideOverlay() {
-        const overlay = document.getElementById('reinitialization-overlay');
-        if (overlay) {
-            overlay.style.display = 'none';
+    function findFilmstripInner(container) {
+        if (container.id === 'filmstrip-inner') {
+            return container;
+        }
+        for (let child of container.children) {
+            let result = findFilmstripInner(child);
+            if (result) {
+                return result;
+            }
         }
+        return null;
     }
 
     function initializeFilmstrip() {
+        //safeLog("Initializing filmstrip...");
+
         var videoElement = document.querySelector('video');
         var filmstripContainer = document.getElementById('filmstrip-container');
-        var filmstripInner = filmstripContainer ? filmstripContainer.querySelector('#filmstrip-inner') : null;
+        var filmstripInner = findFilmstripInner(filmstripContainer);
         var scrubbingNeedle = document.getElementById('scrubbing-needle');
 
         if (!videoElement || !filmstripContainer || !filmstripInner || !scrubbingNeedle) {
+            //safeLog("Required elements not found for filmstrip");
             return;
         }
 
@@ -655,13 +626,22 @@ js = """
             var clickPosition = (event.clientX - rect.left) / rect.width;
             videoElement.currentTime = clickPosition * videoDuration;
         });
+
+        //safeLog("Filmstrip initialization complete");
     }
 
     function initializeTimestampLinks() {
+        //safeLog("Initializing timestamp links...");
         var videoElement = document.querySelector('video');
         var links = document.querySelectorAll('.timestamp-link');
         
-        if (!videoElement || links.length === 0) {
+        if (!videoElement) {
+            //safeLog("Video element not found for timestamp links");
+            return;
+        }
+        
+        if (links.length === 0) {
+            //safeLog("No timestamp links found");
             return;
         }
 
@@ -669,75 +649,142 @@ js = """
             link.addEventListener('click', function(e) {
                 e.preventDefault();
                 var timestamp = this.getAttribute('data-timestamp');
+                //safeLog("Timestamp link clicked: " + timestamp);
                 var parts = timestamp.split(':');
                 var seconds = parseInt(parts[0], 10) * 3600 + parseInt(parts[1], 10) * 60 + parseFloat(parts[2]);
                 videoElement.currentTime = seconds;
             });
         });
+        //safeLog("Timestamp links initialization complete");
+    }
+
+    let isReinitializing = false;
+
+    function showOverlay() {
+        let overlay = document.getElementById('reinitialization-overlay');
+        if (!overlay) {
+            overlay = document.createElement('div');
+            overlay.id = 'reinitialization-overlay';
+            overlay.style.position = 'fixed';
+            overlay.style.top = '0';
+            overlay.style.left = '0';
+            overlay.style.width = '100%';
+            overlay.style.height = '100%';
+            overlay.style.backgroundColor = 'rgba(0, 0, 0, 0.5)';
+            overlay.style.display = 'flex';
+            overlay.style.justifyContent = 'center';
+            overlay.style.alignItems = 'center';
+            overlay.style.zIndex = '9999';
+
+            const message = document.createElement('div');
+            message.textContent = 'Loading assets...';
+            message.style.color = 'white';
+            message.style.fontSize = '24px';
+            message.style.fontWeight = 'bold';
+
+            overlay.appendChild(message);
+            document.body.appendChild(overlay);
+        }
+        overlay.style.display = 'flex';
+    }
+
+    function hideOverlay() {
+        const overlay = document.getElementById('reinitialization-overlay');
+        if (overlay) {
+            overlay.style.display = 'none';
+        }
     }
 
     function initializeEverything() {
         if (isReinitializing) {
+            //safeLog("Already reinitializing, skipping...");
             return;
         }
 
         isReinitializing = true;
         showOverlay();
-        
-        const videoElement = document.querySelector('video');
-        if (videoElement) {
-            const onCanPlay = function() {
-                videoElement.removeEventListener('canplay', onCanPlay);
-                initializeFilmstrip();
-                initializeTimestampLinks();
-                isReinitializing = false;
-                hideOverlay();
-            };
-
-            videoElement.addEventListener('canplay', onCanPlay);
-
-            // If the video is already loaded, trigger the event manually
-            if (videoElement.readyState >= 3) {
-                videoElement.dispatchEvent(new Event('canplay'));
-            }
-        } else {
-            // If there's no video element, just initialize other components
+        //safeLog("Initializing everything...");
+        try {
             initializeFilmstrip();
             initializeTimestampLinks();
+            //safeLog("Initialization complete");
+        } catch (error) {
+            //safeLog("Error during initialization: " + error.message);
+        } finally {
             isReinitializing = false;
             hideOverlay();
         }
     }
 
-    function checkForVideoChanges() {
-        const videoElement = document.querySelector('video');
-        if (videoElement && videoElement.src !== lastVideoSrc) {
-            lastVideoSrc = videoElement.src;
-            showOverlay();
-            setTimeout(initializeEverything, 100);
+    let lastVideoSelection = null;
+
+    function checkVideoSelection() {
+        const videoList = document.getElementById('video-list');
+        if (videoList) {
+            const currentSelection = videoList.querySelector('input:checked');
+            if (currentSelection && currentSelection.value !== lastVideoSelection) {
+                //safeLog("Video selection changed, reinitializing...");
+                lastVideoSelection = currentSelection.value;
+                showOverlay();
+                setTimeout(() => {
+                    initializeEverything();
+                    hideOverlay();
+                }, 1000);  // Delay to ensure new video is loaded
+            }
         }
     }
 
     // Set up a MutationObserver to watch for changes in the entire document
     const contentObserver = new MutationObserver((mutations) => {
-        checkForVideoChanges();
+        mutations.forEach((mutation) => {
+            if (mutation.type === 'childList' || mutation.type === 'attributes') {
+                checkVideoSelection();
+                if (mutation.target.id === 'video-container' || 
+                    mutation.target.id === 'filmstrip-container' ||
+                    mutation.target.id === 'metadata-container') {
+                    //safeLog("Relevant content updated, reinitializing...");
+                    setTimeout(initializeEverything, 100);  // Small delay to ensure elements are ready
+                }
+            }
+        });
     });
 
     contentObserver.observe(document.body, {
         childList: true,
         subtree: true,
         attributes: true,
-        attributeFilter: ['src']
+        attributeFilter: ['value', 'checked']
     });
 
-    // Periodically check for video changes
-    setInterval(checkForVideoChanges, 1000);
+    // Function to set up Gradio event listeners
+    function setupGradioEventListeners() {
+        if (typeof gradio !== 'undefined') {
+            //safeLog("Setting up Gradio event listeners...");
+            gradio('#video-list').change(function(evt) {
+                //safeLog("Gradio detected video selection change, reinitializing...");
+                setTimeout(initializeEverything, 1000);
+            });
+        } /*else {
+            safeLog("Gradio not found, using fallback method");
+        }*/
+    }
+
+    // Periodically check for video selection changes
+    setInterval(checkVideoSelection, 1000);
 
     // Initialize everything when the DOM is ready
-    document.addEventListener('DOMContentLoaded', initializeEverything);
+    document.addEventListener('DOMContentLoaded', function() {
+        initializeEverything();
+        setupGradioEventListeners();
+        checkVideoSelection();
+    });
 
     // Also try to initialize after a short delay, in case DOMContentLoaded has already fired
-    setTimeout(initializeEverything, 1000);
+    setTimeout(function() {
+        initializeEverything();
+        setupGradioEventListeners();
+        checkVideoSelection();
+    }, 1000);
 })();
 </script>
 """
@@ -745,15 +792,15 @@ js = """
 with gr.Blocks(css=css, head=js) as iface:
     with gr.Row(elem_id="header"):
         with gr.Column(scale=1):
-            gr.Image("logo.png", elem_id="logo", show_label=False, interactive=False)
-        with gr.Column(elem_id="header-content",scale=10):
+            gr.Image("logo11.png", elem_id="logo", show_label=False, interactive=False)
+        with gr.Column(elem_id="header-content", scale=10):
             gr.Markdown("""
-    # Exploration space
+    # Exploration page
                     
-    ## [🔗 Dataset](https://huggingface.co/datasets/HuggingFaceFV/finevideo)
+    ## [🔗 Dataset](https://huggingface.co/mfarre/Video-LLaVA-7B-hf-CinePile)
     """)
     with gr.Row(elem_id="top-panel"):
-        with gr.Column(scale=1, elem_id="video-list-column"):
+        with gr.Column(scale=3, elem_id="video-list-column"):
             video_list_data = load_video_list()
             video_list = gr.Radio(
                 label="Content Samples",
@@ -763,8 +810,8 @@ with gr.Blocks(css=css, head=js) as iface:
                 container=False
             )
         
-        with gr.Column(scale=2, elem_id="video-column"):
-            video_output = gr.Video(label="Video", elem_id="video-player")
+        with gr.Column(scale=7, elem_id="video-column"):
+            video_output = gr.HTML(elem_id="video-container")
             filmstrip_output = gr.HTML(elem_id="filmstrip-container")
     
     with gr.Row(elem_id="scrollable-content"):
@@ -772,11 +819,11 @@ with gr.Blocks(css=css, head=js) as iface:
 
     def wrapped_process_video(title: str) -> tuple:
         if not title:
-            return None, "", ""
+            return "", "", ""
         video_id = next(video["video_id"] for video in video_list_data if video["title"] == title)
         logging.info(f"Processing video with ID: {video_id}")
-        video_path, filmstrip_html, metadata_html = process_video(video_id)
-        return video_path, filmstrip_html, metadata_html
+        video_html, filmstrip_html, metadata_html = process_video(video_id)
+        return video_html, filmstrip_html, metadata_html
 
     video_list.change(
         fn=wrapped_process_video,
@@ -785,4 +832,6 @@ with gr.Blocks(css=css, head=js) as iface:
     )
 
 if __name__ == "__main__":
-    iface.launch()
+    iface.launch()
+
+