Update public/index.html

public/index.html

@@ -18,7 +18,6 @@
             --text-white: #ffffff;
             --simba-navy: #0f172a;
             --border-gold: #dca02a;
-            /* Gradients */
             --grad-blue: linear-gradient(90deg, #3b82f6, #0ea5e9);
             --grad-red: linear-gradient(135deg, #ef4444, #f43f5e);
             --grad-purple: linear-gradient(135deg, #6366f1, #8b5cf6);
@@ -38,120 +37,75 @@
 
         /* --- NAVBAR --- */
         .navbar {
-            padding: 20px 40px;
-            display: flex; justify-content: space-between; align-items: center;
-            position: relative; z-index: 100;
+            padding: 20px 40px; display: flex; justify-content: space-between; align-items: center; position: relative; z-index: 100;
         }
         .nav-logo {
-            color: white; font-family: 'Rubik', sans-serif; font-weight: 700; font-size: 22px;
-            display: flex; align-items: center; gap: 12px;
+            color: white; font-family: 'Rubik', sans-serif; font-weight: 700; font-size: 22px; display: flex; align-items: center; gap: 12px;
         }
         .nav-logo img { height: 40px; }
         .nav-text { display: flex; flex-direction: column; line-height: 1.1; }
         .nav-text span:first-child { font-size: 14px; color: var(--text-yellow); }
-        
         .nav-links { display: flex; gap: 25px; align-items: center; }
         .nav-link { color: #e2e8f0; font-size: 15px; font-weight: 500; }
         .nav-link:hover { color: var(--text-yellow); }
-        
-        .btn-submit {
-            background: var(--grad-blue); color: white !important; padding: 10px 24px; border-radius: 30px; font-weight: 600; font-size: 14px; box-shadow: 0 4px 12px rgba(59, 130, 246, 0.4);
-        }
-        .btn-login {
-            background: var(--text-yellow); color: var(--bg-deep) !important; padding: 10px 24px; border-radius: 30px; font-weight: 700; font-size: 14px; box-shadow: 0 4px 12px rgba(251, 191, 36, 0.4);
-        }
+        .btn-submit { background: var(--grad-blue); color: white !important; padding: 10px 24px; border-radius: 30px; font-weight: 600; font-size: 14px; box-shadow: 0 4px 12px rgba(59, 130, 246, 0.4); }
+        .btn-login { background: var(--text-yellow); color: var(--bg-deep) !important; padding: 10px 24px; border-radius: 30px; font-weight: 700; font-size: 14px; box-shadow: 0 4px 12px rgba(251, 191, 36, 0.4); }
 
         /* --- HERO --- */
         .hero { display: flex; align-items: center; max-width: 1400px; margin: 60px auto 100px; padding: 0 40px; position: relative; }
         .hero-content { flex: 1; z-index: 2; }
-        
         .conf-badge { background: white; color: black; display: inline-flex; align-items: center; gap: 10px; padding: 6px 16px; border-radius: 8px; margin-bottom: 30px; font-weight: 700; font-size: 14px; }
         .conf-badge i { color: #cc0000; font-size: 18px; }
-
         .hero h1 { font-family: 'Rubik', sans-serif; font-size: 64px; font-weight: 800; margin: 0; line-height: 1.1; }
         .hero h2 { font-family: 'Rubik', sans-serif; font-size: 32px; color: var(--text-yellow); margin: 15px 0 30px; font-weight: 700; }
         .hero p { color: #cbd5e1; font-size: 18px; line-height: 1.6; max-width: 650px; margin-bottom: 50px; }
-
         .hero-actions { display: flex; gap: 15px; flex-wrap: wrap; }
         .action-btn { display: flex; align-items: center; gap: 8px; padding: 12px 24px; border-radius: 30px; color: white; font-weight: 600; font-size: 15px; transition: transform 0.2s; }
         .action-btn:hover { transform: translateY(-3px); color: white; }
-        
-        .bg-red { background: var(--grad-red); box-shadow: 0 8px 20px rgba(239, 68, 68, 0.3); }
-        .bg-purple { background: var(--grad-purple); box-shadow: 0 8px 20px rgba(139, 92, 246, 0.3); }
-        .bg-orange { background: var(--grad-orange); box-shadow: 0 8px 20px rgba(249, 115, 22, 0.3); }
-        .bg-blue { background: var(--grad-blue); box-shadow: 0 8px 20px rgba(59, 130, 246, 0.3); }
-        .bg-green { background: var(--grad-green); box-shadow: 0 8px 20px rgba(34, 197, 94, 0.3); }
-
+        .bg-red { background: var(--grad-red); } .bg-purple { background: var(--grad-purple); } .bg-orange { background: var(--grad-orange); } .bg-blue { background: var(--grad-blue); } .bg-green { background: var(--grad-green); }
         .hero-visual { flex: 1; display: flex; justify-content: flex-end; position: relative; height: 400px; align-items: center; }
         .hero-visual img { max-width: 100%; height: auto; z-index: 2; position: relative; }
-
-        /* Audio Wave Animation */
-        .audio-wave {
-            position: absolute; bottom: 50px; left: 0; right: 0; height: 150px;
-            display: flex; align-items: center; justify-content: center; gap: 6px; z-index: 0; opacity: 0.3;
-            mask-image: linear-gradient(to right, transparent, black 20%, black 80%, transparent);
-        }
+        .audio-wave { position: absolute; bottom: 50px; left: 0; right: 0; height: 150px; display: flex; align-items: center; justify-content: center; gap: 6px; z-index: 0; opacity: 0.3; mask-image: linear-gradient(to right, transparent, black 20%, black 80%, transparent); }
         .bar { width: 6px; background: #ffffff; border-radius: 99px; animation: bounce 1.2s ease-in-out infinite; }
-        .bar:nth-child(odd) { animation-duration: 1.5s; }
-        .bar:nth-child(2n) { animation-duration: 1.1s; }
+        .bar:nth-child(odd) { animation-duration: 1.5s; } .bar:nth-child(2n) { animation-duration: 1.1s; }
         @keyframes bounce { 0%, 100% { height: 20px; } 50% { height: 120px; } }
 
         /* --- MAIN BOARD --- */
-        .main-card {
-            background: white; border-radius: 24px; margin: 0 40px; padding: 40px; color: #0f172a; min-height: 600px; position: relative; z-index: 10;
-        }
-
-        .tabs { display: flex; gap: 15px; border-bottom: 2px solid #e2e8f0; margin-bottom: 30px; padding-bottom: 10px; }
-        .tab-btn { background: none; border: none; font-size: 16px; font-weight: 600; color: #64748b; padding: 10px 20px; cursor: pointer; transition: 0.3s; border-radius: 8px; }
+        .main-card { background: white; border-radius: 24px; margin: 0 40px; padding: 40px; color: #0f172a; min-height: 600px; position: relative; z-index: 10; }
+        
+        /* Tabs */
+        .tabs { display: flex; gap: 10px; border-bottom: 2px solid #e2e8f0; margin-bottom: 30px; padding-bottom: 10px; overflow-x: auto;}
+        .tab-btn { background: none; border: none; font-size: 15px; font-weight: 600; color: #64748b; padding: 10px 20px; cursor: pointer; transition: 0.3s; border-radius: 8px; white-space: nowrap; }
         .tab-btn:hover { background: #f1f5f9; color: var(--bg-deep); }
         .tab-btn.active { background: var(--bg-deep); color: white; }
-
         .view { display: none !important; animation: fadeIn 0.4s; }
         .view.active { display: block !important; }
 
         /* Controls */
         .controls { background: #f8fafc; padding: 20px; border-radius: 12px; display: flex; gap: 20px; align-items: center; margin-bottom: 20px; flex-wrap: wrap; }
         select { padding: 10px; border-radius: 8px; border: 1px solid #cbd5e1; font-size: 14px; min-width: 250px; cursor:pointer; }
-        
         .rank-info { font-size: 13px; color: #64748b; margin-top: 5px; font-style: italic; }
 
         /* Table */
-        .table-wrap { overflow-x: auto; border: 1px solid #e2e8f0; border-radius: 12px; }
+        .table-wrap { overflow-x: auto; border: 1px solid #e2e8f0; border-radius: 12px; margin-bottom: 30px; }
         table { width: 100%; border-collapse: collapse; font-size: 14px; }
-        th { background: #f1f5f9; color: #0f172a; font-weight: 700; padding: 16px; text-align: center; border-bottom: 2px solid #e2e8f0; white-space: nowrap; vertical-align: middle; }
+        th { background: #f1f5f9; color: #0f172a; font-weight: 700; padding: 16px; text-align: center; border-bottom: 2px solid #e2e8f0; white-space: nowrap; vertical-align: bottom; }
         td { padding: 14px; border-bottom: 1px solid #e2e8f0; text-align: center; color: #334155; }
         tr:hover td { background: #f8fafc; }
-        
         th:first-child, td:first-child { position: sticky; left: 0; background: white; z-index: 2; text-align: left; font-weight: 700; color: #0f172a; border-right: 2px solid #f1f5f9; min-width: 200px; }
         thead th:first-child { background: #f1f5f9; z-index: 3; }
         th:nth-child(2), td:nth-child(2) { text-align: left; }
 
+        /* Section Headings */
+        h4 { color: var(--text-yellow); font-family: 'Rubik', sans-serif; font-size: 18px; margin: 0 0 15px 0; border-bottom: 1px solid #eee; padding-bottom: 10px; }
+
         /* Citations */
-        .citation-section {
-            width: 100%; /* Full Width */
-            margin: 60px 0;
-            background: #0f172a;
-            border: 1px solid #334155;
-            border-radius: 16px;
-            padding: 40px;
-            box-sizing: border-box; /* Ensure padding doesn't overflow width */
-            box-shadow: 0 20px 40px rgba(0,0,0,0.3);
-            position: relative;
-        }
+        .citation-section { width: 100%; margin: 60px 0 0 0; background: #0f172a; border: 1px solid #334155; border-radius: 16px; padding: 40px; box-sizing: border-box; box-shadow: 0 20px 40px rgba(0,0,0,0.3); position: relative; }
         .citation-section h3 { color: var(--text-yellow); font-family: 'Rubik', sans-serif; font-size: 24px; margin-top: 0; }
-        .citation-box {
-            background: #1e293b; color: #cbd5e1; padding: 20px; border-radius: 12px;
-            font-family: monospace; white-space: pre-wrap; margin-top: 20px;
-            overflow-x: auto; border: 1px solid #334155; font-size: 13px; line-height: 1.5;
-        }
-        .copy-btn {
-            position: absolute; top: 40px; right: 40px;
-            background: var(--text-yellow); border: none; padding: 8px 16px;
-            border-radius: 6px; font-weight: bold; cursor: pointer; color: #0f172a;
-        }
-        .copy-btn:active { transform: scale(0.95); }
-
-        .footer { text-align: center; padding-bottom: 40px; color: #94a3b8; font-size: 14px; }
+        .citation-box { background: #1e293b; color: #cbd5e1; padding: 20px; border-radius: 12px; font-family: monospace; white-space: pre-wrap; margin-top: 20px; overflow-x: auto; border: 1px solid #334155; font-size: 13px; line-height: 1.5; }
+        .copy-btn { position: absolute; top: 40px; right: 40px; background: var(--text-yellow); border: none; padding: 8px 16px; border-radius: 6px; font-weight: bold; cursor: pointer; color: #0f172a; }
+        
+        .footer { text-align: center; padding: 40px; color: #94a3b8; font-size: 14px; }
         @keyframes fadeIn { from{opacity:0; transform:translateY(10px)} to{opacity:1; transform:translateY(0)} }
     </style>
 </head>
@@ -182,20 +136,18 @@
             <h2>Mapping Africa’s Speech Technology</h2>
             <p>SimbaBench bridges the digital divide with a unified suite for African AI: the largest open-source speech benchmark covering 61 languages.</p>
             <div class="hero-actions">
-                <a href="https://arxiv.org/abs/2510.17998" target="_blank" class="action-btn bg-red"><i class="fa-regular fa-file-pdf"></i> Read Paper</a>
-                <a href="https://github.com/UBC-NLP/simba" target="_blank" class="action-btn bg-purple"><i class="fa-solid fa-code-branch"></i> Pipeline</a>
-                <a href="https://huggingface.co/datasets/UBC-NLP/simba" target="_blank" class="action-btn bg-orange"><i class="fa-solid fa-database"></i> Dataset</a>
+                <a href="#" class="action-btn bg-red"><i class="fa-regular fa-file-pdf"></i> Read Paper</a>
+                <a href="#" class="action-btn bg-purple"><i class="fa-solid fa-code-branch"></i> Pipeline</a>
+                <a href="#" class="action-btn bg-orange"><i class="fa-solid fa-database"></i> Dataset</a>
                 <a href="#" class="action-btn bg-blue"><i class="fa-solid fa-bolt"></i> Models</a>
                 <a href="#board" class="action-btn bg-green"><i class="fa-solid fa-trophy"></i> Leaderboard</a>
             </div>
         </div>
         <div class="hero-visual">
             <div class="audio-wave">
-                <div class="bar"></div><div class="bar"></div><div class="bar"></div><div class="bar"></div><div class="bar"></div><div class="bar"></div><div class="bar"></div><div class="bar"></div>
-                <div class="bar"></div><div class="bar"></div><div class="bar"></div><div class="bar"></div><div class="bar"></div><div class="bar"></div><div class="bar"></div><div class="bar"></div>
-                <div class="bar"></div><div class="bar"></div><div class="bar"></div><div class="bar"></div><div class="bar"></div><div class="bar"></div><div class="bar"></div><div class="bar"></div>
+                <div class="bar"></div><div class="bar"></div><div class="bar"></div><div class="bar"></div><div class="bar"></div><div class="bar"></div><div class="bar"></div><div class="bar"></div><div class="bar"></div><div class="bar"></div><div class="bar"></div><div class="bar"></div><div class="bar"></div><div class="bar"></div><div class="bar"></div><div class="bar"></div>
             </div>
-            <img src="https://africa.dlnlp.ai/simba/images/simbabench_header.png" alt="Africa Map">
+            <img src="https://africa.dlnlp.ai/simba/images/simbabench_header.png" alt="Map">
         </div>
     </div>
 
@@ -209,27 +161,26 @@
                 <button class="tab-btn active" id="tab-btn-asr" onclick="setTab('asr')">Automatic Speech Recognition (ASR)</button>
                 <button class="tab-btn" id="tab-btn-tts" onclick="setTab('tts')">Text-to-Speech (TTS)</button>
                 <button class="tab-btn" id="tab-btn-slid" onclick="setTab('slid')">Spoken Language Identification (SLID)</button>
+                <button class="tab-btn" id="tab-btn-lang" onclick="setTab('lang')">Language Analysis</button>
             </div>
 
             <div id="asr" class="view active">
                 <div class="controls">
                     <span style="font-weight:700;">View Mode:</span>
-                    <button id="btn-fam" class="action-btn bg-blue" style="padding:8px 16px; font-size:12px; box-shadow:none;" onclick="setASRMode('family')">By Family</button>
+                    <button id="btn-over" class="action-btn bg-blue" style="padding:8px 16px; font-size:12px; box-shadow:none;" onclick="setASRMode('overview')">Overview</button>
+                    <button id="btn-fam" class="action-btn" style="padding:8px 16px; font-size:12px; background:#e2e8f0; color:#334155;" onclick="setASRMode('family')">By Family</button>
                     <button id="btn-mod" class="action-btn" style="padding:8px 16px; font-size:12px; background:#e2e8f0; color:#334155;" onclick="setASRMode('model')">By Model</button>
                     
                     <div style="flex-grow:1; text-align:right;">
-                        <span style="font-weight:600; margin-right:10px;">Select:</span>
-                        <div id="grp-fam" style="display:inline-block;"><select id="asr-select-fam" onchange="renderASR()"></select></div>
-                        <div id="grp-mod" style="display:none;"><select id="asr-select-mod" onchange="renderASR()"></select></div>
+                        <div id="grp-fam" style="display:none;"><label>Select Family: </label><select id="asr-select-fam" onchange="renderASR()"></select></div>
+                        <div id="grp-mod" style="display:none;"><label>Select Model: </label><select id="asr-select-mod" onchange="renderASR()"></select></div>
                     </div>
                 </div>
                 
                 <div style="display:flex; justify-content:space-between; align-items:end; margin-bottom:10px;">
-                    <h3 id="asr-title" style="color:#d97706; margin:0;"></h3>
-                    <div id="asr-rank-info" class="rank-info" style="display:none;">Ranking: WER (↓) then CER (↓)</div>
+                    <h3 id="asr-title" style="color:#d97706; margin:0;">Results Overview</h3>
+                    <div id="asr-rank-info" class="rank-info">Ranking: WER (↓) then CER (↓)</div>
                 </div>
-                
-                <div id="asr-legend" style="margin-bottom:15px; font-size:13px; color:#64748b; background:#f8fafc; padding:10px; border-radius:6px; display:none;"></div>
                 <div id="asr-table" class="table-wrap"></div>
             </div>
 
@@ -250,12 +201,30 @@
                 </div>
                 <div id="slid-table" class="table-wrap"></div>
             </div>
+
+            <div id="lang" class="view">
+                <div class="controls">
+                    <span style="font-weight:600;">Select Language:</span>
+                    <select id="lang-select" onchange="renderLanguageView()"></select>
+                </div>
+                
+                <h4>ASR Results <span class="rank-info" style="font-weight:normal;">(Ranked by WER ↓)</span></h4>
+                <div id="lang-asr-table" class="table-wrap"></div>
+
+                <h4>TTS Results</h4>
+                <div id="lang-tts-table" class="table-wrap"></div>
+
+                <h4>SLID Results <span class="rank-info" style="font-weight:normal;">(Ranked by Score ↑)</span></h4>
+                <div id="lang-slid-table" class="table-wrap"></div>
+            </div>
         </div>
+    </div>
 
+    <div class="lb-container">
         <div class="citation-section" id="citation">
             <h3>Citation</h3>
             <button class="copy-btn" onclick="copyCitation()"><i class="fa-regular fa-copy"></i> Copy</button>
-            <p style="color:#94a3b8; margin-bottom:20px;">If you use the Simba benchmark, please cite our <a href="https://aclanthology.org/2025.emnlp-main.559/" style="color:#fbbf24; font-weight:bold;">EMNLP 2025 paper</a>.</p>
+            <p style="color:#94a3b8; margin-bottom:20px;">If you use the Simba benchmark, please cite our paper:</p>
             <div class="citation-box" id="bibtex">@inproceedings{elmadany-etal-2025-voice,
     title = "Voice of a Continent: Mapping {A}frica{'}s Speech Technology Frontier",
     author = "Elmadany, AbdelRahim A.  and Kwon, Sang Yun  and Toyin, Hawau Olamide  and Alcoba Inciarte, Alcides  and Aldarmaki, Hanan  and Abdul-Mageed, Muhammad",
@@ -279,28 +248,32 @@
     </div>
 
     <script>
-        // --- LOGIC ---
-        const NAME_TO_ISO = {
-            'Afrikaans':'afr', 'Akuapim-twi':'ak', 'Amharic':'amh', 'Asante-twi':'tw', 'Bemba':'bem',
-            'Hausa':'hau', 'Igbo':'ibo', 'Yoruba':'yor', 'Zulu':'zul', 'Swahili':'swa', 'Somali':'som', 
-            'Wolof':'wol', 'Xhosa':'xho', 'Lingala':'ln', 'Oromo':'om'
-        };
-
+        // --- DATA & LOGIC ---
+        const NAME_TO_ISO = {'Afrikaans':'afr', 'Akuapim-twi':'ak', 'Amharic':'amh', 'Asante-twi':'tw', 'Bemba':'bem', 'Hausa':'hau', 'Igbo':'ibo', 'Yoruba':'yor', 'Zulu':'zul', 'Swahili':'swa', 'Somali':'som', 'Wolof':'wol', 'Xhosa':'xho'};
         let DATA = null;
-        let asrMode = 'family';
+        let asrMode = 'overview';
 
         fetch('/api/data').then(r=>r.json()).then(d=>{
             DATA = d;
             document.getElementById('loader').style.display='none';
             document.getElementById('app-content').style.display='block';
             init();
-        }).catch(e=>{ document.getElementById('loader').innerHTML=`<span style="color:red">Failed to load data.</span>`; });
+        });
 
         function init() {
             populate('asr-select-fam', DATA.metadata.families);
             populate('asr-select-mod', DATA.metadata.models);
             populate('tts-select', DATA.metadata.tts_models);
-            setTab('asr'); renderASR(); renderTTS(); renderSLID();
+            
+            // Collect Unique Languages for Language Tab
+            const allLangs = new Set();
+            // From ASR Family view (it has language lists)
+            Object.values(DATA.asr.by_family).forEach(fam => {
+                fam.languages.forEach(l => allLangs.add(l.name));
+            });
+            populate('lang-select', Array.from(allLangs).sort());
+
+            renderASR(); renderTTS(); renderSLID();
         }
 
         function populate(id, list) {
@@ -316,48 +289,64 @@
         // --- RENDER ASR ---
         function renderASR() {
             const div = document.getElementById('asr-table');
-            const legend = document.getElementById('asr-legend');
-            const rankInfo = document.getElementById('asr-rank-info');
+            const title = document.getElementById('asr-title');
             let html='';
 
-            if(asrMode==='family'){
+            if (asrMode === 'overview') {
+                title.innerText = "Results Overview (All Models)";
+                document.getElementById('grp-fam').style.display='none';
+                document.getElementById('grp-mod').style.display='none';
+
+                // Calculate Global Averages
+                const modelStats = [];
+                Object.keys(DATA.asr.by_model).forEach(modName => {
+                    const rows = DATA.asr.by_model[modName];
+                    let sW=0, sC=0, n=0;
+                    rows.forEach(r => { sW+=r.WER; sC+=r.CER; n++; });
+                    if(n>0) modelStats.push({ name: modName, wer: sW/n, cer: sC/n });
+                });
+                
+                modelStats.sort((a,b) => a.wer - b.wer);
+
+                html = `<table><thead><tr><th>Rank</th><th>Model</th><th>Simba ASR Score (WER/CER) <i class="fa-solid fa-arrow-down arrow-down"></i></th></tr></thead><tbody>`;
+                modelStats.forEach((m, i) => {
+                    let rank = (i<3) ? ['🥇','🥈','🥉'][i] : (i+1);
+                    html += `<tr><td>${rank}</td><td style="font-weight:600; color:var(--simba-navy)">${m.name}</td><td><b>${fmt(m.wer)} / ${fmt(m.cer)}</b></td></tr>`;
+                });
+
+            } else if(asrMode==='family'){
                 const val = document.getElementById('asr-select-fam').value;
-                document.getElementById('asr-title').innerText = `Results for Family: ${val}`;
-                rankInfo.style.display = 'block';
+                title.innerText = `Results for Family: ${val}`;
+                document.getElementById('grp-fam').style.display='inline-block';
+                document.getElementById('grp-mod').style.display='none';
                 
                 const d = DATA.asr.by_family[val];
                 if(!d) return;
-
-                // Sort By WER ascending
+                
+                // Sort rows by WER
                 d.data.sort((a,b) => a.Avg_WER - b.Avg_WER);
 
-                html = `<table><thead><tr><th>Model</th><th>Avg WER/CER <i class="fa-solid fa-arrow-down" style="color:#d97706; font-size:10px"></i></th>`;
+                html = `<table><thead><tr><th>Rank</th><th>Model</th><th>Simba ASR Family Score <i class="fa-solid fa-arrow-down arrow-down"></i></th>`;
                 d.languages.forEach(l => html += `<th>${getIso(l.name, l.iso)}</th>`);
                 html += `</tr></thead><tbody>`;
 
                 d.data.forEach((r, idx) => {
-                    // Ranking Icons
-                    let rankIcon = '';
-                    if(idx === 0) rankIcon = '🥇 ';
-                    else if(idx === 1) rankIcon = '🥈 ';
-                    else if(idx === 2) rankIcon = '🥉 ';
-
-                    html += `<tr><td>${rankIcon}${r.Model}</td><td style="font-weight:bold; background:#f8fafc">${fmt(r.Avg_WER)} / ${fmt(r.Avg_CER)}</td>`;
+                    let rank = (idx<3) ? ['🥇','🥈','🥉'][idx] : (idx+1);
+                    html += `<tr><td>${rank}</td><td style="font-weight:600; color:var(--simba-navy)">${r.Model}</td><td style="font-weight:bold; background:#f8fafc">${fmt(r.Avg_WER)} / ${fmt(r.Avg_CER)}</td>`;
                     d.languages.forEach(l => {
                         let w=r[`WER_${l.name}`], c=r[`CER_${l.name}`];
                         html += `<td>${(w!=null)?fmt(w)+'/'+fmt(c):'-'}</td>`;
                     });
                     html += `</tr>`;
                 });
-                // Legend
-                legend.style.display='none'; // Hiding legend as we show (iso) in header now
             } else {
                 const val = document.getElementById('asr-select-mod').value;
-                document.getElementById('asr-title').innerText = `Results for Model: ${val}`;
-                legend.style.display='none'; rankInfo.style.display='none';
+                title.innerText = `Results for Model: ${val}`;
+                document.getElementById('grp-fam').style.display='none';
+                document.getElementById('grp-mod').style.display='inline-block';
                 
                 const rows = DATA.asr.by_model[val];
-                html = `<table><thead><tr><th>Language (iso)</th><th>Family</th><th>WER (%) <i class="fa-solid fa-arrow-down" style="color:#d97706; font-size:10px"></i></th><th>CER (%) <i class="fa-solid fa-arrow-down" style="color:#d97706; font-size:10px"></i></th></tr></thead><tbody>`;
+                html = `<table><thead><tr><th>Language (iso)</th><th>Family</th><th>WER (%) <i class="fa-solid fa-arrow-down arrow-down"></i></th><th>CER (%) <i class="fa-solid fa-arrow-down arrow-down"></i></th></tr></thead><tbody>`;
                 rows.forEach(r => {
                     html += `<tr><td>${getIso(r.Language, r.ISO)}</td><td>${r.Family}</td><td>${fmt(r.WER)}</td><td>${fmt(r.CER)}</td></tr>`;
                 });
@@ -382,9 +371,7 @@
             let sums={}, c=0;
             metrics.forEach(m=>sums[m.k]=0);
             rows.forEach(r=>{ metrics.forEach(m=>sums[m.k]+=(r[m.k]||0)); c++; });
-            
-            document.getElementById('tts-summary').innerHTML = "<b>Averages: </b>" + 
-                metrics.map(m=> `${m.l.replace('(↓)','').replace('(↑)','')}: ${fmt(sums[m.k]/c)}`).join(" | ");
+            document.getElementById('tts-summary').innerHTML = "<b>Averages: </b>" + metrics.map(m=> `${m.l.replace('(↓)','').replace('(↑)','')}: ${fmt(sums[m.k]/c)}`).join(" | ");
 
             let html = `<table><thead><tr><th>Language (iso)</th>`;
             metrics.forEach(m => html += `<th>${m.l}</th>`);
@@ -399,43 +386,85 @@
 
         // --- RENDER SLID ---
         function renderSLID() {
-            // Sort by F1-macro (assuming Simba is the primary metric to sort by, or generally by Best Score)
-            // Here we sort alphabetically by language as it's a comparison view
-            DATA.slid.sort((a,b) => a.Language.localeCompare(b.Language));
-
             let html = `<table><thead><tr><th>Language (iso)</th><th>MMS-LID-1024 (↑)</th><th>Simba-SLID (↑)</th></tr></thead><tbody>`;
             DATA.slid.forEach(r => {
                 let m = r['MMS-LID-1024'], s = r['Simba-SLID'];
                 let mS = fmt(m), sS = fmt(s);
-                // Highlight winner
-                if(m > s) mS = `<b>${mS} 🥇</b>`; 
-                else if(s > m) sS = `<b>${sS} 🥇</b>`;
-                
+                if(m > s) mS = `<b>${mS} 🥇</b>`; else if(s > m) sS = `<b>${sS} 🥇</b>`;
                 html += `<tr><td>${getIso(r.Language)}</td><td>${mS}</td><td>${sS}</td></tr>`;
             });
             document.getElementById('slid-table').innerHTML = html;
         }
 
+        // --- RENDER LANGUAGE VIEW (New) ---
+        function renderLanguageView() {
+            const lang = document.getElementById('lang-select').value;
+            
+            // 1. ASR Table
+            let asrRows = [];
+            Object.keys(DATA.asr.by_model).forEach(modName => {
+                const row = DATA.asr.by_model[modName].find(r => r.Language === lang);
+                if(row) asrRows.push({model: modName, wer: row.WER, cer: row.CER});
+            });
+            asrRows.sort((a,b) => a.wer - b.wer);
+            
+            let h1 = `<table><thead><tr><th>Rank</th><th>Model</th><th>WER (%)</th><th>CER (%)</th></tr></thead><tbody>`;
+            if(asrRows.length === 0) h1 += `<tr><td colspan="4">No ASR data for this language.</td></tr>`;
+            else asrRows.forEach((r, i) => {
+                let rank = (i<3) ? ['🥇','🥈','🥉'][i] : (i+1);
+                h1 += `<tr><td>${rank}</td><td>${r.model}</td><td>${fmt(r.wer)}</td><td>${fmt(r.cer)}</td></tr>`;
+            });
+            h1 += `</tbody></table>`;
+            document.getElementById('lang-asr-table').innerHTML = h1;
+
+            // 2. TTS Table
+            let h2 = `<table><thead><tr><th>Model</th><th>WER</th><th>MCD</th><th>PESQ</th></tr></thead><tbody>`;
+            let ttsFound = false;
+            Object.keys(DATA.tts).forEach(mod => {
+                const row = DATA.tts[mod].find(r => r.language === lang);
+                if(row) {
+                    ttsFound = true;
+                    h2 += `<tr><td>${mod}</td><td>${fmt(row.wer)}</td><td>${fmt(row.mcd)}</td><td>${fmt(row.pesq)}</td></tr>`;
+                }
+            });
+            if(!ttsFound) h2 += `<tr><td colspan="4">No TTS data.</td></tr>`;
+            h2 += `</tbody></table>`;
+            document.getElementById('lang-tts-table').innerHTML = h2;
+
+            // 3. SLID Table
+            let h3 = `<table><thead><tr><th>Rank</th><th>Model</th><th>F1-Score</th></tr></thead><tbody>`;
+            const slidRow = DATA.slid.find(r => r.Language === lang);
+            if(slidRow) {
+                let m = slidRow['MMS-LID-1024'], s = slidRow['Simba-SLID'];
+                let scores = [{n:'Simba-SLID', v:s}, {n:'MMS-LID-1024', v:m}].sort((a,b)=>b.v - a.v);
+                scores.forEach((sc, i) => {
+                    let rank = (i<3) ? ['🥇','🥈','🥉'][i] : (i+1);
+                    h3 += `<tr><td>${rank}</td><td>${sc.n}</td><td>${fmt(sc.v)}</td></tr>`;
+                });
+            } else {
+                h3 += `<tr><td colspan="3">No SLID data.</td></tr>`;
+            }
+            h3 += `</tbody></table>`;
+            document.getElementById('lang-slid-table').innerHTML = h3;
+        }
+
         // --- UI ---
-        window.setTab = (id) => {
+        window.setTab = (id, btn) => {
             document.querySelectorAll('.view').forEach(e => e.classList.remove('active'));
             document.querySelectorAll('.tab-btn').forEach(e => e.classList.remove('active'));
             document.getElementById(id).classList.add('active'); 
-            document.getElementById(`tab-btn-${id}`).classList.add('active');
+            if(btn) btn.classList.add('active'); else document.getElementById(`tab-btn-${id}`).classList.add('active');
+            if(id === 'lang') renderLanguageView();
         };
 
         window.setASRMode = (m) => {
             asrMode = m;
-            const b1 = document.getElementById('btn-fam'), b2 = document.getElementById('btn-mod');
-            document.getElementById('grp-fam').style.display = m==='family'?'inline-block':'none';
-            document.getElementById('grp-mod').style.display = m==='model'?'inline-block':'none';
-            if(m==='family') {
-                b1.className="action-btn bg-blue"; b1.style.color="white"; b1.style.background="";
-                b2.className="action-btn"; b2.style.background="#e2e8f0"; b2.style.color="#334155";
-            } else {
-                b2.className="action-btn bg-blue"; b2.style.color="white"; b2.style.background="";
-                b1.className="action-btn"; b1.style.background="#e2e8f0"; b1.style.color="#334155";
-            }
+            ['btn-over','btn-fam','btn-mod'].forEach(b => {
+                document.getElementById(b).className = "action-btn"; 
+                document.getElementById(b).style.background="#e2e8f0"; document.getElementById(b).style.color="#334155";
+            });
+            const activeBtn = document.getElementById(m==='overview'?'btn-over':(m==='family'?'btn-fam':'btn-mod'));
+            activeBtn.className = "action-btn bg-blue"; activeBtn.style.color="white"; activeBtn.style.background="";
             renderASR();
         }