Update public/index.html

public/index.html

@@ -4,562 +4,207 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Voice of a Continent | SimbaBench Leaderboard</title>
-    <link rel="icon" type="image/jpeg" href="https://africa.dlnlp.ai/simba/images/favicon.png">
-    
+    <link rel="icon" type="image/png" href="https://africa.dlnlp.ai/simba/images/favicon.png">
     <link rel="preconnect" href="https://fonts.googleapis.com">
     <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 href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Outfit:wght@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">
-
     <style>
         :root {
-            --bg-deep: #1e1b4b;       
-            --text-yellow: #fbbf24;   
+            /* Background colors */
+            --bg-deep: #1e1b4b;
+            --bg-darker: #0f172a;
+            --bg-card: rgba(255, 255, 255, 0.05);
+            
+            /* Text colors */
+            --text-yellow: #fbbf24;
             --text-white: #ffffff;
+            --text-gray: #94a3b8;
+            
+            /* Brand colors */
             --simba-navy: #0f172a;
             --border-gold: #dca02a;
-            --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);
-            --grad-green: linear-gradient(135deg, #22c55e, #10b981);
+            
+            /* Button gradients - matching the hero buttons */
+            --grad-red: linear-gradient(135deg, #ef4444, #dc2626);
+            --grad-indigo: linear-gradient(135deg, #6366f1, #4f46e5);
+            --grad-orange: linear-gradient(135deg, #f97316, #ea580c);
+            --grad-blue: linear-gradient(135deg, #3b82f6, #2563eb);
+            --grad-green: linear-gradient(135deg, #22c55e, #16a34a);
+            --grad-dark: linear-gradient(135deg, #374151, #1f2937);
+        }
+
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
         }
 
         body {
             background-color: var(--bg-deep);
             font-family: 'Inter', sans-serif;
             color: var(--text-white);
-            margin: 0; padding: 0;
             overflow-x: hidden;
+            line-height: 1.6;
         }
 
-        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; }
-        .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); }
-        .nav-links { display: flex; gap: 25px; align-items: center; }
-        .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 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); }
-        
-        /* --- 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; }
-        
-        /* 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); }
-        .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; }
-        .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: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); }
-
-        /* --- 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);
+        h1, h2, h3 {
+            font-family: 'Outfit', sans-serif;
+            font-weight: 700;
         }
-        .icon-asr { background: var(--grad-blue); }
-        .icon-tts { background: var(--grad-orange); }
-        .icon-slid { background: var(--grad-green); }
-
-        .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; }
-        table { width: 100%; border-collapse: collapse; font-size: 14px; }
-        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: 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; }
-
-        /* 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; 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; }
-        
-        .footer { text-align: center; padding: 40px; color: #94a3b8; font-size: 14px; }
-        @keyframes fadeIn { from{opacity:0; transform:translateY(10px)} to{opacity:1; transform:translateY(0)} }
-        
-        .arrow-down { color: #d97706; font-size: 10px; }
-        .arrow-up { color: #16a34a; font-size: 10px; }
-        .empty-msg { color: #64748b; font-style: italic; padding: 20px; text-align: center; }
-    </style>
-</head>
-<body>
-
-    <nav class="navbar layout-width">
-        <a href="https://africa.dlnlp.ai/simba" class="nav-logo">
-            <img src="https://africa.dlnlp.ai/simba/images/simba_main_logo.png" alt="Logo">
-            <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="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-indigo"><i class="fa-solid fa-globe"></i> Official Website</a>
-<a href="https://huggingface.co/collections/UBC-NLP/simba-speech-series" target="_blank" class="action-btn bg-orange"><i class="fa-solid fa-robot"></i> Simba Model Series</a>
-<a href="https://github.com/UBC-NLP/simba" target="_blank" class="action-btn bg-gray"><i class="fa-brands fa-github"></i> GitHub</a>
-              
-            </div>
-        </div>
-    </div>
-
-    <div class="content-container layout-width">
-        <div class="main-card" id="board">
-            <div id="loader" style="text-align:center; padding:60px; color:#64748b;">
-                <i class="fa-solid fa-circle-notch fa-spin fa-3x"></i><br><br>Loading Leaderboard Data...
-            </div>
-
-            <div id="app-content" style="display:none;">
-                <div class="tabs">
-                    <button class="tab-btn active" id="tab-btn-asr" onclick="setTab('asr')">Automatic Speech Recognition (ASR)</button>
-                    <button class="tab-btn" id="tab-btn-tts" onclick="setTab('tts')">Text-to-Speech (TTS)</button>
-                    <button class="tab-btn" id="tab-btn-slid" onclick="setTab('slid')">Spoken Language Identification (SLID)</button>
-                    <button class="tab-btn" id="tab-btn-lang" onclick="setTab('lang')">Language Analysis</button>
-                </div>
-
-                <div id="asr" class="view active">
-                    <div class="controls">
-                        <span style="font-weight:700;">View Mode:</span>
-                        <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>
-                            <div id="grp-mod" style="display:none;"><label>Select Model: </label><select id="asr-select-mod" onchange="renderASR()"></select></div>
-                        </div>
-                    </div>
-                    
-                    <div style="display:flex; justify-content:space-between; align-items:end; margin-bottom:10px;">
-                        <h3 id="asr-title" style="color:#d97706; margin:0;">Results Overview</h3>
-                        <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>
-
-                <div id="tts" class="view">
-                    <div class="controls">
-                        <span style="font-weight:600;">Select Model:</span>
-                        <select id="tts-select" onchange="renderTTS()"></select>
-                    </div>
-                    <h3 id="tts-title" style="color:#d97706; margin-bottom:10px;"></h3>
-                    <div id="tts-summary" style="margin-bottom:20px; font-weight:600; color:#0f172a;"></div>
-                    <div id="tts-table" class="table-wrap"></div>
-                </div>
-
-                <div id="slid" class="view">
-                    <div style="display:flex; justify-content:space-between; align-items:end; margin-bottom:15px;">
-                        <h3 style="color:#d97706; margin:0;">Spoken Language Identification</h3>
-                        <div class="rank-info">Ranking: F1-Macro (↑)</div>
-                    </div>
-                    <div id="slid-table" class="table-wrap"></div>
-                </div>
-
-                <div id="lang" class="view">
-                    <div class="controls">
-                        <span style="font-weight:600;">Select Language:</span>
-                        <select id="lang-select" onchange="renderLanguageView()"></select>
-                    </div>
-                    
-                    <div id="lang-summary" class="summary-grid"></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>
-
-                    <h4>Text-to-Speech (TTS) Results</h4>
-                    <div id="lang-tts-table" class="table-wrap"></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>
-
-        <div class="citation-section layout-width" id="citation">
-            <h3>Citation</h3>
-            <button class="copy-btn" onclick="copyCitation()"><i class="fa-regular fa-copy"></i> Copy</button>
-            <p style="color:#94a3b8; margin-bottom:20px;">If you use the Simba benchmark, please cite our paper:</p>
-            <div class="citation-box" id="bibtex">@inproceedings{elmadany-etal-2025-voice,
-    title = "Voice of a Continent: Mapping {A}frica{'}s Speech Technology Frontier",
-    author = "Elmadany, AbdelRahim A.  and Kwon, Sang Yun  and Toyin, Hawau Olamide  and Alcoba Inciarte, Alcides  and Aldarmaki, Hanan  and Abdul-Mageed, Muhammad",
-    editor = "Christodoulopoulos, Christos  and Chakraborty, Tanmoy  and Rose, Carolyn  and Peng, Violet",
-    booktitle = "Proceedings of the 2025 Conference on Empirical Methods in Natural Language Processing",
-    month = nov,
-    year = "2025",
-    address = "Suzhou, China",
-    publisher = "Association for Computational Linguistics",
-    url = "https://aclanthology.org/2025.emnlp-main.559/",
-    doi = "10.18653/v1/2025.emnlp-main.559",
-    pages = "11039--11061",
-    ISBN = "979-8-89176-332-6",
-}</div>
-        </div>
-    </div>
 
-    <div class="footer">
-        <img src="https://africa.dlnlp.ai/sahara//img/sahara_web_sponsers.jpg" width="250" style="opacity:0.8; margin-bottom:15px;">
-        <br>&copy; 2025 Simba Benchmark.
-    </div>
-
-    <script>
-        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';
-
-        fetch('/api/data').then(r=>r.json()).then(d=>{
-            DATA = d;
-            document.getElementById('loader').style.display='none';
-            document.getElementById('app-content').style.display='block';
-            init();
-        });
-
-        function init() {
-            populate('asr-select-fam', DATA.metadata.families);
-            populate('asr-select-mod', DATA.metadata.models);
-            populate('tts-select', DATA.metadata.tts_models);
-            
-            const allLangs = new Set();
-            // 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());
-
-            renderASR(); renderTTS(); renderSLID();
+        a {
+            text-decoration: none;
+            transition: all 0.3s ease;
         }
 
-        function populate(id, list) {
-            const s = document.getElementById(id); s.innerHTML='';
-            list.forEach(i=>{ let o=document.createElement('option'); o.value=i; o.text=i; s.add(o); });
-        }
-        function fmt(n) { return (n==null)?'N/A':n.toFixed(2); }
-        function getIso(name, dataIso) { 
-            let iso = dataIso || NAME_TO_ISO[name] || name.substring(0,3).toLowerCase();
-            return `${name} (${iso})`;
+        /* Header Section */
+        .header {
+            text-align: center;
+            padding: 60px 20px 40px;
+            background: linear-gradient(180deg, var(--bg-darker) 0%, var(--bg-deep) 100%);
+            border-bottom: 1px solid rgba(255, 255, 255, 0.1);
         }
 
-        // --- ASR ---
-        function renderASR() {
-            const div = document.getElementById('asr-table');
-            const title = document.getElementById('asr-title');
-            const desc = document.getElementById('asr-desc');
-            let html='';
-
-            if (asrMode === 'overview') {
-                title.innerText = "Results Overview (All Models)";
-                desc.innerHTML = `<p class="score-desc">The <b>Simba ASR Score</b> is the global average of WER and CER across all languages in the benchmark.</p>`;
-                document.getElementById('grp-fam').style.display='none';
-                document.getElementById('grp-mod').style.display='none';
-
-                const modelStats = [];
-                Object.keys(DATA.asr.by_model).forEach(modName => {
-                    const rows = DATA.asr.by_model[modName];
-                    let sW=0, sC=0, n=0;
-                    rows.forEach(r => { sW+=r.WER; sC+=r.CER; n++; });
-                    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)); 
-                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 && 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>`;
-                });
-
-            } else if(asrMode==='family'){
-                const val = document.getElementById('asr-select-fam').value;
-                title.innerText = `Results for Family: ${val}`;
-                desc.innerHTML = `<p class="score-desc">The <b>Family Score</b> is the average WER and CER calculated across all languages within the <b>${val}</b> family.</p>`;
-                document.getElementById('grp-fam').style.display='inline-block';
-                document.getElementById('grp-mod').style.display='none';
-                
-                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>`;
-                d.languages.forEach(l => html += `<th>${getIso(l.name, l.iso)}</th>`);
-                html += `</tr></thead><tbody>`;
-
-                let currentRank = 1;
-                d.data.forEach((r, idx) => {
-                    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}`];
-                        html += `<td>${(w!=null)?fmt(w)+'/'+fmt(c):'-'}</td>`;
-                    });
-                    html += `</tr>`;
-                });
-            } else {
-                const val = document.getElementById('asr-select-mod').value;
-                title.innerText = `Results for Model: ${val}`;
-                desc.innerHTML = "";
-                document.getElementById('grp-fam').style.display='none';
-                document.getElementById('grp-mod').style.display='inline-block';
-                
-                const rows = DATA.asr.by_model[val];
-                html = `<table><thead><tr><th>Language</th><th>Family</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>`;
-                rows.forEach(r => {
-                    html += `<tr><td>${getIso(r.Language, r.ISO)}</td><td>${r.Family}</td><td>${fmt(r.WER)}</td><td>${fmt(r.CER)}</td></tr>`;
-                });
-            }
-            div.innerHTML = html;
+        .logo {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            gap: 15px;
+            margin-bottom: 20px;
         }
 
-        // --- TTS ---
-        function renderTTS() {
-            const val = document.getElementById('tts-select').value;
-            document.getElementById('tts-title').innerText = `Model: ${val}`;
-            const rows = DATA.tts[val];
-            if(!rows) return;
-
-            const metrics = [
-                {k:'wer', l:'WER(↓)', h:false}, {k:'mcd', l:'MCD(↓)', h:false}, 
-                {k:'logf0rmse', l:'LogF0RMSE(↓)', h:false}, {k:'speech_token_distance', l:'SpeechTokenDistance(↓)', h:false},
-                {k:'pesq', l:'PESQ(↑)', h:true}, {k:'utmos', l:'UTMOS(↑)', h:true},
-                {k:'speechbleu', l:'SpeechBLEU(↑)', h:true}, {k:'speechbert_score', l:'SpeechBERTScore(↑)', h:true}
-            ];
-
-            let sums={}, c=0;
-            metrics.forEach(m=>sums[m.k]=0);
-            rows.forEach(r=>{ metrics.forEach(m=>sums[m.k]+=(r[m.k]||0)); c++; });
-            document.getElementById('tts-summary').innerHTML = "<b>Averages: </b>" + metrics.map(m=> `${m.l.replace('(↓)','').replace('(↑)','')}: ${fmt(sums[m.k]/c)}`).join(" | ");
+        .logo img {
+            width: 60px;
+            height: 60px;
+        }
 
-            let html = `<table><thead><tr><th>Language</th>`;
-            metrics.forEach(m => html += `<th>${m.l}</th>`);
-            html += `</tr></thead><tbody>`;
-            rows.forEach(r => {
-                html += `<tr><td>${getIso(r.language, r.iso)}</td>`;
-                metrics.forEach(m => html += `<td>${fmt(r[m.k])}</td>`);
-                html += `</tr>`;
-            });
-            document.getElementById('tts-table').innerHTML = html;
+        .logo-text {
+            text-align: left;
         }
 
-        // --- 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 => {
-                let m = r['MMS-LID-1024'], s = r['Simba-SLID'];
-                let mS = fmt(m), sS = fmt(s);
-                if(m > s) mS = `<b>${mS} 🥇</b>`; else if(s > m) sS = `<b>${sS} 🥇</b>`;
-                html += `<tr><td>${getIso(r.Language)}</td><td>${mS}</td><td>${sS}</td></tr>`;
-            });
-            document.getElementById('slid-table').innerHTML = html;
+        .logo-text h1 {
+            font-size: 2rem;
+            font-weight: 800;
+            line-height: 1.2;
         }
 
-        // --- LANGUAGE VIEW ---
-        function renderLanguageView() {
-            const lang = document.getElementById('lang-select').value;
-            
-            // 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);
-                if(row) asrRows.push({model: modName, wer: row.WER, cer: row.CER});
-            });
-            asrRows.sort((a,b) => (a.wer - b.wer) || (a.cer - b.cer));
-            
-            // 2. TTS Data
-            let ttsRows = [];
-            Object.keys(DATA.tts).forEach(mod => {
-                const row = DATA.tts[mod].find(r => (r.Language || r.language) === lang);
-                if(row) ttsRows.push({model: mod, ...row});
-            });
+        .logo-text .highlight {
+            color: var(--text-yellow);
+        }
 
-            // 3. SLID Data
-            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
-            }
+        .subtitle {
+            font-size: 1.1rem;
+            color: var(--text-gray);
+            margin-bottom: 30px;
+            max-width: 800px;
+            margin-left: auto;
+            margin-right: auto;
+        }
 
-            // --- SUMMARY CARDS ---
-            let summaryHTML = "";
-            
-            // ASR Winner
-            if(asrRows.length > 0) {
-                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>`;
+        /* Action Buttons */
+        .action-buttons {
+            display: flex;
+            flex-wrap: wrap;
+            gap: 15px;
+            justify-content: center;
+            margin-top: 30px;
+        }
 
-            // TTS Winner
-            if(ttsRows.length > 0) {
-                const bestTTS = [...ttsRows].sort((a,b) => a.wer - b.wer)[0];
-                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>`;
+        .action-btn {
+            padding: 14px 28px;
+            border-radius: 50px;
+            color: white;
+            font-weight: 600;
+            font-size: 0.95rem;
+            display: inline-flex;
+            align-items: center;
+            gap: 10px;
+            transition: all 0.3s ease;
+            border: none;
+            cursor: pointer;
+            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
+        }
 
-            // SLID Winner
-            if(slidRows.length > 0) {
-                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>`;
+        .action-btn:hover {
+            transform: translateY(-3px);
+            box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
+        }
 
-            document.getElementById('lang-summary').innerHTML = summaryHTML;
+        .action-btn i {
+            font-size: 1.1rem;
+        }
 
+        .btn-red { background: var(--grad-red); }
+        .btn-indigo { background: var(--grad-indigo); }
+        .btn-orange { background: var(--grad-orange); }
+        .btn-blue { background: var(--grad-blue); }
+        .btn-green { background: var(--grad-green); }
+        .btn-dark { background: var(--grad-dark); }
+
+        /* Main Content */
+        .container {
+            max-width: 1400px;
+            margin: 0 auto;
+            padding: 40px 20px;
+        }
 
-            // --- 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 && 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>`;
-                });
+        /* Responsive Design */
+        @media (max-width: 768px) {
+            .logo-text h1 {
+                font-size: 1.5rem;
             }
-            h1 += `</tbody></table>`;
-            document.getElementById('lang-asr-table').innerHTML = h1;
 
-            // 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>`;
-            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;">${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>`;
-                });
+            .action-buttons {
+                flex-direction: column;
+                align-items: stretch;
             }
-            h2 += `</tbody></table>`;
-            document.getElementById('lang-tts-table').innerHTML = h2;
 
-            // 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 {
-                let currentRank = 1;
-                slidRows.forEach((sc, i) => {
-                    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>`;
-                });
+            .action-btn {
+                justify-content: center;
             }
-            h3 += `</tbody></table>`;
-            document.getElementById('lang-slid-table').innerHTML = h3;
         }
+    </style>
+</head>
+<body>
+    <div class="header">
+        <div class="logo">
+            <img src="https://africa.dlnlp.ai/simba/images/simba_main_logo.png" alt="SimbaBench Logo">
+            <div class="logo-text">
+                <h1>Voice of a <span class="highlight">Continent</span></h1>
+            </div>
+        </div>
+        
+        <p class="subtitle">
+            The largest open-source benchmark for African speech technology, featuring state-of-the-art models for 61 African languages across ASR, TTS, and SLID tasks.
+        </p>
+
+        <div class="action-buttons">
+            <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://africa.dlnlp.ai/simba/" target="_blank" class="action-btn btn-indigo">
+                <i class="fa-solid fa-globe"></i> Official Website
+            </a>
+            <a href="https://huggingface.co/collections/UBC-NLP/simba-speech-series" target="_blank" class="action-btn btn-orange">
+                <i class="fa-solid fa-robot"></i> Simba Models
+            </a>
+            <a href="https://github.com/UBC-NLP/simba" target="_blank" class="action-btn btn-dark">
+                <i class="fa-brands fa-github"></i> GitHub
+            </a>
+        </div>
+    </div>
 
-        // --- UI ---
-        window.setTab = (id, btn) => {
-            document.querySelectorAll('.view').forEach(e => e.classList.remove('active'));
-            document.querySelectorAll('.tab-btn').forEach(e => e.classList.remove('active'));
-            document.getElementById(id).classList.add('active'); 
-            if(btn) btn.classList.add('active'); else document.getElementById(`tab-btn-${id}`).classList.add('active');
-            if(id === 'lang') renderLanguageView();
-        };
-
-        window.setASRMode = (m) => {
-            asrMode = m;
-            ['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();
-        }
+    <div class="container">
+        <!-- Your leaderboard content goes here -->
+        <h2 style="text-align: center; margin-bottom: 30px;">Interactive Leaderboard</h2>
+        
+        <!-- Add your leaderboard table/content here -->
+        
+    </div>
 
-        window.copyCitation = () => {
-            const text = document.getElementById('bibtex').innerText;
-            navigator.clipboard.writeText(text).then(() => {
-                const btn = document.querySelector('.copy-btn');
-                btn.innerHTML = '<i class="fa-solid fa-check"></i> Copied!';
-                setTimeout(() => btn.innerHTML = '<i class="fa-regular fa-copy"></i> Copy', 2000);
-            });
-        }
+    <script>
+        // Add any interactive functionality here
     </script>
 </body>
 </html>