feat: UI upgrades

app.py

@@ -69,7 +69,13 @@ def evaluate(
 def reset_all():
     return (
         [], "", "", [], "", "",  # Existing resets for inputs and rubrics
-        "", "", "", "", ""      # New resets for additional fields
+        "", "", "", "", "",      # New resets for additional fields
+        gr.update(visible=True),  # Show new_input_name
+        gr.update(visible=True),  # Show new_input_value
+        gr.update(visible=True),  # Show new_rubric_name
+        gr.update(visible=True),  # Show new_rubric_value
+        gr.update(visible=True),  # Show Add Input button
+        gr.update(visible=True),  # Show Add Rubric Item button
     )
 
 # Define presets
@@ -116,8 +122,23 @@ with gr.Blocks() as demo:
             gr.Markdown("*<span style='color: gray;'>Define the input names and values. Inputs are optional if evaluation depends on the output only.</span>*")
             with gr.Group():
                 inputs_task = gr.State([])
-                new_input_name = gr.Textbox(label="Name")
-                new_input_value = gr.Textbox(label="Value")
+                with gr.Row(equal_height=True):
+                    with gr.Column(min_width=60, scale=2):
+                        new_input_name = gr.Textbox(
+                            label="Name",
+                            show_label=True,
+                            autoscroll=False,
+                            max_lines=1,
+                            visible=True  # Initially visible
+                        )
+                    with gr.Column(scale=9):
+                        new_input_value = gr.Textbox(
+                            label="Value",
+                            show_label=True,
+                            autoscroll=False,
+                            max_lines=3,
+                            visible=True  # Initially visible
+                        )
         
             def add_input(inputs_task, new_input_name, new_input_value):
                 return inputs_task + [{"name": new_input_name, "value": new_input_value}], "", ""
@@ -139,11 +160,13 @@ with gr.Blocks() as demo:
                                     return inputs_list
                             delete_btn.click(delete, None, [inputs_task]) # This is the state variable
                         
-            gr.Button("Add Input").click(
-                add_input,
-                [inputs_task, new_input_name, new_input_value],
-                [inputs_task, new_input_name, new_input_value]
-            )
+            with gr.Group():
+                add_input_btn = gr.Button("Add Input")  # Assign to variable
+                add_input_btn.click(
+                    add_input,
+                    [inputs_task, new_input_name, new_input_value],
+                    [inputs_task, new_input_name, new_input_value]
+                )
         
         with gr.Column(scale=1):
             gr.Markdown("## **Evaluation task output**")
@@ -162,10 +185,28 @@ with gr.Blocks() as demo:
 
         with gr.Row():
             with gr.Column(scale=1):
-                rubric_items = gr.State([])
-                new_rubric_name = gr.Textbox(label="Score", show_label=True, interactive=True, autoscroll=False, max_lines=1)
-                new_rubric_value = gr.Textbox(label="Description", show_label=True, interactive=True, autoscroll=False, max_lines=3)
-                
+                with gr.Group():
+                    rubric_items = gr.State([])
+                    with gr.Row(equal_height=True):
+                        with gr.Column(min_width=60, scale=2):
+                            new_rubric_name = gr.Textbox(
+                                label="Score",
+                                show_label=True,
+                                interactive=True,
+                                autoscroll=False,
+                                max_lines=1,
+                                visible=True  # Initially visible
+                            )
+                        with gr.Column(scale=9):
+                            new_rubric_value = gr.Textbox(
+                                label="Description",
+                                show_label=True,
+                                interactive=True,
+                                autoscroll=False,
+                                max_lines=3,
+                                visible=True  # Initially visible
+                            )
+                    
                 def add_rubric_item(rubric_items, new_rubric_name, new_rubric_value):
                     return rubric_items + [{"name": new_rubric_name, "value": new_rubric_value}], "", ""
                 
@@ -175,10 +216,20 @@ with gr.Blocks() as demo:
                     for rubric_item in rubric_items_list:
                         with gr.Group():
                             with gr.Row(equal_height=True):
-                                with gr.Column(min_width=30, scale=1):
-                                    gr.Textbox(rubric_item['name'], label="Score", show_label=True, interactive=False)
+                                with gr.Column(min_width=60, scale=2):
+                                    gr.Textbox(
+                                        rubric_item['name'],
+                                        label="Score",
+                                        show_label=True,
+                                        interactive=False
+                                    )
                                 with gr.Column(scale=8):
-                                    gr.Textbox(rubric_item['value'], label="Description", show_label=True, interactive=False)
+                                    gr.Textbox(
+                                        rubric_item['value'],
+                                        label="Description",
+                                        show_label=True,
+                                        interactive=False
+                                    )
                                 with gr.Column(min_width=15, scale=1):
                                     delete_btn = gr.Button("X", size="lg", variant="secondary")
                                     def delete(rubric_item=rubric_item):
@@ -186,11 +237,13 @@ with gr.Blocks() as demo:
                                         return rubric_items_list
                                     delete_btn.click(delete, None, [rubric_items]) # This is the state variable
                                 
-                gr.Button("Add Rubric Item").click(
-                    add_rubric_item,
-                    [rubric_items, new_rubric_name, new_rubric_value],
-                    [rubric_items, new_rubric_name, new_rubric_value]
-                )
+                with gr.Group():
+                    add_rubric_btn = gr.Button("Add Rubric Item")  # Assign to variable
+                    add_rubric_btn.click(
+                        add_rubric_item,
+                        [rubric_items, new_rubric_name, new_rubric_value],
+                        [rubric_items, new_rubric_name, new_rubric_value]
+                    )
             with gr.Column(scale=1):
                 evaluation_criteria = gr.Textbox(label="Evaluation criteria")
                             
@@ -199,9 +252,9 @@ with gr.Blocks() as demo:
             gr.Markdown("# **Evaluation**")
             with gr.Group():
                 with gr.Row(equal_height=True):
-                    with gr.Column(min_width=15, scale=1):
+                    with gr.Column(min_width=60, scale=1):
                         score = gr.Textbox(label="Score", interactive=False, autoscroll=False, max_lines=1)
-                    with gr.Column(scale=5):
+                    with gr.Column(scale=9):
                         feedback = gr.Textbox(label="Feedback", interactive=False, autoscroll=False, max_lines=6)
                     with gr.Column(min_width=15, scale=1):
                         evaluate_btn = gr.Button("Evaluate", variant="primary")
@@ -217,11 +270,17 @@ with gr.Blocks() as demo:
                                 rubric_items, 
                                 new_rubric_name, 
                                 new_rubric_value,
-                                evaluation_criteria,    # Reset evaluation criteria
-                                output_name,            # Reset output name
-                                output_value,           # Reset output value
-                                feedback,               # Reset feedback
-                                score                   # Reset score
+                                evaluation_criteria,
+                                output_name,
+                                output_value,
+                                feedback,
+                                score,
+                                new_input_name,       # Visibility for new_input_name
+                                new_input_value,      # Visibility for new_input_value
+                                new_rubric_name,      # Visibility for new_rubric_name
+                                new_rubric_value,     # Visibility for new_rubric_value
+                                add_input_btn,        # Visibility for Add Input button
+                                add_rubric_btn,       # Visibility for Add Rubric Item button
                             ]
                         )
     
@@ -234,18 +293,24 @@ with gr.Blocks() as demo:
     for i, button in enumerate(preset_buttons):
         def populate_preset(ex_i=i):
             return populate_fields(ex_i)
-    
+
         button.click(
-            populate_preset,  # Use the closure to pass the current index
-            inputs=[],  # No direct inputs needed
+            populate_preset,
+            inputs=[],
             outputs=[
                 inputs_task, 
                 output_name, 
                 output_value, 
                 evaluation_criteria, 
                 rubric_items,
-                feedback,  # Add feedback to be reset
-                score  # Add score to be reset
+                feedback,
+                score,
+                new_input_name,       # Visibility for new_input_name
+                new_input_value,      # Visibility for new_input_value
+                new_rubric_name,      # Visibility for new_rubric_name
+                new_rubric_value,     # Visibility for new_rubric_value
+                add_input_btn,        # Visibility for Add Input button
+                add_rubric_btn,       # Visibility for Add Rubric Item button
             ]
         )
 
@@ -258,7 +323,13 @@ def populate_fields(example_index: int):
         example["evaluation_criteria"],
         example["rubric"],
         "",  # Reset feedback
-        ""  # Reset score
+        "",  # Reset score
+        gr.update(visible=False),  # Hide new_input_name
+        gr.update(visible=False),  # Hide new_input_value
+        gr.update(visible=False),  # Hide new_rubric_name
+        gr.update(visible=False),  # Hide new_rubric_value
+        gr.update(visible=False),  # Hide Add Input button
+        gr.update(visible=False),  # Hide Add Rubric Item button
     )
 
-demo.launch(debug=True)
+demo.launch(debug=True)