Update public/index.html

public/index.html

@@ -10,6 +10,8 @@
     <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>
         :root {
@@ -42,10 +44,7 @@
         .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); }
 
         /* --- HERO --- */
         .hero { 
@@ -69,11 +68,7 @@
         .hero-actions { display: flex; gap: 15px; flex-wrap: wrap; justify-content: center; }
         .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); } 
-        .bg-purple { background: var(--grad-purple); } 
-        .bg-orange { background: var(--grad-orange); } 
-        .bg-blue { background: var(--grad-blue); } 
-        .bg-green { background: var(--grad-green); }
+        .bg-red { background: var(--grad-red); } .bg-purple { background: var(--grad-purple); }
         
         /* Wave Animation */
         .wave-bg {
@@ -81,15 +76,9 @@
             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; /* Space above wave */
-            mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
+            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; }
@@ -126,6 +115,23 @@
 
         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 h3 { color: var(--text-yellow); font-family: 'Rubik', sans-serif; font-size: 24px; margin-top: 0; }
@@ -148,6 +154,7 @@
             <div class="nav-text"><span>Voice of a</span> Continent</div>
         </a>
         <div class="nav-links">
+            <a href="https://aclanthology.org/2025.emnlp-main.559" target="_blank" class="nav-link">Paper</a>
             <a href="https://africa.dlnlp.ai/simba/" target="_blank" class="btn-submit">Submit New Results</a>
         </div>
     </nav>
@@ -160,22 +167,14 @@
             <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://aclanthology.org/2025.emnlp-main.559" 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="https://africa.dlnlp.ai/simba/#models" target="_blank" class="action-btn bg-blue">
-                    <i class="fa-solid fa-bolt"></i> Models
-                </a>
+                <a href="https://aclanthology.org/2025.emnlp-main.559" target="_blank" class="action-btn bg-red"><i class="fa-regular fa-file-pdf"></i> Read Paper</a>
+                <a href="https://africa.dlnlp.ai/simba" target="_blank" class="action-btn bg-purple"><i class="fa-solid fa-code-branch"></i> Official Website</a>
             </div>
         </div>
-        <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="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>
         </div>
     </div>
 
@@ -211,7 +210,6 @@
                         <div id="asr-rank-info" class="rank-info">Ranking: WER (↓) then CER (↓)</div>
                     </div>
                     <div id="asr-desc"></div>
-                    
                     <div id="asr-table" class="table-wrap"></div>
                 </div>
 
@@ -239,14 +237,25 @@
                         <select id="lang-select" onchange="renderLanguageView()"></select>
                     </div>
                     
-                    <h4>Automatic Speech Recognition (ASR) Results <span class="rank-info" style="font-weight:normal;">(Ranked by WER ↓, then CER ↓)</span></h4>
-                    <div id="lang-asr-table" class="table-wrap"></div>
+                    <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>
+                        <div id="lang-asr-table" class="table-wrap"></div>
+                    </div>
 
-                    <h4>Text-to-Speech (TTS) Results</h4>
-                    <div id="lang-tts-table" class="table-wrap"></div>
+                    <div class="chart-section">
+                        <h4>Text-to-Speech (TTS)</h4>
+                        <div class="chart-box"><canvas id="chart-tts"></canvas></div>
+                        <div id="lang-tts-table" class="table-wrap"></div>
+                    </div>
 
-                    <h4>Spoken Language Identification (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 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>
+                        <div id="lang-slid-table" class="table-wrap"></div>
+                    </div>
                 </div>
             </div>
         </div>
@@ -282,6 +291,7 @@
         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
 
         fetch('/api/data').then(r=>r.json()).then(d=>{
             DATA = d;
@@ -336,7 +346,7 @@
                     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));
+                modelStats.sort((a,b) => (a.wer - b.wer) || (a.cer - b.cer)); // Sorting by WER then 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>`;
                 
@@ -344,11 +354,10 @@
                 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;
-                    }
+                        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 = '🥉 ';
                     
@@ -364,6 +373,7 @@
                 
                 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>`;
@@ -375,10 +385,9 @@
                     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;
-                    }
+                    } 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 = '🥉 ';
 
@@ -451,7 +460,7 @@
         function renderLanguageView() {
             const lang = document.getElementById('lang-select').value;
             
-            // 1. ASR
+            // 1. ASR Data Preparation
             let asrRows = [];
             Object.keys(DATA.asr.by_model).forEach(modName => {
                 const row = DATA.asr.by_model[modName].find(r => r.Language === lang);
@@ -459,83 +468,131 @@
             });
             asrRows.sort((a,b) => (a.wer - b.wer) || (a.cer - b.cer));
             
+            // 2. TTS Data Preparation
+            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
+            let slidRows = [];
+            const slidRow = DATA.slid.find(r => r.Language === lang) || 
+                            DATA.slid.find(r => r.Language.startsWith(lang + " (")) ||
+                            DATA.slid.find(r => r.Language.includes(lang));
+            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
+            }
+
+            // --- RENDER SUMMARY CARDS ---
+            let summaryHTML = "";
+            
+            // ASR Winner
+            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>`;
+
+            // TTS Winner (Lowest WER for Intelligibility)
+            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>`;
+
+            // SLID Winner
+            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('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
             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) {
-                        const prev = asrRows[i-1];
-                        if (Math.abs(r.wer - prev.wer) > 0.001) currentRank = i + 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 (i > 0) { if (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>`;
                 });
             }
             h1 += `</tbody></table>`;
             document.getElementById('lang-asr-table').innerHTML = h1;
 
-            // 2. TTS
+            // TTS Table
             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>
                 </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;
+            if(ttsRows.length === 0) h2 += `<tr><td colspan="9" class="empty-msg">No TTS results available for ${lang}.</td></tr>`;
+            else {
+                ttsRows.forEach(row => {
                     h2 += `<tr>
-                        <td style="font-weight:600;">${mod}</td>
+                        <td style="font-weight:600;">${row.model}</td>
                         <td>${fmt(row.wer)}</td><td>${fmt(row.mcd)}</td>
                         <td>${fmt(row.logf0rmse)}</td><td>${fmt(row.speech_token_distance)}</td>
                         <td>${fmt(row.pesq)}</td><td>${fmt(row.utmos)}</td>
                         <td>${fmt(row.speechbleu)}</td><td>${fmt(row.speechbert_score)}</td>
                     </tr>`;
-                }
-            });
-            if(!ttsFound) h2 += `<tr><td colspan="9" class="empty-msg">No TTS results available for ${lang}.</td></tr>`;
+                });
+            }
             h2 += `</tbody></table>`;
             document.getElementById('lang-tts-table').innerHTML = h2;
 
-            // 3. SLID
+            // SLID Table
             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>`;
-            const slidRow = DATA.slid.find(r => r.Language === lang) || 
-                            DATA.slid.find(r => r.Language.startsWith(lang + " (")) ||
-                            DATA.slid.find(r => r.Language.includes(lang));
-            
-            if(slidRow) {
-                const models = Object.keys(slidRow).filter(k => k !== 'Language' && k !== 'ISO');
-                const scores = models.map(m => ({n: m, v: slidRow[m]})).sort((a,b) => b.v - a.v);
-                
+            if(slidRows.length === 0) h3 += `<tr><td colspan="2" class="empty-msg">No SLID results available for ${lang}.</td></tr>`;
+            else {
                 let currentRank = 1;
-                scores.forEach((sc, i) => {
-                    if(i > 0) {
-                        const prev = scores[i-1];
-                        if (Math.abs(sc.v - prev.v) > 0.001) currentRank = i + 1;
-                    } else {
-                        currentRank = 1;
-                    }
-                    sc.rank = currentRank;
-
-                    let icon = '';
-                    if(sc.rank === 1) icon = '🥇 '; else if(sc.rank === 2) icon = '🥈 '; else if(sc.rank === 3) icon = '🥉 ';
-                    
-                    h3 += `<tr><td style="font-weight:600;">${icon}${sc.n}</td><td>${fmt(sc.v)}</td></tr>`;
+                slidRows.forEach((sc, i) => {
+                    if (i > 0) { if (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>`;
                 });
-            } else {
-                h3 += `<tr><td colspan="2" class="empty-msg">No SLID results available for ${lang}.</td></tr>`;
             }
             h3 += `</tbody></table>`;
             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
+
+            charts[canvasId] = new Chart(ctx, {
+                type: 'bar',
+                data: {
+                    labels: labels,
+                    datasets: [{
+                        label: label,
+                        data: data,
+                        backgroundColor: color,
+                        borderRadius: 4
+                    }]
+                },
+                options: {
+                    responsive: true,
+                    maintainAspectRatio: false,
+                    plugins: { legend: { display: true } },
+                    scales: { y: { beginAtZero: true } }
+                }
+            });
+        }
+
         // --- UI ---
         window.setTab = (id, btn) => {
             document.querySelectorAll('.view').forEach(e => e.classList.remove('active'));