Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8" /> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0" /> | |
| <title>GSMA Africa Telecom - ASR Evaluations</title> | |
| <style> | |
| * { margin: 0; padding: 0; box-sizing: border-box; } | |
| html, body { height: 100%; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; } | |
| body { display: flex; flex-direction: column; } | |
| header { | |
| background: #1a1a2e; | |
| color: #fff; | |
| display: flex; | |
| align-items: center; | |
| gap: 16px; | |
| padding: 10px 20px; | |
| } | |
| header h1 { font-size: 16px; font-weight: 600; margin-right: auto; } | |
| .tabs { display: flex; gap: 8px; } | |
| .tab-btn { | |
| background: transparent; | |
| color: #ccc; | |
| border: 1px solid #444; | |
| border-radius: 6px; | |
| padding: 8px 18px; | |
| font-size: 14px; | |
| cursor: pointer; | |
| transition: all 0.15s ease; | |
| } | |
| .tab-btn:hover { background: #2a2a4e; color: #fff; } | |
| .tab-btn.active { background: #4f46e5; border-color: #4f46e5; color: #fff; } | |
| .open-link { | |
| color: #9ca3af; | |
| font-size: 12px; | |
| text-decoration: none; | |
| border: 1px solid #444; | |
| border-radius: 6px; | |
| padding: 6px 10px; | |
| } | |
| .open-link:hover { color: #fff; } | |
| .frame-container { flex: 1; position: relative; } | |
| iframe { | |
| position: absolute; | |
| inset: 0; | |
| width: 100%; | |
| height: 100%; | |
| border: none; | |
| display: none; | |
| } | |
| iframe.visible { display: block; } | |
| </style> | |
| </head> | |
| <body> | |
| <header> | |
| <h1>GSMA Africa Telecom — ASR Evaluations</h1> | |
| <nav class="tabs"> | |
| <button class="tab-btn active" data-target="leaderboard" onclick="showTab('leaderboard', this)">Leaderboard</button> | |
| <button class="tab-btn" data-target="amharic" onclick="showTab('amharic', this)">Amharic ASR</button> | |
| <button class="tab-btn" data-target="zulu" onclick="showTab('zulu', this)">Zulu Eval</button> | |
| <button class="tab-btn" data-target="shona" onclick="showTab('shona', this)">Shona Eval</button> | |
| </nav> | |
| </header> | |
| <div class="frame-container"> | |
| <iframe id="leaderboard" class="visible" src="leaderboard.html" title="ASR Leaderboard"></iframe> | |
| <iframe id="amharic" data-src="https://asrdemo.saarai.org/" title="Amharic ASR Demo" allow="microphone; autoplay"></iframe> | |
| <iframe id="zulu" data-src="https://zulueval.saarai.org/anv" title="Zulu Evaluation" allow="microphone; autoplay"></iframe> | |
| <iframe id="shona" data-src="https://snaeval.saarai.org/waxal" title="Shona Evaluation" allow="microphone; autoplay"></iframe> | |
| </div> | |
| <script> | |
| function showTab(id, btn) { | |
| document.querySelectorAll('.tab-btn').forEach(b => b.classList.remove('active')); | |
| btn.classList.add('active'); | |
| document.querySelectorAll('iframe').forEach(f => f.classList.remove('visible')); | |
| const frame = document.getElementById(id); | |
| if (!frame.src && frame.dataset.src) frame.src = frame.dataset.src; // lazy-load | |
| frame.classList.add('visible'); | |
| } | |
| </script> | |
| </body> | |
| </html> |