Spaces:

UBC-NLP
/

SimbaBench

Running

App Files Files Community

elmadany commited on Dec 2, 2025

Commit

4a7e467

verified ·

1 Parent(s): e31c354

Update public/index.html

Browse files

Files changed (1) hide show

public/index.html +43 -16

public/index.html CHANGED Viewed

@@ -69,14 +69,31 @@
         .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 Background (Subtle Gradient only) */
         .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;
         }
         /* --- WIDTH CONTROLLER --- */
         .content-container { width: 80%; max-width: 1600px; margin: 0 auto; }
@@ -93,6 +110,7 @@
         .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; }
@@ -119,6 +137,7 @@
         .arrow-down { color: #d97706; font-size: 10px; }
         .arrow-up { color: #16a34a; font-size: 10px; }
     </style>
 </head>
 <body>
@@ -129,7 +148,6 @@
             <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>
@@ -142,10 +160,23 @@
             <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>
     <div class="content-container layout-width">
@@ -267,6 +298,8 @@
             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)));
             populate('lang-select', Array.from(allLangs).sort());
             renderASR(); renderTTS(); renderSLID();
@@ -303,23 +336,19 @@
                     if(n>0) modelStats.push({ name: modName, wer: sW/n, cer: sC/n });
                 });
-                modelStats.sort((a,b) => (a.wer - b.wer) || (a.cer - b.cer)); // Sorting by WER then CER
                 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>`;
-                // Tie-Aware Ranking Logic
                 let currentRank = 1;
                 modelStats.forEach((m, i) => {
                     if (i > 0) {
                         const prev = modelStats[i-1];
-                        if (Math.abs(m.wer - prev.wer) > 0.001) {
-                            currentRank = i + 1;
-                        }
                     } else {
                         currentRank = 1;
                     }
                     m.rank = currentRank;
                     let icon = '';
                     if(m.rank === 1) icon = '🥇 '; else if(m.rank === 2) icon = '🥈 '; else if(m.rank === 3) icon = '🥉 ';
@@ -335,7 +364,6 @@
                 const d = DATA.asr.by_family[val];
                 if(!d) return;
                 d.data.sort((a,b) => a.Avg_WER - b.Avg_WER);
                 html = `<table><thead><tr><th>Model</th><th>Simba ASR Family Score <i class="fa-solid fa-arrow-down arrow-down"></i></th>`;
@@ -351,7 +379,6 @@
                         currentRank = 1;
                     }
                     r.rank = currentRank;
                     let icon = '';
                     if(r.rank === 1) icon = '🥇 '; else if(r.rank === 2) icon = '🥈 '; else if(r.rank === 3) icon = '🥉 ';
@@ -433,7 +460,7 @@
             asrRows.sort((a,b) => (a.wer - b.wer) || (a.cer - b.cer));
             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">No ASR data for this language.</td></tr>`;
             else {
                 let currentRank = 1;
                 asrRows.forEach((r, i) => {
@@ -473,7 +500,7 @@
                     </tr>`;
                 }
             });
-            if(!ttsFound) h2 += `<tr><td colspan="9">No TTS data.</td></tr>`;
             h2 += `</tbody></table>`;
             document.getElementById('lang-tts-table').innerHTML = h2;
@@ -503,7 +530,7 @@
                     h3 += `<tr><td style="font-weight:600;">${icon}${sc.n}</td><td>${fmt(sc.v)}</td></tr>`;
                 });
             } else {
-                h3 += `<tr><td colspan="2">No SLID data.</td></tr>`;
             }
             h3 += `</tbody></table>`;
             document.getElementById('lang-slid-table').innerHTML = h3;

         .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); }
+        /* 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; /* Space above wave */
+            mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
+        }
+        .bar { width: 6px; background: #ffffff; border-radius: 99px; animation: bounce 1.2s ease-in-out infinite; }
+        .bar:nth-child(odd) { animation-duration: 1.5s; } .bar:nth-child(2n) { animation-duration: 1.1s; }
+        @keyframes bounce { 0%, 100% { height: 20px; } 50% { height: 120px; } }
         /* --- WIDTH CONTROLLER --- */
         .content-container { width: 80%; max-width: 1600px; margin: 0 auto; }
         .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; }
         .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>
             <div class="nav-text"><span>Voice of a</span> Continent</div>
         </a>
         <div class="nav-links">
             <a href="https://africa.dlnlp.ai/simba/" target="_blank" class="btn-submit">Submit New Results</a>
         </div>
     </nav>
             <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>
             </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>
     </div>
     <div class="content-container layout-width">
             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));
             populate('lang-select', Array.from(allLangs).sort());
             renderASR(); renderTTS(); renderSLID();
                     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) {
                         const prev = modelStats[i-1];
+                        if (Math.abs(m.wer - prev.wer) > 0.001) currentRank = i + 1;
                     } else {
                         currentRank = 1;
                     }
                     m.rank = currentRank;
                     let icon = '';
                     if(m.rank === 1) icon = '🥇 '; else if(m.rank === 2) icon = '🥈 '; else if(m.rank === 3) icon = '🥉 ';
                 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>`;
                         currentRank = 1;
                     }
                     r.rank = currentRank;
                     let icon = '';
                     if(r.rank === 1) icon = '🥇 '; else if(r.rank === 2) icon = '🥈 '; else if(r.rank === 3) icon = '🥉 ';
             asrRows.sort((a,b) => (a.wer - b.wer) || (a.cer - b.cer));
             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) => {
                     </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;
                     h3 += `<tr><td style="font-weight:600;">${icon}${sc.n}</td><td>${fmt(sc.v)}</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;