Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="utf-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1"> | |
| <meta name="description" content="Dad-joke generations across Carbon midtraining checkpoints."> | |
| <title>Carbon Jokes</title> | |
| <link rel="preconnect" href="https://fonts.googleapis.com"> | |
| <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> | |
| <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600&family=JetBrains+Mono:wght@300;400;500;600&display=swap" rel="stylesheet"> | |
| <style> | |
| * { box-sizing: border-box; } | |
| :root { | |
| --bg: #fafafa; | |
| --card: #ffffff; | |
| --border: #dcdcdc; | |
| --border-soft: #ececec; | |
| --ink: #1a1a1a; | |
| --muted: #686868; | |
| --muted-light: #8b8b8b; | |
| --accent: #0f3787; | |
| --accent-deep: #0a275f; | |
| --accent-soft: #e8eef9; | |
| } | |
| html { color-scheme: light; } | |
| body { | |
| margin: 0; | |
| padding: 24px 32px 64px; | |
| background: var(--bg); | |
| color: var(--ink); | |
| font-family: "Inter", "Helvetica Neue", sans-serif; | |
| font-size: 12px; | |
| font-weight: 300; | |
| line-height: 1.6; | |
| } | |
| .page { | |
| width: 100%; | |
| max-width: 1600px; | |
| margin: 0 auto; | |
| } | |
| header { | |
| display: flex; | |
| align-items: flex-start; | |
| justify-content: space-between; | |
| gap: 28px; | |
| padding-bottom: 16px; | |
| margin-bottom: 24px; | |
| border-bottom: 1px solid var(--border); | |
| } | |
| .title-row { | |
| display: flex; | |
| align-items: center; | |
| gap: 12px; | |
| } | |
| .mark { | |
| display: grid; | |
| width: 30px; | |
| height: 30px; | |
| place-items: center; | |
| border: 1px solid var(--accent); | |
| border-radius: 3px; | |
| background: var(--accent); | |
| color: #fff; | |
| font-family: "JetBrains Mono", monospace; | |
| font-size: 15px; | |
| font-weight: 600; | |
| } | |
| h1 { | |
| margin: 0; | |
| font-family: "JetBrains Mono", monospace; | |
| font-size: 24px; | |
| font-weight: 500; | |
| letter-spacing: 0.2px; | |
| line-height: 1.25; | |
| } | |
| .subtitle { | |
| max-width: 720px; | |
| margin: 8px 0 0 42px; | |
| color: var(--muted); | |
| font-size: 13px; | |
| } | |
| .summary { | |
| margin: 8px 0 0 42px; | |
| color: var(--muted-light); | |
| font-family: "JetBrains Mono", monospace; | |
| font-size: 10px; | |
| font-weight: 500; | |
| letter-spacing: 0.5px; | |
| text-transform: uppercase; | |
| } | |
| .summary strong { | |
| color: var(--accent); | |
| font-weight: 600; | |
| } | |
| .controls { | |
| display: flex; | |
| min-width: min(520px, 100%); | |
| flex-direction: column; | |
| gap: 7px; | |
| } | |
| label, | |
| .section-label { | |
| color: #444; | |
| font-family: "JetBrains Mono", monospace; | |
| font-size: 10px; | |
| font-weight: 500; | |
| letter-spacing: 1.5px; | |
| text-transform: uppercase; | |
| } | |
| select { | |
| width: 100%; | |
| min-height: 36px; | |
| padding: 7px 36px 7px 11px; | |
| border: 1px solid #c8c8c8; | |
| border-radius: 3px; | |
| outline: none; | |
| background-color: var(--card); | |
| color: var(--ink); | |
| font-family: "JetBrains Mono", monospace; | |
| font-size: 11px; | |
| font-weight: 400; | |
| cursor: pointer; | |
| } | |
| select:hover { border-color: #999; } | |
| select:focus { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-soft); } | |
| .section-head { | |
| display: flex; | |
| align-items: center; | |
| justify-content: space-between; | |
| gap: 16px; | |
| margin-bottom: 10px; | |
| } | |
| .row-count { | |
| color: var(--muted-light); | |
| font-family: "JetBrains Mono", monospace; | |
| font-size: 10px; | |
| letter-spacing: 0.4px; | |
| } | |
| .table-shell { | |
| overflow-x: auto; | |
| border: 1px solid var(--border); | |
| background: var(--card); | |
| } | |
| table { | |
| width: 100%; | |
| min-width: 1040px; | |
| border-collapse: collapse; | |
| table-layout: fixed; | |
| } | |
| col.step { width: 92px; } | |
| col.query { width: 17%; } | |
| col.prompt { width: 31%; } | |
| col.response { width: auto; } | |
| thead th { | |
| padding: 10px 12px; | |
| border-bottom: 1px solid var(--border); | |
| background: #f4f4f4; | |
| color: #444; | |
| font-family: "JetBrains Mono", monospace; | |
| font-size: 10px; | |
| font-weight: 500; | |
| letter-spacing: 1.4px; | |
| text-align: left; | |
| text-transform: uppercase; | |
| } | |
| thead th + th, | |
| tbody td + td { border-left: 1px solid var(--border-soft); } | |
| tbody tr { transition: background 120ms ease; } | |
| tbody tr:hover { background: #f8faff; } | |
| tbody tr:not(:last-child) td { border-bottom: 1px solid var(--border-soft); } | |
| td { | |
| padding: 12px; | |
| vertical-align: top; | |
| } | |
| .step-pill { | |
| display: inline-block; | |
| padding: 3px 7px; | |
| border: 1px solid #cad5e9; | |
| border-radius: 2px; | |
| background: var(--accent-soft); | |
| color: var(--accent-deep); | |
| font-family: "JetBrains Mono", monospace; | |
| font-size: 10px; | |
| font-weight: 600; | |
| font-variant-numeric: tabular-nums; | |
| } | |
| pre { | |
| max-height: 240px; | |
| margin: 0; | |
| overflow: auto; | |
| color: #292929; | |
| font-family: "JetBrains Mono", monospace; | |
| font-size: 10px; | |
| font-weight: 300; | |
| line-height: 1.55; | |
| overflow-wrap: anywhere; | |
| white-space: pre-wrap; | |
| word-break: break-word; | |
| } | |
| td.response pre { color: #202020; } | |
| .loading, | |
| .error { | |
| padding: 56px 24px; | |
| color: var(--muted); | |
| font-family: "JetBrains Mono", monospace; | |
| font-size: 11px; | |
| text-align: center; | |
| } | |
| .error { color: #8b1a1a; } | |
| footer { | |
| margin-top: 14px; | |
| color: var(--muted-light); | |
| font-family: "JetBrains Mono", monospace; | |
| font-size: 9px; | |
| letter-spacing: 0.35px; | |
| text-align: right; | |
| } | |
| @media (max-width: 900px) { | |
| body { padding: 18px 16px 48px; } | |
| header { flex-direction: column; } | |
| .controls { min-width: 100%; } | |
| } | |
| @media (max-width: 520px) { | |
| h1 { font-size: 20px; } | |
| .subtitle, | |
| .summary { margin-left: 0; } | |
| .mark { width: 27px; height: 27px; } | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <main class="page"> | |
| <header> | |
| <div> | |
| <div class="title-row"> | |
| <span class="mark" aria-hidden="true">C</span> | |
| <h1>Carbon Jokes</h1> | |
| </div> | |
| <p class="subtitle">A checkpoint-by-checkpoint view of dad-joke generations from the Carbon midtraining experiments.</p> | |
| <p class="summary"><strong id="generation-count">—</strong> generations <span aria-hidden="true">·</span> <strong id="experiment-count">—</strong> experiments</p> | |
| </div> | |
| <div class="controls"> | |
| <label for="experiment-select">Experiment</label> | |
| <select id="experiment-select" disabled> | |
| <option>Loading experiments…</option> | |
| </select> | |
| </div> | |
| </header> | |
| <section aria-labelledby="results-heading"> | |
| <div class="section-head"> | |
| <span class="section-label" id="results-heading">Generations</span> | |
| <span class="row-count" id="row-count"></span> | |
| </div> | |
| <div class="table-shell"> | |
| <table> | |
| <colgroup> | |
| <col class="step"> | |
| <col class="query"> | |
| <col class="prompt"> | |
| <col class="response"> | |
| </colgroup> | |
| <thead> | |
| <tr> | |
| <th scope="col">Step</th> | |
| <th scope="col">Query</th> | |
| <th scope="col">Prompt</th> | |
| <th scope="col">Response</th> | |
| </tr> | |
| </thead> | |
| <tbody id="results-body"> | |
| <tr><td colspan="4" class="loading">Loading generations…</td></tr> | |
| </tbody> | |
| </table> | |
| </div> | |
| </section> | |
| <footer>Exact vLLM responses · whitespace preserved</footer> | |
| </main> | |
| <script> | |
| const select = document.getElementById("experiment-select"); | |
| const resultsBody = document.getElementById("results-body"); | |
| const rowCount = document.getElementById("row-count"); | |
| let experiments = {}; | |
| function cellWithPre(value, className = "") { | |
| const cell = document.createElement("td"); | |
| if (className) cell.className = className; | |
| const pre = document.createElement("pre"); | |
| pre.textContent = value; | |
| cell.appendChild(pre); | |
| return cell; | |
| } | |
| function renderExperiment(name) { | |
| const rows = experiments[name] || []; | |
| resultsBody.replaceChildren(); | |
| for (const result of rows) { | |
| const row = document.createElement("tr"); | |
| const stepCell = document.createElement("td"); | |
| const step = document.createElement("span"); | |
| step.className = "step-pill"; | |
| step.textContent = result.step.toLocaleString(); | |
| stepCell.appendChild(step); | |
| row.append( | |
| stepCell, | |
| cellWithPre(result.query), | |
| cellWithPre(result.prompt), | |
| cellWithPre(result.response, "response") | |
| ); | |
| resultsBody.appendChild(row); | |
| } | |
| rowCount.textContent = `${rows.length} checkpoint${rows.length === 1 ? "" : "s"}`; | |
| const url = new URL(window.location); | |
| url.searchParams.set("experiment", name); | |
| window.history.replaceState({}, "", url); | |
| } | |
| async function loadData() { | |
| try { | |
| const response = await fetch("./data.json"); | |
| if (!response.ok) throw new Error(`HTTP ${response.status}`); | |
| ({ experiments } = await response.json()); | |
| const names = Object.keys(experiments).sort(); | |
| const requested = new URLSearchParams(window.location.search).get("experiment"); | |
| const initial = names.includes(requested) ? requested : names[0]; | |
| const total = names.reduce((sum, name) => sum + experiments[name].length, 0); | |
| select.replaceChildren(); | |
| for (const name of names) { | |
| const option = document.createElement("option"); | |
| option.value = name; | |
| option.textContent = name; | |
| select.appendChild(option); | |
| } | |
| select.value = initial; | |
| select.disabled = false; | |
| document.getElementById("generation-count").textContent = total; | |
| document.getElementById("experiment-count").textContent = names.length; | |
| renderExperiment(initial); | |
| } catch (error) { | |
| resultsBody.innerHTML = `<tr><td colspan="4" class="error">Could not load results: ${error.message}</td></tr>`; | |
| } | |
| } | |
| select.addEventListener("change", () => renderExperiment(select.value)); | |
| loadData(); | |
| </script> | |
| </body> | |
| </html> | |