Update public/index.html

public/index.html

@@ -10,7 +10,6 @@
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
     <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=Rubik:wght@500;600;700;800&display=swap" rel="stylesheet">
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
-    
     <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
 
     <style>
@@ -48,18 +47,10 @@
 
         /* --- HERO --- */
         .hero { 
-            max-width: 1000px; 
-            margin: 60px auto 100px; 
-            padding: 0 40px; 
-            position: relative; 
-            text-align: center;
-        }
-        .hero-content { 
-            z-index: 2; 
-            display: flex; 
-            flex-direction: column; 
-            align-items: center; 
+            max-width: 1000px; margin: 60px auto 100px; padding: 0 40px; 
+            position: relative; text-align: center;
         }
+        .hero-content { z-index: 2; display: flex; flex-direction: column; align-items: center; }
         .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; }
@@ -71,25 +62,17 @@
         .bg-red { background: var(--grad-red); } .bg-purple { background: var(--grad-purple); }
         
         /* Wave Animation */
-        .wave-bg {
-            position: absolute; top: -50px; left: -50%; width: 200%; height: 100%;
-            background: radial-gradient(circle, rgba(255,255,255,0.03) 0%, rgba(255,255,255,0) 70%);
-            z-index: 0; pointer-events: none;
-        }
-        .audio-wave { 
-            height: 150px; display: flex; align-items: center; justify-content: center; gap: 6px; 
-            margin-top: 60px; mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
-        }
+        .wave-bg { position: absolute; top: -50px; left: -50%; width: 200%; height: 100%; background: radial-gradient(circle, rgba(255,255,255,0.03) 0%, rgba(255,255,255,0) 70%); z-index: 0; pointer-events: none; }
+        .audio-wave { height: 150px; display: flex; align-items: center; justify-content: center; gap: 6px; margin-top: 60px; mask-image: linear-gradient(to right, transparent, black 10%, black 90%, 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; }
         @keyframes bounce { 0%, 100% { height: 20px; } 50% { height: 120px; } }
 
-        /* --- WIDTH CONTROLLER --- */
+        /* --- CONTENT --- */
         .content-container { width: 80%; max-width: 1600px; margin: 0 auto; }
-
-        /* --- MAIN BOARD --- */
         .main-card { background: white; border-radius: 24px; padding: 40px; color: #0f172a; min-height: 600px; position: relative; z-index: 10; margin-bottom: 60px; }
         
+        /* 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); }
@@ -97,12 +80,53 @@
         .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; }
         .score-desc { font-size: 14px; color: #475569; background: #fff7ed; border-left: 4px solid #f97316; padding: 10px 15px; margin-bottom: 20px; border-radius: 4px; }
 
+        /* --- NEW ASR BUTTON STYLES --- */
+        .mode-btn {
+            padding: 8px 20px;
+            border-radius: 8px;
+            font-weight: 600;
+            font-size: 13px;
+            cursor: pointer;
+            transition: all 0.2s;
+            border: 1px solid #e2e8f0;
+            background: white;
+            color: var(--simba-navy);
+        }
+        .mode-btn:hover {
+            border-color: var(--text-yellow);
+            color: var(--text-yellow);
+        }
+        .mode-btn.active {
+            background-color: var(--simba-navy);
+            color: white;
+            border-color: var(--simba-navy);
+            box-shadow: 0 4px 12px rgba(15, 23, 42, 0.15);
+        }
+
+        /* --- CHARTS --- */
+        .chart-wrapper {
+            width: 100%;
+            /* Max height limits the chart size if small data */
+            max-height: 400px; 
+            margin-bottom: 20px;
+            display: none; /* Hidden by default */
+        }
+        canvas { max-width: 100%; }
+
+        /* Summary Cards */
+        .summary-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 20px; margin-bottom: 40px; }
+        .stat-card { background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 12px; padding: 20px; box-shadow: 0 2px 8px rgba(0,0,0,0.05); text-align: center; transition: 0.3s; }
+        .stat-card:hover { transform: translateY(-3px); border-color: var(--text-yellow); }
+        .stat-title { font-size: 12px; font-weight: 700; color: #64748b; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 10px; }
+        .stat-model { font-size: 18px; font-weight: 700; color: #0f172a; margin-bottom: 5px; }
+        .stat-val { font-size: 14px; color: var(--text-yellow); font-weight: 600; }
+
         /* Table */
         .table-wrap { overflow-x: auto; border: 1px solid #e2e8f0; border-radius: 12px; margin-bottom: 30px; }
         table { width: 100%; border-collapse: collapse; font-size: 14px; }
@@ -112,28 +136,10 @@
         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; }
-
         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; }
 
-        /* --- SUMMARY CARDS (Language Analysis) --- */
-        .summary-grid {
-            display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 20px; margin-bottom: 40px;
-        }
-        .stat-card {
-            background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 12px; padding: 20px;
-            box-shadow: 0 2px 8px rgba(0,0,0,0.05); text-align: center; transition: 0.3s;
-        }
-        .stat-card:hover { transform: translateY(-3px); border-color: var(--text-yellow); }
-        .stat-title { font-size: 12px; font-weight: 700; color: #64748b; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 10px; }
-        .stat-model { font-size: 18px; font-weight: 700; color: #0f172a; margin-bottom: 5px; }
-        .stat-val { font-size: 14px; color: var(--text-yellow); font-weight: 600; }
-        
-        /* --- CHART CONTAINERS --- */
-        .chart-section { margin-bottom: 50px; }
-        .chart-box { height: 300px; width: 100%; margin-bottom: 20px; }
-
         /* Citations */
-        .citation-section { 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 { 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; margin-bottom: 60px; }
         .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; }
@@ -195,9 +201,9 @@
                 <div id="asr" class="view active">
                     <div class="controls">
                         <span style="font-weight:700;">View Mode:</span>
-                        <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>
+                        <button id="btn-over" class="mode-btn active" onclick="setASRMode('overview')">Overview</button>
+                        <button id="btn-fam" class="mode-btn" onclick="setASRMode('family')">By Family</button>
+                        <button id="btn-mod" class="mode-btn" onclick="setASRMode('model')">By Model</button>
                         
                         <div style="flex-grow:1; text-align:right;">
                             <div id="grp-fam" style="display:none;"><label>Select Family: </label><select id="asr-select-fam" onchange="renderASR()"></select></div>
@@ -240,20 +246,20 @@
                     <div id="lang-summary" class="summary-grid"></div>
 
                     <div class="chart-section">
-                        <h4>Automatic Speech Recognition (ASR) <span class="rank-info" style="font-weight:normal;">(WER ↓)</span></h4>
-                        <div class="chart-box"><canvas id="chart-asr"></canvas></div>
+                        <h4>Automatic Speech Recognition (ASR) <span class="rank-info" style="font-weight:normal;">(Ranked by WER ↓, then CER ↓)</span></h4>
+                        <div id="wrp-chart-asr" class="chart-wrapper"><canvas id="chart-asr"></canvas></div>
                         <div id="lang-asr-table" class="table-wrap"></div>
                     </div>
 
                     <div class="chart-section">
-                        <h4>Text-to-Speech (TTS)</h4>
-                        <div class="chart-box"><canvas id="chart-tts"></canvas></div>
+                        <h4>Text-to-Speech (TTS) Results</h4>
+                        <div id="wrp-chart-tts" class="chart-wrapper"><canvas id="chart-tts"></canvas></div>
                         <div id="lang-tts-table" class="table-wrap"></div>
                     </div>
 
                     <div class="chart-section">
-                        <h4>Spoken Language Identification (SLID) <span class="rank-info" style="font-weight:normal;">(F1 ↑)</span></h4>
-                        <div class="chart-box"><canvas id="chart-slid"></canvas></div>
+                        <h4>Spoken Language Identification (SLID) Results <span class="rank-info" style="font-weight:normal;">(Ranked by Score ↑)</span></h4>
+                        <div id="wrp-chart-slid" class="chart-wrapper"><canvas id="chart-slid"></canvas></div>
                         <div id="lang-slid-table" class="table-wrap"></div>
                     </div>
                 </div>
@@ -287,11 +293,10 @@
     </div>
 
     <script>
-        // --- 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 = 'overview';
-        let charts = { asr:null, tts:null, slid:null }; // Stores chart instances
+        let charts = { asr:null, tts:null, slid:null };
 
         fetch('/api/data').then(r=>r.json()).then(d=>{
             DATA = d;
@@ -325,7 +330,7 @@
             return `${name} (${iso})`;
         }
 
-        // --- RENDER ASR ---
+        // --- ASR ---
         function renderASR() {
             const div = document.getElementById('asr-table');
             const title = document.getElementById('asr-title');
@@ -346,21 +351,13 @@
                     if(n>0) modelStats.push({ name: modName, wer: sW/n, cer: sC/n });
                 });
                 
-                modelStats.sort((a,b) => (a.wer - b.wer) || (a.cer - b.cer)); // Sorting by WER then CER
-
+                modelStats.sort((a,b) => (a.wer - b.wer) || (a.cer - b.cer)); 
                 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>`;
                 
                 let currentRank = 1;
                 modelStats.forEach((m, i) => {
-                    if (i > 0) {
-                        const prev = modelStats[i-1];
-                        if (Math.abs(m.wer - prev.wer) > 0.001) { currentRank = i + 1; } 
-                    } else { currentRank = 1; }
-                    m.rank = currentRank;
-
-                    let icon = '';
-                    if(m.rank === 1) icon = '🥇 '; else if(m.rank === 2) icon = '🥈 '; else if(m.rank === 3) icon = '🥉 ';
-                    
+                    if (i > 0 && Math.abs(m.wer - modelStats[i-1].wer) > 0.001) currentRank = i + 1; else currentRank = 1;
+                    let icon = (currentRank===1)?'🥇 ':(currentRank===2)?'🥈 ':(currentRank===3)?'🥉 ':'';
                     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>`;
                 });
 
@@ -373,7 +370,6 @@
                 
                 const d = DATA.asr.by_family[val];
                 if(!d) return;
-                
                 d.data.sort((a,b) => a.Avg_WER - b.Avg_WER);
 
                 html = `<table><thead><tr><th>Model</th><th>Simba ASR Family Score <i class="fa-solid fa-arrow-down arrow-down"></i></th>`;
@@ -382,15 +378,8 @@
 
                 let currentRank = 1;
                 d.data.forEach((r, idx) => {
-                    if(idx > 0) {
-                        const prev = d.data[idx-1];
-                        if (Math.abs(r.Avg_WER - prev.Avg_WER) > 0.001) currentRank = idx + 1;
-                    } else { currentRank = 1; }
-                    r.rank = currentRank;
-
-                    let icon = '';
-                    if(r.rank === 1) icon = '🥇 '; else if(r.rank === 2) icon = '🥈 '; else if(r.rank === 3) icon = '🥉 ';
-
+                    if(idx > 0 && Math.abs(r.Avg_WER - d.data[idx-1].Avg_WER) > 0.001) currentRank = idx + 1; else currentRank = 1;
+                    let icon = (currentRank===1)?'🥇 ':(currentRank===2)?'🥈 ':(currentRank===3)?'🥉 ':'';
                     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}`];
@@ -414,7 +403,7 @@
             div.innerHTML = html;
         }
 
-        // --- RENDER TTS ---
+        // --- TTS ---
         function renderTTS() {
             const val = document.getElementById('tts-select').value;
             document.getElementById('tts-title').innerText = `Model: ${val}`;
@@ -444,7 +433,7 @@
             document.getElementById('tts-table').innerHTML = html;
         }
 
-        // --- RENDER SLID ---
+        // --- SLID ---
         function renderSLID() {
             let html = `<table><thead><tr><th>Language</th><th>MMS-LID-1024 (↑)</th><th>Simba-SLID (↑)</th></tr></thead><tbody>`;
             DATA.slid.forEach(r => {
@@ -456,11 +445,11 @@
             document.getElementById('slid-table').innerHTML = html;
         }
 
-        // --- RENDER LANGUAGE VIEW ---
+        // --- LANGUAGE VIEW + CHARTS ---
         function renderLanguageView() {
             const lang = document.getElementById('lang-select').value;
             
-            // 1. ASR Data Preparation
+            // 1. ASR
             let asrRows = [];
             Object.keys(DATA.asr.by_model).forEach(modName => {
                 const row = DATA.asr.by_model[modName].find(r => r.Language === lang);
@@ -468,14 +457,14 @@
             });
             asrRows.sort((a,b) => (a.wer - b.wer) || (a.cer - b.cer));
             
-            // 2. TTS Data Preparation
+            // 2. TTS
             let ttsRows = [];
             Object.keys(DATA.tts).forEach(mod => {
                 const row = DATA.tts[mod].find(r => r.language === lang);
                 if(row) ttsRows.push({model: mod, ...row});
             });
 
-            // 3. SLID Data Preparation
+            // 3. SLID
             let slidRows = [];
             const slidRow = DATA.slid.find(r => r.Language === lang) || 
                             DATA.slid.find(r => r.Language.startsWith(lang + " (")) ||
@@ -483,45 +472,53 @@
             if(slidRow) {
                 const models = Object.keys(slidRow).filter(k => k !== 'Language' && k !== 'ISO');
                 models.forEach(m => slidRows.push({model: m, val: slidRow[m]}));
-                slidRows.sort((a,b) => b.val - a.val); // Descending
+                slidRows.sort((a,b) => b.val - a.val);
             }
 
-            // --- RENDER SUMMARY CARDS ---
+            // --- SUMMARY & CHARTS ---
             let summaryHTML = "";
             
-            // ASR Winner
+            // ASR
             if(asrRows.length > 0) {
                 summaryHTML += `<div class="stat-card"><div class="stat-title">Best ASR Model</div><div class="stat-model">${asrRows[0].model}</div><div class="stat-val">WER: ${fmt(asrRows[0].wer)}%</div></div>`;
-            } else summaryHTML += `<div class="stat-card"><div class="stat-title">ASR</div><div class="stat-val">No Data</div></div>`;
+                document.getElementById('wrp-chart-asr').style.display = 'block';
+                updateChart('chart-asr', 'ASR WER (Lower is Better)', asrRows.map(r=>r.model), asrRows.map(r=>r.wer), '#3b82f6');
+            } else {
+                summaryHTML += `<div class="stat-card"><div class="stat-title">ASR</div><div class="stat-val">No Data</div></div>`;
+                document.getElementById('wrp-chart-asr').style.display = 'none';
+            }
 
-            // TTS Winner (Lowest WER for Intelligibility)
+            // TTS
             if(ttsRows.length > 0) {
-                // Sort by WER ascending
                 const bestTTS = [...ttsRows].sort((a,b) => a.wer - b.wer)[0];
                 summaryHTML += `<div class="stat-card"><div class="stat-title">Best TTS (Intelligibility)</div><div class="stat-model">${bestTTS.model}</div><div class="stat-val">WER: ${fmt(bestTTS.wer)}%</div></div>`;
-            } else summaryHTML += `<div class="stat-card"><div class="stat-title">TTS</div><div class="stat-val">No Data</div></div>`;
+                document.getElementById('wrp-chart-tts').style.display = 'block';
+                updateChart('chart-tts', 'TTS WER (Lower is Better)', ttsRows.map(r=>r.model), ttsRows.map(r=>r.wer), '#f97316');
+            } else {
+                summaryHTML += `<div class="stat-card"><div class="stat-title">TTS</div><div class="stat-val">No Data</div></div>`;
+                document.getElementById('wrp-chart-tts').style.display = 'none';
+            }
 
-            // SLID Winner
+            // SLID
             if(slidRows.length > 0) {
                 summaryHTML += `<div class="stat-card"><div class="stat-title">Best SLID Model</div><div class="stat-model">${slidRows[0].model}</div><div class="stat-val">F1: ${fmt(slidRows[0].val)}%</div></div>`;
-            } else summaryHTML += `<div class="stat-card"><div class="stat-title">SLID</div><div class="stat-val">No Data</div></div>`;
-
+                document.getElementById('wrp-chart-slid').style.display = 'block';
+                updateChart('chart-slid', 'SLID F1 Score (Higher is Better)', slidRows.map(r=>r.model), slidRows.map(r=>r.val), '#22c55e');
+            } else {
+                summaryHTML += `<div class="stat-card"><div class="stat-title">SLID</div><div class="stat-val">No Data</div></div>`;
+                document.getElementById('wrp-chart-slid').style.display = 'none';
+            }
             document.getElementById('lang-summary').innerHTML = summaryHTML;
 
-            // --- RENDER CHARTS ---
-            updateChart('chart-asr', 'ASR (WER Lower is Better)', asrRows.map(r=>r.model), asrRows.map(r=>r.wer), '#3b82f6');
-            updateChart('chart-tts', 'TTS (WER Lower is Better)', ttsRows.map(r=>r.model), ttsRows.map(r=>r.wer), '#f97316');
-            updateChart('chart-slid', 'SLID (F1 Higher is Better)', slidRows.map(r=>r.model), slidRows.map(r=>r.val), '#22c55e');
-
-            // --- RENDER TABLES ---
 
-            // ASR Table
+            // --- TABLES ---
+            // ASR
             let h1 = `<table><thead><tr><th>Model</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>`;
             if(asrRows.length === 0) h1 += `<tr><td colspan="3" class="empty-msg">No ASR results available for ${lang}.</td></tr>`;
             else {
                 let currentRank = 1;
                 asrRows.forEach((r, i) => {
-                    if (i > 0) { if (Math.abs(r.wer - asrRows[i-1].wer) > 0.001) currentRank = i + 1; } else currentRank = 1;
+                    if (i > 0 && Math.abs(r.wer - asrRows[i-1].wer) > 0.001) currentRank = i + 1; else currentRank = 1;
                     let icon = (currentRank===1)?'🥇 ':(currentRank===2)?'🥈 ':(currentRank===3)?'🥉 ':'';
                     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>`;
                 });
@@ -529,7 +526,7 @@
             h1 += `</tbody></table>`;
             document.getElementById('lang-asr-table').innerHTML = h1;
 
-            // TTS Table
+            // TTS
             let h2 = `<table><thead><tr><th>Model</th>
                 <th>WER(↓)</th><th>MCD(↓)</th><th>LogF0RMSE(↓)</th><th>SpeechTokenDistance(↓)</th>
                 <th>PESQ(↑)</th><th>UTMOS(↑)</th><th>SpeechBLEU(↑)</th><th>SpeechBERTScore(↑)</th>
@@ -549,13 +546,13 @@
             h2 += `</tbody></table>`;
             document.getElementById('lang-tts-table').innerHTML = h2;
 
-            // SLID Table
+            // SLID
             let h3 = `<table><thead><tr><th>Model</th><th>F1-Score <i class="fa-solid fa-arrow-up arrow-up"></i></th></tr></thead><tbody>`;
             if(slidRows.length === 0) h3 += `<tr><td colspan="2" class="empty-msg">No SLID results available for ${lang}.</td></tr>`;
             else {
                 let currentRank = 1;
                 slidRows.forEach((sc, i) => {
-                    if (i > 0) { if (Math.abs(sc.val - slidRows[i-1].val) > 0.001) currentRank = i + 1; } else currentRank = 1;
+                    if (i > 0 && Math.abs(sc.val - slidRows[i-1].val) > 0.001) currentRank = i + 1; else currentRank = 1;
                     let icon = (currentRank===1)?'🥇 ':(currentRank===2)?'🥈 ':(currentRank===3)?'🥉 ':'';
                     h3 += `<tr><td style="font-weight:600;">${icon}${sc.model}</td><td>${fmt(sc.val)}</td></tr>`;
                 });
@@ -564,14 +561,10 @@
             document.getElementById('lang-slid-table').innerHTML = h3;
         }
 
-        // --- CHART LOGIC ---
         function updateChart(canvasId, label, labels, data, color) {
             const ctx = document.getElementById(canvasId).getContext('2d');
-            
-            // Destroy existing chart if it exists
             if(charts[canvasId]) charts[canvasId].destroy();
-
-            if(labels.length === 0) return; // Don't draw empty chart
+            if(labels.length === 0) return;
 
             charts[canvasId] = new Chart(ctx, {
                 type: 'bar',
@@ -585,10 +578,11 @@
                     }]
                 },
                 options: {
+                    indexAxis: 'y', // Horizontal Bar Chart
                     responsive: true,
                     maintainAspectRatio: false,
                     plugins: { legend: { display: true } },
-                    scales: { y: { beginAtZero: true } }
+                    scales: { x: { beginAtZero: true } }
                 }
             });
         }
@@ -604,12 +598,8 @@
 
         window.setASRMode = (m) => {
             asrMode = m;
-            ['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="";
+            ['btn-over','btn-fam','btn-mod'].forEach(b => document.getElementById(b).classList.remove('active'));
+            document.getElementById(m==='overview'?'btn-over':(m==='family'?'btn-fam':'btn-mod')).classList.add('active');
             renderASR();
         }