Update labels for model configurations

app.py

@@ -1037,25 +1037,39 @@ def create_gradio_interface():
 
                     with gr.Row():
                         gr.HTML(f"""
-                        <div class="performance-metrics" style="display: flex; flex-wrap: wrap; gap: 18px; font-size: 14px;">
-
-                            <!-- MODEL COUNTS -->
-                            <div class="metric-label">Model Configurations Tested: {num_total_models}</div>
-                            <div class="metric-label">Textual Model Configurations: {num_textual_models}</div>
-                            <div class="metric-label">Multimodal Model Configurations: {num_multimodal_models}</div>
-
-                        
-                            <!-- BEST MODELS -->
-                            <div class="metric-label" title="Best model evaluated on textual data (regardless of modality)">
-                                Best Textual Model: {best_textual_model} ({best_textual_score:.2f})
-                            </div>
-
-                            <div class="metric-label" title="Best model evaluated on textual + visual/video data">
-                                Best Multimodal Model: {best_multimodal_model} ({best_multimodal_score:.2f})
-                            </div>
-
-                        </div>
-                        """)
+        <div class="performance-metrics" style="display: flex; flex-wrap: wrap; gap: 8px; font-size: 10px;">
+
+        <!-- MODEL COUNTS -->
+        <div class="metric-label" style="padding: 4px; font-weight: bold; display: flex; align-items: center;">
+            <span style="font-size: 12px; color: #4a90e2;">Model Configurations Tested:</span>
+            <span style="display: inline-flex; justify-content: center; align-items: center; width: 20px; height: 20px; border-radius: 50%; background-color: #4a90e2; color: white; text-align: center; font-size: 10px; margin-left: 5px;">{num_total_models}</span>
+        </div>
+
+        <div class="metric-label" style="padding: 4px; font-weight: bold; display: flex; align-items: center;">
+            <span style="font-size: 12px; color: #4a90e2;">Textual Model Configurations:</span>
+            <span style="display: inline-flex; justify-content: center; align-items: center; width: 20px; height: 20px; border-radius: 50%; background-color: #4a90e2; color: white; text-align: center; font-size: 10px; margin-left: 5px;">{num_textual_models}</span>
+        </div>
+
+        <div class="metric-label" style="padding: 4px; font-weight: bold; display: flex; align-items: center;">
+            <span style="font-size: 12px; color: #4a90e2;">Multimodal Model Configurations:</span>
+            <span style="display: inline-flex; justify-content: center; align-items: center; width: 20px; height: 20px; border-radius: 50%; background-color: #4a90e2; color: white; text-align: center; font-size: 10px; margin-left: 5px;">{num_multimodal_models}</span>
+        </div>
+
+        <!-- BEST MODELS -->
+        <div class="metric-label" title="Best model evaluated on textual data (regardless of modality)" style="padding: 4px; display: flex; align-items: center;">
+            <span style="font-size: 12px; color: #4a90e2;">Best Textual Model:</span>
+            <span style="font-size: 12px; color: #333333; margin-left: 5px;">{best_textual_model}</span>
+            <span style="display: inline-flex; justify-content: center; align-items: center; width: 20px; height: 20px; border-radius: 50%; background-color: #e94e77; color: white; text-align: center; font-size: 10px; margin-left: 5px;">{best_textual_score:.2f}</span>
+        </div>
+
+        <div class="metric-label" title="Best model evaluated on textual + visual/video data" style="padding: 4px; display: flex; align-items: center;">
+            <span style="font-size: 12px; color: #4a90e2;">Best Multimodal Model:</span>
+            <span style="font-size: 12px; color: #333333; margin-left: 5px;">{best_multimodal_model}</span>
+            <span style="display: inline-flex; justify-content: center; align-items: center; width: 20px; height: 20px; border-radius: 50%; background-color: #e94e77; color: white; text-align: center; font-size: 10px; margin-left: 5px;">{best_multimodal_score:.2f}</span>
+        </div>
+
+        </div>
+    """)
 
                     # Grafici affiancati
                     with gr.Row():