<meta charset="UTF-8" />

<title>Sudoku Predictions Visualizer</title>

<style>

body { font-family: sans-serif; margin: 16px; }

.controls { margin-bottom: 12px; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }

.grid-canvas { border: 1px solid #333; margin-top: 8px; }

#status { margin-top: 8px; }

label { font-weight: 600; }

input, select, button { padding: 6px 8px; }

</style>

<h1>Sudoku Predictions Visualizer</h1>

<div class="controls">

<label for="task">Task:</label>

<select id="task">

<option value="maze">Maze</option>

<option value="sudoku" selected>Sudoku</option>

</select>

<label for="model">Model:</label>

<select id="model">

<option value="mlp" selected>MLP</option>

<option value="attn">Attention</option>

</select>

<label for="predictUrl">Predict URL:</label>

<input id="predictUrl" type="text" value="https://alphaxiv--tinyrecursive-eval-predict-dev.modal.run/" style="width:440px" />

<label for="exampleIndex">Example index:</label>

<input id="exampleIndex" type="number" value="0" min="0" style="width:80px" />

<label for="predFile">Preds file (optional):</label>

<input id="predFile" type="text" placeholder="step_xxx_all_preds.0" style="width:240px" />

<button id="load">Load Server Prediction</button>

<div style="flex-basis:100%"></div>

<label>Paste input grid JSON (9x9 or flat 81):</label>

<textarea id="inputGridJson" rows="4" cols="60" placeholder="[[5,3,0,0,7,0,0,0,0], ...]"></textarea>

<button id="sendInput">Predict from pasted grid (POST)</button>

</div>

<div id="status">Status: idle</div>

<div id="canvasHolder"></div>

<script>

function renderGridToCanvas(grid, scale=40) {

const rows = grid.length;

const cols = grid[0].length;

const canvas = document.createElement('canvas');

canvas.width = cols * scale;

canvas.height = rows * scale;

canvas.className = 'grid-canvas';

const ctx = canvas.getContext('2d');

ctx.fillStyle = '#fff';

ctx.fillRect(0,0,canvas.width,canvas.height);

ctx.strokeStyle = '#000';

ctx.lineWidth = 1;

for (let r = 0; r < rows; r++) {

for (let c = 0; c < cols; c++) {

const v = grid[r][c];

// Draw cell border

ctx.strokeRect(c*scale, r*scale, scale, scale);

// Draw number if > 0

if (v > 0) {

ctx.fillStyle = '#000';

ctx.font = `${Math.floor(scale*0.6)}px sans-serif`;

ctx.textAlign = 'center';

ctx.textBaseline = 'middle';

ctx.fillText(String(v), c*scale + scale/2, r*scale + scale/2);

}

}

}

// Thicker lines every 3 cells for Sudoku blocks

ctx.lineWidth = 3;

for (let i = 0; i <= 9; i += 3) {

// vertical

ctx.beginPath();

ctx.moveTo(i*scale, 0);

ctx.lineTo(i*scale, 9*scale);

ctx.stroke();

// horizontal

ctx.beginPath();

ctx.moveTo(0, i*scale);

ctx.lineTo(9*scale, i*scale);

ctx.stroke();

}

return canvas;

}

async function loadServerPrediction() {

const PREDICT_URL = document.getElementById('predictUrl').value.trim();

const idx = parseInt(document.getElementById('exampleIndex').value, 10);

const file = (document.getElementById('predFile')?.value || '').trim();

const task = document.getElementById('task').value;

const model = document.getElementById('model').value;

try {

if (!Number.isInteger(idx) || idx < 0) throw new Error('Example index must be a non-negative integer');

if (!PREDICT_URL) throw new Error('Predict URL is empty');

const url = new URL(PREDICT_URL);

url.searchParams.set('index', String(idx));

url.searchParams.set('task', task);

url.searchParams.set('model', model);

if (file) url.searchParams.set('file', file);

document.getElementById('status').textContent = 'Status: fetching ' + url.toString() + ' ...';

const resp = await fetch(url.toString(), { method: 'GET' });

if (!resp.ok) throw new Error('Server returned HTTP ' + resp.status);

const data = await resp.json();

// Validate fields

if (!data || !('solved_maze' in data)) throw new Error("Response JSON missing 'solved_maze'");

if (!('input_maze' in data)) throw new Error("Response JSON missing 'input_maze'");

// Normalize both to 2D 9x9 grids

let pred = data.solved_maze;

let inp = data.input_maze;

function toSquareGrid(arr) {

if (!Array.isArray(arr)) throw new Error('Grid is not an array');

if (Array.isArray(arr[0])) {

const h = arr.length, w = arr[0].length;

if (h !== w) throw new Error(`Grid not square: ${h}x${w}`);

return arr;

}

const L = arr.length;

const side = Math.sqrt(L);

if (!Number.isInteger(side)) throw new Error(`Grid length ${L} is not a perfect square`);

const grid2d = [];

for (let r = 0; r < side; r++) grid2d.push(arr.slice(r*side, (r+1)*side));

return grid2d;

}

pred = toSquareGrid(pred);

inp = toSquareGrid(inp);

// Sudoku specific sanity: 9x9

if (pred.length !== 9 || pred[0].length !== 9) throw new Error(`Predicted grid is ${pred.length}x${pred[0].length}, expected 9x9`);

if (inp.length !== 9 || inp[0].length !== 9) throw new Error(`Input grid is ${inp.length}x${inp[0].length}, expected 9x9`);

const holder = document.getElementById('canvasHolder');

holder.innerHTML = '';

const wrap = document.createElement('div');

wrap.style.display = 'grid';

wrap.style.gridTemplateColumns = '1fr 1fr 1fr';

wrap.style.gap = '16px';

const left = document.createElement('div');

const right = document.createElement('div');

const extra = document.createElement('div');

const headerIn = document.createElement('div');

headerIn.textContent = 'Input (9x9)';

headerIn.style.fontWeight = 'bold';

headerIn.style.marginBottom = '4px';

left.appendChild(headerIn);

left.appendChild(renderGridToCanvas(inp, 48));

const headerOut = document.createElement('div');

headerOut.textContent = 'Prediction (9x9)';

headerOut.style.fontWeight = 'bold';

headerOut.style.marginBottom = '4px';

right.appendChild(headerOut);

right.appendChild(renderGridToCanvas(pred, 48));

wrap.appendChild(left);

wrap.appendChild(right);

// Optional ground truth target (9x9) if present

if (data.target_maze) {

let gt = data.target_maze;

const headerGT = document.createElement('div');

headerGT.textContent = 'Ground truth (9x9)';

headerGT.style.fontWeight = 'bold';

headerGT.style.marginBottom = '4px';

extra.appendChild(headerGT);

function toSquareGrid(arr) {

if (Array.isArray(arr[0])) {

const h = arr.length, w = arr[0].length;

if (h !== w) throw new Error(`GT grid not square: ${h}x${w}`);

return arr;

}

const L = arr.length;

const side = Math.sqrt(L);

if (!Number.isInteger(side)) throw new Error(`GT grid length ${L} is not a perfect square`);

const grid2d = [];

for (let r = 0; r < side; r++) grid2d.push(arr.slice(r*side, (r+1)*side));

return grid2d;

}

gt = toSquareGrid(gt);

if (gt.length !== 9 || gt[0].length !== 9) throw new Error(`GT grid is ${gt.length}x${gt[0].length}, expected 9x9`);

extra.appendChild(renderGridToCanvas(gt, 48));

wrap.appendChild(extra);

}

holder.appendChild(wrap);

const retIdx = Number.isInteger(data.index) ? data.index : idx;

document.getElementById('status').textContent = 'Status: rendered (index: ' + retIdx + ', source: ' + (data.source_file || 'unknown') + ')';

} catch (err) {

document.getElementById('status').textContent = 'Status: error - ' + err.message;

console.error(err);

}

}

document.getElementById('load').addEventListener('click', loadServerPrediction);

async function postInputGrid() {

const PREDICT_URL = document.getElementById('predictUrl').value.trim();

const task = document.getElementById('task').value;

const model = document.getElementById('model').value;

const raw = document.getElementById('inputGridJson').value.trim();

try {

if (!PREDICT_URL) throw new Error('Predict URL is empty');

if (!raw) throw new Error('Paste an input grid JSON');

const body = { grid: JSON.parse(raw), task, model };

let resp = await fetch(PREDICT_URL, {

method: 'POST',

headers: { 'Content-Type': 'application/json' },

body: JSON.stringify(body),

});

if (!resp.ok) {

// Fallback: some deployments may only allow GET; retry with grid in query string

if (resp.status === 405) {

const url = new URL(PREDICT_URL);

url.searchParams.set('task', task);

if (model) url.searchParams.set('model', model);

url.searchParams.set('grid', JSON.stringify(body.grid));

resp = await fetch(url.toString(), { method: 'GET' });

if (!resp.ok) throw new Error('Server returned HTTP ' + resp.status + ' (fallback GET)');

} else {

throw new Error('Server returned HTTP ' + resp.status);

}

}

const data = await resp.json();

if (!data || !('solved_maze' in data) || !('input_maze' in data)) throw new Error('Missing fields in response');

const holder = document.getElementById('canvasHolder');

holder.innerHTML = '';

const wrap = document.createElement('div');

wrap.style.display = 'grid';

wrap.style.gridTemplateColumns = '1fr 1fr 1fr';

wrap.style.gap = '16px';

const left = document.createElement('div');

const right = document.createElement('div');

const extra = document.createElement('div');

const headerIn = document.createElement('div'); headerIn.textContent='Input (9x9)'; headerIn.style.fontWeight='bold'; headerIn.style.marginBottom='4px'; left.appendChild(headerIn);

let inp = data.input_maze; if (!Array.isArray(inp[0])) { const L=inp.length; const s=Math.sqrt(L); if (!Number.isInteger(s)) throw new Error('Input not square'); const g=[]; for(let r=0;r<s;r++) g.push(inp.slice(r*s,(r+1)*s)); inp=g; }

if (inp.length !== 9 || inp[0].length !== 9) throw new Error('Input must be 9x9');

left.appendChild(renderGridToCanvas(inp, 48));

const headerOut = document.createElement('div'); headerOut.textContent='Prediction (9x9)'; headerOut.style.fontWeight='bold'; headerOut.style.marginBottom='4px'; right.appendChild(headerOut);

let pred = data.solved_maze; if (!Array.isArray(pred[0])) { const L=pred.length; const s=Math.sqrt(L); if (!Number.isInteger(s)) throw new Error('Pred not square'); const g=[]; for(let r=0;r<s;r++) g.push(pred.slice(r*s,(r+1)*s)); pred=g; }

if (pred.length !== 9 || pred[0].length !== 9) throw new Error('Prediction must be 9x9');

right.appendChild(renderGridToCanvas(pred, 48));

if (data.target_maze) { let gt=data.target_maze; if (!Array.isArray(gt[0])) { const L=gt.length; const s=Math.sqrt(L); if (!Number.isInteger(s)) throw new Error('GT not square'); const g=[]; for(let r=0;r<s;r++) g.push(gt.slice(r*s,(r+1)*s)); gt=g; } if (gt.length!==9||gt[0].length!==9) throw new Error('GT must be 9x9'); const headerGT=document.createElement('div'); headerGT.textContent='Ground truth (9x9)'; headerGT.style.fontWeight='bold'; headerGT.style.marginBottom='4px'; extra.appendChild(headerGT); extra.appendChild(renderGridToCanvas(gt,48)); }

wrap.appendChild(left); wrap.appendChild(right); if (extra.childNodes.length>0) wrap.appendChild(extra); holder.appendChild(wrap);

document.getElementById('status').textContent = 'Status: rendered from POST';

} catch (err) {

document.getElementById('status').textContent = 'Status: error - ' + err.message;

console.error(err);

}

}

document.getElementById('sendInput').addEventListener('click', postInputGrid);

</script>