result: change html to textbox

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'], 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_container: gr.update(visible=False),
+        result_text: gr.update(visible=False, value='')
     }
 
 def change_button_color(event: gr.EventData):
@@ -49,9 +49,9 @@ def on_submit(criteria, context, user_message, assistant_message, state):
     }, state['selected_sub_catalog'])
     logger.debug(f"Starting evaluation for subcatelog {state['selected_sub_catalog']} and criteria name {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}"
-    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}"
+
+    # html_str = f"<p>{get_result_description(state['selected_sub_catalog'], state['selected_criteria_name'])} <strong>{result_label}</strong></p>"
+    html_str = f"{get_result_description(state['selected_sub_catalog'], state['selected_criteria_name'])} {result_label}"
     return gr.update(value=html_str)
 
 def on_show_prompt_click(criteria, context, user_message, assistant_message, state):
@@ -148,9 +148,7 @@ with gr.Blocks(
 
             submit_button = gr.Button("Evaluate", variant='primary',icon=os.path.join(os.path.dirname(os.path.abspath(__file__)), 'send-white.png'), elem_classes='submit-button')
             
-            with gr.Column(elem_classes="result-container", visible=False, show_progress=False) as result_container:
-                evaluation_results_label = gr.HTML("<span>Results</span>", elem_classes='result-title', visible=False)
-                result_text = gr.HTML(elem_classes=['result-text', 'input-box', 'read-only', 'block'], visible=False, value='')
+            result_text = gr.Textbox(label='Result', elem_classes=['result-text', 'read-only', 'input-box'], visible=False, value='')
 
             with Modal(visible=False, elem_classes='modal') as modal:
                 prompt = gr.Markdown('')
@@ -162,12 +160,8 @@ with gr.Blocks(
     ).then(lambda: gr.update(visible=True), None, modal)
 
     submit_button \
-        .click(
-            lambda: [gr.update(visible=True), gr.update(visible=True), gr.update(visible=True, value='')],
-            inputs=None,
-            outputs=[result_container, evaluation_results_label, result_text],
-            show_progress=False
-        ).then(
+        .click(lambda: gr.update(visible=True, value=''), None, result_text) \
+        .then(
             on_submit,
             inputs=[criteria, context, user_message, assistant_message, state],
             outputs=[result_text],
@@ -177,7 +171,7 @@ with gr.Blocks(
       
     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_container}) \
+            .then(on_test_case_click, inputs=state, outputs={test_case_name, criteria, context, user_message, assistant_message, result_text}) \
             .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

@@ -81,10 +81,6 @@
     /* background-color: var(--background-fill-secondary); */
 }
 
-.result-text {
-    background-color: var(--block-background-fill);
-}
-
 .result-text p {
     box-shadow: none;
 }