Update public/index.html

public/index.html

@@ -13,8 +13,8 @@
 
     <style>
         :root {
-            --bg-deep: #1e1b4b;       /* Deep Navy */
-            --text-yellow: #fbbf24;   /* Brand Yellow */
+            --bg-deep: #1e1b4b;       
+            --text-yellow: #fbbf24;   
             --text-white: #ffffff;
             --simba-navy: #0f172a;
             --border-gold: #dca02a;
@@ -36,12 +36,8 @@
         a { text-decoration: none; transition: 0.2s; }
 
         /* --- NAVBAR --- */
-        .navbar {
-            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;
-        }
+        .navbar { 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; }
         .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); }
@@ -73,15 +69,13 @@
         /* --- 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 */
-        .tabs { display: flex; gap: 10px; border-bottom: 2px solid #e2e8f0; margin-bottom: 30px; padding-bottom: 10px; overflow-x: auto;}
+        .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; }
@@ -92,11 +86,10 @@
         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; }
+        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: 220px; }
         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 */
@@ -265,12 +258,17 @@
             populate('asr-select-mod', DATA.metadata.models);
             populate('tts-select', DATA.metadata.tts_models);
             
-            // Collect Unique Languages for Language Tab
+            // --- POPULATE LANGUAGES FROM ACTUAL DATA ---
             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));
+            // Scan ASR by model data to find every single language present
+            Object.values(DATA.asr.by_model).forEach(rows => {
+                rows.forEach(r => allLangs.add(r.Language));
             });
+            // Scan TTS as well
+            Object.values(DATA.tts).forEach(rows => {
+                rows.forEach(r => allLangs.add(r.language));
+            });
+            
             populate('lang-select', Array.from(allLangs).sort());
 
             renderASR(); renderTTS(); renderSLID();
@@ -297,7 +295,6 @@
                 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];
@@ -308,10 +305,10 @@
                 
                 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>`;
+                html = `<table><thead><tr><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>`;
+                    let icon = (i<3) ? ['🥇','🥈','🥉'][i] + ' ' : '';
+                    html += `<tr><td style="font-weight:600; color:var(--simba-navy)">${icon}${m.name}</td><td><b>${fmt(m.wer)} / ${fmt(m.cer)}</b></td></tr>`;
                 });
 
             } else if(asrMode==='family'){
@@ -323,16 +320,15 @@
                 const d = DATA.asr.by_family[val];
                 if(!d) return;
                 
-                // Sort rows by WER
                 d.data.sort((a,b) => a.Avg_WER - b.Avg_WER);
 
-                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>`;
+                html = `<table><thead><tr><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) => {
-                    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>`;
+                    let icon = (idx<3) ? ['🥇','🥈','🥉'][idx] + ' ' : '';
+                    html += `<tr><td style="font-weight:600; color:var(--simba-navy)">${icon}${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>`;
@@ -396,11 +392,11 @@
             document.getElementById('slid-table').innerHTML = html;
         }
 
-        // --- RENDER LANGUAGE VIEW (New) ---
+        // --- RENDER LANGUAGE VIEW ---
         function renderLanguageView() {
             const lang = document.getElementById('lang-select').value;
             
-            // 1. ASR Table
+            // 1. ASR
             let asrRows = [];
             Object.keys(DATA.asr.by_model).forEach(modName => {
                 const row = DATA.asr.by_model[modName].find(r => r.Language === lang);
@@ -408,41 +404,41 @@
             });
             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>`;
+            let h1 = `<table><thead><tr><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>`;
+                let icon = (i<3) ? ['🥇','🥈','🥉'][i] + ' ' : '';
+                h1 += `<tr><td style="font-weight:600; color:var(--simba-navy)">${icon}${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
+            // 2. TTS
             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>`;
+                    h2 += `<tr><td style="font-weight:600;">${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>`;
+            // 3. SLID
+            let h3 = `<table><thead><tr><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>`;
+                    let icon = (i==0) ? '🥇 ' : '';
+                    h3 += `<tr><td style="font-weight:600;">${icon}${sc.n}</td><td>${fmt(sc.v)}</td></tr>`;
                 });
             } else {
-                h3 += `<tr><td colspan="3">No SLID data.</td></tr>`;
+                h3 += `<tr><td colspan="2">No SLID data.</td></tr>`;
             }
             h3 += `</tbody></table>`;
             document.getElementById('lang-slid-table').innerHTML = h3;