Update demo.py

demo.py

@@ -195,4 +195,149 @@ def select_and_load(selected_label, experiment, message_component):
 def skip_experiment(experiment, message_component):
     """
     Handles the skipping of an experiment.
-    Saves the skip an
+    Saves the skip and loads the next experiment.
+    """
+    try:
+        # Set selected_video to "None" to indicate skip
+        experiment["selected_video"] = "None"
+
+        # Save the skip to Firebase
+        dict_to_save = experiment_to_dict(experiment, skip=True)
+        firebase_data_ref.push(dict_to_save)
+
+        print("=====================")
+        print(dict_to_save)
+        print("=====================")
+
+        # Set success message
+        new_message = "✅ Your skip has been recorded ✅"
+    except Exception as e:
+        # Set error message
+        new_message = f"❌ Failed to record your skip: {e} ❌"
+        print(f"Error saving skip to Firebase: {e}")
+
+    # Generate the next experiment
+    try:
+        new_experiment = generate_new_experiment()
+
+        # Update the video components with new video paths
+        return [
+            new_experiment,
+            gr.update(value=new_experiment["video_left"]),
+            gr.update(value=new_experiment["video_right"]),
+            new_message
+        ]
+    except Exception as e:
+        # If generating a new experiment fails, notify the user
+        new_message = f"❌ Failed to load new videos: {e} ❌"
+        print(f"Error generating new experiment: {e}")
+        # Keep the current experiment and videos
+        return [
+            experiment,
+            gr.update(value=experiment["video_left"]),
+            gr.update(value=experiment["video_right"]),
+            new_message
+        ]
+
+##################################################################
+# UI Layer
+##################################################################
+
+css = """
+#padded {
+    padding-left: 2%;
+    padding-right: 2%;
+}
+.select-button {
+    margin-top: 10px;
+    width: 100%;
+}
+.select-button:hover {
+    background-color: #00c0ff;
+    color: white;
+}
+.video-container {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+video {
+    width: 100%;
+    height: auto;
+}
+"""
+
+with gr.Blocks(title="Unsupervised Video Editing", css=css) as demo:
+    # Initialize the state
+    experiment = gr.State()
+
+    with gr.Row(elem_id="padded"):
+        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>")
+            btn_skip = gr.Button("I have no preference")
+            message_component = gr.Markdown("")  # For displaying messages
+
+    with gr.Row():
+        # Define both video components first
+        with gr.Column(scale=1):
+            video_left_component = gr.Video(
+                label="left",
+                elem_id="video-left",
+                show_label=False,
+                show_download_button=False,
+                show_share_button=False,
+                interactive=True
+            )
+        with gr.Column(scale=1):
+            video_right_component = gr.Video(
+                label="right",
+                elem_id="video-right",
+                show_label=False,
+                show_download_button=False,
+                show_share_button=False,
+                interactive=True
+            )
+
+    with gr.Row():
+        # Add Select buttons below each video
+        with gr.Column(scale=1):
+            select_left = gr.Button("Select Left Video", elem_id="select-button-left", variant="primary")
+        with gr.Column(scale=1):
+            select_right = gr.Button("Select Right Video", elem_id="select-button-right", variant="primary")
+
+    with gr.Row():
+        # Configure the skip button
+        btn_skip.click(
+            fn=skip_experiment,
+            inputs=[experiment, message_component],
+            outputs=[experiment, video_left_component, video_right_component, message_component],
+            queue=True,
+            show_progress=True
+        )
+
+    # Configure the select buttons to handle selection and load next experiment
+    select_left.click(
+        fn=lambda exp, msg: select_and_load("left", exp, msg),
+        inputs=[experiment, message_component],
+        outputs=[experiment, video_left_component, video_right_component, message_component],
+        queue=True,
+        show_progress=True
+    )
+    select_right.click(
+        fn=lambda exp, msg: select_and_load("right", exp, msg),
+        inputs=[experiment, message_component],
+        outputs=[experiment, video_left_component, video_right_component, message_component],
+        queue=True,
+        show_progress=True
+    )
+
+    # Load the first experiment on app startup
+    demo.load(
+        fn=load_initial,
+        inputs=None,
+        outputs=[experiment, video_left_component, video_right_component, message_component]
+    )
+
+# Launch the app with share=True to create a public link
+demo.launch(share=True)