| <!doctype html> |
| <html lang="en"> |
| <head> |
| <meta charset="UTF-8" /> |
| <meta name="viewport" content="width=device-width, initial-scale=1" /> |
| <title>PhyAudioBench Leaderboard</title> |
| <style> |
| :root { font-family: Inter, ui-sans-serif, system-ui, -apple-system, Segoe UI, sans-serif; color: #18243b; background: #f5f7fc; } |
| * { box-sizing: border-box; } |
| body { margin: 0; } |
| .wrap { max-width: 1120px; margin: 0 auto; padding: 46px 22px 72px; } |
| .eyebrow { font-size: 12px; font-weight: 750; letter-spacing: .13em; color: #5277b9; text-transform: uppercase; } |
| .hero h1 { font-size: clamp(32px, 4.8vw, 54px); letter-spacing: -.045em; margin: 12px 0; } |
| .hero p { font-size: 16px; color: #66758f; line-height: 1.65; max-width: 720px; } |
| .links { display: flex; gap: 12px; flex-wrap: wrap; margin: 22px 0 30px; } |
| .links a { padding: 10px 16px; border: 1px solid #dce3f1; border-radius: 11px; text-decoration: none; color: #244781; background: white; font-weight: 650; font-size: 13px; } |
| .panel { background: white; border-radius: 18px; padding: 24px; border: 1px solid #e4e9f3; box-shadow: 0 7px 24px rgba(40,60,100,.04); } |
| .panel h2 { margin: 0; font-size: 22px; } |
| .sub { color: #73819a; font-size: 13px; margin: 7px 0 20px; } |
| .submission-info { margin: 0 0 20px; padding: 14px 18px; background: #f6f9ff; border: 1px solid #dce6f5; border-radius: 10px; color: #334563; font-size: 13px; line-height: 1.7; } |
| .submission-info a { color: #255aa6; font-weight: 600; text-decoration: underline; text-underline-offset: 2px; } |
| .controls { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 20px; } |
| input, select, button { border: 1px solid #dce3f0; border-radius: 10px; padding: 11px 13px; background: white; color: #253656; font: inherit; font-size: 13px; } |
| input { flex: 1; min-width: 200px; } |
| button { cursor: pointer; background: #255aa6; color: white; font-weight: 700; } |
| .scroll { overflow-x: auto; } |
| table { width: 100%; border-collapse: collapse; min-width: 690px; } |
| th { font-size: 12px; text-align: left; color: #61718b; cursor: pointer; padding: 15px 13px; background: #f6f8fd; } |
| td { padding: 17px 13px; border-bottom: 1px solid #ecf0f7; font-size: 14px; } |
| td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; } |
| tr:last-child td { border-bottom: 0; } |
| td.model { font-weight: 650; } |
| td.rank { font-weight: 700; color: #5c6c84; } |
| tr:first-child td.rank { color: #b27818; } |
| .note { margin-top: 18px; color: #66758f; font-size: 12px; line-height: 1.65; } |
| .foot { font-size: 12px; color: #8490a4; margin-top: 20px; } |
| .status { display: inline-block; font-size: 12px; color: #596b86; margin-left: auto; align-self: center; } |
| .mini { font-size: 12px; color: #6b7a92; margin-top: 12px; } |
| @media (max-width: 600px) { .wrap { padding: 24px 14px; } .panel { padding: 16px; } .controls { gap: 8px; } } |
| </style> |
| </head> |
| <body> |
| <main class="wrap"> |
| <header class="hero"> |
| <div class="eyebrow">AudioCC Lab · Text-to-Audio Evaluation</div> |
| <h1>PhyAudioBench <span style="color:#3473bd">Leaderboard</span></h1> |
| <p>Evaluating whether generated sounds are physically consistent, not just semantically plausible. Explore model performance across acoustic and prompt fidelity (L1), event structure (L2), and physical consistency (L3).</p> |
| <div class="links"> |
| <a href="https://github.com/AudioCC-Lab/PhyAudioBench" target="_blank" rel="noopener noreferrer">↗ Code repository</a> |
| <a href="https://huggingface.co/datasets/AudioCC-Lab/PhyAudioBench" target="_blank" rel="noopener noreferrer">↗ Dataset</a> |
| <a href="https://audiocc-lab.github.io/PhyAudioBench-project/" target="_blank" rel="noopener noreferrer">↗ Project page</a> |
| </div> |
| </header> |
| <div class="submission-info"> |
| Evaluate your model by following the instructions in our |
| <a href="https://github.com/AudioCC-Lab/PhyAudioBench" target="_blank" rel="noopener noreferrer">GitHub repository</a>, |
| and submit your evaluation results to |
| <a href="mailto:yuchaojia82@gmail.com">yuchaojia82@gmail.com</a> |
| for inclusion in the leaderboard. |
| </div> |
| <section class="panel"> |
| <h2>Model Rankings</h2> |
| <p class="sub">Higher is better · Click a column heading to change the ranking metric</p> |
| <div class="controls"> |
| <input id="search" placeholder="Search models…" aria-label="Search models" /> |
| <select id="metric" aria-label="Ranking metric"> |
| <option value="overall">Rank by Overall</option> |
| <option value="l1">Rank by L1</option> |
| <option value="l2">Rank by L2</option> |
| <option value="l3">Rank by L3</option> |
| </select> |
| <button id="refresh" type="button">Refresh results</button> |
| <span id="status" class="status" role="status"></span> |
| </div> |
| <div class="scroll"> |
| <table> |
| <thead><tr> |
| <th>Rank</th><th data-metric="model">Model</th> |
| <th class="num" data-metric="l1">L1 ↕</th> |
| <th class="num" data-metric="l2">L2 ↕</th> |
| <th class="num" data-metric="l3">L3 ↕</th> |
| <th class="num" data-metric="overall">Overall ↕</th> |
| </tr></thead> |
| <tbody id="rows"></tbody> |
| </table> |
| </div> |
| <div class="note">Example results from the existing PhyAudioBench evaluation. Scores are shown as proportions (0–1). Leaderboard submissions are reviewed before publication to ensure consistent evaluation settings and reproducible results.</div> |
| <div class="mini" id="count"></div> |
| </section> |
| <div class="foot">PhyAudioBench · AudioCC-Lab. To publish updated scores, maintain <code>leaderboard.json</code> in the public results Dataset.</div> |
| </main> |
| <script> |
| const sample = [ |
| { model: 'Model Name', l1: , l2: , l3: , overall: }, |
| ]; |
| const DATA_URL = 'https://huggingface.co/datasets/AudioCC-Lab/PhyAudioBench-results/resolve/main/leaderboard.json'; |
| let data = sample; |
| const $ = id => document.getElementById(id); |
| const val = x => Number.isFinite(Number(x)) ? Number(x).toFixed(4) : '—'; |
| function render() { |
| const key = $('metric').value; |
| const q = $('search').value.trim().toLowerCase(); |
| const records = data.filter(x => String(x.model).toLowerCase().includes(q)) |
| .sort((a, b) => Number(b[key]) - Number(a[key])); |
| $('rows').replaceChildren(); |
| records.forEach((r, i) => { |
| const tr = document.createElement('tr'); |
| const vals = [String(i + 1), r.model, val(r.l1), val(r.l2), val(r.l3), val(r.overall)]; |
| vals.forEach((v, j) => { |
| const td = document.createElement('td'); |
| td.textContent = v; |
| td.className = j === 0 ? 'rank' : j === 1 ? 'model' : 'num'; |
| tr.appendChild(td); |
| }); |
| $('rows').appendChild(tr); |
| }); |
| $('count').textContent = `Showing ${records.length} of ${data.length} model(s)`; |
| } |
| async function load() { |
| $('status').textContent = 'Checking results…'; |
| try { |
| const resp = await fetch(DATA_URL + '?t=' + Date.now(), { cache: 'no-store' }); |
| if (!resp.ok) throw new Error('HTTP ' + resp.status); |
| const json = await resp.json(); |
| if (!Array.isArray(json) || !json.every(r => r.model && ['l1', 'l2', 'l3', 'overall'].every(k => Number.isFinite(Number(r[k]))))) { |
| throw new Error('Invalid leaderboard JSON'); |
| } |
| data = json; |
| $('status').textContent = 'Live dataset results'; |
| } catch (e) { |
| data = sample; |
| $('status').textContent = 'Demo results (dataset unavailable)'; |
| } |
| render(); |
| } |
| $('search').addEventListener('input', render); |
| $('metric').addEventListener('change', render); |
| $('refresh').addEventListener('click', load); |
| document.querySelectorAll('th[data-metric]').forEach(th => { |
| th.addEventListener('click', () => { |
| if (th.dataset.metric !== 'model') { |
| $('metric').value = th.dataset.metric; |
| render(); |
| } |
| }); |
| }); |
| load(); |
| </script> |
| </body> |
| </html> |
|
|
