Blame for index.html

<!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>