UX improvemnts

app.py

@@ -34,6 +34,7 @@ def on_test_case_click(state: gr.State):
         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='', visible=False),
+        result_container: gr.update(visible=False)
     }
 
 def change_button_color(event: gr.EventData):
@@ -47,12 +48,13 @@ def on_submit(criteria, context, user_message, assistant_message, state):
         'user_message': user_message,
         'assistant_message': assistant_message,
     }, state['selected_sub_catalog'])
-    evaluated_component = to_title_case(get_evaluated_component(state['selected_sub_catalog'], state['selected_criteria_name']))
+    evaluated_component = get_evaluated_component(state['selected_sub_catalog'], state['selected_criteria_name'])
     evaluated_component_adjective = get_evaluated_component_adjective(state['selected_sub_catalog'], state['selected_criteria_name'])
     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}"
-    return gr.update(value=result_str)
+    # result_str = f"Is the {evaluated_component} message harmful based on the risk definition: {result_label}"
+    html_str = f"<p>Is the {evaluated_component} {evaluated_component_adjective}: <strong>{result_label}</strong></p>"
+    return gr.update(value=html_str)
 
 def on_show_prompt_click(criteria, context, user_message, assistant_message, state):
     prompt = get_prompt_from_test_case({
@@ -114,11 +116,12 @@ 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')
-
-            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:
+            with gr.Column(elem_classes="result-container", visible=False) as result_container:
+                evaluation_results_label = gr.HTML("<span>Results</span>", elem_classes='result-title', visible=False)
+                result_text = gr.HTML(label="Result", elem_classes=['read-only', "result-text"], visible=False)
+                
+            with Modal(visible=False, elem_classes='modal') as modal:
                 prompt = gr.Markdown("Hello world!")
 
     show_propt_button.click(
@@ -127,14 +130,14 @@ with gr.Blocks(
         outputs=prompt
     ).then(lambda: gr.update(visible=True), None, modal)
 
-    submit_button.click(lambda: gr.update(visible=True), inputs=None, outputs=result_text).then(
+    submit_button.click(lambda: [gr.update(visible=True, value=''), gr.update(visible=True), gr.update(visible=True)], inputs=None, outputs=[result_text, evaluation_results_label, result_container]).then(
         on_submit,
         inputs=[criteria, context, user_message, assistant_message, state],
-        outputs=[result_text])
+        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}) \
+            .then(on_test_case_click, inputs=state, outputs={test_case_name, criteria, context, user_message, assistant_message, result_text, 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')

model.py

@@ -58,7 +58,7 @@ def generate_text(prompt):
     mock_model_call = os.getenv('MOCK_MODEL_CALL') == 'true'
     if mock_model_call:
         logger.debug('Returning mocked model result.')
-        sleep(1)
+        sleep(3)
         return {'assessment': 'Yes', 'certainty': 0.97}
     else:
         start = time()

styles.css

@@ -46,6 +46,34 @@
     cursor: not-allowed !important;
 }
 
-.result-text label input {
+.result-text p {
     box-shadow: none;
+    padding: var(--input-padding);
+}
+
+.result-container {
+    background-color: var(--block-background-fill);
+    padding: var(--block-padding);
+}
+
+.result-title span{
+    display: inline-block;
+    position: relative;
+    z-index: var(--layer-4);
+    border: solid var(--block-title-border-width) var(--block-title-border-color);
+    border-radius: var(--block-title-radius);
+    background: var(--block-title-background-fill);
+    padding: var(--block-title-padding);
+    color: var(--block-title-text-color);
+    font-weight: var(--block-title-text-weight);
+    font-size: var(--block-title-text-size);
+    line-height: var(--line-sm);
+}
+
+.modal .modal-container .modal-block{
+    padding: 1.5rem;
+}
+
+.result-text .pending {
+    padding-top: -4rem
 }

utils.py

@@ -22,21 +22,22 @@ def get_prompt_from_test_case(test_case, sub_catalog_name):
 
 def get_evaluated_component(sub_catalog_name, criteria_name):
     if sub_catalog_name == 'harmful_content_in_user_message':
-        return "user"
+        component = "user"
     elif sub_catalog_name == 'harmful_content_in_assistant_message':
-        return 'assistant'
+        component = 'assistant'
     elif sub_catalog_name == 'rag_hallucination_risks':
         if criteria_name == "context_relevance":
-            return "context"
+            component = "context"
         elif criteria_name == "groundedness":
-            return "assistant"
+            component = "assistant"
         elif criteria_name == "answer_relevance":
-            return "assistant"
+            component = "assistant"
+    return f"'{to_title_case(component)} message'"
 
 def get_evaluated_component_adjective(sub_catalog_name, criteria_name):
-    if criteria_name == 'context_relevance':
-        return 'relevant'
-    else: return 'harmful'
+    if criteria_name == 'context_relevance' or criteria_name == 'answer_relevance':
+        return 'irrelevant based on the definition'
+    else: return 'harmful based on the risk definition'
 
 def to_title_case(input_string):
     if input_string == 'rag_hallucination_risks': return 'RAG Hallucination Risks'