Spaces:
Running
Running
| <html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"> | |
| <title>Transformers Triage Board</title> | |
| <link rel="preconnect" href="https://fonts.googleapis.com"><link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600&family=Source+Serif+4:wght@400&display=swap" rel="stylesheet"> | |
| <style>:root{--color-bg:#fbfbfa;--color-fg:#1d1d1b;--color-fg-muted:#6b6b66;--color-panel:#ffffff;--color-border-line:#e6e5e0;--color-ok:#2f7d4f;--cds-chart-muted:#b9b8b2;--cds-chart-status-critical:#c2410c; | |
| --font-anthropic-sans:'Inter',system-ui,-apple-system,sans-serif;--font-anthropic-serif:'Source Serif 4',Georgia,serif;--cds-font-size-caption:12px;--cds-font-size-body:14px;--cds-font-size-heading:16px;--cds-font-size-title:32px;--cds-font-weight-medium:600; | |
| --cds-gap-xs:4px;--cds-gap-sm:8px;--cds-gap-md:12px;--cds-gap-lg:20px;--cds-pad-xs:4px;--cds-pad-sm:8px;--cds-pad-md:12px;--cds-pad-lg:16px;--cds-radius:8px} | |
| @media (prefers-color-scheme:dark){:root{--color-bg:#151514;--color-fg:#ecebe6;--color-fg-muted:#a3a29c;--color-panel:#1e1e1c;--color-border-line:#33332f;--color-ok:#5fb37f;--cds-chart-muted:#55554f;--cds-chart-status-critical:#f08a4b;color-scheme:dark}} | |
| body{margin:0;background:var(--color-bg);color:var(--color-fg);font-family:var(--font-anthropic-sans);padding:24px max(16px,env(safe-area-inset-left,0px))} | |
| .dash-skeleton{color:transparent;background:var(--color-border-line);border-radius:4px} | |
| .tb-wrap { max-width: 1240px; margin-inline: auto; display: flex; flex-direction: column; gap: var(--cds-gap-lg); font-family: var(--font-anthropic-sans); } | |
| .tb-head h1 { font-family: var(--font-anthropic-serif); font-weight: 400; font-size: var(--cds-font-size-title); margin: 0; text-wrap: balance; } | |
| .tb-take { color: var(--color-fg-muted); margin: var(--cds-gap-xs) 0 0; max-width: 70ch; } | |
| .tb-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr)); gap: var(--cds-gap-md); } | |
| .tb-tile, .tb-card { background: var(--color-panel); border: 1px solid var(--color-border-line); border-radius: var(--cds-radius); padding: var(--cds-pad-lg); min-width: 0; } | |
| .tb-tile .lbl { color: var(--color-fg-muted); font-size: var(--cds-font-size-caption); } | |
| .tb-tile .big { font-family: var(--font-anthropic-serif); font-weight: 400; font-size: var(--cds-font-size-title); font-variant-numeric: tabular-nums; display: block; margin-top: var(--cds-gap-xs); } | |
| .tb-tile .sub { color: var(--color-fg-muted); font-size: var(--cds-font-size-caption); font-variant-numeric: tabular-nums; } | |
| .tb-card h2 { font-size: var(--cds-font-size-heading); font-weight: var(--cds-font-weight-medium); margin: 0; } | |
| .tb-note { color: var(--color-fg-muted); font-size: var(--cds-font-size-caption); margin: var(--cds-gap-xs) 0 var(--cds-gap-md); } | |
| .tb-scroll { overflow: auto; max-height: 34rem; } | |
| table.tb { width: 100%; border-collapse: collapse; font-size: var(--cds-font-size-body); } | |
| table.tb th { position: sticky; top: 0; background: var(--color-panel); text-align: left; font-weight: var(--cds-font-weight-medium); color: var(--color-fg-muted); font-size: var(--cds-font-size-caption); padding: var(--cds-pad-xs) var(--cds-pad-sm); border-bottom: 1px solid var(--color-border-line); } | |
| table.tb td { padding: var(--cds-pad-xs) var(--cds-pad-sm); border-bottom: 1px solid var(--color-border-line); vertical-align: top; } | |
| table.tb td.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; } | |
| .tb-sum tr.row { cursor: pointer; } | |
| .tb-sum tr.row:hover td, .tb-sum tr.sel td { background: color-mix(in srgb, var(--color-fg) 6%, transparent); } | |
| .tb-sum tr.grp td { font-weight: var(--cds-font-weight-medium); padding-top: var(--cds-pad-md); border-bottom: none; } | |
| .bar { height: 8px; border-radius: 4px; background: var(--cds-chart-muted); min-width: 2px; } | |
| .bar.closed { background: var(--color-ok); } | |
| .bar.open { background: var(--cds-chart-status-critical); opacity: .55; } | |
| .tb-controls { display: flex; flex-wrap: wrap; gap: var(--cds-gap-sm); align-items: center; margin-bottom: var(--cds-gap-sm); } | |
| .tb-controls input { flex: 1 1 14rem; min-width: 0; padding: var(--cds-pad-xs) var(--cds-pad-sm); border: 1px solid var(--color-border-line); border-radius: var(--cds-radius); background: var(--color-bg); color: var(--color-fg); font: inherit; } | |
| .tb-controls button { padding: var(--cds-pad-xs) var(--cds-pad-sm); border: 1px solid var(--color-border-line); border-radius: var(--cds-radius); background: var(--color-bg); color: var(--color-fg); font: inherit; cursor: pointer; } | |
| .tb-filter { font-size: var(--cds-font-size-caption); color: var(--color-fg-muted); } | |
| .tb-items tr.it { cursor: pointer; } | |
| .tb-items tr.it:hover td { background: color-mix(in srgb, var(--color-fg) 5%, transparent); } | |
| .tb-items td.cm { color: var(--color-fg-muted); max-width: 32rem; } | |
| .tb-items td.ttl { min-width: 14rem; } | |
| .tb-items a { color: inherit; } | |
| .pill { display: inline-block; font-size: var(--cds-font-size-caption); padding: 0 var(--cds-pad-xs); border: 1px solid var(--color-border-line); border-radius: 999px; white-space: nowrap; } | |
| .tb-detail { margin-top: var(--cds-gap-md); padding: var(--cds-pad-md); border: 1px solid var(--color-border-line); border-radius: var(--cds-radius); background: var(--color-bg); } | |
| .tb-detail h3 { margin: 0 0 var(--cds-gap-xs); font-size: var(--cds-font-size-heading); font-weight: var(--cds-font-weight-medium); } | |
| .tb-detail .meta { color: var(--color-fg-muted); font-size: var(--cds-font-size-caption); margin-bottom: var(--cds-gap-sm); } | |
| .tb-detail .cm { white-space: pre-wrap; line-height: 1.5; } | |
| [data-dash-source-state=empty] { color: transparent; } | |
| [data-dash-source-state=refreshing] { opacity: .5; } | |
| @media (max-width: 640px) { .tb-items .hide-sm { display: none; } } | |
| </style></head><body> | |
| <div class="tb-wrap"> | |
| <header class="tb-head"> | |
| <h1 id="title">Transformers triage board</h1> | |
| <p class="tb-take" id="takeaway">huggingface/transformers · snapshot 2026-10-21 · Every issue and PR the Oct 20–21 triage touched, and how the open backlog breaks down now. Click a category to list its items, then an item to read the comment we left.</p> | |
| </header> | |
| <section class="tb-tiles" id="tiles"> | |
| <div class="tb-tile"><span class="lbl">Closed issues</span><span class="big dash-skeleton" data-source="totals" data-field="value" data-where="metric=closed_issues">—</span><span class="sub">by the triage</span></div> | |
| <div class="tb-tile"><span class="lbl">Closed PRs</span><span class="big dash-skeleton" data-source="totals" data-field="value" data-where="metric=closed_prs">—</span><span class="sub">by the triage</span></div> | |
| <div class="tb-tile"><span class="lbl">Open issues now</span><span class="big dash-skeleton" data-source="totals" data-field="value" data-where="metric=open_issues">—</span><span class="sub">was <span data-source="totals" data-field="value" data-where="metric=start_issues">—</span> on Oct 20</span></div> | |
| <div class="tb-tile"><span class="lbl">Open PRs now</span><span class="big dash-skeleton" data-source="totals" data-field="value" data-where="metric=open_prs">—</span><span class="sub">was <span data-source="totals" data-field="value" data-where="metric=start_prs">—</span> on Oct 20</span></div> | |
| </section> | |
| <section class="tb-card" id="classification"> | |
| <h2>Classification</h2> | |
| <p class="tb-note">What was closed and why, and what is still open by kind (issues) or review status (PRs). Click a row to list its items below.</p> | |
| <div class="tb-scroll"><table class="tb tb-sum" id="sumtable"> | |
| <thead><tr><th data-field="category">category</th><th data-field="count" style="text-align:right">items</th><th style="width:40%"></th></tr></thead> | |
| <tbody></tbody> | |
| </table></div> | |
| </section> | |
| <section class="tb-card" id="items"> | |
| <h2>Items</h2> | |
| <p class="tb-note">Each issue or PR with what the triage did and the comment it posted (as it reads now, after corrections).</p> | |
| <div class="tb-controls"> | |
| <input id="q" type="search" placeholder="Search title, number, model, comment…" aria-label="Search items"> | |
| <button id="clear" type="button">Show all</button> | |
| <span class="tb-filter" id="filter"></span> | |
| </div> | |
| <div class="tb-scroll"><table class="tb tb-items" id="itemtable"> | |
| <thead><tr><th data-field="key">#</th><th data-field="title">title</th><th data-field="category">category</th><th data-field="action" class="hide-sm">what we did</th><th data-field="comment" class="hide-sm">comment</th></tr></thead> | |
| <tbody></tbody> | |
| </table></div> | |
| <div class="tb-detail" id="detail" hidden> | |
| <h3 id="d-title"></h3> | |
| <div class="meta" id="d-meta"></div> | |
| <div class="cm" id="d-comment"></div> | |
| </div> | |
| </section> | |
| </div> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/7.9.0/d3.min.js"></script> | |
| <script> | |
| (async function () { | |
| const items = await (await fetch('triage_items.json')).json(); | |
| const ORDER = ['Closed issues', 'Closed PRs', 'Open issues', 'Open PRs', 'Commented (now closed by others)']; | |
| const fmt = d3.format(','); | |
| const cnt = (g) => items.filter((r) => r.group === g).length; | |
| const T = {closed_issues: cnt('Closed issues'), closed_prs: cnt('Closed PRs'), open_issues: cnt('Open issues'), open_prs: cnt('Open PRs'), start_issues: 678, start_prs: 1622}; | |
| document.querySelectorAll('[data-source="totals"]').forEach((el) => { el.classList.remove('dash-skeleton'); el.textContent = fmt(T[new URLSearchParams(el.dataset.where).get('metric')]); }); | |
| const m = new Map(); | |
| for (const r of items) { const k = r.group + '\u0000' + r.category; m.set(k, (m.get(k) || 0) + 1); } | |
| const summary = [...m].map(([k, count]) => { const [group, category] = k.split('\u0000'); return {group, category, count}; }); | |
| let sel = null, q = ''; | |
| const qEl = document.getElementById('q'), filt = document.getElementById('filter'); | |
| const fromHash = () => { const h = decodeURIComponent(location.hash.slice(1)); const i = h.indexOf('/'); if (i > 0) sel = {group: h.slice(0, i), category: h.slice(i + 1)}; }; | |
| qEl.addEventListener('input', () => { q = qEl.value.trim().toLowerCase(); drawItems(); }); | |
| document.getElementById('clear').addEventListener('click', () => { sel = null; q = ''; qEl.value = ''; history.replaceState(null, '', location.pathname); drawSummary(); drawItems(); }); | |
| function drawSummary() { | |
| const tb = document.querySelector('#sumtable tbody'); tb.textContent = ''; | |
| const max = d3.max(summary, (r) => r.count) || 1; | |
| for (const g of ORDER) { | |
| const gr = summary.filter((r) => r.group === g).sort((a, b) => b.count - a.count); | |
| if (!gr.length) continue; | |
| const h = tb.insertRow(); h.className = 'grp'; const hc = h.insertCell(); hc.colSpan = 3; hc.textContent = g + ' · ' + fmt(d3.sum(gr, (r) => r.count)); | |
| for (const r of gr) { | |
| const tr = tb.insertRow(); tr.className = 'row' + (sel && sel.group === r.group && sel.category === r.category ? ' sel' : ''); | |
| tr.insertCell().textContent = r.category; | |
| const n = tr.insertCell(); n.className = 'num'; n.textContent = fmt(r.count); | |
| const b = tr.insertCell(); const bar = document.createElement('div'); | |
| bar.className = 'bar ' + (g.startsWith('Closed') ? 'closed' : g.startsWith('Open') ? 'open' : ''); bar.style.width = (100 * r.count / max) + '%'; b.appendChild(bar); | |
| tr.addEventListener('click', () => { sel = {group: r.group, category: r.category}; history.replaceState(null, '', '#' + encodeURIComponent(r.group + '/' + r.category)); drawSummary(); drawItems(); document.getElementById('items').scrollIntoView({behavior: 'smooth', block: 'start'}); }); | |
| } | |
| } | |
| } | |
| function drawItems() { | |
| const tb = document.querySelector('#itemtable tbody'); tb.textContent = ''; | |
| let rows = items; | |
| if (sel) rows = rows.filter((r) => r.group === sel.group && r.category === sel.category); | |
| if (q) rows = rows.filter((r) => (r.key + ' ' + r.n + ' ' + r.title + ' ' + r.comment + ' ' + r.models + ' ' + r.area + ' ' + r.action).toLowerCase().includes(q)); | |
| const shown = rows.slice(0, 800); | |
| filt.textContent = (sel ? sel.group + ' › ' + sel.category + ' · ' : '') + fmt(rows.length) + ' items' + (rows.length > shown.length ? ' (first 800 shown, search to narrow)' : ''); | |
| for (const r of shown) { | |
| const tr = tb.insertRow(); tr.className = 'it'; | |
| const k = tr.insertCell(); const a = document.createElement('a'); a.href = r.url; a.target = '_blank'; a.rel = 'noopener'; a.textContent = r.key; k.appendChild(a); | |
| const t = tr.insertCell(); t.className = 'ttl'; t.textContent = r.title; | |
| const c = tr.insertCell(); const p = document.createElement('span'); p.className = 'pill'; p.textContent = r.category; c.appendChild(p); | |
| const ac = tr.insertCell(); ac.className = 'hide-sm'; ac.textContent = r.action; | |
| const cm = tr.insertCell(); cm.className = 'cm hide-sm'; cm.textContent = r.comment.length > 160 ? r.comment.slice(0, 160) + '…' : r.comment; | |
| tr.addEventListener('click', (e) => { if (e.target.tagName !== 'A') showDetail(r); }); | |
| } | |
| } | |
| function showDetail(r) { | |
| const box = document.getElementById('detail'); box.hidden = false; | |
| document.getElementById('d-title').textContent = r.key + ' · ' + r.title; | |
| const meta = document.getElementById('d-meta'); meta.textContent = ''; | |
| meta.append([r.group, r.category, r.area && ('area: ' + r.area), r.models && ('models: ' + r.models), r.author && ('@' + r.author), r.action && ('done: ' + r.action)].filter(Boolean).join(' · ') + ' · '); | |
| const a = document.createElement('a'); a.href = r.url; a.target = '_blank'; a.rel = 'noopener'; a.textContent = 'open on GitHub'; meta.append(a); | |
| document.getElementById('d-comment').textContent = r.comment || 'No comment posted by the triage.'; | |
| box.scrollIntoView({behavior: 'smooth', block: 'nearest'}); | |
| } | |
| fromHash(); drawSummary(); drawItems(); | |
| })(); | |
| </script></body></html> |