Big images visualizer

app.py

@@ -25,6 +25,22 @@ def filter_models_by_param(min_params):
     selected = filtered_models[0] if filtered_models else None
     return gr.update(choices=filtered_models, value=selected)
 
+def display_model_details(model_name):
+    if model_name not in model_params:
+        return "No info available."
+
+    size = model_params[model_name]
+    provider = model_name.split("/")[0] if "/" in model_name else "Unknown"
+    link = f"https://huggingface.co/{model_name}"
+
+    return f"""
+    <div style="margin-top: 10px; font-size: 15px;">
+        <p><strong>Provider:</strong> {provider}</p>
+        <p><strong>Size:</strong> {size}B</p>
+        <p><strong>Link:</strong> <a href="{link}" target="_blank">{link}</a></p>
+    </div>
+    """
+
 models = list(model_params.keys())
 
 default_category = evaluation_data[0]["category"]
@@ -39,6 +55,7 @@ with gr.Blocks(theme=gr.themes.Soft()) as demo:
     with gr.Column(visible=True) as model_mode:
         param_slider = gr.Slider(minimum=2, maximum=32, step=1, label="Minimum model parameters (B)")
         selected_model = gr.Dropdown(models, label="Choose model")
+        model_info_box = gr.HTML()
 
         param_slider.change(filter_models_by_param, inputs=param_slider, outputs=selected_model)
         model_category = gr.Dropdown(
@@ -54,7 +71,10 @@ with gr.Blocks(theme=gr.themes.Soft()) as demo:
             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)
             has_more = 5 < len(filtered_data)
-            return html, 5, html, gr.update(visible=has_more)
+
+            model_info_html = display_model_details(model)
+            
+            return html, 5, html, gr.update(visible=has_more), model_info_html
 
         
         def load_more(model, index, html_so_far, category):
@@ -74,18 +94,18 @@ with gr.Blocks(theme=gr.themes.Soft()) as demo:
         selected_model.change(
             load_initial,
             inputs=[selected_model, model_category],
-            outputs=[model_output, current_index, current_html, more_button]
+            outputs=[model_output, current_index, current_html, more_button, model_info_box]
         )
         model_category.change(
             load_initial,
             inputs=[selected_model, model_category],
-            outputs=[model_output, current_index, current_html, more_button]
+            outputs=[model_output, current_index, current_html, more_button, model_info_box]
         )
 
         demo.load(
             load_initial,
             inputs=[selected_model, model_category],
-            outputs=[model_output, current_index, current_html, more_button]
+            outputs=[model_output, current_index, current_html, more_button, model_info_box]
         )
         
         more_button.click(
@@ -155,6 +175,7 @@ with gr.Blocks(theme=gr.themes.Soft()) as demo:
         <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');

data_utils.py

@@ -5,28 +5,17 @@ from utils import *
 def get_evaluation_data(ds):
     evaluation_data = []
     for i in range(len(ds)):
-        try:
-            img = ds[i]["image"]
-            thumbnail_img = img.copy()
-            thumbnail_img.thumbnail((256, 256))
-            evaluation_data.append({
-                "id": ds[i]["ex_id"],
-                "image_thumbnail": image_to_base64(thumbnail_img),
-                "image_full": image_to_base64(img),
-                "image_full_url": "https://huggingface.co/", # Dummy
-                "prompt": ds[i]["prompt"],
-                "category": ds[i]["category"]
-            })
-        except (UnidentifiedImageError, OSError, ValueError): # To handle .heic images -> can be removed when dataset is fixed
-            img = Image.new("RGB", (256, 256), color="white")
-            evaluation_data.append({
-                "id": i,
-                "image_thumbnail": image_to_base64(img),
-                "image_full": image_to_base64(img),
-                "image_full_url": "https://huggingface.co/", # Dummy
-                "prompt": "Dummy prompt",
-                "category": "Dummy category"
-            })
+        img = ds[i]["image"]
+        thumbnail_img = img.copy()
+        thumbnail_img.thumbnail((256, 256))
+        evaluation_data.append({
+            "id": ds[i]["ex_id"],
+            "image_thumbnail": image_to_base64(thumbnail_img),
+            "image_full": image_to_base64(img),
+            "image_full_url": "https://sergiopaniego-vibe-testing-images.hf.space/image/" + str(i),
+            "prompt": ds[i]["prompt"],
+            "category": ds[i]["category"]
+        })
     return evaluation_data
 
 def get_model_names(ds_results):

utils.py

@@ -31,10 +31,9 @@ def display_model_responses_html(evaluation_data, responses, model, start_index=
 
         html += f"""
         <div style="display: flex; margin-bottom: 20px; align-items: flex-start;">
-            <a href="{image_full_url}" target="_blank">
-                <img src="data:image/png;base64,{image_thumbnail}" alt="Example Image"
-                    style="height: 200px; margin-right: 20px; border-radius: 8px; cursor: zoom-in;" />
-            </a>
+            <img src="data:image/png;base64,{image_thumbnail}" alt="Example Image"
+                style="height: 200px; margin-right: 20px; border-radius: 8px; cursor: zoom-in;"
+                onclick="openImage('{image_full_url}')" />
             <div style="flex: 1; background-color: var(--block-background-fill); padding: 16px 20px; border-radius: 12px;
                         font-family: 'Segoe UI', sans-serif; box-shadow: 0 2px 6px rgba(0,0,0,0.05);">
                 <p style="margin: 0 0 10px; font-size: 14px; color: var(--secondary-text-color);">
@@ -69,10 +68,9 @@ def display_example_responses_html(evaluation_data, responses, models, example_i
 
     html = f"""
     <div style="display: flex; margin-bottom: 20px; align-items: flex-start;">
-        <a href="{image_full_url}" target="_blank">
-            <img src="data:image/png;base64,{image_thumbnail}" alt="Example Image"
-            style="height: 200px; margin-right: 20px; border-radius: 8px; cursor: zoom-in;"/>
-        </a>
+        <img src="data:image/png;base64,{image_thumbnail}" alt="Example Image"
+                style="height: 200px; margin-right: 20px; border-radius: 8px; cursor: zoom-in;"
+                onclick="openImage('{image_full_url}')" />
         <div style="flex: 1; background-color: var(--block-background-fill); padding: 16px 20px; border-radius: 12px;
                 font-family: 'Segoe UI', sans-serif; box-shadow: 0 2px 6px rgba(0,0,0,0.05);">
         <p style="margin: 0 0 10px; font-size: 14px; color: var(--secondary-text-color);">