Update demo.py

demo.py

@@ -14,8 +14,8 @@ from firebase_admin import db, credentials
 
 # Constants for video display
 VIDEO_FOLDERS = {
-    "ours": "./userstudy_200_ours/",
-    "omni": "./userstudy_200_omni/"
+    "ours": "./videos/userstudy_200_ours/",
+    "omni": "./videos/userstudy_200_omni/"
 }
 NUMBER_OF_EXPERIMENTS = 200  # Assuming sample0.mp4 to sample199.mp4
 
@@ -126,21 +126,22 @@ def generate_new_experiment() -> Experiment:
     )
 
 
-def save(mode, experiment, video_left_component, video_right_component, message_component):
+def select_and_load(selected_label, experiment, message_component):
     """
-    Saves the user's selection to Firebase.
-    - mode: "save" or "skip"
+    Handles the selection of a video by the user.
+    Saves the selection and loads the next experiment.
     """
-    if mode == "save":
-        if experiment is None or experiment.get("selected_video") is None:
-            # Update the message component with a warning
-            message_component.value = "⚠️ You must select a video before submitting ⚠️"
-            return [experiment, video_left_component, video_right_component, message_component]
-    elif mode == "skip":
-        experiment["selected_video"] = "None"
+    # Update the experiment's selected video
+    if selected_label.lower() == "left":
+        experiment["selected_video"] = "left"
+    elif selected_label.lower() == "right":
+        experiment["selected_video"] = "right"
+    else:
+        experiment["selected_video"] = None  # For safety
 
+    # Save the current selection to Firebase
     try:
-        dict_to_save = experiment_to_dict(experiment, skip=(mode == "skip"))
+        dict_to_save = experiment_to_dict(experiment, skip=False)
         firebase_data_ref.push(dict_to_save)
 
         print("=====================")
@@ -154,69 +155,154 @@ def save(mode, experiment, video_left_component, video_right_component, message_
         message_component.value = f"❌ Failed to save your choice: {e} ❌"
         print(f"Error saving to Firebase: {e}")
 
-    return next_experiment()
+    # Generate the next experiment
+    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"
+        )
+    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
 
-
-##################################################################
-# UI Layer
-##################################################################
+    return [new_experiment, video_left_new, video_right_new, message_component.value]
 
 
-def next_experiment():
+def skip_experiment(mode, experiment, message_component):
     """
-    Prepares the next set of videos for the user to evaluate.
+    Handles the skipping of an experiment.
+    Saves the skip and loads the next experiment.
     """
-    new_experiment = generate_new_experiment()
-
-    # Create video components with initial state as unselected
-    video_left_component = 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
-    )
-    video_right_component = 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
-    )
+    if mode != "skip":
+        return [experiment, gr.Video(), gr.Video(), ""]
 
-    return [new_experiment, video_left_component, video_right_component, ""]  # Empty message
+    # Set selected_video to "None" to indicate skip
+    experiment["selected_video"] = "None"
 
+    # Save the skip to Firebase
+    try:
+        dict_to_save = experiment_to_dict(experiment, skip=True)
+        firebase_data_ref.push(dict_to_save)
 
-def on_select(selected_label, experiment, video_left_component, video_right_component, message_component):
-    """
-    Handles the selection of a video by the user.
-    """
-    if selected_label.lower() == "left":
-        experiment["selected_video"] = "left"
-    elif selected_label.lower() == "right":
-        experiment["selected_video"] = "right"
-    else:
-        experiment["selected_video"] = None  # For safety
+        print("=====================")
+        print(dict_to_save)
+        print("=====================")
 
-    # Update the video components to reflect selection
-    if experiment["selected_video"] == "left":
-        video_left_component.update(elem_id="sel")
-        video_right_component.update(elem_id="unsel")
-    elif experiment["selected_video"] == "right":
-        video_left_component.update(elem_id="unsel")
-        video_right_component.update(elem_id="sel")
-    else:
-        video_left_component.update(elem_id="unsel")
-        video_right_component.update(elem_id="unsel")
+        # Update the message component with a success message
+        message_component.value = "✅ Your skip has been recorded ✅"
+    except Exception as e:
+        # Update the message component with an error message
+        message_component.value = f"❌ Failed to record your skip: {e} ❌"
+        print(f"Error saving skip to Firebase: {e}")
 
-    # Clear any previous messages
-    message_component.value = ""
+    # Generate the next experiment
+    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"
+        )
+    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 [experiment, video_left_component, video_right_component, message_component]
+    return [new_experiment, video_left_new, video_right_new, message_component.value]
+
+
+##################################################################
+# UI Layer
+##################################################################
 
 
 css = """
@@ -234,36 +320,13 @@ css = """
     padding-left: 2%;
     padding-right: 2%;
 }
-.video-container {
-    position: relative;
-    display: inline-block;
-}
-.select-overlay {
-    position: absolute;
-    top: 0;
-    left: 0;
+.select-button {
+    margin-top: 10px;
     width: 100%;
-    height: 100%;
-    cursor: pointer;
-    background-color: rgba(0, 0, 0, 0); /* Transparent */
 }
-.select-overlay:hover {
-    background-color: rgba(0, 0, 0, 0.1); /* Slight overlay on hover */
-}
-.select-button {
-    position: absolute;
-    top: 10px;
-    left: 10px;
-    padding: 5px 10px;
-    background-color: rgba(0, 0, 0, 0.5);
+.select-button:hover {
+    background-color: #00c0ff;
     color: white;
-    border: none;
-    border-radius: 5px;
-    cursor: pointer;
-    display: none;
-}
-.video-container:hover .select-button {
-    display: block;
 }
 """
 
@@ -276,7 +339,6 @@ with gr.Blocks(title="Unsupervised Video Editing", css=css) as demo:
             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")
-            btn_submit = gr.Button("Submit preference")
             message_component = gr.Markdown("")  # For displaying messages
 
     with gr.Row():
@@ -288,7 +350,9 @@ with gr.Blocks(title="Unsupervised Video Editing", css=css) as demo:
                 show_label=False,
                 show_download_button=False,
                 show_share_button=False,
-                interactive=True
+                interactive=True,
+                source="remote",
+                type="filepath"
             )
         with gr.Column(scale=1):
             video_right_component = gr.Video(
@@ -297,44 +361,39 @@ with gr.Blocks(title="Unsupervised Video Editing", css=css) as demo:
                 show_label=False,
                 show_download_button=False,
                 show_share_button=False,
-                interactive=True
+                interactive=True,
+                source="remote",
+                type="filepath"
             )
 
     with gr.Row():
-        # Now define the Select buttons after both video components are defined
+        # Add Select buttons below each video
         with gr.Column(scale=1):
-            select_left = gr.Button("Select Left Video", elem_id="select-button-left")
+            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")
+            select_right = gr.Button("Select Right Video", elem_id="select-button-right", variant="primary")
 
     with gr.Row():
-        # Configure the skip and submit buttons
+        # Configure the skip button
         btn_skip.click(
-            fn=partial(save, mode="skip"),
-            inputs=[experiment, video_left_component, video_right_component, message_component],
-            outputs=[experiment, video_left_component, video_right_component, message_component],
-            queue=False,
-            show_progress=False
-        )
-        btn_submit.click(
-            fn=partial(save, mode="save"),
-            inputs=[experiment, video_left_component, video_right_component, message_component],
+            fn=partial(skip_experiment, mode="skip"),
+            inputs=[experiment, message_component],
             outputs=[experiment, video_left_component, video_right_component, message_component],
             queue=False,
             show_progress=False
         )
 
-    # Attach select events to select buttons
+    # Configure the select buttons to handle selection and load next experiment
     select_left.click(
-        fn=partial(on_select, selected_label="left"),
-        inputs=[experiment, video_left_component, video_right_component, message_component],
+        fn=partial(select_and_load, selected_label="left"),
+        inputs=[experiment, message_component],
         outputs=[experiment, video_left_component, video_right_component, message_component],
         queue=False,
         show_progress=False
     )
     select_right.click(
-        fn=partial(on_select, selected_label="right"),
-        inputs=[experiment, video_left_component, video_right_component, message_component],
+        fn=partial(select_and_load, selected_label="right"),
+        inputs=[experiment, message_component],
         outputs=[experiment, video_left_component, video_right_component, message_component],
         queue=False,
         show_progress=False
@@ -342,7 +401,7 @@ with gr.Blocks(title="Unsupervised Video Editing", css=css) as demo:
 
     # Load the first experiment on app startup
     demo.load(
-        fn=next_experiment,
+        fn=generate_new_experiment,
         inputs=None,
         outputs=[experiment, video_left_component, video_right_component, message_component]
     )