SVG Benin flag (the emoji rendered as BJ) and much lighter filter chrome

app.py

@@ -62,10 +62,22 @@ CSS = """
 
 .fb-legend { font-size:.82rem; color:var(--fb-muted); margin:.15rem 0 .9rem; }
 
-/* Sélecteur de vue : des onglets, pas une liste de cases à cocher. */
-.fb-views .wrap { gap:.4rem; }
-.fb-views label { border-radius:999px !important; padding:.3rem .85rem !important;
-                  font-weight:600; font-size:.88rem; }
+/* Filtres : compacts, sans panneaux ni pastilles d'étiquette. */
+.fb-filters { gap:.5rem !important; margin-bottom:.5rem; }
+.fb-filters .block { padding:0 !important; }
+.fb-row2 { align-items:center; gap:.6rem !important; }
+
+/* Sélecteur de vue : des pastilles cliquables, pas des boutons radio. */
+.fb-views .wrap { gap:.35rem !important; }
+.fb-views label { border-radius:999px !important;
+                  padding:.32rem .9rem !important; font-weight:600;
+                  font-size:.86rem; border:1px solid var(--fb-line) !important;
+                  cursor:pointer; transition:background .12s; }
+.fb-views label:hover { background:rgba(120,120,180,.12) !important; }
+/* Le cercle du radio n'apporte rien à côté de l'état sélectionné : on le
+   masque sans le retirer du parcours clavier. */
+.fb-views input[type=radio] { position:absolute; opacity:0;
+                              width:1px; height:1px; }
 
 /* Le tableau est large : on le laisse défiler plutôt que compresser. */
 .fb-table table { font-size:.86rem; }
@@ -134,6 +146,20 @@ def categorie(r: dict) -> str:
     return "base"
 
 
+# Drapeau béninois en SVG : l'emoji 🇧🇯 est une paire d'indicateurs
+# régionaux que Windows ne compose pas — il s'affiche « BJ ».
+def flag(h: int = 15) -> str:
+    w = round(h * 1.5)
+    return (
+        f"<svg viewBox='0 0 30 20' width='{w}' height='{h}' "
+        "style='vertical-align:-.12em;border-radius:2px' "
+        "role='img' aria-label='Benin'>"
+        "<rect width='30' height='20' fill='#FCD116'/>"
+        "<rect y='10' width='30' height='10' fill='#E8112D'/>"
+        "<rect width='12' height='20' fill='#008751'/></svg>"
+    )
+
+
 def pct(x) -> str:
     return "—" if x is None else f"{float(x) * 100:.1f}"
 
@@ -233,7 +259,7 @@ def build_table(benchmark_id: str, vue: str, archs: list[str],
               for c in ("maison", "tiers", "base")}
     meta = (
         "<div class='fb-meta'>"
-        f"<span>🇧🇯 <b>{bench.get('name', benchmark_id)}</b></span>"
+        f"<span>{flag(13)} <b>{bench.get('name', benchmark_id)}</b></span>"
         f"<span><b>{bench.get('num_utterances', '?')}</b> utterances</span>"
         f"<span><b>{bench.get('duration_hours', '?')}</b> hours</span>"
         + ("<span class='fb-badge'>private test set</span>"
@@ -498,7 +524,7 @@ def build_ui() -> gr.Blocks:
         gr.HTML(
             "<div class='fb-head'>"
             "<p class='fb-title'>Fon<span>Bench</span> "
-            "<span class='fb-flag'>🇧🇯</span></p>"
+            f"{flag(26)}</p>"
             "<p class='fb-sub'>The public speech-recognition leaderboard for "
             "Fon, a tonal language of Benin</p>"
             "</div>"
@@ -506,26 +532,29 @@ def build_ui() -> gr.Blocks:
 
         with gr.Tabs():
             with gr.Tab("Leaderboard"):
-                with gr.Row():
-                    b_sel = gr.Dropdown(choix, value=defaut, label="Test set",
-                                        scale=3)
-                    tri = gr.Dropdown(
-                        ["Quality (ranking metric)", "Speed (RTFx)",
-                         "Model size"],
-                        value="Quality (ranking metric)",
-                        label="Sort by", scale=2)
-                # Le filtre le plus utilisé mérite d'être visible et à un
-                # seul clic, pas caché dans un menu à choix multiple.
-                f_type = gr.Radio(list(VUES), value="All models",
-                                  label="Show", elem_classes="fb-views")
-                with gr.Row():
-                    f_arch = gr.Dropdown([], multiselect=True,
-                                         label="Architecture", scale=3)
-                    f_dec = gr.Dropdown([], multiselect=True,
-                                        label="Decoder", scale=3)
-                    f_cont = gr.Checkbox(label="Hide contaminated models",
-                                         scale=2)
-                    rafraichir = gr.Button("Refresh", scale=1)
+                # Deux rangées suffisent : les quatre menus ensemble, puis
+                # les vues en pastilles. Le filtre le plus utilisé reste
+                # visible et à un seul clic.
+                with gr.Column(elem_classes="fb-filters"):
+                    with gr.Row():
+                        b_sel = gr.Dropdown(choix, value=defaut,
+                                            label="Test set", scale=5)
+                        tri = gr.Dropdown(
+                            ["Quality (ranking metric)", "Speed (RTFx)",
+                             "Model size"],
+                            value="Quality (ranking metric)",
+                            label="Sort by", scale=3)
+                        f_arch = gr.Dropdown([], multiselect=True,
+                                             label="Architecture", scale=3)
+                        f_dec = gr.Dropdown([], multiselect=True,
+                                            label="Decoder", scale=3)
+                    with gr.Row(elem_classes="fb-row2"):
+                        f_type = gr.Radio(list(VUES), value="All models",
+                                          show_label=False, container=False,
+                                          elem_classes="fb-views", scale=8)
+                        f_cont = gr.Checkbox(label="Hide contaminated",
+                                             container=False, scale=2)
+                        rafraichir = gr.Button("Refresh", size="sm", scale=1)
 
                 meta = gr.HTML()
                 legende = gr.Markdown(elem_classes="fb-legend")
@@ -595,7 +624,26 @@ def build_ui() -> gr.Blocks:
     return demo
 
 
-THEME = gr.themes.Soft(primary_hue="indigo", secondary_hue="amber")
+# Les étiquettes de champ s'affichaient en pastilles indigo posées sur des
+# panneaux encadrés : trois niveaux de décor pour cinq filtres. On les rend
+# discrètes au niveau du thème plutôt qu'à coups de !important.
+THEME = gr.themes.Soft(primary_hue="indigo", secondary_hue="amber").set(
+    block_label_background_fill="transparent",
+    block_label_background_fill_dark="transparent",
+    block_label_border_width="0px",
+    block_label_text_color="*neutral_500",
+    block_label_text_color_dark="*neutral_400",
+    block_label_text_size="*text_xs",
+    block_label_text_weight="600",
+    block_background_fill="transparent",
+    block_background_fill_dark="transparent",
+    block_border_width="0px",
+    block_shadow="none",
+    panel_background_fill="transparent",
+    panel_background_fill_dark="transparent",
+    panel_border_width="0px",
+    form_gap_width="0px",
+)
 
 # Au niveau du module, pas sous `__main__` : le lanceur de Hugging Face
 # importe app.py et cherche une variable nommée `demo`.