| |
| |
| |
| |
| 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, |
| }; |
|
|
| |
|
|
| 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 }; |
| } |
|
|
| |
| 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 }); |
| } |
|
|
| |
|
|
| 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(); |
| } |
|
|
| |
|
|
| 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 <your prediction> --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 }; |
| } |
|
|
| |
|
|
| 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`)); |
|
|
| |
|
|
| 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 = ` |
| <div class="sheet-head b-head"> |
| <div><div class="mono dim">INK BENCH</div><h2>Score your ink model on a real segment</h2></div> |
| <div class="b-tabs" role="tablist"> |
| <button class="chip on" data-tab="compare" role="tab">Compare</button><button class="chip" data-tab="board" role="tab">Leaderboard</button><button class="chip" data-tab="cite" role="tab">Cite or use this</button> |
| </div> |
| <button class="icon" id="bClose" aria-label="Close">✕</button> |
| </div> |
| <p class="b-private mono"><b>Nothing is uploaded.</b> Your prediction is decoded, aligned and scored inside this browser. Scores are <b>agreement with another model's output</b> (the published ink), not ground truth.</p> |
| <div class="b-pane" data-pane="compare"> |
| <div class="b-stage-wrap"> |
| <div class="b-toolbar mono"> |
| <span class="seg small b-views"><button class="chip on" data-view="side">Side by side</button><button class="chip" data-view="swipe">Swipe</button><button class="chip" data-view="diff">Difference</button></span> |
| <span class="seg small"><button class="chip" data-zoom="1">Fit</button><button class="chip" data-zoom="2">2x</button><button class="chip" data-zoom="4">4x</button></span> |
| <span class="seg small"><button class="chip" id="bBase" title="Show the published ink or the X-ray layer as the reference image">Base: ink</button><button class="chip" id="bBox" aria-pressed="false" title="Draw a box around a possible letter">Draw box</button></span> |
| </div> |
| <div class="b-stage" id="bStage"><div class="b-empty mono dim" id="bEmpty">Pick a winding, then drop your ink prediction (PNG or TIFF) here, or try the public ink_9um layer.</div><div class="b-canvases" id="bCanvases"></div></div> |
| <div class="b-legend mono dim small" id="bLegend"></div> |
| </div> |
| <div class="b-side"> |
| <div class="b-block"> |
| <label class="mono dim small">WINDING <select id="bSeg">${segs.map((s) => `<option>${s}</option>`).join('')}</select></label> |
| <div class="o-drop b-drop" id="bDrop" tabindex="0" role="button" aria-label="Drop or pick your prediction"> |
| <div>Drop your prediction <b>PNG or TIFF</b> for this winding</div> |
| <label class="chip">Pick file<input type="file" id="bPick" accept=".png,.tif,.tiff,image/png,image/tiff" hidden></label> |
| </div> |
| <div class="b-row"><button class="chip" id="bUseGpu">Use public ink_9um layer</button><button class="chip" id="bUseCt" title="The X-ray layer scored as if it were a prediction: a floor any ink model should beat">X-ray baseline</button></div> |
| <form class="o-url b-url" id="bURLForm"><input type="url" id="bURL" placeholder="https://... prediction.png (CORS)" aria-label="Prediction URL"><button class="chip" type="submit">Open URL</button></form> |
| <label class="mono dim small b-model">MODEL NAME <input id="bModel" placeholder="e.g. my-timesformer v3, fold 2" maxlength="200"></label> |
| <label class="mono small"><input type="checkbox" id="bInvert"> Ink is dark in my image (invert)</label> |
| </div> |
| <div class="b-block"> |
| <div class="mono dim small">ALIGNMENT, IN UV SPACE <span class="seg small"><button class="chip on" data-target="ink">to ink</button><button class="chip" data-target="ct">to X-ray</button></span></div> |
| <div class="b-row"><button class="chip b-go" id="bAlign">Auto align</button><span class="mono small" id="bAlignInfo"></span></div> |
| <div class="b-bar"><i id="bProg"></i></div> |
| <div class="b-nudge mono small"> |
| <label>shift x <input type="number" step="0.1" id="bTx"></label><label>shift y <input type="number" step="0.1" id="bTy"></label> |
| <label>scale x <input type="number" step="0.001" id="bSx"></label><label>scale y <input type="number" step="0.001" id="bSy"></label> |
| </div> |
| <div class="b-row b-pad mono small"> |
| <button class="chip" data-n="x-">◀</button><button class="chip" data-n="y-">▲</button><button class="chip" data-n="y+">▼</button><button class="chip" data-n="x+">▶</button> |
| <button class="chip" data-n="s-">−</button><button class="chip" data-n="s+">+</button> |
| <select id="bStep" aria-label="Nudge step"><option value="0.1">0.1 px</option><option value="1" selected>1 px</option><option value="5">5 px</option></select> |
| </div> |
| </div> |
| <div class="b-block"> |
| <div class="mono dim small">AGREEMENT WITH PUBLISHED INK (ANOTHER MODEL'S OUTPUT, NOT GROUND TRUTH)</div> |
| <div class="b-metrics mono" id="bMetrics"><span class="dim">No scores yet.</span></div> |
| <label class="mono small b-thr">ref threshold <input type="range" min="0.02" max="0.98" step="0.02" id="bTRef"><b id="bTRefV"></b></label> |
| <label class="mono small b-thr">pred threshold <input type="range" min="0.02" max="0.98" step="0.02" id="bTPred"><b id="bTPredV"></b></label> |
| <canvas id="bPR" class="b-pr" width="600" height="300" aria-label="Precision and recall curve"></canvas> |
| </div> |
| <div class="b-block"> |
| <div class="mono dim small">LETTER CANDIDATES <span class="dim">(each one a candidate for expert review)</span></div> |
| <p class="mono small dim">Turn on Draw box and drag over the image. Tag a candidate Greek letter and your confidence. These are prompts for papyrologists, never readings.</p> |
| <ul class="b-ann" id="bAnn"></ul> |
| </div> |
| <div class="b-block"> |
| <div class="mono dim small">EXPORT A REPRODUCIBLE BUNDLE</div> |
| <div class="b-row"><button class="chip b-go" id="bExport">Export bundle (.zip)</button><button class="chip" id="bJSON">JSON</button><button class="chip" id="bFig">Figure</button><button class="chip" id="bShare">Copy share link</button></div> |
| <p class="mono small dim">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).</p> |
| </div> |
| <p class="mono small dim">Data: Vesuvius Challenge open data, CC BY-NC 4.0 (non-commercial, with attribution). Bench by Chase Hendrick, code Apache-2.0.</p> |
| </div> |
| </div> |
| <div class="b-pane" data-pane="board" hidden> |
| <div class="about-body b-board"> |
| <p>Load Ink Bench bundles (JSON) from URLs or files and rank their agreement with the published ink, per winding. Everything runs in this browser. A higher score means closer to the published model's output, which is a reference, not the truth: a model can disagree because it is better.</p> |
| <textarea id="bBoardURLs" rows="4" placeholder="One bundle URL per line (the server must allow CORS)"></textarea> |
| <div class="b-row"><button class="chip b-go" id="bBoardLoad">Load URLs</button><label class="chip">Add files<input type="file" id="bBoardPick" accept=".json,application/json" multiple hidden></label><button class="chip" id="bBoardCur">Add current comparison</button><button class="chip" id="bBoardEx">Load examples</button><button class="chip" id="bBoardClear">Clear</button> |
| <label class="mono small">rank by <select id="bBoardMetric"><option value="ap" selected>AP</option><option value="pearson">Pearson r</option><option value="f1">best F1</option><option value="iou">IoU</option><option value="dice">Dice</option></select></label></div> |
| <div id="bBoardOut" class="mono small"></div> |
| </div> |
| </div> |
| <div class="b-pane" data-pane="cite" hidden> |
| <div class="about-body b-cite"> |
| <p><b>Use it in your pipeline.</b> The same metrics run headlessly in Python, with identical JSON output (tested on every format the page reads):</p> |
| <pre>pip install "git+https://huggingface.co/spaces/SharpMeow/unroll" |
| # or the single file: |
| curl -LO ${SPACE}/resolve/main/tools/inkbench.py |
| |
| inkbench compare pred.png --segment w046 --model "my-model v3" -o bundle.json |
| inkbench compare pred.png --segment w046 --min-pearson 0.5 # fails CI below 0.5 |
| inkbench rank bundles/*.json |
| inkbench adapt tif-stack layers.tif -o pred.png # also villa-folder, nnunet, timesformer</pre> |
| <p>In a training loop: <code>import inkbench; b = inkbench.compare(prob_map, segment="w046")</code>. In the page: <code>window.unrollBench</code> (also <code>window.unroll.bench</code>). Bundle format: <a href="${SPACE}/blob/main/docs/BENCH_FORMAT.md" target="_blank" rel="noopener">docs/BENCH_FORMAT.md</a>, guide: <a href="${SPACE}/blob/main/docs/BENCH.md" target="_blank" rel="noopener">docs/BENCH.md</a>.</p> |
| <p><b>Cite it.</b></p> |
| <pre id="bBib">${esc(bibtex())}</pre> |
| <div class="b-row"><button class="chip" id="bCopyBib">Copy BibTeX</button><button class="chip" id="bCFF">Download CITATION.cff</button></div> |
| <p><b>Licenses.</b> The Ink Bench code (lib/bench.js, lib/bench-core.js, bench.css, tools/inkbench.py, its adapters and tests) and the bundle format spec are licensed under the <a href="${SPACE}/blob/main/LICENSE" target="_blank" rel="noopener">Apache License 2.0</a>, with a <a href="${SPACE}/blob/main/NOTICE" target="_blank" rel="noopener">NOTICE</a> crediting Chase Hendrick: use, change and redistribute it, including commercially, keeping the notice. The scan data, segments, ink layers and reference images in data/ come from the Vesuvius Challenge and stay under <a href="https://creativecommons.org/licenses/by-nc/4.0/" target="_blank" rel="noopener">CC BY-NC 4.0</a>: non-commercial use only, with attribution. The code license does not change the data terms.</p> |
| <p class="mono dim small">Data credits: ${esc(C.CREDITS.data)} Ink Bench made by Chase Hendrick.</p> |
| </div> |
| </div> |
| <div class="b-status mono" id="bStatus" role="status" aria-live="polite" hidden></div>`; |
| 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(); |
| } |
|
|
| |
| 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 ? ' <span class="warn">low: check the winding or try the nudge</span>' : ''}`; |
| } else info.textContent = S.pendingHash ? 'waiting for the shared file' : ''; |
| if (S.met) { |
| const m = S.met; |
| mEl.innerHTML = `<div><span>Pearson r</span><b>${fmt(m.pearson)}</b></div><div><span>r at matched blur</span><b>${fmt(m.pearsonMatchedBlur)}</b></div> |
| <div><span>relative blur</span><b>${m.blurSigmaPx} px · ${m.blurSigmaUM} µm</b></div><div><span>IoU</span><b>${fmt(m.iou)}</b></div><div><span>Dice</span><b>${fmt(m.dice)}</b></div> |
| <div><span>precision</span><b>${fmt(m.precision)}</b></div><div><span>recall</span><b>${fmt(m.recall)}</b></div><div><span>AP</span><b>${fmt(m.ap)}</b></div> |
| <div><span>best F1</span><b>${fmt(m.bestF1.f1)} @ ${m.bestF1.threshold}</b></div><div><span>coverage</span><b>${(m.validFraction * 100).toFixed(1)}%</b></div>`; |
| } else mEl.innerHTML = '<span class="dim">No scores yet.</span>'; |
| drawPR(); |
| const ul = $('bAnn'); |
| ul.innerHTML = S.ann.length ? '' : '<li class="dim mono small">No boxes yet.</li>'; |
| for (const a of S.ann) { |
| const li = document.createElement('li'); li.className = 'mono small' + (S.sel === a.id ? ' on' : ''); |
| li.innerHTML = `<select aria-label="Candidate letter">${C.GREEK.map((g) => `<option${g === a.letter ? ' selected' : ''}>${g}</option>`).join('')}</select> |
| <label>conf <input type="range" min="0" max="1" step="0.05" value="${a.confidence}" aria-label="Confidence"><b>${Math.round(a.confidence * 100)}%</b></label> |
| <input class="b-note" placeholder="note" value="${esc(a.note || '')}" maxlength="500" aria-label="Note"><button class="chip" aria-label="Delete box">✕</button> |
| <div class="dim">${esc(a.id)} at ${a.x}, ${a.y} (${a.w} x ${a.h} px): candidate for expert review</div>`; |
| 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 += `<h3>${esc(seg)}</h3><table class="b-table"><thead><tr><th>#</th><th>model</th><th>${metric === 'f1' ? 'best F1' : esc(metric)}</th><th>r</th><th>IoU</th><th>Dice</th><th>AP</th><th>align NCC</th><th>input sha256</th></tr></thead><tbody>`; |
| for (const r of groups[seg]) h += `<tr><td>${r.rank}</td><td>${esc(r.model)}</td><td><b>${fmt(r.value)}</b></td><td>${fmt(r.pearson)}</td><td>${fmt(r.iou)}</td><td>${fmt(r.dice)}</td><td>${fmt(r.ap)}</td><td>${fmt(r.bundle.alignment.ncc)}</td><td>${esc(String(r.bundle.prediction.sha256).slice(0, 10))}</td></tr>`; |
| h += '</tbody></table>'; |
| } |
| if (bad.length) h += `<h3>Not loaded</h3><ul>${bad.map((o) => `<li>${esc(o.src)}: ${esc(o.errors.join('; '))}</li>`).join('')}</ul>`; |
| out.innerHTML = h || '<p class="dim">No bundles loaded. Try Load examples: the public ink_9um run on every winding and two baselines (X-ray intensity, noise).</p>'; |
| if (good.length) out.insertAdjacentHTML('afterbegin', `<p class="dim">${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.</p>`); |
| } |
|
|
| |
|
|
| 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; |
| |
| |
| 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]); |
|
|
| |
| 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')); |
| }); |
| |
| const WHY = `<div class="bench-why"> |
| <h3>Why this matters for researchers</h3> |
| <p>The <a href="?bench" data-open-bench="compare">Ink Bench</a> 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.</p> |
| <p>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 <code>tools/inkbench.py</code> gives the same numbers in Python for training loops and CI. <a href="?bench" data-open-bench="cite">Cite or use this</a>.</p> |
| </div>`; |
| 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; |
|
|
