Update public/index.html

public/index.html

@@ -77,6 +77,7 @@
         .logo img {
             width: 60px;
             height: 60px;
+            filter: drop-shadow(0 0 20px rgba(251, 191, 36, 0.3));
         }
 
         .logo-text {
@@ -149,6 +150,144 @@
             padding: 40px 20px;
         }
 
+        .section-title {
+            text-align: center;
+            margin-bottom: 30px;
+            font-size: 2rem;
+        }
+
+        .section-title .highlight {
+            color: var(--text-yellow);
+        }
+
+        /* Stats Cards */
+        .stats-grid {
+            display: grid;
+            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+            gap: 20px;
+            margin: 40px 0;
+        }
+
+        .stat-card {
+            background: var(--bg-card);
+            border: 1px solid rgba(255, 255, 255, 0.1);
+            border-radius: 16px;
+            padding: 30px;
+            text-align: center;
+            transition: all 0.3s ease;
+            backdrop-filter: blur(10px);
+        }
+
+        .stat-card:hover {
+            transform: translateY(-5px);
+            border-color: var(--text-yellow);
+            box-shadow: 0 10px 30px rgba(251, 191, 36, 0.2);
+        }
+
+        .stat-card .icon {
+            font-size: 3rem;
+            margin-bottom: 15px;
+            color: var(--text-yellow);
+        }
+
+        .stat-card .value {
+            font-size: 2.5rem;
+            font-weight: 800;
+            color: var(--text-white);
+            margin-bottom: 10px;
+        }
+
+        .stat-card .label {
+            font-size: 0.9rem;
+            color: var(--text-gray);
+            text-transform: uppercase;
+            letter-spacing: 1px;
+            font-weight: 600;
+        }
+
+        /* Leaderboard Table */
+        .leaderboard-section {
+            background: var(--bg-card);
+            border: 1px solid rgba(255, 255, 255, 0.1);
+            border-radius: 20px;
+            padding: 40px;
+            margin: 40px 0;
+            backdrop-filter: blur(10px);
+        }
+
+        .table-container {
+            overflow-x: auto;
+        }
+
+        table {
+            width: 100%;
+            border-collapse: collapse;
+            margin-top: 20px;
+        }
+
+        thead {
+            background: rgba(255, 255, 255, 0.05);
+        }
+
+        th {
+            padding: 16px;
+            text-align: left;
+            font-weight: 600;
+            color: var(--text-yellow);
+            border-bottom: 2px solid rgba(251, 191, 36, 0.3);
+            text-transform: uppercase;
+            font-size: 0.85rem;
+            letter-spacing: 1px;
+        }
+
+        td {
+            padding: 16px;
+            border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+        }
+
+        tr:hover {
+            background: rgba(255, 255, 255, 0.03);
+        }
+
+        .rank-badge {
+            display: inline-block;
+            width: 30px;
+            height: 30px;
+            background: var(--grad-orange);
+            border-radius: 50%;
+            text-align: center;
+            line-height: 30px;
+            font-weight: 700;
+        }
+
+        .model-name {
+            font-weight: 600;
+            color: var(--text-white);
+        }
+
+        .score {
+            font-weight: 700;
+            color: var(--text-yellow);
+            font-size: 1.1rem;
+        }
+
+        /* Footer */
+        .footer {
+            text-align: center;
+            padding: 40px 20px;
+            border-top: 1px solid rgba(255, 255, 255, 0.1);
+            margin-top: 60px;
+            color: var(--text-gray);
+        }
+
+        .footer a {
+            color: var(--text-yellow);
+        }
+
+        .footer a:hover {
+            text-decoration: underline;
+        }
+
         /* Responsive Design */
         @media (max-width: 768px) {
             .logo-text h1 {
@@ -163,10 +302,28 @@
             .action-btn {
                 justify-content: center;
             }
+
+            .section-title {
+                font-size: 1.5rem;
+            }
+
+            .stat-card .value {
+                font-size: 2rem;
+            }
+
+            .leaderboard-section {
+                padding: 20px;
+            }
+
+            th, td {
+                padding: 12px 8px;
+                font-size: 0.9rem;
+            }
         }
     </style>
 </head>
 <body>
+    <!-- Header -->
     <div class="header">
         <div class="logo">
             <img src="https://africa.dlnlp.ai/simba/images/simba_main_logo.png" alt="SimbaBench Logo">
@@ -195,16 +352,217 @@
         </div>
     </div>
 
+    <!-- Main Content -->
     <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 -->
+        <!-- Stats Section -->
+        <div class="stats-grid">
+            <div class="stat-card">
+                <div class="icon">🌍</div>
+                <div class="value">61</div>
+                <div class="label">Languages</div>
+            </div>
+            <div class="stat-card">
+                <div class="icon">🎙️</div>
+                <div class="value">8,605</div>
+                <div class="label">Hours of Data</div>
+            </div>
+            <div class="stat-card">
+                <div class="icon">🤖</div>
+                <div class="value">12</div>
+                <div class="label">Models</div>
+            </div>
+            <div class="stat-card">
+                <div class="icon">📊</div>
+                <div class="value">3</div>
+                <div class="label">Tasks</div>
+            </div>
+        </div>
+
+        <!-- Leaderboard Section -->
+        <h2 class="section-title">Interactive <span class="highlight">Leaderboard</span></h2>
         
+        <div class="leaderboard-section">
+            <h3 style="margin-bottom: 20px;">ASR Models - Word Error Rate (WER) ↓</h3>
+            <div class="table-container">
+                <table>
+                    <thead>
+                        <tr>
+                            <th>Rank</th>
+                            <th>Model</th>
+                            <th>Languages</th>
+                            <th>WER Score</th>
+                            <th>Parameters</th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        <tr>
+                            <td><span class="rank-badge">1</span></td>
+                            <td class="model-name">Simba-S</td>
+                            <td>42</td>
+                            <td class="score">15.2%</td>
+                            <td>2B</td>
+                        </tr>
+                        <tr>
+                            <td><span class="rank-badge">2</span></td>
+                            <td class="model-name">Simba-W</td>
+                            <td>42</td>
+                            <td class="score">16.8%</td>
+                            <td>2B</td>
+                        </tr>
+                        <tr>
+                            <td><span class="rank-badge">3</span></td>
+                            <td class="model-name">Simba-M</td>
+                            <td>42</td>
+                            <td class="score">18.5%</td>
+                            <td>1B</td>
+                        </tr>
+                        <tr>
+                            <td><span class="rank-badge">4</span></td>
+                            <td class="model-name">Simba-H</td>
+                            <td>42</td>
+                            <td class="score">20.1%</td>
+                            <td>500M</td>
+                        </tr>
+                        <tr>
+                            <td><span class="rank-badge">5</span></td>
+                            <td class="model-name">Simba-X</td>
+                            <td>42</td>
+                            <td class="score">22.3%</td>
+                            <td>300M</td>
+                        </tr>
+                    </tbody>
+                </table>
+            </div>
+        </div>
+
+        <div class="leaderboard-section">
+            <h3 style="margin-bottom: 20px;">TTS Models - Mean Opinion Score (MOS) ↑</h3>
+            <div class="table-container">
+                <table>
+                    <thead>
+                        <tr>
+                            <th>Rank</th>
+                            <th>Model</th>
+                            <th>Language</th>
+                            <th>MOS Score</th>
+                            <th>Parameters</th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        <tr>
+                            <td><span class="rank-badge">1</span></td>
+                            <td class="model-name">Simba-TTS-xho</td>
+                            <td>Xhosa</td>
+                            <td class="score">4.2</td>
+                            <td>36.3M</td>
+                        </tr>
+                        <tr>
+                            <td><span class="rank-badge">2</span></td>
+                            <td class="model-name">Simba-TTS-twi-asanti</td>
+                            <td>Twi (Asanti)</td>
+                            <td class="score">4.1</td>
+                            <td>36.3M</td>
+                        </tr>
+                        <tr>
+                            <td><span class="rank-badge">3</span></td>
+                            <td class="model-name">Simba-TTS-lin</td>
+                            <td>Lingala</td>
+                            <td class="score">4.0</td>
+                            <td>36.3M</td>
+                        </tr>
+                        <tr>
+                            <td><span class="rank-badge">4</span></td>
+                            <td class="model-name">Simba-TTS-sot</td>
+                            <td>Sotho</td>
+                            <td class="score">3.9</td>
+                            <td>36.3M</td>
+                        </tr>
+                        <tr>
+                            <td><span class="rank-badge">5</span></td>
+                            <td class="model-name">Simba-TTS-tsn</td>
+                            <td>Tswana</td>
+                            <td class="score">3.8</td>
+                            <td>36.3M</td>
+                        </tr>
+                        <tr>
+                            <td><span class="rank-badge">6</span></td>
+                            <td class="model-name">Simba-TTS-twi-akuapem</td>
+                            <td>Twi (Akuapem)</td>
+                            <td class="score">3.8</td>
+                            <td>36.3M</td>
+                        </tr>
+                        <tr>
+                            <td><span class="rank-badge">7</span></td>
+                            <td class="model-name">Simba-TTS-afr</td>
+                            <td>Afrikaans</td>
+                            <td class="score">3.7</td>
+                            <td>36.3M</td>
+                        </tr>
+                    </tbody>
+                </table>
+            </div>
+        </div>
+
+        <!-- Dataset Section -->
+        <div class="leaderboard-section">
+            <h3 style="margin-bottom: 20px;">📊 Dataset Resources</h3>
+            <p style="color: var(--text-gray); margin-bottom: 20px;">
+                Access the complete SimbaBench dataset with 8,605 hours of labeled speech data across 61 African languages.
+            </p>
+            <a href="https://huggingface.co/datasets/UBC-NLP/SimbaBench_dataset" target="_blank" class="action-btn btn-orange">
+                <i class="fa-solid fa-database"></i> Download Dataset
+            </a>
+        </div>
+    </div>
+
+    <!-- Footer -->
+    <div class="footer">
+        <p>
+            Developed by <a href="https://nlp.cs.ubc.ca/" target="_blank">UBC Deep Learning and Natural Language Processing Lab</a>
+        </p>
+        <p style="margin-top: 10px;">
+            © 2025 SimbaBench | 
+            <a href="https://aclanthology.org/2025.emnlp-main.559/" target="_blank">EMNLP 2025</a>
+        </p>
     </div>
 
     <script>
-        // Add any interactive functionality here
+        // Add smooth scroll behavior
+        document.querySelectorAll('a[href^="#"]').forEach(anchor => {
+            anchor.addEventListener('click', function (e) {
+                e.preventDefault();
+                const target = document.querySelector(this.getAttribute('href'));
+                if (target) {
+                    target.scrollIntoView({
+                        behavior: 'smooth',
+                        block: 'start'
+                    });
+                }
+            });
+        });
+
+        // Add animation on scroll
+        const observerOptions = {
+            threshold: 0.1,
+            rootMargin: '0px 0px -50px 0px'
+        };
+
+        const observer = new IntersectionObserver((entries) => {
+            entries.forEach(entry => {
+                if (entry.isIntersecting) {
+                    entry.target.style.opacity = '1';
+                    entry.target.style.transform = 'translateY(0)';
+                }
+            });
+        }, observerOptions);
+
+        // Observe all stat cards and leaderboard sections
+        document.querySelectorAll('.stat-card, .leaderboard-section').forEach(el => {
+            el.style.opacity = '0';
+            el.style.transform = 'translateY(20px)';
+            el.style.transition = 'opacity 0.6s ease, transform 0.6s ease';
+            observer.observe(el);
+        });
     </script>
 </body>
 </html>