Minor changes

app.py

@@ -131,7 +131,7 @@ def display_new_sample(state: dict, available_ids: list[str]):
 
     if not sample_data:
         return {
-            prompt_display: gr.update(value="No more samples available. Thank you!"),
+            prompt_display: gr.update(value="**Prompt:** No more samples available. Thank you!"),
             input_bg_display: gr.update(value=None, visible=False),
             input_fg_display: gr.update(value=None, visible=False),
             output_a_display: gr.update(value=None, visible=False),
@@ -139,7 +139,7 @@ def display_new_sample(state: dict, available_ids: list[str]):
             choice_button_a: gr.update(visible=False),
             choice_button_b: gr.update(visible=False),
             next_button: gr.update(visible=False),
-            status_display: gr.update(value="Completed!"),
+            status_display: gr.update(value="**Status:** Completed!"),
             app_state: state,
             available_samples_state: remaining_ids
         }
@@ -159,7 +159,7 @@ def display_new_sample(state: dict, available_ids: list[str]):
     }
 
     return {
-        prompt_display: gr.update(value=f"Prompt: {sample_data['prompt']}"),
+        prompt_display: gr.update(value=f"**Prompt:** {sample_data['prompt']}"),
         input_bg_display: gr.update(value=sample_data["input_bg"], visible=True),
         input_fg_display: gr.update(value=sample_data["input_fg"], visible=True),
         output_a_display: gr.update(value=output_a["path"], visible=True),
@@ -167,7 +167,7 @@ def display_new_sample(state: dict, available_ids: list[str]):
         choice_button_a: gr.update(visible=True, interactive=True),
         choice_button_b: gr.update(visible=True, interactive=True),
         next_button: gr.update(visible=False),
-        status_display: gr.update(value="Please choose the image you prefer."),
+        status_display: gr.update(value="**Status:** Please choose the image you prefer."),
         app_state: state,
         available_samples_state: remaining_ids
     }
@@ -189,7 +189,7 @@ def record_preference(choice: str, state: dict, request: gr.Request):
             choice_button_a: gr.update(interactive=False),
             choice_button_b: gr.update(interactive=False),
             next_button: gr.update(visible=True, interactive=True),
-            status_display: gr.update(value="Error: Session state lost. Click Next Sample."),
+            status_display: gr.update(value="**Status:** Error: Session state lost. Click Next Sample."),
             app_state: state
         }
 
@@ -227,7 +227,7 @@ def record_preference(choice: str, state: dict, request: gr.Request):
             choice_button_a: gr.update(interactive=False),
             choice_button_b: gr.update(interactive=False),
             next_button: gr.update(visible=True, interactive=True),
-            status_display: gr.update(value=f"Error saving preference locally: {e}. Click Next."),
+            status_display: gr.update(value=f"**Status:** Error saving preference locally: {e}. Click Next."),
             app_state: state
         }
 
@@ -235,7 +235,7 @@ def record_preference(choice: str, state: dict, request: gr.Request):
         choice_button_a: gr.update(interactive=False),
         choice_button_b: gr.update(interactive=False),
         next_button: gr.update(visible=True, interactive=True),
-        status_display: gr.update(value=f"Preference recorded (Chose {choice}). Click Next Sample."),
+        status_display: gr.update(value=f"**Status:** Preference recorded (Chose {choice}). Click Next Sample."),
         app_state: state
     }
 
@@ -284,22 +284,28 @@ def handle_choice_b(state: dict, request: gr.Request):
 with gr.Blocks(title="Image Composition User Study") as demo:
     gr.Markdown("# Image Composition User Study")
     gr.Markdown(
-        "Please look at the input images and the prompt below. "
+        "> Please look at the input images and the prompt below. "
         "Then, compare the two output images (Output A and Output B) and click the button below the one you prefer."
     )
 
     app_state = gr.State({})
     available_samples_state = gr.State(INITIAL_SAMPLE_IDS)
 
-    prompt_display = gr.Textbox(label="Prompt", interactive=False)
-    status_display = gr.Textbox(label="Status", value="Loading first sample...", interactive=False)
+    status_display = gr.Markdown("**Status:** Loading first sample...")
 
+    gr.Markdown("## Inputs")
     with gr.Row():
-        input_bg_display = gr.Image(label="Input Background", type="filepath", height=300, width=300, interactive=False)
-        input_fg_display = gr.Image(label="Input Foreground", type="filepath", height=300, width=300, interactive=False)
+        prompt_display = gr.Markdown("**Prompt:** Loading...")
+    with gr.Row():
+        with gr.Column():
+            gr.Markdown("<div style='text-align: center;'>Input Background</div>")
+            input_bg_display = gr.Image(type="filepath", height=250, width=250, interactive=False, show_label=False)
+        with gr.Column():
+            gr.Markdown("<div style='text-align: center;'>Input Foreground</div>")
+            input_fg_display = gr.Image(type="filepath", height=250, width=250, interactive=False, show_label=False)
 
     gr.Markdown("---")
-    gr.Markdown("## Choose your preferred output:")
+    gr.Markdown("## Choose your preferred output")
 
     with gr.Row():
         with gr.Column():
@@ -309,7 +315,7 @@ with gr.Blocks(title="Image Composition User Study") as demo:
             output_b_display = gr.Image(label="Output B", type="filepath", height=400, width=400, interactive=False)
             choice_button_b = gr.Button("Choose Output B", variant="primary")
 
-    next_button = gr.Button("Next Sample", visible=False)
+    next_button = gr.Button("🔁 Next Sample 🔁", visible=False)
 
     demo.load(
         fn=display_new_sample,