Design improvements

app.py

@@ -33,7 +33,7 @@ def on_test_case_click(state: gr.State):
         context: gr.update(value=selected_test_case['context'], visible=True) if selected_test_case['context'] is not None else gr.update(visible=False, value=''),
         user_message: gr.update(value=selected_test_case['user_message'], elem_classes=[], interactive=True),# if selected_sub_catalog != 'harmful_content_in_assistant_message' else gr.update(value=selected_test_case['user_message'], interactive=False, elem_classes=['read-only']),
         assistant_message: gr.update(value=selected_test_case['assistant_message'], visible=True) if selected_test_case['assistant_message'] is not None else gr.update(visible=False, value=''),
-        result_text: gr.update(value=''),
+        result_text: gr.update(value='', visible=False),
     }
 
 def change_button_color(event: gr.EventData):
@@ -51,7 +51,7 @@ def on_submit(criteria, context, user_message, assistant_message, state):
     evaluated_component_adjective = get_evaluated_component_adjective(state['selected_sub_catalog'], state['selected_criteria_name'])
     result_label = generate_text(prompt)['assessment'] # Yes or No
     result_str = f"Is the {evaluated_component} message harmful based on the risk definition: {result_label}"
-    return result_str
+    return gr.update(value=result_str)
 
 def on_show_prompt_click(criteria, context, user_message, assistant_message, state):
     prompt = get_prompt_from_test_case({
@@ -100,7 +100,9 @@ with gr.Blocks(
                     accordions.append(accordion)
 
         with gr.Column(visible=True) as test_case_content:
-            test_case_name = gr.HTML(f'<h2>{to_title_case(starting_test_case["name"])}</h2>')
+            with gr.Row():
+                test_case_name = gr.HTML(f'<h2>{to_title_case(starting_test_case["name"])}</h2>')
+                show_propt_button = gr.Button('Show prompt', size='sm', scale=0, min_width=110)
 
             gr.HTML("Evaluation Criteria", elem_classes='subtitle')
             criteria = gr.Textbox(label="Definition", lines=3, interactive=False, value=starting_test_case['criteria'], elem_classes=['read-only'])
@@ -111,12 +113,10 @@ with gr.Blocks(
             assistant_message = gr.Textbox(label="Assistant Message", lines=3, interactive=True, visible=False, value=starting_test_case['assistant_message'])
 
             submit_button = gr.Button("Evaluate", variant='primary')
-            gr.HTML("Evaluation results", elem_classes='subtitle')
-            
-            result_text = gr.Textbox(label="Result", interactive=False, elem_classes=['read-only', "result-text"], max_lines=1)
-            
-            show_propt_button = gr.Button('Show prompt', size='sm', scale=0)
 
+            evaluation_results_label = gr.HTML("Evaluation results", elem_classes='subtitle', visible=False)
+            result_text = gr.Textbox(label="Result", interactive=False, elem_classes=['read-only', "result-text"], max_lines=1, visible=False)
+            
             with Modal(visible=False) as modal:
                 prompt = gr.Markdown("Hello world!")
 
@@ -126,7 +126,7 @@ with gr.Blocks(
         outputs=prompt
     ).then(lambda: gr.update(visible=True), None, modal)
 
-    submit_button.click(
+    submit_button.click(lambda: gr.update(visible=True), inputs=None, outputs=result_text).then(
         on_submit,
         inputs=[criteria, context, user_message, assistant_message, state],
         outputs=[result_text])