Spaces:
Running
Running
| ; | |
| // The action rules mirror utils/board.py in the TranSGrid code repository. | |
| const ACTIONS = new Set([ | |
| "ROW_LEFT", "ROW_RIGHT", "ROW_UP", "ROW_DOWN", | |
| "COL_UP", "COL_DOWN", "COL_LEFT", "COL_RIGHT", | |
| "BLOCK_CW", "BLOCK_CCW", | |
| ]); | |
| const CELL = 52; | |
| function actionMoves(action, n) { | |
| if (!Array.isArray(action) || !ACTIONS.has(action[0])) { | |
| throw new Error(`Unknown action: ${JSON.stringify(action)}`); | |
| } | |
| const [name, a, b] = action; | |
| const block = name.startsWith("BLOCK"); | |
| if (action.length !== (block ? 3 : 2) || !Number.isInteger(a) || | |
| (block && !Number.isInteger(b))) { | |
| throw new Error(`Invalid arguments for ${name}`); | |
| } | |
| if (block ? n < 2 || a < 0 || b < 0 || a > n - 2 || b > n - 2 | |
| : a < 0 || a >= n) { | |
| throw new Error(`Action index out of range: ${JSON.stringify(action)}`); | |
| } | |
| const moves = []; | |
| const add = (r0, c0, r1, c1) => moves.push({ r0, c0, r1, c1 }); | |
| if (name === "ROW_LEFT" || name === "ROW_RIGHT") { | |
| const shift = name === "ROW_LEFT" ? -1 : 1; | |
| for (let c = 0; c < n; c++) add(a, c, a, (c + shift + n) % n); | |
| } else if (name === "ROW_UP" || name === "ROW_DOWN") { | |
| const r2 = (a + (name === "ROW_UP" ? -1 : 1) + n) % n; | |
| for (let c = 0; c < n; c++) { add(a, c, r2, c); add(r2, c, a, c); } | |
| } else if (name === "COL_UP" || name === "COL_DOWN") { | |
| const shift = name === "COL_UP" ? -1 : 1; | |
| for (let r = 0; r < n; r++) add(r, a, (r + shift + n) % n, a); | |
| } else if (name === "COL_LEFT" || name === "COL_RIGHT") { | |
| const c2 = (a + (name === "COL_LEFT" ? -1 : 1) + n) % n; | |
| for (let r = 0; r < n; r++) { add(r, a, r, c2); add(r, c2, r, a); } | |
| } else { | |
| const cycle = [[a, b], [a, b + 1], [a + 1, b + 1], [a + 1, b]]; | |
| if (name === "BLOCK_CCW") cycle.reverse(); | |
| for (let k = 0; k < 4; k++) { | |
| add(...cycle[k], ...cycle[(k + 1) % 4]); | |
| } | |
| } | |
| return moves; | |
| } | |
| function applyAction(grid, action) { | |
| const n = grid.length; | |
| const next = grid.map(row => row.slice()); | |
| for (const { r0, c0, r1, c1 } of actionMoves(action, n)) { | |
| next[r1][c1] = grid[r0][c0]; | |
| } | |
| return next; | |
| } | |
| function boardsEqual(a, b) { | |
| return JSON.stringify(a) === JSON.stringify(b); | |
| } | |
| function actionLabel(action) { | |
| return `${action[0]}(${action.slice(1).join(", ")})`; | |
| } | |
| function describeAction(action, n) { | |
| const [name, a, b] = action; | |
| switch (name) { | |
| case "ROW_LEFT": return `Row ${a} shifts left by one cell.`; | |
| case "ROW_RIGHT": return `Row ${a} shifts right by one cell.`; | |
| case "ROW_UP": return `Row ${a} swaps with row ${(a - 1 + n) % n}.`; | |
| case "ROW_DOWN": return `Row ${a} swaps with row ${(a + 1) % n}.`; | |
| case "COL_UP": return `Column ${a} shifts up by one cell.`; | |
| case "COL_DOWN": return `Column ${a} shifts down by one cell.`; | |
| case "COL_LEFT": return `Column ${a} swaps with column ${(a - 1 + n) % n}.`; | |
| case "COL_RIGHT": return `Column ${a} swaps with column ${(a + 1) % n}.`; | |
| case "BLOCK_CW": return `The 2 × 2 block at (${a}, ${b}) rotates clockwise.`; | |
| case "BLOCK_CCW": return `The 2 × 2 block at (${a}, ${b}) rotates counterclockwise.`; | |
| } | |
| return ""; | |
| } | |
| // Worked examples for the "Atomic actions" tab. Each one is applied to this | |
| // board with applyAction, so the "After" boards always follow the rules above. | |
| // No digit repeats within a row, a column or a 2 × 2 block, which makes every | |
| // moved cell visibly change. | |
| const ATOMIC_BOARD = [ | |
| [2, 9, 4, 7, 5, 6], | |
| [4, 7, 0, 3, 9, 1], | |
| [3, 2, 9, 8, 6, 0], | |
| [9, 6, 3, 2, 7, 8], | |
| [0, 4, 1, 6, 3, 5], | |
| [1, 5, 2, 9, 4, 7], | |
| ]; | |
| const ATOMIC_GROUPS = [ | |
| { | |
| title: "Row actions", params: "r", | |
| hint: n => `r is a row index from 0 to ${n - 1}.`, | |
| actions: [ | |
| { action: ["ROW_LEFT", 1], kind: "Shift", | |
| text: "Shifts row r one cell to the left. The first cell wraps around to the end of the row." }, | |
| { action: ["ROW_RIGHT", 1], kind: "Shift", | |
| text: "Shifts row r one cell to the right. The last cell wraps around to the start of the row." }, | |
| { action: ["ROW_UP", 3], kind: "Swap", | |
| text: "Swaps row r with the row above it. Row 0 wraps around and swaps with the last row." }, | |
| { action: ["ROW_DOWN", 3], kind: "Swap", | |
| text: "Swaps row r with the row below it. The last row wraps around and swaps with row 0." }, | |
| ], | |
| }, | |
| { | |
| title: "Column actions", params: "c", | |
| hint: n => `c is a column index from 0 to ${n - 1}.`, | |
| actions: [ | |
| { action: ["COL_UP", 1], kind: "Shift", | |
| text: "Shifts column c one cell up. The top cell wraps around to the bottom of the column." }, | |
| { action: ["COL_DOWN", 1], kind: "Shift", | |
| text: "Shifts column c one cell down. The bottom cell wraps around to the top of the column." }, | |
| { action: ["COL_LEFT", 3], kind: "Swap", | |
| text: "Swaps column c with the column to its left. Column 0 wraps around and swaps with the last column." }, | |
| { action: ["COL_RIGHT", 3], kind: "Swap", | |
| text: "Swaps column c with the column to its right. The last column wraps around and swaps with column 0." }, | |
| ], | |
| }, | |
| { | |
| title: "Block actions", params: "r, c", | |
| hint: n => `(r, c) is the top-left cell of a 2 × 2 block, so r and c run from 0 to ${n - 2}.`, | |
| actions: [ | |
| { action: ["BLOCK_CW", 2, 1], kind: "Rotate", | |
| text: "Rotates the 2 × 2 block whose top-left cell is (r, c) clockwise." }, | |
| { action: ["BLOCK_CCW", 2, 1], kind: "Rotate", | |
| text: "Rotates the 2 × 2 block whose top-left cell is (r, c) counterclockwise." }, | |
| ], | |
| }, | |
| ]; | |
| // Keep the pure board functions testable without loading the browser UI. | |
| if (typeof module !== "undefined") { | |
| module.exports = { actionMoves, applyAction, boardsEqual, ATOMIC_BOARD, ATOMIC_GROUPS }; | |
| } | |
| if (typeof document !== "undefined") { | |
| document.addEventListener("DOMContentLoaded", () => { | |
| const el = id => document.getElementById(id); | |
| const ui = { | |
| dataset: el("dataset"), level: el("level"), decoding: el("decoding"), | |
| length: el("length"), outcome: el("outcome"), random: el("random"), message: el("message"), | |
| gotoForm: el("goto-form"), gotoId: el("goto-id"), | |
| id: el("question-id"), questionLength: el("question-length"), | |
| title: el("step-label"), description: el("step-description"), | |
| resultBadge: el("result-badge"), initial: el("initial-board"), | |
| current: el("current-board"), target: el("target-board"), | |
| play: el("play"), pause: el("pause"), next: el("next"), | |
| reset: el("reset"), progress: el("progress"), actions: el("actions"), | |
| fileNote: el("file-note"), beamNote: el("beam-note"), summary: el("summary"), | |
| givenGroup: el("given-group"), givenActions: el("given-actions"), | |
| givenNote: el("given-note"), predictionNote: el("prediction-note"), | |
| tabs: Array.from(document.querySelectorAll('[role="tab"]')), | |
| atomicGroups: el("atomic-groups"), demoPanel: el("panel-interactive-demo"), | |
| footer: el("demo-footer"), | |
| }; | |
| const cache = new Map(); | |
| const state = { question: null, result: null, actions: [], chips: [], given: 0, grid: null, | |
| step: 0, playing: false, token: 0, loadSerial: 0 }; | |
| const closeDropdowns = []; | |
| function enhanceSelect(select) { | |
| const field = select.closest(".field"); | |
| const label = field.querySelector("label"); | |
| const dropdown = document.createElement("div"); | |
| dropdown.className = "dropdown"; | |
| const trigger = document.createElement("button"); | |
| trigger.type = "button"; | |
| trigger.className = "dropdown-trigger"; | |
| trigger.setAttribute("aria-haspopup", "listbox"); | |
| trigger.setAttribute("aria-expanded", "false"); | |
| const menu = document.createElement("div"); | |
| menu.className = "dropdown-menu"; | |
| menu.id = `${select.id}-menu`; | |
| menu.setAttribute("role", "listbox"); | |
| menu.setAttribute("aria-label", label.textContent.trim()); | |
| menu.hidden = true; | |
| trigger.setAttribute("aria-controls", menu.id); | |
| const options = Array.from(select.options).map(option => { | |
| const item = document.createElement("button"); | |
| item.type = "button"; | |
| item.className = "dropdown-option"; | |
| item.setAttribute("role", "option"); | |
| item.dataset.value = option.value; | |
| item.textContent = option.textContent; | |
| menu.append(item); | |
| item.addEventListener("click", () => { | |
| if (select.value !== option.value) { | |
| select.value = option.value; | |
| select.dispatchEvent(new Event("change", { bubbles: true })); | |
| } | |
| close(); | |
| trigger.focus(); | |
| }); | |
| return item; | |
| }); | |
| function sync() { | |
| trigger.textContent = select.selectedOptions[0].textContent; | |
| trigger.setAttribute("aria-label", `${label.textContent.trim()}: ${select.selectedOptions[0].textContent}`); | |
| options.forEach(item => item.setAttribute("aria-selected", String(item.dataset.value === select.value))); | |
| } | |
| function close() { | |
| menu.hidden = true; | |
| trigger.setAttribute("aria-expanded", "false"); | |
| } | |
| function open() { | |
| closeDropdowns.forEach(closeOther => closeOther()); | |
| menu.hidden = false; | |
| trigger.setAttribute("aria-expanded", "true"); | |
| options.find(item => item.dataset.value === select.value).focus(); | |
| } | |
| closeDropdowns.push(close); | |
| trigger.addEventListener("click", () => menu.hidden ? open() : close()); | |
| trigger.addEventListener("keydown", event => { | |
| if (event.key === "ArrowDown" || event.key === "ArrowUp") { | |
| event.preventDefault(); | |
| open(); | |
| } | |
| }); | |
| menu.addEventListener("keydown", event => { | |
| if (event.key === "Escape") { | |
| event.preventDefault(); | |
| close(); | |
| trigger.focus(); | |
| } else if (["ArrowDown", "ArrowUp", "Home", "End"].includes(event.key)) { | |
| event.preventDefault(); | |
| const index = options.indexOf(document.activeElement); | |
| const next = event.key === "Home" ? 0 : event.key === "End" ? options.length - 1 | |
| : (index + (event.key === "ArrowDown" ? 1 : -1) + options.length) % options.length; | |
| options[next].focus(); | |
| } else if (event.key === "Tab") { | |
| close(); | |
| } | |
| }); | |
| document.addEventListener("click", event => { | |
| if (!dropdown.contains(event.target)) close(); | |
| }); | |
| label.addEventListener("click", event => { | |
| event.preventDefault(); | |
| trigger.focus(); | |
| }); | |
| select.addEventListener("change", sync); | |
| select.addEventListener("resync", sync); | |
| dropdown.append(trigger, menu); | |
| select.after(dropdown); | |
| select.hidden = true; | |
| sync(); | |
| } | |
| [ui.dataset, ui.level, ui.decoding, ui.length, ui.outcome].forEach(enhanceSelect); | |
| // Each dataset pairs a question file with the folder and file-name tag of its saved predictions. | |
| // SCAN reuses the TranSGrid questions; its predictions are given a prefix of the answer. | |
| const DATASETS = { | |
| Test: { data: "data/test.jsonl", results: "results/Test", tag: "-test12" }, | |
| TranSGrid: { data: "data/transgrid.jsonl", results: "results/TranSGrid", tag: "" }, | |
| Decoupled: { data: "data/transgrid_decoupled.jsonl", results: "results/decoupling", tag: "-decoupled" }, | |
| SCAN: { data: "data/transgrid.jsonl", results: "results/action_explicit_goal", tag: "-prefix" }, | |
| }; | |
| function datasetPath() { | |
| return DATASETS[ui.dataset.value].data; | |
| } | |
| function resultPath() { | |
| const { results, tag } = DATASETS[ui.dataset.value]; | |
| return `${results}/level${ui.level.value}_grid_pair${tag}-${ui.decoding.value}-bs128.jsonl`; | |
| } | |
| // In SCAN the first L - 1 actions of the reference solution are part of the model's input. | |
| function givenNote(given, steps) { | |
| return given === 0 ? "No action is given because the reference length is 1." | |
| : `SCAN gives the first L − 1 = ${given} actions of the reference solution (L = ${steps}).`; | |
| } | |
| function stepTitle(index) { | |
| const suffix = index < state.given ? " · given" : ""; | |
| return `Step ${index + 1}/${state.actions.length}: ${actionLabel(state.actions[index])}${suffix}`; | |
| } | |
| async function readJsonl(path) { | |
| if (!cache.has(path)) { | |
| const promise = fetch(path).then(async response => { | |
| if (!response.ok) throw new Error(`${path}: HTTP ${response.status}`); | |
| const content = await response.text(); | |
| return content.split(/\r?\n/).filter(line => line.trim()).map((line, i) => { | |
| try { return JSON.parse(line); } | |
| catch { throw new Error(`${path}: invalid JSON on line ${i + 1}`); } | |
| }); | |
| }); | |
| cache.set(path, promise); | |
| promise.catch(() => cache.delete(path)); | |
| } | |
| return cache.get(path); | |
| } | |
| class SavedPredictionError extends Error {} | |
| function message(text, error = false) { | |
| ui.message.textContent = text; | |
| ui.message.classList.toggle("error", error); | |
| } | |
| function cancelPlayback() { | |
| state.token++; | |
| state.playing = false; | |
| } | |
| function buttons() { | |
| const ready = !!state.question; | |
| ui.play.disabled = !ready || state.playing; | |
| ui.pause.disabled = !state.playing; | |
| ui.next.disabled = !ready || state.playing || state.step >= state.actions.length; | |
| ui.reset.disabled = !ready || state.playing || state.step === 0; | |
| ui.play.textContent = ready && state.step >= state.actions.length ? "↻ Replay" : "▶ Play"; | |
| } | |
| function drawDigit(ctx, digit, x, y, color = "#14213b") { | |
| ctx.fillStyle = color; | |
| ctx.font = "700 29px system-ui, sans-serif"; | |
| ctx.textAlign = "center"; | |
| ctx.textBaseline = "middle"; | |
| ctx.fillText(String(digit), x + CELL / 2, y + CELL / 2 + 1); | |
| } | |
| function drawBoard(canvas, grid, options = {}) { | |
| if (!grid) return; | |
| const n = grid.length; | |
| const ratio = Math.max(1, window.devicePixelRatio || 1); | |
| const size = n * CELL; | |
| if (canvas.width !== Math.round(size * ratio)) { | |
| canvas.width = Math.round(size * ratio); | |
| canvas.height = Math.round(size * ratio); | |
| } | |
| const ctx = canvas.getContext("2d"); | |
| ctx.setTransform(ratio, 0, 0, ratio, 0, 0); | |
| ctx.clearRect(0, 0, size, size); | |
| const moves = options.moves || []; | |
| const moving = new Map(moves.map(m => [`${m.r0},${m.c0}`, m])); | |
| for (let r = 0; r < n; r++) for (let c = 0; c < n; c++) { | |
| const x = c * CELL, y = r * CELL; | |
| const affected = moving.has(`${r},${c}`); | |
| const changed = options.compareWith && grid[r][c] !== options.compareWith[r][c]; | |
| ctx.fillStyle = affected ? "#fff0b9" | |
| : changed && options.diffBackground ? "#fff0f3" : "#f7f9fc"; | |
| ctx.fillRect(x, y, CELL, CELL); | |
| ctx.strokeStyle = "#aeb9c9"; | |
| ctx.lineWidth = 1; | |
| ctx.strokeRect(x + .5, y + .5, CELL, CELL); | |
| if (!affected || options.phase === "before") { | |
| drawDigit(ctx, grid[r][c], x, y, changed ? "#b4234e" : "#14213b"); | |
| } | |
| } | |
| if (options.phase === "before") { | |
| ctx.fillStyle = "#cf3434"; | |
| ctx.font = "700 18px system-ui, sans-serif"; | |
| ctx.textAlign = "center"; | |
| ctx.textBaseline = "middle"; | |
| for (const m of moves) { | |
| let dr = m.r1 - m.r0, dc = m.c1 - m.c0; | |
| if (dr > 1) dr -= n; else if (dr < -1) dr += n; | |
| if (dc > 1) dc -= n; else if (dc < -1) dc += n; | |
| const arrow = dc < 0 ? "←" : dc > 0 ? "→" : dr < 0 ? "↑" : "↓"; | |
| ctx.fillText(arrow, m.c0 * CELL + CELL - 11, m.r0 * CELL + CELL - 12); | |
| } | |
| } else if (options.phase === "tween") { | |
| ctx.save(); | |
| ctx.beginPath(); | |
| ctx.rect(0, 0, size, size); | |
| ctx.clip(); | |
| for (const m of moves) { | |
| let dr = m.r1 - m.r0, dc = m.c1 - m.c0; | |
| if (dr > 1) dr -= n; else if (dr < -1) dr += n; | |
| if (dc > 1) dc -= n; else if (dc < -1) dc += n; | |
| const x = (m.c0 + dc * options.t) * CELL; | |
| const y = (m.r0 + dr * options.t) * CELL; | |
| const value = grid[m.r0][m.c0]; | |
| const color = options.compareWith && value !== options.compareWith[m.r0][m.c0] | |
| ? "#b4234e" : "#14213b"; | |
| drawDigit(ctx, value, x, y, color); | |
| if (x < 0 || x > size - CELL) drawDigit(ctx, value, x + (x < 0 ? size : -size), y, color); | |
| if (y < 0 || y > size - CELL) drawDigit(ctx, value, x, y + (y < 0 ? size : -size), color); | |
| } | |
| ctx.restore(); | |
| } | |
| } | |
| function render() { | |
| if (!state.question) return; | |
| const n = state.question.n; | |
| drawBoard(ui.initial, state.question.initial, { | |
| compareWith: state.question.target, diffBackground: true, | |
| }); | |
| drawBoard(ui.current, state.grid, { | |
| compareWith: state.question.target, diffBackground: true, | |
| }); | |
| drawBoard(ui.target, state.question.target, { compareWith: state.grid }); | |
| ui.progress.textContent = `${state.step} / ${state.actions.length} actions`; | |
| if (state.step === 0) { | |
| ui.title.textContent = "Start"; | |
| ui.description.textContent = "The current board matches the initial board."; | |
| } else { | |
| const action = state.actions[state.step - 1]; | |
| ui.title.textContent = stepTitle(state.step - 1); | |
| ui.description.textContent = describeAction(action, n); | |
| } | |
| for (let i = 0; i < state.chips.length; i++) { | |
| const child = state.chips[i]; | |
| child.classList.toggle("done", i < state.step); | |
| child.classList.toggle("active", state.playing && i === state.step); | |
| } | |
| if (state.step === state.actions.length) { | |
| const solved = boardsEqual(state.grid, state.question.target); | |
| if (state.result.solved !== solved) { | |
| message("Warning: replay outcome differs from the saved result. Check that the dataset and result files match.", true); | |
| } | |
| } | |
| buttons(); | |
| } | |
| async function selectExample(randomize = false, wantedId = null) { | |
| const serial = ++state.loadSerial; | |
| cancelPlayback(); | |
| const previous = state.question; | |
| state.question = null; | |
| state.grid = null; | |
| buttons(); | |
| for (const canvas of [ui.initial, ui.current, ui.target]) { | |
| canvas.width = 0; | |
| canvas.height = 0; | |
| } | |
| ui.id.textContent = "—"; | |
| ui.questionLength.textContent = "—"; | |
| ui.resultBadge.hidden = true; | |
| ui.title.textContent = "Loading example"; | |
| ui.description.textContent = ""; | |
| ui.progress.textContent = "0 / 0 actions"; | |
| ui.actions.replaceChildren(); | |
| ui.givenActions.replaceChildren(); | |
| ui.givenGroup.hidden = true; | |
| ui.givenNote.textContent = ""; | |
| ui.predictionNote.textContent = ""; | |
| ui.summary.textContent = ""; | |
| state.chips = []; | |
| ui.fileNote.textContent = ""; | |
| const dataPath = datasetPath(), predictionPath = resultPath(); | |
| message(`Loading ${dataPath} and ${predictionPath}…`); | |
| try { | |
| const [questions, predictions] = await Promise.all([ | |
| readJsonl(dataPath), readJsonl(predictionPath), | |
| ]); | |
| if (serial !== state.loadSerial) return; | |
| const requestedLength = ui.length.value, requestedOutcome = ui.outcome.value; | |
| const predictionById = new Map(predictions.map(row => [row.id, row])); | |
| const inLength = questions.filter(q => requestedLength === "all" || | |
| Number(q.steps) === Number(requestedLength)); | |
| const answered = inLength.filter(q => predictionById.has(q.id)); | |
| const solvedCount = answered.filter(q => predictionById.get(q.id).solved).length; | |
| const count = value => value.toLocaleString("en-US"); | |
| const optionText = select => select.selectedOptions[0].textContent; | |
| if (answered.length) { | |
| ui.summary.textContent = [optionText(ui.dataset), optionText(ui.level), optionText(ui.decoding), | |
| ...(requestedLength === "all" ? [] : [`reference length ${requestedLength}`])].join(" · ") + | |
| `: ${count(solvedCount)} of ${count(answered.length)} questions solved ` + | |
| `(${(100 * solvedCount / answered.length).toFixed(1)}%).`; | |
| } | |
| const eligible = requestedOutcome === "all" ? inLength : inLength.filter(q => | |
| predictionById.get(q.id)?.solved === (requestedOutcome === "solved")); | |
| const wanted = wantedId === null ? null : questions.find(q => q.id === wantedId); | |
| if (!eligible.length && !wanted) { | |
| ui.title.textContent = "No matching question"; | |
| message("No question matches this reference length and outcome for the selected model. Try changing one of them."); | |
| return; | |
| } | |
| let question = wanted || (!randomize && previous && eligible.find(q => q.id === previous.id)); | |
| if (!question) { | |
| const pool = randomize && previous && eligible.length > 1 | |
| ? eligible.filter(q => q.id !== previous.id) : eligible; | |
| question = pool[Math.floor(Math.random() * pool.length)]; | |
| } | |
| const prediction = predictionById.get(question.id); | |
| if (!prediction) throw new Error(`Question ${question.id} is missing from ${predictionPath}`); | |
| if (!boardsEqual(question.initial, prediction.initial) || | |
| !boardsEqual(question.target, prediction.target)) { | |
| throw new Error(`Question ${question.id} does not match ${predictionPath}`); | |
| } | |
| if (!Array.isArray(prediction.pred)) throw new Error(`Question ${question.id} has no pred action list.`); | |
| const hasGiven = prediction.given != null; | |
| const given = prediction.given ?? 0; | |
| if (!Number.isInteger(given) || given < 0 || given > prediction.pred.length) { | |
| throw new Error(`Question ${question.id} has an invalid given prefix in ${predictionPath}`); | |
| } | |
| try { | |
| let finalGrid = question.initial.map(row => row.slice()); | |
| for (const action of prediction.pred) finalGrid = applyAction(finalGrid, action); | |
| } catch (error) { | |
| throw new SavedPredictionError(`Question ${question.id}: the saved prediction contains an illegal action (${error.message}). Draw another question.`); | |
| } | |
| state.question = question; | |
| state.result = prediction; | |
| state.actions = prediction.pred; | |
| state.given = given; | |
| state.grid = question.initial.map(row => row.slice()); | |
| state.step = 0; | |
| ui.id.textContent = String(question.id); | |
| ui.questionLength.textContent = String(question.steps); | |
| ui.resultBadge.textContent = prediction.solved ? "Solved" : "Not solved"; | |
| ui.resultBadge.className = `result-badge ${prediction.solved ? "solved" : "unsolved"}`; | |
| ui.resultBadge.title = "Outcome of the saved model prediction"; | |
| ui.resultBadge.hidden = false; | |
| state.chips = state.actions.map((action, i) => { | |
| const item = document.createElement("li"); | |
| item.textContent = `${i + 1}. ${actionLabel(action)}`; | |
| return item; | |
| }); | |
| ui.givenActions.replaceChildren(...state.chips.slice(0, given)); | |
| ui.actions.replaceChildren(...state.chips.slice(given)); | |
| ui.givenGroup.hidden = !hasGiven; | |
| if (hasGiven) ui.givenNote.textContent = givenNote(given, question.steps); | |
| if (state.actions.length === given) { | |
| ui.predictionNote.textContent = hasGiven ? "The model predicted no further actions." | |
| : "The model predicted no actions."; | |
| } | |
| ui.fileNote.textContent = `Data: ${dataPath} · Prediction: ${predictionPath}`; | |
| ui.beamNote.hidden = ui.decoding.value !== "beam8"; | |
| message(""); | |
| render(); | |
| } catch (error) { | |
| if (serial !== state.loadSerial) return; | |
| const saved = error instanceof SavedPredictionError; | |
| ui.title.textContent = saved ? "Question unavailable" : "Could not load example"; | |
| message(saved ? error.message | |
| : `${error.message}. Upload the file at the path shown above, then draw a question again.`, true); | |
| } | |
| } | |
| function reset() { | |
| cancelPlayback(); | |
| if (!state.question) return; | |
| state.grid = state.question.initial.map(row => row.slice()); | |
| state.step = 0; | |
| render(); | |
| } | |
| const sleep = ms => new Promise(resolve => setTimeout(resolve, ms)); | |
| // Highlights the moving cells, then slides them. Resolves to false if | |
| // isCancelled() turns true part-way through. | |
| async function playMoves(canvas, grid, moves, options, isCancelled) { | |
| drawBoard(canvas, grid, { ...options, moves, phase: "before" }); | |
| await sleep(500); | |
| if (isCancelled()) return false; | |
| for (let frame = 1; frame <= 8; frame++) { | |
| drawBoard(canvas, grid, { ...options, moves, phase: "tween", t: frame / 9 }); | |
| await sleep(70); | |
| if (isCancelled()) return false; | |
| } | |
| return true; | |
| } | |
| async function animateAction(token) { | |
| if (!state.question || state.step >= state.actions.length || token !== state.token) return false; | |
| const action = state.actions[state.step]; | |
| const moves = actionMoves(action, state.question.n); | |
| ui.title.textContent = stepTitle(state.step); | |
| ui.description.textContent = describeAction(action, state.question.n); | |
| const played = await playMoves( | |
| ui.current, state.grid, moves, | |
| { compareWith: state.question.target, diffBackground: true }, | |
| () => token !== state.token, | |
| ); | |
| if (!played) return false; | |
| state.grid = applyAction(state.grid, action); | |
| state.step++; | |
| render(); | |
| return true; | |
| } | |
| async function nextAction() { | |
| if (!state.question || state.playing || state.step >= state.actions.length) return; | |
| state.playing = true; | |
| const token = ++state.token; | |
| buttons(); | |
| await animateAction(token); | |
| if (token === state.token) { | |
| state.playing = false; | |
| render(); | |
| } | |
| } | |
| async function play() { | |
| if (!state.question || state.playing) return; | |
| if (state.step >= state.actions.length) reset(); | |
| state.playing = true; | |
| const token = ++state.token; | |
| buttons(); | |
| while (state.step < state.actions.length && token === state.token) { | |
| if (!await animateAction(token)) break; | |
| await sleep(350); | |
| } | |
| if (token === state.token) { | |
| state.playing = false; | |
| render(); | |
| } | |
| } | |
| function node(tag, className, text) { | |
| const element = document.createElement(tag); | |
| if (className) element.className = className; | |
| if (text !== undefined) element.textContent = text; | |
| return element; | |
| } | |
| // Atomic actions tab: one card per action, each replaying on its own board. | |
| const atomicCards = []; | |
| function drawAtomicStart(card) { | |
| drawBoard(card.before, ATOMIC_BOARD, { moves: card.moves, phase: "before" }); | |
| } | |
| function resetAtomicCard(card) { | |
| card.token++; | |
| card.playing = false; | |
| card.play.removeAttribute("aria-disabled"); | |
| drawAtomicStart(card); | |
| } | |
| async function playAtomicCard(card) { | |
| if (card.playing) return; | |
| card.playing = true; | |
| card.play.setAttribute("aria-disabled", "true"); | |
| const token = ++card.token; | |
| const isCancelled = () => token !== card.token; | |
| if (await playMoves(card.before, ATOMIC_BOARD, card.moves, {}, isCancelled)) { | |
| drawBoard(card.before, card.after, { compareWith: ATOMIC_BOARD, diffBackground: true }); | |
| await sleep(900); | |
| } | |
| if (!isCancelled()) resetAtomicCard(card); | |
| } | |
| function buildAtomicCard(group, item) { | |
| const n = ATOMIC_BOARD.length; | |
| const label = actionLabel(item.action); | |
| const card = { | |
| moves: actionMoves(item.action, n), | |
| after: applyAction(ATOMIC_BOARD, item.action), | |
| token: 0, playing: false, | |
| before: node("canvas"), afterCanvas: node("canvas"), | |
| play: node("button", "atomic-play", "▶ Play"), | |
| }; | |
| const rows = grid => grid.map((row, r) => `row ${r}: ${row.join(" ")}`).join("; "); | |
| for (const [canvas, when, grid] of [[card.before, "before", ATOMIC_BOARD], [card.afterCanvas, "after", card.after]]) { | |
| canvas.setAttribute("role", "img"); | |
| canvas.setAttribute("aria-label", `Board ${when} ${label}. ${rows(grid)}`); | |
| } | |
| card.play.type = "button"; | |
| card.play.setAttribute("aria-label", `Play ${label}`); | |
| card.play.addEventListener("click", () => playAtomicCard(card)); | |
| const name = node("h4", "atomic-name"); | |
| name.append(node("code", "", `${item.action[0]}(${group.params})`)); | |
| const title = node("div", "atomic-title"); | |
| title.append(name, node("span", "atomic-kind", item.kind)); | |
| const head = node("header", "atomic-head"); | |
| head.append(title, card.play); | |
| const figure = (caption, canvas) => { | |
| const element = node("figure"); | |
| element.append(node("figcaption", "", caption), canvas); | |
| return element; | |
| }; | |
| const arrow = node("span", "atomic-arrow", "→"); | |
| arrow.setAttribute("aria-hidden", "true"); | |
| const boards = node("div", "atomic-boards"); | |
| boards.append(figure("Before", card.before), arrow, figure("After", card.afterCanvas)); | |
| const example = node("p", "atomic-example", "Example: "); | |
| example.append(node("code", "", label)); | |
| const root = node("article", "atomic-card"); | |
| root.append(head, node("p", "atomic-text", item.text), example, boards); | |
| drawAtomicStart(card); | |
| drawBoard(card.afterCanvas, card.after, { compareWith: ATOMIC_BOARD, diffBackground: true }); | |
| atomicCards.push(card); | |
| return root; | |
| } | |
| function buildAtomicPanel() { | |
| const n = ATOMIC_BOARD.length; | |
| ui.atomicGroups.replaceChildren(...ATOMIC_GROUPS.map(group => { | |
| const grid = node("div", "atomic-grid"); | |
| grid.append(...group.actions.map(item => buildAtomicCard(group, item))); | |
| const section = node("section", "atomic-group"); | |
| section.append(node("h3", "", group.title), node("p", "atomic-hint", group.hint(n)), grid); | |
| return section; | |
| })); | |
| } | |
| // Tabs follow the WAI-ARIA pattern; the URL hash makes a tab linkable. | |
| let activeTab = ui.tabs[0]; | |
| // The demo's data (about 5 MB) is only fetched once its tab is first opened. | |
| let demoStarted = false; | |
| function startDemo() { | |
| if (demoStarted) return; | |
| demoStarted = true; | |
| selectExample(true); | |
| } | |
| function selectTab(tab, focus = false) { | |
| if (tab !== activeTab) { | |
| activeTab = tab; | |
| closeDropdowns.forEach(close => close()); | |
| for (const other of ui.tabs) { | |
| const selected = other === tab; | |
| other.setAttribute("aria-selected", String(selected)); | |
| other.tabIndex = selected ? 0 : -1; | |
| el(other.getAttribute("aria-controls")).hidden = !selected; | |
| } | |
| ui.footer.hidden = ui.demoPanel.hidden; | |
| if (!ui.demoPanel.hidden) startDemo(); | |
| // Stop whatever was animating in the panel that just got hidden. | |
| cancelPlayback(); | |
| render(); | |
| atomicCards.forEach(resetAtomicCard); | |
| } | |
| if (focus) tab.focus(); | |
| } | |
| function chooseTab(tab, focus = false) { | |
| selectTab(tab, focus); | |
| try { history.replaceState(null, "", `#${tab.dataset.hash}`); } | |
| catch { /* Some embedding contexts forbid changing the URL. */ } | |
| } | |
| function tabFromHash() { | |
| return ui.tabs.find(tab => tab.dataset.hash === location.hash.slice(1)); | |
| } | |
| ui.tabs.forEach((tab, index) => { | |
| tab.addEventListener("click", () => chooseTab(tab)); | |
| tab.addEventListener("keydown", event => { | |
| if (event.altKey || event.ctrlKey || event.metaKey || event.shiftKey) return; | |
| const last = ui.tabs.length - 1; | |
| const target = event.key === "ArrowRight" ? (index + 1) % ui.tabs.length | |
| : event.key === "ArrowLeft" ? (index + last) % ui.tabs.length | |
| : event.key === "Home" ? 0 : event.key === "End" ? last : -1; | |
| if (target < 0) return; | |
| event.preventDefault(); | |
| chooseTab(ui.tabs[target], true); | |
| }); | |
| }); | |
| window.addEventListener("hashchange", () => selectTab(tabFromHash() ?? ui.tabs[0])); | |
| ui.gotoForm.addEventListener("submit", async event => { | |
| event.preventDefault(); | |
| const text = ui.gotoId.value.trim(); | |
| if (!/^\d+$/.test(text)) { | |
| message("Enter a question ID as a whole number.", true); | |
| return; | |
| } | |
| const id = Number(text); | |
| try { | |
| const [questions, predictions] = await Promise.all([readJsonl(datasetPath()), readJsonl(resultPath())]); | |
| const question = questions.find(q => q.id === id); | |
| if (!question) { | |
| const ids = questions.map(q => q.id); | |
| message(`Question ${id} is not in ${ui.dataset.selectedOptions[0].textContent}. IDs run from ${Math.min(...ids)} to ${Math.max(...ids)}.`, true); | |
| return; | |
| } | |
| // Going to a question overrides any length or outcome filter that would hide it. | |
| const row = predictions.find(prediction => prediction.id === id); | |
| const hidden = (ui.length.value !== "all" && Number(question.steps) !== Number(ui.length.value)) || | |
| (ui.outcome.value !== "all" && row?.solved !== (ui.outcome.value === "solved")); | |
| if (hidden) { | |
| for (const select of [ui.length, ui.outcome]) { | |
| select.value = "all"; | |
| select.dispatchEvent(new Event("resync")); | |
| } | |
| } | |
| ui.gotoId.value = ""; | |
| selectExample(false, id); | |
| } catch (error) { | |
| message(`${error.message}. Upload the file at the path shown above, then try again.`, true); | |
| } | |
| }); | |
| ui.random.addEventListener("click", () => selectExample(true)); | |
| ui.dataset.addEventListener("change", () => selectExample(true)); | |
| ui.level.addEventListener("change", () => selectExample(false)); | |
| ui.decoding.addEventListener("change", () => selectExample(false)); | |
| ui.length.addEventListener("change", () => selectExample(false)); | |
| ui.outcome.addEventListener("change", () => selectExample(false)); | |
| ui.play.addEventListener("click", play); | |
| ui.pause.addEventListener("click", () => { cancelPlayback(); render(); }); | |
| ui.next.addEventListener("click", nextAction); | |
| ui.reset.addEventListener("click", reset); | |
| buildAtomicPanel(); | |
| const initialTab = tabFromHash(); | |
| if (initialTab) selectTab(initialTab); | |
| if (!ui.demoPanel.hidden) startDemo(); | |
| }); | |
| } | |