Update demo.py

demo.py

@@ -159,59 +159,22 @@ def select_and_load(selected_label, experiment, message_component):
     try:
         new_experiment = generate_new_experiment()
 
-        # Create new video components
-        video_left_new = gr.Video(
-            value=new_experiment["video_left"],
-            label="left",
-            elem_id="video-left",
-            show_label=False,
-            show_download_button=False,
-            show_share_button=False,
-            interactive=True,
-            source="remote",
-            type="filepath"
-        )
-        video_right_new = gr.Video(
-            value=new_experiment["video_right"],
-            label="right",
-            elem_id="video-right",
-            show_label=False,
-            show_download_button=False,
-            show_share_button=False,
-            interactive=True,
-            source="remote",
-            type="filepath"
-        )
+        # Update the video components with new video paths
+        # Instead of creating new Video components, use .update() to change the 'value'
+        # This ensures that Gradio correctly updates the existing components
+        return [
+            new_experiment,
+            gr.Video.update(value=new_experiment["video_left"]),
+            gr.Video.update(value=new_experiment["video_right"]),
+            message_component.value
+        ]
     except Exception as e:
         # If generating a new experiment fails, notify the user
         message_component.value = f"❌ Failed to load new videos: {e} ❌"
         print(f"Error generating new experiment: {e}")
         # Keep the current experiment and videos
-        video_left_new = gr.Video(
-            value=experiment["video_left"],
-            label="left",
-            elem_id="video-left",
-            show_label=False,
-            show_download_button=False,
-            show_share_button=False,
-            interactive=True,
-            source="remote",
-            type="filepath"
-        )
-        video_right_new = gr.Video(
-            value=experiment["video_right"],
-            label="right",
-            elem_id="video-right",
-            show_label=False,
-            show_download_button=False,
-            show_share_button=False,
-            interactive=True,
-            source="remote",
-            type="filepath"
-        )
-        new_experiment = experiment  # Keep the current experiment
-
-    return [new_experiment, video_left_new, video_right_new, message_component.value]
+        return [experiment, gr.Video.update(value=experiment["video_left"]),
+                gr.Video.update(value=experiment["video_right"]), message_component.value]
 
 
 def skip_experiment(mode, experiment, message_component):
@@ -220,7 +183,7 @@ def skip_experiment(mode, experiment, message_component):
     Saves the skip and loads the next experiment.
     """
     if mode != "skip":
-        return [experiment, gr.Video(), gr.Video(), ""]
+        return [experiment, gr.Video.update(), gr.Video.update(), ""]
 
     # Set selected_video to "None" to indicate skip
     experiment["selected_video"] = "None"
@@ -245,60 +208,20 @@ def skip_experiment(mode, experiment, message_component):
     try:
         new_experiment = generate_new_experiment()
 
-        # Create new video components
-        video_left_new = gr.Video(
-            value=new_experiment["video_left"],
-            label="left",
-            elem_id="video-left",
-            show_label=False,
-            show_download_button=False,
-            show_share_button=False,
-            interactive=True,
-            source="remote",
-            type="filepath"
-        )
-        video_right_new = gr.Video(
-            value=new_experiment["video_right"],
-            label="right",
-            elem_id="video-right",
-            show_label=False,
-            show_download_button=False,
-            show_share_button=False,
-            interactive=True,
-            source="remote",
-            type="filepath"
-        )
+        # Update the video components with new video paths
+        return [
+            new_experiment,
+            gr.Video.update(value=new_experiment["video_left"]),
+            gr.Video.update(value=new_experiment["video_right"]),
+            message_component.value
+        ]
     except Exception as e:
         # If generating a new experiment fails, notify the user
         message_component.value = f"❌ Failed to load new videos: {e} ❌"
         print(f"Error generating new experiment: {e}")
         # Keep the current experiment and videos
-        video_left_new = gr.Video(
-            value=experiment["video_left"],
-            label="left",
-            elem_id="video-left",
-            show_label=False,
-            show_download_button=False,
-            show_share_button=False,
-            interactive=True,
-            source="remote",
-            type="filepath"
-        )
-        video_right_new = gr.Video(
-            value=experiment["video_right"],
-            label="right",
-            elem_id="video-right",
-            show_label=False,
-            show_download_button=False,
-            show_share_button=False,
-            interactive=True,
-            source="remote",
-            type="filepath"
-        )
-        new_experiment = experiment  # Keep the current experiment
-
-    return [new_experiment, video_left_new, video_right_new, message_component.value]
-
+        return [experiment, gr.Video.update(value=experiment["video_left"]),
+                gr.Video.update(value=experiment["video_right"]), message_component.value]
 
 ##################################################################
 # UI Layer
@@ -328,8 +251,14 @@ css = """
     background-color: #00c0ff;
     color: white;
 }
+.video-container {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
 """
 
+
 with gr.Blocks(title="Unsupervised Video Editing", css=css) as demo:
     # Initialize the state
     experiment = gr.State()
@@ -338,6 +267,7 @@ with gr.Blocks(title="Unsupervised Video Editing", css=css) as demo:
         with gr.Column(scale=3, elem_id="padded"):
             gr.Markdown("<div style='width: 100%'><h1 style='text-align: center;'>Choose Your Preferred Video</h1></div>")
             gr.Markdown("<div style='width: 100%'><h3 style='text-align: center;'>Select the video you prefer.<br/>⚠️Consider fidelity and quality⚠️</h3></div>")
+            # Removed the submit button as per requirement
             btn_skip = gr.Button("I have no preference")
             message_component = gr.Markdown("")  # For displaying messages
 
@@ -350,9 +280,7 @@ with gr.Blocks(title="Unsupervised Video Editing", css=css) as demo:
                 show_label=False,
                 show_download_button=False,
                 show_share_button=False,
-                interactive=True,
-                source="remote",
-                type="filepath"
+                interactive=True
             )
         with gr.Column(scale=1):
             video_right_component = gr.Video(
@@ -361,9 +289,7 @@ with gr.Blocks(title="Unsupervised Video Editing", css=css) as demo:
                 show_label=False,
                 show_download_button=False,
                 show_share_button=False,
-                interactive=True,
-                source="remote",
-                type="filepath"
+                interactive=True
             )
 
     with gr.Row():