Parse markdown responses (#4)

- Added markdown rendering and improving UI (2b408f3cc7285795f4e06f971e6257a2280042cd)

app.py

@@ -33,39 +33,50 @@ with gr.Blocks(theme=gr.themes.Soft()) as demo:
         current_html = gr.State(value="")
 
         def load_initial(model, category):
+            filtered_data = [ex for ex in evaluation_data if ex["category"] == category]
             html = display_model_responses_html(evaluation_data, responses, model, start_index=0, batch_size=5, category=category)
-            return html, 5, html
+            has_more = 5 < len(filtered_data)
+            return html, 5, html, gr.update(visible=has_more)
+
         
         def load_more(model, index, html_so_far, category):
+            filtered_data = [ex for ex in evaluation_data if ex["category"] == category]
+        
             new_html = display_model_responses_html(evaluation_data, responses, model, start_index=index, batch_size=5, category=category)
             updated_html = html_so_far + new_html
-            return updated_html, index + 5, updated_html
+        
+            new_index = index + 5
+            has_more = new_index < len(filtered_data)
+        
+            return updated_html, new_index, updated_html, gr.update(visible=has_more)
+
 
+        more_button = gr.Button("Load more")
+        
         selected_model.change(
             load_initial,
             inputs=[selected_model, model_category],
-            outputs=[model_output, current_index, current_html]
+            outputs=[model_output, current_index, current_html, more_button]
         )
         model_category.change(
             load_initial,
             inputs=[selected_model, model_category],
-            outputs=[model_output, current_index, current_html]
+            outputs=[model_output, current_index, current_html, more_button]
         )
 
         demo.load(
             load_initial,
             inputs=[selected_model, model_category],
-            outputs=[model_output, current_index, current_html]
+            outputs=[model_output, current_index, current_html, more_button]
         )
-
-
-        more_button = gr.Button("Load more")
+        
         more_button.click(
             load_more,
             inputs=[selected_model, current_index, current_html, model_category],
-            outputs=[model_output, current_index, current_html]
+            outputs=[model_output, current_index, current_html, more_button]
         )
 
+
     with gr.Column(visible=False) as example_mode:
         category = gr.Dropdown(
             choices=list(set(ex["category"] for ex in evaluation_data)),

requirements.txt

@@ -0,0 +1 @@
+markdown

utils.py

@@ -1,5 +1,6 @@
 import base64
 import time
+import markdown
 
 from io import BytesIO
 
@@ -13,7 +14,6 @@ def get_examples_by_category(evaluation_data, category):
     return [ex["id"] for ex in evaluation_data if ex["category"] == category]
 
 def display_model_responses_html(evaluation_data, responses, model, start_index=0, batch_size=5, category=None):
-    start_time = time.time()
     html = ""
 
     if category is not None:
@@ -24,10 +24,10 @@ def display_model_responses_html(evaluation_data, responses, model, start_index=
     for ex in filtered_data[start_index:start_index + batch_size]:
         image_thumbnail = ex["image_thumbnail"]
         image_full_url = ex["image_full_url"]
-        img_id = ex["id"]
         prompt = ex["prompt"]
-        response = responses[model].get(ex["id"], "(No response)")
         category = ex["category"]
+        raw_response = responses[model].get(ex["id"], "(No response)")
+        response_html = markdown.markdown(raw_response, extensions=['fenced_code', 'codehilite'])
 
         html += f"""
         <div style="display: flex; margin-bottom: 20px; align-items: flex-start;">
@@ -41,15 +41,16 @@ def display_model_responses_html(evaluation_data, responses, model, start_index=
                     <strong style="color: var(--body-text-color);">Category:</strong> {category}</p>
                 <p style="margin: 0 0 10px; font-size: 16px;">
                     <strong style="color: var(--body-text-color);">Prompt:</strong> {prompt}</p>
-                <p style="margin: 0; font-size: 16px;">
-                    <strong style="color: var(--body-text-color);">Response:</strong> {response}</p>
+                <div style="margin-top: 10px;">
+                    <strong style="color: var(--body-text-color);">Response:</strong>
+                    <div style="margin-top: 4px; font-size: 15px; color: var(--body-text-color);">
+                        {response_html}
+                    </div>
+                </div>
             </div>
         </div>
         <hr/>
         """
-    elapsed_time = time.time() - start_time
-    print(f"[TRACE] display_model_responses_html took {elapsed_time:.3f} seconds for {batch_size} items")
-
     return html