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>
         :root {
@@ -19,7 +18,7 @@
             --text-white: #ffffff;
             --simba-navy: #0f172a;
             --border-gold: #dca02a;
-            --grad-blue: linear-gradient(90deg, #3b82f6, #0ea5e9);
+            --grad-blue: linear-gradient(135deg, #3b82f6, #0ea5e9);
             --grad-red: linear-gradient(135deg, #ef4444, #f43f5e);
             --grad-purple: linear-gradient(135deg, #6366f1, #8b5cf6);
             --grad-orange: linear-gradient(135deg, #f97316, #fb923c);
@@ -46,49 +45,18 @@
         .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); }
 
         /* --- HERO --- */
-        .hero { 
-            max-width: 1000px; 
-            margin: 60px auto 80px; 
-            padding: 0 40px; 
-            position: relative; 
-            text-align: center;
-        }
-        .hero-content { 
-            z-index: 2; 
-            display: flex; 
-            flex-direction: column; 
-            align-items: center; 
-        }
+        .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; }
         .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: 700px; margin-bottom: 50px; }
-        
         .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); }
         
-        /* Styled Buttons (Converted from React JSX) */
-        .action-btn { 
-            display: flex; align-items: center; gap: 8px; 
-            padding: 14px 26px; /* py-4 px-6 approx */
-            border-radius: 9999px; /* rounded-full */
-            color: white; font-weight: 700; font-size: 15px; 
-            transition: all 0.3s ease; 
-            box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); /* shadow-xl */
-            white-space: nowrap;
-        }
-        .action-btn:hover { transform: scale(1.05); } /* hover:scale-105 */
-        
-        .btn-red { background: #ef4444; box-shadow: 0 20px 25px -5px rgba(239, 68, 68, 0.2); }
-        .btn-indigo { background: #6366f1; box-shadow: 0 20px 25px -5px rgba(99, 102, 241, 0.2); }
-        .btn-orange { background: #f97316; box-shadow: 0 20px 25px -5px rgba(249, 115, 22, 0.2); }
-        .btn-blue { background: #3b82f6; box-shadow: 0 20px 25px -5px rgba(59, 130, 246, 0.2); }
-
-        .btn-red:hover { background: #dc2626; }
-        .btn-indigo:hover { background: #4f46e5; }
-        .btn-orange:hover { background: #ea580c; }
-        .btn-blue:hover { background: #2563eb; }
-
         /* --- CONTENT --- */
         .content-container { width: 80%; max-width: 1600px; margin: 0 auto; }
         .main-card { background: white; border-radius: 24px; padding: 40px; color: #0f172a; min-height: 600px; position: relative; z-index: 10; margin-bottom: 60px; }
@@ -108,25 +76,36 @@
         .score-desc { font-size: 14px; color: #475569; background: #fff7ed; border-left: 4px solid #f97316; padding: 10px 15px; margin-bottom: 20px; border-radius: 4px; }
 
         /* ASR Buttons */
-        .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 { 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: 400px; margin-bottom: 20px; display: none; }
-        canvas { max-width: 100%; }
+        /* --- FANCY SUMMARY CARDS --- */
+        .summary-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 25px; margin-bottom: 50px; }
+        
+        .fancy-card {
+            background: white; border-radius: 16px; padding: 25px;
+            display: flex; align-items: center; gap: 20px;
+            box-shadow: 0 10px 25px -5px rgba(0,0,0,0.08); border: 1px solid #f1f5f9;
+            transition: transform 0.3s ease, box-shadow 0.3s ease;
+        }
+        .fancy-card:hover { transform: translateY(-5px); box-shadow: 0 20px 30px -10px rgba(0,0,0,0.12); border-color: #e2e8f0; }
+        
+        .card-icon {
+            width: 60px; height: 60px; border-radius: 14px;
+            display: flex; align-items: center; justify-content: center;
+            font-size: 26px; color: white; flex-shrink: 0;
+            box-shadow: 0 8px 15px -3px rgba(0,0,0,0.2);
+        }
+        .icon-asr { background: var(--grad-blue); }
+        .icon-tts { background: var(--grad-orange); }
+        .icon-slid { background: var(--grad-green); }
 
-        /* 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; }
+        .card-content { flex: 1; }
+        .card-title { font-size: 11px; font-weight: 700; color: #64748b; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 5px; }
+        .card-model { font-size: 18px; font-weight: 800; color: #0f172a; margin-bottom: 4px; line-height: 1.3; }
+        .card-score { font-size: 14px; font-weight: 600; color: #475569; }
+        .card-score b { color: #0f172a; }
 
         /* Table */
         .table-wrap { overflow-x: auto; border: 1px solid #e2e8f0; border-radius: 12px; margin-bottom: 30px; }
@@ -161,6 +140,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>
@@ -171,20 +151,9 @@
             <h1>SimbaBench Leaderboard</h1>
             <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 btn-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 btn-indigo">
-                    <i class="fa-solid fa-code-branch"></i> Pipeline
-                </a>
-                <a href="https://huggingface.co/datasets/UBC-NLP/simba" target="_blank" class="action-btn btn-orange">
-                    <i class="fa-solid fa-database"></i> Dataset
-                </a>
-                <a href="https://africa.dlnlp.ai/simba/#models" target="_blank" class="action-btn btn-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>
@@ -250,23 +219,14 @@
                     
                     <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;">(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>
+                    <h4>Automatic Speech Recognition (ASR) <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 class="chart-section">
-                        <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>
+                    <h4>Text-to-Speech (TTS) Results</h4>
+                    <div id="lang-tts-table" class="table-wrap"></div>
 
-                    <div class="chart-section">
-                        <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>
+                    <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>
             </div>
         </div>
@@ -301,7 +261,6 @@
         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 };
 
         fetch('/api/data').then(r=>r.json()).then(d=>{
             DATA = d;
@@ -316,9 +275,10 @@
             populate('tts-select', DATA.metadata.tts_models);
             
             const allLangs = new Set();
-            Object.values(DATA.asr.by_model).forEach(rows => rows.forEach(r => allLangs.add(r.Language)));
-            Object.values(DATA.tts).forEach(rows => rows.forEach(r => allLangs.add(r.language)));
-            if(DATA.slid) DATA.slid.forEach(r => allLangs.add(r.Language));
+            // Collect languages from all sources to be thorough
+            Object.values(DATA.asr.by_model).forEach(rows => rows.forEach(r => { if(r.Language) allLangs.add(r.Language); }));
+            Object.values(DATA.tts).forEach(rows => rows.forEach(r => { const l = r.Language || r.language; if(l) allLangs.add(l); }));
+            if(DATA.slid) DATA.slid.forEach(r => { if(r.Language) allLangs.add(r.Language); });
             
             populate('lang-select', Array.from(allLangs).sort());
 
@@ -450,11 +410,11 @@
             document.getElementById('slid-table').innerHTML = html;
         }
 
-        // --- LANGUAGE VIEW + CHARTS ---
+        // --- LANGUAGE VIEW ---
         function renderLanguageView() {
             const lang = document.getElementById('lang-select').value;
             
-            // 1. ASR Data Preparation
+            // 1. ASR Data
             let asrRows = [];
             Object.keys(DATA.asr.by_model).forEach(modName => {
                 const row = DATA.asr.by_model[modName].find(r => r.Language === lang);
@@ -462,14 +422,14 @@
             });
             asrRows.sort((a,b) => (a.wer - b.wer) || (a.cer - b.cer));
             
-            // 2. TTS Data Preparation
+            // 2. TTS Data
             let ttsRows = [];
             Object.keys(DATA.tts).forEach(mod => {
-                const row = DATA.tts[mod].find(r => r.language === lang);
+                const row = DATA.tts[mod].find(r => (r.Language || r.language) === lang);
                 if(row) ttsRows.push({model: mod, ...row});
             });
 
-            // 3. SLID Data Preparation
+            // 3. SLID Data
             let slidRows = [];
             const slidRow = DATA.slid.find(r => r.Language === lang) || 
                             DATA.slid.find(r => r.Language.startsWith(lang + " (")) ||
@@ -480,44 +440,50 @@
                 slidRows.sort((a,b) => b.val - a.val); // Descending
             }
 
-            // --- RENDER SUMMARY CARDS ---
+            // --- 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>`;
-                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';
-            }
+                summaryHTML += `<div class="fancy-card">
+                    <div class="card-icon icon-asr"><i class="fa-solid fa-microphone-lines"></i></div>
+                    <div class="card-content">
+                        <div class="card-title">Best ASR Model</div>
+                        <div class="card-model">${asrRows[0].model}</div>
+                        <div class="card-score">WER: <b>${fmt(asrRows[0].wer)}%</b></div>
+                    </div>
+                </div>`;
+            } else summaryHTML += `<div class="fancy-card"><div class="card-icon icon-asr"><i class="fa-solid fa-microphone-slash"></i></div><div class="card-content"><div class="card-title">ASR</div><div class="card-model">No Data</div></div></div>`;
 
-            // TTS Winner (Lowest WER for Intelligibility)
+            // TTS Winner
             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>`;
-                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';
-            }
+                summaryHTML += `<div class="fancy-card">
+                    <div class="card-icon icon-tts"><i class="fa-solid fa-volume-high"></i></div>
+                    <div class="card-content">
+                        <div class="card-title">Best TTS (Intelligibility)</div>
+                        <div class="card-model">${bestTTS.model}</div>
+                        <div class="card-score">WER: <b>${fmt(bestTTS.wer)}%</b></div>
+                    </div>
+                </div>`;
+            } else summaryHTML += `<div class="fancy-card"><div class="card-icon icon-tts"><i class="fa-solid fa-volume-xmark"></i></div><div class="card-content"><div class="card-title">TTS</div><div class="card-model">No Data</div></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>`;
-                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';
-            }
+                summaryHTML += `<div class="fancy-card">
+                    <div class="card-icon icon-slid"><i class="fa-solid fa-language"></i></div>
+                    <div class="card-content">
+                        <div class="card-title">Best SLID Model</div>
+                        <div class="card-model">${slidRows[0].model}</div>
+                        <div class="card-score">F1 Score: <b>${fmt(slidRows[0].val)}%</b></div>
+                    </div>
+                </div>`;
+            } else summaryHTML += `<div class="fancy-card"><div class="card-icon icon-slid"><i class="fa-solid fa-circle-question"></i></div><div class="card-content"><div class="card-title">SLID</div><div class="card-model">No Data</div></div></div>`;
+
             document.getElementById('lang-summary').innerHTML = summaryHTML;
 
 
-            // --- RENDER TABLES ---
+            // --- 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>`;
@@ -567,32 +533,6 @@
             document.getElementById('lang-slid-table').innerHTML = h3;
         }
 
-        function updateChart(canvasId, label, labels, data, color) {
-            const ctx = document.getElementById(canvasId).getContext('2d');
-            if(charts[canvasId]) charts[canvasId].destroy();
-            if(labels.length === 0) return;
-
-            charts[canvasId] = new Chart(ctx, {
-                type: 'bar',
-                data: {
-                    labels: labels,
-                    datasets: [{
-                        label: label,
-                        data: data,
-                        backgroundColor: color,
-                        borderRadius: 4
-                    }]
-                },
-                options: {
-                    indexAxis: 'y', // Horizontal Bar Chart
-                    responsive: true,
-                    maintainAspectRatio: false,
-                    plugins: { legend: { display: true } },
-                    scales: { x: { beginAtZero: true } }
-                }
-            });
-        }
-
         // --- UI ---
         window.setTab = (id, btn) => {
             document.querySelectorAll('.view').forEach(e => e.classList.remove('active'));
@@ -619,4 +559,4 @@
         }
     </script>
 </body>
-</html> 
+</html>