look & feel improvements

app.py

@@ -2,7 +2,7 @@ import gradio as gr
 from dotenv import load_dotenv
 import json
 from generate import generate_text, get_prompt_from_test_case
-
+from time import sleep
 # load_dotenv()
 
 catalog = {}
@@ -18,6 +18,8 @@ context = gr.Textbox(label="Context", lines=3, interactive=True, value=starting_
 user_message = gr.Textbox(label="User Message", lines=3, interactive=True, value=starting_test_case['user_message'])
 assistant_message = gr.Textbox(label="Assistant Message", lines=3, interactive=True, value=starting_test_case['assistant_message'])
 catalog_buttons: dict[str,dict[str,gr.Button]] = {}
+result_text = gr.Textbox(label="Result", interactive=False)
+result_certainty = gr.Number(label="Certainty", interactive=False, value='')
 
 for sub_catalog_name, sub_catalog in catalog.items():
     catalog_buttons[sub_catalog_name] = {}
@@ -55,54 +57,59 @@ def on_test_case_click(link):
         context: selected_test_case['context'] if selected_test_case['context'] is not None else gr.update(visible=False),
         user_message: selected_test_case['user_message'],
         assistant_message: selected_test_case['assistant_message'],
+        result_text: gr.update(value=''),
+        result_certainty: gr.update(value='')
     }
 
 def change_button_color(event: gr.EventData):
     return [gr.update(elem_classes=['catalog-button', 'selected']) if v.elem_id == event.target.elem_id else gr.update(elem_classes=['catalog-button']) for c in catalog_buttons.values() for v in c.values()]
 
 def on_submit(inputs):
-    prompt = get_prompt_from_test_case({
-        'criteria': inputs[criteria],
-        'context': inputs[context],
-        'user_message': inputs[user_message],
-        'assistant_message': inputs[assistant_message],
-    })
-    result = generate_text(prompt)
-    return result['assessment'], result['certainty']
+    # prompt = get_prompt_from_test_case({
+    #     'criteria': inputs[criteria],
+    #     'context': inputs[context],
+    #     'user_message': inputs[user_message],
+    #     'assistant_message': inputs[assistant_message],
+    # })
+    # result = generate_text(prompt)
+    # return result['assessment'], result['certainty']
+    sleep(3)
+    return 'Yes', 0.97
 
 with gr.Blocks(
      theme=gr.themes.Soft(font=[gr.themes.GoogleFont("IBM Plex Sans")]), css='styles.css') as demo:
     with gr.Row():
         gr.HTML('<h1>Granite Guardian</h1>', elem_classes='title')
-    with gr.Row():
+    with gr.Row(elem_classes='column-gap'):
         with gr.Column(scale=0):
             title_display_left = gr.HTML("<h2>Catalog - Harms & Risks</h2>")
             accordions = []
-            for sub_catalog_name, sub_catalog in catalog.items():
-                with gr.Accordion(sub_catalog_name, open=True) as accordion:
+            for i, (sub_catalog_name, sub_catalog) in enumerate(catalog.items()):
+                with gr.Accordion(sub_catalog_name, open=i==0, elem_classes='accordion-align') as accordion:
                     for test_case in sub_catalog:
                         link = catalog_buttons[sub_catalog_name][test_case['name']]
                         link.render()
-                        link.click(on_test_case_click, link, {test_case_name, criteria, context, user_message, assistant_message}) \
+                        link.click(on_test_case_click, link, {test_case_name, criteria, context, user_message, assistant_message, result_text, result_certainty}) \
                             .then(change_button_color, None, [v for c in catalog_buttons.values() for v in c.values()])
                     accordions.append(accordion)
                     def on_accordion_open(open):
                         pass
         with gr.Column(visible=True) as test_case_content:
             test_case_name.render()
-            gr.HTML("Evaluation Criteria")
+            gr.HTML("Evaluation Criteria", elem_classes='subtitle')
             criteria.render()
 
-            gr.Markdown("Test Data")
+            gr.HTML("Test Data", elem_classes='subtitle')
             context.render()
             user_message.render()
             assistant_message.render()
 
             submit_button = gr.Button("Evaluate", variant='primary')
+            gr.HTML("Evaluation results", elem_classes='subtitle')
             with gr.Row():
-                result_text = gr.Textbox(label="Result", interactive=False)
-                result_certainty = gr.Number(label="Certainty", interactive=False, value='')
-            
+                result_text.render()
+                result_certainty.render()
+
             submit_button.click(
                 on_submit, 
                 inputs={test_case_name, criteria, context, user_message, assistant_message}, 

styles.css

@@ -1,11 +1,16 @@
 .title {
-    margin-block: 0.5rem;
+    margin-top: 0.5rem;
+    margin-bottom: 0rem;
 }
 
 .title h1 {
     font-weight: 100 !important;
 }
 
+.subtitle {
+    margin-bottom: -5px;
+}
+
 .catalog-button {
     /* // align left 
         smaller font, lighter
@@ -15,6 +20,7 @@
     justify-content: flex-start;
     background-color: transparent;
     box-shadow: none;
+
 }
 
 .selected {
@@ -24,3 +30,13 @@
 .sidebar {
     margin-right: 4rem;
 }
+
+.column-gap {
+    gap: 2rem
+}
+
+.accordion-align span  {
+    display: block;
+    text-align: left;
+    font-weight: 600 !important;
+}