Category filter (#3)

- Filter categories (2d04ce888baa749cea99eebb988103adba62a52a)

app.py

@@ -12,6 +12,9 @@ ds_results = load_dataset("visionLMsftw/vibe-testing-results", split="train")
 models = get_model_names(ds_results)
 responses = get_responses(ds_results)
 
+default_category = evaluation_data[0]["category"]
+default_example_id = evaluation_data[0]["id"]
+
 
 with gr.Blocks(theme=gr.themes.Soft()) as demo:
     gr.Markdown("# VLMVibeEval")
@@ -20,27 +23,48 @@ with gr.Blocks(theme=gr.themes.Soft()) as demo:
 
     with gr.Column(visible=True) as model_mode:
         selected_model = gr.Dropdown(models, label="Choose model")
+        model_category = gr.Dropdown(
+            choices=list(set(ex["category"] for ex in evaluation_data)),
+            label="Category",
+            value=default_category
+        )
         model_output = gr.HTML()
         current_index = gr.State(value=0)
         current_html = gr.State(value="")
 
-        def load_initial(model):
-            html = display_model_responses_html(evaluation_data, responses, model, 0)
+        def load_initial(model, category):
+            html = display_model_responses_html(evaluation_data, responses, model, start_index=0, batch_size=5, category=category)
             return html, 5, html
-
-        def load_more(model, index, html_so_far):
-            new_html = display_model_responses_html(evaluation_data, responses, model, index)
+        
+        def load_more(model, index, html_so_far, 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
 
-        selected_model.change(load_initial, selected_model, [model_output, current_index, current_html])
-        demo.load(load_initial, inputs=selected_model, outputs=[model_output, current_index, current_html])
+        selected_model.change(
+            load_initial,
+            inputs=[selected_model, model_category],
+            outputs=[model_output, current_index, current_html]
+        )
+        model_category.change(
+            load_initial,
+            inputs=[selected_model, model_category],
+            outputs=[model_output, current_index, current_html]
+        )
 
-        more_button = gr.Button("Load more")
-        more_button.click(load_more, inputs=[selected_model, current_index, current_html], outputs=[model_output, current_index, current_html])
+        demo.load(
+            load_initial,
+            inputs=[selected_model, model_category],
+            outputs=[model_output, current_index, current_html]
+        )
 
-    default_category = evaluation_data[0]["category"]
-    default_example_id = evaluation_data[0]["id"]
+
+        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]
+        )
 
     with gr.Column(visible=False) as example_mode:
         category = gr.Dropdown(
@@ -83,14 +107,12 @@ with gr.Blocks(theme=gr.themes.Soft()) as demo:
             align-items: center;
             justify-content: center;
         }
-
         #image-modal img {
             max-width: 90%;
             max-height: 90%;
             border-radius: 8px;
             box-shadow: 0 0 20px rgba(255,255,255,0.3);
         }
-
         #image-modal .close {
             position: absolute;
             top: 20px; right: 30px;
@@ -100,12 +122,10 @@ with gr.Blocks(theme=gr.themes.Soft()) as demo:
             font-weight: bold;
         }
         </style>
-
         <div id="image-modal" onclick="closeModal(event)">
         <span class="close" onclick="closeModal(event)">&times;</span>
         <img id="modal-img" src="" alt="Enlarged Image" />
         </div>
-
         <script>
         function openImage(src) {
             const modal = document.getElementById('image-modal');
@@ -113,13 +133,11 @@ with gr.Blocks(theme=gr.themes.Soft()) as demo:
             img.src = src;
             modal.style.display = 'flex';
         }
-
         function closeModal(event) {
             if (event.target.id === 'image-modal' || event.target.classList.contains('close')) {
             document.getElementById('image-modal').style.display = 'none';
             }
         }
-
         // Optional: close on ESC key
         document.addEventListener('keydown', function(e) {
             if (e.key === "Escape") {

utils.py

@@ -12,10 +12,16 @@ def image_to_base64(image):
 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):
+def display_model_responses_html(evaluation_data, responses, model, start_index=0, batch_size=5, category=None):
     start_time = time.time()
     html = ""
-    for ex in evaluation_data[start_index:start_index + batch_size]:
+
+    if category is not None:
+        filtered_data = [ex for ex in evaluation_data if ex["category"] == category]
+    else:
+        filtered_data = evaluation_data
+
+    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"]
@@ -46,6 +52,7 @@ def display_model_responses_html(evaluation_data, responses, model, start_index=
 
     return html
 
+
 def display_example_responses_html(evaluation_data, responses, models, example_id):
     ex = next(e for e in evaluation_data if e["id"] == example_id)
     image_thumbnail = ex["image_thumbnail"]