Update public/index.html

public/index.html

@@ -47,26 +47,47 @@
 
         /* --- HERO --- */
         .hero { 
-            max-width: 1000px; margin: 60px auto 100px; padding: 0 40px; 
-            position: relative; text-align: center;
+            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-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); }
         
-        /* 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); }
-        .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; } }
+        /* 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; }
@@ -86,37 +107,17 @@
         .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 --- */
+        /* 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: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);
+            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 */
-        }
+        /* Charts */
+        .chart-wrapper { width: 100%; max-height: 400px; margin-bottom: 20px; display: none; }
         canvas { max-width: 100%; }
 
         /* Summary Cards */
@@ -160,26 +161,30 @@
             <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>
 
     <div class="hero layout-width">
-        <div class="wave-bg"></div>
         <div class="hero-content">
             <div class="conf-badge"><i class="fa-solid fa-location-dot"></i> EMNLP 2025 · Suzhou, China</div>
             <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 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="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>
+                <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>
             </div>
         </div>
     </div>
@@ -449,7 +454,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);
@@ -457,14 +462,14 @@
             });
             asrRows.sort((a,b) => (a.wer - b.wer) || (a.cer - b.cer));
             
-            // 2. TTS
+            // 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
+            // 3. SLID Data Preparation
             let slidRows = [];
             const slidRow = DATA.slid.find(r => r.Language === lang) || 
                             DATA.slid.find(r => r.Language.startsWith(lang + " (")) ||
@@ -472,13 +477,13 @@
             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);
+                slidRows.sort((a,b) => b.val - a.val); // Descending
             }
 
-            // --- SUMMARY & CHARTS ---
+            // --- RENDER SUMMARY CARDS ---
             let summaryHTML = "";
             
-            // ASR
+            // 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';
@@ -488,8 +493,9 @@
                 document.getElementById('wrp-chart-asr').style.display = 'none';
             }
 
-            // TTS
+            // 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>`;
                 document.getElementById('wrp-chart-tts').style.display = 'block';
@@ -499,7 +505,7 @@
                 document.getElementById('wrp-chart-tts').style.display = 'none';
             }
 
-            // SLID
+            // 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';
@@ -511,8 +517,8 @@
             document.getElementById('lang-summary').innerHTML = summaryHTML;
 
 
-            // --- TABLES ---
-            // ASR
+            // --- 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 {
@@ -526,7 +532,7 @@
             h1 += `</tbody></table>`;
             document.getElementById('lang-asr-table').innerHTML = h1;
 
-            // 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>
@@ -546,7 +552,7 @@
             h2 += `</tbody></table>`;
             document.getElementById('lang-tts-table').innerHTML = h2;
 
-            // 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>`;
             if(slidRows.length === 0) h3 += `<tr><td colspan="2" class="empty-msg">No SLID results available for ${lang}.</td></tr>`;
             else {