improve progress flickering

app.py

@@ -33,9 +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'], interactive=True, elem_classes=['input-box']) if selected_sub_catalog != 'harmful_content_in_assistant_response' else gr.update(value=selected_test_case['user_message'], interactive=False, elem_classes=['read-only', 'input-box']),
         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='', visible=False),
         result_container: gr.update(visible=False),
-        evaluation_results_label: gr.update(visible=False)
     }
 
 def change_button_color(event: gr.EventData):
@@ -54,7 +52,7 @@ def on_submit(criteria, context, user_message, assistant_message, state):
     # result_str = f"Is the {evaluated_component} message harmful based on the risk definition: {result_label}"
     html_str = f"<p>{get_result_description(state['selected_sub_catalog'], state['selected_criteria_name'])} <strong>{result_label}</strong></p>"
     # html_str = f"Is the {evaluated_component} {evaluated_component_adjective}: {result_label}"
-    return [gr.update(value=html_str, visible=True), gr.update(visible=True)]
+    return gr.update(value=html_str)
 
 def on_show_prompt_click(criteria, context, user_message, assistant_message, state):
     prompt = get_prompt_from_test_case({
@@ -138,7 +136,7 @@ with gr.Blocks(
                     accordions.append(accordion)
 
         with gr.Column(visible=True, scale=1) as test_case_content:
-            with gr.Row():
+            with gr.Row(elem_classes='no-stretch'):
                 test_case_name = gr.HTML(f'<h2>{to_title_case(starting_test_case["name"])}</h2>', elem_classes='subtitle')
                 show_propt_button = gr.Button('Show prompt', size='sm', scale=0, min_width=110)
 
@@ -165,18 +163,20 @@ with gr.Blocks(
 
     submit_button \
         .click(
-            lambda: [gr.update(visible=True), gr.update(visible=False), gr.update(visible=True, value='')],
+            lambda: [gr.update(visible=True), gr.update(visible=True), gr.update(visible=True, value='')],
             inputs=None,
-            outputs=[result_container, evaluation_results_label, result_text]
+            outputs=[result_container, evaluation_results_label, result_text],
+            show_progress=False
         ).then(
             on_submit,
             inputs=[criteria, context, user_message, assistant_message, state],
-            outputs=[result_text, evaluation_results_label]
+            outputs=[result_text]
         )
+
       
     for button in [t for sub_catalog_name, sub_catalog_buttons in catalog_buttons.items() for t in sub_catalog_buttons.values()]:
         button.click(update_selected_test_case, inputs=[button, state], outputs=[state])\
-            .then(on_test_case_click, inputs=state, outputs={test_case_name, criteria, context, user_message, assistant_message, result_text, result_container, evaluation_results_label}) \
+            .then(on_test_case_click, inputs=state, outputs={test_case_name, criteria, context, user_message, assistant_message, result_container}) \
             .then(change_button_color, None, [v for c in catalog_buttons.values() for v in c.values()])
     
 demo.launch(server_name='0.0.0.0')

styles.css

@@ -129,4 +129,8 @@
 
 .subtitle-harms {
     padding-bottom: 8px;
+}
+
+.no-stretch {
+    align-items: flex-start;
 }