pazabench version 2 release

.gitattributes

@@ -0,0 +1,35 @@
+*.7z filter=lfs diff=lfs merge=lfs -text
+*.arrow filter=lfs diff=lfs merge=lfs -text
+*.bin filter=lfs diff=lfs merge=lfs -text
+*.bz2 filter=lfs diff=lfs merge=lfs -text
+*.ckpt filter=lfs diff=lfs merge=lfs -text
+*.ftz filter=lfs diff=lfs merge=lfs -text
+*.gz filter=lfs diff=lfs merge=lfs -text
+*.h5 filter=lfs diff=lfs merge=lfs -text
+*.joblib filter=lfs diff=lfs merge=lfs -text
+*.lfs.* filter=lfs diff=lfs merge=lfs -text
+*.mlmodel filter=lfs diff=lfs merge=lfs -text
+*.model filter=lfs diff=lfs merge=lfs -text
+*.msgpack filter=lfs diff=lfs merge=lfs -text
+*.npy filter=lfs diff=lfs merge=lfs -text
+*.npz filter=lfs diff=lfs merge=lfs -text
+*.onnx filter=lfs diff=lfs merge=lfs -text
+*.ot filter=lfs diff=lfs merge=lfs -text
+*.parquet filter=lfs diff=lfs merge=lfs -text
+*.pb filter=lfs diff=lfs merge=lfs -text
+*.pickle filter=lfs diff=lfs merge=lfs -text
+*.pkl filter=lfs diff=lfs merge=lfs -text
+*.pt filter=lfs diff=lfs merge=lfs -text
+*.pth filter=lfs diff=lfs merge=lfs -text
+*.rar filter=lfs diff=lfs merge=lfs -text
+*.safetensors filter=lfs diff=lfs merge=lfs -text
+saved_model/**/* filter=lfs diff=lfs merge=lfs -text
+*.tar.* filter=lfs diff=lfs merge=lfs -text
+*.tflite filter=lfs diff=lfs merge=lfs -text
+*.tgz filter=lfs diff=lfs merge=lfs -text
+*.wasm filter=lfs diff=lfs merge=lfs -text
+*.xz filter=lfs diff=lfs merge=lfs -text
+*.zip filter=lfs diff=lfs merge=lfs -text
+*.zst filter=lfs diff=lfs merge=lfs -text
+*tfevents* filter=lfs diff=lfs merge=lfs -text
+*.png filter=lfs diff=lfs merge=lfs -text

.gitignore

@@ -0,0 +1,51 @@
+auto_evals/
+venv/
+.venv/
+__pycache__/
+.env
+.ipynb_checkpoints
+*ipynb
+.vscode/
+
+eval-queue/
+eval-results/
+eval-queue-bk/
+eval-results-bk/
+logs/
+
+results/
+*.pem
+
+deployment.zip
+
+# Deployment files
+download_data_assets.sh
+deployment.sh
+dev-results_summary.csv
+# docker-compose.yml
+docker-compose.dev.yml
+# Dockerfile
+pyproject.toml
+uv.lock
+startup.sh
+.dockerignore
+results_summary.csv
+upload_results_summary.py
+*results_summary*
+
+# OS/IDE files
+.DS_Store
+*.swp
+*.swo
+Thumbs.db
+
+# Gradio cache
+.gradio/
+
+.env.example
+src/aggregate_results.py
+docker-compose.yml
+.gitignore
+src/aggregate_results.py
+Dockerfile
+

README.md

@@ -0,0 +1,18 @@
+---
+title: PazaBench
+emoji: 🥇
+colorFrom: green
+colorTo: indigo
+sdk: gradio
+app_file: app.py
+pinned: true
+license: mit
+short_description: ASR Leaderboard for low resource languages
+sdk_version: 5.43.1
+tags:
+- leaderboard
+---
+
+# PazaBench Leaderboard
+
+An Automatic Speech Recognition (ASR) benchmark for low-resource languages developed by **Microsoft Research Africa, Nairobi Lab**. Launching with **39 African Languages** across **52 State-of-the-Art ASR and Language Models**, PazaBench compares three key metrics: **Character Error Rate (CER)**, **Word Error Rate (WER)**, and **RTFx (Inverse Real-Time Factor)**.

app.py

@@ -0,0 +1,743 @@
+import os
+from typing import Any
+
+import gradio as gr
+import pandas as pd
+from apscheduler.schedulers.background import BackgroundScheduler
+from huggingface_hub import snapshot_download
+
+
+from src.about import (
+    CITATION_BUTTON_LABEL,
+    CITATION_BUTTON_TEXT,
+    CHANGELOG_HEADER,
+    CHANGELOG_CARDS_HTML,
+    EVALUATION_LANGUAGE_TEXT,
+    get_dataset_group_label,
+    get_introduction_text,
+    get_llm_benchmarks_text,
+    get_llm_benchmarks_datasets_text,
+)
+from src.constants import (
+    ASR_DISPLAY_COLUMNS,
+    FILTER_COLUMN_ORDER,
+    FILTER_PARAM_MAP,
+    INTERPRETATIONS,
+    METRIC_CONFIGS,
+)
+from src.display.css_html_js import (
+    custom_css,
+    fix_aria_hidden_focus_js,
+    light_mode_head,
+    chart_gallery_html,
+    section_divider_html,
+    footer_html,
+)
+from src.display.utils import EVAL_COLS
+from src.language_metadata import get_all_regions
+from src.envs import API, EVAL_REQUESTS_PATH, QUEUE_REPO, REPO_ID, TOKEN, HF_ENABLED
+from src.populate import get_evaluation_queue_df
+from src.submission.submit import add_language_eval_request
+from src.visualizations import (
+    create_model_leaderboard,
+    create_cer_leaderboard,
+    create_speed_accuracy_scatter,
+    create_wer_cer_correlation,
+    create_language_coverage_chart,
+    create_language_location_map,
+    get_language_sample_info,
+    get_all_languages,
+)
+from src.data_processing import (
+    load_asr_results,
+    get_filter_options,
+    filter_asr_dataframe,
+    compute_metric_tables,
+    compute_metric_dataframes,
+    strip_dataset_labels,
+    VIEW_MODE_COLUMNS,
+    DEFAULT_VIEW_MODE,
+)
+
+from src.telemetry import (
+    track_event,
+    track_filter_change,
+    track_visualization_view,
+    track_error,
+) 
+# App-specific constants
+SORT_DIRECTION_CHOICES = ["Ascending", "Descending"]
+DEFAULT_SORT_DIRECTION = "Ascending"
+
+
+def _sorted_column_values(frame: pd.DataFrame, column: str) -> list[str]:
+    """Get sorted unique values from a column."""
+    if column not in frame.columns or frame.empty:
+        return []
+    values = sorted({value for value in frame[column].dropna().unique() if value != "Unknown"})
+    if (frame[column] == "Unknown").any():
+        values.append("Unknown")
+    return values
+
+
+def update_metric_tables(models, languages, dataset_groups, view_mode, african_regions=None):
+    """Update HTML metric tables based on current filters."""
+    clean_dataset_groups = strip_dataset_labels(dataset_groups)
+    tables = compute_metric_tables(
+        models or [],
+        languages or [],
+        clean_dataset_groups,
+        view_mode,
+        african_regions=african_regions or [],
+        asr_results_df=ASR_RESULTS_DF,
+    )
+    return [tables.get("cer", ""), tables.get("wer", ""), tables.get("rtfx", "")]
+
+
+def update_metric_dataframes(models, languages, dataset_groups, view_mode, african_regions=None, language_support=None):
+    """Update metric dataframes for interactive sorting."""
+    clean_dataset_groups = strip_dataset_labels(dataset_groups)
+    dataframes = compute_metric_dataframes(
+        models or [],
+        languages or [],
+        clean_dataset_groups,
+        view_mode,
+        african_regions=african_regions or [],
+        language_support=language_support or [],
+        asr_results_df=ASR_RESULTS_DF,
+    )
+    return [
+        dataframes.get("cer", pd.DataFrame()), 
+        dataframes.get("wer", pd.DataFrame()), 
+        dataframes.get("rtfx", pd.DataFrame())
+    ]
+
+
+def _language_support_to_list(value: str | None) -> list[str]:
+    """Convert the single-select 'Model Language support' choice to the backend list form."""
+    if not value or value == "All":
+        return []
+    return [value]
+
+
+def refresh_filter_dropdowns(
+    models: list[str] | None,
+    languages: list[str] | None,
+    dataset_groups: list[str] | None,
+    african_regions: list[str] | None = None,
+):
+    """Refresh filter dropdown options based on current selections."""
+    if ASR_RESULTS_DF.empty:
+        empty_update = gr.update(choices=[], value=None)
+        return [empty_update] * (len(FILTER_COLUMN_ORDER) + 1)
+
+    clean_dataset_groups = strip_dataset_labels(dataset_groups) if dataset_groups else []
+    
+    selections = {
+        "models": list(models or []),
+        "languages": list(languages or []),
+        "dataset_groups": clean_dataset_groups,
+    }
+
+    updates: list[Any] = []
+    for column in FILTER_COLUMN_ORDER:
+        param = FILTER_PARAM_MAP[column]
+        filter_kwargs = {key: list(value) for key, value in selections.items()}
+        filter_kwargs[param] = []
+        filtered = filter_asr_dataframe(
+            ASR_RESULTS_DF,
+            models=filter_kwargs["models"],
+            languages=filter_kwargs["languages"],
+            dataset_groups=filter_kwargs["dataset_groups"],
+            african_regions=african_regions,
+        )
+        options = _sorted_column_values(filtered, column)
+        current_selection = [value for value in selections[param] if value in options]
+        
+        if column == "dataset_group":
+            labeled_options = [get_dataset_group_label(dg, ASR_RESULTS_DF) for dg in options]
+            labeled_selection = [get_dataset_group_label(dg, ASR_RESULTS_DF) for dg in current_selection] if current_selection else None
+            updates.append(gr.update(choices=labeled_options, value=labeled_selection))
+        else:
+            updates.append(gr.update(choices=options, value=current_selection or None))
+
+    updates.append(gr.update(choices=get_all_regions(), value=african_regions or None))
+    return updates
+
+
+# Initialize data
+try:
+    ASR_RESULTS_DF = load_asr_results()
+    ASR_RESULTS_ERROR: str | None = None
+except (FileNotFoundError, ValueError) as err:
+    ASR_RESULTS_DF = pd.DataFrame(columns=ASR_DISPLAY_COLUMNS)
+    ASR_RESULTS_ERROR = str(err)
+    track_error(err, {"source": "results_csv"}, context="data_load")
+
+ASR_FILTER_OPTIONS = get_filter_options(ASR_RESULTS_DF) if ASR_RESULTS_ERROR is None else {
+    "model": [],
+    "language": [],
+    "dataset_group": [],
+    "dataset_group_labels": [],
+    "african_region": [],
+    "language_support": [],
+}
+
+if ASR_RESULTS_ERROR is None:
+    ASR_INITIAL_TABLES = compute_metric_tables([], [], [], DEFAULT_VIEW_MODE, asr_results_df=ASR_RESULTS_DF)
+    ASR_INITIAL_DATAFRAMES = compute_metric_dataframes([], [], [], DEFAULT_VIEW_MODE, language_support=[], asr_results_df=ASR_RESULTS_DF)
+else:
+    ASR_INITIAL_TABLES = {metric: f"<p class='metric-table-empty'>⚠️ {ASR_RESULTS_ERROR}</p>" for metric in METRIC_CONFIGS}
+    ASR_INITIAL_DATAFRAMES = {metric: pd.DataFrame() for metric in METRIC_CONFIGS}
+
+(
+    finished_eval_queue_df,
+    running_eval_queue_df,
+    pending_eval_queue_df,
+) = get_evaluation_queue_df(EVAL_REQUESTS_PATH, EVAL_COLS)
+
+
+def restart_space():
+    """Restart the HuggingFace Space (only if HF is enabled)."""
+    if HF_ENABLED and API:
+        try:
+            API.restart_space(repo_id=REPO_ID)
+        except Exception as e:
+            print(f"Could not restart space: {e}")
+    else:
+        print("HuggingFace Hub disabled, skipping space restart")
+
+### Space initialisation
+if HF_ENABLED:
+    try:
+        print(f"Downloading requests from {QUEUE_REPO}...")
+        print(EVAL_REQUESTS_PATH)
+        snapshot_download(
+            repo_id=QUEUE_REPO, local_dir=EVAL_REQUESTS_PATH, repo_type="dataset", tqdm_class=None, etag_timeout=30, token=TOKEN
+        )
+    except Exception as e:
+        print(f"Could not download requests: {e}")
+else:
+    print("HuggingFace Hub disabled, skipping dataset downloads")
+
+demo = gr.Blocks(css=custom_css, head=light_mode_head)
+with demo:
+    # Inject accessibility fix for aria-hidden focusable elements (WCAG 4.1.2)
+    gr.HTML(fix_aria_hidden_focus_js)
+    gr.Image(
+        value="src/assets/PazaBench-Banner2.png",
+        show_label=False,
+        container=False,
+        elem_id="banner-image",
+    )
+
+    with gr.Tabs(elem_classes="tab-buttons") as tabs:
+        with gr.TabItem("🎙️ ASR Metrics", elem_id="asr-results-tab", id=0):
+            if ASR_RESULTS_ERROR:
+                gr.Markdown(f"⚠️ {ASR_RESULTS_ERROR}")
+            else:
+                gr.Markdown(get_introduction_text(ASR_RESULTS_DF), elem_classes="markdown-text")
+                gr.Markdown(
+                    "### Compare models at a glance. Use the filters below to customize your view "
+                    "or explore the data directly in the tables.",
+                    elem_classes="explainer-text"
+                )
+
+                # Filter and customise accordion (collapsed by default)
+                with gr.Accordion("🔧 Filter and customise", open=False, elem_id="filter-customize-accordion"):
+                    gr.Markdown(
+                        "Compare all models by default, or narrow the view by model, language, region, or dataset. "
+                        "Choose whether columns show model families or individual models."
+                    )
+                    with gr.Row():
+                        model_filter = gr.Dropdown(
+                            choices=ASR_FILTER_OPTIONS["model"],
+                            multiselect=True,
+                            label="Model",
+                            value=None,
+                            allow_custom_value=False,
+                        )
+                        language_filter = gr.Dropdown(
+                            choices=ASR_FILTER_OPTIONS["language"],
+                            multiselect=True,
+                            label="Language",
+                            value=None,
+                            allow_custom_value=False,
+                        )
+                        dataset_filter = gr.Dropdown(
+                            choices=ASR_FILTER_OPTIONS.get("dataset_group_labels", ASR_FILTER_OPTIONS["dataset_group"]),
+                            multiselect=True,
+                            label="Dataset group",
+                            value=None,
+                            allow_custom_value=False,
+                        )
+
+                    with gr.Row():
+                        african_region_filter = gr.Dropdown(
+                            choices=ASR_FILTER_OPTIONS.get("african_region", []),
+                            multiselect=True,
+                            label="African Region",
+                            value=None,
+                            allow_custom_value=False,
+                            info="Filter languages by geographic region",
+                        )
+                        language_support_filter = gr.Dropdown(
+                            choices=[("All", "All"), ("Multilingual", "Multilingual"), ("English Only", "English-only")],
+                            multiselect=False,
+                            label="Model Language support",
+                            value="All",
+                            allow_custom_value=False,
+                            info="All models, multilingual or English-only",
+                        )
+
+                    view_mode_radio = gr.Radio(
+                        choices=list(VIEW_MODE_COLUMNS.keys()),
+                        value=DEFAULT_VIEW_MODE,
+                        label="Columns show",
+                        interactive=True,
+                    )
+
+                    apply_filters_button = gr.Button("Update dashboard", variant="primary")
+
+                gr.Markdown(
+                    "💡 **Leaderboard Guide:** *Languages are ordered alphabetically.* Model families are **ranked from left to right by the average performance across languages**. *Click on filter & customize above to filter languages or model.*",
+                    elem_classes="markdown-text"
+                )
+
+                with gr.Tabs(elem_classes="metric-tabs"):
+                    with gr.TabItem("CER ⬇️"):
+                        gr.Markdown("📉 **Lower is better** — Character Error Rate measures the percentage of characters incorrectly transcribed. This is especially important for languages with rich word forms, where meaning is built by combining word parts, therefore errors at the character level can significantly impact meaning.<br><br>*See 📊 Visualizations tab for CER Performance chart.*", elem_classes="metric-note")
+                        cer_table = gr.Dataframe(
+                            value=ASR_INITIAL_DATAFRAMES.get("cer", pd.DataFrame()),
+                            elem_id="cer-leaderboard-table",
+                            interactive=False,
+                            wrap=False,
+                            max_height=800,
+                        )
+                    with gr.TabItem("WER ⬇️"):
+                        gr.Markdown("📉 **Lower is better** — Word Error Rate measures the percentage of words incorrectly transcribed.<br><br>*See 📊 Visualizations tab for WER Performance chart.*", elem_classes="metric-note")
+                        wer_table = gr.Dataframe(
+                            value=ASR_INITIAL_DATAFRAMES.get("wer", pd.DataFrame()),
+                            elem_id="wer-leaderboard-table",
+                            interactive=False,
+                            wrap=False,
+                            max_height=800,
+                        )
+                    with gr.TabItem("RTFx ⬆️"):
+                        gr.Markdown("📈 **Higher is better** — Inverse Real-Time Factor (RTFx) measures how fast transcription runs relative to real-time audio duration.<br><br>*See 📊 Visualizations tab for Speed vs Accuracy chart.*", elem_classes="metric-note")
+                        rtfx_table = gr.Dataframe(
+                            value=ASR_INITIAL_DATAFRAMES.get("rtfx", pd.DataFrame()),
+                            elem_id="rtfx-leaderboard-table",
+                            interactive=False,
+                            wrap=False,
+                            max_height=800,
+                        )
+
+                def update_metric_dataframes_with_telemetry(models, languages, dataset_groups, view_mode, african_regions, language_support):
+                    """Wrapper that adds telemetry tracking to filter updates."""
+                    language_support_selected = _language_support_to_list(language_support)
+                    track_event("dashboard_update", {
+                        # Counts for quick filtering
+                        "models_count": len(models) if models else 0,
+                        "languages_count": len(languages) if languages else 0,
+                        "datasets_count": len(dataset_groups) if dataset_groups else 0,
+                        "regions_count": len(african_regions) if african_regions else 0,
+                        "language_support_count": len(language_support_selected),
+                        # Actual filter values (limit to prevent huge payloads)
+                        "models": ",".join(models[:10]) if models else "",
+                        "languages": ",".join(languages[:10]) if languages else "",
+                        "dataset_groups": ",".join(dataset_groups[:10]) if dataset_groups else "",
+                        "african_regions": ",".join(african_regions[:10]) if african_regions else "",
+                        "language_support": ",".join(language_support_selected),
+                        "view_mode": view_mode or "",
+                        "tab": "asr_metrics",
+                    })
+                    
+                    return update_metric_dataframes(models, languages, dataset_groups, view_mode, african_regions, language_support_selected)
+
+                apply_filters_button.click(
+                    update_metric_dataframes_with_telemetry,
+                    inputs=[
+                        model_filter,
+                        language_filter,
+                        dataset_filter,
+                        view_mode_radio,
+                        african_region_filter,
+                        language_support_filter,
+                    ],
+                    outputs=[cer_table, wer_table, rtfx_table],
+                )
+
+        with gr.TabItem("📊 Visualizations", elem_id="visualizations-tab", id=1):
+            if ASR_RESULTS_ERROR:
+                gr.Markdown(f"⚠️ {ASR_RESULTS_ERROR}")
+            else:
+                gr.Markdown(
+                    "### Explore key visualizations revealing insights about model performance, "
+                    "accuracy and efficiency trade-offs and cross-metric correlations across the benchmark.",
+                    elem_classes="markdown-text"
+                )
+                
+                # Chart Gallery - Quick Navigation
+                gr.Markdown("### 📋 Available Charts", elem_classes="markdown-text")
+                gr.HTML(chart_gallery_html)
+                
+                
+                # Plot 1: CER Performance Leaderboard (with language filter)
+                gr.HTML("<div id='cer-leaderboard-section'></div>")
+                gr.Markdown("## 🏆 CER Performance Leaderboard", elem_classes="markdown-text")
+                gr.Markdown("*Shows model families by default. Select language(s) above to see top 15 individual models. CER is the preferred metric for low-resource and agglutinative languages.*", elem_classes="markdown-text")
+                with gr.Accordion("ℹ️ How to interpret this chart", open=False):
+                    gr.Markdown(INTERPRETATIONS['cer_leaderboard'])
+                viz_language_filter_cer_leaderboard = gr.Dropdown(
+                    choices=ASR_FILTER_OPTIONS["language"],
+                    multiselect=True,
+                    label="Filter by Language",
+                    value=None,
+                    allow_custom_value=False,
+                )
+                plot_cer_leaderboard = gr.Plot(value=create_cer_leaderboard(ASR_RESULTS_DF), elem_classes="viz-scroll-plot")
+                gr.Markdown("💡 *For the best experience, view these charts on a desktop or tablet in landscape mode.*", elem_classes="markdown-text")
+                
+                # Plot 2: WER Performance Leaderboard (with language filter)
+                gr.HTML("<div id='leaderboard-section'></div>")
+                gr.Markdown("## 📊 WER Performance Leaderboard", elem_classes="markdown-text")
+                gr.Markdown("*Shows model families by default. Select language(s) above to see top 15 individual models.*", elem_classes="markdown-text")
+                with gr.Accordion("ℹ️ How to interpret this chart", open=False):
+                    gr.Markdown(INTERPRETATIONS['leaderboard'])
+                viz_language_filter_leaderboard = gr.Dropdown(
+                    choices=ASR_FILTER_OPTIONS["language"],
+                    multiselect=True,
+                    label="Filter by Language",
+                    value=None,
+                    allow_custom_value=False,
+                )
+                plot_leaderboard = gr.Plot(value=create_model_leaderboard(ASR_RESULTS_DF), elem_classes="viz-scroll-plot")
+                gr.Markdown("💡 *For the best experience, view these charts on a desktop or tablet in landscape mode.*", elem_classes="markdown-text")
+                
+                # Plot 3: Speed vs Accuracy Tradeoff (Individual Models only)
+                gr.HTML("<div id='speed-accuracy-section'></div>")
+                gr.Markdown("## 🚀 Speed versus Accuracy Tradeoffs", elem_classes="markdown-text")
+                with gr.Accordion("ℹ️ How to interpret this chart", open=False):
+                    gr.Markdown(INTERPRETATIONS['speed_accuracy'])
+                viz_language_filter_speed = gr.Dropdown(
+                    choices=ASR_FILTER_OPTIONS["language"],
+                    multiselect=True,
+                    label="Filter by Language",
+                    value=None,
+                    allow_custom_value=False,
+                )
+                plot_speed_accuracy = gr.Plot(value=create_speed_accuracy_scatter(ASR_RESULTS_DF, view_mode="individual_model"), elem_classes="viz-scroll-plot")
+                gr.Markdown("💡 *For the best experience, view these charts on a desktop or tablet in landscape mode.*", elem_classes="markdown-text")
+                
+                # Plot 4: CER vs WER Correlation (with language filter)
+                gr.HTML("<div id='correlation-section'></div>")
+                gr.Markdown("## 🔍 CER versus WER Correlation", elem_classes="markdown-text")
+                with gr.Accordion("ℹ️ How to interpret this chart", open=False):
+                    gr.Markdown(INTERPRETATIONS['correlation'])
+                with gr.Row():
+                    viz_language_filter_correlation = gr.Dropdown(
+                        choices=ASR_FILTER_OPTIONS["language"],
+                        multiselect=True,
+                        label="Filter by Language",
+                        value=["Swahili"],
+                        allow_custom_value=False,
+                        scale=3,
+                    )
+                    top_n_models_slider = gr.Slider(
+                        minimum=0,
+                        maximum=20,
+                        step=1,
+                        value=0,
+                        label="Top N Models (0 = all)",
+                        scale=1,
+                    )
+                plot_correlation = gr.Plot(value=create_wer_cer_correlation(ASR_RESULTS_DF, languages=["Swahili"]), elem_classes="viz-scroll-plot")
+                gr.Markdown("💡 *For the best experience, view these charts on a desktop or tablet in landscape mode.*", elem_classes="markdown-text")
+                
+                # Visualization update functions with telemetry
+                def update_wer_leaderboard_with_telemetry(langs):
+                    """Update WER leaderboard with telemetry tracking."""
+                    track_visualization_view("wer_leaderboard", languages=langs if langs else None)
+                    return create_model_leaderboard(ASR_RESULTS_DF, languages=langs if langs else None)
+                
+                def update_cer_leaderboard_with_telemetry(langs):
+                    """Update CER leaderboard with telemetry tracking."""
+                    track_visualization_view("cer_leaderboard", languages=langs if langs else None)
+                    return create_cer_leaderboard(ASR_RESULTS_DF, languages=langs if langs else None)
+                
+                def update_speed_accuracy_with_telemetry(langs):
+                    """Update speed-accuracy chart with telemetry tracking."""
+                    track_visualization_view("speed_accuracy", languages=langs if langs else None)
+                    return create_speed_accuracy_scatter(ASR_RESULTS_DF, view_mode="individual_model", languages=langs if langs else None)
+                
+                def update_correlation_with_telemetry(langs, top_n):
+                    """Update correlation chart with telemetry tracking."""
+                    track_visualization_view(
+                        "wer_cer_correlation", 
+                        properties={"top_n_models": str(int(top_n)) if top_n else "all"},
+                        languages=langs if langs else None
+                    )
+                    return create_wer_cer_correlation(
+                        ASR_RESULTS_DF, 
+                        languages=langs if langs else None,
+                        top_n_models=int(top_n) if top_n else None
+                    )
+
+                # Update plots when language filters change
+                viz_language_filter_leaderboard.change(
+                    fn=update_wer_leaderboard_with_telemetry,
+                    inputs=[viz_language_filter_leaderboard],
+                    outputs=[plot_leaderboard]
+                )
+                
+                viz_language_filter_cer_leaderboard.change(
+                    fn=update_cer_leaderboard_with_telemetry,
+                    inputs=[viz_language_filter_cer_leaderboard],
+                    outputs=[plot_cer_leaderboard]
+                )
+                
+                viz_language_filter_speed.change(
+                    fn=update_speed_accuracy_with_telemetry,
+                    inputs=[viz_language_filter_speed],
+                    outputs=[plot_speed_accuracy]
+                )
+                
+                # Update correlation chart when language or top N changes
+                viz_language_filter_correlation.change(
+                    fn=update_correlation_with_telemetry,
+                    inputs=[viz_language_filter_correlation, top_n_models_slider],
+                    outputs=[plot_correlation]
+                )
+                top_n_models_slider.change(
+                    fn=update_correlation_with_telemetry,
+                    inputs=[viz_language_filter_correlation, top_n_models_slider],
+                    outputs=[plot_correlation]
+                )
+
+        with gr.TabItem("📝 Benchmark Inputs", elem_id="llm-benchmark-tab-table", id=2):
+            gr.Markdown(get_llm_benchmarks_text(ASR_RESULTS_DF), elem_classes="markdown-text")
+            
+            gr.Markdown("---", elem_classes="markdown-text")
+            gr.Markdown("## 🗺️ Language Coverage", elem_classes="markdown-text")
+            gr.Markdown(
+                "Explore where each language in PazaBench is spoken across Africa and see the sample distribution by language.",
+                elem_classes="markdown-text"
+            )
+            
+            # Row 1: Language selector map and PazaBench overview with sample distribution
+            gr.Markdown("#### 🔍 Explore by Language", elem_classes="markdown-text")
+            with gr.Row(elem_id="language-coverage-row"):
+                with gr.Column(scale=1):
+                    benchmark_language_filter = gr.Dropdown(
+                        choices=get_all_languages(ASR_RESULTS_DF),
+                        value=None,
+                        label="Select a Language",
+                        multiselect=True,
+                        allow_custom_value=False,
+                        info="Select languages to see where they are spoken"
+                    )
+                    language_location_map = gr.Plot(value=create_language_location_map())
+                    gr.Markdown("💡 *Select a language to see the countries where it is spoken.*", elem_classes="markdown-text")
+                with gr.Column(scale=2):
+                    language_sample_info = gr.HTML(
+                        value=get_language_sample_info(None, ASR_RESULTS_DF),
+                    )
+                    # Sample Distribution by Language (stacked under PazaBench overview)
+                    gr.Markdown("#### 📊 Sample Distribution by Language", elem_classes="markdown-text")
+                    language_coverage_plot = gr.Plot(
+                        value=create_language_coverage_chart(asr_df=ASR_RESULTS_DF),
+                        elem_id="language-coverage-plot",
+                    )
+            
+            # Event handlers for language selector with telemetry
+            def update_benchmark_language_views(langs):
+                """Update all language-related views at once to avoid infinite loops."""
+                # Track telemetry
+                if langs:
+                    track_filter_change("language", langs, tab="benchmark_inputs")
+                    track_visualization_view("language_location_map", languages=langs)
+                    track_visualization_view("language_coverage", languages=langs)
+                
+                # Return all three outputs at once
+                return (
+                    create_language_location_map(langs if langs else None),
+                    get_language_sample_info(langs if langs else None, ASR_RESULTS_DF),
+                    create_language_coverage_chart(langs if langs else None, asr_df=ASR_RESULTS_DF),
+                )
+
+            benchmark_language_filter.change(
+                fn=update_benchmark_language_views,
+                inputs=[benchmark_language_filter],
+                outputs=[language_location_map, language_sample_info, language_coverage_plot]
+            )
+            
+            gr.Markdown(get_llm_benchmarks_datasets_text(ASR_RESULTS_DF), elem_classes="markdown-text")
+
+        with gr.TabItem("➕ Request Language Eval", elem_id="lang-eval-tab", id=3):
+            gr.Markdown(EVALUATION_LANGUAGE_TEXT, elem_classes="markdown-text")
+            
+            with gr.Row():
+                dataset_location = gr.Radio(
+                    choices=["HuggingFace", "Other"],
+                    value="HuggingFace",
+                    label="Dataset Location *",
+                    info="Select where your dataset is hosted"
+                )
+            
+            with gr.Row():
+                with gr.Column():
+                    lang_dataset_name = gr.Textbox(
+                        label="Dataset Name *",
+                        placeholder="e.g., username/dataset-name",
+                        info="Full Hugging Face dataset ID",
+                        visible=True
+                    )
+                    lang_dataset_url = gr.Textbox(
+                        label="Dataset URL *",
+                        placeholder="https://example.com/dataset",
+                        info="Full URL to the publicly available dataset",
+                        visible=False
+                    )
+                    lang_dataset_config = gr.Textbox(
+                        label="Dataset Subset/Language",
+                        placeholder="default",
+                        info="Dataset subset or language configuration (leave empty for default)"
+                    )
+                    lang_dataset_split = gr.Textbox(
+                        label="Dataset Split",
+                        placeholder="test",
+                        info="Split to evaluate (default: test)"
+                    )
+                with gr.Column():
+                    lang_license = gr.Textbox(
+                        label="License *",
+                        placeholder="e.g., CC-BY-4.0, MIT, Apache-2.0",
+                        info="License of the dataset (required)"
+                    )
+                    lang_audio_column = gr.Textbox(
+                        label="Audio Column",
+                        placeholder="audio",
+                        info="Name of the column containing audio data (optional, default: audio)"
+                    )
+                    lang_text_column = gr.Textbox(
+                        label="Text/Transcript Column",
+                        placeholder="text",
+                        info="Name of the column containing transcriptions (optional, default: text)"
+                    )
+            
+            def toggle_dataset_inputs(location):
+                """Toggle visibility of dataset name vs URL based on location selection."""
+                if location == "HuggingFace":
+                    return gr.update(visible=True), gr.update(visible=False)
+                else:
+                    return gr.update(visible=False), gr.update(visible=True)
+            
+            dataset_location.change(
+                toggle_dataset_inputs,
+                inputs=[dataset_location],
+                outputs=[lang_dataset_name, lang_dataset_url]
+            )
+            
+            lang_submit_button = gr.Button("Submit Language Evaluation Request", variant="primary")
+            lang_submission_result = gr.Markdown()
+            
+            def submit_language_eval_with_telemetry(
+                location, dataset_name, dataset_url, dataset_config, dataset_split,
+                audio_column, text_column, license
+            ):
+                """Wrapper that adds telemetry to submission attempts and resets form on success."""
+                from src.telemetry import track_submission_attempt
+                
+                result = add_language_eval_request(
+                    location, dataset_name, dataset_url, dataset_config, dataset_split,
+                    audio_column, text_column, license
+                )
+                
+                # Determine if submission was successful based on result message
+                success = result and ("success" in result.lower() or "submitted" in result.lower())
+                error_msg = None if success else result
+                
+                # Use dataset name or URL based on location
+                ds_identifier = dataset_name if location == "HuggingFace" else dataset_url
+                track_submission_attempt(
+                    dataset_name=ds_identifier or "unknown",
+                    success=success,
+                    error_message=error_msg
+                )
+                
+                # On success, reset form fields; on error, keep values so user can fix and retry
+                if success:
+                    # Reset: location, name, url, config, split, audio_col, text_col, license
+                    return (
+                        result, "HuggingFace", "", "", "", "", "", "", "",
+                        gr.update(visible=True), gr.update(visible=False),
+                    )
+                else:
+                    return (result,) + tuple(gr.update() for _ in range(10))
+
+            lang_submit_button.click(
+                submit_language_eval_with_telemetry,
+                [
+                    dataset_location,
+                    lang_dataset_name,
+                    lang_dataset_url,
+                    lang_dataset_config,
+                    lang_dataset_split,
+                    lang_audio_column,
+                    lang_text_column,
+                    lang_license,
+                ],
+                [
+                    lang_submission_result,
+                    dataset_location,
+                    lang_dataset_name,
+                    lang_dataset_url,
+                    lang_dataset_config,
+                    lang_dataset_split,
+                    lang_audio_column,
+                    lang_text_column,
+                    lang_license,
+                    lang_dataset_name,  # visibility update
+                    lang_dataset_url,   # visibility update
+                ],
+            )
+
+        with gr.TabItem("🗓️ Change Log", elem_id="changelog-tab", id=4):
+            gr.Markdown(CHANGELOG_HEADER, elem_classes="markdown-text")
+            gr.HTML(CHANGELOG_CARDS_HTML)
+
+    with gr.Row():
+        with gr.Accordion("📙 Citation", open=False):
+            citation_button = gr.Textbox(
+                value=CITATION_BUTTON_TEXT,
+                label=CITATION_BUTTON_LABEL,
+                lines=20,
+                elem_id="citation-button",
+            )
+
+    # Footer with links visible across all pages and tabs
+    gr.HTML(footer_html)
+
+# Only start scheduler if HuggingFace Hub is enabled
+if HF_ENABLED:
+    scheduler = BackgroundScheduler()
+    scheduler.add_job(restart_space, "interval", seconds=1800)
+    scheduler.start()
+    print("Background scheduler started for HuggingFace Space restart")
+else:
+    print("HuggingFace Hub disabled, background scheduler not started")
+
+# Resolve server port from PORT / WEBSITES_PORT / GRADIO_SERVER_PORT
+port = int(os.environ.get("PORT", os.environ.get("WEBSITES_PORT", os.environ.get("GRADIO_SERVER_PORT", 7860))))
+print(f"Starting Gradio server on port {port}...")
+
+demo.queue(
+    default_concurrency_limit=40
+    ).launch(
+        server_name="0.0.0.0",
+        server_port=port,
+        share=True,
+        pwa=True,
+    )
+

es-metadata.yml

@@ -0,0 +1,8 @@
+schemaVersion: 0.0.1
+isProduction: true
+accountableOwners:
+  service: 6ed18b01-b071-4f02-b219-2224b1f0a421
+routing:
+  defaultAreaPath:
+    org: msr-africa
+    path: Gecko MSR Africa

requirements.txt

@@ -0,0 +1,125 @@
+aiofiles==24.1.0
+aiohappyeyeballs==2.6.1
+aiohttp==3.13.3
+aiosignal==1.4.0
+annotated-doc==0.0.4
+annotated-types==0.7.0
+anyio==4.12.1
+apscheduler==3.11.2
+asgiref==3.11.0
+attrs==25.4.0
+authlib==1.6.6
+azure-core==1.38.0
+azure-core-tracing-opentelemetry==1.0.0b12
+azure-identity==1.25.1
+azure-monitor-opentelemetry==1.8.4
+azure-monitor-opentelemetry-exporter==1.0.0b46
+black==25.12.0
+brotli==1.2.0
+certifi==2026.1.4
+cffi==2.0.0
+charset-normalizer==3.4.4
+click==8.3.1
+cryptography==46.0.3
+datasets==4.4.2
+dill==0.4.0
+evaluate==0.4.6
+fastapi==0.128.0
+ffmpy==1.0.0
+filelock==3.20.2
+frozenlist==1.8.0
+fsspec==2025.10.0
+gradio==6.2.0
+gradio-client==2.0.2
+groovy==0.1.2
+h11==0.16.0
+hf-xet==1.2.0
+httpcore==1.0.9
+httpx==0.28.1
+huggingface-hub==0.36.0
+idna==3.11
+importlib-metadata==8.7.1
+isodate==0.7.2
+itsdangerous==2.2.0
+jinja2==3.1.6
+jiwer==4.0.0
+markdown-it-py==4.0.0
+markupsafe==3.0.3
+mdurl==0.1.2
+msal==1.34.0
+msal-extensions==1.3.1
+msrest==0.7.1
+multidict==6.7.0
+multiprocess==0.70.18
+mypy-extensions==1.1.0
+narwhals==2.15.0
+numpy==2.4.0
+oauthlib==3.3.1
+opentelemetry-api==1.39.0
+opentelemetry-instrumentation==0.60b0
+opentelemetry-instrumentation-asgi==0.60b0
+opentelemetry-instrumentation-dbapi==0.60b0
+opentelemetry-instrumentation-django==0.60b0
+opentelemetry-instrumentation-fastapi==0.60b0
+opentelemetry-instrumentation-flask==0.60b0
+opentelemetry-instrumentation-psycopg2==0.60b0
+opentelemetry-instrumentation-requests==0.60b0
+opentelemetry-instrumentation-urllib==0.60b0
+opentelemetry-instrumentation-urllib3==0.60b0
+opentelemetry-instrumentation-wsgi==0.60b0
+opentelemetry-resource-detector-azure==0.1.5
+opentelemetry-sdk==1.39.0
+opentelemetry-semantic-conventions==0.60b0
+opentelemetry-util-http==0.60b0
+orjson==3.11.5
+packaging==25.0
+pandas==2.3.3
+pathspec==1.0.2
+patsy==1.0.2
+pillow==11.3.0
+platformdirs==4.5.1
+plotly==6.5.1
+propcache==0.4.1
+psutil==7.2.1
+pyarrow==22.0.0
+pycparser==2.23
+pydantic==2.12.3
+pydantic-core==2.41.4
+pydub==0.25.1
+pygments==2.19.2
+pyjwt==2.10.1
+python-dateutil==2.9.0.post0
+python-dotenv==1.2.1
+python-multipart==0.0.21
+pytokens==0.3.0
+pytz==2025.2
+pyyaml==6.0.3
+rapidfuzz==3.14.3
+regex==2025.11.3
+requests==2.32.5
+requests-oauthlib==2.0.0
+rich==14.2.0
+safehttpx==0.1.7
+safetensors==0.7.0
+scipy==1.16.3
+semantic-version==2.10.0
+sentencepiece==0.2.1
+shellingham==1.5.4
+six==1.17.0
+starlette==0.50.0
+statsmodels==0.14.6
+tokenizers==0.22.2
+tomlkit==0.13.3
+tqdm==4.67.1
+transformers==4.57.3
+typer==0.21.1
+typing-extensions==4.15.0
+typing-inspection==0.4.2
+tzdata==2025.3
+tzlocal==5.3.1
+urllib3==2.6.3
+uvicorn==0.40.0
+wrapt==1.17.3
+xxhash==3.6.0
+yarl==1.22.0
+zipp==3.23.0

src/about.py

@@ -0,0 +1,412 @@
+from __future__ import annotations
+
+import json
+from collections.abc import Iterable
+from pathlib import Path
+from typing import Any
+
+# Your leaderboard name
+TITLE = """<h1 align="center" id="space-title">PazaBench Leaderboard</h1>"""
+
+_DATA_DIR = Path(__file__).parent / "data"
+
+
+def _load_json(name: str):
+    """Load a JSON data file bundled under ``src/data/``."""
+    with open(_DATA_DIR / name, encoding="utf-8") as data_file:
+        return json.load(data_file)
+
+
+def _load_text(name: str) -> str:
+    """Load a text/HTML template bundled under ``src/data/``."""
+    with open(_DATA_DIR / name, encoding="utf-8") as data_file:
+        return data_file.read()
+
+# Dataset-group and model-family metadata are stored in src/data/*.json
+DATASET_GROUP_METADATA = _load_json("dataset_group_metadata.json")
+
+MODEL_FAMILY_METADATA = _load_json("model_family_metadata.json")
+
+
+def _is_loaded_frame(asr_results_df: Any | None) -> bool:
+    return asr_results_df is not None and not getattr(asr_results_df, "empty", True)
+
+
+def _format_count(value: int | float | None) -> str:
+    if value is None:
+        return "0"
+    return f"{int(value):,}"
+
+
+def _to_int(value: Any) -> int:
+    try:
+        return int(float(value))
+    except (TypeError, ValueError):
+        return 0
+
+
+def _plural(word: str, count: int) -> str:
+    if count != 1 and word.endswith("family"):
+        return f"{word[:-1]}ies"
+    if count != 1 and word.endswith("y"):
+        return f"{word[:-1]}ies"
+    return word if count == 1 else f"{word}s"
+
+
+def _sorted_unique(values: Iterable[Any]) -> list[str]:
+    return sorted({str(value) for value in values if str(value).strip() and str(value) != "Unknown"})
+
+
+def _format_inline_list(values: list[str], max_items: int = 8) -> str:
+    if not values:
+        return "not available"
+    visible = values[:max_items]
+    rendered = ", ".join(visible)
+    remaining = len(values) - len(visible)
+    if remaining > 0:
+        rendered = f"{rendered}, and {_format_count(remaining)} more"
+    return rendered
+
+
+def _format_language_summary(languages: list[str]) -> str:
+    language_count = len(languages)
+    if language_count == 0:
+        return "Not available"
+    language_list = _format_inline_list(languages, max_items=12)
+    return f"{language_list} (**{_format_count(language_count)} {_plural('language', language_count)}**)"
+
+
+def _split_level_frame(asr_results_df: Any | None):
+    if not _is_loaded_frame(asr_results_df):
+        return None
+
+    required_columns = ["dataset_group", "split", "language"]
+    if any(column not in asr_results_df.columns for column in required_columns):
+        return None
+
+    columns = required_columns + (["num_samples"] if "num_samples" in asr_results_df.columns else [])
+    split_frame = asr_results_df.loc[:, columns].copy()
+    split_frame = split_frame.dropna(subset=required_columns)
+    split_frame = split_frame[split_frame["language"] != "Unknown"]
+
+    if "num_samples" in split_frame.columns:
+        split_frame["num_samples"] = split_frame["num_samples"].apply(_to_int)
+        return (
+            split_frame
+            .groupby(required_columns, dropna=False, as_index=False)["num_samples"]
+            .max()
+        )
+
+    return split_frame.drop_duplicates(required_columns)
+
+
+def get_benchmark_summary(asr_results_df: Any | None = None) -> dict[str, int]:
+    """Return benchmark coverage counts derived from the loaded results dataframe."""
+    if not _is_loaded_frame(asr_results_df):
+        metadata_languages = {
+            language
+            for metadata in DATASET_GROUP_METADATA.values()
+            for language in metadata.get("languages", [])
+        }
+        return {
+            "dataset_groups": len(DATASET_GROUP_METADATA),
+            "splits": 0,
+            "languages": len(metadata_languages),
+            "samples": 0,
+            "model_families": len(MODEL_FAMILY_METADATA),
+            "models": 0,
+        }
+
+    split_frame = _split_level_frame(asr_results_df)
+    sample_count = 0
+    if split_frame is not None and "num_samples" in split_frame.columns:
+        sample_count = int(split_frame["num_samples"].sum())
+
+    return {
+        "dataset_groups": int(asr_results_df["dataset_group"].nunique()) if "dataset_group" in asr_results_df.columns else 0,
+        "splits": int(asr_results_df["split"].nunique()) if "split" in asr_results_df.columns else 0,
+        "languages": int(asr_results_df["language"].nunique()) if "language" in asr_results_df.columns else 0,
+        "samples": sample_count,
+        "model_families": int(asr_results_df["model_family"].nunique()) if "model_family" in asr_results_df.columns else 0,
+        "models": int(asr_results_df["model"].nunique()) if "model" in asr_results_df.columns else 0,
+    }
+
+
+def _dataset_link(dataset_group: str) -> str:
+    metadata = DATASET_GROUP_METADATA.get(dataset_group, {})
+    url = metadata.get("url")
+    return f"[{dataset_group}]({url})" if url else dataset_group
+
+
+def _model_link(model_id: str) -> str:
+    return f"[{model_id}](https://huggingface.co/{model_id})"
+
+
+def _family_display_name(model_family: str) -> str:
+    metadata = MODEL_FAMILY_METADATA.get(model_family)
+    if metadata:
+        return metadata["display_name"]
+    return model_family.replace("_", " ").replace("-", " ").title()
+
+
+def _family_description(model_family: str) -> str:
+    metadata = MODEL_FAMILY_METADATA.get(model_family)
+    return metadata["description"] if metadata else "ASR model family in the loaded benchmark results."
+
+
+def get_dataset_group_languages(dataset_group: str, asr_results_df: Any | None = None) -> list[str]:
+    """Return list of languages for a dataset group, preferring loaded results over static metadata."""
+    split_frame = _split_level_frame(asr_results_df)
+    if split_frame is not None:
+        dataset_rows = split_frame[split_frame["dataset_group"] == dataset_group]
+        if not dataset_rows.empty:
+            return _sorted_unique(dataset_rows["language"].tolist())
+
+    metadata = DATASET_GROUP_METADATA.get(dataset_group)
+    if metadata:
+        return _sorted_unique(metadata.get("languages", []))
+    return []
+
+
+def get_dataset_group_label(dataset_group: str, asr_results_df: Any | None = None) -> str:
+    """Return a formatted label with description and language count."""
+    meta = DATASET_GROUP_METADATA.get(dataset_group)
+    languages = get_dataset_group_languages(dataset_group, asr_results_df)
+    if meta:
+        language_count = len(languages)
+        if language_count > 0:
+            return f"{dataset_group} ({meta['description']}, {_format_count(language_count)} {_plural('language', language_count)})"
+        return f"{dataset_group} ({meta['description']})"
+    return dataset_group
+
+
+def get_introduction_text(asr_results_df: Any | None = None) -> str:
+    """Build the homepage introduction with live counts."""
+    summary = get_benchmark_summary(asr_results_df)
+    if _is_loaded_frame(asr_results_df):
+        launch_sentence = (
+            f"Launching with **{_format_count(summary['languages'])} African "
+            f"{_plural('Language', summary['languages'])}** across "
+            f"**{_format_count(summary['models'])} State-of-the-Art ASR** and **Language Models**, "
+            "PazaBench compares three key metrics: **Character Error Rate (CER)**, "
+            "**Word Error Rate (WER)**, and **RTFx (Inverse Real-Time Factor)**."
+        )
+    else:
+        launch_sentence = (
+            "PazaBench compares three key metrics: **Character Error Rate (CER)**, "
+            "**Word Error Rate (WER)**, and **RTFx (Inverse Real-Time Factor)**."
+        )
+
+    return f"""
+The PazaBench Leaderboard is an Automatic Speech Recognition (ASR) benchmark for low-resource languages developed by the **[Microsoft Research Africa, Nairobi Lab](https://www.microsoft.com/en-us/research/lab/microsoft-research-lab-africa-nairobi/)**. {launch_sentence}
+"""
+
+
+def get_llm_benchmarks_text(asr_results_df: Any | None = None) -> str:
+    """Build the Benchmark Inputs overview from the live results."""
+    summary = get_benchmark_summary(asr_results_df)
+
+    if _is_loaded_frame(asr_results_df) and summary["dataset_groups"]:
+        dataset_sentence = (
+            f"The PazaBench evaluation dataset is unified from **{_format_count(summary['dataset_groups'])} "
+            f"{_plural('dataset', summary['dataset_groups'])}** listed below. It captures "
+            f"**{_format_count(summary['splits'])} test {_plural('split', summary['splits'])}** across the listed "
+            f"**{_format_count(summary['languages'])} {_plural('language', summary['languages'])}** and adds up to "
+            f"**{_format_count(summary['samples'])} {_plural('sample', summary['samples'])}**. The dataset consists of "
+            "16 kHz mono speech audio recordings with aligned transcriptions and accompanying split-level metadata. "
+            "For each language, data from all available sources are unified to provide a balanced measure of model performance."
+        )
+    else:
+        dataset_sentence = (
+            "The PazaBench evaluation dataset unifies public speech datasets into benchmark-ready "
+            "speech/transcript pairs with aligned transcriptions and split-level metadata."
+        )
+
+    return f"""
+## PazaBench Inputs
+
+### Evaluation Dataset
+
+{dataset_sentence}
+"""
+
+
+def _build_dataset_table(asr_results_df: Any | None = None) -> str:
+    split_frame = _split_level_frame(asr_results_df)
+    if split_frame is not None:
+        dataset_groups = _sorted_unique(split_frame["dataset_group"].tolist())
+    else:
+        dataset_groups = sorted(DATASET_GROUP_METADATA)
+
+    group_rows = []
+    for dataset_group in dataset_groups:
+        metadata = DATASET_GROUP_METADATA.get(dataset_group, {})
+        languages = get_dataset_group_languages(dataset_group, asr_results_df)
+        sample_count = None
+        if split_frame is not None:
+            dataset_rows = split_frame[split_frame["dataset_group"] == dataset_group]
+            if "num_samples" in dataset_rows.columns:
+                sample_count = int(dataset_rows["num_samples"].sum())
+        group_rows.append((dataset_group, metadata, languages, sample_count))
+
+    # Order by Total Samples descending.
+    group_rows.sort(key=lambda row: row[3] if row[3] is not None else -1, reverse=True)
+
+    rows = [
+        "| Dataset | Description | Languages | Total Samples | License |",
+        "|---------|-------------|-----------|---------------|---------|",
+    ]
+    for dataset_group, metadata, languages, sample_count in group_rows:
+        rows.append(
+            "| "
+            + " | ".join([
+                _dataset_link(dataset_group),
+                str(metadata.get("description", "Benchmark speech dataset")),
+                _format_language_summary(languages),
+                _format_count(sample_count) if sample_count is not None else "Not loaded",
+                str(metadata.get("license", "See dataset card")),
+            ])
+            + " |"
+        )
+
+    return "\n".join(rows)
+
+
+def _build_model_table(asr_results_df: Any | None = None) -> str:
+    rows = [
+        "| Model Family | Model |",
+        "|--------------|-------|",
+    ]
+
+    if _is_loaded_frame(asr_results_df) and {"model_family", "model"}.issubset(asr_results_df.columns):
+        grouped = (
+            asr_results_df.loc[:, ["model_family", "model"]]
+            .dropna()
+            .drop_duplicates()
+            .sort_values(["model_family", "model"])
+            .groupby("model_family", sort=True)["model"]
+            .apply(list)
+        )
+        families = grouped.index.tolist()
+    else:
+        grouped = {}
+        families = sorted(MODEL_FAMILY_METADATA)
+
+    # Order: Paza first, then alphabetical by display name.
+    families = sorted(families, key=lambda family: _family_display_name(family).lower())
+    families = (
+        [family for family in families if _family_display_name(family).lower().startswith("paza")]
+        + [family for family in families if not _family_display_name(family).lower().startswith("paza")]
+    )
+
+    for model_family in families:
+        models = grouped[model_family] if hasattr(grouped, "__getitem__") and model_family in grouped else []
+        model_links = ", ".join(_model_link(model) for model in models) if models else "Generated from loaded results"
+        rows.append(
+            "| "
+            + " | ".join([
+                _family_display_name(model_family),
+                model_links,
+            ])
+            + " |"
+        )
+
+    return "\n".join(rows)
+
+
+def get_llm_benchmarks_datasets_text(asr_results_df: Any | None = None) -> str:
+    """Build the dataset and model inventory tables."""
+    summary = get_benchmark_summary(asr_results_df)
+    dataset_table = _build_dataset_table(asr_results_df)
+    model_table = _build_model_table(asr_results_df)
+
+    if _is_loaded_frame(asr_results_df):
+        models_intro = (
+            f"PazaBench evaluates **{_format_count(summary['model_families'])} SOTA ASR model "
+            f"{_plural('family', summary['model_families'])} across {_format_count(summary['models'])} "
+            f"individual {_plural('model', summary['models'])}** listed below:"
+        )
+    else:
+        models_intro = "PazaBench evaluates the SOTA ASR model families listed below:"
+
+    return f"""
+## Datasets
+
+{dataset_table}
+
+---
+
+## Evaluated Models
+
+{models_intro}
+
+{model_table}
+
+**Whisper Post-Processing:** Whisper model results include a duration-based truncation step to mitigate hallucination and known over-generation behavior.
+
+---
+
+## Acknowledgements
+
+We gratefully acknowledge the dataset creators and leaderboard teams whose contributions made PazaBench possible:
+
+**Datasets:** We extend our gratitude to the creators, community contributors, and maintainers of [African Next Voices Kenya](https://huggingface.co/datasets/MCAA1-MSU/anv_data_ke), [African Next Voices South Africa](https://huggingface.co/datasets/dsfsi-anv/za-african-next-voices), [ALFFA](https://openslr.org/25/), [DigiGreen Kikuyu ASR](https://huggingface.co/datasets/DigiGreen/KikuyuASR_trainingdataset), [Google FLEURS](https://huggingface.co/datasets/google/fleurs), [Mozilla Common Voice](https://commonvoice.mozilla.org/), [Naija Voices](https://huggingface.co/datasets/naijavoices/naijavoices-dataset), [WAXAL](https://huggingface.co/datasets/google/WaxalNLP), [Alaleye Fongbe](https://huggingface.co/datasets/alaleye/fon), [Sartify Sukuma Voices](https://huggingface.co/datasets/sartifyllc/Sukuma-Voices), and [CLEAR-Global TWB Voice 1.0](https://huggingface.co/datasets/CLEAR-Global/TWB-Voice-1.0) whose efforts have been invaluable in advancing African languages speech data.
+
+**Reference Implementation:** We recognize the foundational work of the [Open ASR Leaderboard](https://huggingface.co/spaces/hf-audio/open_asr_leaderboard) by Hugging Face Audio team and appreciate the contributors of the [open_asr_leaderboard repository](https://github.com/huggingface/open_asr_leaderboard) for creating reproducible evaluation scripts.
+"""
+
+
+def get_evaluation_model_text(asr_results_df: Any | None = None) -> str:
+    summary = get_benchmark_summary(asr_results_df)
+    language_phrase = (
+        f"all {_format_count(summary['languages'])} currently loaded benchmark {_plural('language', summary['languages'])}"
+        if _is_loaded_frame(asr_results_df) and summary["languages"] > 0
+        else "all supported benchmark languages"
+    )
+
+    return f"""
+### Submit a Model for Evaluation
+
+Add a new ASR model to PazaBench. We'll evaluate it across {language_phrase}.
+
+**Requirements:**
+- Model must be **publicly available** on [Hugging Face Hub](https://huggingface.co/models)
+- Must support speech-to-text / ASR tasks
+- Should be compatible with `transformers` AutoModel or provide clear loading instructions
+"""
+
+EVALUATION_LANGUAGE_TEXT = """
+### Request Language Evaluation
+
+Submit a language dataset from any region for evaluation on PazaBench. We'll benchmark it using all supported ASR models. Provide the dataset source in the form below.
+
+**Requirements:**
+- Dataset must be publicly accessible on Hugging Face Hub or via a public URL
+- Must contain audio samples with text transcriptions
+- Audio should be 16kHz mono WAV format (will be resampled if needed)
+"""
+
+CHANGELOG_HEADER = """
+### Change Log
+
+What changed in each PazaBench release, with key coverage metrics per version. The full model, dataset and language lists live in the **ASR Metrics** and **Benchmark Inputs** tabs.
+"""
+
+# Per-version release cards (HTML template lives in src/data/changelog_cards.html)
+CHANGELOG_CARDS_HTML = _load_text("changelog_cards.html")
+
+INTRODUCTION_TEXT = get_introduction_text()
+LLM_BENCHMARKS_TEXT = get_llm_benchmarks_text()
+LLM_BENCHMARKS_DATASETS_TEXT = get_llm_benchmarks_datasets_text()
+EVALUATION_MODEL_TEXT = get_evaluation_model_text()
+
+CITATION_BUTTON_LABEL = "Copy the following snippet to cite these results"
+CITATION_BUTTON_TEXT = r"""
+@misc{pazabench2026,
+  title={PazaBench: A Benchmark for Automatic Speech Recognition on Low Resource Languages},
+  author={Microsoft Research Africa, Nairobi},
+  year={2026},
+  howpublished={\url{https://www.microsoft.com/en-us/research/project/project-gecko/}},
+  note={Alpha version. Part of Project Gecko - Equitable Generative AI for the Global Majority}
+}
+"""

src/constants.py

@@ -0,0 +1,168 @@
+"""
+Constants and mappings for PazaBench.
+
+This module contains all mapping dictionaries and configuration constants
+that are shared across the application.
+"""
+
+import json
+from pathlib import Path
+
+_DATA_DIR = Path(__file__).parent / "data"
+
+
+def _load_json(name: str):
+    """Load a JSON data file bundled under ``src/data/``."""
+    with open(_DATA_DIR / name, encoding="utf-8") as data_file:
+        return json.load(data_file)
+
+
+# =============================================================================
+# File Paths
+# =============================================================================
+
+RESULTS_CSV_PATH = Path("results_summary.csv")
+RESULTS_CSV_FILENAME = "results_summary.csv"
+
+MODEL_FAMILY_ALIASES = {
+    "hubert": "facebook_hubert",
+}
+
+
+def canonicalize_model_family(model_family: str) -> str:
+    """Map legacy or duplicate family identifiers to a single canonical value."""
+    return MODEL_FAMILY_ALIASES.get(model_family, model_family)
+
+# =============================================================================
+# Filter Configuration
+# =============================================================================
+
+FILTER_COLUMN_ORDER = ["model", "language", "dataset_group"]
+FILTER_PARAM_MAP = {
+    "model": "models",
+    "language": "languages",
+    "dataset_group": "dataset_groups",
+}
+
+# =============================================================================
+# Display Configuration
+# =============================================================================
+
+ASR_DISPLAY_COLUMNS = [
+    "model_family",
+    "model",
+    "dataset_group",
+    "split",
+    "language",
+    "region",
+    "cer",
+    "wer",
+    "rtfx",
+    "duration_sec",
+    "inference_time_sec",
+    "num_samples",
+]
+ASR_NUMERIC_COLUMNS = ["wer", "cer", "rtfx", "duration_sec", "inference_time_sec", "num_samples"]
+ASR_TEXT_COLUMNS = ["model_family", "model", "dataset_group", "split", "language", "region"]
+
+# =============================================================================
+# Metric Configuration
+# =============================================================================
+
+METRIC_CONFIGS = {
+    "cer": {"label": "CER", "better": "lower", "fmt": "{:.2f}"},
+    "wer": {"label": "WER", "better": "lower", "fmt": "{:.2f}"},
+    "rtfx": {"label": "RTFx", "better": "higher", "fmt": "{:.2f}"},
+}
+
+VIEW_MODE_COLUMNS = {
+    "Model families": "model_family",
+    "Individual models": "model",
+}
+DEFAULT_VIEW_MODE = "Model families"
+
+# =============================================================================
+# Language Normalization
+# =============================================================================
+
+LANGUAGE_NAME_MAPPING = _load_json("language_name_mapping.json")
+
+# =============================================================================
+# Geographic Mappings
+# =============================================================================
+
+# Language to country mapping for Africa map (using ISO 3166-1 alpha-3 codes)
+LANGUAGE_COUNTRY_MAP = _load_json("language_country_map.json")
+
+# Country code to name mapping
+COUNTRY_NAMES = _load_json("country_names.json")
+
+# All African countries (ISO 3166-1 alpha-3 -> name), used to show "No coverage"
+# on the map for countries without benchmark data.
+AFRICAN_COUNTRIES = _load_json("african_countries.json")
+
+# Language to countries mapping (full country names)
+# Used for language metadata and region lookups
+LANGUAGE_TO_COUNTRIES_MAP: dict[str, list[str]] = _load_json("language_to_countries_map.json")
+
+# Country to African region mapping (geographical)
+COUNTRY_TO_REGION_MAP: dict[str, str] = _load_json("country_to_region_map.json")
+
+# =============================================================================
+# Visualization Interpretation Text
+# =============================================================================
+
+INTERPRETATIONS = {
+    'speed_accuracy': """
+    - Each bubble represents a specific model; **bubble size = model parameter count**
+    - **X-axis (WER)**: Left is better (more accurate)
+    - **Y-axis (RTFx)**: Up is better (faster processing)
+    - **Top-left quadrant (⭐)**: Ideal zone - fast AND accurate models
+    - Gray dashed lines show median values for reference
+    - Uses median values to reduce impact of outliers
+    - Hover over bubbles to see exact parameter counts (e.g., 1.5B, 300M)
+    """,
+    
+    'leaderboard': """
+    - **No language selected**: Shows model families (aggregated across all languages)
+    - **Language(s) selected**: Shows top 15 individual models for those languages
+    - The horizontal bars show the median Word Error Rate (WER)
+    - Lower WER values (left side) indicate better accuracy
+    - Error bars represent the standard deviation, showing variability
+    - Bar colors correspond to each model family's assigned color
+    - Hover over bars to see additional metrics like RTFx (speed) and total samples evaluated
+    - Uses median instead of mean to reduce impact of outliers
+    """,
+    
+    'cer_leaderboard': """
+    - **No language selected**: Shows model families (aggregated across all languages)
+    - **Language(s) selected**: Shows top 15 individual models for those languages
+    - The horizontal bars show the median Character Error Rate (CER)
+    - Lower CER values (left side) indicate better accuracy
+    - CER is especially important for agglutinative and low-resource languages
+    - Error bars represent the standard deviation, showing variability
+    - Bar colors correspond to each model family's assigned color
+    - Hover over bars to see additional metrics like WER, RTFx (speed) and total samples evaluated
+    - Uses median instead of mean to reduce impact of outliers
+    """,
+    
+    'correlation': """
+    - Each point represents one evaluation result
+    - Strong positive correlation means CER and WER move together
+    - Models with high character errors typically also have high word errors
+    - The trend line shows the overall relationship
+    - **Below the line**: Models make more accurate character-level predictions (phonetically closer errors)
+    - **Above the line**: Models make more severe character-level errors per word mistake
+    - Can be filtered by language to analyze specific language patterns
+    """,
+    
+    'consistency': """
+    - Coefficient of Variation (CV) = (Standard Deviation / Median) × 100%
+    - **Lower CV** = more consistent performance across different languages
+    - **Higher CV** = performance varies widely depending on the language
+    - Bar colors correspond to each model family's assigned color
+    - Important for production deployment - you want consistent models
+    - Outliers have been removed using IQR method for more robust analysis
+    - Uses median instead of mean for more robust central tendency measure
+    """
+}

src/data/african_countries.json

@@ -0,0 +1,56 @@
+{
+  "DZA": "Algeria",
+  "AGO": "Angola",
+  "BEN": "Benin",
+  "BWA": "Botswana",
+  "BFA": "Burkina Faso",
+  "BDI": "Burundi",
+  "CPV": "Cabo Verde",
+  "CMR": "Cameroon",
+  "CAF": "Central African Republic",
+  "TCD": "Chad",
+  "COM": "Comoros",
+  "COG": "Republic of Congo",
+  "COD": "DR Congo",
+  "CIV": "Côte d'Ivoire",
+  "DJI": "Djibouti",
+  "EGY": "Egypt",
+  "GNQ": "Equatorial Guinea",
+  "ERI": "Eritrea",
+  "SWZ": "Eswatini",
+  "ETH": "Ethiopia",
+  "GAB": "Gabon",
+  "GMB": "Gambia",
+  "GHA": "Ghana",
+  "GIN": "Guinea",
+  "GNB": "Guinea-Bissau",
+  "KEN": "Kenya",
+  "LSO": "Lesotho",
+  "LBR": "Liberia",
+  "LBY": "Libya",
+  "MDG": "Madagascar",
+  "MWI": "Malawi",
+  "MLI": "Mali",
+  "MRT": "Mauritania",
+  "MUS": "Mauritius",
+  "MAR": "Morocco",
+  "MOZ": "Mozambique",
+  "NAM": "Namibia",
+  "NER": "Niger",
+  "NGA": "Nigeria",
+  "RWA": "Rwanda",
+  "STP": "São Tomé and Príncipe",
+  "SEN": "Senegal",
+  "SYC": "Seychelles",
+  "SLE": "Sierra Leone",
+  "SOM": "Somalia",
+  "ZAF": "South Africa",
+  "SSD": "South Sudan",
+  "SDN": "Sudan",
+  "TZA": "Tanzania",
+  "TGO": "Togo",
+  "TUN": "Tunisia",
+  "UGA": "Uganda",
+  "ZMB": "Zambia",
+  "ZWE": "Zimbabwe"
+}

src/data/changelog_cards.html

@@ -0,0 +1,88 @@
+
+<div class="changelog-cards" style="display: flex; flex-wrap: wrap; gap: 20px; align-items: stretch;">
+    <div style="flex: 1 1 340px; background: linear-gradient(135deg, #f0f9ff 0%, #ffffff 100%); border-radius: 12px; padding: 20px; border: 1px solid #e0e7ef;">
+        <h4 style="margin: 0 0 2px 0; color: #0f172a; font-size: 1.1em; font-weight: 600;">🗓️ v2 · Release</h4>
+        <div style="color: #666; font-size: 0.82rem; margin: 0 0 14px 0; border-bottom: 2px solid #8CD0FF; padding-bottom: 8px;">June 30, 2026</div>
+        <div style="display: grid; gap: 8px;">
+            <div style="background: white; padding: 9px 14px; border-radius: 8px; display: flex; justify-content: space-between; align-items: center; border: 1px solid #e5e7eb;">
+                <span style="color: #666; font-weight: 500; font-size: 0.9rem;">🌍 Languages</span>
+                <span style="color: #0f172a; font-weight: 700; font-size: 0.9rem;">61</span>
+            </div>
+            <div style="background: white; padding: 9px 14px; border-radius: 8px; display: flex; justify-content: space-between; align-items: center; border: 1px solid #e5e7eb;">
+                <span style="color: #666; font-weight: 500; font-size: 0.9rem;">📁 Dataset groups</span>
+                <span style="color: #0f172a; font-weight: 700; font-size: 0.9rem;">11</span>
+            </div>
+            <div style="background: white; padding: 9px 14px; border-radius: 8px; display: flex; justify-content: space-between; align-items: center; border: 1px solid #e5e7eb;">
+                <span style="color: #666; font-weight: 500; font-size: 0.9rem;">📍 Countries</span>
+                <span style="color: #0f172a; font-weight: 700; font-size: 0.9rem;">38</span>
+            </div>
+            <div style="background: white; padding: 9px 14px; border-radius: 8px; display: flex; justify-content: space-between; align-items: center; border: 1px solid #e5e7eb;">
+                <span style="color: #666; font-weight: 500; font-size: 0.9rem;">🎙️ Models</span>
+                <span style="color: #0f172a; font-weight: 700; font-size: 0.9rem;">53</span>
+            </div>
+            <div style="background: white; padding: 9px 14px; border-radius: 8px; display: flex; justify-content: space-between; align-items: center; border: 1px solid #e5e7eb;">
+                <span style="color: #666; font-weight: 500; font-size: 0.9rem;">🧩 Model families</span>
+                <span style="color: #0f172a; font-weight: 700; font-size: 0.9rem;">16</span>
+            </div>
+            <div style="background: white; padding: 9px 14px; border-radius: 8px; display: flex; justify-content: space-between; align-items: center; border: 1px solid #e5e7eb;">
+                <span style="color: #666; font-weight: 500; font-size: 0.9rem;">🧪 Evaluation splits</span>
+                <span style="color: #0f172a; font-weight: 700; font-size: 0.9rem;">93</span>
+            </div>
+            <div style="background: white; padding: 9px 14px; border-radius: 8px; display: flex; justify-content: space-between; align-items: center; border: 1px solid #e5e7eb;">
+                <span style="color: #666; font-weight: 500; font-size: 0.9rem;">📊 Test samples</span>
+                <span style="color: #0f172a; font-weight: 700; font-size: 0.9rem;">417,460</span>
+            </div>
+        </div>
+        <div style="margin-top: 14px; font-size: 0.85rem; line-height: 1.5;">
+            <strong style="color: #0f172a;">What's new</strong>
+            <ul style="margin: 6px 0 0 0; padding-left: 18px; color: #444;">
+                <li>Added <strong>SeamlessM4T</strong> — a new model and model family</li>
+                <li>Four new dataset groups: <a href="https://huggingface.co/datasets/alaleye/fon">Alaleye</a>, <a href="https://huggingface.co/datasets/sartifyllc/Sukuma-Voices">Sartify LLC</a>, <a href="https://huggingface.co/datasets/CLEAR-Global/TWB-Voice-1.0">TWB</a>, <a href="https://huggingface.co/datasets/google/WaxalNLP">WAXAL</a></li>
+                <li>New filter for model language support (multilingual vs. English-only)</li>
+                <li>Changelog</li>
+            </ul>
+        </div>
+    </div>
+    <div style="flex: 1 1 340px; background: linear-gradient(135deg, #f0f9ff 0%, #ffffff 100%); border-radius: 12px; padding: 20px; border: 1px solid #e0e7ef;">
+        <h4 style="margin: 0 0 2px 0; color: #0f172a; font-size: 1.1em; font-weight: 600;">🗓️ v1 · Initial release</h4>
+        <div style="color: #666; font-size: 0.82rem; margin: 0 0 14px 0; border-bottom: 2px solid #8CD0FF; padding-bottom: 8px;">February 5, 2026</div>
+        <div style="display: grid; gap: 8px;">
+            <div style="background: white; padding: 9px 14px; border-radius: 8px; display: flex; justify-content: space-between; align-items: center; border: 1px solid #e5e7eb;">
+                <span style="color: #666; font-weight: 500; font-size: 0.9rem;">🌍 Languages</span>
+                <span style="color: #0f172a; font-weight: 700; font-size: 0.9rem;">39</span>
+            </div>
+            <div style="background: white; padding: 9px 14px; border-radius: 8px; display: flex; justify-content: space-between; align-items: center; border: 1px solid #e5e7eb;">
+                <span style="color: #666; font-weight: 500; font-size: 0.9rem;">📁 Dataset groups</span>
+                <span style="color: #0f172a; font-weight: 700; font-size: 0.9rem;">7</span>
+            </div>
+            <div style="background: white; padding: 9px 14px; border-radius: 8px; display: flex; justify-content: space-between; align-items: center; border: 1px solid #e5e7eb;">
+                <span style="color: #666; font-weight: 500; font-size: 0.9rem;">📍 Countries</span>
+                <span style="color: #0f172a; font-weight: 700; font-size: 0.9rem;">34</span>
+            </div>
+            <div style="background: white; padding: 9px 14px; border-radius: 8px; display: flex; justify-content: space-between; align-items: center; border: 1px solid #e5e7eb;">
+                <span style="color: #666; font-weight: 500; font-size: 0.9rem;">🎙️ Models</span>
+                <span style="color: #0f172a; font-weight: 700; font-size: 0.9rem;">52</span>
+            </div>
+            <div style="background: white; padding: 9px 14px; border-radius: 8px; display: flex; justify-content: space-between; align-items: center; border: 1px solid #e5e7eb;">
+                <span style="color: #666; font-weight: 500; font-size: 0.9rem;">🧩 Model families</span>
+                <span style="color: #0f172a; font-weight: 700; font-size: 0.9rem;">15</span>
+            </div>
+            <div style="background: white; padding: 9px 14px; border-radius: 8px; display: flex; justify-content: space-between; align-items: center; border: 1px solid #e5e7eb;">
+                <span style="color: #666; font-weight: 500; font-size: 0.9rem;">🧪 Evaluation splits</span>
+                <span style="color: #0f172a; font-weight: 700; font-size: 0.9rem;">60</span>
+            </div>
+            <div style="background: white; padding: 9px 14px; border-radius: 8px; display: flex; justify-content: space-between; align-items: center; border: 1px solid #e5e7eb;">
+                <span style="color: #666; font-weight: 500; font-size: 0.9rem;">📊 Test samples</span>
+                <span style="color: #0f172a; font-weight: 700; font-size: 0.9rem;">209,540</span>
+            </div>
+        </div>
+        <div style="margin-top: 14px; font-size: 0.85rem; line-height: 1.5;">
+            <strong style="color: #0f172a;">Highlights</strong>
+            <ul style="margin: 6px 0 0 0; padding-left: 18px; color: #444;">
+                <li>Initial public launch of PazaBench</li>
+                <li>Scored on <strong>CER</strong>, <strong>WER</strong> and <strong>RTFx</strong></li>
+                <li>Whisper duration-truncation to curb hallucination</li>
+            </ul>
+        </div>
+    </div>
+</div>

src/data/country_names.json

@@ -0,0 +1,40 @@
+{
+  "ZAF": "South Africa",
+  "ETH": "Ethiopia",
+  "EGY": "Egypt",
+  "MAR": "Morocco",
+  "DZA": "Algeria",
+  "TUN": "Tunisia",
+  "LBY": "Libya",
+  "SDN": "Sudan",
+  "CMR": "Cameroon",
+  "MOZ": "Mozambique",
+  "KEN": "Kenya",
+  "BFA": "Burkina Faso",
+  "CIV": "Côte d'Ivoire",
+  "SEN": "Senegal",
+  "MLI": "Mali",
+  "NGA": "Nigeria",
+  "GIN": "Guinea",
+  "NER": "Niger",
+  "UGA": "Uganda",
+  "RWA": "Rwanda",
+  "COD": "DR Congo",
+  "COG": "Congo",
+  "TZA": "Tanzania",
+  "MWI": "Malawi",
+  "ZMB": "Zambia",
+  "LSO": "Lesotho",
+  "BWA": "Botswana",
+  "ZWE": "Zimbabwe",
+  "SOM": "Somalia",
+  "ERI": "Eritrea",
+  "GHA": "Ghana",
+  "AGO": "Angola",
+  "GMB": "Gambia",
+  "BEN": "Benin",
+  "TCD": "Chad",
+  "TGO": "Togo",
+  "MDG": "Madagascar",
+  "SWZ": "Eswatini"
+}

src/data/country_to_region_map.json

@@ -0,0 +1,45 @@
+{
+  "Kenya": "East Africa",
+  "Tanzania": "East Africa",
+  "Uganda": "East Africa",
+  "Rwanda": "East Africa",
+  "Burundi": "East Africa",
+  "Ethiopia": "East Africa",
+  "Eritrea": "East Africa",
+  "Somalia": "East Africa",
+  "Djibouti": "East Africa",
+  "South Africa": "Southern Africa",
+  "Namibia": "Southern Africa",
+  "Botswana": "Southern Africa",
+  "Zimbabwe": "Southern Africa",
+  "Zambia": "Southern Africa",
+  "Malawi": "Southern Africa",
+  "Mozambique": "Southern Africa",
+  "Angola": "Southern Africa",
+  "Lesotho": "Southern Africa",
+  "Eswatini": "Southern Africa",
+  "Nigeria": "West Africa",
+  "Ghana": "West Africa",
+  "Senegal": "West Africa",
+  "Gambia": "West Africa",
+  "Guinea": "West Africa",
+  "Mali": "West Africa",
+  "Burkina Faso": "West Africa",
+  "Côte d'Ivoire": "West Africa",
+  "Niger": "West Africa",
+  "Cameroon": "West Africa",
+  "DR Congo": "Central Africa",
+  "Republic of Congo": "Central Africa",
+  "Central African Republic": "Central Africa",
+  "Gabon": "Central Africa",
+  "Egypt": "North Africa",
+  "Libya": "North Africa",
+  "Tunisia": "North Africa",
+  "Algeria": "North Africa",
+  "Morocco": "North Africa",
+  "Sudan": "North Africa",
+  "Benin": "West Africa",
+  "Togo": "West Africa",
+  "Chad": "Central Africa",
+  "Madagascar": "East Africa"
+}

src/data/dataset_group_metadata.json

@@ -0,0 +1,177 @@
+{
+  "ALFFA": {
+    "description": "Read and broadcast speech for African ASR benchmarks",
+    "url": "https://openslr.org/25/",
+    "license": "MIT",
+    "languages": [
+      "Amharic",
+      "Swahili",
+      "Wolof"
+    ]
+  },
+  "African Next Voices Kenya": {
+    "description": "Conversational speech collected in Kenya",
+    "url": "https://huggingface.co/datasets/MCAA1-MSU/anv_data_ke",
+    "license": "CC BY 4.0",
+    "languages": [
+      "Dholuo",
+      "Kalenjin",
+      "Kikuyu",
+      "Maasai",
+      "Somali"
+    ]
+  },
+  "African Next Voices South Africa": {
+    "description": "Conversational speech collected in South Africa",
+    "url": "https://huggingface.co/datasets/dsfsi-anv/za-african-next-voices",
+    "license": "CC BY 4.0",
+    "languages": [
+      "Sesotho",
+      "Setswana",
+      "Xhosa",
+      "Xitsonga",
+      "Tshivenda",
+      "Zulu"
+    ]
+  },
+  "Google FLEURS": {
+    "description": "Read speech from the FLEURS multilingual benchmark",
+    "url": "https://huggingface.co/datasets/google/fleurs",
+    "license": "CC BY 4.0",
+    "languages": [
+      "Afrikaans",
+      "Amharic",
+      "Fula",
+      "Ganda",
+      "Hausa",
+      "Igbo",
+      "Kamba",
+      "Lingala",
+      "Dholuo",
+      "Northern Sotho",
+      "Nyanja",
+      "Oromo",
+      "Shona",
+      "Somali",
+      "Swahili",
+      "Umbundu",
+      "Wolof",
+      "Xhosa",
+      "Yoruba",
+      "Zulu"
+    ]
+  },
+  "DigiGreen Kikuyu ASR": {
+    "description": "Agricultural speech from Kikuyu-speaking farmers",
+    "url": "https://huggingface.co/datasets/DigiGreen/KikuyuASR_trainingdataset",
+    "license": "Apache 2.0",
+    "languages": [
+      "Kikuyu"
+    ]
+  },
+  "WAXAL": {
+    "description": "Community speech corpus for African languages",
+    "url": "https://huggingface.co/datasets/google/WaxalNLP",
+    "license": "Mixed (CC BY 4.0 / CC BY-SA 4.0)",
+    "languages": [
+      "Acholi",
+      "Akan",
+      "Amharic",
+      "Dagbani",
+      "Dagaare",
+      "Ewe",
+      "Fula",
+      "Ikposo",
+      "Lingala",
+      "Luganda",
+      "Maasai",
+      "Malagasy",
+      "Nyankole",
+      "Oromo",
+      "Sidamo",
+      "Shona",
+      "Soga",
+      "Tigrinya",
+      "Wolaytta"
+    ]
+  },
+  "Alaleye": {
+    "description": "Read speech in Fongbe",
+    "url": "https://huggingface.co/datasets/alaleye/fon",
+    "license": "CC BY 4.0",
+    "languages": [
+      "Fongbe"
+    ]
+  },
+  "Sartify LLC": {
+    "description": "Sukuma speech corpus",
+    "url": "https://huggingface.co/datasets/sartifyllc/Sukuma-Voices",
+    "license": "CC BY 4.0",
+    "languages": [
+      "Sukuma"
+    ]
+  },
+  "TWB": {
+    "description": "Read speech curated by CLEAR Global",
+    "url": "https://huggingface.co/datasets/CLEAR-Global/TWB-Voice-1.0",
+    "license": "CC BY-NC 4.0 (gated access)",
+    "languages": [
+      "Hausa",
+      "Kanuri",
+      "Chadian Arabic",
+      "Swahili"
+    ]
+  },
+  "Mozilla Common Voice 23.0": {
+    "description": "Crowdsourced speech from Common Voice 23.0",
+    "url": "https://commonvoice.mozilla.org/",
+    "license": "CC0 1.0",
+    "languages": [
+      "Adamawa Fulfulde",
+      "Afrikaans",
+      "Amharic",
+      "Arabic",
+      "Baatonum",
+      "Bafut",
+      "Bankon",
+      "Basaa",
+      "Borgu Fulfulde",
+      "Dholuo",
+      "Dioula",
+      "Ekoti",
+      "Hausa",
+      "Igbo",
+      "Kabyle",
+      "Kalenjin",
+      "Kidaw'ida",
+      "Kinyarwanda",
+      "Luganda",
+      "Mbo",
+      "Northern Sotho",
+      "Nyungwe",
+      "Setswana",
+      "South Ndebele",
+      "Swahili",
+      "Swati",
+      "Tamazight",
+      "Tigre",
+      "Tigrinya",
+      "Tsonga",
+      "Twi",
+      "Venda",
+      "Xhosa",
+      "Yoruba",
+      "Zulu"
+    ]
+  },
+  "Naija Voices": {
+    "description": "Conversational Nigerian speech",
+    "url": "https://huggingface.co/datasets/naijavoices/naijavoices-dataset",
+    "license": "CC BY-NC-SA 4.0",
+    "languages": [
+      "Hausa",
+      "Igbo",
+      "Yoruba"
+    ]
+  }
+}

src/data/language_country_map.json

@@ -0,0 +1,214 @@
+{
+  "Afrikaans": [
+    "ZAF"
+  ],
+  "Amharic": [
+    "ETH"
+  ],
+  "Arabic": [
+    "EGY",
+    "MAR",
+    "DZA",
+    "TUN",
+    "LBY",
+    "SDN"
+  ],
+  "Basaa": [
+    "CMR"
+  ],
+  "Dholuo": [
+    "KEN"
+  ],
+  "Dioula": [
+    "BFA",
+    "CIV"
+  ],
+  "Acholi": [
+    "UGA"
+  ],
+  "Akan": [
+    "GHA"
+  ],
+  "Adamawa Fulfulde": [
+    "NGA",
+    "CMR"
+  ],
+  "Baatonum": [
+    "BEN"
+  ],
+  "Bafut": [
+    "CMR"
+  ],
+  "Bankon": [
+    "CMR"
+  ],
+  "Ekoti": [
+    "MOZ"
+  ],
+  "Dagbani": [
+    "GHA"
+  ],
+  "Dagaare": [
+    "GHA"
+  ],
+  "Fula": [
+    "SEN",
+    "MLI",
+    "NGA",
+    "GIN",
+    "CMR",
+    "NER"
+  ],
+  "Borgu Fulfulde": [
+    "BEN",
+    "NGA"
+  ],
+  "Chadian Arabic": [
+    "TCD"
+  ],
+  "Luganda": [
+    "UGA"
+  ],
+  "Hausa": [
+    "NGA",
+    "NER"
+  ],
+  "Igbo": [
+    "NGA"
+  ],
+  "Kabyle": [
+    "DZA"
+  ],
+  "Kalenjin": [
+    "KEN"
+  ],
+  "Kamba": [
+    "KEN"
+  ],
+  "Kidaw'ida": [
+    "KEN"
+  ],
+  "Kikuyu": [
+    "KEN"
+  ],
+  "Kinyarwanda": [
+    "RWA"
+  ],
+  "Kanuri": [
+    "NGA",
+    "NER",
+    "TCD"
+  ],
+  "Ikposo": [
+    "TGO",
+    "GHA"
+  ],
+  "Lingala": [
+    "COD",
+    "COG"
+  ],
+  "Maasai": [
+    "KEN"
+  ],
+  "Malagasy": [
+    "MDG"
+  ],
+  "Mbo": [
+    "CMR"
+  ],
+  "Northern Sotho": [
+    "ZAF"
+  ],
+  "Nyanja": [
+    "MWI",
+    "ZMB"
+  ],
+  "Nyankole": [
+    "UGA"
+  ],
+  "Nyungwe": [
+    "MOZ"
+  ],
+  "Oromo": [
+    "ETH"
+  ],
+  "Soga": [
+    "UGA"
+  ],
+  "Sesotho": [
+    "ZAF",
+    "LSO"
+  ],
+  "Setswana": [
+    "ZAF",
+    "BWA"
+  ],
+  "South Ndebele": [
+    "ZAF"
+  ],
+  "Shona": [
+    "ZWE"
+  ],
+  "Somali": [
+    "KEN",
+    "SOM"
+  ],
+  "Swati": [
+    "SWZ",
+    "ZAF"
+  ],
+  "Swahili": [
+    "KEN",
+    "TZA",
+    "COD"
+  ],
+  "Tamazight": [
+    "MAR",
+    "DZA"
+  ],
+  "Tigre": [
+    "ERI"
+  ],
+  "Tigrinya": [
+    "ERI",
+    "ETH"
+  ],
+  "Tsonga": [
+    "ZAF",
+    "MOZ"
+  ],
+  "Venda": [
+    "ZAF"
+  ],
+  "Tshivenda": [
+    "ZAF",
+    "ZWE"
+  ],
+  "Twi": [
+    "GHA"
+  ],
+  "Umbundu": [
+    "AGO"
+  ],
+  "Wolaytta": [
+    "ETH"
+  ],
+  "Wolof": [
+    "SEN",
+    "GMB"
+  ],
+  "Xhosa": [
+    "ZAF"
+  ],
+  "Xitsonga": [
+    "ZAF",
+    "MOZ"
+  ],
+  "Yoruba": [
+    "NGA",
+    "BEN"
+  ],
+  "Zulu": [
+    "ZAF"
+  ]
+}

src/data/language_name_mapping.json

@@ -0,0 +1,5 @@
+{
+  "Ganda": "Luganda",
+  "Luganda": "Luganda",
+  "Dholuo": "Dholuo"
+}

src/data/language_to_countries_map.json

@@ -0,0 +1,212 @@
+{
+  "Swahili": [
+    "Kenya",
+    "Tanzania",
+    "Uganda",
+    "DR Congo"
+  ],
+  "Dholuo": [
+    "Kenya"
+  ],
+  "Dholuo (Luo)": [
+    "Kenya"
+  ],
+  "Acholi": [
+    "Uganda"
+  ],
+  "Akan": [
+    "Ghana"
+  ],
+  "Adamawa Fulfulde": [
+    "Nigeria",
+    "Cameroon"
+  ],
+  "Baatonum": [
+    "Benin"
+  ],
+  "Bafut": [
+    "Cameroon"
+  ],
+  "Bankon": [
+    "Cameroon"
+  ],
+  "Kalenjin": [
+    "Kenya"
+  ],
+  "Kikuyu": [
+    "Kenya"
+  ],
+  "Kamba": [
+    "Kenya"
+  ],
+  "Maasai": [
+    "Kenya",
+    "Tanzania"
+  ],
+  "Kidaw'ida": [
+    "Kenya",
+    "Tanzania"
+  ],
+  "Luganda": [
+    "Uganda"
+  ],
+  "Kinyarwanda": [
+    "Rwanda"
+  ],
+  "Dagbani": [
+    "Ghana"
+  ],
+  "Dagaare": [
+    "Ghana"
+  ],
+  "Somali": [
+    "Somalia",
+    "Kenya",
+    "Ethiopia"
+  ],
+  "Amharic": [
+    "Ethiopia"
+  ],
+  "Tigrinya": [
+    "Eritrea",
+    "Ethiopia"
+  ],
+  "Tigre": [
+    "Eritrea"
+  ],
+  "Oromo": [
+    "Ethiopia"
+  ],
+  "Afrikaans": [
+    "South Africa",
+    "Namibia"
+  ],
+  "Zulu": [
+    "South Africa"
+  ],
+  "Xhosa": [
+    "South Africa"
+  ],
+  "Setswana": [
+    "Botswana",
+    "South Africa"
+  ],
+  "Sesotho": [
+    "South Africa",
+    "Lesotho"
+  ],
+  "Northern Sotho": [
+    "South Africa"
+  ],
+  "Xitsonga": [
+    "South Africa",
+    "Mozambique"
+  ],
+  "Tshivenda": [
+    "South Africa"
+  ],
+  "South Ndebele": [
+    "South Africa"
+  ],
+  "Shona": [
+    "Zimbabwe"
+  ],
+  "Nyanja": [
+    "Malawi",
+    "Zambia"
+  ],
+  "Nyungwe": [
+    "Mozambique"
+  ],
+  "Ekoti": [
+    "Mozambique"
+  ],
+  "Yoruba": [
+    "Nigeria"
+  ],
+  "Igbo": [
+    "Nigeria"
+  ],
+  "Hausa": [
+    "Nigeria",
+    "Niger"
+  ],
+  "Wolof": [
+    "Senegal",
+    "Gambia"
+  ],
+  "Fula": [
+    "Senegal",
+    "Guinea",
+    "Mali",
+    "Nigeria"
+  ],
+  "Borgu Fulfulde": [
+    "Benin",
+    "Nigeria"
+  ],
+  "Chadian Arabic": [
+    "Chad"
+  ],
+  "Twi": [
+    "Ghana"
+  ],
+  "Dioula": [
+    "Burkina Faso",
+    "Côte d'Ivoire",
+    "Mali"
+  ],
+  "Kanuri": [
+    "Nigeria",
+    "Niger",
+    "Chad"
+  ],
+  "Ikposo": [
+    "Togo",
+    "Ghana"
+  ],
+  "Basaa": [
+    "Cameroon"
+  ],
+  "Ewe": [
+    "Ghana",
+    "Togo"
+  ],
+  "Fongbe": [
+    "Benin"
+  ],
+  "Mbo": [
+    "Cameroon"
+  ],
+  "Lingala": [
+    "DR Congo",
+    "Republic of Congo"
+  ],
+  "Umbundu": [
+    "Angola"
+  ],
+  "Malagasy": [
+    "Madagascar"
+  ],
+  "Arabic": [
+    "Egypt",
+    "Libya",
+    "Tunisia",
+    "Algeria",
+    "Morocco",
+    "Sudan"
+  ],
+  "Kabyle": [
+    "Algeria"
+  ],
+  "Tamazight": [
+    "Morocco",
+    "Algeria"
+  ],
+  "Wolaytta": [
+    "Ethiopia"
+  ],
+  "Soga": [
+    "Uganda"
+  ]
+}

src/data/model_family_metadata.json

@@ -0,0 +1,66 @@
+{
+  "Phi-4": {
+    "display_name": "Microsoft Phi-4",
+    "description": "Multimodal speech-language baseline evaluated for speech-to-text."
+  },
+  "facebook-data2vec": {
+    "display_name": "Facebook Data2Vec",
+    "description": "Self-supervised speech representations fine-tuned for ASR."
+  },
+  "facebook-mms": {
+    "display_name": "Facebook MMS",
+    "description": "Massively Multilingual Speech CTC models."
+  },
+  "facebook-wav2vec2": {
+    "display_name": "Facebook Wav2Vec2",
+    "description": "Wav2Vec2 ASR baselines trained on English speech."
+  },
+  "facebook-wav2vec2-conformer": {
+    "display_name": "Facebook Wav2Vec2 Conformer",
+    "description": "Conformer variants of Wav2Vec2 for ASR."
+  },
+  "facebook_hubert": {
+    "display_name": "Facebook HuBERT",
+    "description": "HuBERT speech representation models fine-tuned for ASR."
+  },
+  "granite-speech": {
+    "display_name": "IBM Granite Speech",
+    "description": "Speech-language models with Granite LLM backbones."
+  },
+  "kyutai": {
+    "display_name": "Kyutai STT",
+    "description": "Streaming speech-to-text model."
+  },
+  "lite_asr": {
+    "display_name": "Lite ASR / EfficientSpeech",
+    "description": "Efficient Whisper-derived ASR variants tuned for speed or accuracy."
+  },
+  "moonshine": {
+    "display_name": "Moonshine",
+    "description": "Compact encoder-decoder ASR models optimized for small-footprint use."
+  },
+  "nvidia-nemo": {
+    "display_name": "NVIDIA NeMo ASR",
+    "description": "NeMo encoder-decoder and transducer ASR models."
+  },
+  "omnilingual": {
+    "display_name": "Facebook Omnilingual ASR",
+    "description": "Omnilingual CTC and LLM ASR variants."
+  },
+  "openai-whisper": {
+    "display_name": "OpenAI Whisper",
+    "description": "Whisper encoder-decoder models across multiple model sizes."
+  },
+  "paza": {
+    "display_name": "Paza by Microsoft Research Africa, Nairobi",
+    "description": "Paza ASR and speech-language models adapted for African-language evaluation."
+  },
+  "qwen2-audio": {
+    "display_name": "Qwen2 Audio",
+    "description": "Qwen2 Audio speech-language models."
+  },
+  "seamlessM4T": {
+    "display_name": "SeamlessM4T",
+    "description": "Meta SeamlessM4T multilingual speech-to-text models."
+  }
+}

src/data_processing.py

@@ -0,0 +1,496 @@
+"""
+Data loading, filtering, aggregation and metric computation for PazaBench.
+
+This module handles all data processing logic:
+- Loading ASR results from CSV (with HuggingFace Hub fallback)
+- Filtering dataframes by model, language, dataset, region
+- Aggregating results by language with proper RTFx computation
+- Building metric pivot tables and DataFrames
+"""
+
+from functools import lru_cache
+from pathlib import Path
+
+import pandas as pd
+from huggingface_hub import hf_hub_download
+
+from src.constants import (
+    ASR_DISPLAY_COLUMNS,
+    ASR_NUMERIC_COLUMNS,
+    ASR_TEXT_COLUMNS,
+    canonicalize_model_family,
+    DEFAULT_VIEW_MODE,
+    FILTER_COLUMN_ORDER,
+    LANGUAGE_NAME_MAPPING,
+    METRIC_CONFIGS,
+    RESULTS_CSV_FILENAME,
+    RESULTS_CSV_PATH,
+    VIEW_MODE_COLUMNS,
+)
+from src.display.styling import format_metric_value
+from src.envs import HF_ENABLED, RESULTS_REPO, TOKEN
+from src.language_metadata import get_language_regions
+
+
+REQUIRED_RESULTS_COLUMNS = [
+    "model_family",
+    "model",
+    "dataset_group",
+    "split",
+    "language",
+    "wer",
+    "cer",
+    "num_samples",
+]
+def _validate_results_schema(frame: pd.DataFrame) -> None:
+    """Validate required columns are present without blocking app startup."""
+    missing = [column for column in REQUIRED_RESULTS_COLUMNS if column not in frame.columns]
+    if missing:
+        raise ValueError(
+            "ASR results CSV is missing required columns: "
+            + ", ".join(sorted(missing))
+            + ". Re-run the aggregator and ensure new fields are mapped correctly."
+        )
+
+    # Normalize empty strings in text columns to NA (later filled as "Unknown").
+    for column in ASR_TEXT_COLUMNS:
+        if column in frame.columns:
+            frame[column] = frame[column].replace(r"^\s*$", pd.NA, regex=True)
+
+
+# =============================================================================
+# Data Loading
+# =============================================================================
+
+@lru_cache(maxsize=1)
+def _cached_asr_results(csv_path: str) -> pd.DataFrame:
+    """Load ASR results from HuggingFace Hub or fall back to local file."""
+    path = Path(csv_path)
+    
+    if HF_ENABLED and RESULTS_REPO:
+        try:
+            print(f"Downloading {RESULTS_CSV_FILENAME} from {RESULTS_REPO}...")
+            downloaded_path = hf_hub_download(
+                repo_id=RESULTS_REPO,
+                filename=RESULTS_CSV_FILENAME,
+                repo_type="dataset",
+                token=TOKEN,
+            )
+            path = Path(downloaded_path)
+            print(f"Successfully downloaded results from {RESULTS_REPO}")
+        except Exception as e:
+            print(f"Could not download from HuggingFace Hub: {e}")
+            print(f"Falling back to local file at {csv_path}")
+            path = Path(csv_path)
+    
+    if not path.exists():
+        raise FileNotFoundError(
+            f"ASR results CSV not found at {path}. "
+            "Please generate it via src.aggregate_results before launching the app."
+        )
+    
+    frame = pd.read_csv(path)
+
+    _validate_results_schema(frame)
+    
+    # Convert numeric columns
+    for column in ASR_NUMERIC_COLUMNS:
+        if column in frame.columns:
+            frame[column] = pd.to_numeric(frame[column], errors="coerce")
+    
+    # Fill missing text columns
+    for column in ASR_TEXT_COLUMNS:
+        if column in frame.columns:
+            frame[column] = frame[column].fillna("Unknown")
+
+    if "model_family" in frame.columns:
+        frame["model_family"] = frame["model_family"].map(canonicalize_model_family)
+    
+    # Normalize language names
+    if "language" in frame.columns:
+        frame["language"] = frame["language"].replace(LANGUAGE_NAME_MAPPING)
+    
+    # Filter out rows with very few samples
+    MIN_SAMPLES_THRESHOLD = 10
+    if "num_samples" in frame.columns:
+        frame = frame[frame["num_samples"] >= MIN_SAMPLES_THRESHOLD]
+    
+    # Add region metadata column
+    if "language" in frame.columns:
+        frame["african_region"] = frame["language"].apply(
+            lambda x: ", ".join(get_language_regions(x))
+        )
+    
+    return frame
+
+
+def load_asr_results(csv_path: Path = RESULTS_CSV_PATH) -> pd.DataFrame:
+    """Load ASR results DataFrame."""
+    return _cached_asr_results(str(csv_path))
+
+
+# =============================================================================
+# Filtering
+# =============================================================================
+
+def _sorted_column_values(frame: pd.DataFrame, column: str) -> list[str]:
+    """Get sorted unique values from a column, with 'Unknown' at the end."""
+    if column not in frame.columns or frame.empty:
+        return []
+    values = sorted({value for value in frame[column].dropna().unique() if value != "Unknown"})
+    if (frame[column] == "Unknown").any():
+        values.append("Unknown")
+    return values
+
+
+def get_filter_options(frame: pd.DataFrame) -> dict[str, list[str]]:
+    """Get all available filter options from the DataFrame."""
+    from src.about import get_dataset_group_label
+    from src.language_metadata import get_all_regions
+    
+    options = {column: _sorted_column_values(frame, column) for column in FILTER_COLUMN_ORDER}
+    options["dataset_group_labels"] = [
+        get_dataset_group_label(dg, frame) for dg in options.get("dataset_group", [])
+    ]
+    options["african_region"] = get_all_regions()
+    options["language_support"] = _sorted_column_values(frame, "language_support")
+    return options
+
+
+def get_languages_for_filters(
+    frame: pd.DataFrame,
+    african_regions: list[str] | None = None,
+) -> list[str]:
+    """Get languages that match the given region filter."""
+    from src.language_metadata import get_languages_by_region
+    
+    if not african_regions:
+        return _sorted_column_values(frame, "language")
+    
+    region_languages: set[str] = set()
+    for region in african_regions:
+        region_languages.update(get_languages_by_region(region))
+    
+    available_languages = set(_sorted_column_values(frame, "language"))
+    return sorted(region_languages & available_languages)
+
+
+def filter_asr_dataframe(
+    frame: pd.DataFrame,
+    *,
+    models: list[str] | None = None,
+    languages: list[str] | None = None,
+    dataset_groups: list[str] | None = None,
+    language_support: list[str] | None = None,
+    african_regions: list[str] | None = None,
+) -> pd.DataFrame:
+    """Filter the ASR results DataFrame by the given criteria."""
+    from src.language_metadata import get_languages_by_region
+    
+    filtered = frame.copy()
+    
+    if models:
+        filtered = filtered[filtered["model"].isin(models)]
+    if languages:
+        filtered = filtered[filtered["language"].isin(languages)]
+    if dataset_groups:
+        filtered = filtered[filtered["dataset_group"].isin(dataset_groups)]
+    if language_support and "language_support" in filtered.columns:
+        filtered = filtered[filtered["language_support"].isin(language_support)]
+    
+    # Apply region filter by getting languages for selected regions
+    if african_regions:
+        region_languages: set[str] = set()
+        for region in african_regions:
+            region_languages.update(get_languages_by_region(region))
+        if region_languages and "language" in filtered.columns:
+            filtered = filtered[filtered["language"].isin(region_languages)]
+    
+    return filtered
+
+
+def prepare_display_dataframe(
+    frame: pd.DataFrame, 
+    max_rows: int, 
+    include_split: bool = True
+) -> pd.DataFrame:
+    """Prepare a DataFrame for display with proper formatting."""
+    columns = [col for col in ASR_DISPLAY_COLUMNS if col in frame.columns]
+    if not include_split and "split" in columns:
+        columns = [col for col in columns if col != "split"]
+    
+    display = frame.loc[:, columns].copy()
+    
+    for column in ["wer", "cer", "rtfx"]:
+        if column in display.columns:
+            display[column] = display[column].round(3)
+    for column in ["duration_sec", "inference_time_sec"]:
+        if column in display.columns:
+            display[column] = display[column].round(2)
+    
+    display = display.head(max_rows)
+    display.insert(0, "", range(1, len(display) + 1))
+    return display
+
+
+# =============================================================================
+# Aggregation
+# =============================================================================
+
+def _join_unique_values(values: pd.Series) -> str | None:
+    """Join unique non-empty values from a Series."""
+    if values is None:
+        return None
+    unique_values = [str(v) for v in values.dropna().unique() if str(v).strip()]
+    return ", ".join(unique_values) if unique_values else None
+
+
+def _weighted_average(series: pd.Series, weights: pd.Series) -> float | None:
+    """Compute weighted average of a series."""
+    numeric = pd.to_numeric(series, errors="coerce").dropna()
+    if numeric.empty:
+        return None
+    aligned_weights = weights.loc[numeric.index].fillna(0).astype(float)
+    total_weight = aligned_weights.sum()
+    if total_weight <= 0:
+        return float(round(numeric.mean(), 4))
+    return float(round((numeric * aligned_weights).sum() / total_weight, 4))
+
+
+def _compute_rtfx_from_totals(
+    duration_series: pd.Series, 
+    inference_time_series: pd.Series
+) -> float | None:
+    """Compute RTFx as Total Audio Duration / Total Transcription Time."""
+    duration_numeric = pd.to_numeric(duration_series, errors="coerce").dropna()
+    inference_numeric = pd.to_numeric(inference_time_series, errors="coerce").dropna()
+    
+    common_index = duration_numeric.index.intersection(inference_numeric.index)
+    if common_index.empty:
+        return None
+    
+    total_duration = duration_numeric.loc[common_index].sum()
+    total_inference = inference_numeric.loc[common_index].sum()
+    
+    if total_inference <= 0:
+        return None
+    
+    return float(round(total_duration / total_inference, 4))
+
+
+def aggregate_by_language(frame: pd.DataFrame) -> pd.DataFrame:
+    """Aggregate results by model and language with proper metric computation."""
+    if frame.empty or "language" not in frame.columns:
+        return frame
+
+    group_keys = [col for col in ["model_family", "model", "language"] if col in frame.columns]
+    if not group_keys:
+        return frame
+
+    aggregated_rows: list[dict[str, object]] = []
+    for _, group in frame.groupby(group_keys, dropna=False):
+        weight_series = group["num_samples"] if "num_samples" in group.columns else pd.Series([1] * len(group))
+        weight_series = pd.to_numeric(weight_series, errors="coerce").fillna(0).astype(float)
+
+        # Compute RTFx: sum(duration) / sum(inference_time)
+        rtfx_value = None
+        if "duration_sec" in group.columns and "inference_time_sec" in group.columns:
+            rtfx_value = _compute_rtfx_from_totals(group["duration_sec"], group["inference_time_sec"])
+
+        # Sum durations and inference times
+        total_duration = None
+        total_inference = None
+        if "duration_sec" in group.columns:
+            duration_numeric = pd.to_numeric(group["duration_sec"], errors="coerce").dropna()
+            if not duration_numeric.empty:
+                total_duration = float(round(duration_numeric.sum(), 4))
+        if "inference_time_sec" in group.columns:
+            inference_numeric = pd.to_numeric(group["inference_time_sec"], errors="coerce").dropna()
+            if not inference_numeric.empty:
+                total_inference = float(round(inference_numeric.sum(), 4))
+
+        aggregated_rows.append({
+            "model_family": group.get("model_family", pd.Series([None])).iloc[0] if "model_family" in group else None,
+            "model": group.get("model", pd.Series([None])).iloc[0] if "model" in group else None,
+            "dataset_group": _join_unique_values(group["dataset_group"]) if "dataset_group" in group.columns else None,
+            "language": group.get("language", pd.Series([None])).iloc[0] if "language" in group else None,
+            "region": _join_unique_values(group["region"]) if "region" in group.columns else None,
+            "wer": _weighted_average(group["wer"], weight_series) if "wer" in group.columns else None,
+            "cer": _weighted_average(group["cer"], weight_series) if "cer" in group.columns else None,
+            "rtfx": rtfx_value,
+            "duration_sec": total_duration,
+            "inference_time_sec": total_inference,
+            "num_samples": int(weight_series.sum()) if weight_series.sum() > 0 else len(group),
+        })
+
+    return pd.DataFrame(aggregated_rows)
+
+
+# =============================================================================
+# Metric Tables
+# =============================================================================
+
+def _pivot_metric_table(aggregated: pd.DataFrame, metric: str, view_mode: str) -> pd.DataFrame:
+    """Create a pivot table for a specific metric."""
+    if aggregated.empty or metric not in aggregated.columns:
+        return pd.DataFrame()
+
+    column_key = VIEW_MODE_COLUMNS.get(view_mode, VIEW_MODE_COLUMNS[DEFAULT_VIEW_MODE])
+    if column_key not in aggregated.columns:
+        fallback = "model" if "model" in aggregated.columns else None
+        if fallback is None:
+            return pd.DataFrame()
+        column_key = fallback
+
+    pivot = (
+        aggregated
+        .pivot_table(index="language", columns=column_key, values=metric, aggfunc="median")
+        .sort_index()
+    )
+    pivot = pivot.dropna(how="all")
+    if pivot.empty:
+        return pivot
+
+    # Sort columns by performance
+    column_scores = pivot.mean(skipna=True)
+    ascending = METRIC_CONFIGS.get(metric, {}).get("better", "lower") == "lower"
+    ordered_columns = column_scores.sort_values(ascending=ascending).index.tolist()
+    
+    # Ensure all columns are included
+    missing = [col for col in pivot.columns if col not in ordered_columns]
+    ordered_columns.extend(missing)
+    
+    return pivot[ordered_columns]
+
+
+def _build_metric_table_html(pivot: pd.DataFrame, metric: str) -> str:
+    """Build HTML table for a metric pivot table."""
+    config = METRIC_CONFIGS[metric]
+    if pivot.empty:
+        return f"<p class='metric-table-empty'>No {config['label']} data available for the current filters.</p>"
+
+    header_cells = "".join(f"<th>{col}</th>" for col in pivot.columns)
+    rows_html: list[str] = []
+    
+    for i, (language, row) in enumerate(pivot.iterrows(), 1):
+        cell_html = []
+        for column in pivot.columns:
+            value = row[column]
+            display = format_metric_value(value, config["fmt"])
+            cell_html.append(f"<td>{display}</td>")
+        
+        onclick = (
+            "(function(el){var tr=el.parentElement;"
+            "var isHighlighted=tr.classList.contains('row-highlighted');"
+            "tr.parentElement.querySelectorAll('tr').forEach(function(r){"
+            "r.classList.remove('row-highlighted')});"
+            "if(!isHighlighted){tr.classList.add('row-highlighted')}})(this)"
+        )
+        rows_html.append(
+            f"<tr><td>{i}</td><th onclick=\"{onclick}\">{language}</th>{''.join(cell_html)}</tr>"
+        )
+
+    caption = f"<caption>Columns sorted by overall {config['label']} performance</caption>"
+    table_html = (
+        "<div class='metric-table-wrapper'>"
+        f"<table class='metric-table'>{caption}<thead><tr><th>#</th><th>Language</th>{header_cells}</tr></thead>"
+        f"<tbody>{''.join(rows_html)}</tbody></table></div>"
+    )
+    return table_html
+
+
+def _build_metric_dataframe(pivot: pd.DataFrame, metric: str) -> pd.DataFrame:
+    """Build a sortable DataFrame from the pivot table."""
+    if pivot.empty:
+        return pd.DataFrame()
+    
+    df = pivot.reset_index()
+    df = df.rename(columns={"language": "Language"})
+    
+    # Round numeric columns
+    for col in df.columns:
+        if col != "Language" and df[col].dtype in ['float64', 'float32']:
+            df[col] = df[col].round(2)
+    
+    df.insert(0, "", range(1, len(df) + 1))
+    return df
+
+
+def compute_metric_tables(
+    models: list[str] | None,
+    languages: list[str] | None,
+    dataset_groups: list[str] | None,
+    view_mode: str,
+    african_regions: list[str] | None = None,
+    language_support: list[str] | None = None,
+    asr_results_df: pd.DataFrame | None = None,
+) -> dict[str, str]:
+    """Compute HTML metric tables for all metrics."""
+    if asr_results_df is None or asr_results_df.empty:
+        return {metric: "<p class='metric-table-empty'>No ASR results loaded.</p>" for metric in METRIC_CONFIGS}
+
+    filtered = filter_asr_dataframe(
+        asr_results_df, 
+        models=models, 
+        languages=languages, 
+        dataset_groups=dataset_groups,
+        language_support=language_support,
+        african_regions=african_regions,
+    )
+    aggregated = aggregate_by_language(filtered)
+
+    tables: dict[str, str] = {}
+    for metric in METRIC_CONFIGS:
+        pivot = _pivot_metric_table(aggregated, metric, view_mode)
+        tables[metric] = _build_metric_table_html(pivot, metric)
+    return tables
+
+
+def compute_metric_dataframes(
+    models: list[str] | None,
+    languages: list[str] | None,
+    dataset_groups: list[str] | None,
+    view_mode: str,
+    african_regions: list[str] | None = None,
+    language_support: list[str] | None = None,
+    asr_results_df: pd.DataFrame | None = None,
+) -> dict[str, pd.DataFrame]:
+    """Compute metric DataFrames for interactive sorting."""
+    if asr_results_df is None or asr_results_df.empty:
+        return {metric: pd.DataFrame() for metric in METRIC_CONFIGS}
+
+    filtered = filter_asr_dataframe(
+        asr_results_df, 
+        models=models, 
+        languages=languages, 
+        dataset_groups=dataset_groups,
+        language_support=language_support,
+        african_regions=african_regions,
+    )
+    aggregated = aggregate_by_language(filtered)
+
+    dataframes: dict[str, pd.DataFrame] = {}
+    for metric in METRIC_CONFIGS:
+        pivot = _pivot_metric_table(aggregated, metric, view_mode)
+        dataframes[metric] = _build_metric_dataframe(pivot, metric)
+    return dataframes
+
+
+# =============================================================================
+# Helper Functions
+# =============================================================================
+
+def strip_dataset_label(label: str) -> str:
+    """Strip descriptor from dataset label.
+    E.g., 'ALFFA (read speech & broadcast news, 3 languages)' -> 'ALFFA'
+    """
+    if " (" in label:
+        return label.split(" (")[0]
+    return label
+
+
+def strip_dataset_labels(labels: list[str] | None) -> list[str]:
+    """Strip descriptors from a list of dataset labels."""
+    if not labels:
+        return []
+    return [strip_dataset_label(label) for label in labels]

src/display/css_html_js.py

@@ -0,0 +1,2205 @@
+custom_css = """
+
+/* ===== FORCE LIGHT MODE ===== */
+/* Override Gradio's dark mode completely - this app is light mode only */
+:root, html, body, .gradio-container, .dark, body.dark, html.dark {
+    --body-background-fill: white !important;
+    --background-fill-primary: white !important;
+    --background-fill-secondary: #f9fafb !important;
+    --body-text-color: #1f2937 !important;
+    --body-text-color-subdued: #6b7280 !important;
+    --block-background-fill: white !important;
+    --block-border-color: #e5e7eb !important;
+    --block-label-background-fill: #f3f4f6 !important;
+    --block-label-text-color: #374151 !important;
+    --block-title-text-color: #111827 !important;
+    --input-background-fill: white !important;
+    --input-border-color: #d1d5db !important;
+    --table-even-background-fill: #f9fafb !important;
+    --table-odd-background-fill: white !important;
+    --table-row-focus: #e0f2fe !important;
+    --table-border-color: #e5e7eb !important;
+    --border-color-primary: #e5e7eb !important;
+    --border-color-accent: #8CD0FF !important;
+    --color-accent: #8CD0FF !important;
+    --neutral-50: #f9fafb !important;
+    --neutral-100: #f3f4f6 !important;
+    --neutral-200: #e5e7eb !important;
+    --neutral-300: #d1d5db !important;
+    --neutral-400: #9ca3af !important;
+    --neutral-500: #6b7280 !important;
+    --neutral-600: #4b5563 !important;
+    --neutral-700: #374151 !important;
+    --neutral-800: #1f2937 !important;
+    --neutral-900: #111827 !important;
+    --neutral-950: #030712 !important;
+}
+
+/* Apply light mode background to main containers only, exclude Plotly */
+html, body, .gradio-container {
+    background: white !important;
+    color: #1f2937 !important;
+}
+
+/* Force light mode on Gradio table components (not Plotly) */
+.dark .svelte-table, body.dark .svelte-table,
+.dark [data-testid="dataframe"], body.dark [data-testid="dataframe"],
+.table-wrap:not(.js-plotly-plot *), 
+.dataframe:not(.js-plotly-plot *) {
+    background: white !important;
+    color: #1f2937 !important;
+}
+
+/* Target Gradio tables specifically, exclude Plotly SVG tables */
+.gradio-container table:not(.js-plotly-plot table),
+.dark .gradio-container table:not(.js-plotly-plot table) {
+    background: white !important;
+    color: #1f2937 !important;
+}
+
+.gradio-container th:not(.js-plotly-plot th),
+.gradio-container td:not(.js-plotly-plot td),
+.dark .gradio-container th:not(.js-plotly-plot th),
+.dark .gradio-container td:not(.js-plotly-plot td) {
+    background-color: inherit !important;
+    color: #1f2937 !important;
+    border-color: #e5e7eb !important;
+}
+
+.gradio-container thead:not(.js-plotly-plot thead),
+.dark .gradio-container thead:not(.js-plotly-plot thead) {
+    background: #f8fafc !important;
+}
+
+.gradio-container tbody tr:nth-child(even):not(.js-plotly-plot tr),
+.dark .gradio-container tbody tr:nth-child(even):not(.js-plotly-plot tr) {
+    background: #f9fafb !important;
+}
+
+.gradio-container tbody tr:nth-child(odd):not(.js-plotly-plot tr),
+.dark .gradio-container tbody tr:nth-child(odd):not(.js-plotly-plot tr) {
+    background: white !important;
+}
+
+/* Override prefers-color-scheme dark for main elements */
+@media (prefers-color-scheme: dark) {
+    :root, html, body, .gradio-container {
+        --body-background-fill: white !important;
+        --background-fill-primary: white !important;
+        --body-text-color: #1f2937 !important;
+        background: white !important;
+        color: #1f2937 !important;
+    }
+}
+
+/* Ensure Plotly charts render correctly - DO NOT override their styles */
+.js-plotly-plot, .js-plotly-plot *, 
+.plotly, .plotly *,
+.js-plotly-plot svg, .js-plotly-plot svg * {
+    background: unset !important;
+    background-color: unset !important;
+}
+
+/* Reset Plotly container backgrounds */
+.js-plotly-plot .plotly .main-svg,
+.js-plotly-plot .plotly .bg {
+    fill: white !important;
+}
+
+/* Microsoft-style font family - using system fonts with proper bold weights */
+/* Note: Segoe UI from cdnfonts may not have all weights, rely on system fallbacks */
+
+/* Apply font globally */
+.gradio-container,
+.gradio-container *,
+body {
+    font-family: 'Segoe UI', system-ui, -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif;
+}
+
+/* Bold text weights */
+b, strong,
+.gradio-container b,
+.gradio-container strong,
+.prose b,
+.prose strong,
+.md b,
+.md strong,
+.markdown-code b,
+.markdown-code strong,
+[class*="markdown"] b,
+[class*="markdown"] strong,
+p b, p strong,
+span b, span strong,
+div b, div strong {
+    font-weight: 600 !important;
+}
+
+/* Banner image styling */
+#banner-image {
+    width: 100%;
+    margin-bottom: 1rem;
+}
+
+#banner-image img {
+    width: 100%;
+    height: auto;
+    object-fit: contain;
+    border-radius: 8px;
+}
+
+/* Custom metric table variables (light mode only) */
+:root {
+    --metric-table-bg: #ffffff;
+    --metric-table-border: #d3d3d3;
+    --metric-table-header-bg: #f8fafc;
+    --metric-table-header-color: #0f172a;
+    --metric-table-row-header-bg: #f2f5f9;
+    --metric-table-caption: #666666;
+    --metric-table-empty-color: #777777;
+    --metric-table-row-highlight: #DDF1FF;
+}
+
+/* ===== GLOBAL TEXT SELECTION FIX ===== */
+/* Fix text selection highlight for better contrast in dark mode */
+::selection {
+    background-color: rgba(140, 208, 255, 0.4) !important;
+    color: inherit !important;
+}
+
+::-moz-selection {
+    background-color: rgba(140, 208, 255, 0.4) !important;
+    color: inherit !important;
+}
+
+/* PazaBench brand color for buttons */
+button.primary {
+    background-color: #8CD0FF !important;
+    border-color: #8CD0FF !important;
+    color: #0f172a !important;
+}
+
+button.primary:hover {
+    background-color: #6bc0f5 !important;
+    border-color: #6bc0f5 !important;
+    color: #0f172a !important;
+}
+
+/* WCAG 4.1.2 Fix: Make buttons inside aria-hidden containers non-interactive */
+/* Neutralize focusable buttons in aria-hidden containers */
+.visually-hidden[aria-hidden="true"] button,
+[aria-hidden="true"] .tab-container button,
+.tab-container.visually-hidden[aria-hidden="true"] button,
+div[aria-hidden="true"] button {
+    pointer-events: none !important;
+    visibility: hidden !important;
+}
+
+/* Link color + markdown table styling */
+a {
+    text-decoration: none;
+    color: #464feb;
+}
+/* Change Log cards: remove link horizontal padding */
+.changelog-cards a {
+    padding-left: 0;
+    padding-right: 0;
+}
+.markdown-text table th,
+.markdown-text table td {
+    border: 1px solid #e6e6e6;
+}
+.markdown-text table th {
+    background-color: #f5f5f5;
+}
+
+/* Scroll the tall Sample Distribution chart inside a fixed-height container. */
+#language-coverage-plot {
+    max-height: 640px !important;
+    overflow-y: auto !important;
+    overflow-x: hidden !important;
+}
+
+/* Hide the Plotly logo ("Produced with Plotly") from every chart's modebar. */
+.js-plotly-plot .modebar-btn--logo,
+.js-plotly-plot a[data-title="Produced with Plotly"] {
+    display: none !important;
+}
+
+/* Typography hierarchy */
+.markdown-text {
+    font-size: 16px !important;
+    line-height: 1.6 !important;
+}
+
+/* ===== FILTER & CUSTOMIZE ACCORDION STYLING ===== */
+/* Match accordion text size to 15px */
+#filter-customize-accordion .label-wrap span,
+#filter-customize-accordion .label-wrap .open-button,
+#filter-customize-accordion > div > button span {
+    font-size: 15px !important;
+    font-weight: 400 !important;  /* Regular, not bold */
+}
+
+/* ===== EXPLAINER TEXT STYLING ===== */
+/* Reduce font size for 'Compare models at a glance' to 15px */
+.explainer-text,
+.explainer-text h3,
+.explainer-text p {
+    font-size: 15px !important;
+    line-height: 1.5 !important;
+}
+
+/* ===== LEADERBOARD TABLE ROW NUMBER COLUMN ===== */
+/* Make row number column (first column with empty header) narrow and regular weight */
+#wer-leaderboard-table th:first-child,
+#cer-leaderboard-table th:first-child,
+#rtfx-leaderboard-table th:first-child {
+    width: 40px !important;
+    min-width: 40px !important;
+    max-width: 60px !important;
+    font-weight: 400 !important;
+}
+
+#wer-leaderboard-table td:first-child,
+#cer-leaderboard-table td:first-child,
+#rtfx-leaderboard-table td:first-child {
+    width: 40px !important;
+    min-width: 40px !important;
+    max-width: 60px !important;
+    font-weight: 400 !important;  /* Regular, not bold */
+    text-align: center;
+}
+
+/* ===== LANGUAGE COLUMN BACKGROUND COLOR ===== */
+/* Make language column (second column) have a light blue background for differentiation */
+#wer-leaderboard-table th:nth-child(2),
+#cer-leaderboard-table th:nth-child(2),
+#rtfx-leaderboard-table th:nth-child(2) {
+    background-color: #EEF8FF !important;
+}
+
+#wer-leaderboard-table td:nth-child(2),
+#cer-leaderboard-table td:nth-child(2),
+#rtfx-leaderboard-table td:nth-child(2) {
+    background-color: #EEF8FF !important;
+}
+
+/* Dark mode language column - slightly muted blue */
+body.dark #wer-leaderboard-table th:nth-child(2),
+body.dark #cer-leaderboard-table th:nth-child(2),
+body.dark #rtfx-leaderboard-table th:nth-child(2),
+body.dark #wer-leaderboard-table td:nth-child(2),
+body.dark #cer-leaderboard-table td:nth-child(2),
+body.dark #rtfx-leaderboard-table td:nth-child(2),
+[data-theme="dark"] #wer-leaderboard-table th:nth-child(2),
+[data-theme="dark"] #cer-leaderboard-table th:nth-child(2),
+[data-theme="dark"] #rtfx-leaderboard-table th:nth-child(2),
+[data-theme="dark"] #wer-leaderboard-table td:nth-child(2),
+[data-theme="dark"] #cer-leaderboard-table td:nth-child(2),
+[data-theme="dark"] #rtfx-leaderboard-table td:nth-child(2) {
+    background-color: rgba(140, 208, 255, 0.3) !important;
+}
+
+/* ===== HIDE GRADIO DATAFRAME CONTEXT MENU ===== */
+/* Hide the right-click context menu (filter option) as it has no function */
+.cell-menu,
+.context-menu,
+[data-testid="dataframe"] .cell-menu,
+[data-testid="dataframe"] .context-menu,
+.table-wrap .cell-menu,
+.table-wrap .context-menu,
+.svelte-virtual-table-viewport .cell-menu,
+.svelte-virtual-table-viewport .context-menu,
+#wer-leaderboard-table .cell-menu,
+#cer-leaderboard-table .cell-menu,
+#rtfx-leaderboard-table .cell-menu,
+#wer-leaderboard-table .context-menu,
+#cer-leaderboard-table .context-menu,
+#rtfx-leaderboard-table .context-menu {
+    display: none !important;
+    visibility: hidden !important;
+    pointer-events: none !important;
+}
+
+/* Metric direction notes styling */
+.metric-note {
+    font-size: 14px !important;
+    color: #666 !important;
+    margin-bottom: 8px !important;
+    padding: 8px 12px !important;
+    background-color: #f8f9fa !important;
+    border-left: 3px solid #8CD0FF !important;
+    border-radius: 4px !important;
+}
+
+/* Remove nested styling from markdown content inside metric-note */
+.metric-note p,
+.metric-note .prose p,
+.metric-note .prose,
+.metric-note > div,
+.metric-note .markdown-code,
+.metric-note .md {
+    margin: 0 !important;
+    padding: 0 !important;
+    background: transparent !important;
+    border: none !important;
+}
+
+#models-to-add-text {
+    font-size: 18px !important;
+}
+
+#citation-button span {
+    font-size: 16px !important;
+}
+
+#citation-button textarea {
+    font-size: 16px !important;
+}
+
+#citation-button > label > button {
+    margin: 6px;
+    transform: scale(1.3);
+}
+
+#leaderboard-table {
+    margin-top: 15px
+}
+
+#leaderboard-table-lite {
+    margin-top: 15px
+}
+
+/* Sortable Dataframe Leaderboard Styles */
+#wer-leaderboard-table,
+#cer-leaderboard-table,
+#rtfx-leaderboard-table {
+    margin-top: 15px;
+}
+
+#wer-leaderboard-table table,
+#cer-leaderboard-table table,
+#rtfx-leaderboard-table table {
+    font-size: 14px;
+}
+
+/* ===== COLUMN SIZING ===== */
+/* Headers styling */
+#wer-leaderboard-table th,
+#cer-leaderboard-table th,
+#rtfx-leaderboard-table th {
+    position: relative;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    min-width: 70px;  /* Ensure short model names like "paza" are not truncated */
+}
+
+/* Resize handle on right edge of headers */
+#wer-leaderboard-table th .col-resize-handle,
+#cer-leaderboard-table th .col-resize-handle,
+#rtfx-leaderboard-table th .col-resize-handle {
+    position: absolute;
+    right: 0;
+    top: 0;
+    bottom: 0;
+    width: 5px;
+    cursor: col-resize;
+    background: transparent;
+    z-index: 10;
+}
+
+#wer-leaderboard-table th .col-resize-handle:hover,
+#cer-leaderboard-table th .col-resize-handle:hover,
+#rtfx-leaderboard-table th .col-resize-handle:hover,
+#wer-leaderboard-table th .col-resize-handle.resizing,
+#cer-leaderboard-table th .col-resize-handle.resizing,
+#rtfx-leaderboard-table th .col-resize-handle.resizing {
+    background: #8CD0FF;
+}
+
+/* Cell content handling */
+#wer-leaderboard-table td,
+#cer-leaderboard-table td,
+#rtfx-leaderboard-table td {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+/* Show full content on hover via tooltip */
+#wer-leaderboard-table td[title],
+#cer-leaderboard-table td[title],
+#rtfx-leaderboard-table td[title],
+#wer-leaderboard-table th[title],
+#cer-leaderboard-table th[title],
+#rtfx-leaderboard-table th[title] {
+    cursor: help;
+}
+
+/* Make column headers look clickable for sorting */
+#wer-leaderboard-table th,
+#cer-leaderboard-table th,
+#rtfx-leaderboard-table th {
+    cursor: pointer;
+    user-select: none;
+    transition: background-color 0.2s ease;
+    font-weight: 600;
+}
+
+/* Force header font size to 15px - must target all descendants due to Gradio 6 Svelte component nesting */
+#wer-leaderboard-table th,
+#wer-leaderboard-table th *,
+#cer-leaderboard-table th,
+#cer-leaderboard-table th *,
+#rtfx-leaderboard-table th,
+#rtfx-leaderboard-table th * {
+    font-size: 15px !important;
+}
+
+#wer-leaderboard-table th:hover,
+#cer-leaderboard-table th:hover,
+#rtfx-leaderboard-table th:hover {
+    background-color: transparent !important;
+    text-decoration: underline;
+}
+
+/* ===== LEADERBOARD TABLE HEADER SELECTION FIX ===== */
+/* Remove focus/selection highlight from leaderboard table headers */
+/* Keep only sort arrows visible, remove the box-shadow ring */
+#wer-leaderboard-table th.focus,
+#cer-leaderboard-table th.focus,
+#rtfx-leaderboard-table th.focus,
+#wer-leaderboard-table th:focus,
+#cer-leaderboard-table th:focus,
+#rtfx-leaderboard-table th:focus,
+#wer-leaderboard-table th.sorted,
+#cer-leaderboard-table th.sorted,
+#rtfx-leaderboard-table th.sorted {
+    --ring-color: transparent !important;
+    box-shadow: none !important;
+    outline: none !important;
+    background-color: transparent !important;
+}
+
+/* Dark mode specific for leaderboard tables */
+body.dark #wer-leaderboard-table th.focus,
+body.dark #cer-leaderboard-table th.focus,
+body.dark #rtfx-leaderboard-table th.focus,
+body.dark #wer-leaderboard-table th:focus,
+body.dark #cer-leaderboard-table th:focus,
+body.dark #rtfx-leaderboard-table th:focus,
+body.dark #wer-leaderboard-table th.sorted,
+body.dark #cer-leaderboard-table th.sorted,
+body.dark #rtfx-leaderboard-table th.sorted,
+[data-theme="dark"] #wer-leaderboard-table th.focus,
+[data-theme="dark"] #cer-leaderboard-table th.focus,
+[data-theme="dark"] #rtfx-leaderboard-table th.focus,
+[data-theme="dark"] #wer-leaderboard-table th:focus,
+[data-theme="dark"] #cer-leaderboard-table th:focus,
+[data-theme="dark"] #rtfx-leaderboard-table th:focus,
+[data-theme="dark"] #wer-leaderboard-table th.sorted,
+[data-theme="dark"] #cer-leaderboard-table th.sorted,
+[data-theme="dark"] #rtfx-leaderboard-table th.sorted {
+    --ring-color: transparent !important;
+    box-shadow: none !important;
+    outline: none !important;
+    background-color: transparent !important;
+}
+
+/* Remove selection highlight from internal header elements */
+#wer-leaderboard-table th .cell-wrap,
+#cer-leaderboard-table th .cell-wrap,
+#rtfx-leaderboard-table th .cell-wrap,
+#wer-leaderboard-table th .header-button,
+#cer-leaderboard-table th .header-button,
+#rtfx-leaderboard-table th .header-button {
+    background-color: transparent !important;
+    box-shadow: none !important;
+    outline: none !important;
+}
+
+body.dark #wer-leaderboard-table th .cell-wrap,
+body.dark #cer-leaderboard-table th .cell-wrap,
+body.dark #rtfx-leaderboard-table th .cell-wrap,
+body.dark #wer-leaderboard-table th .header-button,
+body.dark #cer-leaderboard-table th .header-button,
+body.dark #rtfx-leaderboard-table th .header-button,
+[data-theme="dark"] #wer-leaderboard-table th .cell-wrap,
+[data-theme="dark"] #cer-leaderboard-table th .cell-wrap,
+[data-theme="dark"] #rtfx-leaderboard-table th .cell-wrap,
+[data-theme="dark"] #wer-leaderboard-table th .header-button,
+[data-theme="dark"] #cer-leaderboard-table th .header-button,
+[data-theme="dark"] #rtfx-leaderboard-table th .header-button {
+    background-color: transparent !important;
+    box-shadow: none !important;
+    outline: none !important;
+}
+
+/* Language column styling (first column after index) */
+#wer-leaderboard-table td:first-child,
+#cer-leaderboard-table td:first-child,
+#rtfx-leaderboard-table td:first-child {
+    font-weight: 600;
+    position: sticky;
+    left: 0;
+    background-color: var(--metric-table-row-header-bg);
+    z-index: 1;
+}
+
+/* Make # and Language columns look clickable for row-level sorting */
+#wer-leaderboard-table td:nth-child(1),
+#wer-leaderboard-table td:nth-child(2),
+#cer-leaderboard-table td:nth-child(1),
+#cer-leaderboard-table td:nth-child(2),
+#rtfx-leaderboard-table td:nth-child(1),
+#rtfx-leaderboard-table td:nth-child(2) {
+    cursor: pointer;
+    transition: background-color 0.2s ease, color 0.2s ease;
+    position: relative;
+}
+
+/* Row sort button styling */
+.row-sort-btn {
+    display: inline-block;
+    margin-left: 4px;
+    font-size: 10px;
+    opacity: 0.4;
+    cursor: pointer;
+    vertical-align: middle;
+}
+
+#wer-leaderboard-table td:nth-child(2):hover .row-sort-btn,
+#cer-leaderboard-table td:nth-child(2):hover .row-sort-btn,
+#rtfx-leaderboard-table td:nth-child(2):hover .row-sort-btn {
+    opacity: 0.8;
+}
+
+#wer-leaderboard-table td:nth-child(1):hover,
+#wer-leaderboard-table td:nth-child(2):hover,
+#cer-leaderboard-table td:nth-child(1):hover,
+#cer-leaderboard-table td:nth-child(2):hover,
+#rtfx-leaderboard-table td:nth-child(1):hover,
+#rtfx-leaderboard-table td:nth-child(2):hover {
+    background-color: rgba(140, 208, 255, 0.2) !important;
+    text-decoration: underline;
+    color: #0066cc !important;
+}
+
+#search-bar-table-box > div:first-child {
+    background: none;
+    border: none;
+}
+ 
+#search-bar {
+    padding: 0px;
+}
+
+/* Limit the width of the first AutoEvalColumn so that names don't expand too much */
+#leaderboard-table td:nth-child(2),
+#leaderboard-table th:nth-child(2) {
+    max-width: 400px;
+    overflow: auto;
+    white-space: nowrap;
+}
+
+.tab-buttons button {
+    font-size: 20px;
+}
+
+/* PazaBench brand color for active tabs */
+.tab-buttons button.selected,
+.tabs button.selected,
+button.tab-nav.selected,
+[role="tab"][aria-selected="true"],
+.tab-nav.selected {
+    background-color: #DDF1FF !important;
+    border-color: #8CD0FF !important;
+    color: #0f172a !important;
+}
+
+/* Subtle hover state for tabs - light mode */
+.tab-buttons button:hover,
+.tabs button:hover,
+button.tab-nav:hover,
+[role="tab"]:hover {
+    background-color: #DDF1FF !important;
+}
+
+/* ===== DARK MODE TAB HOVER FIX ===== */
+/* Make tab hover transparent in dark mode to prevent text obscuring */
+body.dark .tab-buttons button:hover,
+body.dark .tabs button:hover,
+body.dark button.tab-nav:hover,
+body.dark [role="tab"]:hover,
+[data-theme="dark"] .tab-buttons button:hover,
+[data-theme="dark"] .tabs button:hover,
+[data-theme="dark"] button.tab-nav:hover,
+[data-theme="dark"] [role="tab"]:hover,
+.dark .tab-buttons button:hover,
+.dark .tabs button:hover,
+.dark button.tab-nav:hover,
+.dark [role="tab"]:hover {
+    background-color: transparent !important;
+    text-decoration: underline;
+}
+
+/* Dark mode active tab - ensure text is visible */
+body.dark .tab-buttons button.selected,
+body.dark .tabs button.selected,
+body.dark button.tab-nav.selected,
+body.dark [role="tab"][aria-selected="true"],
+[data-theme="dark"] .tab-buttons button.selected,
+[data-theme="dark"] .tabs button.selected,
+[data-theme="dark"] button.tab-nav.selected,
+[data-theme="dark"] [role="tab"][aria-selected="true"],
+.dark .tab-buttons button.selected,
+.dark .tabs button.selected,
+.dark button.tab-nav.selected,
+.dark [role="tab"][aria-selected="true"] {
+    background-color: rgba(140, 208, 255, 0.2) !important;
+    border-color: #8CD0FF !important;
+    color: #e5e7eb !important;
+}
+
+/* Prevent text selection on tabs */
+.tab-buttons button,
+.tabs button,
+button.tab-nav,
+[role="tab"] {
+    -webkit-user-select: none !important;
+    -moz-user-select: none !important;
+    -ms-user-select: none !important;
+    user-select: none !important;
+}
+
+/* Override Gradio's default orange accent colors with PazaBench blue */
+/* Tab underline/border colors */
+.tabs .tab-nav::after,
+.tab-buttons button::after,
+button.tab-nav::after,
+[role="tab"]::after {
+    background-color: #8CD0FF !important;
+}
+
+.tabs .tab-nav.selected::after,
+.tab-buttons button.selected::after,
+button.tab-nav.selected::after,
+[role="tab"][aria-selected="true"]::after {
+    background-color: #8CD0FF !important;
+}
+
+/* Gradio dataframe selected cell borders */
+.table-wrap td.focus,
+.table-wrap th.focus,
+table td:focus,
+table th:focus,
+.dataframe td.selected,
+.dataframe th.selected,
+.svelte-table td.focus,
+.svelte-table th.focus,
+[data-testid="dataframe"] td.selected,
+[data-testid="dataframe"] th.selected {
+    outline-color: #8CD0FF !important;
+    border-color: #8CD0FF !important;
+    box-shadow: 0 0 0 2px #8CD0FF !important;
+}
+
+/* Override orange focus rings and borders globally */
+*:focus {
+    outline-color: #8CD0FF !important;
+}
+
+input:focus,
+textarea:focus,
+select:focus,
+button:focus {
+    border-color: #8CD0FF !important;
+    box-shadow: 0 0 0 2px rgba(140, 208, 255, 0.3) !important;
+}
+
+/* Gradio specific accent color overrides */
+.gradio-container {
+    --color-accent: #8CD0FF !important;
+    --color-accent-soft: #DDF1FF !important;
+    /* Radio and Checkbox - only style the indicator dot, not the label background */
+    --checkbox-label-background-fill-selected: transparent !important;
+    --checkbox-background-color-selected: #8CD0FF !important;
+    --checkbox-border-color-selected: #8CD0FF !important;
+    --slider-color: #8CD0FF !important;
+    /* Primary button colors */
+    --primary-50: #DDF1FF !important;
+    --primary-100: #c5e7ff !important;
+    --primary-200: #aeddff !important;
+    --primary-300: #8CD0FF !important;
+    --primary-400: #6bc0f5 !important;
+    --primary-500: #4ab0eb !important;
+    --primary-600: #29a0e1 !important;
+    --primary-700: #0890d7 !important;
+}
+
+/* Dark mode accent colors */
+body.dark .gradio-container,
+[data-theme="dark"] .gradio-container {
+    --color-accent: #8CD0FF !important;
+    --color-accent-soft: #1e3a5f !important;
+    /* Radio and Checkbox - only style the indicator dot, not the label background */
+    --checkbox-label-background-fill-selected: transparent !important;
+    --checkbox-background-color-selected: #8CD0FF !important;
+    --checkbox-border-color-selected: #8CD0FF !important;
+    --slider-color: #8CD0FF !important;
+}
+
+/* ===== LOADING/PROGRESS BAR FIX FOR DARK MODE ===== */
+/* Make loading indicator more subtle/transparent */
+.progress-bar,
+.eta-bar,
+[class*="progress"],
+[class*="loader"],
+[class*="loading"],
+.wrap.svelte-j1gjts,
+.wrap.svelte-j1gjts .progress-bar {
+    background-color: transparent !important;
+}
+
+/* Gradio's internal progress/loading indicators */
+body.dark .progress-bar,
+body.dark .eta-bar,
+body.dark [class*="progress"],
+[data-theme="dark"] .progress-bar,
+[data-theme="dark"] .eta-bar,
+[data-theme="dark"] [class*="progress"],
+.dark .progress-bar,
+.dark .eta-bar,
+.dark [class*="progress"] {
+    background-color: transparent !important;
+}
+
+/* ===== ACCORDION HOVER FIX FOR DARK MODE ===== */
+/* Fix accordion text highlight/selection obscuring text in dark mode */
+/* Target accordion header button hover states - using actual Gradio class names */
+.label-wrap:hover,
+button.label-wrap:hover {
+    background-color: transparent !important;
+    -webkit-user-select: none !important;
+    -moz-user-select: none !important;
+    -ms-user-select: none !important;
+    user-select: none !important;
+}
+
+/* Dark mode specific accordion hover fix */
+body.dark .label-wrap:hover,
+body.dark button.label-wrap:hover,
+[data-theme="dark"] .label-wrap:hover,
+[data-theme="dark"] button.label-wrap:hover,
+.dark .label-wrap:hover,
+.dark button.label-wrap:hover {
+    background-color: transparent !important;
+    -webkit-user-select: none !important;
+    user-select: none !important;
+}
+
+/* Prevent text selection highlight on accordion labels */
+.label-wrap::selection,
+.label-wrap *::selection,
+button.label-wrap::selection,
+button.label-wrap *::selection {
+    background-color: transparent !important;
+}
+
+body.dark .label-wrap::selection,
+body.dark .label-wrap *::selection,
+[data-theme="dark"] .label-wrap::selection,
+[data-theme="dark"] .label-wrap *::selection,
+.dark .label-wrap::selection,
+.dark .label-wrap *::selection {
+    background-color: transparent !important;
+}
+
+/* ===== DATAFRAME/TABLE HEADER HOVER FIX FOR DARK MODE ===== */
+/* Fix table header hover states obscuring text */
+body.dark table th:hover,
+body.dark [data-testid="dataframe"] th:hover,
+body.dark .table-wrap th:hover,
+body.dark .svelte-table th:hover,
+[data-theme="dark"] table th:hover,
+[data-theme="dark"] [data-testid="dataframe"] th:hover,
+[data-theme="dark"] .table-wrap th:hover,
+[data-theme="dark"] .svelte-table th:hover,
+.dark table th:hover,
+.dark [data-testid="dataframe"] th:hover,
+.dark .table-wrap th:hover,
+.dark .svelte-table th:hover {
+    background-color: transparent !important;
+    -webkit-user-select: none !important;
+    user-select: none !important;
+}
+
+/* More comprehensive table header fix - catch Gradio's generated classes */
+body.dark th,
+body.dark thead th,
+body.dark .header,
+body.dark [class*="header"],
+body.dark th[role="columnheader"],
+[data-theme="dark"] th,
+[data-theme="dark"] thead th,
+[data-theme="dark"] .header,
+[data-theme="dark"] [class*="header"],
+[data-theme="dark"] th[role="columnheader"],
+.dark th,
+.dark thead th,
+.dark .header,
+.dark [class*="header"],
+.dark th[role="columnheader"] {
+    -webkit-user-select: none !important;
+    -moz-user-select: none !important;
+    user-select: none !important;
+}
+
+body.dark th:hover,
+body.dark thead th:hover,
+body.dark th[role="columnheader"]:hover,
+[data-theme="dark"] th:hover,
+[data-theme="dark"] thead th:hover,
+[data-theme="dark"] th[role="columnheader"]:hover,
+.dark th:hover,
+.dark thead th:hover,
+.dark th[role="columnheader"]:hover {
+    background-color: transparent !important;
+    text-decoration: underline;
+}
+
+/* Prevent text selection on table headers */
+th::selection,
+th *::selection,
+thead::selection,
+thead *::selection {
+    background-color: transparent !important;
+}
+
+/* ===== GRADIO DATAFRAME HEADER SELECTION/FOCUS FIX ===== */
+/* Remove the blue highlight ring from selected/focused column headers in dark mode */
+/* Gradio uses .focus class and --ring-color variable for header selection state */
+body.dark th.focus,
+body.dark thead th.focus,
+body.dark .table-wrap th.focus,
+body.dark [data-testid="dataframe"] th.focus,
+[data-theme="dark"] th.focus,
+[data-theme="dark"] thead th.focus,
+[data-theme="dark"] .table-wrap th.focus,
+[data-theme="dark"] [data-testid="dataframe"] th.focus,
+.dark th.focus,
+.dark thead th.focus,
+.dark .table-wrap th.focus,
+.dark [data-testid="dataframe"] th.focus {
+    --ring-color: transparent !important;
+    box-shadow: none !important;
+    outline: none !important;
+}
+
+/* Also handle selected header state */
+body.dark th.selected,
+body.dark thead th.selected,
+body.dark th[aria-selected="true"],
+[data-theme="dark"] th.selected,
+[data-theme="dark"] thead th.selected,
+[data-theme="dark"] th[aria-selected="true"],
+.dark th.selected,
+.dark thead th.selected,
+.dark th[aria-selected="true"] {
+    --ring-color: transparent !important;
+    box-shadow: none !important;
+    outline: none !important;
+    background-color: transparent !important;
+}
+
+/* Header focus state */
+th.focus,
+thead th.focus,
+.table-wrap th.focus,
+[data-testid="dataframe"] th.focus {
+    --ring-color: transparent !important;
+    box-shadow: none !important;
+    outline: none !important;
+}
+
+th.selected,
+thead th.selected,
+th[aria-selected="true"] {
+    --ring-color: transparent !important;
+    box-shadow: none !important;
+    outline: none !important;
+}
+
+/* ===== KEEP SORT ARROWS VISIBLE ===== */
+/* Ensure sort arrows (SortArrowUp/SortArrowDown) remain visible */
+/* Sort indicators container in Gradio dataframe header */
+.sort-indicators,
+.table-wrap .sort-indicators,
+[data-testid="dataframe"] .sort-indicators,
+th .sort-indicators {
+    display: flex !important;
+    visibility: visible !important;
+    opacity: 1 !important;
+}
+
+/* Sort arrow icons */
+.sort-arrow,
+.sort-indicators .sort-arrow,
+th .sort-arrow {
+    display: flex !important;
+    visibility: visible !important;
+    opacity: 1 !important;
+    color: var(--body-text-color) !important;
+}
+
+/* Sort priority badge (shows order when multi-column sorting) */
+.sort-priority,
+.sort-indicators .sort-priority,
+th .sort-priority {
+    display: flex !important;
+    visibility: visible !important;
+}
+
+/* Ensure sorted column headers show their state via arrows only, not highlight */
+th.sorted,
+th[aria-sort="ascending"],
+th[aria-sort="descending"] {
+    background-color: transparent !important;
+}
+
+body.dark th.sorted,
+body.dark th[aria-sort="ascending"],
+body.dark th[aria-sort="descending"],
+[data-theme="dark"] th.sorted,
+[data-theme="dark"] th[aria-sort="ascending"],
+[data-theme="dark"] th[aria-sort="descending"],
+.dark th.sorted,
+.dark th[aria-sort="ascending"],
+.dark th[aria-sort="descending"] {
+    background-color: transparent !important;
+}
+
+/* ===== GRADIO DATAFRAME INTERNAL HEADER BUTTON FIX ===== */
+/* Gradio's TableHeader uses .cell-wrap with a button.header-button inside */
+/* Remove any selection/focus styling from these internal elements */
+th .cell-wrap,
+thead th .cell-wrap,
+.table-wrap th .cell-wrap,
+[data-testid="dataframe"] th .cell-wrap {
+    background-color: transparent !important;
+    box-shadow: none !important;
+    outline: none !important;
+}
+
+th .header-button,
+thead th .header-button,
+th .cell-wrap .header-button,
+th button.header-button {
+    background-color: transparent !important;
+    box-shadow: none !important;
+    outline: none !important;
+}
+
+/* Dark mode specific for internal header elements */
+body.dark th .cell-wrap,
+body.dark th .header-button,
+body.dark th .cell-wrap .header-button,
+[data-theme="dark"] th .cell-wrap,
+[data-theme="dark"] th .header-button,
+[data-theme="dark"] th .cell-wrap .header-button,
+.dark th .cell-wrap,
+.dark th .header-button,
+.dark th .cell-wrap .header-button {
+    background-color: transparent !important;
+    box-shadow: none !important;
+    outline: none !important;
+}
+
+/* Remove highlight on header button focus/active states */
+th .header-button:focus,
+th .header-button:active,
+th .header-button:hover,
+th .cell-wrap:focus,
+th .cell-wrap:active {
+    background-color: transparent !important;
+    box-shadow: none !important;
+    outline: none !important;
+}
+
+body.dark th .header-button:focus,
+body.dark th .header-button:active,
+body.dark th .header-button:hover,
+body.dark th .cell-wrap:focus,
+body.dark th .cell-wrap:active,
+[data-theme="dark"] th .header-button:focus,
+[data-theme="dark"] th .header-button:active,
+[data-theme="dark"] th .header-button:hover,
+[data-theme="dark"] th .cell-wrap:focus,
+[data-theme="dark"] th .cell-wrap:active,
+.dark th .header-button:focus,
+.dark th .header-button:active,
+.dark th .header-button:hover,
+.dark th .cell-wrap:focus,
+.dark th .cell-wrap:active {
+    background-color: transparent !important;
+    box-shadow: none !important;
+    outline: none !important;
+}
+
+/* Fix table cell selection/focus in dark mode - make background subtle */
+body.dark table th:focus,
+body.dark table td:focus,
+body.dark [data-testid="dataframe"] th:focus,
+body.dark [data-testid="dataframe"] td:focus,
+[data-theme="dark"] table th:focus,
+[data-theme="dark"] table td:focus,
+[data-theme="dark"] [data-testid="dataframe"] th:focus,
+[data-theme="dark"] [data-testid="dataframe"] td:focus,
+.dark table th:focus,
+.dark table td:focus,
+.dark [data-testid="dataframe"] th:focus,
+.dark [data-testid="dataframe"] td:focus {
+    background-color: rgba(140, 208, 255, 0.15) !important;
+}
+
+/* Prevent text selection on table headers */
+table th::selection,
+table th *::selection,
+[data-testid="dataframe"] th::selection,
+[data-testid="dataframe"] th *::selection {
+    background-color: transparent !important;
+}
+
+/* ===== GLOBAL DARK MODE TEXT SELECTION FIX ===== */
+/* Fix text selection color in dark mode globally for better contrast */
+body.dark ::selection,
+[data-theme="dark"] ::selection,
+.dark ::selection {
+    background-color: rgba(140, 208, 255, 0.4) !important;
+    color: inherit !important;
+}
+
+/* Override Radio button selected indicator (the inner dot) - Gradio 5 specific */
+input[type="radio"]:checked {
+    accent-color: #8CD0FF !important;
+}
+
+/* Radio group - remove background fill, keep only dot styled */
+.gradio-radio label.selected,
+[data-testid*="radio-label"].selected {
+    background-color: transparent !important;
+    border-color: transparent !important;
+}
+
+/* Checkbox checked styling */
+input[type="checkbox"]:checked {
+    accent-color: #8CD0FF !important;
+}
+
+#scale-logo {
+    border-style: none !important;
+    box-shadow: none;
+    display: block;
+    margin-left: auto;
+    margin-right: auto;
+    max-width: 600px;
+}
+
+#scale-logo .download {
+    display: none;
+}
+#filter_type{
+    border: 0;
+    padding-left: 0;
+    padding-top: 0;
+}
+#filter_type label {
+    display: flex;
+}
+#filter_type label > span{
+    margin-top: var(--spacing-lg);
+    margin-right: 0.5em;
+}
+#filter_type label > .wrap{
+    width: 103px;
+}
+#filter_type label > .wrap .wrap-inner{  
+    padding: 2px;
+}
+#filter_type label > .wrap .wrap-inner input{
+    width: 1px
+}
+#filter-columns-type{
+    border:0;
+    padding:0.5;
+}
+#filter-columns-size{
+    border:0;
+    padding:0.5;
+}
+#box-filter > .form{
+    border: 0
+}
+
+.metric-tabs button {
+    font-size: 18px;
+}
+
+.metric-table-wrapper {
+    overflow-x: auto;
+    margin-top: 1rem;
+}
+
+/* ===== MARKDOWN TABLE COLUMN WIDTHS ===== */
+/* Ensure Datasets and Evaluated Models tables have proper column widths */
+/* Target markdown-rendered tables in Benchmark Inputs tab */
+.markdown-text table th:nth-child(4),
+.markdown-text table td:nth-child(4),
+.prose table th:nth-child(4),
+.prose table td:nth-child(4) {
+    min-width: 80px !important;
+    white-space: nowrap;
+}
+
+.markdown-text table th:nth-child(5),
+.markdown-text table td:nth-child(5),
+.prose table th:nth-child(5),
+.prose table td:nth-child(5) {
+    min-width: 100px !important;
+    white-space: nowrap;
+}
+
+/* Chart Gallery Styles */
+.chart-gallery {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
+    gap: 1rem;
+    margin: 1rem 0;
+}
+
+/* Plotly Chart Responsiveness */
+.js-plotly-plot, .plotly {
+    width: 100% !important;
+}
+
+.js-plotly-plot .plotly .main-svg {
+    width: 100% !important;
+}
+
+/* Better mobile display for Plotly charts */
+@media (max-width: 768px) {
+    .js-plotly-plot .plotly .legend {
+        font-size: 9px !important;
+    }
+    
+    .js-plotly-plot .plotly .gtitle {
+        font-size: 14px !important;
+    }
+    
+    .js-plotly-plot .plotly .xtitle,
+    .js-plotly-plot .plotly .ytitle {
+        font-size: 11px !important;
+    }
+
+    /* Stack the map and info/chart column full-width on mobile. */
+    #language-coverage-row {
+        flex-direction: column !important;
+    }
+
+    #language-coverage-row > * {
+        width: 100% !important;
+        min-width: 0 !important;
+    }
+
+    /* Wide content tables scroll horizontally on mobile. */
+    .markdown-text table {
+        display: block;
+        overflow-x: auto;
+        -webkit-overflow-scrolling: touch;
+    }
+    .markdown-text table th,
+    .markdown-text table td {
+        white-space: nowrap;
+    }
+
+    /* Visualisation charts keep a usable min-width and scroll horizontally on mobile. */
+    .viz-scroll-plot {
+        overflow-x: auto !important;
+        -webkit-overflow-scrolling: touch;
+    }
+    .viz-scroll-plot .js-plotly-plot {
+        min-width: 700px !important;
+    }
+
+    /* Leaderboard metric tables keep their min-width but scroll inside their wrapper. */
+    .metric-table-wrapper,
+    .metric-table-container,
+    .table-wrap {
+        overflow-x: auto !important;
+        -webkit-overflow-scrolling: touch;
+    }
+}
+
+.chart-card {
+    background: var(--metric-table-bg, #ffffff);
+    border: 1px solid var(--metric-table-border, #d3d3d3);
+    border-radius: 8px;
+    padding: 1rem;
+    transition: box-shadow 0.2s ease, transform 0.2s ease;
+}
+
+.chart-card:hover {
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+    transform: translateY(-2px);
+}
+
+.chart-card h4 {
+    margin: 0 0 0.5rem 0;
+    color: var(--metric-table-header-color, #0f172a);
+    font-size: 1.1rem;
+}
+
+.chart-card p {
+    margin: 0;
+    color: var(--metric-table-caption, #666666);
+    font-size: 0.9rem;
+    line-height: 1.4;
+}
+
+.metric-table {
+    border-collapse: collapse;
+    width: 100%;
+    min-width: 600px;
+    text-align: center;
+    font-size: 16px;
+    background-color: var(--metric-table-bg);
+}
+
+.metric-table caption {
+    caption-side: bottom;
+    padding-top: 0.5rem;
+    color: var(--metric-table-caption);
+    font-size: 0.9rem;
+}
+
+.metric-table th,
+.metric-table td {
+    border: 1px solid var(--metric-table-border);
+    padding: 0.5rem;
+}
+
+.metric-table thead th {
+    background-color: var(--metric-table-header-bg);
+    color: var(--metric-table-header-color);
+    position: sticky;
+    top: 0;
+    z-index: 1;
+}
+
+.metric-table tbody th {
+    text-align: left;
+    background-color: var(--metric-table-row-header-bg);
+    color: var(--metric-table-header-color);
+    position: sticky;
+    left: 0;
+    z-index: 2;
+    cursor: pointer;
+}
+
+.metric-table tbody th:hover {
+    text-decoration: underline;
+}
+
+.metric-table tbody tr.row-highlighted {
+    background-color: var(--metric-table-row-highlight) !important;
+}
+
+.metric-table tbody tr.row-highlighted td,
+.metric-table tbody tr.row-highlighted th {
+    background-color: var(--metric-table-row-highlight) !important;
+}
+
+/* Leaderboard Gradio dataframe row highlighting */
+#wer-leaderboard-table tbody tr.leaderboard-row-highlighted,
+#cer-leaderboard-table tbody tr.leaderboard-row-highlighted,
+#rtfx-leaderboard-table tbody tr.leaderboard-row-highlighted {
+    background-color: var(--metric-table-row-highlight, rgba(140, 208, 255, 0.3)) !important;
+}
+
+#wer-leaderboard-table tbody tr.leaderboard-row-highlighted td,
+#cer-leaderboard-table tbody tr.leaderboard-row-highlighted td,
+#rtfx-leaderboard-table tbody tr.leaderboard-row-highlighted td {
+    background-color: var(--metric-table-row-highlight, rgba(140, 208, 255, 0.3)) !important;
+}
+
+/* Dark mode leaderboard row highlighting */
+body.dark #wer-leaderboard-table tbody tr.leaderboard-row-highlighted,
+body.dark #cer-leaderboard-table tbody tr.leaderboard-row-highlighted,
+body.dark #rtfx-leaderboard-table tbody tr.leaderboard-row-highlighted,
+[data-theme="dark"] #wer-leaderboard-table tbody tr.leaderboard-row-highlighted,
+[data-theme="dark"] #cer-leaderboard-table tbody tr.leaderboard-row-highlighted,
+[data-theme="dark"] #rtfx-leaderboard-table tbody tr.leaderboard-row-highlighted {
+    background-color: rgba(140, 208, 255, 0.25) !important;
+}
+
+body.dark #wer-leaderboard-table tbody tr.leaderboard-row-highlighted td,
+body.dark #cer-leaderboard-table tbody tr.leaderboard-row-highlighted td,
+body.dark #rtfx-leaderboard-table tbody tr.leaderboard-row-highlighted td,
+[data-theme="dark"] #wer-leaderboard-table tbody tr.leaderboard-row-highlighted td,
+[data-theme="dark"] #cer-leaderboard-table tbody tr.leaderboard-row-highlighted td,
+[data-theme="dark"] #rtfx-leaderboard-table tbody tr.leaderboard-row-highlighted td {
+    background-color: rgba(140, 208, 255, 0.25) !important;
+}
+
+/* Make all leaderboard cells clickable for row highlighting */
+#wer-leaderboard-table tbody td,
+#cer-leaderboard-table tbody td,
+#rtfx-leaderboard-table tbody td {
+    cursor: pointer;
+}
+
+.metric-table-empty {
+    padding: 1rem;
+    text-align: center;
+    color: var(--metric-table-empty-color);
+}
+
+/* Footer Styles */
+.paza-footer {
+    margin-top: 2rem;
+    padding: 1.5rem 1rem;
+    border-top: 1px solid var(--metric-table-border, #d3d3d3);
+    text-align: center;
+    font-size: 0.9rem;
+    color: var(--metric-table-caption, #666666);
+}
+
+.paza-footer a {
+    color: #0078d4;
+    text-decoration: none;
+    transition: color 0.2s ease;
+}
+
+.paza-footer a:hover {
+    color: #106ebe;
+    text-decoration: underline;
+}
+
+/* Dark mode footer link colors */
+body.dark .paza-footer a,
+[data-theme="dark"] .paza-footer a,
+body[class*="dark"] .paza-footer a,
+[data-color-mode="dark"] .paza-footer a {
+    color: #60a5fa;
+}
+
+body.dark .paza-footer a:hover,
+[data-theme="dark"] .paza-footer a:hover,
+body[class*="dark"] .paza-footer a:hover,
+[data-color-mode="dark"] .paza-footer a:hover {
+    color: #93c5fd;
+}
+
+.paza-footer-links {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: center;
+    align-items: center;
+    gap: 1rem 1.5rem;
+}
+
+.paza-footer-links .copyright {
+    font-size: 0.85rem;
+}
+"""
+
+get_window_url_params = """
+    function(url_params) {
+        const params = new URLSearchParams(window.location.search);
+        url_params = Object.fromEntries(params);
+        return url_params;
+    }
+    """
+
+# WCAG 4.1.2 Fix: JavaScript to remove focusability from aria-hidden elements.
+# Also includes dark mode flash prevention script.
+fix_aria_hidden_focus_js = """
+<script>
+// Dark mode flash prevention - run immediately before page renders
+(function() {
+    // Check for HuggingFace Spaces dark mode preference or system preference
+    const isDarkMode = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches;
+    const isHFDark = document.documentElement.classList.contains('dark') || 
+                     document.body?.classList.contains('dark') ||
+                     document.documentElement.getAttribute('data-theme') === 'dark' ||
+                     document.documentElement.getAttribute('data-color-mode') === 'dark';
+    
+    if (isDarkMode || isHFDark) {
+        // Apply dark class immediately to prevent flash
+        document.documentElement.classList.add('dark');
+        document.documentElement.setAttribute('data-theme', 'dark');
+        if (document.body) {
+            document.body.classList.add('dark');
+        } else {
+            // If body not ready, wait for it
+            document.addEventListener('DOMContentLoaded', function() {
+                document.body.classList.add('dark');
+            });
+        }
+    }
+    
+    // Also listen for theme changes from HF Spaces
+    const observer = new MutationObserver(function(mutations) {
+        mutations.forEach(function(mutation) {
+            if (mutation.attributeName === 'class' || 
+                mutation.attributeName === 'data-theme' ||
+                mutation.attributeName === 'data-color-mode') {
+                const html = document.documentElement;
+                const body = document.body;
+                if (html.classList.contains('dark') || 
+                    html.getAttribute('data-theme') === 'dark' ||
+                    html.getAttribute('data-color-mode') === 'dark') {
+                    if (body && !body.classList.contains('dark')) {
+                        body.classList.add('dark');
+                    }
+                }
+            }
+        });
+    });
+    
+    observer.observe(document.documentElement, { 
+        attributes: true, 
+        attributeFilter: ['class', 'data-theme', 'data-color-mode'] 
+    });
+})();
+</script>
+<script>
+(function() {
+    function fixAriaHiddenFocus() {
+        // Find all aria-hidden containers and make their focusable children unfocusable
+        const hiddenContainers = document.querySelectorAll('[aria-hidden="true"]');
+        hiddenContainers.forEach(container => {
+            const focusableElements = container.querySelectorAll(
+                'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'
+            );
+            focusableElements.forEach(el => {
+                el.setAttribute('tabindex', '-1');
+                el.setAttribute('aria-disabled', 'true');
+                el.setAttribute('data-a11y-fixed', 'true');
+                // Also disable the button to prevent any form of focus
+                if (el.tagName === 'BUTTON') {
+                    el.disabled = true;
+                }
+            });
+        });
+    }
+
+    // Run immediately
+    fixAriaHiddenFocus();
+
+    // Run on DOMContentLoaded
+    document.addEventListener('DOMContentLoaded', fixAriaHiddenFocus);
+
+    // Run after a short delay to catch late-loading Gradio components
+    setTimeout(fixAriaHiddenFocus, 100);
+    setTimeout(fixAriaHiddenFocus, 500);
+    setTimeout(fixAriaHiddenFocus, 1000);
+    setTimeout(fixAriaHiddenFocus, 2000);
+
+    // Use MutationObserver to handle dynamically added content
+    const observer = new MutationObserver((mutations) => {
+        fixAriaHiddenFocus();
+    });
+
+    // Start observing when body is available
+    function startObserver() {
+        if (document.body) {
+            observer.observe(document.body, {
+                childList: true,
+                subtree: true,
+                attributes: true,
+                attributeFilter: ['aria-hidden']
+            });
+            fixAriaHiddenFocus();
+        } else {
+            setTimeout(startObserver, 10);
+        }
+    }
+    startObserver();
+})();
+
+// Row highlighting for metric tables when clicking on language
+(function() {
+    function setupRowHighlighting() {
+        const tables = document.querySelectorAll('.metric-table');
+        tables.forEach(table => {
+            if (table.dataset.highlightSetup) return;
+            table.dataset.highlightSetup = 'true';
+            
+            const rows = table.querySelectorAll('tbody tr');
+            rows.forEach(row => {
+                const languageCell = row.querySelector('th');
+                if (languageCell) {
+                    languageCell.addEventListener('click', function() {
+                        // Toggle highlight on the clicked row
+                        const isHighlighted = row.classList.contains('row-highlighted');
+                        // Remove highlight from all rows in this table
+                        rows.forEach(r => r.classList.remove('row-highlighted'));
+                        // If row wasn't highlighted, highlight it now
+                        if (!isHighlighted) {
+                            row.classList.add('row-highlighted');
+                        }
+                    });
+                }
+            });
+        });
+    }
+
+    // Run on load and observe for dynamically added tables
+    document.addEventListener('DOMContentLoaded', setupRowHighlighting);
+    setTimeout(setupRowHighlighting, 100);
+    setTimeout(setupRowHighlighting, 500);
+    setTimeout(setupRowHighlighting, 1000);
+    setTimeout(setupRowHighlighting, 2000);
+
+    const rowObserver = new MutationObserver((mutations) => {
+        setupRowHighlighting();
+    });
+
+    function startRowObserver() {
+        if (document.body) {
+            rowObserver.observe(document.body, {
+                childList: true,
+                subtree: true
+            });
+            setupRowHighlighting();
+        } else {
+            setTimeout(startRowObserver, 10);
+        }
+    }
+    startRowObserver();
+})();
+
+// Row highlighting and row-based sorting for Gradio leaderboard dataframes (WER, CER, RTFx tables)
+(function() {
+    // Track sort state per table per row
+    const rowSortState = {};
+    // Track which containers have event listeners attached
+    const setupContainers = new WeakSet();
+    
+    function setupLeaderboardRowSorting() {
+        const leaderboardIds = ['#wer-leaderboard-table', '#cer-leaderboard-table', '#rtfx-leaderboard-table'];
+        
+        leaderboardIds.forEach(tableId => {
+            const container = document.querySelector(tableId);
+            if (!container) return;
+            
+            // Initialize sort state for this table
+            if (!rowSortState[tableId]) {
+                rowSortState[tableId] = { rowIndex: null, ascending: true };
+            }
+            
+            // Skip if this specific container element already has event listener
+            if (setupContainers.has(container)) return;
+            setupContainers.add(container);
+            
+            // Use event delegation on the container - Gradio uses divs, not tables
+            container.addEventListener('click', function(e) {
+                // Don't intercept clicks on sort buttons in header
+                if (e.target.closest('button') || e.target.closest('.sort-button')) {
+                    return;
+                }
+                
+                // Ignore clicks in the aria-hidden sizing table
+                const ariaHiddenTable = e.target.closest('table[aria-hidden="true"]');
+                if (ariaHiddenTable) {
+                    return;
+                }
+                
+                // Find the clicked cell - Gradio uses div.cell-wrap or td
+                let clickedCell = e.target.closest('td');
+                if (!clickedCell) {
+                    // Maybe clicked on span.text inside cell-wrap
+                    const cellWrap = e.target.closest('.cell-wrap');
+                    if (cellWrap) {
+                        clickedCell = cellWrap.closest('td');
+                    }
+                }
+                if (!clickedCell) {
+                    return;
+                }
+                
+                const clickedRow = clickedCell.closest('tr');
+                if (!clickedRow) {
+                    return;
+                }
+                
+                // Check if this is a body row (not header) - use the specific class
+                const tbody = clickedRow.closest('tbody.tbody') || clickedRow.closest('tbody');
+                if (!tbody) {
+                    return;
+                }
+                
+                // Make sure this tbody is inside a svelte-virtual-table-viewport (not the hidden sizing table)
+                const virtualViewport = tbody.closest('svelte-virtual-table-viewport');
+                if (!virtualViewport) {
+                    return;
+                }
+                
+                // Get all cells in the row
+                const allCells = Array.from(clickedRow.querySelectorAll('td'));
+                const cellIndex = allCells.indexOf(clickedCell);
+                
+                // If clicking on # column (index 0) or Language column (index 1), sort the row
+                if (cellIndex === 0 || cellIndex === 1) {
+                    e.preventDefault();
+                    e.stopPropagation();
+                    
+                    // Find the virtual table (the one with actual data, not aria-hidden one)
+                    const virtualTableViewport = container.querySelector('svelte-virtual-table-viewport');
+                    const table = virtualTableViewport ? 
+                        virtualTableViewport.querySelector('table.table') : 
+                        container.querySelector('table:not([aria-hidden="true"])');
+                    const thead = table ? table.querySelector('thead.thead') || table.querySelector('thead') : null;
+                    const virtualTbody = table ? table.querySelector('tbody.tbody') || table.querySelector('tbody') : null;
+                    
+                    if (table && thead && virtualTbody) {
+                        sortRowColumns(tableId, table, thead, virtualTbody, clickedRow);
+                    }
+                    return;
+                }
+                
+                // For other cells, just toggle highlight
+                const allRows = tbody.querySelectorAll('tr');
+                const isHighlighted = clickedRow.classList.contains('leaderboard-row-highlighted');
+                
+                // Remove highlight from all rows
+                allRows.forEach(row => row.classList.remove('leaderboard-row-highlighted'));
+                
+                // If row wasn't highlighted, highlight it now
+                if (!isHighlighted) {
+                    clickedRow.classList.add('leaderboard-row-highlighted');
+                }
+            }, true); // Use capture phase
+            
+            // Add tooltips to # and Language columns to explain row sorting
+            addRowSortTooltips(container);
+        });
+    }
+    
+    function addRowSortTooltips(container) {
+        // Find the virtual table tbody (not the aria-hidden one)
+        const virtualTableViewport = container.querySelector('svelte-virtual-table-viewport');
+        const table = virtualTableViewport ? 
+            virtualTableViewport.querySelector('table.table') : 
+            container.querySelector('table:not([aria-hidden="true"])');
+        const tbody = table ? table.querySelector('tbody.tbody') || table.querySelector('tbody') : null;
+        if (!tbody) return;
+        
+        const rows = tbody.querySelectorAll('tr');
+        rows.forEach(row => {
+            const cells = row.querySelectorAll('td');
+            if (cells.length >= 2) {
+                // # column (index 0)
+                if (cells[0] && !cells[0].dataset.tooltipSet) {
+                    cells[0].title = 'Click to sort columns by this row\'s values';
+                    cells[0].dataset.tooltipSet = 'true';
+                }
+                // Language column (index 1)
+                if (cells[1] && !cells[1].dataset.tooltipSet) {
+                    const langName = cells[1].textContent.trim();
+                    cells[1].title = `Click to sort model columns by ${langName}'s scores`;
+                    cells[1].dataset.tooltipSet = 'true';
+                }
+            }
+        });
+    }
+    
+    function sortRowColumns(tableId, table, thead, tbody, clickedRow) {
+        // Get all header cells
+        const headerRow = thead.querySelector('tr');
+        if (!headerRow) {
+            return;
+        }
+        
+        const headerCells = Array.from(headerRow.querySelectorAll('th'));
+        const rowCells = Array.from(clickedRow.querySelectorAll('td'));
+        
+        // First 2 columns are # and Language - don't include in sort
+        const fixedCols = 2;
+        
+        // Extract model columns (starting from index 2)
+        const modelHeaders = headerCells.slice(fixedCols);
+        const modelCells = rowCells.slice(fixedCols);
+        
+        if (modelHeaders.length === 0 || modelCells.length === 0) {
+            return;
+        }
+        
+        // Get row index to track sort state
+        const allBodyRows = Array.from(tbody.querySelectorAll('tr'));
+        const rowIndex = allBodyRows.indexOf(clickedRow);
+        
+        // Determine sort direction - toggle if same row clicked again
+        let ascending;
+        if (rowSortState[tableId].rowIndex === rowIndex) {
+            ascending = !rowSortState[tableId].ascending;
+        } else {
+            // Determine default direction based on table type
+            // WER/CER: lower is better, so ascending (best first)
+            // RTFx: higher is better, so descending (best first)
+            ascending = !tableId.includes('rtfx');
+        }
+        rowSortState[tableId] = { rowIndex, ascending };
+        
+        // Create array of {header, cell, value} for sorting
+        const columnsData = modelHeaders.map((header, i) => {
+            const cell = modelCells[i];
+            // Get text content - handle Gradio's nested structure
+            let cellText = '';
+            if (cell) {
+                // Try different selectors for Gradio's structure
+                const textEl = cell.querySelector('.cell-wrap .text') || 
+                               cell.querySelector('.cell-wrap') || 
+                               cell.querySelector('span') ||
+                               cell;
+                cellText = textEl.textContent.trim();
+            }
+            // Parse value, treating '--' or empty as Infinity (worst)
+            let value = parseFloat(cellText);
+            if (isNaN(value) || cellText === '--' || cellText === '') {
+                value = ascending ? Infinity : -Infinity;
+            }
+            return { header, cell, value, originalIndex: i };
+        });
+        
+        // Sort columns by value
+        columnsData.sort((a, b) => {
+            if (ascending) {
+                return a.value - b.value;
+            } else {
+                return b.value - a.value;
+            }
+        });
+        
+        // Store new column order indices
+        const newOrder = columnsData.map(col => col.originalIndex);
+        
+        // Reorder header cells (after fixed columns)
+        const newHeaderOrder = [];
+        for (let i = 0; i < fixedCols; i++) {
+            newHeaderOrder.push(headerCells[i]);
+        }
+        newOrder.forEach(idx => {
+            newHeaderOrder.push(headerCells[fixedCols + idx]);
+        });
+        
+        // Clear and rebuild header row
+        while (headerRow.firstChild) {
+            headerRow.removeChild(headerRow.firstChild);
+        }
+        newHeaderOrder.forEach(cell => {
+            if (cell) headerRow.appendChild(cell);
+        });
+        
+        // Reorder cells in all body rows
+        allBodyRows.forEach((row, rIdx) => {
+            const cells = Array.from(row.querySelectorAll('td'));
+            const newCellOrder = [];
+            for (let i = 0; i < fixedCols; i++) {
+                newCellOrder.push(cells[i]);
+            }
+            newOrder.forEach(idx => {
+                newCellOrder.push(cells[fixedCols + idx]);
+            });
+            
+            // Clear and rebuild row
+            while (row.firstChild) {
+                row.removeChild(row.firstChild);
+            }
+            newCellOrder.forEach(cell => {
+                if (cell) row.appendChild(cell);
+            });
+        });
+        
+        // Highlight the clicked row to show it was used for sorting
+        allBodyRows.forEach(row => row.classList.remove('leaderboard-row-highlighted'));
+        // Find the row at the same index after reordering
+        const newRows = tbody.querySelectorAll('tr');
+        if (newRows[rowIndex]) {
+            newRows[rowIndex].classList.add('leaderboard-row-highlighted');
+        }
+    }
+
+    // Run on load and observe for dynamically added tables
+    document.addEventListener('DOMContentLoaded', setupLeaderboardRowSorting);
+    setTimeout(setupLeaderboardRowSorting, 500);
+    setTimeout(setupLeaderboardRowSorting, 1000);
+    setTimeout(setupLeaderboardRowSorting, 2000);
+    setTimeout(setupLeaderboardRowSorting, 3000);
+    setTimeout(setupLeaderboardRowSorting, 5000);
+
+    const leaderboardObserver = new MutationObserver((mutations) => {
+        // Check if table content was updated - need to reset sort state
+        for (const m of mutations) {
+            if (m.type === 'childList') {
+                // Check if this affects one of our leaderboard tables
+                const targetContainer = m.target.closest('#wer-leaderboard-table, #cer-leaderboard-table, #rtfx-leaderboard-table');
+                if (targetContainer) {
+                    // Reset sort state for this table when its content changes
+                    const tableId = '#' + targetContainer.id;
+                    if (rowSortState[tableId]) {
+                        rowSortState[tableId] = { rowIndex: null, ascending: true };
+                    }
+                    // Refresh tooltips for the updated content
+                    addRowSortTooltips(targetContainer);
+                }
+            }
+        }
+        
+        // Always try to set up - the WeakSet will prevent duplicate listeners
+        setupLeaderboardRowSorting();
+        
+        // Also add tooltips to any newly added tables
+        const containers = document.querySelectorAll('#wer-leaderboard-table, #cer-leaderboard-table, #rtfx-leaderboard-table');
+        containers.forEach(addRowSortTooltips);
+    });
+
+    function startLeaderboardObserver() {
+        if (document.body) {
+            leaderboardObserver.observe(document.body, {
+                childList: true,
+                subtree: true
+            });
+            setupLeaderboardRowSorting();
+        } else {
+            setTimeout(startLeaderboardObserver, 10);
+        }
+    }
+    startLeaderboardObserver();
+})();
+
+// Column resizing for leaderboard dataframes (WER, CER, RTFx tables)
+(function() {
+    function setupColumnResize() {
+        const leaderboardIds = ['#wer-leaderboard-table', '#cer-leaderboard-table', '#rtfx-leaderboard-table'];
+        
+        leaderboardIds.forEach(tableId => {
+            const container = document.querySelector(tableId);
+            if (!container) return;
+            
+            const table = container.querySelector('table');
+            if (!table || table.dataset.resizeSetup) return;
+            table.dataset.resizeSetup = 'true';
+            
+            const headers = table.querySelectorAll('thead th');
+            
+            headers.forEach((th, index) => {
+                // Skip if resize handle already exists
+                if (th.querySelector('.col-resize-handle')) return;
+                
+                // Add title attribute for tooltip showing full header text
+                const headerText = th.textContent.trim();
+                if (headerText && !th.getAttribute('title')) {
+                    th.setAttribute('title', headerText);
+                }
+                
+                // Create resize handle
+                const resizeHandle = document.createElement('div');
+                resizeHandle.className = 'col-resize-handle';
+                th.appendChild(resizeHandle);
+                
+                let startX, startWidth, isResizing = false;
+                
+                resizeHandle.addEventListener('mousedown', function(e) {
+                    e.preventDefault();
+                    e.stopPropagation();
+                    isResizing = true;
+                    startX = e.pageX;
+                    startWidth = th.offsetWidth;
+                    resizeHandle.classList.add('resizing');
+                    document.body.style.cursor = 'col-resize';
+                    document.body.style.userSelect = 'none';
+                });
+                
+                document.addEventListener('mousemove', function(e) {
+                    if (!isResizing) return;
+                    const diff = e.pageX - startX;
+                    const newWidth = Math.max(60, Math.min(300, startWidth + diff));
+                    th.style.width = newWidth + 'px';
+                    th.style.minWidth = newWidth + 'px';
+                    th.style.maxWidth = newWidth + 'px';
+                    
+                    // Also resize corresponding cells in tbody
+                    const tbody = table.querySelector('tbody');
+                    if (tbody) {
+                        const rows = tbody.querySelectorAll('tr');
+                        rows.forEach(row => {
+                            const cell = row.children[index];
+                            if (cell) {
+                                cell.style.width = newWidth + 'px';
+                                cell.style.minWidth = newWidth + 'px';
+                                cell.style.maxWidth = newWidth + 'px';
+                            }
+                        });
+                    }
+                });
+                
+                document.addEventListener('mouseup', function() {
+                    if (isResizing) {
+                        isResizing = false;
+                        resizeHandle.classList.remove('resizing');
+                        document.body.style.cursor = '';
+                        document.body.style.userSelect = '';
+                    }
+                });
+            });
+            
+            // Add title attributes to all cells for tooltip on truncated content
+            const cells = table.querySelectorAll('tbody td');
+            cells.forEach(cell => {
+                const cellText = cell.textContent.trim();
+                if (cellText && !cell.getAttribute('title')) {
+                    cell.setAttribute('title', cellText);
+                }
+            });
+        });
+    }
+
+    // Run on load and observe for dynamically added tables
+    document.addEventListener('DOMContentLoaded', setupColumnResize);
+    setTimeout(setupColumnResize, 100);
+    setTimeout(setupColumnResize, 500);
+    setTimeout(setupColumnResize, 1000);
+    setTimeout(setupColumnResize, 2000);
+    setTimeout(setupColumnResize, 3000);
+
+    const resizeObserver = new MutationObserver((mutations) => {
+        setupColumnResize();
+    });
+
+    function startResizeObserver() {
+        if (document.body) {
+            resizeObserver.observe(document.body, {
+                childList: true,
+                subtree: true
+            });
+            setupColumnResize();
+        } else {
+            setTimeout(startResizeObserver, 10);
+        }
+    }
+    startResizeObserver();
+})();
+
+// Disable right-click context menu on dataframes (filter option has no function)
+(function() {
+    function disableDataframeContextMenu() {
+        const leaderboardIds = ['#wer-leaderboard-table', '#cer-leaderboard-table', '#rtfx-leaderboard-table'];
+        
+        leaderboardIds.forEach(tableId => {
+            const container = document.querySelector(tableId);
+            if (!container || container.dataset.contextMenuDisabled) return;
+            container.dataset.contextMenuDisabled = 'true';
+            
+            // Prevent default context menu on right-click
+            container.addEventListener('contextmenu', function(e) {
+                e.preventDefault();
+                e.stopPropagation();
+                return false;
+            }, true);
+        });
+        
+        // Also target any dataframe tables globally
+        const dataframes = document.querySelectorAll('[data-testid="dataframe"], .table-wrap, .svelte-virtual-table-viewport');
+        dataframes.forEach(df => {
+            if (df.dataset.contextMenuDisabled) return;
+            df.dataset.contextMenuDisabled = 'true';
+            
+            df.addEventListener('contextmenu', function(e) {
+                e.preventDefault();
+                e.stopPropagation();
+                return false;
+            }, true);
+        });
+    }
+
+    // Run on load and observe for dynamically added tables
+    document.addEventListener('DOMContentLoaded', disableDataframeContextMenu);
+    setTimeout(disableDataframeContextMenu, 100);
+    setTimeout(disableDataframeContextMenu, 500);
+    setTimeout(disableDataframeContextMenu, 1000);
+    setTimeout(disableDataframeContextMenu, 2000);
+
+    const contextMenuObserver = new MutationObserver((mutations) => {
+        disableDataframeContextMenu();
+    });
+
+    function startContextMenuObserver() {
+        if (document.body) {
+            contextMenuObserver.observe(document.body, {
+                childList: true,
+                subtree: true
+            });
+            disableDataframeContextMenu();
+        } else {
+            setTimeout(startContextMenuObserver, 10);
+        }
+    }
+    startContextMenuObserver();
+})();
+</script>
+"""
+
+
+light_mode_head = """
+<script>
+    // Force light mode immediately to prevent flash of dark mode
+    (function() {
+        // Remove dark class if present
+        document.documentElement.classList.remove('dark');
+        document.body && document.body.classList.remove('dark');
+        
+        // Set theme parameter in URL if not already light (only once on initial load)
+        var url = new URL(window.location);
+        if (url.searchParams.get('__theme') !== 'light') {
+            url.searchParams.set('__theme', 'light');
+            // Preserve the hash fragment when updating URL
+            var newUrl = url.pathname + url.search + url.hash;
+            history.replaceState(null, '', newUrl);
+        }
+        
+        // Also watch for dark class being added and remove it
+        var observer = new MutationObserver(function(mutations) {
+            mutations.forEach(function(mutation) {
+                if (mutation.attributeName === 'class') {
+                    var target = mutation.target;
+                    if (target.classList.contains('dark')) {
+                        target.classList.remove('dark');
+                    }
+                }
+            });
+        });
+        
+        // Start observing document element
+        observer.observe(document.documentElement, { attributes: true });
+        
+        // Also observe body when it's ready
+        if (document.body) {
+            observer.observe(document.body, { attributes: true });
+        } else {
+            document.addEventListener('DOMContentLoaded', function() {
+                document.body.classList.remove('dark');
+                observer.observe(document.body, { attributes: true });
+            });
+        }
+    })();
+</script>
+<style>
+    /* Force light mode by overriding Gradio's CSS variables */
+    :root, html, body, .gradio-container, .dark, body.dark {
+        --body-background-fill: white !important;
+        --background-fill-primary: white !important;
+        --background-fill-secondary: #f9fafb !important;
+        --body-text-color: #1f2937 !important;
+        --body-text-color-subdued: #6b7280 !important;
+        --block-background-fill: white !important;
+        --block-border-color: #e5e7eb !important;
+        --block-label-background-fill: #f3f4f6 !important;
+        --block-label-text-color: #374151 !important;
+        --block-title-text-color: #111827 !important;
+        --input-background-fill: white !important;
+        --input-border-color: #d1d5db !important;
+        --table-even-background-fill: #f9fafb !important;
+        --table-odd-background-fill: white !important;
+        --table-row-focus: #e0f2fe !important;
+        --border-color-primary: #e5e7eb !important;
+        --neutral-50: #f9fafb !important;
+        --neutral-100: #f3f4f6 !important;
+        --neutral-200: #e5e7eb !important;
+        --neutral-700: #374151 !important;
+        --neutral-800: #1f2937 !important;
+        --neutral-900: #111827 !important;
+        --neutral-950: #030712 !important;
+    }
+    
+    /* Apply light background to main containers only */
+    html, body, .gradio-container {
+        background: white !important;
+        color: #1f2937 !important;
+    }
+    
+    /* Target Gradio tables specifically, exclude Plotly */
+    .gradio-container table:not(.js-plotly-plot table),
+    .dark .gradio-container table:not(.js-plotly-plot table) {
+        background: white !important;
+        color: #1f2937 !important;
+    }
+    
+    .gradio-container th:not(.js-plotly-plot th),
+    .gradio-container td:not(.js-plotly-plot td) {
+        background: inherit !important;
+        color: #1f2937 !important;
+        border-color: #e5e7eb !important;
+    }
+    
+    /* Override system dark mode preference */
+    @media (prefers-color-scheme: dark) {
+        :root, html, body, .gradio-container {
+            --body-background-fill: white !important;
+            --background-fill-primary: white !important;
+            --background-fill-secondary: #f9fafb !important;
+            --body-text-color: #1f2937 !important;
+            --block-background-fill: white !important;
+            background: white !important;
+            color: #1f2937 !important;
+        }
+    }
+    
+    /* Plotly charts */
+    .js-plotly-plot, .js-plotly-plot *,
+    .plotly, .plotly * {
+        background: unset !important;
+        background-color: unset !important;
+    }
+</style>
+"""
+
+# =============================================================================
+# HTML Templates
+# =============================================================================
+
+chart_gallery_html = """
+<div class="chart-gallery">
+    <div class="chart-card">
+        <h4>🏆 CER Performance Leaderboard</h4>
+        <p>Ranks models by Character Error Rate. Especially useful for agglutinative and low-resource languages.</p>
+    </div>
+    <div class="chart-card">
+        <h4>🏆 WER Performance Leaderboard</h4>
+        <p>Ranks model families or top individual models by Word Error Rate. Filter by language to see top performers.</p>
+    </div>
+    <div class="chart-card">
+        <h4>🚀 Speed vs Accuracy Tradeoffs</h4>
+        <p>Scatter plot comparing model speed (RTFx) against accuracy (WER). Find the sweet spot between fast and accurate models.</p>
+    </div>
+    <div class="chart-card">
+        <h4>🔍 CER vs WER Correlation</h4>
+        <p>Scatter plot showing relationship between character and word error rates. Understand error patterns across models.</p>
+    </div>
+</div>
+"""
+
+section_divider_html = "<hr style='margin: 2rem 0;'>"
+
+footer_html = """
+<footer class="paza-footer">
+    <div class="paza-footer-links">
+        <a href="https://go.microsoft.com/fwlink/?LinkId=521839" target="_blank" rel="noopener noreferrer">Privacy &amp; Cookies</a>
+        <a href="https://www.microsoft.com/en-us/research/lab/microsoft-research-lab-africa-nairobi/" target="_blank" rel="noopener noreferrer">Microsoft Research Africa, Nairobi</a>
+        <a href="https://www.microsoft.com/en-us/research/project/project-gecko/" target="_blank" rel="noopener noreferrer">Project Gecko</a>
+        <a href="https://www.microsoft.com/en-us/research/" target="_blank" rel="noopener noreferrer" class="copyright">&copy; Microsoft Research 2026</a>
+    </div>
+</footer>
+"""

src/display/formatting.py

@@ -0,0 +1,29 @@
+def model_hyperlink(link, model_name):
+    return f'<a target="_blank" href="{link}" style="color: var(--link-text-color); text-decoration: underline;text-decoration-style: dotted;">{model_name}</a>'
+
+
+def make_clickable_model(model_name):
+    link = f"https://huggingface.co/{model_name}"
+    return model_hyperlink(link, model_name)
+
+
+def styled_error(error):
+    # Remove trailing full stop if present for cleaner display
+    error_text = error.rstrip('.')
+    return f"<p style='color: red; font-size: 14px; text-align: center;'>{error_text}</p>"
+
+
+def styled_warning(warn):
+    return f"<p style='color: orange; font-size: 20px; text-align: center;'>{warn}</p>"
+
+
+def styled_message(message):
+    return f"<p style='color: green; font-size: 20px; text-align: center;'>{message}</p>"
+
+
+def has_no_nan_values(df, columns):
+    return df[columns].notna().all(axis=1)
+
+
+def has_nan_values(df, columns):
+    return df[columns].isna().any(axis=1)

src/display/model_family_colors.csv

@@ -0,0 +1,96 @@
+Model Families,Model ID,Color
+Granite,ibm-granite/granite-speech-3.3-2b,#288A56
+Granite,ibm-granite/granite-speech-3.3-8b,#42B870
+granite-speech,ibm-granite/granite-speech-3.3-2b,#288A56
+Kyutai,kyutai/stt-2.6b-en,#43E5CA
+LiteASR,efficient-speech/lite-whisper-large-v3-acc,#944500
+LiteASR,efficient-speech/lite-whisper-large-v3,#CA6407
+LiteASR,efficient-speech/lite-whisper-large-v3-fast,#FE8401
+LiteASR,efficient-speech/lite-whisper-large-v3-turbo-acc,#FFA43D
+LiteASR,efficient-speech/lite-whisper-large-v3-turbo,#FFC470
+LiteASR,efficient-speech/lite-whisper-large-v3-turbo-fast,#FFE4BE
+lite_asr,efficient-speech/lite-whisper-large-v3,#CA6407
+Moonshine,usefulsensors/moonshine-base,#CC23D1
+Moonshine,usefulsensors/moonshine-tiny,#E656EB
+NeMo,nvidia/canary-1b-v2,#379539
+NeMo,nvidia/canary-qwen-2.5b,#62BE55
+NeMo,nvidia/parakeet-tdt-0.6b-v3,#76D45E
+nvidia-nemo,nvidia/canary-1b-v2,#379539
+nvidia-nemo,nvidia/canary-qwen-2.5b,#62BE55
+nvidia-nemo,nvidia/parakeet-tdt-0.6b-v3,#76D45E
+Omnilingual,omniASR-CTC-300M,#9FF2EA
+Omnilingual,omniASR-CTC-1B,#43E5CA
+Omnilingual,omniASR-CTC-3B,#1EC8B0
+Omnilingual,omniASR-CTC-7B,#22918B
+Omnilingual,omniASR-LLM-300M,#136C6C
+Omnilingual,omniASR-LLM-1B,#01263F
+Omnilingual,omniASR-LLM-3B,#024169
+Omnilingual,omniASR-LLM-7B,#09638E
+Omnilingual,omniASR-LLM-7B-ZS,#1384B1
+Phi-4,microsoft/Phi-4-multimodal-instruct,#64DE89
+Qwen2-Audio,Qwen/Qwen2-Audio-7B-Instruct,#4A43CB
+Qwen2-Audio,Qwen/Qwen2-Audio-7B,#6864F6
+SpeechBrain,speechbrain/asr-transformer-transformerlm-librispeech,#FAB500
+SpeechBrain,speechbrain/asr-crdnn-rnnlm-librispeech,#FFCD0F
+Wav2Vec2,facebook/wav2vec2-large-960h,#003580
+Wav2Vec2,facebook/wav2vec2-large-960h-lv60-self,#0057AA
+Wav2Vec2,facebook/wav2vec2-large-robust-ft-libri-960h,#0078D4
+Wav2Vec2,facebook/wav2vec2-conformer-rel-pos-large-960h-ft,#0FAFFF
+Wav2Vec2,facebook/wav2vec2-conformer-rope-large-960h-ft,#3BD5FF
+facebook-wav2vec2-conformer,facebook/wav2vec2-conformer,#0FAFFF
+Whisper,openai/whisper-tiny,#420C5F
+Whisper,openai/whisper-tiny.en,#55107A
+Whisper,openai/whisper-base,#691A90
+Whisper,openai/whisper-base.en,#7F21A9
+Whisper,openai/whisper-small,#A931D8
+Whisper,openai/whisper-small.en,#CA59F7
+Whisper,openai/whisper-medium,#DC8AFD
+Whisper,openai/whisper-medium.en,#EBC7FA
+Whisper,openai/whisper-large,#CEB0FF
+Whisper,openai/whisper-large-v2,#AC80FF
+Whisper,openai/whisper-large-v3,#8B52F4
+Whisper,openai/whisper-large-v3-turbo,#6D37CD
+openai-whisper,openai/whisper-large-v3,#8B52F4
+Distil-Whisper,distil-whisper/distil-medium.en,#CA2134
+Distil-Whisper,distil-whisper/distil-large-v2,#E82C41
+Distil-Whisper,distil-whisper/distil-large-v3,#FB5B6C
+CrisperWhisper,nyrahealth/CrisperWhisper,#EC318F
+Facebook-MMS,facebook/mms-1b-all,#09638E
+Facebook-MMS,facebook/mms-1b-fl102,#024169
+facebook-mms,facebook/mms-1b-all,#09638E
+paza,paza/microsoft-paza-mms-1b-all,#8CD0FF
+paza,paza/microsoft-paza-whisper-large-v3-turbo,#BABAFF
+paza,paza/microsoft-paza-Phi-4-multimodal-instruct,#CEB0FF
+Facebook-Wav2Vec2,facebook/wav2vec2-base-960h,#0A1852
+facebook-wav2vec2,facebook/wav2vec2-base-960h,#0A1852
+Facebook-Data2Vec,facebook/data2vec-audio-base-960h,#0D1F69
+Facebook-Data2Vec,facebook/data2vec-audio-large-960h,#163697
+facebook-data2vec,facebook/data2vec-audio-base-960h,#0D1F69
+Facebook-HuBERT,facebook/hubert-large-ls960-ft,#2052CB
+Facebook-HuBERT,facebook/hubert-xlarge-ls960-ft,#367AF2
+facebook_hubert,facebook/hubert-large-ls960-ft,#2052CB
+Facebook-Omnilingual-ASR,facebook/omniASR-CTC-300M,#58AAFE
+Facebook-Omnilingual-ASR,facebook/omniASR-CTC-1B,#B3E0FF
+Facebook-Omnilingual-ASR,facebook/omniASR-CTC-3B,#D1ECFF
+Facebook-Omnilingual-ASR,facebook/omniASR-CTC-7B,#95D3FF
+Facebook-Omnilingual-ASR,facebook/omniASR-LLM-300M,#0C74A1
+Facebook-Omnilingual-ASR,facebook/omniASR-LLM-1B,#119FC5
+Facebook-Omnilingual-ASR,facebook/omniASR-LLM-3B,#16BBDA
+Facebook-Omnilingual-ASR,facebook/omniASR-LLM-7B,#36DFF1
+Facebook-Omnilingual-ASR,facebook/omniASR-LLM-7B-ZS,#9FF0F9
+lite_asr_trunc,efficient/speech-lite-whisper-large-v3,#B35900
+lite_asr_trunc,efficient/speech-lite-whisper-large-v3-acc,#CC6600
+lite_asr_trunc,efficient/speech-lite-whisper-large-v3-fast,#E67300
+lite_asr_trunc,efficient/speech-lite-whisper-large-v3-turbo,#FF8000
+lite_asr_trunc,efficient/speech-lite-whisper-large-v3-turbo-acc,#FF9933
+lite_asr_trunc,efficient/speech-lite-whisper-large-v3-turbo-fast,#FFB366
+openai-whisper_trunc,openai/whisper-tiny.en,#5D1480
+openai-whisper_trunc,openai/whisper-base.en,#7A1CA8
+openai-whisper_trunc,openai/whisper-small.en,#9827D2
+openai-whisper_trunc,openai/whisper-medium.en,#B44AE8
+openai-whisper_trunc,openai/whisper-large,#C96FF3
+openai-whisper_trunc,openai/whisper-large-v2,#DA94FA
+openai-whisper_trunc,openai/whisper-large-v3,#E8B5FF
+openai-whisper_trunc,distil/whisper-distil-medium.en,#D12545
+openai-whisper_trunc,distil/whisper-distil-large-v2,#E83050
+openai-whisper_trunc,distil/whisper-distil-large-v3,#F5566E

src/display/styling.py

@@ -0,0 +1,46 @@
+"""Styling and color utilities for the leaderboard display."""
+
+import pandas as pd
+
+
+def format_metric_value(value: float | None, fmt: str) -> str:
+    """Format a metric value for display."""
+    if value is None or pd.isna(value):
+        return "--"
+    try:
+        return fmt.format(float(value))
+    except Exception:
+        return f"{value}"
+
+
+def hex_to_rgb(code: str) -> tuple[int, int, int]:
+    """Convert hex color code to RGB tuple."""
+    code = code.lstrip("#")
+    return tuple(int(code[i:i + 2], 16) for i in (0, 2, 4))
+
+
+def rgb_to_hex(rgb: tuple[float, float, float]) -> str:
+    """Convert RGB tuple to hex color code."""
+    return "#" + "".join(f"{max(0, min(255, int(round(channel)))):02x}" for channel in rgb)
+
+
+def interpolate_color(start_hex: str, end_hex: str, ratio: float) -> str:
+    """Interpolate between two colors based on ratio."""
+    ratio = max(0.0, min(1.0, ratio))
+    start = hex_to_rgb(start_hex)
+    end = hex_to_rgb(end_hex)
+    blended = tuple(start[i] + (end[i] - start[i]) * ratio for i in range(3))
+    return rgb_to_hex(blended)
+
+
+def cell_color(value: float | None, minimum: float | None, maximum: float | None, better: str) -> str:
+    """Get cell background color based on value and metric direction."""
+    if value is None or pd.isna(value) or minimum is None or maximum is None:
+        return "#f3f4f6"
+    if abs(maximum - minimum) < 1e-9:
+        ratio = 0.5
+    else:
+        ratio = (float(value) - minimum) / (maximum - minimum)
+    if better == "higher":
+        ratio = 1.0 - ratio
+    return interpolate_color("#d9f7be", "#ffccc7", ratio)

src/display/utils.py

@@ -0,0 +1,80 @@
+from dataclasses import dataclass
+from enum import Enum
+
+
+
+def fields(raw_class):
+    return [v for k, v in raw_class.__dict__.items() if k[:2] != "__" and k[-2:] != "__"]
+
+
+# User-facing column definitions.
+@dataclass
+class ColumnContent:
+    name: str
+    type: str
+    displayed_by_default: bool
+    hidden: bool = False
+    never_hidden: bool = False
+
+
+## For the queue columns in the submission tab
+class EvalQueueColumn:  # Queue column
+    model = ColumnContent("model", "markdown", True)
+    revision = ColumnContent("revision", "str", True)
+    private = ColumnContent("private", "bool", True)
+    precision = ColumnContent("precision", "str", True)
+    weight_type = ColumnContent("weight_type", "str", True)
+    status = ColumnContent("status", "str", True)
+
+## All the model information that we might need
+@dataclass
+class ModelDetails:
+    name: str
+    display_name: str = ""
+    symbol: str = "" # emoji
+
+
+class ModelType(Enum):
+    PT = ModelDetails(name="pretrained", symbol="🟢")
+    FT = ModelDetails(name="fine-tuned", symbol="🔶")
+    IFT = ModelDetails(name="instruction-tuned", symbol="⭕")
+    RL = ModelDetails(name="RL-tuned", symbol="🟦")
+    Unknown = ModelDetails(name="", symbol="?")
+
+    def to_str(self, separator=" "):
+        return f"{self.value.symbol}{separator}{self.value.name}"
+
+    @staticmethod
+    def from_str(type):
+        if "fine-tuned" in type or "🔶" in type:
+            return ModelType.FT
+        if "pretrained" in type or "🟢" in type:
+            return ModelType.PT
+        if "RL-tuned" in type or "🟦" in type:
+            return ModelType.RL
+        if "instruction-tuned" in type or "⭕" in type:
+            return ModelType.IFT
+        return ModelType.Unknown
+
+class WeightType(Enum):
+    Adapter = ModelDetails("Adapter")
+    Original = ModelDetails("Original")
+    Delta = ModelDetails("Delta")
+
+class Precision(Enum):
+    float16 = ModelDetails("float16")
+    bfloat16 = ModelDetails("bfloat16")
+    Unknown = ModelDetails("?")
+
+    @staticmethod
+    def from_str(precision):
+        if precision in ["torch.float16", "float16"]:
+            return Precision.float16
+        if precision in ["torch.bfloat16", "bfloat16"]:
+            return Precision.bfloat16
+        return Precision.Unknown
+
+
+EVAL_COLS = [c.name for c in fields(EvalQueueColumn)]
+EVAL_TYPES = [c.type for c in fields(EvalQueueColumn)]
+

src/envs.py

@@ -0,0 +1,32 @@
+import os
+
+from dotenv import load_dotenv
+from huggingface_hub import HfApi
+
+load_dotenv()
+
+TOKEN = os.environ.get("HF_TOKEN")
+OWNER = os.environ.get("OWNER")
+
+REPO_ID = os.environ.get("REPO_ID")
+QUEUE_REPO = os.environ.get("SUBMISSIONS_REPO")
+RESULTS_REPO = os.environ.get("RESULTS_REPO")
+
+# If you setup a cache later, just change HF_HOME
+CACHE_PATH=os.getenv("HF_HOME", ".")
+
+# Local caches
+EVAL_REQUESTS_PATH = os.path.join(CACHE_PATH, "eval-queue")
+EVAL_RESULTS_PATH = os.path.join(CACHE_PATH, "eval-results")
+EVAL_REQUESTS_PATH_BACKEND = os.path.join(CACHE_PATH, "eval-queue-bk")
+EVAL_RESULTS_PATH_BACKEND = os.path.join(CACHE_PATH, "eval-results-bk")
+
+# Only create API if token is available
+API = HfApi(token=TOKEN) if TOKEN else None
+
+# Flag to enable/disable HuggingFace Hub features
+HF_ENABLED = TOKEN is not None and os.environ.get("DISABLE_HF_HUB", "").lower() != "true"
+
+# Telemetry: Set TELEMETRY_ENABLED=true to enable Azure Application Insights
+TELEMETRY_ENABLED = os.environ.get("TELEMETRY_ENABLED", "false").lower() == "true"
+

src/language_metadata.py

@@ -0,0 +1,35 @@
+from typing import List
+
+from src.constants import COUNTRY_TO_REGION_MAP, LANGUAGE_TO_COUNTRIES_MAP
+
+
+def get_language_countries(language: str) -> List[str]:
+    """Get the list of countries where a language is spoken."""
+    return LANGUAGE_TO_COUNTRIES_MAP.get(language, ["Unknown"])
+
+
+def get_language_regions(language: str) -> List[str]:
+    """Get the list of African regions where a language is spoken."""
+    countries = get_language_countries(language)
+    regions = set()
+    for country in countries:
+        region = COUNTRY_TO_REGION_MAP.get(country)
+        if region:
+            regions.add(region)
+    return list(regions) if regions else ["Unknown"]
+
+
+def get_all_regions() -> List[str]:
+    """Get all unique African regions."""
+    regions = set(COUNTRY_TO_REGION_MAP.values())
+    return sorted(regions)
+
+
+def get_languages_by_region(region: str) -> List[str]:
+    """Get all languages spoken in a specific African region."""
+    countries_in_region = [c for c, r in COUNTRY_TO_REGION_MAP.items() if r == region]
+    languages = set()
+    for lang, countries in LANGUAGE_TO_COUNTRIES_MAP.items():
+        if any(c in countries_in_region for c in countries):
+            languages.add(lang)
+    return list(languages)

src/leaderboard/read_evals.py

@@ -0,0 +1,195 @@
+import glob
+import json
+import os
+from dataclasses import dataclass
+
+import dateutil
+import numpy as np
+
+from src.display.formatting import make_clickable_model
+from src.display.utils import AutoEvalColumn, ModelType, Tasks, Precision, WeightType
+from src.submission.check_validity import is_model_on_hub
+
+
+@dataclass
+class EvalResult:
+    """Represents one full evaluation. Built from a combination of the result and request file for a given run.
+    """
+    eval_name: str # org_model_precision (uid)
+    full_model: str # org/model (path on hub)
+    org: str 
+    model: str
+    revision: str # commit hash, "" if main
+    results: dict
+    precision: Precision = Precision.Unknown
+    model_type: ModelType = ModelType.Unknown # Pretrained, fine tuned, ...
+    weight_type: WeightType = WeightType.Original # Original or Adapter
+    architecture: str = "Unknown" 
+    license: str = "?"
+    likes: int = 0
+    num_params: int = 0
+    date: str = "" # submission date of request file
+    still_on_hub: bool = False
+
+    @classmethod
+    def init_from_json_file(self, json_filepath):
+        """Inits the result from the specific model result file"""
+        with open(json_filepath) as fp:
+            data = json.load(fp)
+
+        config = data.get("config")
+
+        # Precision
+        precision = Precision.from_str(config.get("model_dtype"))
+
+        # Get model and org
+        org_and_model = config.get("model_name", config.get("model_args", None))
+        org_and_model = org_and_model.split("/", 1)
+
+        if len(org_and_model) == 1:
+            org = None
+            model = org_and_model[0]
+            result_key = f"{model}_{precision.value.name}"
+        else:
+            org = org_and_model[0]
+            model = org_and_model[1]
+            result_key = f"{org}_{model}_{precision.value.name}"
+        full_model = "/".join(org_and_model)
+
+        still_on_hub, _, model_config = is_model_on_hub(
+            full_model, config.get("model_sha", "main"), trust_remote_code=True, test_tokenizer=False
+        )
+        architecture = "?"
+        if model_config is not None:
+            architectures = getattr(model_config, "architectures", None)
+            if architectures:
+                architecture = ";".join(architectures)
+
+        # Extract results available in this file (some results are split in several files)
+        results = {}
+        for task in Tasks:
+            task = task.value
+
+            # We average all scores of a given metric (not all metrics are present in all files)
+            accs = np.array([v.get(task.metric, None) for k, v in data["results"].items() if task.benchmark == k])
+            if accs.size == 0 or any([acc is None for acc in accs]):
+                continue
+
+            mean_acc = np.mean(accs)
+            results[task.benchmark] = mean_acc
+
+        return self(
+            eval_name=result_key,
+            full_model=full_model,
+            org=org,
+            model=model,
+            results=results,
+            precision=precision,  
+            revision= config.get("model_sha", ""),
+            still_on_hub=still_on_hub,
+            architecture=architecture
+        )
+
+    def update_with_request_file(self, requests_path):
+        """Finds the relevant request file for the current model and updates info with it"""
+        request_file = get_request_file_for_model(requests_path, self.full_model, self.precision.value.name)
+
+        try:
+            with open(request_file, "r") as f:
+                request = json.load(f)
+            self.model_type = ModelType.from_str(request.get("model_type", ""))
+            self.weight_type = WeightType[request.get("weight_type", "Original")]
+            self.license = request.get("license", "?")
+            self.likes = request.get("likes", 0)
+            self.num_params = request.get("params", 0)
+            self.date = request.get("submitted_time", "")
+        except Exception:
+            print(f"Could not find request file for {self.org}/{self.model} with precision {self.precision.value.name}")
+
+    def to_dict(self):
+        """Converts the Eval Result to a dict compatible with our dataframe display"""
+        average = sum([v for v in self.results.values() if v is not None]) / len(Tasks)
+        data_dict = {
+            "eval_name": self.eval_name,  # not a column, just a save name,
+            AutoEvalColumn.precision.name: self.precision.value.name,
+            AutoEvalColumn.model_type.name: self.model_type.value.name,
+            AutoEvalColumn.model_type_symbol.name: self.model_type.value.symbol,
+            AutoEvalColumn.weight_type.name: self.weight_type.value.name,
+            AutoEvalColumn.architecture.name: self.architecture,
+            AutoEvalColumn.model.name: make_clickable_model(self.full_model),
+            AutoEvalColumn.revision.name: self.revision,
+            AutoEvalColumn.average.name: average,
+            AutoEvalColumn.license.name: self.license,
+            AutoEvalColumn.likes.name: self.likes,
+            AutoEvalColumn.params.name: self.num_params,
+            AutoEvalColumn.still_on_hub.name: self.still_on_hub,
+        }
+
+        for task in Tasks:
+            data_dict[task.value.col_name] = self.results[task.value.benchmark]
+
+        return data_dict
+
+
+def get_request_file_for_model(requests_path, model_name, precision):
+    """Selects the correct request file for a given model. Only keeps runs tagged as FINISHED"""
+    request_files = os.path.join(
+        requests_path,
+        f"{model_name}_eval_request_*.json",
+    )
+    request_files = glob.glob(request_files)
+
+    # Select correct request file (precision)
+    request_file = ""
+    request_files = sorted(request_files, reverse=True)
+    for tmp_request_file in request_files:
+        with open(tmp_request_file, "r") as f:
+            req_content = json.load(f)
+            if (
+                req_content["status"] in ["FINISHED"]
+                and req_content["precision"] == precision.split(".")[-1]
+            ):
+                request_file = tmp_request_file
+    return request_file
+
+
+def get_raw_eval_results(results_path: str, requests_path: str) -> list[EvalResult]:
+    """From the path of the results folder root, extract all needed info for results"""
+    model_result_filepaths = []
+
+    for root, _, files in os.walk(results_path):
+        # We should only have json files in model results
+        if len(files) == 0 or any([not f.endswith(".json") for f in files]):
+            continue
+
+        # Sort the files by date
+        try:
+            files.sort(key=lambda x: x.removesuffix(".json").removeprefix("results_")[:-7])
+        except dateutil.parser._parser.ParserError:
+            files = [files[-1]]
+
+        for file in files:
+            model_result_filepaths.append(os.path.join(root, file))
+
+    eval_results = {}
+    for model_result_filepath in model_result_filepaths:
+        # Creation of result
+        eval_result = EvalResult.init_from_json_file(model_result_filepath)
+        eval_result.update_with_request_file(requests_path)
+
+        # Store results of same eval together
+        eval_name = eval_result.eval_name
+        if eval_name in eval_results.keys():
+            eval_results[eval_name].results.update({k: v for k, v in eval_result.results.items() if v is not None})
+        else:
+            eval_results[eval_name] = eval_result
+
+    results = []
+    for v in eval_results.values():
+        try:
+            v.to_dict() # we test if the dict version is complete
+            results.append(v)
+        except KeyError:  # not all eval values present
+            continue
+
+    return results

src/model_counts.py

@@ -0,0 +1,100 @@
+# Model Parameter Counts Dictionary for PazaBench Leaderboard
+# To be used as bubble sizes in the speech vs accuracy tradeoff chart
+# Last updated with verified HuggingFace model card data
+
+MODEL_PARAMETER_COUNTS = {
+    # Facebook Data2Vec family (based on wav2vec2 architecture)
+    "facebook/data2vec-audio-base-960h": 94_400_000,      # 94.4M
+    "facebook/data2vec-audio-large-960h": 315_000_000,    # ~315M (large architecture)
+    
+    # Facebook MMS (Massively Multilingual Speech) family
+    "facebook/mms-1b-all": 1_000_000_000,                 # 1B params
+    "facebook/mms-1b-fl102": 1_000_000_000,               # 1B params
+    
+    # Facebook Wav2Vec2 family
+    "facebook/wav2vec2-base-960h": 94_400_000,            # 94.4M
+    "facebook/wav2vec2-large-960h": 315_000_000,          # ~315M (large)
+    "facebook/wav2vec2-large-960h-lv60-self": 315_000_000, # ~315M (large)
+    "facebook/wav2vec2-large-robust-ft-libri-960h": 315_000_000,  # ~315M
+    
+    # Facebook Wav2Vec2 Conformer family
+    "facebook/wav2vec2-conformer-rel-pos-large-960h-ft": 600_000_000,  # 600M
+    "facebook/wav2vec2-conformer-rope-large-960h-ft": 600_000_000,     # 600M
+    
+    # Facebook HuBERT family
+    "facebook/hubert-large-ls960-ft": 315_000_000,        # ~315M (large)
+    "facebook/hubert-xlarge-ls960-ft": 1_000_000_000,     # 1B params
+    
+    # IBM Granite Speech family (verified from HF model cards)
+    # Note: Total params include speech encoder + LLM backbone
+    "ibm/granite-granite-speech-3.3-2b": 3_000_000_000,   # 3B params
+    "ibm/granite-granite-speech-3.3-8b": 9_000_000_000,   # 9B params
+    
+    # Kyutai family
+    "kyutai/stt-2.6b-en": 2_600_000_000,                  # 2.6B params
+    
+    # Lite ASR / EfficientSpeech family (Whisper-based compressions)
+    # https://huggingface.co/efficient-speech
+    "efficient/speech-lite-whisper-large-v3": 1_000_000_000,        # ~1B (large-v3 compression)
+    "efficient/speech-lite-whisper-large-v3-acc": 1_000_000_000,    # ~1B (accuracy-optimized)
+    "efficient/speech-lite-whisper-large-v3-fast": 1_000_000_000,   # ~1B (speed-optimized)
+    "efficient/speech-lite-whisper-large-v3-turbo": 600_000_000,    # ~0.6B (turbo compression)
+    "efficient/speech-lite-whisper-large-v3-turbo-acc": 600_000_000,  # ~0.6B (turbo accuracy)
+    "efficient/speech-lite-whisper-large-v3-turbo-fast": 600_000_000, # ~0.6B (turbo fast)
+    
+    # Moonshine family (Useful Sensors)
+    "usefulsensors/moonshine-tiny": 27_100_000,           # 27.1M params
+    "usefulsensors/moonshine-base": 61_500_000,           # 61.5M params
+    
+    # OpenAI Whisper family
+    "openai/whisper-tiny.en": 37_800_000,                 # 37.8M
+    "openai/whisper-base.en": 72_600_000,                 # 72.6M
+    "openai/whisper-small.en": 244_000_000,               # 244M
+    "openai/whisper-medium.en": 769_000_000,              # 769M
+    "openai/whisper-large": 1_550_000_000,                # 1550M
+    "openai/whisper-large-v2": 1_550_000_000,             # 1550M
+    "openai/whisper-large-v3": 1_550_000_000,             # 1550M
+    "openai/whisper-large-v3-turbo": 809_000_000,         # 809M
+    
+    # Distil-Whisper family
+    "distil/whisper-distil-large-v2": 756_000_000,        # 756M
+    "distil/whisper-distil-large-v3": 756_000_000,        # 756M
+    "distil/whisper-distil-medium.en": 394_000_000,       # 394M
+    
+    # Paza family (actual model names from results_summary.csv)
+    "paza/microsoft-paza-Phi-4-multimodal-instruct": 5_600_000_000,  # 5.6B
+    "paza/microsoft-paza-mms-1b-all": 1_000_000_000,      # 1B
+    "paza/microsoft-paza-whisper-large-v3-turbo": 809_000_000,  # 809M
+    
+    # Qwen2 Audio family
+    "Qwen/Qwen2-Audio-7B": 8_000_000_000,                 # 8B params
+    "Qwen/Qwen2-Audio-7B-Instruct": 8_000_000_000,        # 8B params
+    
+    # OmniASR family - CTC models
+    "facebook/omniASR-CTC-300M": 325_494_996,             # 325M
+    "facebook/omniASR-CTC-1B": 975_065_300,               # 975M
+    "facebook/omniASR-CTC-3B": 3_080_423_636,             # 3.08B
+    "facebook/omniASR-CTC-7B": 6_504_786_132,             # 6.5B
+    
+    # OmniASR family - LLM models (encoder-decoder)
+    "facebook/omniASR-LLM-300M": 1_627_603_584,           # 1.6B
+    "facebook/omniASR-LLM-1B": 2_275_710_592,             # 2.3B
+    "facebook/omniASR-LLM-3B": 4_376_679_040,             # 4.4B
+    "facebook/omniASR-LLM-7B": 7_801_041_536,             # 7.8B
+    
+    # OmniASR family - Zero-shot model
+    "facebook/omniASR-LLM-7B-ZS": 7_810_900_608,          # 7.8B
+    
+    # Microsoft Phi-4 family
+    "microsoft/Phi-4-multimodal-instruct": 5_600_000_000, # 5.6B params
+    
+    # NVIDIA NeMo ASR family
+    "nvidia/canary-1b": 1_000_000_000,                    # ~1B (FastConformer encoder-decoder)
+    "nvidia/canary-1b-v2": 1_000_000_000,                 # ~1B params
+    "nvidia/canary-qwen-2.5b": 2_500_000_000,             # 2.5B params
+    "nvidia/parakeet-tdt-0.6b-v2": 600_000_000,           # 600M
+    "nvidia/parakeet-tdt-0.6b-v3": 600_000_000,           # 600M params
+
+    # Seamless M4T family
+    "facebook/seamless-m4t-v2-large": 2_300_000_000,       # 2.3B params
+}

src/populate.py

@@ -0,0 +1,46 @@
+import json
+import os
+
+import pandas as pd
+
+from src.display.formatting import make_clickable_model
+from src.display.utils import EvalQueueColumn
+
+
+def get_evaluation_queue_df(save_path: str, cols: list) -> list[pd.DataFrame]:
+    """Creates the different dataframes for the evaluation queues requestes"""
+    if not os.path.exists(save_path):
+        return pd.DataFrame(columns=cols), pd.DataFrame(columns=cols), pd.DataFrame(columns=cols)
+
+    entries = [entry for entry in os.listdir(save_path) if not entry.startswith(".")]
+    all_evals = []
+
+    for entry in entries:
+        if ".json" in entry:
+            file_path = os.path.join(save_path, entry)
+            with open(file_path) as fp:
+                data = json.load(fp)
+
+            data[EvalQueueColumn.model.name] = make_clickable_model(data["model"])
+            data[EvalQueueColumn.revision.name] = data.get("revision", "main")
+
+            all_evals.append(data)
+        elif ".md" not in entry:
+            # this is a folder
+            sub_entries = [e for e in os.listdir(f"{save_path}/{entry}") if os.path.isfile(e) and not e.startswith(".")]
+            for sub_entry in sub_entries:
+                file_path = os.path.join(save_path, entry, sub_entry)
+                with open(file_path) as fp:
+                    data = json.load(fp)
+
+                data[EvalQueueColumn.model.name] = make_clickable_model(data["model"])
+                data[EvalQueueColumn.revision.name] = data.get("revision", "main")
+                all_evals.append(data)
+
+    pending_list = [e for e in all_evals if e["status"] in ["PENDING", "RERUN"]]
+    running_list = [e for e in all_evals if e["status"] == "RUNNING"]
+    finished_list = [e for e in all_evals if e["status"].startswith("FINISHED") or e["status"] == "PENDING_NEW_EVAL"]
+    df_pending = pd.DataFrame.from_records(pending_list, columns=cols)
+    df_running = pd.DataFrame.from_records(running_list, columns=cols)
+    df_finished = pd.DataFrame.from_records(finished_list, columns=cols)
+    return df_finished[cols], df_running[cols], df_pending[cols]

src/submission/check_validity.py

@@ -0,0 +1,97 @@
+import json
+import os
+from collections import defaultdict
+
+import huggingface_hub
+from huggingface_hub import ModelCard
+from huggingface_hub.hf_api import ModelInfo
+from transformers import AutoConfig
+from transformers.models.auto.tokenization_auto import AutoTokenizer
+
+def check_model_card(repo_id: str) -> tuple[bool, str]:
+    """Checks if the model card and license exist and have been filled"""
+    try:
+        card = ModelCard.load(repo_id)
+    except huggingface_hub.utils.EntryNotFoundError:
+        return False, "Please add a model card to your model to explain how you trained/fine-tuned it."
+
+    # Enforce license metadata
+    if card.data.license is None:
+        if not ("license_name" in card.data and "license_link" in card.data):
+            return False, (
+                "License not found. Please add a license to your model card using the `license` metadata or a"
+                " `license_name`/`license_link` pair."
+            )
+
+    # Enforce card content
+    if len(card.text) < 200:
+        return False, "Please add a description to your model card, it is too short."
+
+    return True, ""
+
+def is_model_on_hub(model_name: str, revision: str, token: str = None, trust_remote_code=False, test_tokenizer=False) -> tuple[bool, str]:
+    """Checks if the model model_name is on the hub, and whether it (and its tokenizer) can be loaded with AutoClasses."""
+    try:
+        config = AutoConfig.from_pretrained(model_name, revision=revision, trust_remote_code=trust_remote_code, token=token)
+        if test_tokenizer:
+            try:
+                AutoTokenizer.from_pretrained(model_name, revision=revision, trust_remote_code=trust_remote_code, token=token)
+            except ValueError as e:
+                return (
+                    False,
+                    f"uses a tokenizer which is not in a transformers release: {e}",
+                    None
+                )
+            except Exception:
+                return (False, "'s tokenizer cannot be loaded. Is your tokenizer class in a stable transformers release, and correctly configured?", None)
+        return True, None, config
+
+    except ValueError:
+        return (
+            False,
+            "needs to be launched with `trust_remote_code=True`. For safety reason, we do not allow these models to be automatically submitted to the leaderboard.",
+            None
+        )
+
+    except Exception:
+        return False, "was not found on hub!", None
+
+
+def get_model_size(model_info: ModelInfo, precision: str):
+    """Gets the model size from the configuration, or the model name if the configuration does not contain the information."""
+    try:
+        model_size = round(model_info.safetensors["total"] / 1e9, 3)
+    except (AttributeError, TypeError):
+        return 0  # Unknown model sizes are indicated as 0, see NUMERIC_INTERVALS in app.py
+
+    size_factor = 8 if (precision == "GPTQ" or "gptq" in model_info.modelId.lower()) else 1
+    model_size = size_factor * model_size
+    return model_size
+
+def get_model_arch(model_info: ModelInfo):
+    """Gets the model architecture from the configuration"""
+    return model_info.config.get("architectures", "Unknown")
+
+def already_submitted_models(requested_models_dir: str) -> set[str]:
+    """Gather a list of already submitted models to avoid duplicates"""
+    depth = 1
+    file_names = []
+    users_to_submission_dates = defaultdict(list)
+
+    for root, _, files in os.walk(requested_models_dir):
+        current_depth = root.count(os.sep) - requested_models_dir.count(os.sep)
+        if current_depth == depth:
+            for file in files:
+                if not file.endswith(".json"):
+                    continue
+                with open(os.path.join(root, file), "r") as f:
+                    info = json.load(f)
+                    file_names.append(f"{info['model']}_{info['revision']}_{info['precision']}")
+
+                    # Select organisation
+                    if info["model"].count("/") == 0 or "submitted_time" not in info:
+                        continue
+                    organisation, _ = info["model"].split("/")
+                    users_to_submission_dates[organisation].append(info["submitted_time"])
+
+    return set(file_names), users_to_submission_dates

src/submission/submit.py

@@ -0,0 +1,181 @@
+import json
+import os
+import re
+from datetime import datetime, timezone
+from urllib.parse import urlparse
+
+from huggingface_hub import dataset_info
+from huggingface_hub.utils import HfHubHTTPError, RepositoryNotFoundError
+
+from src.display.formatting import styled_error, styled_message, styled_warning
+from src.envs import API, EVAL_REQUESTS_PATH, TOKEN, QUEUE_REPO
+
+
+def is_dataset_on_hub(dataset_name: str, token: str = None) -> tuple[bool, str | None]:
+    """Check if a dataset exists on the Hugging Face Hub and is publicly available."""
+    try:
+        info = dataset_info(dataset_name, token=token)
+        if info.private:
+            return False, "is private. Please make the dataset publicly available on Hugging Face Hub."
+        return True, None
+    except RepositoryNotFoundError:
+        return False, "was not found on the Hub!"
+    except HfHubHTTPError as e:
+        return False, f"could not be accessed: {str(e)}"
+    except Exception as e:
+        return False, f"error checking dataset: {str(e)}"
+
+
+def is_valid_url(url: str) -> tuple[bool, str | None]:
+    """Validate URL using urllib.parse with strict scheme enforcement."""
+    if not url or not url.strip():
+        return False, "URL cannot be empty."
+    
+    url = url.strip()
+    
+    try:
+        parsed = urlparse(url)
+        
+        # Strict scheme validation - only http/https allowed
+        if parsed.scheme not in ('http', 'https'):
+            return False, "URL must start with http:// or https://"
+        
+        # Must have a valid network location (domain)
+        if not parsed.netloc:
+            return False, "Invalid URL domain. Please provide a complete URL."
+        
+        # Extract hostname (remove port if present)
+        hostname = parsed.hostname
+        if not hostname or '.' not in hostname:
+            return False, "Invalid URL domain. Please provide a complete URL."
+        
+        # Validate hostname format (alphanumeric, dots, hyphens only)
+        # This blocks javascript:, data:, vbscript: and other injection schemes
+        hostname_parts = hostname.split('.')
+        for part in hostname_parts:
+            if not part or not all(c.isalnum() or c == '-' for c in part):
+                return False, "Invalid domain name in URL."
+            if part.startswith('-') or part.endswith('-'):
+                return False, "Invalid domain name in URL."
+        
+        return True, None
+    except Exception:
+        return False, "Invalid URL format."
+
+
+def add_language_eval_request(
+    location: str,
+    dataset_name: str,
+    dataset_url: str,
+    dataset_config: str,
+    dataset_split: str,
+    audio_column: str,
+    text_column: str,
+    license: str,
+):
+    """Submit a request to evaluate a new language/dataset on all models."""
+    # Validate required fields based on location
+    if not license or not license.strip():
+        return styled_error("Please provide a license for the dataset.")
+    
+    if location == "HuggingFace":
+        # Validate HuggingFace dataset
+        if not dataset_name or not dataset_name.strip():
+            return styled_error("Please provide a dataset name.")
+        
+        dataset_name = dataset_name.strip()
+        if "/" not in dataset_name:
+            return styled_error("Dataset name must be in the format 'owner/dataset-name' (e.g., 'mozilla-foundation/common_voice_13_0').")
+
+        # Check if dataset exists on Hub
+        dataset_on_hub, error = is_dataset_on_hub(dataset_name, token=TOKEN)
+        if not dataset_on_hub:
+            return styled_error(f'Dataset "{dataset_name}" {error}')
+        
+        dataset_identifier = dataset_name
+        dataset_source = "huggingface"
+    else:
+        # Validate external URL
+        if not dataset_url or not dataset_url.strip():
+            return styled_error("Please provide a dataset URL.")
+        
+        valid_url, error = is_valid_url(dataset_url)
+        if not valid_url:
+            return styled_error(error)
+        
+        dataset_url = dataset_url.strip()
+        dataset_identifier = dataset_url
+        dataset_source = "external"
+
+    current_time = datetime.now(timezone.utc).strftime("%Y-%m-%dT%H:%M:%SZ")
+    
+    # Use defaults for optional fields
+    config = dataset_config.strip() if dataset_config and dataset_config.strip() else "default"
+    split = dataset_split.strip() if dataset_split and dataset_split.strip() else "test"
+    audio_col = audio_column.strip() if audio_column and audio_column.strip() else "audio"
+    text_col = text_column.strip() if text_column and text_column.strip() else "text"
+    
+    # Create safe identifier for filename
+    if dataset_source == "huggingface":
+        safe_dataset = dataset_identifier.replace("/", "_").replace(" ", "_")
+    else:
+        # For external URLs, create a safe identifier from the URL
+        safe_dataset = re.sub(r'[^a-zA-Z0-9]', '_', dataset_identifier)[:100]
+    safe_config = config.replace(" ", "_").lower()
+    
+    OUT_DIR = f"{EVAL_REQUESTS_PATH}/language_requests"
+    os.makedirs(OUT_DIR, exist_ok=True)
+    
+    # Check if similar request already exists
+    existing_files = os.listdir(OUT_DIR) if os.path.exists(OUT_DIR) else []
+    for existing_file in existing_files:
+        if existing_file.startswith(f"lang_eval_{safe_dataset}_{safe_config}_"):
+            return styled_warning("A similar evaluation request for this dataset configuration already exists.")
+    
+    # Create language evaluation request entry
+    eval_entry = {
+        "type": "language_evaluation",
+        "source": dataset_source,
+        "dataset": dataset_identifier,
+        "config": config,
+        "split": split,
+        "audio_column": audio_col,
+        "text_column": text_col,
+        "license": license.strip() if license else "",
+        "status": "PENDING",
+        "submitted_time": current_time,
+    }
+
+    # Create unique filename
+    filename = f"lang_eval_{safe_dataset}_{safe_config}_{current_time.replace(':', '-')}.json"
+    
+    print(f"Creating language eval request: {filename}")
+    out_path = f"{OUT_DIR}/{filename}"
+
+    with open(out_path, "w") as f:
+        f.write(json.dumps(eval_entry, indent=2))
+
+    # Upload to Hub if API is available
+    if API:
+        try:
+            print("Uploading language eval request")
+            API.upload_file(
+                path_or_fileobj=out_path,
+                path_in_repo=f"language_requests/{filename}",
+                repo_id=QUEUE_REPO,
+                repo_type="dataset",
+                commit_message=f"Add language evaluation request for {dataset_identifier} ({config})",
+            )
+            os.remove(out_path)
+        except Exception as e:
+            print(f"Could not upload to Hub: {e}")
+            # Keep local file if upload fails
+
+    source_label = "Hugging Face" if dataset_source == "huggingface" else "External URL"
+    return styled_message(
+        f"✅ Your language evaluation request has been submitted!\n\n"
+        f"**Source:** {source_label}\n"
+        f"**Dataset:** {dataset_identifier}\n"
+        f"**Config:** {config}\n\n"
+        f"We will review your request and run evaluations on all supported models."
+    )

src/telemetry.py

@@ -0,0 +1,463 @@
+import os
+import logging
+import uuid
+import threading
+from contextlib import contextmanager
+from datetime import datetime
+from functools import wraps
+from typing import Any, Callable
+
+# Telemetry configuration from environment variables
+TELEMETRY_ENABLED = os.environ.get("TELEMETRY_ENABLED", "false").lower() == "true"
+APPLICATIONINSIGHTS_CONNECTION_STRING = os.environ.get("APPLICATIONINSIGHTS_CONNECTION_STRING", "")
+
+# Debug mode - prints telemetry events to console/docker logs
+TELEMETRY_DEBUG = os.environ.get("TELEMETRY_DEBUG", "false").lower() == "true"
+
+# Cloud role name for Application Insights (required when telemetry is enabled)
+CLOUD_ROLE_NAME = os.environ.get("OTEL_SERVICE_NAME")
+
+# Module-level state
+_telemetry_initialized = False
+_tracer = None
+_meter = None
+_logger = None
+
+# Metric instruments (initialized lazily)
+_counters: dict[str, Any] = {}
+_histograms: dict[str, Any] = {}
+
+# =============================================================================
+# Session Context Management
+# =============================================================================
+
+# Thread-local storage for session context
+_session_context = threading.local()
+
+
+def _generate_event_id() -> str:
+    
+    return str(uuid.uuid4())[:8]
+
+
+def set_session_context(session_hash: str | None) -> str:
+    
+    if session_hash:
+        _session_context.session_id = session_hash[:12]  # Truncate for readability
+    else:
+        # Generate a temporary session ID if none provided
+        if not hasattr(_session_context, 'session_id') or not _session_context.session_id:
+            _session_context.session_id = f"anon_{_generate_event_id()}"
+    return _session_context.session_id
+
+
+def get_session_id() -> str:
+    
+    if not hasattr(_session_context, 'session_id') or not _session_context.session_id:
+        return set_session_context(None)
+    return _session_context.session_id
+
+
+def clear_session_context() -> None:
+    
+    if hasattr(_session_context, 'session_id'):
+        _session_context.session_id = None
+
+
+def _debug_log(message: str) -> None:
+    
+    if TELEMETRY_DEBUG:
+        print(f"[TELEMETRY] {message}", flush=True)
+
+
+def _initialize_telemetry() -> bool:
+    
+    global _telemetry_initialized, _tracer, _meter, _logger
+    
+    if _telemetry_initialized:
+        return True
+    
+    if not TELEMETRY_ENABLED:
+        return False
+    
+    if not APPLICATIONINSIGHTS_CONNECTION_STRING:
+        logging.warning("APPLICATIONINSIGHTS_CONNECTION_STRING not set. Telemetry disabled.")
+        return False
+    
+    if not CLOUD_ROLE_NAME:
+        logging.warning("OTEL_SERVICE_NAME not set. Telemetry disabled.")
+        return False
+    
+    try:
+        from azure.monitor.opentelemetry import configure_azure_monitor
+        from opentelemetry import trace, metrics
+        
+        # Set cloud role name via environment variable (OpenTelemetry standard)
+        os.environ.setdefault("OTEL_SERVICE_NAME", CLOUD_ROLE_NAME)
+        
+        # Configure Azure Monitor OpenTelemetry
+        configure_azure_monitor(
+            connection_string=APPLICATIONINSIGHTS_CONNECTION_STRING,
+            logger_name="pazabench",
+        )
+        
+        # Get tracer and meter
+        _tracer = trace.get_tracer("pazabench.telemetry")
+        _meter = metrics.get_meter("pazabench.telemetry")
+        
+        # Set up logger for custom events
+        _logger = logging.getLogger("pazabench")
+        _logger.setLevel(logging.INFO)
+        
+        _telemetry_initialized = True
+        logging.info(f"Telemetry initialized. Cloud Role Name: {CLOUD_ROLE_NAME}")
+        return True
+        
+    except ImportError as e:
+        logging.warning(f"Azure Monitor OpenTelemetry packages not installed: {e}")
+        return False
+    except Exception as e:
+        logging.warning(f"Failed to initialize telemetry: {e}")
+        return False
+
+
+def _ensure_initialized(func: Callable) -> Callable:
+    
+    @wraps(func)
+    def wrapper(*args, **kwargs):
+        if not _telemetry_initialized:
+            _initialize_telemetry()
+        if not _telemetry_initialized:
+            return None
+        return func(*args, **kwargs)
+    return wrapper
+
+
+# =============================================================================
+# Custom Events - Track user interactions and behavior
+# =============================================================================
+
+@_ensure_initialized
+def track_event(
+    name: str, 
+    properties: dict[str, Any] | None = None,
+    parent_event_id: str | None = None
+) -> str | None:
+    
+    # Generate unique event ID for this event
+    event_id = _generate_event_id()
+    session_id = get_session_id()
+    
+    # Build properties with automatic session and event tracking
+    all_properties: dict[str, Any] = {
+        "event_id": event_id,
+        "session_id": session_id,
+        "timestamp": datetime.utcnow().isoformat() + "Z",
+    }
+    if parent_event_id:
+        all_properties["parent_event_id"] = parent_event_id
+    if properties:
+        all_properties.update(properties)
+    
+    # Debug logging to console/docker logs
+    props_str = ", ".join(f"{k}={v}" for k, v in all_properties.items())
+    _debug_log(f"EVENT: {name} | {props_str}")
+    
+    if not _logger:
+        return event_id
+    
+    extra = {"microsoft.custom_event.name": name}
+    extra.update(all_properties)
+    
+    _logger.info(f"Event: {name}", extra=extra)
+    return event_id
+
+
+@_ensure_initialized
+def track_page_view(page_name: str, properties: dict[str, Any] | None = None) -> None:
+    
+    event_properties = {"page_name": page_name}
+    if properties:
+        event_properties.update(properties)
+    track_event("page_view", event_properties)
+
+
+@_ensure_initialized
+def track_filter_change(
+    filter_type: str,
+    values: list[str] | None,
+    tab: str | None = None
+) -> None:
+    
+    properties = {
+        "filter_type": filter_type,
+        "values_count": len(values) if values else 0,
+        "values": ",".join(values[:10]) if values else "",  # Limit to first 10 for size
+    }
+    if tab:
+        properties["tab"] = tab
+    track_event("filter_change", properties)
+
+
+@_ensure_initialized
+def track_language_interest(
+    language: str,
+    context: str,
+    properties: dict[str, Any] | None = None
+) -> None:
+    
+    event_properties = {"language": language, "context": context}
+    if properties:
+        event_properties.update(properties)
+    track_event("language_interest", event_properties)
+
+
+@_ensure_initialized
+def track_model_interest(
+    model: str,
+    context: str,
+    properties: dict[str, Any] | None = None
+) -> None:
+    
+    event_properties = {"model": model, "context": context}
+    if properties:
+        event_properties.update(properties)
+    track_event("model_interest", event_properties)
+
+
+@_ensure_initialized
+def track_visualization_view(
+    chart_name: str,
+    properties: dict[str, Any] | None = None,
+    languages: list[str] | None = None,
+    models: list[str] | None = None
+) -> str | None:
+    
+    event_properties: dict[str, Any] = {"chart_name": chart_name}
+    
+    # Include languages in the main event (no separate events needed)
+    if languages:
+        event_properties["languages"] = ",".join(languages[:10])  # Limit to 10
+        event_properties["languages_count"] = str(len(languages))
+    
+    # Include models if provided
+    if models:
+        event_properties["models"] = ",".join(models[:10])  # Limit to 10
+        event_properties["models_count"] = str(len(models))
+    
+    if properties:
+        event_properties.update(properties)
+    
+    return track_event("visualization_view", event_properties)
+
+
+@_ensure_initialized
+def track_submission_attempt(
+    dataset_name: str,
+    success: bool,
+    error_message: str | None = None
+) -> None:
+    
+    properties = {
+        "dataset_name": dataset_name,
+        "success": str(success),
+    }
+    if error_message:
+        properties["error_message"] = error_message[:500]  # Limit size
+    track_event("submission_attempt", properties)
+
+
+@_ensure_initialized
+def track_accordion_toggle(accordion_name: str, is_open: bool) -> None:
+    
+    track_event("accordion_toggle", {
+        "accordion_name": accordion_name,
+        "action": "open" if is_open else "close"
+    })
+
+
+@_ensure_initialized
+def track_metric_tab_view(metric: str) -> None:
+    
+    track_event("metric_tab_view", {"metric": metric})
+
+
+@_ensure_initialized  
+def track_view_mode_change(view_mode: str) -> None:
+    
+    track_event("view_mode_change", {"view_mode": view_mode})
+
+
+@_ensure_initialized
+def track_region_filter(regions: list[str] | None) -> None:
+    
+    track_filter_change("african_region", regions, tab="asr_metrics")
+
+
+# =============================================================================
+# Metrics - Track numeric measurements
+# =============================================================================
+
+def _get_counter(name: str, description: str = "") -> Any:
+    
+    if not _meter:
+        return None
+    if name not in _counters:
+        _counters[name] = _meter.create_counter(
+            name,
+            description=description,
+            unit="1"
+        )
+    return _counters[name]
+
+
+def _get_histogram(name: str, description: str = "", unit: str = "ms") -> Any:
+    
+    if not _meter:
+        return None
+    if name not in _histograms:
+        _histograms[name] = _meter.create_histogram(
+            name,
+            description=description,
+            unit=unit
+        )
+    return _histograms[name]
+
+
+@_ensure_initialized
+def track_metric(
+    name: str,
+    value: float,
+    attributes: dict[str, str] | None = None,
+    metric_type: str = "histogram"
+) -> None:
+    
+    attrs = attributes or {}
+    
+    if metric_type == "counter":
+        counter = _get_counter(name, f"Counter for {name}")
+        if counter:
+            counter.add(int(value), attrs)
+    else:
+        histogram = _get_histogram(name, f"Histogram for {name}")
+        if histogram:
+            histogram.record(value, attrs)
+
+
+@_ensure_initialized
+def increment_counter(name: str, attributes: dict[str, str] | None = None) -> None:
+    
+    track_metric(name, 1, attributes, metric_type="counter")
+
+
+# =============================================================================
+# Error Tracking - Track exceptions and errors
+# =============================================================================
+
+@_ensure_initialized
+def track_error(
+    exception: Exception | None = None,
+    properties: dict[str, Any] | None = None,
+    context: str | None = None
+) -> None:
+    
+    # Debug logging
+    exc_info = f"{type(exception).__name__}: {exception}" if exception else "No exception"
+    _debug_log(f"ERROR: context={context} | {exc_info}")
+    
+    if not _tracer:
+        return
+    
+    from opentelemetry.trace import SpanKind
+    
+    error_properties = properties or {}
+    if context:
+        error_properties["context"] = context
+    
+    with _tracer.start_as_current_span(
+        f"error_{context or 'unknown'}",
+        kind=SpanKind.INTERNAL
+    ) as span:
+        if exception:
+            span.record_exception(exception)
+            error_properties["exception_type"] = type(exception).__name__
+            error_properties["exception_message"] = str(exception)[:500]
+        
+        for key, value in error_properties.items():
+            span.set_attribute(f"error.{key}", str(value))
+
+
+# =============================================================================
+# Tracing - Track operations with spans
+# =============================================================================
+
+@contextmanager
+def start_span(name: str, attributes: dict[str, str] | None = None):
+    
+    if not _tracer or not _telemetry_initialized:
+        yield None
+        return
+    
+    with _tracer.start_as_current_span(name) as span:
+        if attributes:
+            for key, value in attributes.items():
+                span.set_attribute(key, str(value))
+        yield span
+
+
+# =============================================================================
+# Utility Functions
+# =============================================================================
+
+def is_telemetry_enabled() -> bool:
+    
+    return _telemetry_initialized
+
+
+def get_telemetry_status() -> dict[str, Any]:
+    
+    return {
+        "enabled": TELEMETRY_ENABLED,
+        "initialized": _telemetry_initialized,
+        "connection_string_set": bool(APPLICATIONINSIGHTS_CONNECTION_STRING),
+        "cloud_role_name": CLOUD_ROLE_NAME,
+    }
+
+
+# =============================================================================
+# Convenience wrapper for tracking in Gradio callbacks
+# =============================================================================
+
+def with_telemetry(event_name: str, **event_props):
+    
+    def decorator(func: Callable) -> Callable:
+        @wraps(func)
+        def wrapper(*args, **kwargs):
+            track_event(event_name, event_props)
+            return func(*args, **kwargs)
+        return wrapper
+    return decorator
+
+
+def init_session_from_request(request) -> str:
+    
+    session_hash = None
+    if request:
+        # Try to get session_hash from gr.Request object
+        session_hash = getattr(request, 'session_hash', None)
+        if not session_hash:
+            # Fallback: try to get from request headers or query params
+            session_hash = getattr(request, 'username', None)
+    return set_session_context(session_hash)
+
+
+def track_page_load(page_name: str, request=None) -> str | None:
+    
+    if request:
+        init_session_from_request(request)
+    return track_page_view(page_name)
+
+
+# Initialize telemetry on module load if enabled
+if TELEMETRY_ENABLED:
+    _initialize_telemetry()

src/visualizations.py

@@ -0,0 +1,1193 @@
+"""
+PazaBench Visualization Functions for Gradio Integration
+"""
+
+import os
+
+import pandas as pd
+import plotly.graph_objects as go
+
+from src.constants import (
+    AFRICAN_COUNTRIES,
+    COUNTRY_NAMES,
+    LANGUAGE_COUNTRY_MAP
+)
+from src.model_counts import MODEL_PARAMETER_COUNTS
+
+
+# Load model family colors from CSV
+def _load_model_family_colors() -> tuple[dict[str, str], dict[str, str]]:
+    """
+    Load color mappings from the model_family_colors.csv file.
+    Returns:
+        - model_family_colors: dict mapping model_family -> color (first color for that family)
+        - model_id_colors: dict mapping model_id -> color
+    """
+    csv_path = os.path.join(os.path.dirname(__file__), 'display', 'model_family_colors.csv')
+    model_family_colors = {}
+    model_id_colors = {}
+    
+    try:
+        df = pd.read_csv(csv_path)
+        for _, row in df.iterrows():
+            family = row['Model Families']
+            model_id = row['Model ID']
+            color = row['Color']
+            
+            # Store first color encountered for each family (using normalized key)
+            normalized_family = _normalize_family_name(family)
+            if normalized_family not in model_family_colors:
+                model_family_colors[normalized_family] = color
+            
+            # Store color for each model ID
+            model_id_colors[model_id] = color
+    except Exception as e:
+        print(f"Warning: Could not load model family colors: {e}")
+    
+    return model_family_colors, model_id_colors
+
+
+def _normalize_family_name(family: str) -> str:
+    """Normalize family name for consistent lookup (lowercase, remove underscores/dashes)."""
+    return family.lower().replace('_', '').replace('-', '').replace(' ', '')
+
+
+MODEL_FAMILY_COLORS, MODEL_ID_COLORS = _load_model_family_colors()
+
+
+def _get_color_for_family(family: str) -> str:
+    """Get color for a model family, with fallback."""
+    normalized = _normalize_family_name(family)
+    return MODEL_FAMILY_COLORS.get(normalized, '#888888')
+
+
+def _get_color_for_model(model_id: str) -> str:
+    """Get color for a specific model ID, with fallback to family color."""
+    if model_id in MODEL_ID_COLORS:
+        return MODEL_ID_COLORS[model_id]
+    # Try to find family and use family color
+    for family, color in MODEL_FAMILY_COLORS.items():
+        if family.lower() in model_id.lower():
+            return color
+    return '#888888'
+
+
+def _remove_wer_outliers(df: pd.DataFrame, multiplier: float = 1.5) -> pd.DataFrame:
+    """
+    Remove WER outliers using IQR method for cleaner visualizations.
+    Only removes HIGH outliers (poor performers), keeps LOW outliers (best performers).
+    
+    Args:
+        df: DataFrame with 'wer' column
+        multiplier: IQR multiplier (default 1.5 for standard outlier detection)
+    
+    Returns:
+        DataFrame with high outliers removed
+    """
+    if df.empty or 'wer' not in df.columns:
+        return df
+    Q1 = df['wer'].quantile(0.25)
+    Q3 = df['wer'].quantile(0.75)
+    IQR = Q3 - Q1
+    # Only remove HIGH outliers (poor performers), keep LOW outliers (best performers)
+    # Lower WER is better, so we don't want to remove low-WER entries
+    upper_bound = Q3 + multiplier * IQR
+    return df[df['wer'] <= upper_bound]
+
+
+def _get_language_sample_counts(asr_df: pd.DataFrame | None = None) -> dict[str, int]:
+    """Derive per-language sample counts from ASR results; returns {} when data is unavailable."""
+    if asr_df is None or asr_df.empty:
+        print("No ASR data available, using default language sample counts.")
+        return {}
+    if 'language' not in asr_df.columns or 'num_samples' not in asr_df.columns:
+        print("Required columns not found in ASR data.")
+        return {}
+
+    dedupe_keys = [column for column in ['language', 'dataset_group', 'split'] if column in asr_df.columns]
+    if not dedupe_keys:
+        dedupe_keys = ['language']
+
+    sample_frame = asr_df[[column for column in set(dedupe_keys + ['num_samples'])]].copy()
+    sample_frame['num_samples'] = pd.to_numeric(sample_frame['num_samples'], errors='coerce').fillna(0)
+    sample_frame = sample_frame.dropna(subset=['language'])
+    sample_frame = sample_frame[sample_frame['language'] != 'Unknown']
+
+    if sample_frame.empty:
+        print("No valid language data found, using default language sample counts.")
+        return {}
+
+    # Dedupe across repeated model rows by taking the max split count before summing by language.
+    unique_counts = sample_frame.groupby(dedupe_keys, dropna=False)['num_samples'].max().reset_index()
+    by_language = unique_counts.groupby('language')['num_samples'].sum()
+
+    counts = {
+        str(language): int(value)
+        for language, value in by_language.items()
+        if pd.notna(value) and float(value) > 0
+    }
+    return counts 
+
+
+def create_language_coverage_chart(
+    selected_languages: list[str] | None = None,
+    asr_df: pd.DataFrame | None = None,
+) -> go.Figure:
+    """
+    Create a horizontal bar chart showing sample counts for each language in PazaBench.
+    Languages are sorted by sample count (descending).
+    Selected languages are highlighted with a different color.
+    
+    Args:
+        selected_languages: List of languages to highlight (None = no highlighting)
+    """
+    # Create dataframe from language sample counts
+    language_counts = _get_language_sample_counts(asr_df)
+    df = pd.DataFrame([
+        {"Language": lang, "Sample Count": count}
+        for lang, count in language_counts.items()
+    ])
+    
+    # Sort by sample count descending
+    df = df.sort_values("Sample Count", ascending=True)  # ascending=True for horizontal bar (bottom to top)
+    
+    # Determine colors - highlight selected languages
+    if selected_languages and len(selected_languages) > 0:
+        colors = [
+            "#0078D4" if lang in selected_languages else "#D0E8FF"
+            for lang in df["Language"]
+        ]
+        # Add border to selected bars
+        line_widths = [2 if lang in selected_languages else 0 for lang in df["Language"]]
+        line_colors = ["#005A9E" if lang in selected_languages else "rgba(0,0,0,0)" for lang in df["Language"]]
+        # Show the sample size on the selected bars.
+        bar_text = [
+            f"{count:,}" if lang in selected_languages else ""
+            for lang, count in zip(df["Language"], df["Sample Count"])
+        ]
+    else:
+        colors = "#8CD0FF"  # Solid blue color matching theme
+        line_widths = 0
+        line_colors = "rgba(0,0,0,0)"
+        bar_text = None
+    
+    fig = go.Figure(go.Bar(
+        y=df["Language"],
+        x=df["Sample Count"],
+        orientation='h',
+        marker=dict(
+            color=colors,
+            line=dict(width=line_widths, color=line_colors) if selected_languages else None,
+        ),
+        text=bar_text,
+        textposition='outside',
+        textfont=dict(size=10),
+        cliponaxis=False,
+        hovertemplate='<b>%{y}</b><br>Samples: %{x:,}<extra></extra>',
+    ))
+    
+    # Build title
+    if selected_languages and len(selected_languages) > 0:
+        title_text = f"Language Coverage in PazaBench ({len(selected_languages)} selected)"
+    else:
+        title_text = "Language Coverage in PazaBench"
+    
+    # One row per language (all labels visible); the container is scrollable in the UI.
+    chart_height = max(600, 26 * len(df) + 140)
+
+    fig.update_layout(
+        title=dict(
+            text=title_text,
+            font=dict(size=16),
+            x=0.5
+        ),
+        xaxis_title="Number of Samples",
+        yaxis=dict(
+            title="",
+            tickmode="linear",
+            dtick=1,
+            tickfont=dict(size=11),
+            automargin=True,
+        ),
+        height=chart_height,
+        autosize=True,
+        margin=dict(l=120, r=70, t=60, b=40),
+        template='plotly_white',
+        showlegend=False,
+    )
+    
+    return fig
+
+
+def _wrap_languages(languages: list[str], per_line: int = 3) -> str:
+    """Wrap a language list across multiple hover lines so it fits inside the map."""
+    if not languages:
+        return "—"
+    return "<br>".join(
+        ", ".join(languages[i:i + per_line]) for i in range(0, len(languages), per_line)
+    )
+
+
+def create_language_location_map(languages: str | list[str] | None = None) -> go.Figure:
+    """
+    Create an interactive choropleth map of Africa. Countries with benchmark data are
+    highlighted (solid blue) with the languages spoken there wrapped in the tooltip;
+    countries without data show "No coverage". When language(s) are selected, the
+    countries where they are spoken are highlighted and the remaining data countries
+    are shown in a lighter shade.
+
+    Args:
+        languages: The language(s) to highlight on the map (single string or list)
+    """
+    fig = go.Figure()
+
+    if isinstance(languages, str):
+        languages = [languages]
+
+    # Which languages are spoken in each country that has benchmark data.
+    country_language_map = {}
+    for lang, codes in LANGUAGE_COUNTRY_MAP.items():
+        for code in codes:
+            country_language_map.setdefault(code, []).append(lang)
+    data_codes = set(country_language_map)
+
+    selected = bool(languages)
+    if selected:
+        highlight_codes = {code for lang in languages for code in LANGUAGE_COUNTRY_MAP.get(lang, [])}
+    else:
+        highlight_codes = set(data_codes)
+
+    # Trace 1 — African countries with no benchmark data: light grey, "No coverage".
+    no_coverage = [code for code in AFRICAN_COUNTRIES if code not in data_codes]
+    if no_coverage:
+        fig.add_trace(go.Choropleth(
+            locations=no_coverage,
+            z=[0] * len(no_coverage),
+            text=[AFRICAN_COUNTRIES.get(code, code) for code in no_coverage],
+            hovertemplate="<b>%{text}</b><br>No coverage<extra></extra>",
+            colorscale=[[0, "#EDF1F5"], [1, "#EDF1F5"]],
+            showscale=False,
+            marker_line_color="white",
+            marker_line_width=0.5,
+        ))
+
+    # Trace 2 — data countries not currently highlighted (selected view only):
+    # lighter blue, still surface their languages so users know they have coverage.
+    if selected:
+        other = sorted(data_codes - highlight_codes)
+        if other:
+            fig.add_trace(go.Choropleth(
+                locations=other,
+                z=[0] * len(other),
+                text=[COUNTRY_NAMES.get(code, code) for code in other],
+                customdata=[_wrap_languages(sorted(country_language_map[code])) for code in other],
+                hovertemplate="<b>%{text}</b><br>Languages: %{customdata}<extra></extra>",
+                colorscale=[[0, "#DCEEFB"], [1, "#DCEEFB"]],
+                showscale=False,
+                marker_line_color="white",
+                marker_line_width=0.5,
+            ))
+
+    # Trace 3 — highlighted countries: solid blue with a wrapped language tooltip.
+    highlight = sorted(highlight_codes)
+    if highlight:
+        customdata = []
+        for code in highlight:
+            if selected:
+                langs = [lang for lang in languages if code in LANGUAGE_COUNTRY_MAP.get(lang, [])]
+            else:
+                langs = sorted(country_language_map.get(code, []))
+            customdata.append(_wrap_languages(langs))
+        fig.add_trace(go.Choropleth(
+            locations=highlight,
+            z=[1] * len(highlight),
+            text=[COUNTRY_NAMES.get(code, code) for code in highlight],
+            customdata=customdata,
+            hovertemplate="<b>%{text}</b><br>Languages: %{customdata}<extra></extra>",
+            colorscale=[[0, "#8CD0FF"], [1, "#8CD0FF"]],
+            showscale=False,
+            marker_line_color="white",
+            marker_line_width=0.5,
+        ))
+
+    if selected and highlight:
+        if len(languages) == 1:
+            title_text = f"Where {languages[0]} is spoken"
+        else:
+            title_text = f"Where {len(languages)} selected languages are spoken"
+    else:
+        title_text = "Select a language to explore"
+
+    fig.update_geos(
+        visible=True,
+        resolution=50,
+        scope="africa",
+        showcountries=True,
+        countrycolor="lightgray",
+        showcoastlines=True,
+        coastlinecolor="gray",
+        showland=True,
+        landcolor="#f5f5f5",
+        showocean=True,
+        oceancolor="#e3f2fd",
+        showlakes=True,
+        lakecolor="#e3f2fd",
+        projection_type="natural earth",
+        center=dict(lat=5, lon=20),
+    )
+
+    fig.update_layout(
+        title=dict(
+            text=title_text,
+            font=dict(size=16),
+            x=0.5
+        ),
+        height=600,
+        autosize=True,
+        margin=dict(l=5, r=5, t=50, b=5),
+        geo=dict(
+            bgcolor="rgba(0,0,0,0)",
+        )
+    )
+    
+    # Use SVG renderer for better resolution
+    fig.update_layout(
+        template="plotly_white",
+    )
+
+    return fig
+
+
+def get_language_sample_info(languages: str | list[str] | None = None, asr_df: pd.DataFrame | None = None) -> str:
+    """
+    Get the sample count information for specific language(s) as styled HTML.
+    Returns HTML for display in Gradio.
+    
+    Args:
+        languages: The language(s) to get information for (single string or list)
+        asr_df: DataFrame with ASR results to extract dataset groups
+    """
+    # Normalize to list
+    if isinstance(languages, str):
+        languages = [languages]
+    
+    language_counts = _get_language_sample_counts(asr_df)
+
+    if languages and len(languages) > 0:
+        # Filter to valid languages
+        valid_languages = [lang for lang in languages if lang in language_counts]
+        
+        if valid_languages:
+            # Aggregate data across all selected languages
+            total_samples = sum(language_counts.get(lang, 0) for lang in valid_languages)
+            all_countries = set()
+            for lang in valid_languages:
+                all_countries.update(LANGUAGE_COUNTRY_MAP.get(lang, []))
+            country_names = sorted([COUNTRY_NAMES.get(code, code) for code in all_countries])
+            
+            # Get dataset groups from ASR data if available
+            dataset_groups = set()
+            if asr_df is not None and not asr_df.empty and 'language' in asr_df.columns:
+                for lang in valid_languages:
+                    lang_data = asr_df[asr_df['language'] == lang]
+                    if not lang_data.empty and 'dataset_group' in lang_data.columns:
+                        dataset_groups.update(lang_data['dataset_group'].unique().tolist())
+            dataset_groups = sorted(dataset_groups)
+            
+            # Build title based on number of languages
+            if len(valid_languages) == 1:
+                title = f"🌍 {valid_languages[0]}"
+            else:
+                title = f"🌍 {', '.join(sorted(valid_languages))}"
+            
+            html = f"""
+            <div style="background: linear-gradient(135deg, #DDF1FF 0%, #ffffff 100%); border-radius: 12px; padding: 20px; border: 1px solid #8CD0FF;">
+                <h4 style="margin: 0 0 16px 0; color: #0f172a; font-size: 1.1em; font-weight: 600; border-bottom: 2px solid #8CD0FF; padding-bottom: 8px;">
+                    {title}
+                </h4>
+                
+                <div style="display: grid; gap: 12px;">
+                    <div style="background: white; padding: 12px 16px; border-radius: 8px; display: flex; justify-content: space-between; align-items: center;">
+                        <span style="color: #666; font-weight: 500; font-size: 0.9rem;">📊 Total Samples</span>
+                        <span style="color: #0f172a; font-weight: 700; font-size: 0.9rem;">{total_samples:,}</span>
+                    </div>
+                    
+                    <div style="background: white; padding: 12px 16px; border-radius: 8px;">
+                        <div style="color: #666; font-weight: 500; margin-bottom: 6px; font-size: 0.9rem;">📍 Countries ({len(country_names)})</div>
+                        <div style="color: #0f172a; font-weight: 500; font-size: 0.9rem;">{', '.join(country_names) if country_names else 'N/A'}</div>
+                    </div>
+                    
+                    <div style="background: white; padding: 12px 16px; border-radius: 8px;">
+                        <div style="color: #666; font-weight: 500; margin-bottom: 6px; font-size: 0.9rem;">📁 Dataset Sources ({len(dataset_groups)})</div>
+                        <div style="color: #0f172a; font-size: 0.9rem;">
+                            {(', '.join(dataset_groups) if dataset_groups else '<em>No dataset info available</em>')}
+                        </div>
+                    </div>
+                </div>
+            </div>
+            """
+            return html
+    
+    # Default view - show sample overview summary
+    total_languages = len(language_counts)
+    total_samples = sum(language_counts.values())
+    total_countries = len(set(code for codes in LANGUAGE_COUNTRY_MAP.values() for code in codes))
+    
+    html = f"""
+    <div style="background: linear-gradient(135deg, #f0f9ff 0%, #ffffff 100%); border-radius: 12px; padding: 20px; border: 1px solid #e0e7ef;">
+            <h4 style="margin: 0 0 16px 0; color: #0f172a; font-size: 1.1em; font-weight: 600; border-bottom: 2px solid #8CD0FF; padding-bottom: 8px;">
+                📊 Sample Overview
+            </h4>
+            
+            <div style="display: grid; gap: 10px; margin-bottom: 16px;">
+                <div style="background: white; padding: 10px 14px; border-radius: 8px; display: flex; justify-content: space-between; align-items: center; border: 1px solid #e5e7eb;">
+                    <span style="color: #666; font-weight: 500; font-size: 0.9rem;">🌍 Languages</span>
+                    <span style="color: #0f172a; font-weight: 700; font-size: 0.9rem;">{total_languages}</span>
+                </div>
+                <div style="background: white; padding: 10px 14px; border-radius: 8px; display: flex; justify-content: space-between; align-items: center; border: 1px solid #e5e7eb;">
+                    <span style="color: #666; font-weight: 500; font-size: 0.9rem;">📊 Total Samples</span>
+                    <span style="color: #0f172a; font-weight: 700; font-size: 0.9rem;">{total_samples:,}</span>
+                </div>
+                <div style="background: white; padding: 10px 14px; border-radius: 8px; display: flex; justify-content: space-between; align-items: center; border: 1px solid #e5e7eb;">
+                    <span style="color: #666; font-weight: 500; font-size: 0.9rem;">📍 Countries</span>
+                    <span style="color: #0f172a; font-weight: 700; font-size: 0.9rem;">{total_countries}</span>
+                </div>
+            </div>
+            
+            <p style="margin: 14px 0 0 0; font-size: 0.85rem; color: #666; font-style: italic; text-align: center;">
+                👈 Select a language on the left to explore its details
+            </p>
+        </div>
+        """
+    
+    return html
+
+
+def get_language_sample_info_df(language: str | None = None, asr_df: pd.DataFrame | None = None) -> pd.DataFrame:
+    """Return language sample info as a DataFrame."""
+    language_counts = _get_language_sample_counts(asr_df)
+    if language and language in language_counts:
+        sample_count = language_counts[language]
+        countries = LANGUAGE_COUNTRY_MAP.get(language, [])
+        country_names = [COUNTRY_NAMES.get(code, code) for code in countries]
+        
+        df = pd.DataFrame({
+            "Metric": ["Language", "Total Samples", "Countries"],
+            "Value": [
+                language,
+                f"{sample_count:,}",
+                ", ".join(country_names) if country_names else "N/A"
+            ]
+        })
+    else:
+        df = pd.DataFrame({
+            "Metric": ["Language", "Total Samples", "Countries"],
+            "Value": ["Select a language", "-", "-"]
+        })
+    
+    return df
+
+
+def get_all_languages(asr_df: pd.DataFrame | None = None) -> list[str]:
+    """Get a sorted list of all languages in PazaBench."""
+    return sorted(_get_language_sample_counts(asr_df).keys())
+
+
+def create_africa_language_map() -> go.Figure:
+    """
+    Create an interactive choropleth map of Africa showing language coverage.
+    Hover over countries to see the languages spoken there.
+    """
+    # Build country data with languages
+    country_data = {}
+    for language, countries in LANGUAGE_COUNTRY_MAP.items():
+        for country_code in countries:
+            if country_code not in country_data:
+                country_data[country_code] = {
+                    "languages": [],
+                    "count": 0,
+                    "country_name": COUNTRY_NAMES.get(country_code, country_code)
+                }
+            country_data[country_code]["languages"].append(language)
+            country_data[country_code]["count"] += 1
+
+    # Create dataframe for plotly
+    df_map = pd.DataFrame([
+        {
+            "country_code": code,
+            "country_name": data["country_name"],
+            "language_count": data["count"],
+            "languages": ", ".join(sorted(data["languages"]))
+        }
+        for code, data in country_data.items()
+    ])
+
+    fig = go.Figure(go.Choropleth(
+        locations=df_map["country_code"],
+        z=df_map["language_count"],
+        text=df_map["country_name"],
+        customdata=df_map[["languages", "language_count"]],
+        hovertemplate="<b>%{text}</b><br>" +
+                      "Languages: %{customdata[1]}<br>" +
+                      "<i>%{customdata[0]}</i><extra></extra>",
+        colorscale=[
+            [0, "#DDF1FF"],
+            [0.25, "#B5E0FF"],
+            [0.5, "#8CD0FF"],
+            [0.75, "#6BC0F5"],
+            [1, "#4AAFEB"]
+        ],
+        showscale=True,
+        colorbar=dict(
+            title="Languages",
+            tickmode="linear",
+            tick0=1,
+            dtick=1
+        ),
+        marker_line_color="white",
+        marker_line_width=0.5,
+    ))
+
+    fig.update_geos(
+        visible=True,
+        resolution=50,
+        scope="africa",
+        showcountries=True,
+        countrycolor="lightgray",
+        showcoastlines=True,
+        coastlinecolor="gray",
+        showland=True,
+        landcolor="#f5f5f5",
+        showocean=True,
+        oceancolor="#e3f2fd",
+        showlakes=True,
+        lakecolor="#e3f2fd",
+        projection_type="natural earth",
+        center=dict(lat=5, lon=20),
+    )
+
+    fig.update_layout(
+        title=dict(
+            text="African Languages in PazaBench",
+            font=dict(size=18),
+            x=0.5
+        ),
+        height=600,
+        autosize=True,
+        margin=dict(l=5, r=5, t=50, b=5),
+        geo=dict(
+            bgcolor="rgba(0,0,0,0)",
+        ),
+        template="plotly_white",
+    )
+
+    return fig
+
+
+def create_model_leaderboard(df: pd.DataFrame, languages: list[str] | None = None, top_n_models: int = 15) -> go.Figure:
+    """
+    Visualization 1: Model Family / Individual Model Performance Leaderboard
+    - When no language filter: Shows model families (aggregated)
+    - When language(s) selected: Shows top N individual models
+    
+    Outliers are removed for cleaner visualization.
+    
+    Args:
+        df: DataFrame with evaluation results
+        languages: List of languages to filter by (None = all languages)
+        top_n_models: Number of top individual models to show when languages are filtered (default: 15)
+    """
+    # Apply language filter if provided
+    filtered_df = df.copy()
+    if languages:
+        filtered_df = filtered_df[filtered_df['language'].isin(languages)]
+    
+    # Remove WER outliers for cleaner visualization
+    filtered_df = _remove_wer_outliers(filtered_df)
+    
+    # Determine mode: individual models if languages selected, otherwise model families
+    show_individual_models = languages is not None and len(languages) > 0
+    
+    if show_individual_models:
+        # Individual model mode: show top N models by median WER
+        model_perf = filtered_df.groupby(['model_family', 'model']).agg({
+            'wer': ['median', 'std', 'count'],
+            'cer': 'median',
+            'rtfx': 'median'
+        }).reset_index()
+        
+        # Get unique sample counts per model
+        unique_samples = filtered_df.groupby(['model_family', 'model', 'language', 'dataset_group'])['num_samples'].first().reset_index()
+        model_samples = unique_samples.groupby(['model_family', 'model'])['num_samples'].sum().reset_index()
+        model_samples.columns = ['model_family', 'model', 'total_samples']
+        
+        model_perf.columns = ['model_family', 'model', 'wer_median', 'wer_std', 'count', 'cer_median', 'rtfx_median']
+        model_perf = model_perf.merge(model_samples, on=['model_family', 'model'], how='left')
+        model_perf = model_perf.sort_values('wer_median').head(top_n_models)
+        
+        # Create short model name for display
+        model_perf['model_short'] = model_perf['model'].apply(
+            lambda x: x.split('/')[-1] if '/' in x else x
+        )
+        
+        # Get colors for each model based on family
+        model_perf['color'] = model_perf['model_family'].apply(_get_color_for_family)
+        
+        fig = go.Figure()
+        
+        fig.add_trace(go.Bar(
+            y=model_perf['model_short'],
+            x=model_perf['wer_median'],
+            orientation='h',
+            marker=dict(color=model_perf['color']),
+            text=model_perf['wer_median'].round(2),
+            textposition='outside',
+            hovertemplate=(
+                '<b>%{customdata[0]}</b><br>' +
+                '<i>Family: %{customdata[1]}</i><br><br>' +
+                '<b>Median WER:</b> %{x:.3f}<br>' +
+                '<b>RTFx:</b> %{customdata[2]:.1f}<br>' +
+                '<b>Evaluations:</b> %{customdata[3]}<br>' +
+                '<b>Samples:</b> %{customdata[4]:,}<extra></extra>'
+            ),
+            customdata=model_perf[['model', 'model_family', 'rtfx_median', 'count', 'total_samples']]
+        ))
+        
+        # Build title with language info (languages is guaranteed to be non-empty here)
+        lang_list = languages if languages else []
+        lang_str = ", ".join(lang_list[:3]) + ("..." if len(lang_list) > 3 else "")
+        title_text = f"Top {min(top_n_models, len(model_perf))} Models for {lang_str}"
+        
+    else:
+        # Model family mode
+        model_perf = filtered_df.groupby('model_family').agg({
+            'wer': ['median', 'std', 'count'],
+            'cer': 'median',
+            'rtfx': 'median'
+        }).reset_index()
+        
+        # Get unique sample counts per model family (avoid double-counting across models)
+        unique_samples = filtered_df.groupby(['model_family', 'language', 'dataset_group'])['num_samples'].first().reset_index()
+        family_samples = unique_samples.groupby('model_family')['num_samples'].sum().reset_index()
+        family_samples.columns = ['model_family', 'total_samples']
+        
+        model_perf.columns = ['model_family', 'wer_median', 'wer_std', 'count', 'cer_median', 'rtfx_median']
+        model_perf = model_perf.merge(family_samples, on='model_family', how='left')
+        model_perf = model_perf.sort_values('wer_median')
+        
+        # Get colors for each model family
+        model_perf['color'] = model_perf['model_family'].apply(_get_color_for_family)
+
+        fig = go.Figure()
+
+        fig.add_trace(go.Bar(
+            y=model_perf['model_family'],
+            x=model_perf['wer_median'],
+            orientation='h',
+            error_x=dict(type='data', array=model_perf['wer_std']),
+            marker=dict(color=model_perf['color']),
+            text=model_perf['wer_median'].round(2),
+            textposition='outside',
+            hovertemplate=(
+                '<b>%{y}</b><br><br>' +
+                '<b>Median WER:</b> %{x:.3f}<br>' +
+                '<b>Std Dev:</b> %{customdata[0]:.3f}<br>' +
+                '<b>RTFx:</b> %{customdata[1]:.1f}<br>' +
+                '<b>Evaluations:</b> %{customdata[2]}<br>' +
+                '<b>Samples:</b> %{customdata[3]:,}<extra></extra>'
+            ),
+            customdata=model_perf[['wer_std', 'rtfx_median', 'count', 'total_samples']]
+        ))
+        
+        title_text = "Model Family Performance Leaderboard"
+    
+    # Calculate dynamic height based on number of items
+    num_items = len(model_perf)
+    height = max(400, min(700, 100 + num_items * 35))
+
+    fig.update_layout(
+        title=title_text,
+        xaxis_title="Word Error Rate (WER)",
+        yaxis_title="",
+        height=height,
+        autosize=True,
+        showlegend=False,
+        template='plotly_white',
+        margin=dict(l=200, r=30, t=60, b=60)
+    )
+
+    return fig
+
+
+def create_cer_leaderboard(df: pd.DataFrame, languages: list[str] | None = None, top_n_models: int = 15) -> go.Figure:
+    """
+    Visualization: CER Model Family / Individual Model Performance Leaderboard
+    - When no language filter: Shows model families (aggregated)
+    - When language(s) selected: Shows top N individual models
+    
+    Outliers are removed for cleaner visualization.
+    
+    Args:
+        df: DataFrame with evaluation results
+        languages: List of languages to filter by (None = all languages)
+        top_n_models: Number of top individual models to show when languages are filtered (default: 15)
+    """
+    # Apply language filter if provided
+    filtered_df = df.copy()
+    if languages:
+        filtered_df = filtered_df[filtered_df['language'].isin(languages)]
+    
+    # Remove CER outliers for cleaner visualization (similar to WER outlier removal)
+    if not filtered_df.empty and 'cer' in filtered_df.columns:
+        Q1 = filtered_df['cer'].quantile(0.25)
+        Q3 = filtered_df['cer'].quantile(0.75)
+        IQR = Q3 - Q1
+        upper_bound = Q3 + 1.5 * IQR
+        filtered_df = filtered_df[filtered_df['cer'] <= upper_bound]
+    
+    # Determine mode: individual models if languages selected, otherwise model families
+    show_individual_models = languages is not None and len(languages) > 0
+    
+    if show_individual_models:
+        # Individual model mode: show top N models by median CER
+        model_perf = filtered_df.groupby(['model_family', 'model']).agg({
+            'cer': ['median', 'std', 'count'],
+            'wer': 'median',
+            'rtfx': 'median'
+        }).reset_index()
+        
+        # Get unique sample counts per model
+        unique_samples = filtered_df.groupby(['model_family', 'model', 'language', 'dataset_group'])['num_samples'].first().reset_index()
+        model_samples = unique_samples.groupby(['model_family', 'model'])['num_samples'].sum().reset_index()
+        model_samples.columns = ['model_family', 'model', 'total_samples']
+        
+        model_perf.columns = ['model_family', 'model', 'cer_median', 'cer_std', 'count', 'wer_median', 'rtfx_median']
+        model_perf = model_perf.merge(model_samples, on=['model_family', 'model'], how='left')
+        model_perf = model_perf.sort_values('cer_median').head(top_n_models)
+        
+        # Create short model name for display
+        model_perf['model_short'] = model_perf['model'].apply(
+            lambda x: x.split('/')[-1] if '/' in x else x
+        )
+        
+        # Get colors for each model based on family
+        model_perf['color'] = model_perf['model_family'].apply(_get_color_for_family)
+        
+        fig = go.Figure()
+        
+        fig.add_trace(go.Bar(
+            y=model_perf['model_short'],
+            x=model_perf['cer_median'],
+            orientation='h',
+            marker=dict(color=model_perf['color']),
+            text=model_perf['cer_median'].round(2),
+            textposition='outside',
+            hovertemplate=(
+                '<b>%{customdata[0]}</b><br>' +
+                '<i>Family: %{customdata[1]}</i><br><br>' +
+                '<b>Median CER:</b> %{x:.3f}<br>' +
+                '<b>WER:</b> %{customdata[2]:.3f}<br>' +
+                '<b>RTFx:</b> %{customdata[3]:.1f}<br>' +
+                '<b>Evaluations:</b> %{customdata[4]}<br>' +
+                '<b>Samples:</b> %{customdata[5]:,}<extra></extra>'
+            ),
+            customdata=model_perf[['model', 'model_family', 'wer_median', 'rtfx_median', 'count', 'total_samples']]
+        ))
+        
+        # Build title with language info (languages is guaranteed to be non-empty here)
+        lang_list = languages if languages else []
+        lang_str = ", ".join(lang_list[:3]) + ("..." if len(lang_list) > 3 else "")
+        title_text = f"Top {min(top_n_models, len(model_perf))} Models by CER for {lang_str}"
+        
+    else:
+        # Model family mode
+        model_perf = filtered_df.groupby('model_family').agg({
+            'cer': ['median', 'std', 'count'],
+            'wer': 'median',
+            'rtfx': 'median'
+        }).reset_index()
+        
+        # Get unique sample counts per model family (avoid double-counting across models)
+        unique_samples = filtered_df.groupby(['model_family', 'language', 'dataset_group'])['num_samples'].first().reset_index()
+        family_samples = unique_samples.groupby('model_family')['num_samples'].sum().reset_index()
+        family_samples.columns = ['model_family', 'total_samples']
+        
+        model_perf.columns = ['model_family', 'cer_median', 'cer_std', 'count', 'wer_median', 'rtfx_median']
+        model_perf = model_perf.merge(family_samples, on='model_family', how='left')
+        model_perf = model_perf.sort_values('cer_median')
+        
+        # Get colors for each model family
+        model_perf['color'] = model_perf['model_family'].apply(_get_color_for_family)
+
+        fig = go.Figure()
+
+        fig.add_trace(go.Bar(
+            y=model_perf['model_family'],
+            x=model_perf['cer_median'],
+            orientation='h',
+            error_x=dict(type='data', array=model_perf['cer_std']),
+            marker=dict(color=model_perf['color']),
+            text=model_perf['cer_median'].round(2),
+            textposition='outside',
+            hovertemplate=(
+                '<b>%{y}</b><br><br>' +
+                '<b>Median CER:</b> %{x:.3f}<br>' +
+                '<b>Std Dev:</b> %{customdata[0]:.3f}<br>' +
+                '<b>WER:</b> %{customdata[1]:.3f}<br>' +
+                '<b>RTFx:</b> %{customdata[2]:.1f}<br>' +
+                '<b>Evaluations:</b> %{customdata[3]}<br>' +
+                '<b>Samples:</b> %{customdata[4]:,}<extra></extra>'
+            ),
+            customdata=model_perf[['cer_std', 'wer_median', 'rtfx_median', 'count', 'total_samples']]
+        ))
+        
+        title_text = "Model Family Performance by CER"
+    
+    # Calculate dynamic height based on number of items
+    num_items = len(model_perf)
+    height = max(400, min(700, 100 + num_items * 35))
+
+    fig.update_layout(
+        title=title_text,
+        xaxis_title="Character Error Rate (CER)",
+        yaxis_title="",
+        height=height,
+        autosize=True,
+        showlegend=False,
+        template='plotly_white',
+        margin=dict(l=200, r=30, t=60, b=60)
+    )
+
+    return fig
+
+
+def create_speed_accuracy_scatter(df: pd.DataFrame, view_mode: str = "model_family", languages: list[str] | None = None) -> go.Figure:
+    """
+    Visualization 2: Speed vs Accuracy Tradeoff
+    Scatter plot showing the relationship between WER and RTFx with quadrants.
+    Outliers are removed for cleaner visualization.
+    
+    Args:
+        df: DataFrame with evaluation results
+        view_mode: Either "model_family" (bubbles same size per family, color by family) or
+                   "individual_model" (bubble size = model params, color = model family)
+        languages: List of languages to filter by (None = all languages)
+    """
+    # Apply language filter if provided
+    if languages:
+        df = df[df['language'].isin(languages)]
+    
+    # Remove WER outliers for cleaner visualization
+    df = _remove_wer_outliers(df)
+    if view_mode == "individual_model":
+        # Aggregate by individual model
+        model_agg = df.groupby(['model_family', 'model']).agg({
+            'wer': 'median',
+            'rtfx': 'median',
+            'cer': 'median',
+        }).reset_index()
+        
+        # Get unique sample counts per model
+        unique_samples = df.groupby(['model_family', 'model', 'language', 'dataset_group'])['num_samples'].first().reset_index()
+        model_samples = unique_samples.groupby(['model_family', 'model'])['num_samples'].sum().reset_index()
+        model_samples.columns = ['model_family', 'model', 'num_samples']
+        model_agg = model_agg.merge(model_samples, on=['model_family', 'model'], how='left')
+        
+        # Get parameter count for each individual model
+        model_agg['params'] = model_agg['model'].apply(
+            lambda m: MODEL_PARAMETER_COUNTS.get(m, 500_000_000)  # Default 500M
+        )
+        model_agg['params_billions'] = model_agg['params'] / 1_000_000_000
+        model_agg['params_display'] = model_agg['params'].apply(
+            lambda x: f"{x/1_000_000_000:.1f}B" if x >= 1_000_000_000 else f"{x/1_000_000:.0f}M"
+        )
+        
+        # Create short model name for display
+        model_agg['model_short'] = model_agg['model'].apply(
+            lambda x: x.split('/')[-1] if '/' in x else x
+        )
+        
+        fig = go.Figure()
+        
+        # Add scatter traces for each model family
+        for family in model_agg['model_family'].unique():
+            family_data = model_agg[model_agg['model_family'] == family]
+            family_color = _get_color_for_family(family)
+            fig.add_trace(go.Scatter(
+                x=family_data['wer'],
+                y=family_data['rtfx'],
+                mode='markers',
+                name=family,
+                marker=dict(
+                    size=family_data['params'] / family_data['params'].max() * 50 + 10,
+                    sizemode='diameter',
+                    sizemin=8,
+                    color=family_color
+                ),
+                customdata=family_data[['model_short', 'cer', 'num_samples', 'params_display']].values,
+                hovertemplate=(
+                    '<b>%{customdata[0]}</b><br><br>' +
+                    '<b>WER:</b> %{x:.3f}<br>' +
+                    '<b>RTFx:</b> %{y:.1f}<br>' +
+                    '<b>CER:</b> %{customdata[1]:.3f}<br>' +
+                    '<b>Samples:</b> %{customdata[2]:,}<br>' +
+                    '<b>Parameters:</b> %{customdata[3]}<extra></extra>'
+                )
+            ))
+        
+        title_text = "Speed vs Accuracy Tradeoff by Individual Model"
+    else:
+        # Aggregate by model family
+        model_agg = df.groupby('model_family').agg({
+            'wer': 'median',
+            'rtfx': 'median',
+            'cer': 'median',
+            'model': 'first'  # Get a representative model name for parameter lookup
+        }).reset_index()
+        
+        # Get unique sample counts per model family
+        unique_samples = df.groupby(['model_family', 'language', 'dataset_group'])['num_samples'].first().reset_index()
+        family_samples = unique_samples.groupby('model_family')['num_samples'].sum().reset_index()
+        family_samples.columns = ['model_family', 'num_samples']
+        model_agg = model_agg.merge(family_samples, on='model_family', how='left')
+        
+        # For model family view, use a uniform size (no bubble size variation)
+        # Use a constant for params to make bubbles the same size
+        model_agg['params'] = 1_000_000_000  # Use constant 1B for uniform bubble size
+        model_agg['params_display'] = 'N/A'  # Not applicable in family view
+        
+        fig = go.Figure()
+        
+        # Add scatter traces for each model family
+        for family in model_agg['model_family'].unique():
+            family_data = model_agg[model_agg['model_family'] == family]
+            family_color = _get_color_for_family(family)
+            fig.add_trace(go.Scatter(
+                x=family_data['wer'],
+                y=family_data['rtfx'],
+                mode='markers',
+                name=family,
+                marker=dict(
+                    size=20,
+                    sizemode='diameter',
+                    color=family_color
+                ),
+                customdata=family_data[['cer', 'num_samples']].values,
+                hovertemplate=(
+                    '<b>' + family + '</b><br><br>' +
+                    '<b>WER:</b> %{x:.3f}<br>' +
+                    '<b>RTFx:</b> %{y:.1f}<br>' +
+                    '<b>CER:</b> %{customdata[0]:.3f}<br>' +
+                    '<b>Samples:</b> %{customdata[1]:,}<extra></extra>'
+                )
+            ))
+        
+        title_text = "Speed vs Accuracy Tradeoff by Model Family"
+
+    # Add quadrant lines at median
+    median_wer = model_agg['wer'].median()
+    median_rtfx = model_agg['rtfx'].median()
+
+    fig.add_hline(y=median_rtfx, line_dash="dash", line_color="gray", annotation_text="Median RTFx", annotation_position="right")
+    fig.add_vline(x=median_wer, line_dash="dash", line_color="gray", annotation_text="Median WER", annotation_position="top")
+
+    # Add quadrant label - centered in the "Fast & Accurate" quadrant (low WER, high RTFx)
+    # The ideal quadrant is: x from min to median_wer, y from median_rtfx to max
+    quadrant_center_x = (model_agg['wer'].min() + median_wer) / 2
+    quadrant_center_y = (median_rtfx + model_agg['rtfx'].max()) / 2
+    
+    fig.add_annotation(
+        x=quadrant_center_x,
+        y=quadrant_center_y,
+        text="Fast & Accurate ⭐",
+        showarrow=False,
+        font=dict(size=12, color="green", family="Arial Black")
+    )
+
+    fig.update_layout(
+        title=title_text,
+        xaxis_title="WER",
+        yaxis_title="RTFx",
+        yaxis=dict(rangemode='tozero'),  # Ensure y-axis starts at 0 (RTFx can't be negative)
+        height=550,
+        autosize=True,
+        template='plotly_white',
+        legend=dict(
+            orientation="h",
+            yanchor="top",
+            y=-0.15,
+            xanchor="center",
+            x=0.5,
+            font=dict(size=10)
+        ),
+        margin=dict(l=60, r=20, t=50, b=120)
+    )
+
+    return fig
+
+
+def create_wer_cer_correlation(df: pd.DataFrame, languages: list[str] | None = None, top_n_models: int | None = None) -> go.Figure:
+    """
+    Visualization 7: WER vs CER Correlation
+    Scatter plot showing the relationship between word and character error rates.
+    Defaults to Swahili if no language is specified.
+    Outliers are removed for cleaner visualization.
+    
+    Args:
+        df: DataFrame with evaluation results
+        languages: List of languages to filter by (defaults to ["Swahili"] if None)
+        top_n_models: If specified, only show top N models by WER (0 = show all)
+    """
+    # Default to Swahili if no language filter provided
+    if not languages:
+        languages = ["Swahili"]
+    
+    # Apply language filter
+    filtered_df = df.copy()
+    filtered_df = filtered_df[filtered_df['language'].isin(languages)]
+    
+    # Remove WER outliers for cleaner visualization
+    filtered_df = _remove_wer_outliers(filtered_df)
+    
+    # Apply top N models filter if specified
+    if top_n_models and top_n_models > 0:
+        model_wer = filtered_df.groupby('model')['wer'].median().sort_values()
+        top_models = model_wer.head(top_n_models).index.tolist()
+        filtered_df = filtered_df[filtered_df['model'].isin(top_models)]
+    
+    fig = go.Figure()
+    
+    # Add scatter traces for each model family
+    for family in filtered_df['model_family'].unique():
+        family_data = filtered_df[filtered_df['model_family'] == family]
+        family_color = _get_color_for_family(family)
+        # Normalize size for better visualization
+        max_samples = filtered_df['num_samples'].max() if not filtered_df.empty else 1
+        sizes = (family_data['num_samples'] / max_samples * 25 + 5).values if not family_data.empty else [10]
+        
+        fig.add_trace(go.Scatter(
+            x=family_data['wer'],
+            y=family_data['cer'],
+            mode='markers',
+            name=family,
+            marker=dict(
+                size=sizes,
+                sizemode='diameter',
+                sizemin=5,
+                opacity=0.6,
+                color=family_color
+            ),
+            customdata=family_data[['language', 'model', 'dataset_group', 'num_samples']].values,
+            hovertemplate=(
+                '<b>%{customdata[0]}</b><br><br>' +
+                '<b>Model:</b> %{customdata[1]}<br>' +
+                '<b>Dataset:</b> %{customdata[2]}<br>' +
+                '<b>WER:</b> %{x:.3f}<br>' +
+                '<b>CER:</b> %{y:.3f}<br>' +
+                '<b>Samples:</b> %{customdata[3]:,}<extra></extra>'
+            )
+        ))
+    
+    # Add trendline
+    if len(filtered_df) > 1:
+        import numpy as np
+        z = np.polyfit(filtered_df['wer'], filtered_df['cer'], 1)
+        p = np.poly1d(z)
+        x_range = np.linspace(filtered_df['wer'].min(), filtered_df['wer'].max(), 100)
+        fig.add_trace(go.Scatter(
+            x=x_range,
+            y=p(x_range),
+            mode='lines',
+            name='Trend',
+            line=dict(color='gray', dash='dash'),
+            hoverinfo='skip'
+        ))
+
+    # Calculate correlation
+    correlation = filtered_df[['wer', 'cer']].corr().iloc[0, 1] if len(filtered_df) > 1 else 0
+
+    # Build title with language info
+    lang_str = ", ".join(languages[:3]) + ("..." if len(languages) > 3 else "")
+    title_text = f"WER vs CER Correlation for {lang_str} (r={correlation:.2f})"
+
+    fig.update_layout(
+        title=title_text,
+        xaxis_title="WER",
+        yaxis_title="CER",
+        height=550,
+        autosize=True,
+        template='plotly_white',
+        legend=dict(
+            orientation="h",
+            yanchor="top",
+            y=-0.15,
+            xanchor="center",
+            x=0.5,
+            font=dict(size=10)
+        ),
+        margin=dict(l=60, r=20, t=50, b=120),
+        # Zoom X-axis to useful range (0-1.5)
+        xaxis=dict(range=[0, 1.5]),
+        yaxis=dict(range=[0, 1.5])
+    )
+
+    return fig
+
+
+def create_model_consistency(df: pd.DataFrame) -> go.Figure:
+    """
+    Visualization 9: Model Consistency Analysis
+    Shows coefficient of variation (CV) to measure consistency across languages.
+    Removes high outliers only using IQR method (keeps best performers).
+    """
+    # Remove only HIGH outliers using IQR method on WER (keep best performers)
+    Q1 = df['wer'].quantile(0.25)
+    Q3 = df['wer'].quantile(0.75)
+    IQR = Q3 - Q1
+    upper_bound = Q3 + 1.5 * IQR
+    df_no_outliers = df[df['wer'] <= upper_bound]
+    
+    model_variance = df_no_outliers.groupby('model_family').agg({
+        'wer': ['median', 'std', 'count']
+    }).reset_index()
+
+    model_variance.columns = ['model_family', 'wer_median', 'wer_std', 'count']
+    model_variance['cv'] = (model_variance['wer_std'] / model_variance['wer_median'] * 100)
+    model_variance = model_variance.sort_values('cv')
+    
+    # Get colors for each model family
+    model_variance['color'] = model_variance['model_family'].apply(_get_color_for_family)
+
+    fig = go.Figure()
+
+    fig.add_trace(go.Bar(
+        y=model_variance['model_family'],
+        x=model_variance['cv'],
+        orientation='h',
+        marker=dict(
+            color=model_variance['color']
+        ),
+        text=model_variance['cv'].round(1),
+        textposition='outside',
+        hovertemplate=(
+            '<b>%{y}</b><br><br>' +
+            '<b>Coefficient of Variation:</b> %{x:.1f}%<br>' +
+            '<b>Median WER:</b> %{customdata[0]:.3f}<br>' +
+            '<b>Std Dev:</b> %{customdata[1]:.3f}<br>' +
+            '<b>Evaluations:</b> %{customdata[2]}<extra></extra>'
+        ),
+        customdata=model_variance[['wer_median', 'wer_std', 'count']]
+    ))
+
+    fig.update_layout(
+        title="Model Consistency Ranking (Outliers Removed)",
+        xaxis_title="Coefficient of Variation (%)",
+        yaxis_title="Model Family",
+        height=550,
+        template='plotly_white',
+        showlegend=False,
+        margin=dict(l=200, r=100, t=80, b=80)
+    )
+
+    return fig
+