static/index.html

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="description" content="A customizable leaderboard for comparing model evaluation results." />
    <title>Open Leaderboard</title>
    <link rel="stylesheet" href="/static/styles.css" />
  </head>
  <body>
    <main>
      <header class="app-header">
        <h1 id="leaderboard-name">Open Leaderboard</h1>
      </header>

      <nav class="tabs" aria-label="Leaderboard sections">
        <button class="tab active" data-tab="leaderboard">
          <svg viewBox="0 0 24 24" aria-hidden="true"><path d="M4 20V10M10 20V4M16 20v-7M22 20H2" /></svg>
          <span>Leaderboard</span>
        </button>
        <button class="tab" data-tab="submit">
          <svg viewBox="0 0 24 24" aria-hidden="true"><path d="M12 16V3M7 8l5-5 5 5M5 21h14" /></svg>
          <span>Submit</span>
        </button>
        <button class="tab" data-tab="about">
          <svg viewBox="0 0 24 24" aria-hidden="true"><circle cx="12" cy="12" r="9" /><path d="M12 11v5M12 8h.01" /></svg>
          <span>About</span>
        </button>
      </nav>

      <section class="panel active" id="panel-leaderboard">
        <div class="panel-heading">
          <div><h2>LLM Benchmark</h2><p>Compare evaluation results across models.</p></div>
          <p id="updated-at" class="updated">Loading the latest results…</p>
        </div>

        <div class="toolbar">
          <label class="search"><span>⌕</span><input id="search" type="search" placeholder="Search models or licenses" /></label>
          <label class="select-control"><span>Model type</span><select id="type-filter"><option value="">All types</option></select></label>
          <label class="select-control"><span>Precision</span><select id="precision-filter"><option value="">Any precision</option></select></label>
          <label class="toggle"><input id="available-filter" type="checkbox" /> Available only</label>
        </div>

        <div id="data-warning" class="notice warning hidden"></div>
        <div class="table-shell">
          <table>
            <thead id="leaderboard-head"></thead>
            <tbody id="leaderboard-body">
              <tr class="loading-row"><td><span class="skeleton"></span></td><td><span class="skeleton wide"></span></td><td><span class="skeleton"></span></td><td><span class="skeleton"></span></td></tr>
            </tbody>
          </table>
          <div class="empty-state hidden" id="empty-state"><h3>No models found</h3><p>Try clearing one of your filters.</p></div>
        </div>
        <div class="table-footer"><span id="result-count">—</span><span>Click a score heading to sort</span></div>
      </section>

      <section class="panel" id="panel-submit">
        <div class="panel-heading">
          <div><h2>Submit a model</h2><p>Validate a public Hugging Face model and add it to the evaluation queue.</p></div>
        </div>

        <div class="queue-grid" id="queue-grid"></div>

        <div class="submit-layout">
          <form id="submit-form" class="block submit-card">
            <div class="block-heading"><h3>Model details</h3><p>Required fields must be completed before submission.</p></div>
            <div class="form-grid">
              <label class="field full"><span>Model ID <b>required</b></span><input name="model" placeholder="organization/model-name" required /></label>
              <label class="field"><span>Revision</span><input name="revision" placeholder="main" /></label>
              <label class="field"><span>Model type <b>required</b></span><select name="model_type" required><option value="">Choose a type</option></select></label>
              <label class="field"><span>Precision <b>required</b></span><select name="precision" required></select></label>
              <label class="field"><span>Weights <b>required</b></span><select name="weight_type" required></select></label>
              <label class="field full"><span>Base model <small>for adapter or delta weights</small></span><input name="base_model" placeholder="organization/base-model" /></label>
            </div>
            <button class="primary-button" type="submit"><span>Submit evaluation</span></button>
            <div id="submission-result" class="notice hidden" role="status"></div>
          </form>

          <aside class="block guidance-card"><h3>Before you submit</h3><div id="submission-copy" class="prose"></div></aside>
        </div>
      </section>

      <section class="panel" id="panel-about">
        <div class="panel-heading"><div><h2>About</h2><p>Methodology and reproducibility information.</p></div></div>
        <div id="about-copy" class="block prose about-copy"></div>
        <div id="citation-card" class="block citation-card hidden"><div><h3 id="citation-label"></h3></div><button id="copy-citation">Copy</button><pre id="citation"></pre></div>
      </section>
    </main>

    <script type="module" src="/static/app.js"></script>
  </body>
</html>