ParetoOptimal/repro-memorybench
0
1(function () {2 "use strict";3 4 let MANIFEST = null;5 const PAGE_CACHE = {};6 const UNFURL_CACHE = {};7 const LIVE_RELOAD_MS = 1500;8 const FIGURE_FRAME_WINDOWS = new Set();9 let FIGURE_NAVIGATION_READY = false;10 11 function esc(s) {12 return String(s)13 .replace(/&/g, "&")14 .replace(/</g, "<")15 .replace(/>/g, ">")16 .replace(/"/g, """)17 .replace(/'/g, "'");18 }19 20 function flattenTree(node, depth, acc) {21 acc.push({ node: node, depth: depth });22 (node.children || []).forEach((c) => flattenTree(c, depth + 1, acc));23 return acc;24 }25 26 function findNode(node, slug) {27 if (node.slug === slug) return node;28 for (const c of node.children || []) {29 const hit = findNode(c, slug);30 if (hit) return hit;31 }32 return null;33 }34 35 /* -------------------- minimal markdown -------------------- */36 37 function inline(text) {38 let t = esc(text);39 t = t.replace(/`([^`]+)`/g, (_, c) => `<code>${c}</code>`);40 t = t.replace(/\*\*([^*]+)\*\*/g, (_, c) => `<strong>${c}</strong>`);41 t = t.replace(/\[([^\]]+)\]\(([^)]+)\)/g, (_, txt, url) => {42 const safe = esc(url);43 const attrs = /^https?:/.test(url) ? ' target="_blank" rel="noopener"' : "";44 const item = /^https?:/.test(url) ? classifyResource(url) : null;45 const data = item46 ? ` class="res-link" data-res-url="${esc(item.url)}"`47 : "";48 return `<a href="${safe}"${attrs}${data}>${txt}</a>`;49 });50 t = t.replace(/(^|[\s(])(https?:\/\/[^\s<>)"'`]+)/g, (m, pre, url) => {51 let rest = "";52 const cut = url.search(/"|'|<|>/);53 if (cut !== -1) {54 rest = url.slice(cut);55 url = url.slice(0, cut);56 }57 const trailing = (url.match(/[.,;:!?`]+$/) || [""])[0];58 const clean = trailing ? url.slice(0, -trailing.length) : url;59 if (!clean) return m;60 const item = classifyResource(clean);61 if (item) return `${pre}${resChipHtml(item)}${trailing}${rest}`;62 return `${pre}<a href="${clean}" target="_blank" rel="noopener">${clean}</a>${trailing}${rest}`;63 });64 return t;65 }66 67 function resChipHtml(item) {68 return (69 `<a class="res-chip" href="${esc(item.url)}" target="_blank" ` +70 `rel="noopener" data-res-url="${esc(item.url)}">` +71 `<span class="res-chip-ico">${RESOURCE_ICONS[item.kind]}</span>` +72 `${esc(item.id)}</a>`73 );74 }75 76 const URL_ONLY = /^(https?:\/\/[^\s]+)$/;77 const DETECTED_URL =78 /(https?:\/\/[^\s<>)\]"'`]+|trackio-local-dashboard:\/\/[^\s<>)\]"'`]+|trackio-artifact:\/\/[^\s<>)\]"'`]+|trackio-local-path:\/\/[^\s<>)\]"'`]+)/g;79 80 function renderMarkdown(md, container) {81 const cellRe = /(^|\n)---\n<!-- trackio-cell\n([\s\S]*?)\n-->\n([\s\S]*?)(?=\n---\n<!-- trackio-cell\n|\s*$)/g;82 const tokens = [];83 let pos = 0;84 let found = false;85 let match;86 while ((match = cellRe.exec(md))) {87 found = true;88 tokens.push({89 kind: "md",90 text: md.slice(pos, match.index + match[1].length),91 });92 tokens.push({93 kind: "cell",94 meta: parseCellMeta(match[2]),95 body: match[3],96 });97 pos = match.index + match[0].length;98 }99 tokens.push({ kind: "md", text: found ? md.slice(pos) : md });100 101 for (let i = 0; i < tokens.length; i++) {102 const t = tokens[i];103 if (t.kind === "md") {104 renderMarkdownPlain(t.text, container);105 continue;106 }107 if (t.consumed) continue;108 if (t.meta.type === "code") {109 const arts = [];110 for (let j = i + 1; j < tokens.length; j++) {111 const n = tokens[j];112 if (n.kind === "md") {113 if (n.text.trim() === "") continue;114 break;115 }116 if (n.meta.type === "artifact") {117 arts.push(n);118 n.consumed = true;119 continue;120 }121 break;122 }123 renderCell(t.meta, t.body, container, arts);124 } else {125 renderCell(t.meta, t.body, container);126 }127 }128 }129 130 function parseCellMeta(raw) {131 try {132 return JSON.parse(raw);133 } catch (e) {134 return { type: "markdown", title: "Note" };135 }136 }137 138 function renderMarkdownPlain(md, container) {139 const lines = md.replace(/<!--[\s\S]*?-->/g, "").split("\n");140 let i = 0;141 let para = [];142 143 function flushPara() {144 if (!para.length) return;145 const joined = para.join(" ").trim();146 para = [];147 if (!joined) return;148 if (/^trackio-artifact:\/\/\S+$/.test(joined)) return;149 if (/^trackio-local-path:\/\/\S+$/.test(joined)) return;150 if (joined.indexOf("📦 Artifact") !== -1) {151 const div = document.createElement("div");152 div.className = "artifact-chip";153 div.innerHTML = ARTIFACT_ICON_IMG + inline(joined.replace(/📦\s*/, ""));154 container.appendChild(div);155 return;156 }157 if (URL_ONLY.test(joined) || IMG_PATH.test(joined)) {158 const el = renderStandaloneUrl(joined);159 if (el) container.appendChild(el);160 return;161 }162 const p = document.createElement("p");163 p.innerHTML = inline(joined);164 container.appendChild(p);165 }166 167 while (i < lines.length) {168 const line = lines[i];169 const trimmed = line.trim();170 171 if (trimmed === "") {172 flushPara();173 i++;174 continue;175 }176 const fence = trimmed.match(/^(`{3,}|~{3,})(.*)$/);177 if (fence) {178 flushPara();179 const marker = fence[1][0];180 const closeRe = new RegExp("^" + marker + "{" + fence[1].length + ",}\\s*$");181 const info = fence[2].trim();182 const buf = [];183 i++;184 while (i < lines.length && !closeRe.test(lines[i].trim())) {185 buf.push(lines[i]);186 i++;187 }188 i++;189 const lang = (info.split(/\s+/)[0] || "").toLowerCase();190 const tm = info.match(/title=(\S+)/);191 container.appendChild(192 renderCode(buf.join("\n"), lang, tm ? tm[1] : null)193 );194 continue;195 }196 if (trimmed === "---") {197 flushPara();198 container.appendChild(document.createElement("hr"));199 i++;200 continue;201 }202 const h = trimmed.match(/^(#{1,4})\s+(.*)$/);203 if (h) {204 flushPara();205 const el = document.createElement("h" + h[1].length);206 el.innerHTML = inline(h[2]);207 container.appendChild(el);208 i++;209 continue;210 }211 if (212 trimmed.startsWith("|") &&213 i + 1 < lines.length &&214 /^\|?[\s:|-]*-{2,}[\s:|-]*\|?$/.test(lines[i + 1].trim())215 ) {216 flushPara();217 const rows = [];218 while (i < lines.length && lines[i].trim().startsWith("|")) {219 rows.push(parseRow(lines[i].trim()));220 i++;221 }222 renderTable(rows, container);223 continue;224 }225 if (trimmed.startsWith("> ")) {226 flushPara();227 const bq = document.createElement("blockquote");228 bq.innerHTML = inline(trimmed.slice(2));229 container.appendChild(bq);230 i++;231 continue;232 }233 if (/^`[^`]+`$/.test(trimmed)) {234 flushPara();235 const el = document.createElement("div");236 el.className = "ts";237 el.textContent = trimmed.replace(/`/g, "");238 container.appendChild(el);239 i++;240 continue;241 }242 if (trimmed.startsWith("- ")) {243 flushPara();244 const items = [];245 while (i < lines.length && lines[i].trim().startsWith("- ")) {246 items.push(lines[i].trim().slice(2).trim());247 i++;248 }249 renderList(items, container);250 continue;251 }252 para.push(trimmed);253 i++;254 }255 flushPara();256 }257 258 function renderCell(meta, body, container, artifacts) {259 const cell = document.createElement("section");260 cell.className = `cell ${meta.type || "markdown"}`;261 if (meta.id) cell.dataset.cellId = meta.id;262 if (isPinned(meta)) cell.classList.add("pinned-source");263 264 const head = document.createElement("div");265 head.className = "cell-head";266 const rawTitle = (meta.title || "").trim();267 const title = rawTitle && rawTitle.toLowerCase() !== "untitled" ? esc(rawTitle) : "";268 const when = meta.created_at ? `<span>${esc(formatTime(meta.created_at))}</span>` : "";269 head.innerHTML =270 (title ? `<div class="cell-title">${title}</div>` : "") +271 `<div class="cell-meta">${when}</div>`;272 if (!title) head.classList.add("no-title");273 cell.appendChild(head);274 275 const bodyEl = document.createElement("div");276 bodyEl.className = "cell-body";277 if (meta.type === "code") {278 renderCodeCell(body, bodyEl, artifacts);279 } else if (meta.type === "figure") {280 cell.dataset.resUrl = `trackio-figure://${(meta.title || "Figure").trim()}`;281 renderFigureCell(body, bodyEl, head);282 } else if (meta.type === "artifact") {283 renderMarkdownPlain(body, bodyEl);284 const chip = bodyEl.querySelector(".artifact-chip");285 const uri = body.match(286 /(trackio-artifact:\/\/\S+|trackio-local-path:\/\/\S+|https:\/\/huggingface\.co\/buckets\/[^\s<)]+#\S+)/287 );288 if (chip && uri) chip.dataset.resUrl = uri[1];289 } else if (meta.type === "dashboard") {290 const sp = body.match(/https:\/\/huggingface\.co\/spaces\/[^\s<>)"'`]+/);291 cell.dataset.resUrl = sp292 ? sp[0]293 : `trackio-local-dashboard://${(meta.dashboard_project || "").trim()}`;294 renderDashboardCell(meta, body, bodyEl, head);295 } else {296 const cleaned = stripDuplicateTitle(body, meta.title);297 renderMarkdownPlain(cleaned, bodyEl);298 renderDetectedEmbeds(cleaned, bodyEl);299 }300 cell.appendChild(bodyEl);301 container.appendChild(cell);302 return cell;303 }304 305 function isPinned(meta) {306 return Boolean(meta && (meta.pinned === true || meta.pinned === "true"));307 }308 309 function stripDuplicateTitle(body, title) {310 if (!title) return body;311 const m = body.match(/^\s*#{1,6}\s+([^\n]+)\n?/);312 if (!m) return body;313 const norm = (s) =>314 s315 .toLowerCase()316 .replace(/[*_`#]/g, "")317 .replace(/\s+/g, " ")318 .trim();319 return norm(m[1]) === norm(title) ? body.slice(m[0].length) : body;320 }321 322 function formatTime(iso) {323 const d = new Date(iso);324 if (Number.isNaN(d.getTime())) return iso;325 return d.toLocaleString(undefined, {326 month: "short",327 day: "numeric",328 hour: "2-digit",329 minute: "2-digit",330 });331 }332 333 function parseFences(text) {334 const fenceRe = /(`{3,4}|~{3,4})([^\n]*)\n([\s\S]*?)\n\1/g;335 const parts = [];336 let pos = 0;337 let match;338 while ((match = fenceRe.exec(text))) {339 if (match.index > pos) {340 parts.push({ kind: "text", text: text.slice(pos, match.index) });341 }342 const info = match[2].trim();343 const lang = (info.split(/\s+/)[0] || "").toLowerCase();344 const titleMatch = info.match(/title=(\S+)/);345 parts.push({346 kind: lang === "result" || lang === "output" ? "output" : "code",347 lang,348 title: titleMatch ? titleMatch[1] : null,349 text: match[3],350 });351 pos = match.index + match[0].length;352 }353 if (pos < text.length) parts.push({ kind: "text", text: text.slice(pos) });354 return parts;355 }356 357 function fitFigureFrame(frame, wrap) {358 let doc;359 try {360 doc = frame.contentDocument;361 } catch (e) {362 return;363 }364 if (!doc || !doc.body) return;365 frame.style.transform = "none";366 frame.style.width = "100%";367 frame.style.height = "auto";368 frame.style.position = "";369 frame.style.left = "";370 frame.style.top = "";371 const avail = wrap.clientWidth;372 const isFullscreen =373 document.fullscreenElement === wrap ||374 document.webkitFullscreenElement === wrap;375 const availHeight = isFullscreen ? wrap.clientHeight : Infinity;376 const cw = Math.max(doc.body.scrollWidth, doc.documentElement.scrollWidth, 1);377 const ch = Math.max(doc.body.scrollHeight, doc.documentElement.scrollHeight, 1);378 const scale = Math.min(avail / cw, availHeight / ch);379 if (avail && scale < 1 - 1e-3) {380 frame.style.width = `${cw}px`;381 frame.style.height = `${ch}px`;382 frame.style.transformOrigin = "top left";383 frame.style.transform = `scale(${scale})`;384 if (isFullscreen) {385 frame.style.position = "absolute";386 frame.style.left = `${Math.max(0, (avail - cw * scale) / 2)}px`;387 frame.style.top = `${Math.max(0, (availHeight - ch * scale) / 2)}px`;388 wrap.style.height = "100%";389 } else {390 wrap.style.height = `${Math.ceil(ch * scale)}px`;391 }392 } else {393 frame.style.width = "100%";394 frame.style.height = `${ch}px`;395 wrap.style.height = isFullscreen ? "100%" : `${ch}px`;396 }397 }398 399 function attachFigureFit(frame, wrap) {400 const refit = () => fitFigureFrame(frame, wrap);401 frame.addEventListener("load", refit);402 if (window.ResizeObserver) {403 const ro = new ResizeObserver(() => refit());404 ro.observe(wrap);405 }406 }407 408 function renderFigureCell(text, container, head) {409 const parts = parseFences(text);410 const htmlPart = parts.find((part) => part.lang === "html");411 const rawPart = parts.find((part) => part.lang === "raw");412 if (!htmlPart || !htmlPart.text.trim()) {413 const empty = document.createElement("p");414 empty.className = "muted";415 empty.textContent = "No figure HTML.";416 container.appendChild(empty);417 return;418 }419 const frame = document.createElement("iframe");420 frame.className = "figure-frame";421 frame.sandbox = "allow-scripts allow-same-origin";422 frame.loading = "lazy";423 frame.srcdoc = htmlPart.text;424 registerFigureNavigation(frame);425 const figWrap = document.createElement("div");426 figWrap.className = "figure-fit";427 figWrap.appendChild(frame);428 attachFigureFit(frame, figWrap);429 if (head) {430 const metaEl = head.querySelector(".cell-meta");431 if (metaEl)432 metaEl.insertBefore(buildFullscreenControl(figWrap, frame), metaEl.firstChild);433 }434 if (!rawPart || !rawPart.text.trim()) {435 container.appendChild(figWrap);436 return;437 }438 const sw = document.createElement("div");439 sw.className = "fig-switch";440 const thumb = document.createElement("span");441 thumb.className = "fig-switch-thumb";442 const figBtn = document.createElement("button");443 figBtn.type = "button";444 figBtn.className = "active";445 figBtn.textContent = "Figure";446 const rawBtn = document.createElement("button");447 rawBtn.type = "button";448 rawBtn.textContent = "Raw";449 sw.appendChild(thumb);450 sw.appendChild(figBtn);451 sw.appendChild(rawBtn);452 const rawView = document.createElement("div");453 rawView.className = "figure-raw";454 rawView.hidden = true;455 const pre = document.createElement("pre");456 const code = document.createElement("code");457 code.textContent = rawPart.text;458 pre.appendChild(code);459 rawView.appendChild(pre);460 rawView.appendChild(copySnippetBtn(rawPart.text));461 const select = (showRaw) => {462 sw.classList.toggle("raw", showRaw);463 figBtn.classList.toggle("active", !showRaw);464 rawBtn.classList.toggle("active", showRaw);465 figWrap.hidden = showRaw;466 rawView.hidden = !showRaw;467 };468 figBtn.addEventListener("click", () => select(false));469 rawBtn.addEventListener("click", () => select(true));470 if (head) {471 head.insertBefore(sw, head.querySelector(".cell-meta"));472 } else {473 container.appendChild(sw);474 }475 container.appendChild(figWrap);476 container.appendChild(rawView);477 }478 479 // Poster embeds can send `{ type: "trackio-logbook:navigate", target: "..." }`480 // from their iframe. Only accept messages from figure frames we created, and481 // only route to pages that are present in this logbook's manifest.482 function registerFigureNavigation(frame) {483 const registerFrameWindow = () => {484 if (frame.contentWindow) FIGURE_FRAME_WINDOWS.add(frame.contentWindow);485 };486 // `srcdoc` replaces the initial about:blank document. Register after that487 // navigation as well, so messages come from the live figure document.488 frame.addEventListener("load", registerFrameWindow);489 registerFrameWindow();490 if (FIGURE_NAVIGATION_READY) return;491 FIGURE_NAVIGATION_READY = true;492 window.addEventListener("message", (event) => {493 if (!FIGURE_FRAME_WINDOWS.has(event.source)) return;494 const message = event.data;495 if (!message || message.type !== "trackio-logbook:navigate") return;496 const target = String(message.target || "").replace(/^#?\//, "");497 if (!target || !MANIFEST || !findNode(MANIFEST.root, target)) return;498 const hash = "#/" + target;499 if (location.hash === hash) scrollToHash();500 else location.hash = hash;501 });502 }503 504 const FULLSCREEN_ICON =505 '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" ' +506 'stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">' +507 '<path d="M8 3H3v5M16 3h5v5M21 16v5h-5M3 16v5h5"/>' +508 '<path d="M3 8 8 3M16 3l5 5M21 16l-5 5M8 21l-5-5"/></svg>';509 510 // Figures are rendered in same-origin iframes, so fullscreen the fitted511 // wrapper rather than the iframe document. This uses the browser's native512 // fullscreen UI and preserves the figure's existing responsive sizing.513 function buildFullscreenControl(figWrap, frame) {514 const wrap = document.createElement("span");515 wrap.className = "cell-fullscreen";516 const btn = document.createElement("button");517 btn.type = "button";518 btn.className = "cell-fullscreen-btn";519 btn.setAttribute("aria-label", "Open figure in fullscreen");520 btn.title = "Open figure in fullscreen";521 btn.innerHTML = FULLSCREEN_ICON;522 wrap.appendChild(btn);523 524 btn.addEventListener("click", async () => {525 const request = figWrap.requestFullscreen || figWrap.webkitRequestFullscreen;526 if (!request) return;527 try {528 await request.call(figWrap);529 } catch (_) {530 // Fullscreen can be disabled by the embedding browser or policy.531 }532 });533 document.addEventListener("fullscreenchange", () => {534 if (document.fullscreenElement === figWrap) fitFigureFrame(frame, figWrap);535 });536 return wrap;537 }538 539 function extractUrls(text) {540 const seen = new Set();541 const urls = [];542 let match;543 while ((match = DETECTED_URL.exec(text))) {544 const url = match[1].replace(/[.,;:!?'"`]+$/, "");545 if (!seen.has(url)) {546 seen.add(url);547 urls.push(url);548 }549 }550 DETECTED_URL.lastIndex = 0;551 return urls;552 }553 554 const IMG_URL = /(\.(png|jpe?g|gif|svg|webp)(\?|$)|\/artifact_blob\/)/i;555 556 function renderDetectedEmbeds(text, container) {557 extractUrls(text).forEach((url) => {558 if (url.startsWith("trackio-local-dashboard://")) {559 const div = document.createElement("div");560 div.className = "artifact-chip";561 div.dataset.resUrl = url;562 div.innerHTML =563 "🎯 <strong>Local Trackio dashboard</strong> — publish the logbook to share it";564 container.appendChild(div);565 } else if (IMG_URL.test(url)) {566 container.appendChild(renderImage(url));567 } else if (/huggingface\.co\/spaces\//.test(url)) {568 maybeEmbedTrackioSpace(url, container);569 }570 });571 }572 573 function renderStandaloneUrl(url) {574 if (IMG_URL.test(url) || IMG_PATH.test(url)) return renderImage(url);575 const item = classifyResource(url);576 if (item) {577 const marker = document.createElement("span");578 marker.className = "resource-anchor";579 marker.dataset.resUrl = item.url;580 marker.setAttribute("aria-hidden", "true");581 return marker;582 }583 const p = document.createElement("p");584 p.innerHTML = inline(url);585 return p;586 }587 588 function renderImage(url) {589 const a = document.createElement("a");590 a.className = "unfurl image";591 a.href = url;592 a.target = "_blank";593 a.rel = "noopener";594 const img = document.createElement("img");595 img.loading = "lazy";596 img.src = url;597 img.alt = "artifact image";598 a.appendChild(img);599 return a;600 }601 602 function maybeEmbedTrackioSpace(url, container) {603 const id = url.split("/spaces/")[1].split(/[?#]/)[0].replace(/\/$/, "");604 const holder = document.createElement("div");605 container.appendChild(holder);606 getJSON(`https://huggingface.co/api/spaces/${id}`).then((d) => {607 const tags = (d && d.tags) || [];608 if (tags.some((t) => String(t).toLowerCase() === "trackio")) {609 renderTrackioSpaceEmbed(holder, url, id);610 } else {611 holder.remove();612 }613 });614 }615 616 function jpGutter(label) {617 const g = document.createElement("div");618 g.className = "jp-gutter";619 g.textContent = label;620 return g;621 }622 623 function renderOutArtifact(info) {624 const remote = !info.local && !!info.url;625 const el = document.createElement(remote ? "a" : "div");626 el.className = "out-artifact";627 if (remote) {628 el.href = info.url;629 el.target = "_blank";630 el.rel = "noopener";631 }632 el.dataset.resUrl = info.resUrl;633 const parts = [info.type, info.size].filter(Boolean).map(esc);634 const state = remote635 ? `<span class="out-artifact-state open">Open ↗</span>`636 : `<span class="out-artifact-state">publish to share</span>`;637 const meta = parts.length ? `${parts.join(" · ")} · ${state}` : state;638 el.innerHTML =639 `<span class="out-artifact-ico">${ARTIFACT_ICON_IMG}</span>` +640 `<span class="out-artifact-name">${esc(info.name)}</span>` +641 `<span class="out-artifact-meta">${meta}</span>`;642 return el;643 }644 645 function renderCodeCell(body, container, artifacts) {646 const parts = parseFences(body);647 const block = document.createElement("div");648 block.className = "jp";649 const input = document.createElement("div");650 input.className = "jp-in";651 const inputBody = document.createElement("div");652 inputBody.className = "jp-in-body";653 input.appendChild(jpGutter("In"));654 input.appendChild(inputBody);655 let metaEl = null;656 let outputEl = null;657 let outBody = null;658 const ensureOut = () => {659 if (outputEl) return;660 outputEl = document.createElement("div");661 outputEl.className = "jp-out";662 outputEl.appendChild(jpGutter("Out"));663 outBody = document.createElement("div");664 outBody.className = "jp-out-body";665 outputEl.appendChild(outBody);666 };667 const embedTexts = [];668 parts.forEach((part) => {669 if (part.kind === "text") {670 const text = part.text.trim();671 if (!text) return;672 if (/^exit\s+\S+(\s|·)/.test(text)) {673 metaEl = document.createElement("div");674 metaEl.className = "jp-meta";675 metaEl.textContent = text.replace(676 /\s*·\s*[A-Z][a-z]{2} \d{1,2}, \d{4}.*$/,677 ""678 );679 } else {680 renderMarkdownPlain(text, container);681 embedTexts.push(text);682 }683 return;684 }685 if (part.kind === "output") {686 ensureOut();687 const pre = document.createElement("pre");688 pre.className = "jp-out-pre";689 const c = document.createElement("code");690 c.textContent = part.text;691 pre.appendChild(c);692 outBody.appendChild(pre);693 outputEl.appendChild(copySnippetBtn(part.text));694 embedTexts.push(part.text);695 return;696 }697 inputBody.appendChild(renderCode(part.text, part.lang, part.title));698 });699 if (artifacts && artifacts.length) {700 ensureOut();701 const artWrap = document.createElement("div");702 artWrap.className = "jp-artifacts";703 artifacts.forEach((a) => {704 artWrap.appendChild(705 renderOutArtifact(artifactInfoFromCell(a.meta, a.body))706 );707 });708 outBody.appendChild(artWrap);709 }710 if (inputBody.childNodes.length > 0) block.appendChild(input);711 if (metaEl) block.appendChild(metaEl);712 if (outputEl) block.appendChild(outputEl);713 if (block.childNodes.length) container.appendChild(block);714 embedTexts.forEach((text) => renderDetectedEmbeds(text, container));715 }716 717 function parseRow(line) {718 let s = line.trim();719 if (s.startsWith("|")) s = s.slice(1);720 if (s.endsWith("|")) s = s.slice(0, -1);721 return s.split(/(?<!\\)\|/).map((c) => c.replace(/\\\|/g, "|").trim());722 }723 724 const TRUTHY = ["x", "✓", "✔", "yes", "done", "true", "[x]"];725 const CHIP_COLORS = [726 ["#e7f0ff", "#2158d0"],727 ["#fde8ec", "#c62a4b"],728 ["#e6f7ee", "#1a8a55"],729 ["#fdf0e0", "#b26a12"],730 ["#efe9ff", "#5b3bd6"],731 ["#e6f6f8", "#127b88"],732 ];733 734 function chipColor(name) {735 let h = 0;736 for (let i = 0; i < name.length; i++) h = (h * 31 + name.charCodeAt(i)) >>> 0;737 return CHIP_COLORS[h % CHIP_COLORS.length];738 }739 740 const STATUS_MAP = {741 "": ["Planned", "gray"],742 planned: ["Planned", "gray"],743 todo: ["Planned", "gray"],744 "to do": ["Planned", "gray"],745 backlog: ["Planned", "gray"],746 "in progress": ["In progress", "amber"],747 "in-progress": ["In progress", "amber"],748 wip: ["In progress", "amber"],749 running: ["In progress", "amber"],750 active: ["In progress", "amber"],751 done: ["Done", "green"],752 complete: ["Done", "green"],753 completed: ["Done", "green"],754 blocked: ["Blocked", "red"],755 failed: ["Failed", "red"],756 abandoned: ["Abandoned", "gray"],757 };758 759 function statusBadge(val) {760 const [label, tone] = STATUS_MAP[val.toLowerCase()] || [val || "—", "gray"];761 return `<span class="badge ${tone}">${esc(label)}</span>`;762 }763 764 function renderTable(rows, container) {765 if (rows.length < 2) return;766 const header = rows[0];767 const body = rows.slice(2);768 const roles = header.map((h) => {769 const t = h.toLowerCase();770 if (t.includes("status") || t.includes("state")) return "status";771 if (t.includes("progress") || t.includes("complete") || t.includes("done"))772 return "check";773 if (t === "who" || t.includes("assign") || t.includes("owner")) return "who";774 return "text";775 });776 const table = document.createElement("table");777 table.className = "board";778 const thead = document.createElement("thead");779 const htr = document.createElement("tr");780 header.forEach((h, c) => {781 const th = document.createElement("th");782 th.textContent = h;783 if (roles[c] === "check") th.className = "col-check";784 htr.appendChild(th);785 });786 thead.appendChild(htr);787 table.appendChild(thead);788 const tbody = document.createElement("tbody");789 body.forEach((cells) => {790 const nonEmpty = cells.filter((x) => x !== "").length;791 if (header.length > 1 && nonEmpty === 1 && cells[0]) {792 const tr = document.createElement("tr");793 tr.className = "section-row";794 const td = document.createElement("td");795 td.colSpan = header.length;796 td.innerHTML = inline(cells[0]);797 tr.appendChild(td);798 tbody.appendChild(tr);799 return;800 }801 const tr = document.createElement("tr");802 header.forEach((_, c) => {803 const td = document.createElement("td");804 const val = (cells[c] || "").trim();805 if (roles[c] === "status") {806 td.className = "col-status";807 td.innerHTML = statusBadge(val);808 } else if (roles[c] === "check") {809 td.className = "col-check";810 const on = TRUTHY.indexOf(val.toLowerCase()) !== -1;811 td.innerHTML = `<span class="box ${on ? "on" : ""}">${on ? "✓" : ""}</span>`;812 } else if (roles[c] === "who") {813 if (!val || /^to assign$/i.test(val)) {814 td.innerHTML = `<span class="who-chip muted">${esc(val || "—")}</span>`;815 } else {816 const [bg, fg] = chipColor(val);817 td.innerHTML = `<span class="who-chip" style="background:${bg};color:${fg}">${esc(val)}</span>`;818 }819 } else {820 td.innerHTML = inline(val);821 }822 tr.appendChild(td);823 });824 const link = tr.querySelector('a[href^="#/"]');825 if (link) {826 tr.classList.add("linked-row");827 tr.addEventListener("click", (e) => {828 if (e.target.tagName !== "A") location.hash = link.getAttribute("href");829 });830 }831 tbody.appendChild(tr);832 });833 table.appendChild(tbody);834 const wrap = document.createElement("div");835 wrap.className = "board-wrap";836 wrap.appendChild(table);837 container.appendChild(wrap);838 }839 840 const HL_RULES = {841 python: [842 ["comment", /#[^\n]*/],843 ["string", /'''[\s\S]*?'''|"""[\s\S]*?"""|'(?:\\.|[^'\\])*'|"(?:\\.|[^"\\])*"/],844 [845 "keyword",846 /\b(?:def|class|return|if|elif|else|for|while|import|from|as|with|try|except|finally|raise|in|not|and|or|is|None|True|False|lambda|yield|global|nonlocal|assert|pass|break|continue|async|await|print)\b/,847 ],848 ["number", /\b\d[\d_.eE+-]*\b/],849 ],850 bash: [851 ["comment", /#[^\n]*/],852 ["string", /'(?:\\.|[^'\\])*'|"(?:\\.|[^"\\])*"/],853 ["keyword", /\b(?:if|then|else|fi|for|in|do|done|while|case|esac|function|export|source|echo|cd|return|local)\b/],854 ["number", /(?<=\s)-{1,2}[a-zA-Z][\w-]*/],855 ],856 json: [857 ["string", /"(?:\\.|[^"\\])*"/],858 ["keyword", /\b(?:true|false|null)\b/],859 ["number", /-?\b\d[\d.eE+-]*\b/],860 ],861 yaml: [862 ["comment", /#[^\n]*/],863 ["string", /'(?:\\.|[^'\\])*'|"(?:\\.|[^"\\])*"/],864 ["keyword", /\b(?:true|false|null|yes|no)\b/],865 ["number", /-?\b\d[\d.eE+-]*\b/],866 ],867 };868 HL_RULES.javascript = HL_RULES.python;869 HL_RULES.typescript = HL_RULES.python;870 HL_RULES.sql = [871 ["comment", /--[^\n]*/],872 ["string", /'(?:\\.|[^'\\])*'/],873 [874 "keyword",875 /\b(?:SELECT|FROM|WHERE|JOIN|LEFT|RIGHT|INNER|OUTER|ON|GROUP|BY|ORDER|LIMIT|INSERT|INTO|VALUES|UPDATE|SET|DELETE|CREATE|TABLE|AS|AND|OR|NOT|NULL|COUNT|DISTINCT|IN)\b/i,876 ],877 ["number", /\b\d[\d.]*\b/],878 ];879 880 function highlightCode(code, lang) {881 const rules = HL_RULES[lang];882 if (!rules) return esc(code);883 const combined = new RegExp(rules.map((r) => "(" + r[1].source + ")").join("|"), "g");884 let out = "";885 let last = 0;886 let m;887 while ((m = combined.exec(code))) {888 if (m[0] === "") {889 combined.lastIndex++;890 continue;891 }892 out += esc(code.slice(last, m.index));893 let gi = 1;894 while (gi < m.length && m[gi] === undefined) gi++;895 out += `<span class="tok-${rules[gi - 1][0]}">${esc(m[0])}</span>`;896 last = m.index + m[0].length;897 }898 out += esc(code.slice(last));899 return out;900 }901 902 function copySnippetBtn(text) {903 const btn = document.createElement("button");904 btn.type = "button";905 btn.className = "copy-snippet";906 btn.title = "Copy";907 btn.textContent = "⧉";908 btn.addEventListener("click", (e) => {909 e.preventDefault();910 e.stopPropagation();911 copyText(text, btn, "⧉");912 });913 return btn;914 }915 916 function renderCode(code, lang, title) {917 const pre = document.createElement("pre");918 pre.className = "hl";919 const c = document.createElement("code");920 c.innerHTML = highlightCode(code, lang);921 pre.appendChild(c);922 if (!title) {923 const wrap = document.createElement("div");924 wrap.className = "snippet";925 wrap.appendChild(pre);926 wrap.appendChild(copySnippetBtn(code));927 return wrap;928 }929 const det = document.createElement("details");930 det.className = "code-accordion";931 det.dataset.resUrl = `trackio-script://${title}`;932 const sum = document.createElement("summary");933 sum.innerHTML =934 `<span class="code-ico"></></span>` +935 `<span class="code-name">${esc(title)}</span>`;936 sum937 .querySelector(".code-name")938 .addEventListener("click", (e) => e.preventDefault());939 det.appendChild(sum);940 const wrap = document.createElement("div");941 wrap.className = "snippet";942 wrap.appendChild(pre);943 wrap.appendChild(copySnippetBtn(code));944 det.appendChild(wrap);945 return det;946 }947 948 const IMG_PATH = /^[^\s]+\.(png|jpe?g|gif|svg|webp)$/i;949 950 function renderList(items, container) {951 let ul = null;952 items.forEach((item) => {953 if (URL_ONLY.test(item) || IMG_PATH.test(item)) {954 const el = renderStandaloneUrl(item);955 if (el) {956 ul = null;957 container.appendChild(el);958 }959 } else if (item.indexOf("📦 Artifact") !== -1) {960 ul = null;961 const div = document.createElement("div");962 div.className = "artifact-chip";963 div.innerHTML = inline(item.replace("📦", "🪣"));964 container.appendChild(div);965 } else if (item.indexOf("trackio-local-dashboard://") !== -1) {966 ul = null;967 const uri = item.match(/trackio-local-dashboard:\/\/\S+/)?.[0] || "";968 const div = document.createElement("div");969 div.className = "artifact-chip";970 if (uri) div.dataset.resUrl = uri;971 div.innerHTML =972 "🎯 <strong>Local dashboard</strong> — publish the logbook to share it";973 container.appendChild(div);974 } else {975 if (!ul) {976 ul = document.createElement("ul");977 container.appendChild(ul);978 }979 const li = document.createElement("li");980 li.innerHTML = inline(item);981 ul.appendChild(li);982 }983 });984 }985 986 /* -------------------- resources rail -------------------- */987 988 function fmt(n) {989 if (n == null) return null;990 if (n >= 1e6) return (n / 1e6).toFixed(1) + "M";991 if (n >= 1e3) return (n / 1e3).toFixed(1) + "k";992 return String(n);993 }994 995 const RESOURCE_SECTIONS = [996 ["dashboard", "Dashboards", "🎯"],997 ["model", "Models", "🤗"],998 ["dataset", "Datasets", "📊"],999 ["space", "Spaces", "🚀"],1000 ["artifact", "Artifacts", "🪣"],1001 ["paper", "Papers", "📄"],1002 ["repo", "Code", "🐙"],1003 ["job", "Jobs", "⚙️"],1004 ["bucket", "Buckets", "🪣"],1005 ];1006 1007 const RESOURCE_ICONS = Object.fromEntries(1008 RESOURCE_SECTIONS.map(([kind, , icon]) => [kind, icon])1009 );1010 1011 const ARTIFACT_ICON_IMG = `<img class="art-ico" src="./bucket-icon.svg" alt="" />`;1012 const DASHBOARD_ICON_IMG = `<img class="art-ico" src="./trackio-logo-light.png" alt="" />`;1013 1014 const RESOURCE_DESC = {1015 dashboard: "Dashboard",1016 model: "Model",1017 dataset: "Dataset",1018 space: "Space",1019 artifact: "Artifact — in Bucket",1020 paper: "Paper",1021 repo: "Repository",1022 job: "Job — status & logs",1023 bucket: "Bucket — artifacts & data",1024 };1025 1026 const HF_NON_MODEL_PREFIX =1027 /^(datasets|spaces|jobs|buckets|papers|blog|docs|api|posts|collections|organizations|settings|new|join|login|pricing|tasks|learn|chat|models)(\/|$)/;1028 1029 function hfId(url, marker) {1030 return url.split(marker)[1].split(/[?#]/)[0].replace(/\/$/, "");1031 }1032 1033 function classifyResource(url) {1034 if (IMG_URL.test(url)) {1035 return null;1036 }1037 let m;1038 if (url.startsWith("trackio-local-dashboard://")) {1039 return {1040 kind: "dashboard",1041 id: url.slice("trackio-local-dashboard://".length),1042 url,1043 local: true,1044 };1045 }1046 if (url.startsWith("trackio-artifact://")) {1047 return {1048 kind: "artifact",1049 id: url.slice("trackio-artifact://".length),1050 url,1051 local: true,1052 };1053 }1054 if (url.startsWith("trackio-local-path://")) {1055 return {1056 kind: "artifact",1057 id: url.slice("trackio-local-path://".length),1058 url,1059 local: true,1060 };1061 }1062 if ((m = url.match(/huggingface\.co\/buckets\/[^#\s]+#(.+)/))) {1063 return { kind: "artifact", id: decodeURIComponent(m[1]), url };1064 }1065 if (/huggingface\.co\/datasets\/[^/]+\/[^/]+/.test(url)) {1066 return { kind: "dataset", id: hfId(url, "/datasets/"), url };1067 }1068 if (/huggingface\.co\/spaces\/[^/]+\/[^/]+/.test(url)) {1069 return { kind: "space", id: hfId(url, "/spaces/"), url };1070 }1071 if (/huggingface\.co\/jobs\//.test(url)) {1072 const parts = hfId(url, "/jobs/").split("/");1073 const jid = parts[1] || "";1074 return {1075 kind: "job",1076 id: parts[0] + (jid ? ` · ${jid.slice(0, 12)}${jid.length > 12 ? "…" : ""}` : ""),1077 url,1078 };1079 }1080 if (/huggingface\.co\/buckets\//.test(url)) {1081 return { kind: "bucket", id: hfId(url, "/buckets/"), url };1082 }1083 if (/huggingface\.co\/papers\//.test(url)) {1084 return { kind: "paper", id: `Paper ${hfId(url, "/papers/")}`, url };1085 }1086 if ((m = url.match(/arxiv\.org\/(?:abs|pdf)\/([^?#\s]+)/))) {1087 return { kind: "paper", id: `arXiv:${m[1].replace(/\.pdf$/, "")}`, url };1088 }1089 if ((m = url.match(/github\.com\/([^/?#]+\/[^/?#]+)/))) {1090 return { kind: "repo", id: m[1], url };1091 }1092 if ((m = url.match(/huggingface\.co\/([^?#]+)/))) {1093 const rest = m[1].replace(/\/$/, "");1094 if (/^[^/]+\/[^/]+$/.test(rest) && !HF_NON_MODEL_PREFIX.test(rest)) {1095 return { kind: "model", id: rest, url };1096 }1097 }1098 return null;1099 }1100 1101 async function fillRailMeta(item, el) {1102 if (item.local) return;1103 const meta = el.querySelector(".rail-meta");1104 const set = (parts) => {1105 const text = parts.filter(Boolean).join(" · ");1106 if (text) meta.textContent = text;1107 };1108 if (item.kind === "model") {1109 const d = await getJSON(`https://huggingface.co/api/models/${item.id}`);1110 if (d) set([d.pipeline_tag, `↓ ${fmt(d.downloads)}`, `♥ ${fmt(d.likes)}`]);1111 } else if (item.kind === "dataset") {1112 const d = await getJSON(`https://huggingface.co/api/datasets/${item.id}`);1113 if (d) set([`↓ ${fmt(d.downloads)}`, `♥ ${fmt(d.likes)}`]);1114 } else if (item.kind === "space" || item.kind === "dashboard") {1115 const d = await getJSON(`https://huggingface.co/api/spaces/${item.id}`);1116 if (d) set([d.sdk, `♥ ${fmt(d.likes)}`]);1117 } else if (item.kind === "repo") {1118 const d = await getJSON(`https://api.github.com/repos/${item.id}`);1119 if (d) set([`★ ${fmt(d.stargazers_count)}`, d.language]);1120 } else if (item.kind === "paper") {1121 const m = item.id.match(/^(?:arXiv:|Paper )(.+)$/);1122 if (!m) return;1123 const arxivId = m[1].replace(/v\d+$/, "");1124 const d = await getJSON(`https://huggingface.co/api/papers/${arxivId}`);1125 if (d && d.id) {1126 if (el.href) el.href = `https://huggingface.co/papers/${d.id}`;1127 const title =1128 d.title && d.title.length > 70 ? `${d.title.slice(0, 69)}…` : d.title;1129 set([title, d.upvotes ? `▲ ${fmt(d.upvotes)}` : null]);1130 }1131 }1132 }1133 1134 const BARE_ID_SKIP_DIRS = new Set([1135 "scripts",1136 "configs",1137 "config",1138 "results",1139 "figures",1140 "data",1141 "datasets",1142 "src",1143 "tests",1144 "test",1145 "examples",1146 "pages",1147 "assets",1148 "docs",1149 "outputs",1150 "output",1151 "checkpoints",1152 "models",1153 "utils",1154 "lib",1155 "bin",1156 "tmp",1157 "node_modules",1158 "dist",1159 "build",1160 ]);1161 const FILE_EXT_RE =1162 /\.(py|pyc|js|ts|jsx|tsx|json|jsonl|yaml|yml|csv|tsv|md|txt|sh|bash|html|css|png|jpe?g|svg|gif|webp|ipynb|toml|cfg|ini|lock|pdf|whl|gz|zip|tar|pt|pth|bin|safetensors|db|sqlite)$/i;1163 1164 async function detectBareModelIds(text, groups) {1165 const stripped = text.replace(DETECTED_URL, " ");1166 DETECTED_URL.lastIndex = 0;1167 const seen = new Set();1168 const candidates = [];1169 const re = /(^|[\s"'`(=[])([A-Za-z0-9][\w.-]*\/[A-Za-z0-9][\w.-]*)/g;1170 let m;1171 while ((m = re.exec(stripped)) && candidates.length < 15) {1172 const id = m[2].replace(/[.:,]+$/, "");1173 if (seen.has(id)) continue;1174 seen.add(id);1175 if (FILE_EXT_RE.test(id)) continue;1176 if (BARE_ID_SKIP_DIRS.has(id.split("/")[0].toLowerCase())) continue;1177 candidates.push(id);1178 }1179 const results = await Promise.all(1180 candidates.map((id) => getJSON(`https://huggingface.co/api/models/${id}`))1181 );1182 let added = false;1183 const confirmed = [];1184 results.forEach((d, i) => {1185 if (!d || !d.id) return;1186 const id = candidates[i];1187 confirmed.push(id);1188 const url = `https://huggingface.co/${id}`;1189 if (!groups.has("model")) groups.set("model", new Map());1190 if (!groups.get("model").has(url)) {1191 groups.get("model").set(url, { kind: "model", id, url });1192 added = true;1193 }1194 });1195 return { added, confirmed };1196 }1197 1198 function chipifyBareIds(ids, container) {1199 if (!ids.length) return;1200 const escaped = ids.map((id) => id.replace(/[.*+?^${}()|[\]\\]/g, "\\$&"));