// SPDX-License-Identifier: Apache-2.0 // Copyright 2026 Chase Hendrick // Ink Bench: score your own ink prediction for a winding against the published ink, in the // browser. Nothing is uploaded. Maths lives in bench-core.js (mirrored by tools/inkbench.py). import * as C from './bench-core.js'; import { writeZip } from './formats.js'; const BASE = new URL('../', import.meta.url).href; const SPACE = 'https://huggingface.co/spaces/SharpMeow/unroll'; const $ = (id) => document.getElementById(id); const esc = (s) => String(s).replace(/[&<>"']/g, (c) => ({ '&': '&', '<': '<', '>': '>', '"': '"', "'": ''' }[c])); const fmt = (v, d = 3) => (v === null || v === undefined || Number.isNaN(v) ? 'n/a' : (+v).toFixed(d)); const S = { index: null, seg: null, layers: {}, ref: null, target: 'ink', base: 'ink', pred: null, predRaw: null, predInfo: null, predHash: null, predName: null, source: null, invert: false, model: { name: '' }, al: null, method: null, aligned: null, blurBest: null, met: null, alignNcc: null, tRef: 0.5, tPred: 0.5, ann: [], view: 'side', swipe: 0.5, zoom: 1, tool: 'pan', pendingHash: null, sel: null, board: [], busy: false, }; // ------------------------------------------------------------------ data async function fetchBytes(url) { const r = await fetch(url, { mode: 'cors' }); if (!r.ok) throw new Error(`Could not fetch ${url} (HTTP ${r.status}).`); return new Uint8Array(await r.arrayBuffer()); } async function loadIndex() { if (!S.index) S.index = await (await fetch(BASE + 'data/bench/index.json')).json(); return S.index; } async function layer(seg, name) { const key = seg + ':' + name; if (!S.layers[key]) { const L = S.index.segments[seg].layers[name]; if (!L) throw new Error(`No ${name} layer for ${seg}.`); S.layers[key] = (async () => { const bytes = await fetchBytes(BASE + L.file); const h = await C.sha256(bytes); if (h !== L.sha256) throw new Error(`Reference ${L.file} failed its checksum.`); return C.decodeBytes(bytes); })(); } return S.layers[key]; } const PUBLIC = { gpu: { label: 'ink_9um (9 µm), ink_9um seed 42 step 75000', model: { name: 'scrollprize/ink_9um (seed 42, step 75000) on the 9.362 µm scan', url: 'https://huggingface.co/scrollprize/ink_9um' } }, ct: { label: 'X-ray layer as a baseline (not an ink model)', model: { name: 'baseline: X-ray intensity (9.362 um surface volume)' } }, }; const thr = (v, what) => { const n = typeof v === 'string' && v.trim() !== '' ? +v : v; if (typeof n !== 'number' || !Number.isFinite(n) || n < 0 || n > 1) throw new Error(`${what} threshold must be a number from 0 to 1; got ${typeof v === "number" ? String(v) : JSON.stringify(v)}.`); return n; }; async function selectSegment(seg) { await loadIndex(); if (typeof seg !== 'string' || !Object.prototype.hasOwnProperty.call(S.index.segments, seg)) throw new Error(`Unknown segment ${JSON.stringify(seg)}. Segments: ${Object.keys(S.index.segments).join(', ')}.`); if (S.seg !== seg) { S.ann = []; S.al = null; S.aligned = null; S.met = null; } S.seg = seg; S.ref = await layer(seg, 'ink'); const sel = $('bSeg'); if (sel) sel.value = seg; const g = $('bUseGpu'); if (g) g.hidden = !S.index.segments[seg].layers.gpu; render(); } async function setPrediction({ bytes, name, source, model }) { const u8 = bytes instanceof Uint8Array ? bytes : new Uint8Array(bytes); const img = await C.decodeBytes(u8); S.predRaw = img; S.predInfo = img.info; S.predHash = await C.sha256(u8); S.predName = name || 'prediction'; S.source = source || 'file'; if (model) S.model = model; S.pred = applyInvert(); S.al = null; S.aligned = null; S.met = null; syncInputs(); status(`Loaded ${S.predName}: ${img.w} x ${img.h} px, ${img.info.format.toUpperCase()}, ${img.info.normalization}. SHA-256 ${S.predHash.slice(0, 12)}...`); if (S.pendingHash) { if (S.pendingHash.hash === S.predHash) { const p = S.pendingHash; S.pendingHash = null; await restoreAlignment(p); return; } status('This file does not match the shared comparison (different SHA-256). Aligning it fresh.', true); S.pendingHash = null; } render(); } function applyInvert() { const P = S.predRaw; if (!P) return null; if (!S.invert) return P; const d = new Float64Array(P.d.length); for (let i = 0; i < d.length; i++) d[i] = 1.0 - P.d[i]; return { w: P.w, h: P.h, d, info: P.info }; } // worker (falls back to the main thread if workers are unavailable) let worker = null, wid = 0; const pending = new Map(); function getWorker() { if (worker === false) return null; if (!worker) { try { worker = new Worker(new URL('./bench-worker.js', import.meta.url), { type: 'module' }); worker.onmessage = ({ data }) => { const p = pending.get(data.id); if (!p) return; if (data.progress !== undefined) { progress(data.progress); return; } pending.delete(data.id); data.error ? p.reject(new Error(data.error)) : p.resolve(data.result); }; worker.onerror = () => { worker = false; for (const p of pending.values()) p.reject(new Error('worker failed')); pending.clear(); }; } catch { worker = false; return null; } } return worker; } const plain = (img) => ({ w: img.w, h: img.h, d: img.d }); function call(msg) { const w = getWorker(); if (!w) return null; const id = ++wid; return new Promise((resolve, reject) => { pending.set(id, { resolve, reject }); w.postMessage({ id, ...msg }); }); } async function coreAlign(tgt, P) { const r = call({ op: 'align', tgt: plain(tgt), P: plain(P) }); if (r) { try { return await r; } catch (e) { if (worker !== false) throw e; } } return C.align(tgt, P, { onProgress: (f) => progress(f) }); } async function coreScore(ref, tgt, P, al) { const r = call({ op: 'score', ref: plain(ref), tgt: plain(tgt), P: plain(P), al }); if (r) { try { return await r; } catch (e) { if (worker !== false) throw e; } } const { val, m } = C.applyAlignment(ref, P, al); return { val, m, alignNcc: C.rnd(C.ncc(tgt, val, m, 1), 6), blurBest: C.blurEstimate(ref, val, m) }; } async function runAlign(target = S.target) { if (!S.pred || !S.ref) throw new Error('Load a segment and a prediction first.'); S.target = target; const tgt = target === 'ink' ? S.ref : await layer(S.seg, target); busy(true, 'Aligning...'); try { const al = await coreAlign(tgt, S.pred); S.al = al; S.method = 'auto'; await recompute(true); status(S.alignNcc < 0.2 ? `Aligned, but the match is weak (NCC ${fmt(S.alignNcc)}). Check the winding, the invert box, or nudge by hand.` : `Aligned in UV space: shift ${fmt(al.tx, 2)}, ${fmt(al.ty, 2)} px, scale ${fmt(al.sx, 4)} x ${fmt(al.sy, 4)}, NCC ${fmt(S.alignNcc)}.`, S.alignNcc < 0.2); autoHide(); } finally { busy(false); } return S.al; } async function restoreAlignment({ tx, ty, sx, sy, method = 'shared' }) { S.al = { tx: C.rnd(+tx, 3), ty: C.rnd(+ty, 3), sx: C.rnd(+sx, 5), sy: C.rnd(+sy, 5), evals: 0, coarseNcc: null }; S.method = method; await recompute(true); } async function recompute(geometryChanged) { if (!S.al || !S.pred || !S.ref) { render(); return null; } if (geometryChanged || !S.aligned) { const tgt = S.target === 'ink' ? S.ref : await layer(S.seg, S.target); const r = await coreScore(S.ref, tgt, S.pred, S.al); S.aligned = { val: r.val, m: r.m }; S.alignNcc = r.alignNcc; S.blurBest = r.blurBest; layersCache.pred = null; layersCache.diff = null; } S.met = C.metrics(S.ref, S.aligned.val, S.aligned.m, S.tRef, S.tPred, S.index.segments[S.seg].pxPerMM, S.blurBest); render(); return S.met; } function bundle() { if (!S.met) throw new Error('Nothing to export yet: load a prediction and align it.'); const seg = S.index.segments[S.seg]; const model = { ...S.model, name: S.model.name || 'unspecified' }; return C.makeBundle({ index: S.index, segment: S.seg, refLayer: seg.layers.ink, targetLayer: seg.layers[S.target], target: S.target, predInfo: S.predInfo, predHash: S.predHash, predName: S.predName, invert: S.invert, model, al: S.al, method: S.method, alignNcc: S.alignNcc, met: S.met, annotations: S.ann }); } // ------------------------------------------------------------------ share links const b64u = (s) => btoa(unescape(encodeURIComponent(s))).replace(/\+/g, '-').replace(/\//g, '_').replace(/=+$/, ''); const unb64u = (s) => decodeURIComponent(escape(atob(s.replace(/-/g, '+').replace(/_/g, '/')))); function shareState() { if (!S.al) throw new Error('Align a prediction first.'); return { v: 1, s: S.seg, p: S.source, h: S.predHash, n: S.predName, m: S.model, a: [S.al.tx, S.al.ty, S.al.sx, S.al.sy], g: S.target, t: [S.tRef, S.tPred], i: S.invert ? 1 : 0, an: S.ann.map((a) => [a.x, a.y, a.w, a.h, a.letter, a.confidence, a.note || '']) }; } function shareURL() { const u = new URL(location.href); u.hash = ''; u.search = ''; u.searchParams.set('bench', b64u(JSON.stringify(shareState()))); return u.toString(); } async function restoreShare(code) { let st; try { st = JSON.parse(unb64u(code)); } catch { throw new Error('This Ink Bench share link is damaged (it is not valid base64 JSON). Ask for the link again.'); } if (!st || typeof st !== 'object') throw new Error('This Ink Bench share link is damaged.'); if (st.v !== 1) throw new Error(`This Ink Bench share link has version ${JSON.stringify(st.v)}; this page reads version 1.`); const okArr = (x, n) => Array.isArray(x) && x.length >= n && x.slice(0, n).every((v) => Number.isFinite(+v)); if (typeof st.s !== 'string' || !okArr(st.a, 4) || !okArr(st.t, 2)) throw new Error('This Ink Bench share link is incomplete (segment, alignment or thresholds missing).'); await loadIndex(); if (!Object.prototype.hasOwnProperty.call(S.index.segments, st.s)) throw new Error(`This Ink Bench share link names an unknown segment ${JSON.stringify(st.s)}.`); thr(st.t[0], 'ref'); thr(st.t[1], 'pred'); S.seg = null; await open('compare', st.s); await selectSegment(st.s); S.tRef = +st.t[0]; S.tPred = +st.t[1]; S.invert = !!st.i; S.target = st.g || 'ink'; S.model = st.m || { name: '' }; S.ann = (st.an || []).map((a, i) => C.cleanAnnotation({ x: a[0], y: a[1], w: a[2], h: a[3], letter: a[4], confidence: a[5], note: a[6] }, i)); const al = { tx: st.a[0], ty: st.a[1], sx: st.a[2], sy: st.a[3] }; if (st.p === 'layer:gpu' || st.p === 'layer:ct') { await usePublic(st.p.slice(6), false); await restoreAlignment(al); } else if (/^url:https:\/\//.test(st.p)) { const url = st.p.slice(4); await setPrediction({ bytes: await fetchBytes(url), name: st.n, source: st.p, model: st.m }); await restoreAlignment(al); } else { S.pendingHash = { hash: st.h, ...al }; syncInputs(); render(); status(`This link restores a comparison made with a local file (${String(st.n || 'prediction').slice(0, 200)}, SHA-256 ${String(st.h).slice(0, 12)}...). Drop that same file to restore it; nothing is uploaded.`); } return S.met; } async function usePublic(which, align = true) { const L = S.index.segments[S.seg].layers[which]; if (!L) throw new Error(`No public ${which} layer for ${S.seg}.`); const bytes = await fetchBytes(BASE + L.file); await setPrediction({ bytes, name: L.file.split('/').pop(), source: 'layer:' + which, model: { ...PUBLIC[which].model } }); if (align) await runAlign(); } // ------------------------------------------------------------------ figure, citation, export function bibtex() { return `@software{hendrick_unroll_inkbench_2026,\n author = {Hendrick, Chase},\n title = {Unroll Ink Bench: model-agnostic agreement metrics for Herculaneum ink detection},\n year = {2026},\n version = {${C.VERSION}},\n url = {${SPACE}},\n license = {Apache-2.0},\n note = {Data: Vesuvius Challenge open data, CC BY-NC 4.0}\n}\n`; } function citationCFF() { return `cff-version: 1.2.0\nmessage: "If you use the Unroll Ink Bench, please cite it as below. Cite the Vesuvius Challenge for the data."\ntitle: "Unroll Ink Bench"\nversion: "${C.VERSION}"\nauthors:\n - family-names: Hendrick\n given-names: Chase\nlicense: Apache-2.0\nurl: "${SPACE}"\nrepository-code: "${SPACE}/tree/main"\nkeywords: [vesuvius-challenge, herculaneum, ink-detection, benchmark]\nreferences:\n - type: data\n title: "Vesuvius Challenge open data: PHerc. 139"\n url: "https://scrollprize.org/data"\n license: CC-BY-NC-4.0\n`; } const layersCache = {}; function grayCanvas(img, key) { if (key && layersCache[key]) return layersCache[key]; const c = document.createElement('canvas'); c.width = img.w; c.height = img.h; const x = c.getContext('2d'), id = x.createImageData(img.w, img.h); for (let i = 0; i < img.w * img.h; i++) { const v = Math.round(Math.min(1, Math.max(0, img.d[i])) * 255); id.data[i * 4] = id.data[i * 4 + 1] = id.data[i * 4 + 2] = v; id.data[i * 4 + 3] = 255; } x.putImageData(id, 0, 0); if (key) layersCache[key] = c; return c; } function predCanvas() { if (layersCache.pred) return layersCache.pred; const W = S.ref.w, H = S.ref.h, c = document.createElement('canvas'); c.width = W; c.height = H; const x = c.getContext('2d'), id = x.createImageData(W, H), { val, m } = S.aligned; for (let i = 0; i < W * H; i++) { const o = i * 4; if (!m[i]) { const k = (((i % W) + ((i / W) | 0)) >> 2) & 1; id.data[o] = id.data[o + 1] = 20 + 10 * k; id.data[o + 2] = 34 + 10 * k; id.data[o + 3] = 255; continue; } const v = Math.round(val[i] * 255); id.data[o] = v * 0.37 | 0; id.data[o + 1] = v * 0.94 | 0; id.data[o + 2] = v; id.data[o + 3] = 255; } x.putImageData(id, 0, 0); return (layersCache.pred = c); } function refCanvas() { if (S.base === 'ct') return null; const key = 'ref:' + S.seg; if (layersCache[key]) return layersCache[key]; const W = S.ref.w, H = S.ref.h, c = document.createElement('canvas'); c.width = W; c.height = H; const x = c.getContext('2d'), id = x.createImageData(W, H); for (let i = 0; i < W * H; i++) { const v = S.ref.d[i]; id.data[i * 4] = v * 255; id.data[i * 4 + 1] = v * 179; id.data[i * 4 + 2] = v * 71; id.data[i * 4 + 3] = 255; } x.putImageData(id, 0, 0); return (layersCache[key] = c); } function diffCanvas() { if (layersCache.diff) return layersCache.diff; const W = S.ref.w, H = S.ref.h, c = document.createElement('canvas'); c.width = W; c.height = H; const x = c.getContext('2d'), id = x.createImageData(W, H), { val, m } = S.aligned, R = S.ref.d; for (let i = 0; i < W * H; i++) { const o = i * 4; if (!m[i]) { id.data[o] = 18; id.data[o + 1] = 18; id.data[o + 2] = 26; id.data[o + 3] = 255; continue; } const r = R[i], p = val[i], both = Math.min(r, p), a = Math.max(0, r - p), b = Math.max(0, p - r); id.data[o] = 210 * both + 255 * a + 94 * b; id.data[o + 1] = 210 * both + 179 * a + 240 * b; id.data[o + 2] = 210 * both + 71 * a + 255 * b; id.data[o + 3] = 255; } x.putImageData(id, 0, 0); return (layersCache.diff = c); } let ctImg = null; async function ensureCT() { ctImg = await layer(S.seg, 'ct'); return ctImg; } function drawBoxes(x, k, ox = 0, oy = 0, fontPx = 11) { x.save(); x.lineWidth = Math.max(1, k * 0.8); x.font = `${fontPx}px ui-monospace, Menlo, monospace`; x.textBaseline = 'bottom'; for (const a of S.ann) { const X = ox + a.x * k, Y = oy + a.y * k, Wd = a.w * k, Hd = a.h * k, on = S.sel === a.id; x.strokeStyle = on ? '#ffffff' : '#ffe08a'; x.setLineDash([4, 3]); x.strokeRect(X, Y, Wd, Hd); x.setLineDash([]); const t = `${a.letter} ${Math.round(a.confidence * 100)}% candidate for expert review`; const tw = x.measureText(t).width + 6; x.fillStyle = 'rgba(0,0,0,.72)'; x.fillRect(X, Y - fontPx - 4, tw, fontPx + 4); x.fillStyle = on ? '#ffffff' : '#ffe08a'; x.fillText(t, X + 3, Y - 2); } x.restore(); } function scaleBar(x, k, ox, oy, h, fontPx = 11) { const ppmm = S.index.segments[S.seg].pxPerMM, mm = 5, L = mm * ppmm * k, X = ox + 12, Y = oy + h - 14; x.save(); x.fillStyle = 'rgba(0,0,0,.6)'; x.fillRect(X - 6, Y - fontPx - 10, Math.max(L, 40) + 12, fontPx + 18); x.fillStyle = '#fff'; x.fillRect(X, Y, L, 3); x.font = `${fontPx}px ui-monospace, Menlo, monospace`; x.textBaseline = 'bottom'; x.fillText(mm + ' mm', X, Y - 3); x.restore(); } function figure() { if (!S.met) throw new Error('Align a prediction first.'); const W = S.ref.w, H = S.ref.h, pad = 24, top = 92, foot = 150, k = 1; const c = document.createElement('canvas'); c.width = 3 * W + 4 * pad; c.height = top + H + foot; const x = c.getContext('2d'); x.fillStyle = '#0b0a09'; x.fillRect(0, 0, c.width, c.height); x.fillStyle = '#ece6db'; x.font = '26px Georgia, serif'; x.fillText(`PHerc. 139, winding ${S.seg}: Ink Bench comparison`, pad, 38); x.font = '14px ui-monospace, Menlo, monospace'; x.fillStyle = '#b9b1a4'; x.fillText(`Prediction: ${(S.model.name || 'unspecified').slice(0, 110)} SHA-256 ${S.predHash.slice(0, 16)}`, pad, 62); x.fillText(`Alignment (${S.method}, to ${S.target === 'ink' ? 'published ink' : 'X-ray'}): shift ${fmt(S.al.tx, 2)}, ${fmt(S.al.ty, 2)} px, scale ${fmt(S.al.sx, 4)} x ${fmt(S.al.sy, 4)}, NCC ${fmt(S.alignNcc)}`, pad, 82); const panels = [['Published ink (2.4 µm), Vesuvius Challenge', refCanvas()], ['Prediction, aligned', predCanvas()], ['Difference: amber published only, cyan prediction only', diffCanvas()]]; panels.forEach(([label, cv], i) => { const ox = pad + i * (W + pad); x.drawImage(cv, ox, top, W, H); drawBoxes(x, k, ox, top, 12); scaleBar(x, k, ox, top, H, 12); x.fillStyle = '#ece6db'; x.font = '13px ui-monospace, Menlo, monospace'; x.fillText(label, ox, top + H + 20); }); const m = S.met; let y = top + H + 48; x.fillStyle = '#ffb347'; x.font = '15px ui-monospace, Menlo, monospace'; x.fillText(`Agreement with another model's output (published ink), not ground truth. Pearson r ${fmt(m.pearson)} r at matched blur ${fmt(m.pearsonMatchedBlur)} (sigma ${m.blurSigmaPx} px, ${m.blurSigmaUM} µm)`, pad, y); y += 22; x.fillText(`Thresholds ref ${m.thresholds.ref} pred ${m.thresholds.pred}: IoU ${fmt(m.iou)} Dice ${fmt(m.dice)} precision ${fmt(m.precision)} recall ${fmt(m.recall)} AP ${fmt(m.ap)} best F1 ${fmt(m.bestF1.f1)} at ${m.bestF1.threshold}`, pad, y); y += 22; x.fillStyle = '#b9b1a4'; x.font = '12px ui-monospace, Menlo, monospace'; x.fillText(`${S.ann.length} letter box${S.ann.length === 1 ? '' : 'es'}, each a candidate for expert review, not a reading. Made with the Unroll Ink Bench ${C.VERSION} by Chase Hendrick (code Apache-2.0), ${SPACE}`, pad, y); y += 18; x.fillText(`Data: ${C.CREDITS.data} License CC BY-NC 4.0, non-commercial use with attribution.`, pad, y); return c; } const canvasPNG = (c) => new Promise((r) => c.toBlob((b) => r(b), 'image/png')); function download(blob, name) { const a = document.createElement('a'); a.href = URL.createObjectURL(blob); a.download = name; document.body.appendChild(a); a.click(); setTimeout(() => { URL.revokeObjectURL(a.href); a.remove(); }, 2000); } function slug(s) { return String(s || 'prediction').toLowerCase().replace(/[^a-z0-9]+/g, '-').replace(/^-|-$/g, '').slice(0, 40) || 'prediction'; } async function exportFiles() { const b = bundle(), enc = new TextEncoder(); const fig = new Uint8Array(await (await canvasPNG(figure())).arrayBuffer()); let share = ''; try { share = shareURL(); } catch {} const readme = `Unroll Ink Bench bundle\n\nsegment ${b.segment} of ${b.scroll}, prediction ${b.prediction.name} (sha256 ${b.prediction.sha256})\n\nbundle.json metrics, alignment, hashes and annotations (schema ${C.SCHEMA}, see ${SPACE}/blob/main/docs/BENCH_FORMAT.md)\nfigure.png reference, aligned prediction and difference, with a 5 mm scale bar and credits\nCITATION.cff and inkbench.bib how to cite the Bench\nshare-url.txt opens this comparison again${b.prediction.model && S.source.startsWith('layer:') ? '' : ' (for a local file, drop the same file to restore it)'}\n\nReproduce headlessly:\n python3 inkbench.py compare --segment ${b.segment} --alignment bundle.json\n\n${C.DISCLAIMER}\n\nData credits: ${C.CREDITS.data}\nData license: ${C.CREDITS.dataLicense}\nBench code: Apache-2.0, Chase Hendrick.\n`; const name = `inkbench-${b.segment}-${slug(b.prediction.model.name)}`; const files = [ { name: `${name}/bundle.json`, bytes: enc.encode(JSON.stringify(b, null, 1) + '\n') }, { name: `${name}/figure.png`, bytes: fig }, { name: `${name}/CITATION.cff`, bytes: enc.encode(citationCFF()) }, { name: `${name}/inkbench.bib`, bytes: enc.encode(bibtex()) }, { name: `${name}/share-url.txt`, bytes: enc.encode(share + '\n') }, { name: `${name}/README.txt`, bytes: enc.encode(readme) }, ]; return { name: name + '.zip', zip: writeZip(files), bundle: b }; } async function exportBundle() { const { name, zip, bundle: b } = await exportFiles(); download(zip, name); return { name, size: zip.size, bundle: b }; } // ------------------------------------------------------------------ leaderboard async function loadBoard(sources) { const out = []; for (const s of sources) { try { const b = typeof s === 'string' ? await (await fetch(new URL(s, location.href), { mode: 'cors' })).json() : s; out.push({ src: typeof s === 'string' ? s : 'local', bundle: b, errors: C.validate(b) }); } catch (e) { out.push({ src: String(s), bundle: null, errors: [String(e.message || e)] }); } } S.board.push(...out); renderBoard(); return out.map((o) => ({ src: o.src, ok: !o.errors.length, errors: o.errors })); } const examples = () => Object.keys(S.index.segments).filter((w) => S.index.segments[w].layers.gpu).flatMap((w) => ['ink9um', 'ct-baseline', 'noise-baseline'].map((k) => `${BASE}docs/examples/bench/${w}-${k}.json`)); // ------------------------------------------------------------------ UI function status(msg, warn = false) { const el = $('bStatus'); if (!el) return; el.hidden = !msg; el.textContent = msg || ''; el.classList.toggle('warn', !!warn); } let hideT = 0; function autoHide() { clearTimeout(hideT); hideT = setTimeout(() => { const el = $('bStatus'); if (el && !el.classList.contains('warn')) el.hidden = true; }, 6000); } function progress(f) { const el = $('bProg'); if (el) el.style.width = Math.round(f * 100) + '%'; } function busy(on, msg) { S.busy = on; const el = $('bench'); if (el) el.classList.toggle('busy', on); if (msg) { clearTimeout(hideT); status(msg); } if (on) progress(0); } function build() { if ($('bench')) return; const segs = Object.keys(S.index.segments); const sec = document.createElement('section'); sec.id = 'bench'; sec.className = 'sheet bench'; sec.hidden = true; sec.setAttribute('aria-label', 'Ink Bench'); sec.innerHTML = `
INK BENCH

Score your ink model on a real segment

Nothing is uploaded. Your prediction is decoded, aligned and scored inside this browser. Scores are agreement with another model's output (the published ink), not ground truth.

Pick a winding, then drop your ink prediction (PNG or TIFF) here, or try the public ink_9um layer.
Drop your prediction PNG or TIFF for this winding
ALIGNMENT, IN UV SPACE
AGREEMENT WITH PUBLISHED INK (ANOTHER MODEL'S OUTPUT, NOT GROUND TRUTH)
No scores yet.
LETTER CANDIDATES (each one a candidate for expert review)

Turn on Draw box and drag over the image. Tag a candidate Greek letter and your confidence. These are prompts for papyrologists, never readings.

    EXPORT A REPRODUCIBLE BUNDLE

    The zip holds bundle.json (schema ${C.SCHEMA}), figure.png with a scale bar and credits, CITATION.cff, inkbench.bib and a share link. Share links fully restore public layers; for a local file they restore everything once you drop the same file (checked by SHA-256).

    Data: Vesuvius Challenge open data, CC BY-NC 4.0 (non-commercial, with attribution). Bench by Chase Hendrick, code Apache-2.0.

    `; document.body.appendChild(sec); sec.addEventListener('keydown', (e) => { e.stopPropagation(); if (e.key === 'Escape') close(); }); wire(); } function syncInputs() { if (!$('bench')) return; $('bModel').value = S.model.name || ''; $('bInvert').checked = S.invert; $('bTRef').value = S.tRef; $('bTPred').value = S.tPred; $('bTRefV').textContent = S.tRef.toFixed(2); $('bTPredV').textContent = S.tPred.toFixed(2); for (const b of document.querySelectorAll('#bench [data-target]')) b.classList.toggle('on', b.dataset.target === S.target); if (S.al) { $('bTx').value = S.al.tx; $('bTy').value = S.al.ty; $('bSx').value = S.al.sx; $('bSy').value = S.al.sy; } } function wire() { const tabs = document.querySelectorAll('#bench [data-tab]'); tabs.forEach((t) => (t.onclick = () => showTab(t.dataset.tab))); $('bClose').onclick = close; $('bSeg').onchange = () => guard(async () => { await selectSegment($('bSeg').value); if (S.source?.startsWith('layer:')) await usePublic(S.source.slice(6)); else if (S.pred) await runAlign(); }); $('bPick').onchange = (e) => { const f = e.target.files[0]; if (f) guard(() => fromFile(f)); e.target.value = ''; }; const drop = $('bDrop'), stage = $('bStage'); for (const el of [drop, stage]) { el.addEventListener('dragover', (e) => { e.preventDefault(); drop.classList.add('over'); }); el.addEventListener('dragleave', () => drop.classList.remove('over')); el.addEventListener('drop', (e) => { e.preventDefault(); drop.classList.remove('over'); const f = e.dataTransfer.files[0]; if (f) guard(() => fromFile(f)); }); } drop.addEventListener('keydown', (e) => { if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); $('bPick').click(); } }); $('bUseGpu').onclick = () => guard(() => usePublic('gpu')); $('bUseCt').onclick = () => guard(() => usePublic('ct')); $('bURLForm').onsubmit = (e) => { e.preventDefault(); guard(async () => { const url = $('bURL').value.trim(); if (!/^https:\/\//.test(url)) throw new Error('Use an https URL.'); await setPrediction({ bytes: await fetchBytes(url), name: url.split('/').pop().split('?')[0], source: 'url:' + url, model: { name: S.model.name || '', url } }); await runAlign(); }); }; $('bModel').oninput = () => { S.model = { ...S.model, name: $('bModel').value.trim() }; }; $('bInvert').onchange = () => guard(async () => { S.invert = $('bInvert').checked; S.pred = applyInvert(); if (S.al) await recompute(true); }); document.querySelectorAll('#bench [data-target]').forEach((b) => (b.onclick = () => guard(async () => { S.target = b.dataset.target; syncInputs(); if (S.pred) await runAlign(); }))); $('bAlign').onclick = () => guard(() => runAlign()); for (const id of ['bTx', 'bTy', 'bSx', 'bSy']) $(id).onchange = () => guard(() => manual({ tx: +$('bTx').value, ty: +$('bTy').value, sx: +$('bSx').value, sy: +$('bSy').value })); document.querySelectorAll('#bench [data-n]').forEach((b) => (b.onclick = () => guard(() => { if (!S.al) throw new Error('Align first, then nudge.'); const st = +$('bStep').value, n = b.dataset.n, a = { ...S.al }, ds = st / Math.max(S.ref.w, S.ref.h); if (n === 'x-') a.tx -= st; if (n === 'x+') a.tx += st; if (n === 'y-') a.ty -= st; if (n === 'y+') a.ty += st; if (n === 's-') { a.sx -= ds; a.sy -= ds; } if (n === 's+') { a.sx += ds; a.sy += ds; } return manual(a); }))); $('bTRef').oninput = () => { S.tRef = +$('bTRef').value; syncInputs(); recompute(false); }; $('bTPred').oninput = () => { S.tPred = +$('bTPred').value; syncInputs(); recompute(false); }; document.querySelectorAll('#bench [data-view]').forEach((b) => (b.onclick = () => { S.view = b.dataset.view; render(); })); document.querySelectorAll('#bench [data-zoom]').forEach((b) => (b.onclick = () => { S.zoom = +b.dataset.zoom; render(); })); $('bBase').onclick = () => guard(async () => { S.base = S.base === 'ink' ? 'ct' : 'ink'; if (S.base === 'ct') await ensureCT(); render(); }); $('bBox').onclick = () => { S.tool = S.tool === 'box' ? 'pan' : 'box'; render(); }; $('bExport').onclick = () => guard(async () => { const r = await exportBundle(); status(`Saved ${r.name} (${Math.round(r.size / 1024)} KB). Nothing left this browser.`); }); $('bJSON').onclick = () => guard(() => { const b = bundle(); download(new Blob([JSON.stringify(b, null, 1) + '\n'], { type: 'application/json' }), `inkbench-${b.segment}.json`); }); $('bFig').onclick = () => guard(async () => download(await canvasPNG(figure()), `inkbench-${S.seg}.png`)); $('bShare').onclick = () => guard(async () => { const u = shareURL(); try { await navigator.clipboard.writeText(u); status('Share link copied. It holds the settings, not your image.'); } catch { status(u); } }); $('bCopyBib').onclick = () => navigator.clipboard?.writeText(bibtex()).then(() => status('BibTeX copied.'), () => status(bibtex())); $('bCFF').onclick = () => download(new Blob([citationCFF()], { type: 'text/yaml' }), 'CITATION.cff'); $('bBoardLoad').onclick = () => guard(() => loadBoard($('bBoardURLs').value.split(/\s+/).filter(Boolean))); $('bBoardPick').onchange = (e) => guard(async () => { const bs = []; for (const f of e.target.files) { try { bs.push(JSON.parse(await f.text())); } catch { status(`${f.name} is not JSON.`, true); } } await loadBoard(bs); e.target.value = ''; }); $('bBoardCur').onclick = () => guard(() => loadBoard([bundle()])); $('bBoardEx').onclick = () => guard(() => loadBoard(examples())); $('bBoardClear').onclick = () => { S.board = []; renderBoard(); }; $('bBoardMetric').onchange = renderBoard; stagePointer(); window.addEventListener('resize', () => { if (!$('bench').hidden) render(); }); } async function manual(a) { if (!S.pred || !S.ref) throw new Error('Load a prediction (and pick a winding) before setting the alignment.'); for (const k of ['tx', 'ty', 'sx', 'sy']) if (typeof a[k] !== 'number' || !Number.isFinite(a[k])) throw new Error(`Alignment ${k} must be a finite number; got ${JSON.stringify(a[k])}.`); if (a.sx < 0.3 || a.sx > 3 || a.sy < 0.3 || a.sy > 3) throw new Error(`Scale must be between 0.3 and 3; got ${a.sx} x ${a.sy}.`); const W = S.ref.w, H = S.ref.h; if (Math.abs(a.tx) > W || Math.abs(a.ty) > H) throw new Error(`Shift must stay within the image: |tx| up to ${W} px and |ty| up to ${H} px; got ${a.tx}, ${a.ty}.`); await restoreAlignment({ ...a, method: S.method === 'auto' || S.method === 'auto+manual' ? 'auto+manual' : 'manual' }); } async function fromFile(f) { if (f.size > 400 * 1024 * 1024) throw new Error('That file is over 400 MB.'); await setPrediction({ bytes: new Uint8Array(await f.arrayBuffer()), name: f.name, source: 'file', model: { name: S.model.name || f.name.replace(/\.[^.]+$/, '') } }); if (S.pred && !S.al) await runAlign(); } async function guard(fn) { try { return await fn(); } catch (e) { console.error(e); status(String(e.message || e), true); busy(false); } } function showTab(t) { document.querySelectorAll('#bench [data-tab]').forEach((b) => b.classList.toggle('on', b.dataset.tab === t)); document.querySelectorAll('#bench [data-pane]').forEach((p) => (p.hidden = p.dataset.pane !== t)); if (t === 'compare') render(); } // stage drawing --------------------------------------------------------------- function stageCanvases() { const box = $('bCanvases'); const n = S.view === 'side' ? 2 : 1; while (box.children.length > n) box.lastChild.remove(); while (box.children.length < n) { const c = document.createElement('canvas'); c.className = 'b-cv'; box.appendChild(c); } return [...box.children]; } function render() { if (!$('bench') || !S.ref) return; const W = S.ref.w, H = S.ref.h, stage = $('bStage'); $('bEmpty').hidden = !!S.aligned; document.querySelectorAll('#bench [data-view]').forEach((b) => b.classList.toggle('on', b.dataset.view === S.view)); document.querySelectorAll('#bench [data-zoom]').forEach((b) => b.classList.toggle('on', +b.dataset.zoom === S.zoom)); $('bBox').classList.toggle('on', S.tool === 'box'); $('bBox').setAttribute('aria-pressed', S.tool === 'box'); $('bBase').textContent = 'Base: ' + (S.base === 'ct' ? 'X-ray' : 'ink'); stage.classList.toggle('drawing', S.tool === 'box'); const cvs = stageCanvases(); const narrow = stage.clientWidth < 640; const side = S.view === 'side' && !narrow; $('bCanvases').classList.toggle('stack', S.view === 'side' && narrow); const availW = (stage.clientWidth - 16) / (side ? 2 : 1) - (side ? 6 : 0); const availH = narrow ? Infinity : stage.clientHeight - 16; const fit = Math.min(availW / W, availH / H); const k = fit * S.zoom, dpr = Math.min(window.devicePixelRatio || 1, 2); const base = S.base === 'ct' ? (ctImg && grayCanvas(ctImg, 'ct:' + S.seg)) : refCanvas(); cvs.forEach((c, i) => { c.style.width = W * k + 'px'; c.style.height = H * k + 'px'; const s = Math.min(dpr * k, 4096 / W); c.width = Math.round(W * s); c.height = Math.round(H * s); const x = c.getContext('2d'); x.imageSmoothingEnabled = k < 1.5; x.clearRect(0, 0, c.width, c.height); if (!S.aligned) { if (base) x.drawImage(base, 0, 0, c.width, c.height); } else if (S.view === 'side') x.drawImage(i === 0 ? base : predCanvas(), 0, 0, c.width, c.height); else if (S.view === 'diff') x.drawImage(diffCanvas(), 0, 0, c.width, c.height); else { const sw = Math.round(c.width * S.swipe); x.drawImage(base, 0, 0, c.width, c.height); x.save(); x.beginPath(); x.rect(sw, 0, c.width - sw, c.height); x.clip(); x.drawImage(predCanvas(), 0, 0, c.width, c.height); x.restore(); x.fillStyle = '#fff'; x.fillRect(sw - 1, 0, 2, c.height); x.fillStyle = 'rgba(0,0,0,.6)'; x.fillRect(sw - 16, c.height / 2 - 16, 32, 32); x.fillStyle = '#fff'; x.font = `${14 * s / k}px sans-serif`; x.textAlign = 'center'; x.fillText('⇆', sw, c.height / 2 + 5); } drawBoxes(x, s, 0, 0, Math.max(10, 11 * dpr)); scaleBar(x, s, 0, 0, c.height, Math.max(10, 11 * dpr)); }); const legend = { side: 'Left: ' + (S.base === 'ct' ? 'X-ray layer' : 'published ink (amber)') + '. Right: your prediction after alignment (cyan); hatched where it does not cover.', swipe: 'Drag across the image: published ink on the left, your prediction on the right.', diff: 'White: both see ink. Amber: published ink only. Cyan: your prediction only. Dark: neither.' }[S.view]; $('bLegend').textContent = S.aligned ? legend : ''; renderSide(); } function renderSide() { const info = $('bAlignInfo'), mEl = $('bMetrics'); syncInputs(); if (S.al) { const low = S.alignNcc !== null && S.alignNcc < 0.2; info.innerHTML = `${esc(S.method)} · NCC ${fmt(S.alignNcc)}${low ? ' low: check the winding or try the nudge' : ''}`; } else info.textContent = S.pendingHash ? 'waiting for the shared file' : ''; if (S.met) { const m = S.met; mEl.innerHTML = `
    Pearson r${fmt(m.pearson)}
    r at matched blur${fmt(m.pearsonMatchedBlur)}
    relative blur${m.blurSigmaPx} px · ${m.blurSigmaUM} µm
    IoU${fmt(m.iou)}
    Dice${fmt(m.dice)}
    precision${fmt(m.precision)}
    recall${fmt(m.recall)}
    AP${fmt(m.ap)}
    best F1${fmt(m.bestF1.f1)} @ ${m.bestF1.threshold}
    coverage${(m.validFraction * 100).toFixed(1)}%
    `; } else mEl.innerHTML = 'No scores yet.'; drawPR(); const ul = $('bAnn'); ul.innerHTML = S.ann.length ? '' : '
  • No boxes yet.
    • '; for (const a of S.ann) { const li = document.createElement('li'); li.className = 'mono small' + (S.sel === a.id ? ' on' : ''); li.innerHTML = `
    ${esc(a.id)} at ${a.x}, ${a.y} (${a.w} x ${a.h} px): candidate for expert review
    `; const [sel, rng, note, del] = [li.querySelector('select'), li.querySelector('input[type=range]'), li.querySelector('.b-note'), li.querySelector('button')]; sel.onchange = () => { a.letter = sel.value; render(); }; rng.oninput = () => { a.confidence = +rng.value; li.querySelector('b').textContent = Math.round(a.confidence * 100) + '%'; renderStageOnly(); }; note.onchange = () => { a.note = note.value.slice(0, 500); }; del.onclick = () => { S.ann = S.ann.filter((b) => b !== a); render(); }; li.onclick = (e) => { if (e.target === li) { S.sel = a.id; render(); } }; ul.appendChild(li); } } let rsPending = false; function renderStageOnly() { if (rsPending) return; rsPending = true; requestAnimationFrame(() => { rsPending = false; render(); }); } function drawPR() { const c = $('bPR'), x = c.getContext('2d'), W = c.width, H = c.height, L = 46, B = 34, T = 14, R = 14; x.clearRect(0, 0, W, H); x.fillStyle = '#0d0c0b'; x.fillRect(0, 0, W, H); x.strokeStyle = 'rgba(236,230,219,.25)'; x.lineWidth = 1; x.font = '18px ui-monospace, Menlo, monospace'; x.fillStyle = '#8d857a'; x.strokeRect(L, T, W - L - R, H - T - B); x.fillText('recall', W / 2 - 30, H - 8); x.save(); x.translate(16, H / 2 + 40); x.rotate(-Math.PI / 2); x.fillText('precision', 0, 0); x.restore(); if (!S.met) return; const px = (r) => L + r * (W - L - R), py = (p) => T + (1 - p) * (H - T - B); x.strokeStyle = '#5ef0ff'; x.lineWidth = 3; x.beginPath(); S.met.pr.forEach((q, i) => (i ? x.lineTo(px(q.recall), py(q.precision)) : x.moveTo(px(q.recall), py(q.precision)))); x.stroke(); const m = S.met; x.fillStyle = '#ffb347'; x.beginPath(); x.arc(px(m.recall), py(m.precision), 7, 0, 7); x.fill(); x.fillStyle = '#ece6db'; x.fillText(`AP ${fmt(m.ap)} · ● at pred ${m.thresholds.pred}`, L + 10, T + 26); } function stagePointer() { const st = $('bStage'); let drag = null; const toRef = (e, c) => { const r = c.getBoundingClientRect(); return [(e.clientX - r.left) / r.width * S.ref.w, (e.clientY - r.top) / r.height * S.ref.h, (e.clientX - r.left) / r.width]; }; st.addEventListener('pointerdown', (e) => { const c = e.target.closest('canvas'); if (!c || !S.ref) return; const [x, y, fx] = toRef(e, c); if (S.tool === 'box') { drag = { c, x0: x, y0: y, a: null }; try { c.setPointerCapture(e.pointerId); } catch {} e.preventDefault(); } else if (S.view === 'swipe' && S.aligned) { drag = { c, swipe: true }; S.swipe = Math.min(1, Math.max(0, fx)); try { c.setPointerCapture(e.pointerId); } catch {} renderStageOnly(); e.preventDefault(); } else { const hit = S.ann.find((a) => x >= a.x && x <= a.x + a.w && y >= a.y && y <= a.y + a.h); if (hit) { S.sel = hit.id; render(); } } }); st.addEventListener('pointermove', (e) => { if (!drag) return; const [x, y, fx] = toRef(e, drag.c); if (drag.swipe) { S.swipe = Math.min(1, Math.max(0, fx)); renderStageOnly(); return; } const X = Math.max(0, Math.min(drag.x0, x)), Y = Math.max(0, Math.min(drag.y0, y)), w = Math.abs(x - drag.x0), h = Math.abs(y - drag.y0); if (!drag.a && w + h > 4) { drag.a = C.cleanAnnotation({ id: nextId(), x: X, y: Y, w, h, letter: '?', confidence: 0.5 }); S.ann.push(drag.a); S.sel = drag.a.id; } if (drag.a) Object.assign(drag.a, C.cleanAnnotation({ ...drag.a, x: X, y: Y, w: Math.min(w, S.ref.w - X), h: Math.min(h, S.ref.h - Y) })); renderStageOnly(); }); const end = () => { if (drag && drag.a) render(); drag = null; }; st.addEventListener('pointerup', end); st.addEventListener('pointercancel', end); } function nextId() { let i = S.ann.length + 1; while (S.ann.some((a) => a.id === 'a' + i)) i++; return 'a' + i; } function renderBoard() { const out = $('bBoardOut'); if (!out) return; const metric = $('bBoardMetric').value; const good = S.board.filter((o) => o.bundle && !o.errors.length).map((o) => o.bundle); const bad = S.board.filter((o) => o.errors.length); const groups = C.rank(good, metric); let h = ''; for (const seg of Object.keys(groups).sort()) { h += `

    ${esc(seg)}

    `; for (const r of groups[seg]) h += ``; h += '
    #model${metric === 'f1' ? 'best F1' : esc(metric)}rIoUDiceAPalign NCCinput sha256
    ${r.rank}${esc(r.model)}${fmt(r.value)}${fmt(r.pearson)}${fmt(r.iou)}${fmt(r.dice)}${fmt(r.ap)}${fmt(r.bundle.alignment.ncc)}${esc(String(r.bundle.prediction.sha256).slice(0, 10))}
    '; } if (bad.length) h += `

    Not loaded

    `; out.innerHTML = h || '

    No bundles loaded. Try Load examples: the public ink_9um run on every winding and two baselines (X-ray intensity, noise).

    '; if (good.length) out.insertAdjacentHTML('afterbegin', `

    ${good.length} bundle${good.length === 1 ? '' : 's'}, ranked by agreement with the published ink (another model's output, not ground truth). Thresholds differ between bundles if their authors chose so; compare r and AP for threshold-free numbers. Takeaway from the examples: rank by AP, where ink_9um (trained by the Vesuvius Challenge, run by Chase Hendrick) beats the X-ray floor on every winding; on Pearson r the X-ray floor wins on w039, w053, w054 and w057.

    `); } // ------------------------------------------------------------------ open, close, API let opener = null; async function open(tab = 'compare', seg = null) { await loadIndex(); build(); if (seg && !S.seg) S.seg = seg; opener = document.activeElement; $('bench').hidden = false; document.body.classList.add('bench-open'); if (S.seg && !S.ref) await selectSegment(S.seg); else if (!S.seg) await selectSegment(Object.keys(S.index.segments).includes('w046') ? 'w046' : Object.keys(S.index.segments)[0]); showTab(tab); $('bClose').focus(); } function close() { const b = $('bench'); if (b) b.hidden = true; document.body.classList.remove('bench-open'); if (opener?.focus) opener.focus(); } function toBytes(x) { if (x instanceof Uint8Array) return x; if (x instanceof ArrayBuffer) return new Uint8Array(x); if (typeof x === 'string') { let s; try { s = atob(x.replace(/^data:[^,]*,/, '').replace(/\s/g, '')); } catch { throw new Error('bytes is a string but not valid base64.'); } const u = new Uint8Array(s.length); for (let i = 0; i < s.length; i++) u[i] = s.charCodeAt(i); return u; } throw new Error('bytes must be a Uint8Array, an ArrayBuffer or a base64 string.'); } const api = { version: C.VERSION, schema: C.SCHEMA, core: C, disclaimer: C.DISCLAIMER, async segments() { await loadIndex(); return Object.entries(S.index.segments).map(([id, s]) => ({ id, width: s.width, height: s.height, pxPerMM: s.pxPerMM, layers: Object.keys(s.layers) })); }, open, close, async load({ segment, layer: lay, url, bytes, name, model, invert } = {}) { await open('compare'); if (segment) await selectSegment(segment); if (invert !== undefined) S.invert = !!invert; if (model) S.model = typeof model === 'string' ? { name: model } : model; if (lay) { await usePublic(lay, false); } else if (url) await setPrediction({ bytes: await fetchBytes(url), name: name || url.split('/').pop(), source: 'url:' + url, model: S.model }); else if (bytes) await setPrediction({ bytes: toBytes(bytes), name: name || 'prediction', source: 'file', model: S.model }); if (model) S.model = typeof model === 'string' ? { name: model } : model; return api.state(); }, async align({ target } = {}) { return runAlign(target || S.target); }, async setAlignment(a) { if (!a || typeof a !== 'object') throw new Error('setAlignment takes { tx, ty, sx, sy }.'); await manual({ tx: 0, ty: 0, sx: 1, sy: 1, ...(S.al || {}), ...a }); return S.al; }, async nudge({ dx = 0, dy = 0, ds = 0 } = {}) { if (!S.al) throw new Error('Nothing to nudge yet: load a prediction and align it first.'); for (const [k, v] of Object.entries({ dx, dy, ds })) if (typeof v !== 'number' || !Number.isFinite(v)) throw new Error(`nudge ${k} must be a finite number; got ${JSON.stringify(v)}.`); const a = { ...S.al }; a.tx += dx; a.ty += dy; a.sx += ds; a.sy += ds; await manual(a); return S.al; }, async setThresholds({ ref, pred } = {}) { const r = ref !== undefined ? thr(ref, 'ref') : S.tRef, p = pred !== undefined ? thr(pred, 'pred') : S.tPred; S.tRef = r; S.tPred = p; return recompute(false); }, metrics() { return S.met; }, annotate(box) { if (!box || typeof box !== 'object') throw new Error('annotate takes { x, y, w, h, letter, confidence, note, id }.'); if (box.id !== undefined && !/^[A-Za-z0-9_-]{1,40}$/.test(String(box.id))) throw new Error('Annotation id may use only letters, digits, _ and -, up to 40 characters.'); const a = C.cleanAnnotation({ ...box, id: box.id ?? nextId() }); S.ann.push(a); render(); return a; }, annotations() { return S.ann.map((a) => ({ ...a })); }, removeAnnotation(id) { S.ann = S.ann.filter((a) => a.id !== id); render(); }, clearAnnotations() { S.ann = []; render(); }, bundle, async exportBundle({ download: dl = true } = {}) { if (dl) return exportBundle(); const r = await exportFiles(); return { name: r.name, size: r.zip.size, bundle: r.bundle, zip: r.zip }; }, figure() { return figure().toDataURL('image/png'); }, shareURL, restore: restoreShare, bibtex, citation: citationCFF, async compare({ segment, layer: lay, url, bytes, name, model, invert, target, alignment, thresholds, annotations } = {}) { await api.load({ segment, layer: lay, url, bytes, name, model, invert }); if (thresholds) { const r = thr(thresholds.ref ?? S.tRef, 'ref'), p = thr(thresholds.pred ?? S.tPred, 'pred'); S.tRef = r; S.tPred = p; } if (annotations) S.ann = annotations.map((a, i) => C.cleanAnnotation(a, i)); if (target) S.target = target; if (alignment) await restoreAlignment({ ...alignment, method: 'reused' }); else await runAlign(S.target); return bundle(); }, async rank(items, metric = 'pearson') { const bs = []; for (const it of items) bs.push(typeof it === 'string' ? await (await fetch(new URL(it, location.href))).json() : it); const r = C.rank(bs.filter((b) => !C.validate(b).length), metric); for (const s in r) r[s] = r[s].map(({ bundle: _b, ...rest }) => rest); return r; }, validate: C.validate, async board(items) { await open('board'); return loadBoard(items); }, state() { return { segment: S.seg, prediction: S.predName, sha256: S.predHash, source: S.source, alignment: S.al, method: S.method, alignNcc: S.alignNcc, thresholds: { ref: S.tRef, pred: S.tPred }, annotations: S.ann.length, scored: !!S.met, busy: S.busy }; }, }; window.unrollBench = api; // register with the page API (window.unroll.bench), which wraps every call as { ok, ... }. // The API may not exist yet: window.unrollExtensions queues the registration until it does. const benchMethods = Object.fromEntries(Object.entries(api).filter(([, f]) => typeof f === 'function').map(([k, f]) => [k, (...a) => f.apply(api, a)])); const benchSpecs = { open: { summary: 'Open the Ink Bench panel on a tab (compare, board or cite).' }, close: { summary: 'Close the Ink Bench panel.' } }; if (window.unroll && typeof window.unroll.register === 'function') { if (!window.unroll.bench) window.unroll.register('bench', benchMethods, benchSpecs); } else (window.unrollExtensions = window.unrollExtensions || []).push(['bench', benchMethods, benchSpecs]); // entry points const btn = $('btnBench'); if (btn) btn.onclick = () => guard(() => ($('bench') && !$('bench').hidden ? close() : open())); document.addEventListener('click', (e) => { const a = e.target.closest && e.target.closest('[data-open-bench]'); if (!a) return; e.preventDefault(); const ab = $('about'); if (ab) ab.hidden = true; guard(() => open(a.dataset.openBench || 'compare')); }); // "Why this matters for researchers" in the About panel (the page may rebuild that panel from the scroll manifest) const WHY = `

    Why this matters for researchers

    The Ink Bench is a fast, model-agnostic and reproducible way to compare ink detectors on real segments. Drop your model's prediction for a winding (PNG or TIFF) and it is aligned to the published ink and X-ray layers in UV space, then scored: Pearson r, IoU, Dice, a precision and recall curve, and the relative blur between the two. Nothing is uploaded.

    Scores are agreement with another model's output, the published ink, not ground truth. Use them to see where detectors agree and differ, then box letter-shaped strokes as candidates for expert review. One click exports a bundle (metrics, alignment, input hashes, annotations, a figure with a scale bar and credits, a citation and a share link) that anyone can check, and tools/inkbench.py gives the same numbers in Python for training loops and CI. Cite or use this.

    `; function injectWhy() { const body = document.querySelector('#about .about-body'); if (!body || body.querySelector('.bench-why')) return; const made = body.querySelector('.made-by'); made ? made.insertAdjacentHTML('beforebegin', WHY) : body.insertAdjacentHTML('beforeend', WHY); } injectWhy(); const aboutEl = $('about'); if (aboutEl) new MutationObserver(injectWhy).observe(aboutEl, { childList: true, subtree: true }); const q = new URLSearchParams(location.search); if (q.get('bench')) guard(async () => { try { return await restoreShare(q.get('bench')); } catch (e) { if (!$('bench') || $('bench').hidden) { try { await open('compare'); } catch {} } throw e; } }); else if (q.has('bench')) guard(() => open()); if (q.get('board')) guard(async () => { await open('board'); await loadBoard(q.get('board').split(',')); }); export default api;