Update app.py

app.py

@@ -289,30 +289,34 @@ def create_instruction(prompt, task_type):
         raise ValueError(f"Unknown task type: {task_type}")
 
 def update_ui_for_task(task_type):
-    """Update image component visibility and labels based on selected task type."""
+    """Update image component visibility/labels and instruction label based on selected task type."""
     if task_type == "Pointwise - Image Editing":
         return (
             gr.update(visible=True, label="Source Image"),
             gr.update(visible=True, label="Edited Image"),
             gr.update(visible=False, label="Image B", value=None),
+            gr.update(label="Editing Instruction", placeholder="Describe the edit that was applied to the source image…"),
         )
     elif task_type == "Pointwise - T2I Generation":
         return (
             gr.update(visible=True, label="Generated Image"),
             gr.update(visible=False, label="(unused)", value=None),
             gr.update(visible=False, label="(unused)", value=None),
+            gr.update(label="Text-to-Image Prompt", placeholder="Enter the text-to-image generation prompt…"),
         )
     elif task_type == "Pairwise - Image Editing":
         return (
             gr.update(visible=True, label="Source Image"),
             gr.update(visible=True, label="Image A"),
             gr.update(visible=True, label="Image B"),
+            gr.update(label="Editing Instruction", placeholder="Describe the edit that was applied to the source image…"),
         )
     elif task_type == "Pairwise - T2I Generation":
         return (
             gr.update(visible=True, label="Image A"),
             gr.update(visible=True, label="Image B"),
             gr.update(visible=False, label="(unused)", value=None),
+            gr.update(label="Text-to-Image Prompt", placeholder="Enter the text-to-image generation prompt…"),
         )
 
 @spaces.GPU
@@ -383,72 +387,93 @@ def model_inference(task_type, instruction_text, image1, image2, image3):
 # Gradio UI
 # ============================================================
 
-with gr.Blocks() as demo:
+OVERVIEW_MD = """
+### 📋 Task Overview
+
+This demo supports **four evaluation tasks**. Select one to get started:
+
+| Task | Description |
+|------|-------------|
+| **Pointwise – Image Editing** | Rate a single edited image against its source image and the editing instruction. Produces per-aspect scores and a refined request. |
+| **Pointwise – T2I Generation** | Rate a single generated image against a text-to-image prompt. Produces per-aspect scores and a refined prompt. |
+| **Pairwise – Image Editing** | Compare two edited images (A vs B) given a source image and editing instruction. Determines which edit is better per aspect. |
+| **Pairwise – T2I Generation** | Compare two generated images (A vs B) given a text-to-image prompt. Determines which generation is better per aspect. |
+"""
+
+with gr.Blocks(css="""
+    #input-panel { max-height: 85vh; overflow-y: auto; padding-right: 8px; }
+""") as demo:
     gr.HTML(html_header)
 
-    with gr.Row():
-        task_selector = gr.Radio(
-            choices=TASK_CHOICES,
-            value="Pointwise - Image Editing",
-            label="Task Type",
-            info="Select the evaluation task",
-        )
+    # ---- Overview ----
+    gr.Markdown(OVERVIEW_MD)
+
+    with gr.Row(equal_height=False):
+        # ============ LEFT COLUMN – all inputs (scrollable) ============
+        with gr.Column(scale=1, elem_id="input-panel"):
+            task_selector = gr.Radio(
+                choices=TASK_CHOICES,
+                value="Pointwise - Image Editing",
+                label="Task Type",
+                info="Select the evaluation task",
+            )
 
-    with gr.Row():
-        with gr.Column(scale=1):
+            # ---- Image upload row ----
+            with gr.Row():
+                with gr.Column(scale=1, min_width=160):
+                    image1 = gr.Image(
+                        label="Source Image",
+                        type="filepath",
+                        sources=["upload", "clipboard"],
+                    )
+                with gr.Column(scale=1, min_width=160):
+                    image2 = gr.Image(
+                        label="Edited Image",
+                        type="filepath",
+                        sources=["upload", "clipboard"],
+                    )
+                with gr.Column(scale=1, min_width=160):
+                    image3 = gr.Image(
+                        label="Image B",
+                        type="filepath",
+                        sources=["upload", "clipboard"],
+                        visible=False,
+                    )
+
+            # ---- Instruction + Evaluate ----
             instruction = gr.Textbox(
-                label="User Instruction",
-                lines=5,
-                placeholder="Enter the user instruction / prompt here..."
+                label="Editing Instruction",
+                lines=3,
+                placeholder="Describe the edit that was applied to the source image…",
             )
             submit_btn = gr.Button("Evaluate", variant="primary")
 
-        with gr.Column(scale=1):
-            image1 = gr.Image(
-                label="Source Image",
-                type="filepath",
-                sources=["upload", "clipboard"],
+            # ---- Examples ----
+            gr.Examples(
+                examples=[
+                    ["Pointwise - Image Editing", "Remove the arrows from the blue sign and add the text of Detour ahead, no right turns.", "example_images/0016cb70b187efe39969766dc4b3f9ed_b63ed6db519f685c33b860b511879cfe2fa7351059a17ebe5eafa83213e222fb_13_source.png", "example_images/0016cb70b187efe39969766dc4b3f9ed_b63ed6db519f685c33b860b511879cfe2fa7351059a17ebe5eafa83213e222fb_13_ovis_u1_Image A.png", None],
+                ],
+                inputs=[task_selector, instruction, image1, image2, image3],
             )
 
+        # ============ RIGHT COLUMN – evaluation output ============
         with gr.Column(scale=1):
-            image2 = gr.Image(
-                label="Edited Image",
-                type="filepath",
-                sources=["upload", "clipboard"],
-            )
+            output = gr.Textbox(label="Evaluation Result", lines=30)
 
-        with gr.Column(scale=1):
-            image3 = gr.Image(
-                label="Image B",
-                type="filepath",
-                sources=["upload", "clipboard"],
-                visible=False,
-            )
-
-    output = gr.Textbox(label="Evaluation Result", lines=25)
-
-    # Wire task selector to update image visibility/labels
+    # ---- Wire task selector to update image visibility/labels + instruction label ----
     task_selector.change(
         fn=update_ui_for_task,
         inputs=[task_selector],
-        outputs=[image1, image2, image3],
+        outputs=[image1, image2, image3, instruction],
     )
 
-    # Wire evaluate button
+    # ---- Wire evaluate button ----
     submit_btn.click(
         fn=model_inference,
         inputs=[task_selector, instruction, image1, image2, image3],
         outputs=output,
     )
 
-    # Examples for different tasks
-    gr.Examples(
-        examples=[
-            ["Pointwise - Image Editing", "Remove the arrows from the blue sign and add the text of Detour ahead, no right turns.", "example_images/0016cb70b187efe39969766dc4b3f9ed_b63ed6db519f685c33b860b511879cfe2fa7351059a17ebe5eafa83213e222fb_13_source.png", "example_images/0016cb70b187efe39969766dc4b3f9ed_b63ed6db519f685c33b860b511879cfe2fa7351059a17ebe5eafa83213e222fb_13_ovis_u1_Image A.png", None],
-        ],
-        inputs=[task_selector, instruction, image1, image2, image3],
-    )
-
     gr.Markdown(tos_markdown)
     gr.Markdown(learn_more_markdown)
     gr.Markdown(bibtext)