HallusionBench/leaderboard.html at main · tianyi-lab/HallusionBench · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width,initial-scale=1" />
  <title>HallusionBench Leaderboard</title>
  <style>
    :root{--muted:#6b7280;--line:#e5e7eb;--gold:#f59e0b;--silver:#9ca3af;--bronze:#c2410c;}
    body{font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;max-width:1100px;margin:40px auto;padding:0 16px}
    h1{margin:0 0 6px}
    .muted{color:var(--muted);font-size:14px;margin-bottom:14px}
    input{width:100%;padding:10px;border:1px solid #d1d5db;border-radius:8px;margin:6px 0 14px}
    table{width:100%;border-collapse:collapse}
    th,td{padding:10px;border-bottom:1px solid var(--line);text-align:left}
    th{cursor:pointer;user-select:none;white-space:nowrap}
    tr:hover{background:#fafafa}
    .badge{display:inline-block;padding:2px 8px;border-radius:999px;font-size:12px;margin-left:6px}
    .gold{background:var(--gold);color:#111827}
    .silver{background:var(--silver);color:#111827}
    .bronze{background:var(--bronze);color:#fff}
    .num{text-align:right}
  </style>
</head>
<body>
  <h1>HallusionBench Leaderboard 🏆</h1>
  <div class="muted">Click column headers to sort • Type to filter</div>
  <input id="search" placeholder="Search model...">

  <table id="tbl">
    <thead>
      <tr>
        <th data-key="rank" data-num>Rank ⬍</th>
        <th data-key="model">Model ⬍</th>
        <th data-key="date">Eval Date ⬍</th>
        <th class="num" data-key="aAcc" data-num>aAcc ⬍</th>
        <th class="num" data-key="fAcc" data-num>fAcc ⬍</th>
        <th class="num" data-key="qAcc" data-num>qAcc ⬍</th>
        <th class="num" data-key="overall" data-num>Overall ⬍</th>
      </tr>
    </thead>
    <tbody></tbody>
  </table>

  <script>
    let rows = [];
    const $tbody = document.querySelector('#tbl tbody');

    function fmt(n){ return Number.isFinite(+n) ? (+n).toFixed(1) : n; }

    function render(data){
      $tbody.innerHTML = data.map(r=>{
        const badge =
          r.rank===1 ? '<span class="badge gold">#1</span>' :
          r.rank===2 ? '<span class="badge silver">#2</span>' :
          r.rank===3 ? '<span class="badge bronze">#3</span>' : '';
        return `<tr>
          <td>${r.rank}</td>
          <td>${r.model} ${badge}</td>
          <td>${r.date}</td>
          <td class="num">${fmt(r.aAcc)}</td>
          <td class="num">${fmt(r.fAcc)}</td>
          <td class="num">${fmt(r.qAcc)}</td>
          <td class="num">${fmt(r.overall)}</td>
        </tr>`;
      }).join('');
    }

    // sorting
    let sortKey=null, sortAsc=true;
    document.querySelectorAll('th').forEach(th=>{
      th.addEventListener('click', ()=>{
        const key = th.dataset.key;
        const isNum = 'num' in th.dataset;
        sortAsc = sortKey===key ? !sortAsc : true;
        sortKey = key;
        const sorted = [...rows].sort((a,b)=>{
          const A=a[key], B=b[key];
          return isNum ? (sortAsc? A-B : B-A)
                       : (sortAsc? String(A).localeCompare(String(B)) : String(B).localeCompare(String(A)));
        });
        render(sorted);
      });
    });

    // search
    document.getElementById('search').addEventListener('input', (e)=>{
      const q = e.target.value.toLowerCase();
      const filtered = rows.filter(r => String(r.model).toLowerCase().includes(q));
      render(filtered);
    });

    // load data
    fetch('leaderboard.json')
      .then(r=>r.json())
      .then(json=>{
        rows = json.map(x=>({
          rank:+x.rank, model:x.model, date:x.date,
          aAcc:+x.aAcc, fAcc:+x.fAcc, qAcc:+x.qAcc, overall:+x.overall
        }));
        rows.sort((a,b)=>a.rank-b.rank);
        render(rows);
      })
      .catch(err=>{
        console.error('Failed to load leaderboard.json', err);
        $tbody.innerHTML = '<tr><td colspan="7">Failed to load leaderboard.json</td></tr>';
      });
  </script>
</body>
</html>