Update public/index.html

public/index.html

@@ -45,26 +45,39 @@
         .nav-link { color: #e2e8f0; font-size: 15px; font-weight: 500; }
         .nav-link:hover { color: var(--text-yellow); }
         .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); }
-        .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); }
-
+        
         /* --- HERO --- */
-        .hero { display: flex; align-items: center; max-width: 1400px; margin: 60px auto 100px; padding: 0 40px; position: relative; }
-        .hero-content { flex: 1; z-index: 2; }
+        /* Updated to center content since visual was removed */
+        .hero { 
+            display: flex; 
+            justify-content: center; 
+            text-align: center;
+            max-width: 1000px; 
+            margin: 60px auto 100px; 
+            padding: 0 40px; 
+            position: relative; 
+        }
+        .hero-content { z-index: 2; width: 100%; 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: 650px; margin-bottom: 50px; }
-        .hero-actions { display: flex; gap: 15px; flex-wrap: wrap; }
+        .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); } .bg-orange { background: var(--grad-orange); } .bg-blue { background: var(--grad-blue); } .bg-green { background: var(--grad-green); }
-        .hero-visual { flex: 1; display: flex; justify-content: flex-end; position: relative; height: 400px; align-items: center; }
-        .hero-visual img { max-width: 100%; height: auto; z-index: 2; position: relative; }
-        .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); }
-        .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; } }
+
+        /* 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;
+        }
 
         /* --- WIDTH CONTROLLER --- */
         .content-container { width: 80%; max-width: 1600px; margin: 0 auto; }
@@ -139,12 +152,6 @@
                 <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>
             </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>
-            </div>
-            
-        </div>
     </div>
 
     <div class="content-container">
@@ -305,15 +312,22 @@
                 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) => {
-                    let rank = 1;
-                    if (i > 0 && Math.abs(m.wer - modelStats[i-1].wer) > 0.001) rank = i + 1;
-                    else if (i > 0) rank = modelStats[i-1].rank;
-                    else m.rank = 1;
-                    m.rank = rank;
+                    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(rank === 1) icon = '🥇 '; else if(rank === 2) icon = '🥈 '; else if(rank === 3) icon = '🥉 ';
+                    if(m.rank === 1) icon = '🥇 '; else if(m.rank === 2) icon = '🥈 '; else if(m.rank === 3) icon = '🥉 ';
                     
                     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>`;
                 });
@@ -334,10 +348,15 @@
                 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) r.rank=1;
-                    else if(Math.abs(r.Avg_WER - d.data[idx-1].Avg_WER) < 0.001) r.rank = d.data[idx-1].rank;
-                    else r.rank = idx+1;
+                    if(idx > 0) {
+                        const prev = d.data[idx-1];
+                        if (Math.abs(r.Avg_WER - prev.Avg_WER) > 0.001) currentRank = idx + 1;
+                    } else {
+                        currentRank = 1;
+                    }
+                    r.rank = currentRank;
 
                     let icon = '';
                     if(r.rank === 1) icon = '🥇 '; else if(r.rank === 2) icon = '🥈 '; else if(r.rank === 3) icon = '🥉 ';
@@ -422,10 +441,15 @@
             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) => {
-                    if(i===0) r.rank=1;
-                    else if(Math.abs(r.wer - asrRows[i-1].wer) < 0.001) r.rank = asrRows[i-1].rank;
-                    else r.rank = i+1;
+                    if (i > 0) {
+                        const prev = asrRows[i-1];
+                        if (Math.abs(r.wer - prev.wer) > 0.001) currentRank = i + 1;
+                    } else {
+                        currentRank = 1;
+                    }
+                    r.rank = currentRank;
 
                     let icon = '';
                     if(r.rank === 1) icon = '🥇 '; else if(r.rank === 2) icon = '🥈 '; else if(r.rank === 3) icon = '🥉 ';
@@ -460,7 +484,7 @@
             document.getElementById('lang-tts-table').innerHTML = h2;
 
             // 3. SLID
-            let h3 = `<table><thead><tr><th>Model</th><th>F1-Score</th></tr></thead><tbody>`;
+            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>`;
             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));
@@ -469,10 +493,15 @@
                 const models = Object.keys(slidRow).filter(k => k !== 'Language' && k !== 'ISO');
                 const scores = models.map(m => ({n: m, v: slidRow[m]})).sort((a,b) => b.v - a.v);
                 
+                let currentRank = 1;
                 scores.forEach((sc, i) => {
-                    if(i===0) sc.rank=1;
-                    else if(Math.abs(sc.v - scores[i-1].v) < 0.001) sc.rank = scores[i-1].rank;
-                    else sc.rank = i+1;
+                    if(i > 0) {
+                        const prev = scores[i-1];
+                        if (Math.abs(sc.v - prev.v) > 0.001) currentRank = i + 1;
+                    } else {
+                        currentRank = 1;
+                    }
+                    sc.rank = currentRank;
 
                     let icon = '';
                     if(sc.rank === 1) icon = '🥇 '; else if(sc.rank === 2) icon = '🥈 '; else if(sc.rank === 3) icon = '🥉 ';