<meta charset="UTF-8" />

<title>ARC AGI 1 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>ARC AGI 1 Visualizer</h1>

<div class="controls">

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

<input id="predictUrl" type="text" value="/predict" style="width:440px" />

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

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

<label for="runName">Run (optional):</label>

<input id="runName" type="text" placeholder="2025-10-18_12-00-00" style="width:200px" />

<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 (2D, values 0..9):</label>

<textarea id="inputGridJson" rows="4" cols="60" placeholder="[[1,2,3],[3,2,1],...]"></textarea>

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

</div>

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

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

<div id="legendHolder" style="margin-top:10px"></div>

<script>

// Auto-fill predict URL to same-origin /predict if value looks empty or whitespace

(function initDefaultPredictUrl() {

try {

const el = document.getElementById('predictUrl');

const v = (el && el.value || '').trim();

if (!v || v === '/') {

el.value = (window.location.origin || '') + '/predict';

} else if (v.startsWith('/')) {

// If user kept a relative path, expand to absolute using current origin

el.value = (window.location.origin || '') + v;

}

} catch (e) { /* no-op */ }

})();

function renderGridToCanvas(grid, scale=18) {

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');

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

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

const v = grid[r][c];

ctx.fillStyle = arcValueToColor(v);

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

}

}

return canvas;

}

function arcValueToColor(v) {

// ARC uses colors 0..9. Provide a standard palette.

const palette = [

'#000000', // 0 black

'#0074D9', // 1 blue

'#FF4136', // 2 red

'#2ECC40', // 3 green

'#FFDC00', // 4 yellow

'#AAAAAA', // 5 gray

'#F012BE', // 6 magenta

'#FF851B', // 7 orange

'#7FDBFF', // 8 cyan

'#85144b' // 9 maroon

];

if (v >= 0 && v < palette.length) return palette[v];

return '#FFFFFF';

}

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 run = (document.getElementById('runName')?.value || '').trim();

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', 'arc');

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

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

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

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();

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'");

renderIO(data.input_maze, data.solved_maze, data.target_maze);

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

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

renderLegend();

} catch (err) {

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

console.error(err);

}

}

function renderIO(inp, pred, gt) {

// Ensure 2D

function to2D(g) {

if (Array.isArray(g[0])) return g;

const L = g.length; const s = Math.sqrt(L); if (!Number.isInteger(s)) throw new Error('Grid not square');

const out=[]; for (let r=0;r<s;r++) out.push(g.slice(r*s,(r+1)*s)); return out;

}

inp = to2D(inp);

pred = to2D(pred);

if (gt) gt = to2D(gt);

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'; headerIn.style.fontWeight='bold'; headerIn.style.marginBottom='4px'; left.appendChild(headerIn);

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

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

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

if (gt) { const headerGT=document.createElement('div'); headerGT.textContent='Ground truth'; headerGT.style.fontWeight='bold'; headerGT.style.marginBottom='4px'; extra.appendChild(headerGT); extra.appendChild(renderGridToCanvas(gt,18)); }

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

holder.appendChild(wrap);

}

function renderLegend() {

const legend = document.getElementById('legendHolder');

const colors = [

'#000000','#0074D9','#FF4136','#2ECC40','#FFDC00','#AAAAAA','#F012BE','#FF851B','#7FDBFF','#85144b'

];

const labels = ['0','1','2','3','4','5','6','7','8','9'];

const items = labels.map((lab, i) => {

return `<span style="display:inline-block;margin-right:10px"><span style="display:inline-block;width:16px;height:16px;background:${colors[i]};border:1px solid #000;margin-right:6px"></span>${lab}</span>`;

}).join('');

legend.innerHTML = '<strong>Legend:</strong> ' + items;

}

async function postInputGrid() {

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

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: 'arc', model: 'attn' };

const resp = await fetch(PREDICT_URL, {

method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(body)

});

if (!resp.ok) 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');

renderIO(data.input_maze, data.solved_maze, data.target_maze);

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

} catch (err) {

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

console.error(err);

}

}

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

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

</script>