index.html

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta
      name="description"
      content="Browser-native contract tests for Hugging Face tool-calling chat templates."
    />
    <title>ToolCall Lint — Chat-template contract tests</title>
    <link rel="preconnect" href="https://cdn.jsdelivr.net" />
    <link rel="stylesheet" href="./styles.css" />
  </head>
  <body>
    <header class="site-header">
      <a class="brand" href="#top" aria-label="ToolCall Lint home">
        <span class="brand-mark" aria-hidden="true">🤗</span>
        <span>ToolCall Lint</span>
      </a>
      <nav aria-label="Primary navigation">
        <a href="#inspector">Inspector</a>
        <a href="#baseline">Baseline</a>
        <a href="#method">Method</a>
        <a
          class="nav-source"
          href="https://github.com/huggingface/transformers/issues/45419"
          target="_blank"
          rel="noreferrer"
        >
          transformers#45419 ↗
        </a>
      </nav>
    </header>

    <main id="top">
      <section class="hero page-shell">
        <div class="hero-copy">
          <div class="eyebrow">Tool-calling compatibility</div>
          <h1>Contract tests for tool-calling chat templates.</h1>
          <p class="hero-lede">
            Inspect rendering contracts across Python Transformers and Transformers.js.
            No model weights, inference, or application server required.
          </p>
          <div class="hero-actions">
            <a class="button button-primary" href="#inspector">Inspect a model</a>
            <a class="button button-secondary" href="#baseline">Explore 20-model baseline</a>
          </div>
        </div>
        <div class="signal-card" aria-label="Project properties">
          <div class="signal-row">
            <span class="signal-icon">◎</span>
            <div><strong>Tokenizer only</strong><small>No model weights or inference</small></div>
          </div>
          <div class="signal-row">
            <span class="signal-icon">◇</span>
            <div><strong>Browser-native</strong><small>Runs through Transformers.js Jinja</small></div>
          </div>
          <div class="signal-row">
            <span class="signal-icon">↺</span>
            <div><strong>Reproducible</strong><small>Revision and template hashes recorded</small></div>
          </div>
          <div class="signal-row">
            <span class="signal-icon">≠</span>
            <div><strong>Evidence first</strong><small>Every finding includes its observation</small></div>
          </div>
        </div>
      </section>

      <section class="metrics-strip" aria-label="Baseline summary">
        <div><strong>20</strong><span>target repositories</span></div>
        <div><strong>18</strong><span>templates loaded</span></div>
        <div><strong>9</strong><span>required-contract failures</span></div>
        <div><strong>0</strong><span>model weights loaded</span></div>
      </section>

      <section id="inspector" class="section page-shell">
        <div class="section-heading split-heading">
          <div>
            <div class="eyebrow">Live inspector</div>
            <h2>Test a public Hub tokenizer</h2>
          </div>
          <p>
            Assets stay in your browser cache. Public repositories work without a token;
            gated repositories cannot be inspected from this static Space.
          </p>
        </div>

        <div class="inspector-card">
          <form id="inspect-form" class="inspect-form">
            <label for="model-id">Hugging Face model repository</label>
            <div class="input-row">
              <div class="model-input-wrap">
                <span aria-hidden="true">hf://</span>
                <input
                  id="model-id"
                  name="model-id"
                  value="Qwen/Qwen3-8B"
                  autocomplete="off"
                  spellcheck="false"
                  required
                />
              </div>
              <button id="run-button" class="button button-primary" type="submit">
                Run contract suite
              </button>
            </div>
            <div class="example-row" aria-label="Example models">
              <span>Try:</span>
              <button type="button" class="example-chip" data-model="Qwen/Qwen3-8B">Qwen3</button>
              <button type="button" class="example-chip" data-model="deepseek-ai/DeepSeek-R1">DeepSeek R1</button>
              <button type="button" class="example-chip" data-model="openai/gpt-oss-20b">gpt-oss</button>
              <button type="button" class="example-chip" data-model="AIDC-AI/Marco-Mini-Instruct">Marco Mini</button>
            </div>
          </form>

          <div id="run-state" class="run-state" hidden aria-live="polite">
            <div class="run-state-top">
              <span id="run-state-label">Loading tokenizer assets…</span>
              <span id="run-state-percent">0%</span>
            </div>
            <div class="progress-track"><div id="progress-bar" class="progress-bar"></div></div>
            <p id="run-state-detail">Only tokenizer and template files are requested.</p>
          </div>

          <div id="live-error" class="error-panel" hidden role="alert"></div>
          <div id="live-results" class="live-results" hidden></div>
        </div>
      </section>

      <section id="baseline" class="section section-muted">
        <div class="page-shell">
          <div class="section-heading split-heading">
            <div>
              <div class="eyebrow">Reproducible baseline</div>
              <h2>Twenty model families, one contract</h2>
            </div>
            <p>
              Python reference results from 19 August 2026. Select a row to inspect
              minimized evidence, resolved revisions, and every individual check.
            </p>
          </div>

          <div id="baseline-summary" class="baseline-summary" aria-live="polite"></div>
          <div class="table-controls">
            <label class="search-control">
              <span class="sr-only">Search models</span>
              <span aria-hidden="true">⌕</span>
              <input id="model-search" type="search" placeholder="Search model or repository…" />
            </label>
            <label class="filter-control">
              <span class="sr-only">Filter by result</span>
              <select id="status-filter">
                <option value="all">All results</option>
                <option value="contract_fail">Required-contract failures</option>
                <option value="proposed_fail">Proposed-only failures</option>
                <option value="contract_pass">No contract failures</option>
                <option value="load_error">Load errors</option>
              </select>
            </label>
          </div>
          <div class="table-shell">
            <table>
              <thead>
                <tr>
                  <th>Model</th>
                  <th>Result</th>
                  <th title="Passing required contracts out of those that could be evaluated">Required</th>
                  <th title="Passing proposed contracts; never counted against a template">Proposed</th>
                  <th>Dict args</th>
                  <th>Parallel</th>
                  <th>Response</th>
                  <th>Content</th>
                  <th>Prefix</th>
                </tr>
              </thead>
              <tbody id="baseline-body"></tbody>
            </table>
          </div>
          <p id="table-empty" class="empty-state" hidden>No models match this filter.</p>
        </div>
      </section>

      <section id="method" class="section page-shell method-section">
        <div class="section-heading">
          <div class="eyebrow">Method</div>
          <h2>Small tests. Explicit contracts.</h2>
          <p>
            A failure means a documented or maintainer-confirmed input contract broke.
            Warnings identify portability or training-pipeline risk without declaring a
            template invalid.
          </p>
        </div>
        <div class="method-grid">
          <article><span>01</span><h3>Canonical inputs</h3><p>Use documented dictionary arguments and semantically equivalent content variants.</p></article>
          <article><span>02</span><h3>Preservation</h3><p>Verify function names, arguments, parallel calls, and tool responses survive rendering.</p></article>
          <article><span>03</span><h3>Cross-engine</h3><p>Run in JavaScript and flag Python-only Jinja constructs before deployment.</p></article>
          <article><span>04</span><h3>Revision evidence</h3><p>Record the exact template digest and resolved repository revision for every observation.</p></article>
        </div>
      </section>
    </main>

    <dialog id="detail-dialog" class="detail-dialog">
      <div class="dialog-head">
        <div><span class="dialog-kicker">Baseline evidence</span><h2 id="dialog-title"></h2></div>
        <button id="dialog-close" class="icon-button" aria-label="Close dialog">×</button>
      </div>
      <div id="dialog-content"></div>
    </dialog>

    <footer>
      <div class="page-shell footer-inner">
        <div><strong>ToolCall Lint</strong><span>Contract tests for agent infrastructure.</span></div>
        <p>Apache-2.0 · Contract <code>2026-08-mvp1</code> · Transformers.js <code>4.2.0</code></p>
      </div>
    </footer>

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