add the missing models

app.py

@@ -77,6 +77,20 @@ def filter_and_search_models(
                 architecture_mask |= filtered_df["Model Name"].str.contains(
                     "google", case=False, na=False
                 )
+            elif arch == "mistral":
+                architecture_mask |= filtered_df["Model Name"].str.contains(
+                    "mistralai", case=False, na=False
+                )
+            elif arch == "others":
+                # Include models that don't match any of the main categories
+                others_mask = ~(
+                    filtered_df["Model Name"].str.contains("meta-llama", case=False, na=False) |
+                    filtered_df["Model Name"].str.contains("deepseek", case=False, na=False) |
+                    filtered_df["Model Name"].str.contains("Qwen", case=False, na=False) |
+                    filtered_df["Model Name"].str.contains("google", case=False, na=False) |
+                    filtered_df["Model Name"].str.contains("mistralai", case=False, na=False)
+                )
+                architecture_mask |= others_mask
 
         filtered_df = filtered_df[architecture_mask]
 
@@ -136,6 +150,10 @@ def create_html_table(df):
             row_class = "qwen-row"
         elif "google" in model_name:
             row_class = "google-row"
+        elif "mistralai" in model_name:
+            row_class = "mistral-row"
+        else:
+            row_class = "others-row"
 
         html += f'<tr class="{row_class}">'
         for i, col in enumerate(df.columns):
@@ -149,7 +167,14 @@ def create_html_table(df):
             else:  # Score columns
                 cell_class = "score-cell"
 
-            html += f'<td class="{cell_class}">{row[col]}</td>'
+            # Create Hugging Face link for model name
+            if col == "Model Name":
+                hf_url = f"https://huggingface.co/{model_name}"
+                cell_content = f'<a href="{hf_url}" target="_blank" class="model-link">{model_name}</a>'
+            else:
+                cell_content = str(row[col])
+
+            html += f'<td class="{cell_class}">{cell_content}</td>'
         html += "</tr>"
     html += "</tbody>"
     html += "</table>"
@@ -205,8 +230,10 @@ with gr.Blocks(title="FACTS Grounding Leaderboard", theme=gr.themes.Base()) as a
                             ("🐧 Qwen", "qwen"),
                             ("🦙 Llama", "llama"),
                             ("🔷 Gemma", "google"),
+                            ("🌟 Mistral", "mistral"),
+                            ("🔧 Others", "others"),
                         ],
-                        value=["llama", "deepseek", "qwen", "google"],
+                        value=["llama", "deepseek", "qwen", "google", "mistral", "others"],
                         label="",
                         elem_classes="architecture-filter",
                         container=False,
@@ -232,7 +259,7 @@ with gr.Blocks(title="FACTS Grounding Leaderboard", theme=gr.themes.Base()) as a
                         "",
                         ["0-5B", "5-10B", "10-20B", "20-40B", "40-80B", ">80B"],
                         "Combined Score",
-                        ["llama", "deepseek", "qwen", "google"],
+                        ["llama", "deepseek", "qwen", "google", "mistral", "others"],
                     )
                 ),
                 elem_id="leaderboard-table",
@@ -382,6 +409,23 @@ with gr.Blocks(title="FACTS Grounding Leaderboard", theme=gr.themes.Base()) as a
         word-wrap: break-word;
     }
 
+    .model-link {
+        color: #0066cc !important;
+        text-decoration: none !important;
+        font-weight: 500 !important;
+        transition: all 0.2s ease !important;
+        border-bottom: 1px solid transparent !important;
+    }
+
+    .model-link:hover {
+        color: #0052a3 !important;
+        border-bottom: 1px solid #0066cc !important;
+        background-color: rgba(0, 102, 204, 0.05) !important;
+        padding: 2px 4px !important;
+        border-radius: 4px !important;
+        margin: -2px -4px !important;
+    }
+
     .size-cell {
         text-align: center;
         font-weight: 500;
@@ -428,6 +472,22 @@ with gr.Blocks(title="FACTS Grounding Leaderboard", theme=gr.themes.Base()) as a
         background-color: #ffe6f0;
     }
 
+    .mistral-row {
+        background-color: #faf5ff;
+    }
+
+    .mistral-row:hover {
+        background-color: #f3e8ff;
+    }
+
+    .others-row {
+        background-color: #f8fafc;
+    }
+
+    .others-row:hover {
+        background-color: #f1f5f9;
+    }
+
     .size-filter {
         margin-top: 10px;
     }
@@ -569,6 +629,34 @@ with gr.Blocks(title="FACTS Grounding Leaderboard", theme=gr.themes.Base()) as a
         box-shadow: 0 2px 4px rgba(236, 72, 153, 0.3) !important;
     }
 
+    /* Mistral styling */
+    .architecture-filter label:nth-child(5) {
+        background: #faf5ff !important;
+        border-color: #d8b4fe !important;
+        color: #7c3aed !important;
+    }
+
+    .architecture-filter label:nth-child(5):has(input[type="checkbox"]:checked) {
+        background: #8b5cf6 !important;
+        border-color: #8b5cf6 !important;
+        color: white !important;
+        box-shadow: 0 2px 4px rgba(139, 92, 246, 0.3) !important;
+    }
+
+    /* Others styling */
+    .architecture-filter label:nth-child(6) {
+        background: #f8fafc !important;
+        border-color: #cbd5e1 !important;
+        color: #475569 !important;
+    }
+
+    .architecture-filter label:nth-child(6):has(input[type="checkbox"]:checked) {
+        background: #64748b !important;
+        border-color: #64748b !important;
+        color: white !important;
+        box-shadow: 0 2px 4px rgba(100, 116, 139, 0.3) !important;
+    }
+
     /* Search and Filter Section Styling */
     .search-input input {
         border: 2px solid #e9ecef !important;
@@ -652,6 +740,117 @@ with gr.Blocks(title="FACTS Grounding Leaderboard", theme=gr.themes.Base()) as a
     .size-filter {
         margin-top: 10px;
     }
+
+    /* Dark Mode Specific Styles */
+    @media (prefers-color-scheme: dark) {
+        .leaderboard-table {
+            background: #1f2937 !important;
+            color: #f9fafb !important;
+        }
+
+        .leaderboard-table th {
+            background-color: #374151 !important;
+            color: #f9fafb !important;
+            border-bottom: 2px solid #4b5563 !important;
+        }
+
+        .leaderboard-table td {
+            color: #f9fafb !important;
+            border-bottom: 1px solid #374151 !important;
+        }
+
+        .leaderboard-table tbody tr:hover {
+            background-color: #374151 !important;
+        }
+
+        .rank-cell {
+            background-color: #374151 !important;
+            color: #f9fafb !important;
+        }
+
+        .model-cell {
+            color: #f9fafb !important;
+        }
+
+        .size-cell {
+            color: #d1d5db !important;
+        }
+
+        .score-cell {
+            color: #f9fafb !important;
+        }
+
+        /* Dark mode row colors with better contrast */
+        .llama-row {
+            background-color: rgba(245, 158, 11, 0.1) !important;
+        }
+
+        .llama-row:hover {
+            background-color: rgba(245, 158, 11, 0.2) !important;
+        }
+
+        .deepseek-row {
+            background-color: rgba(59, 130, 246, 0.1) !important;
+        }
+
+        .deepseek-row:hover {
+            background-color: rgba(59, 130, 246, 0.2) !important;
+        }
+
+        .qwen-row {
+            background-color: rgba(34, 197, 94, 0.1) !important;
+        }
+
+        .qwen-row:hover {
+            background-color: rgba(34, 197, 94, 0.2) !important;
+        }
+
+        .google-row {
+            background-color: rgba(236, 72, 153, 0.2) !important;
+        }
+
+        .google-row:hover {
+            background-color: rgba(236, 72, 153, 0.2) !important;
+        }
+
+        .mistral-row {
+            background-color: rgba(139, 92, 246, 0.1) !important;
+        }
+
+        .mistral-row:hover {
+            background-color: rgba(139, 92, 246, 0.2) !important;
+        }
+
+        .others-row {
+            background-color: rgba(107, 114, 128, 0.1) !important;
+        }
+
+        .others-row:hover {
+            background-color: rgba(107, 114, 128, 0.2) !important;
+        }
+
+        .leaderboard-container {
+            border: 1px solid #4b5563 !important;
+        }
+
+        .model-cell {
+            color: #f9fafb !important;
+        }
+
+        .model-link {
+            color: #60a5fa !important;
+        }
+
+        .model-link:hover {
+            color: #93c5fd !important;
+            border-bottom: 1px solid #60a5fa !important;
+            background-color: rgba(96, 165, 250, 0.1) !important;
+        }
+
+        .size-cell {
+            color: #d1d5db !important;
+        }
+    }
     """
 
 # Launch the app