Hugging Face's logo

Spaces:
UBC-NLP
/
SimbaBench
Running

App Files Community
elmadany commited on
Commit
94c6dcf
·
verified ·
1 Parent(s): ce32512

Update public/index.html

Browse files
Files changed (1) hide show
  1. public/index.html +86 -81
public/index.html CHANGED
@@ -3,7 +3,7 @@
3
  <head>
4
  <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
- <title>Voice of a Continent | SimbaBench Leaderboard</title>
7
  <link rel="icon" type="image/jpeg" href="https://africa.dlnlp.ai/simba/images/favicon.png">
8
 
9
  <link rel="preconnect" href="https://fonts.googleapis.com">
@@ -48,20 +48,42 @@
48
  .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); }
49
 
50
  /* --- HERO --- */
51
- .hero { display: flex; align-items: center; max-width: 1400px; margin: 60px auto 100px; padding: 0 40px; position: relative; }
52
- .hero-content { flex: 1; z-index: 2; }
 
 
 
 
 
 
 
 
 
 
 
 
53
  .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; }
54
  .conf-badge i { color: #cc0000; font-size: 18px; }
55
  .hero h1 { font-family: 'Rubik', sans-serif; font-size: 64px; font-weight: 800; margin: 0; line-height: 1.1; }
56
  .hero h2 { font-family: 'Rubik', sans-serif; font-size: 32px; color: var(--text-yellow); margin: 15px 0 30px; font-weight: 700; }
57
  .hero p { color: #cbd5e1; font-size: 18px; line-height: 1.6; max-width: 650px; margin-bottom: 50px; }
58
- .hero-actions { display: flex; gap: 15px; flex-wrap: wrap; }
59
  .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; }
60
  .action-btn:hover { transform: translateY(-3px); color: white; }
61
  .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); }
62
- .hero-visual { flex: 1; display: flex; justify-content: flex-end; position: relative; height: 400px; align-items: center; }
63
- .hero-visual img { max-width: 100%; height: auto; z-index: 2; position: relative; }
64
- .audio-wave { position: absolute; bottom: 50px; left: 0; right: 0; height: 150px; display: flex; align-items: center; justify-content: center; gap: 6px; z-index: 0; opacity: 0.3; mask-image: linear-gradient(to right, transparent, black 20%, black 80%, transparent); }
 
 
 
 
 
 
 
 
 
 
65
  .bar { width: 6px; background: #ffffff; border-radius: 99px; animation: bounce 1.2s ease-in-out infinite; }
66
  .bar:nth-child(odd) { animation-duration: 1.5s; } .bar:nth-child(2n) { animation-duration: 1.1s; }
67
  @keyframes bounce { 0%, 100% { height: 20px; } 50% { height: 120px; } }
@@ -81,9 +103,7 @@
81
 
82
  .controls { background: #f8fafc; padding: 20px; border-radius: 12px; display: flex; gap: 20px; align-items: center; margin-bottom: 20px; flex-wrap: wrap; }
83
  select { padding: 10px; border-radius: 8px; border: 1px solid #cbd5e1; font-size: 14px; min-width: 250px; cursor:pointer; }
84
-
85
  .rank-info { font-size: 13px; color: #64748b; margin-top: 5px; font-style: italic; }
86
- .score-desc { font-size: 14px; color: #475569; background: #fff7ed; border-left: 4px solid #f97316; padding: 10px 15px; margin-bottom: 20px; border-radius: 4px; }
87
 
88
  /* Table */
89
  .table-wrap { overflow-x: auto; border: 1px solid #e2e8f0; border-radius: 12px; margin-bottom: 30px; }
@@ -105,23 +125,24 @@
105
 
106
  .footer { text-align: center; padding: 40px; color: #94a3b8; font-size: 14px; }
107
  @keyframes fadeIn { from{opacity:0; transform:translateY(10px)} to{opacity:1; transform:translateY(0)} }
108
-
109
- .arrow-down { color: #d97706; font-size: 10px; }
110
- .arrow-up { color: #16a34a; font-size: 10px; }
111
  </style>
112
  </head>
113
  <body>
114
 
115
  <nav class="navbar">
116
- <a href="https://africa.dlnlp.ai/simba" class="nav-logo">
117
- <img src="https://africa.dlnlp.ai/simba/images/simba_main_logo.png" alt="Logo">
118
  <div class="nav-text"><span>Voice of a</span> Continent</div>
119
  </a>
120
  <div class="nav-links">
121
- <a href="https://aclanthology.org/2025.emnlp-main.559" target="_blank" class="nav-link">Paper</a>
122
- <a href="https://africa.dlnlp.ai/simba/#dataset" target="_blank" class="nav-link">Dataset</a>
123
- <a href="https://africa.dlnlp.ai/simba/#models" target="_blank" class="nav-link">Models</a>
124
- <a href="https://africa.dlnlp.ai/simba/" target="_blank" class="btn-submit">Submit New Results</a>
 
 
 
 
125
  </div>
126
  </nav>
127
 
@@ -129,23 +150,21 @@
129
  <div class="wave-bg"></div>
130
  <div class="hero-content">
131
  <div class="conf-badge"><i class="fa-solid fa-location-dot"></i> EMNLP 2025 · Suzhou, China</div>
132
- <h1>SimbaBench Leaderboard</h1>
133
  <h2>Mapping Africa’s Speech Technology</h2>
134
  <p>SimbaBench bridges the digital divide with a unified suite for African AI: the largest open-source speech benchmark covering 61 languages.</p>
135
  <div class="hero-actions">
136
- <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>
137
- <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>
138
- <a href="https://africa.dlnlp.ai/simba/#dataset" target="_blank" class="action-btn bg-orange"><i class="fa-solid fa-database"></i> Dataset</a>
139
- <a href="https://africa.dlnlp.ai/simba/#models" target="_blank" class="action-btn bg-blue"><i class="fa-solid fa-bolt"></i> Simba Models</a>
 
140
  </div>
141
- </div>
142
- <div class="hero-visual">
143
  <div class="audio-wave">
144
  <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>
145
  </div>
146
- <img src="https://africa.dlnlp.ai/simba/images/simbabench_header.png" alt="Map">
147
  </div>
148
- </div>
149
 
150
  <div class="content-container">
151
  <div class="main-card" id="board">
@@ -178,8 +197,6 @@
178
  <h3 id="asr-title" style="color:#d97706; margin:0;">Results Overview</h3>
179
  <div id="asr-rank-info" class="rank-info">Ranking: WER (↓) then CER (↓)</div>
180
  </div>
181
- <div id="asr-desc"></div>
182
-
183
  <div id="asr-table" class="table-wrap"></div>
184
  </div>
185
 
@@ -285,12 +302,10 @@
285
  function renderASR() {
286
  const div = document.getElementById('asr-table');
287
  const title = document.getElementById('asr-title');
288
- const desc = document.getElementById('asr-desc');
289
  let html='';
290
 
291
  if (asrMode === 'overview') {
292
  title.innerText = "Results Overview (All Models)";
293
- 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>`;
294
  document.getElementById('grp-fam').style.display='none';
295
  document.getElementById('grp-mod').style.display='none';
296
 
@@ -305,21 +320,21 @@
305
  modelStats.sort((a,b) => (a.wer - b.wer) || (a.cer - b.cer)); // Sorting by WER then CER
306
 
307
  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>`;
308
-
309
- // Tie-Aware Ranking Logic
310
- let currentRank = 1;
311
  modelStats.forEach((m, i) => {
312
- if (i > 0) {
313
- const prev = modelStats[i-1];
314
- if (Math.abs(m.wer - prev.wer) > 0.001) {
315
- currentRank = i + 1;
316
- }
317
- } else {
318
- currentRank = 1;
319
- }
320
- m.rank = currentRank;
321
-
322
  let icon = '';
 
 
 
 
 
 
 
323
  if(m.rank === 1) icon = '🥇 '; else if(m.rank === 2) icon = '🥈 '; else if(m.rank === 3) icon = '🥉 ';
324
 
325
  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>`;
@@ -328,7 +343,6 @@
328
  } else if(asrMode==='family'){
329
  const val = document.getElementById('asr-select-fam').value;
330
  title.innerText = `Results for Family: ${val}`;
331
- 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>`;
332
  document.getElementById('grp-fam').style.display='inline-block';
333
  document.getElementById('grp-mod').style.display='none';
334
 
@@ -341,15 +355,11 @@
341
  d.languages.forEach(l => html += `<th>${getIso(l.name, l.iso)}</th>`);
342
  html += `</tr></thead><tbody>`;
343
 
344
- let currentRank = 1;
345
  d.data.forEach((r, idx) => {
346
- if(idx > 0) {
347
- const prev = d.data[idx-1];
348
- if (Math.abs(r.Avg_WER - prev.Avg_WER) > 0.001) currentRank = idx + 1;
349
- } else {
350
- currentRank = 1;
351
- }
352
- r.rank = currentRank;
353
 
354
  let icon = '';
355
  if(r.rank === 1) icon = '🥇 '; else if(r.rank === 2) icon = '🥈 '; else if(r.rank === 3) icon = '🥉 ';
@@ -364,12 +374,11 @@
364
  } else {
365
  const val = document.getElementById('asr-select-mod').value;
366
  title.innerText = `Results for Model: ${val}`;
367
- desc.innerHTML = "";
368
  document.getElementById('grp-fam').style.display='none';
369
  document.getElementById('grp-mod').style.display='inline-block';
370
 
371
  const rows = DATA.asr.by_model[val];
372
- 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>`;
373
  rows.forEach(r => {
374
  html += `<tr><td>${getIso(r.Language, r.ISO)}</td><td>${r.Family}</td><td>${fmt(r.WER)}</td><td>${fmt(r.CER)}</td></tr>`;
375
  });
@@ -396,7 +405,7 @@
396
  rows.forEach(r=>{ metrics.forEach(m=>sums[m.k]+=(r[m.k]||0)); c++; });
397
  document.getElementById('tts-summary').innerHTML = "<b>Averages: </b>" + metrics.map(m=> `${m.l.replace('(↓)','').replace('(↑)','')}: ${fmt(sums[m.k]/c)}`).join(" | ");
398
 
399
- let html = `<table><thead><tr><th>Language</th>`;
400
  metrics.forEach(m => html += `<th>${m.l}</th>`);
401
  html += `</tr></thead><tbody>`;
402
  rows.forEach(r => {
@@ -409,7 +418,7 @@
409
 
410
  // --- RENDER SLID ---
411
  function renderSLID() {
412
- let html = `<table><thead><tr><th>Language</th><th>MMS-LID-1024 (↑)</th><th>Simba-SLID (↑)</th></tr></thead><tbody>`;
413
  DATA.slid.forEach(r => {
414
  let m = r['MMS-LID-1024'], s = r['Simba-SLID'];
415
  let mS = fmt(m), sS = fmt(s);
@@ -423,26 +432,24 @@
423
  function renderLanguageView() {
424
  const lang = document.getElementById('lang-select').value;
425
 
426
- // 1. ASR
427
  let asrRows = [];
428
  Object.keys(DATA.asr.by_model).forEach(modName => {
429
  const row = DATA.asr.by_model[modName].find(r => r.Language === lang);
430
  if(row) asrRows.push({model: modName, wer: row.WER, cer: row.CER});
431
  });
 
 
432
  asrRows.sort((a,b) => (a.wer - b.wer) || (a.cer - b.cer));
433
 
434
- 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>`;
435
  if(asrRows.length === 0) h1 += `<tr><td colspan="3">No ASR data for this language.</td></tr>`;
436
  else {
437
- let currentRank = 1;
438
  asrRows.forEach((r, i) => {
439
- if (i > 0) {
440
- const prev = asrRows[i-1];
441
- if (Math.abs(r.wer - prev.wer) > 0.001) currentRank = i + 1;
442
- } else {
443
- currentRank = 1;
444
- }
445
- r.rank = currentRank;
446
 
447
  let icon = '';
448
  if(r.rank === 1) icon = '🥇 '; else if(r.rank === 2) icon = '🥈 '; else if(r.rank === 3) icon = '🥉 ';
@@ -452,10 +459,10 @@
452
  h1 += `</tbody></table>`;
453
  document.getElementById('lang-asr-table').innerHTML = h1;
454
 
455
- // 2. TTS
456
  let h2 = `<table><thead><tr><th>Model</th>
457
- <th>WER(↓)</th><th>MCD(↓)</th><th>LogF0RMSE(↓)</th><th>SpeechTokenDistance(↓)</th>
458
- <th>PESQ(↑)</th><th>UTMOS(↑)</th><th>SpeechBLEU(↑)</th><th>SpeechBERTScore(↑)</th>
459
  </tr></thead><tbody>`;
460
 
461
  let ttsFound = false;
@@ -476,25 +483,23 @@
476
  h2 += `</tbody></table>`;
477
  document.getElementById('lang-tts-table').innerHTML = h2;
478
 
479
- // 3. SLID
480
- 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>`;
 
481
  const slidRow = DATA.slid.find(r => r.Language === lang) ||
482
  DATA.slid.find(r => r.Language.startsWith(lang + " (")) ||
483
  DATA.slid.find(r => r.Language.includes(lang));
484
 
485
  if(slidRow) {
 
486
  const models = Object.keys(slidRow).filter(k => k !== 'Language' && k !== 'ISO');
487
- const scores = models.map(m => ({n: m, v: slidRow[m]})).sort((a,b) => b.v - a.v);
488
 
489
- let currentRank = 1;
490
  scores.forEach((sc, i) => {
491
- if(i > 0) {
492
- const prev = scores[i-1];
493
- if (Math.abs(sc.v - prev.v) > 0.001) currentRank = i + 1;
494
- } else {
495
- currentRank = 1;
496
- }
497
- sc.rank = currentRank;
498
 
499
  let icon = '';
500
  if(sc.rank === 1) icon = '🥇 '; else if(sc.rank === 2) icon = '🥈 '; else if(sc.rank === 3) icon = '🥉 ';
 
3
  <head>
4
  <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Voice of a Continent | SimbaBench</title>
7
  <link rel="icon" type="image/jpeg" href="https://africa.dlnlp.ai/simba/images/favicon.png">
8
 
9
  <link rel="preconnect" href="https://fonts.googleapis.com">
 
48
  .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); }
49
 
50
  /* --- HERO --- */
51
+ .hero {
52
+ /* Removed display: flex to stack content */
53
+ max-width: 1400px;
54
+ margin: 60px auto 100px;
55
+ padding: 0 40px;
56
+ position: relative;
57
+ text-align: center; /* Center text */
58
+ }
59
+ .hero-content {
60
+ z-index: 2;
61
+ display: flex;
62
+ flex-direction: column;
63
+ align-items: center; /* Center children horizontally */
64
+ }
65
  .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; }
66
  .conf-badge i { color: #cc0000; font-size: 18px; }
67
  .hero h1 { font-family: 'Rubik', sans-serif; font-size: 64px; font-weight: 800; margin: 0; line-height: 1.1; }
68
  .hero h2 { font-family: 'Rubik', sans-serif; font-size: 32px; color: var(--text-yellow); margin: 15px 0 30px; font-weight: 700; }
69
  .hero p { color: #cbd5e1; font-size: 18px; line-height: 1.6; max-width: 650px; margin-bottom: 50px; }
70
+ .hero-actions { display: flex; gap: 15px; flex-wrap: wrap; justify-content: center; /* Center buttons */ }
71
  .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; }
72
  .action-btn:hover { transform: translateY(-3px); color: white; }
73
  .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); }
74
+
75
+ /* Removed .hero-visual and .hero-visual img styles */
76
+
77
+ /* Updated .audio-wave for full width position */
78
+ .audio-wave {
79
+ height: 150px;
80
+ display: flex;
81
+ align-items: center;
82
+ justify-content: center;
83
+ gap: 6px;
84
+ margin-top: 60px; /* Add space above */
85
+ mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent); /* Adjusted mask for wider view */
86
+ }
87
  .bar { width: 6px; background: #ffffff; border-radius: 99px; animation: bounce 1.2s ease-in-out infinite; }
88
  .bar:nth-child(odd) { animation-duration: 1.5s; } .bar:nth-child(2n) { animation-duration: 1.1s; }
89
  @keyframes bounce { 0%, 100% { height: 20px; } 50% { height: 120px; } }
 
103
 
104
  .controls { background: #f8fafc; padding: 20px; border-radius: 12px; display: flex; gap: 20px; align-items: center; margin-bottom: 20px; flex-wrap: wrap; }
105
  select { padding: 10px; border-radius: 8px; border: 1px solid #cbd5e1; font-size: 14px; min-width: 250px; cursor:pointer; }
 
106
  .rank-info { font-size: 13px; color: #64748b; margin-top: 5px; font-style: italic; }
 
107
 
108
  /* Table */
109
  .table-wrap { overflow-x: auto; border: 1px solid #e2e8f0; border-radius: 12px; margin-bottom: 30px; }
 
125
 
126
  .footer { text-align: center; padding: 40px; color: #94a3b8; font-size: 14px; }
127
  @keyframes fadeIn { from{opacity:0; transform:translateY(10px)} to{opacity:1; transform:translateY(0)} }
 
 
 
128
  </style>
129
  </head>
130
  <body>
131
 
132
  <nav class="navbar">
133
+ <a href="#" class="nav-logo">
134
+ <img src="https://africa.dlnlp.ai/simba/images/favicon.png" alt="Logo">
135
  <div class="nav-text"><span>Voice of a</span> Continent</div>
136
  </a>
137
  <div class="nav-links">
138
+ <a href="https://arxiv.org/abs/2510.17998" class="nav-link">Paper</a>
139
+ <a href="https://github.com/UBC-NLP/simba" class="nav-link">Pipeline</a>
140
+ <a href="https://huggingface.co/datasets/UBC-NLP/simba" class="nav-link">Dataset</a>
141
+ <a href="#" class="nav-link">Models</a>
142
+ <a href="#board" class="nav-link" style="color:var(--text-yellow)">Leaderboard</a>
143
+ <a href="#citation" class="nav-link">Citation</a>
144
+ <a href="#" class="btn-submit">Submit New Results</a>
145
+ <a href="#" class="btn-login">Login</a>
146
  </div>
147
  </nav>
148
 
 
150
  <div class="wave-bg"></div>
151
  <div class="hero-content">
152
  <div class="conf-badge"><i class="fa-solid fa-location-dot"></i> EMNLP 2025 · Suzhou, China</div>
153
+ <h1>Voice of a Continent</h1>
154
  <h2>Mapping Africa’s Speech Technology</h2>
155
  <p>SimbaBench bridges the digital divide with a unified suite for African AI: the largest open-source speech benchmark covering 61 languages.</p>
156
  <div class="hero-actions">
157
+ <a href="#" class="action-btn bg-red"><i class="fa-regular fa-file-pdf"></i> Read Paper</a>
158
+ <a href="#" class="action-btn bg-purple"><i class="fa-solid fa-code-branch"></i> Pipeline</a>
159
+ <a href="#" class="action-btn bg-orange"><i class="fa-solid fa-database"></i> Dataset</a>
160
+ <a href="#" class="action-btn bg-blue"><i class="fa-solid fa-bolt"></i> Models</a>
161
+ <a href="#board" class="action-btn bg-green"><i class="fa-solid fa-trophy"></i> Leaderboard</a>
162
  </div>
 
 
163
  <div class="audio-wave">
164
  <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>
165
  </div>
 
166
  </div>
167
+ </div>
168
 
169
  <div class="content-container">
170
  <div class="main-card" id="board">
 
197
  <h3 id="asr-title" style="color:#d97706; margin:0;">Results Overview</h3>
198
  <div id="asr-rank-info" class="rank-info">Ranking: WER (↓) then CER (↓)</div>
199
  </div>
 
 
200
  <div id="asr-table" class="table-wrap"></div>
201
  </div>
202
 
 
302
  function renderASR() {
303
  const div = document.getElementById('asr-table');
304
  const title = document.getElementById('asr-title');
 
305
  let html='';
306
 
307
  if (asrMode === 'overview') {
308
  title.innerText = "Results Overview (All Models)";
 
309
  document.getElementById('grp-fam').style.display='none';
310
  document.getElementById('grp-mod').style.display='none';
311
 
 
320
  modelStats.sort((a,b) => (a.wer - b.wer) || (a.cer - b.cer)); // Sorting by WER then CER
321
 
322
  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>`;
 
 
 
323
  modelStats.forEach((m, i) => {
324
+ let rank = 1;
325
+ if (i > 0 && Math.abs(m.wer - modelStats[i-1].wer) > 0.001) rank = i + 1;
326
+ else if (i > 0) rank = 1; // Actually logic needs to track currentRank variable, but simplifying for medals
327
+
328
+ // Simple medal logic: if tied with prev, use prev medal.
329
+ // Accurate Ranking:
 
 
 
 
330
  let icon = '';
331
+ // Re-evaluate rank based on index isn't enough for ties.
332
+ // Let's just use top 3 logic based on sorted order for simplicity or strict rank variable.
333
+ // Strict Rank Variable:
334
+ if(i===0) m.rank=1;
335
+ else if(Math.abs(m.wer - modelStats[i-1].wer) < 0.001) m.rank = modelStats[i-1].rank;
336
+ else m.rank = i+1;
337
+
338
  if(m.rank === 1) icon = '🥇 '; else if(m.rank === 2) icon = '🥈 '; else if(m.rank === 3) icon = '🥉 ';
339
 
340
  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>`;
 
343
  } else if(asrMode==='family'){
344
  const val = document.getElementById('asr-select-fam').value;
345
  title.innerText = `Results for Family: ${val}`;
 
346
  document.getElementById('grp-fam').style.display='inline-block';
347
  document.getElementById('grp-mod').style.display='none';
348
 
 
355
  d.languages.forEach(l => html += `<th>${getIso(l.name, l.iso)}</th>`);
356
  html += `</tr></thead><tbody>`;
357
 
 
358
  d.data.forEach((r, idx) => {
359
+ // Rank Logic
360
+ if(idx===0) r.rank=1;
361
+ else if(Math.abs(r.Avg_WER - d.data[idx-1].Avg_WER) < 0.001) r.rank = d.data[idx-1].rank;
362
+ else r.rank = idx+1;
 
 
 
363
 
364
  let icon = '';
365
  if(r.rank === 1) icon = '🥇 '; else if(r.rank === 2) icon = '🥈 '; else if(r.rank === 3) icon = '🥉 ';
 
374
  } else {
375
  const val = document.getElementById('asr-select-mod').value;
376
  title.innerText = `Results for Model: ${val}`;
 
377
  document.getElementById('grp-fam').style.display='none';
378
  document.getElementById('grp-mod').style.display='inline-block';
379
 
380
  const rows = DATA.asr.by_model[val];
381
+ html = `<table><thead><tr><th>Language (iso)</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>`;
382
  rows.forEach(r => {
383
  html += `<tr><td>${getIso(r.Language, r.ISO)}</td><td>${r.Family}</td><td>${fmt(r.WER)}</td><td>${fmt(r.CER)}</td></tr>`;
384
  });
 
405
  rows.forEach(r=>{ metrics.forEach(m=>sums[m.k]+=(r[m.k]||0)); c++; });
406
  document.getElementById('tts-summary').innerHTML = "<b>Averages: </b>" + metrics.map(m=> `${m.l.replace('(↓)','').replace('(↑)','')}: ${fmt(sums[m.k]/c)}`).join(" | ");
407
 
408
+ let html = `<table><thead><tr><th>Language (iso)</th>`;
409
  metrics.forEach(m => html += `<th>${m.l}</th>`);
410
  html += `</tr></thead><tbody>`;
411
  rows.forEach(r => {
 
418
 
419
  // --- RENDER SLID ---
420
  function renderSLID() {
421
+ let html = `<table><thead><tr><th>Language (iso)</th><th>MMS-LID-1024 (↑)</th><th>Simba-SLID (↑)</th></tr></thead><tbody>`;
422
  DATA.slid.forEach(r => {
423
  let m = r['MMS-LID-1024'], s = r['Simba-SLID'];
424
  let mS = fmt(m), sS = fmt(s);
 
432
  function renderLanguageView() {
433
  const lang = document.getElementById('lang-select').value;
434
 
435
+ // 1. ASR (Tie-Aware, WER then CER)
436
  let asrRows = [];
437
  Object.keys(DATA.asr.by_model).forEach(modName => {
438
  const row = DATA.asr.by_model[modName].find(r => r.Language === lang);
439
  if(row) asrRows.push({model: modName, wer: row.WER, cer: row.CER});
440
  });
441
+
442
+ // Sort: Primary WER ASC, Secondary CER ASC
443
  asrRows.sort((a,b) => (a.wer - b.wer) || (a.cer - b.cer));
444
 
445
+ let h1 = `<table><thead><tr><th>Model</th><th>WER</th><th>CER</th></tr></thead><tbody>`;
446
  if(asrRows.length === 0) h1 += `<tr><td colspan="3">No ASR data for this language.</td></tr>`;
447
  else {
 
448
  asrRows.forEach((r, i) => {
449
+ // Calculate Rank
450
+ if(i===0) r.rank=1;
451
+ else if(Math.abs(r.wer - asrRows[i-1].wer) < 0.001) r.rank = asrRows[i-1].rank; // Tie
452
+ else r.rank = i+1;
 
 
 
453
 
454
  let icon = '';
455
  if(r.rank === 1) icon = '🥇 '; else if(r.rank === 2) icon = '🥈 '; else if(r.rank === 3) icon = '🥉 ';
 
459
  h1 += `</tbody></table>`;
460
  document.getElementById('lang-asr-table').innerHTML = h1;
461
 
462
+ // 2. TTS (All Metrics)
463
  let h2 = `<table><thead><tr><th>Model</th>
464
+ <th>WER(↓)</th><th>MCD(↓)</th><th>LogF0(↓)</th><th>SpTok(↓)</th>
465
+ <th>PESQ(↑)</th><th>UTMOS(↑)</th><th>SpBLEU(↑)</th><th>SpBERT(↑)</th>
466
  </tr></thead><tbody>`;
467
 
468
  let ttsFound = false;
 
483
  h2 += `</tbody></table>`;
484
  document.getElementById('lang-tts-table').innerHTML = h2;
485
 
486
+ // 3. SLID (Dynamic Models)
487
+ let h3 = `<table><thead><tr><th>Model</th><th>F1-Score</th></tr></thead><tbody>`;
488
+ // Fuzzy match logic
489
  const slidRow = DATA.slid.find(r => r.Language === lang) ||
490
  DATA.slid.find(r => r.Language.startsWith(lang + " (")) ||
491
  DATA.slid.find(r => r.Language.includes(lang));
492
 
493
  if(slidRow) {
494
+ // Extract models dynamically (exclude Language key)
495
  const models = Object.keys(slidRow).filter(k => k !== 'Language' && k !== 'ISO');
496
+ const scores = models.map(m => ({n: m, v: slidRow[m]})).sort((a,b) => b.v - a.v); // Descending
497
 
 
498
  scores.forEach((sc, i) => {
499
+ // Rank logic for SLID
500
+ if(i===0) sc.rank=1;
501
+ else if(Math.abs(sc.v - scores[i-1].v) < 0.001) sc.rank = scores[i-1].rank;
502
+ else sc.rank = i+1;
 
 
 
503
 
504
  let icon = '';
505
  if(sc.rank === 1) icon = '🥇 '; else if(sc.rank === 2) icon = '🥈 '; else if(sc.rank === 3) icon = '🥉 ';