Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="utf-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1"> | |
| <title>FonBench — Fon ASR leaderboard</title> | |
| <style> | |
| /* Indigo profond et ocre — les couleurs des tentures appliquées d'Abomey. */ | |
| :root{ | |
| --indigo:#3b3b7a; --ocre:#c8873b; --ink:#1b1b2e; --muted:#6b6b7b; | |
| --line:rgba(120,120,160,.22); --fond:#fff; --carte:#fafaff; | |
| } | |
| @media (prefers-color-scheme:dark){ | |
| :root{--indigo:#a9a9f0;--ink:#ececf6;--muted:#9a9ab0;--fond:#0e0e18;--carte:#16161f;} | |
| } | |
| *{box-sizing:border-box} | |
| body{margin:0;background:var(--fond);color:var(--ink); | |
| font:15px/1.55 ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif} | |
| .wrap{max-width:1500px;margin:0 auto;padding:0 1.1rem 3rem} | |
| header{padding:1.6rem 0 .6rem;border-bottom:1px solid var(--line)} | |
| h1{display:flex;align-items:center;gap:.55rem;margin:0;font-size:2.4rem; | |
| font-weight:800;letter-spacing:-.03em;line-height:1.05;color:var(--indigo)} | |
| h1 span{color:var(--ocre)} | |
| h1 svg{flex:0 0 auto;border-radius:2px;box-shadow:0 0 0 1px rgba(0,0,0,.12)} | |
| .sub{color:var(--muted);margin:.35rem 0 0;font-size:1.02rem} | |
| nav{display:flex;gap:.2rem;flex-wrap:wrap;margin:1rem 0 .2rem; | |
| border-bottom:1px solid var(--line)} | |
| nav button{background:none;border:none;border-bottom:2px solid transparent; | |
| padding:.6rem .9rem;font:inherit;font-weight:600;color:var(--muted);cursor:pointer} | |
| nav button[aria-selected=true]{color:var(--indigo);border-bottom-color:var(--indigo)} | |
| nav button:hover{color:var(--ink)} | |
| .filters{display:flex;flex-wrap:wrap;gap:.9rem;margin:1rem 0 .4rem} | |
| .field{display:flex;flex-direction:column;gap:.28rem;min-width:170px;flex:1} | |
| .field>label{font-size:.7rem;font-weight:700;letter-spacing:.07em; | |
| text-transform:uppercase;color:var(--muted)} | |
| select,input,textarea{font:inherit;padding:.45rem .6rem;border-radius:9px; | |
| border:1px solid var(--line);background:var(--carte);color:var(--ink);width:100%} | |
| .views{display:flex;flex-wrap:wrap;gap:.35rem;margin:.2rem 0 .5rem} | |
| .views button{border:1px solid var(--line);background:var(--carte);color:var(--ink); | |
| border-radius:999px;padding:.32rem .9rem;font:inherit;font-weight:600; | |
| font-size:.86rem;cursor:pointer;transition:background .12s} | |
| .views button:hover{background:rgba(120,120,180,.12)} | |
| .views button[aria-pressed=true]{background:var(--indigo);color:#fff; | |
| border-color:var(--indigo)} | |
| .row2{display:flex;align-items:center;gap:.8rem;flex-wrap:wrap;margin-bottom:.5rem} | |
| .row2 label{font-size:.88rem;color:var(--muted);display:flex;align-items:center;gap:.4rem} | |
| .row2 input[type=checkbox]{width:auto} | |
| button.act{border:1px solid var(--line);background:var(--carte);color:var(--ink); | |
| border-radius:9px;padding:.4rem .9rem;font:inherit;font-weight:600;cursor:pointer} | |
| .meta{display:flex;flex-wrap:wrap;gap:.45rem 1.4rem;align-items:center; | |
| padding:.7rem .9rem;margin:.2rem 0 .7rem;border:1px solid var(--line); | |
| border-radius:12px;font-size:.88rem;color:var(--muted)} | |
| .meta>span{display:inline-flex;align-items:center;gap:.35rem} | |
| .meta b{color:var(--ink);font-weight:650} | |
| .badge{display:inline-block;padding:.12rem .55rem;border-radius:999px; | |
| font-size:.72rem;font-weight:700;background:var(--ocre);color:#fff} | |
| .legend{font-size:.82rem;color:var(--muted);margin:.15rem 0 .9rem} | |
| .tablebox{overflow-x:auto;border:1px solid var(--line);border-radius:12px} | |
| table{border-collapse:collapse;width:100%;font-size:.86rem} | |
| th,td{padding:.45rem .6rem;text-align:left;white-space:nowrap; | |
| border-bottom:1px solid var(--line)} | |
| th{position:sticky;top:0;background:var(--carte);font-weight:700; | |
| font-size:.75rem;letter-spacing:.04em;text-transform:uppercase; | |
| color:var(--muted);cursor:pointer;user-select:none} | |
| th:hover{color:var(--ink)} | |
| tbody tr:hover{background:rgba(120,120,180,.07)} | |
| td.num{text-align:right;font-variant-numeric:tabular-nums} | |
| a{color:var(--indigo)} | |
| .note{font-size:.9rem;line-height:1.6;max-width:62rem} | |
| .note h3{margin-top:1.5rem;font-size:1.05rem} | |
| .note table{font-size:.86rem;margin:.6rem 0;width:auto} | |
| .note th{position:static;cursor:default;text-transform:none;font-size:.8rem} | |
| .hidden{display:none} | |
| .msg{padding:.7rem .9rem;border-radius:10px;border:1px solid var(--line); | |
| background:var(--carte);margin:.7rem 0} | |
| form{max-width:44rem} | |
| form .field{margin-bottom:.8rem} | |
| .hint{font-size:.8rem;color:var(--muted);margin-top:.2rem} | |
| </style> | |
| </head> | |
| <body> | |
| <div class="wrap"> | |
| <header> | |
| <h1>Fon<span>Bench</span> | |
| <!-- Drapeau béninois en SVG : l'emoji est une paire d'indicateurs | |
| régionaux que Windows ne compose pas, il s'affiche « BJ ». --> | |
| <svg viewBox="0 0 30 20" width="39" height="26" role="img" aria-label="Benin"> | |
| <rect width="30" height="20" fill="#FCD116"/> | |
| <rect y="10" width="30" height="10" fill="#E8112D"/> | |
| <rect width="12" height="20" fill="#008751"/> | |
| </svg> | |
| </h1> | |
| <p class="sub">The public speech-recognition leaderboard for Fon, a tonal | |
| language of Benin</p> | |
| </header> | |
| <nav id="tabs"></nav> | |
| <section id="tab-leaderboard"> | |
| <div class="filters"> | |
| <div class="field"><label for="bench">Test set</label> | |
| <select id="bench"></select></div> | |
| <div class="field"><label for="sort">Sort by</label> | |
| <select id="sort"> | |
| <option value="quality">Quality (ranking metric)</option> | |
| <option value="speed">Speed (RTFx)</option> | |
| <option value="size">Model size</option> | |
| </select></div> | |
| <div class="field"><label for="arch">Architecture</label> | |
| <select id="arch"><option value="">all</option></select></div> | |
| <div class="field"><label for="dec">Decoder</label> | |
| <select id="dec"><option value="">all</option></select></div> | |
| </div> | |
| <div class="views" id="views"></div> | |
| <div class="row2"> | |
| <label><input type="checkbox" id="contam"> Hide contaminated models</label> | |
| <button class="act" id="refresh">Refresh</button> | |
| </div> | |
| <div class="meta" id="meta"></div> | |
| <p class="legend" id="legend"></p> | |
| <div class="tablebox"><table id="board"></table></div> | |
| <div class="note" id="metrics-note"></div> | |
| </section> | |
| <section id="tab-queue" class="hidden"> | |
| <p class="note">Evaluation runs on the GPU of | |
| <a href="https://huggingface.co/spaces/Kimyayd/FonBench" target="_blank" | |
| rel="noopener">Kimyayd/FonBench</a>, in slices. The compute itself is | |
| fast — a few minutes for a CTC model — but the daily GPU quota is limited, | |
| so a run may spread over several hours, pausing between slices. An | |
| interrupted run resumes exactly where it stopped.</p> | |
| <button class="act" id="refresh-queue">Refresh</button> | |
| <div class="tablebox" style="margin-top:.7rem"><table id="queue"></table></div> | |
| </section> | |
| <section id="tab-submit" class="hidden"> | |
| <p class="note">The repository must be <b>public</b> and must not rely on | |
| custom code: <code>trust_remote_code</code> is disabled. Both | |
| <code>safetensors</code> and <code>.bin</code> weights are accepted. No | |
| account required.</p> | |
| <form id="submit-form"> | |
| <div class="field"><label for="f-model">Hugging Face model ID</label> | |
| <input id="f-model" placeholder="organisation/model-name" required> | |
| <span class="hint">Exactly as it appears in the model URL.</span></div> | |
| <div class="field"><label for="f-base">Base model (optional)</label> | |
| <input id="f-base" placeholder="facebook/wav2vec2-large-xlsr-53"></div> | |
| <div class="field"><label for="f-data">Training data (optional)</label> | |
| <input id="f-data" placeholder="ALFFA, Zenodo, private corpus…"> | |
| <span class="hint">Leave empty for a model never fine-tuned on Fon.</span></div> | |
| <div class="field"><label for="f-hours">Hours of Fon audio (optional)</label> | |
| <input id="f-hours" type="number" min="0" step="0.1"></div> | |
| <div class="field"><label for="f-user">Your HF username (optional)</label> | |
| <input id="f-user"></div> | |
| <div class="field"><label for="f-contact">Contact (optional)</label> | |
| <input id="f-contact"></div> | |
| <div class="field"><label for="f-note">Note (optional)</label> | |
| <textarea id="f-note" rows="2"></textarea></div> | |
| <div class="field"><label for="f-bench">Test set</label> | |
| <select id="f-bench"></select></div> | |
| <button class="act" type="submit" style="background:var(--indigo);color:#fff; | |
| border-color:var(--indigo)">Submit</button> | |
| </form> | |
| <div id="submit-out"></div> | |
| </section> | |
| <section id="tab-finetuning" class="hidden"><div class="note" id="ft"></div></section> | |
| <section id="tab-about" class="hidden"><div class="note" id="about"></div></section> | |
| </div> | |
| <script src="app.js"></script> | |
| </body> | |
| </html> | |