Updated html video viewer to gradio video viewer

app.py

@@ -158,10 +158,20 @@ def process_video(
         progress: Gradio progress tracker
 
     Returns:
-        Tuple of (status_message, clip1, clip2, clip3, log_text, metrics_text)
+        Tuple of (status_message, clips_html_update, clip1, clip2, clip3, clip4, clip5, log_text, metrics_text)
     """
     if video_file is None:
-        return "Please upload a video first.", None, None, None, "", ""
+        return (
+            "Please upload a video first.",
+            gr.update(value="", visible=False),
+            gr.update(value=None, visible=False),
+            gr.update(value=None, visible=False),
+            gr.update(value=None, visible=False),
+            gr.update(value=None, visible=False),
+            gr.update(value=None, visible=False),
+            "",
+            "",
+        )
 
     log_messages = []
 
@@ -181,7 +191,17 @@ def process_video(
         # Validate video
         validation = validate_video_file(video_file)
         if not validation.is_valid:
-            return f"Error: {validation.error_message}", None, None, None, "\n".join(log_messages), ""
+            return (
+                f"Error: {validation.error_message}",
+                gr.update(value="", visible=False),
+                gr.update(value=None, visible=False),
+                gr.update(value=None, visible=False),
+                gr.update(value=None, visible=False),
+                gr.update(value=None, visible=False),
+                gr.update(value=None, visible=False),
+                "\n".join(log_messages),
+                "",
+            )
 
         log(f"Video size: {validation.file_size / (1024*1024):.1f} MB")
 
@@ -192,22 +212,14 @@ def process_video(
             log("TEST MODE: Skipping processing, showing mock highlights")
             progress(0.5, desc="Generating test highlights...")
 
-            # Build dynamic HTML for mock highlights
-            clips_html = ""
-            for i in range(int(num_clips)):
-                clips_html += f'''
-                <div style="margin-bottom: 20px; border: 1px solid #ccc; border-radius: 8px; padding: 15px; background-color: #0b1619;">
-                    <h4 style="margin-top: 0; color: #f2fafc;">Highlight Clip {i+1}</h4>
-                    <div style="margin-bottom: 10px; font-size: 14px; color: #f2fafc;">
-                        <strong>Time:</strong> {i*30}-{i*30+45}s |
-                        <strong>Score:</strong> {95-i*5:.1f} |
-                        <strong>Domain:</strong> {domain}
-                    </div>
-                    <video width="100%" controls style="border-radius: 4px;">
-                        <source src="{video_file}" type="video/mp4">
-                    </video>
-                </div>
-                '''
+            # Prepare updates: show only the requested number of clips (use the uploaded video as source)
+            clip_updates = []
+            requested = min(int(num_clips), 5)
+            for i in range(5):
+                if i < requested:
+                    clip_updates.append(gr.update(value=str(video_path), visible=True))
+                else:
+                    clip_updates.append(gr.update(value=None, visible=False))
 
             status = f"TEST MODE: Generated {int(num_clips)} mock highlight clips from {Path(video_file).name}"
             metrics_output = f"""
@@ -221,7 +233,17 @@ Test Mode Metrics:
             """.strip()
 
             progress(1.0, desc="Test complete!")
-            return status, clips_html, "\n".join(log_messages), metrics_output, ""
+            return (
+                status,
+                gr.update(value="", visible=False),
+                clip_updates[0],
+                clip_updates[1],
+                clip_updates[2],
+                clip_updates[3],
+                clip_updates[4],
+                "\n".join(log_messages),
+                metrics_output,
+            )
 ###----------------------------------------------------------------------------------------------------------------------
         # Validate reference image if provided
         ref_path = None
@@ -304,35 +326,57 @@ Test Mode Metrics:
             pipeline.cleanup()
             progress(1.0, desc="Done!")
 
-            # Build dynamic HTML for clips with extracted highlights
-            clips_html = ""
-            for i, clip_path in enumerate(clip_paths):
-                clips_html += f'''
-                <div style="margin-bottom: 20px; border: 1px solid #ddd; border-radius: 8px; padding: 15px; background-color: #f9f9f9;">
-                    <h4 style="margin-top: 0; color: #2e7d32;">Highlight Clip {i+1}</h4>
-                    <div style="margin-bottom: 10px; font-size: 14px; color: #666;">
-                        <strong>Time:</strong> {format_duration(result.clips[i].start_time)} - {format_duration(result.clips[i].end_time)} |
-                        <strong>Score:</strong> {result.clips[i].hype_score:.2f} |
-                        <strong>Domain:</strong> {domain_value}
-                    </div>
-                    <video width="100%" controls style="border-radius: 4px;">
-                        <source src="{clip_path}" type="video/mp4">
-                    </video>
-                </div>
-                '''
-
-            return status, clips_html, "\n".join(log_messages), metrics_output, ""
+            # Prepare updates: show only the extracted clips (up to 5), hide the rest
+            clip_updates = []
+            for i in range(5):
+                if i < len(clip_paths):
+                    clip_updates.append(gr.update(value=str(clip_paths[i]), visible=True))
+                else:
+                    clip_updates.append(gr.update(value=None, visible=False))
+
+            # Clear the HTML preview (`clips_output`) when returning final video outputs
+            return (
+                status,
+                gr.update(value="", visible=False),
+                clip_updates[0],
+                clip_updates[1],
+                clip_updates[2],
+                clip_updates[3],
+                clip_updates[4],
+                "\n".join(log_messages),
+                metrics_output,
+            )
         else:
             log(f"Processing failed: {result.error_message}")
             pipeline.cleanup()
-            return f"Error: {result.error_message}", "", "\n".join(log_messages), "", ""
+            return (
+                f"Error: {result.error_message}",
+                gr.update(value="", visible=False),
+                gr.update(value=None, visible=False),
+                gr.update(value=None, visible=False),
+                gr.update(value=None, visible=False),
+                gr.update(value=None, visible=False),
+                gr.update(value=None, visible=False),
+                "\n".join(log_messages),
+                "",
+            )
 
     except Exception as e:
         error_msg = f"Unexpected error: {str(e)}"
         log(error_msg)
         log(traceback.format_exc())
         logger.exception("Pipeline error")
-        return error_msg, "", "\n".join(log_messages), "", ""
+        return (
+            error_msg,
+            gr.update(value="", visible=False),
+            gr.update(value=None, visible=False),
+            gr.update(value=None, visible=False),
+            gr.update(value=None, visible=False),
+            gr.update(value=None, visible=False),
+            gr.update(value=None, visible=False),
+            "\n".join(log_messages),
+            "",
+        )
 
 
 # =============================================================================
@@ -865,6 +909,14 @@ with gr.Blocks(
                     gr.Markdown("#### Extracted Clips")
                     clips_output = gr.HTML(label="Extracted Clips")
 
+                    # Pre-created video outputs (max 5) - will be populated by the callback
+                    with gr.Row():
+                        clip_video1 = gr.Video(label="Clip 1", interactive=False, visible=False)
+                        clip_video2 = gr.Video(label="Clip 2", interactive=False, visible=False)
+                        clip_video3 = gr.Video(label="Clip 3", interactive=False, visible=False)
+                        clip_video4 = gr.Video(label="Clip 4", interactive=False, visible=False)
+                        clip_video5 = gr.Video(label="Clip 5", interactive=False, visible=False)
+
                     with gr.Accordion("Processing Log", open=True):
                         log_output = gr.Textbox(
                             label="Log",
@@ -896,8 +948,13 @@ with gr.Blocks(
                 outputs=[
                     status_output,
                     clips_output,
+                    clip_video1,
+                    clip_video2,
+                    clip_video3,
+                    clip_video4,
+                    clip_video5,
                     log_output,
-                    metrics_output
+                    metrics_output,
                 ],
                 show_progress="full"
             )