Spaces:

Tarive
/

HRM

Build error

App Files Files Community

HRM / puzzle_visualizer.html

imone

Release

bd62227 8 months ago

raw

history blame contribute delete

14.1 kB

	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="UTF-8" />
	<title>ARC‐Converted Dataset Visualizer (Upload Local Folder)</title>
	<style>
	body {
	font-family: sans-serif;
	margin: 16px;
	}
	.selector-area {
	margin-bottom: 1rem;
	}
	.grid-canvas {
	margin: 4px;
	border: 1px solid #ccc;
	}
	.example-container {
	display: inline-block;
	margin: 0 16px 16px 0;
	vertical-align: top;
	}
	.puzzle-display {
	margin-top: 1rem;
	}
	.puzzle-id {
	font-weight: bold;
	margin-bottom: 0.5rem;
	}
	#groupList, #puzzleList {
	margin: 1rem 0;
	}
	.group-item, .puzzle-item {
	cursor: pointer;
	margin: 4px 8px 4px 0;
	padding: 2px 6px;
	border: 1px solid #aaa;
	display: inline-block;
	}
	.group-item:hover, .puzzle-item:hover {
	background: #eef;
	}
	</style>
	</head>
	<body>
	<h1>ARC‐Converted Dataset Visualizer (Local Directory)</h1>

	<div class="selector-area">
	<!-- 1) Directory input with webkitdirectory, mozdirectory -->
	<label>Upload ARC Folder:</label>
	<input type="file" id="folderInput"
	webkitdirectory mozdirectory multiple
	onchange="onFolderSelected(event)" />
	<br><br>

	<!-- 2) We'll enable set/subset selection after user chooses a folder and data is validated -->
	<label>Set:</label>
	<select id="setSelect" disabled>
	<option value="train">train</option>
	<option value="test">test</option>
	</select>

	<label> Subset:</label>
	<select id="subsetSelect" disabled>
	<option value="all">all</option>
	</select>

	<button id="loadBtn" disabled>Load</button>
	</div>

	<div>
	<div id="groupList"></div>
	<div id="puzzleList"></div>
	<div class="puzzle-display" id="puzzleView"></div>
	</div>

	<!--
	3) Use local 'assets/npyjs.js' from your project folder instead of a CDN.
	Make sure 'assets/npyjs.js' is the unbundled or UMD version that doesn't
	contain "import" statements.
	-->
	<script src="assets/npyjs.js"></script>

	<script>
	/***************************************************************************
	* Global Maps & Variables
	***************************************************************************/

	// Map from "train/all__inputs.npy" => File, etc.
	let filesByPath = {};

	// Once loaded, we store typed arrays for the chosen set/subset
	let inputsArr, labelsArr;
	let puzzleIndicesArr, groupIndicesArr, puzzleIdentifiersArr;
	let identifiersJson;

	// The shape of inputs is [N_examples, seqLen], so we discover seqLen & gridSize
	let seqLen = 0;
	let gridSize = 0;


	/***************************************************************************
	* 1) Handle folder selection: read all files, find identifiers.json,
	* remove topmost folder from each file path, validate.
	***************************************************************************/
	function onFolderSelected(event) {
	filesByPath = {};
	const fileList = event.target.files;
	if (!fileList \|\| fileList.length === 0) {
	alert("No files selected!");
	return;
	}

	// We'll gather all webkitRelativePaths
	const paths = [];
	for (let i = 0; i < fileList.length; i++) {
	// Typically "arc-aug-10/train/all__inputs.npy", etc.
	const file = fileList[i];
	const relPath = file.webkitRelativePath \|\| file.mozRelativePath \|\| file.name;
	paths.push(relPath);
	}

	// 1. Check if we have "identifiers.json" somewhere.
	const idPath = paths.find(p => p.endsWith("identifiers.json"));
	if (!idPath) {
	alert("Error: No 'identifiers.json' found in the uploaded folder.");
	return;
	}

	// 2. Derive the top-level directory from that file's path
	// e.g. if idPath = "arc-aug-10/identifiers.json", topDir = "arc-aug-10"
	// If there's no slash, topDir = "" => do nothing
	let topDir = "";
	const lastSlash = idPath.lastIndexOf("/");
	if (lastSlash >= 0) {
	topDir = idPath.substring(0, lastSlash);
	}

	// 3. Rebuild filesByPath with the top folder removed.
	// For example, if topDir = "arc-aug-10", then "arc-aug-10/train/all__inputs.npy"
	// becomes "train/all__inputs.npy"
	for (let i = 0; i < fileList.length; i++) {
	const file = fileList[i];
	let relPath = file.webkitRelativePath \|\| file.mozRelativePath \|\| file.name;
	// If relPath starts with "arc-aug-10/", remove that prefix
	if (topDir && relPath.startsWith(topDir + "/")) {
	relPath = relPath.substring(topDir.length + 1);
	}
	filesByPath[relPath] = file;
	}

	// Enable set/subset selection and "Load"
	document.getElementById("setSelect").disabled = false;
	document.getElementById("subsetSelect").disabled = false;
	document.getElementById("loadBtn").disabled = false;
	}

	// When user clicks "Load," parse the .npy for the chosen set/subset
	document.getElementById("loadBtn").addEventListener("click", async () => {
	document.getElementById("groupList").innerHTML = "";
	document.getElementById("puzzleList").innerHTML = "";
	document.getElementById("puzzleView").innerHTML = "";

	const setName = document.getElementById("setSelect").value; // e.g. "train"
	const subsetName = document.getElementById("subsetSelect").value; // e.g. "all"

	try {
	await loadDataset(setName, subsetName);
	buildGroupList(); // show groups
	} catch (err) {
	console.error(err);
	alert("Error while loading dataset: " + err);
	}
	});


	/***************************************************************************
	* 2) Load .npy from local files using Npyjs + FileReader (ArrayBuffer)
	***************************************************************************/
	async function loadDataset(setName, subsetName) {
	const prefix = `${setName}/${subsetName}__`;
	// e.g. "train/all__inputs.npy"
	const inputsPath = prefix + "inputs.npy";
	const labelsPath = prefix + "labels.npy";
	const pIdxPath = prefix + "puzzle_indices.npy";
	const gIdxPath = prefix + "group_indices.npy";
	const pIdsPath = prefix + "puzzle_identifiers.npy";
	const identifiersPath = "identifiers.json";

	// Check existence
	const needed = [inputsPath, labelsPath, pIdxPath, gIdxPath, pIdsPath, identifiersPath];
	for (const f of needed) {
	if (!filesByPath[f]) {
	throw new Error(`Missing file: ${f}`);
	}
	}

	// parseNpy => read from File -> ArrayBuffer -> Npyjs => typed array
	const inputsNpy = await parseNpy(filesByPath[inputsPath]);
	const labelsNpy = await parseNpy(filesByPath[labelsPath]);
	const puzzleIndicesNpy= await parseNpy(filesByPath[pIdxPath]);
	const groupIndicesNpy = await parseNpy(filesByPath[gIdxPath]);
	const puzzleIdsNpy = await parseNpy(filesByPath[pIdsPath]);

	inputsArr = inputsNpy.data;
	labelsArr = labelsNpy.data;
	puzzleIndicesArr = puzzleIndicesNpy.data;
	groupIndicesArr = groupIndicesNpy.data;
	puzzleIdentifiersArr = puzzleIdsNpy.data;

	// shape e.g. [N_examples, seqLen]
	seqLen = inputsNpy.shape[1];
	gridSize = Math.sqrt(seqLen);

	// read JSON
	identifiersJson = await readJsonFile(filesByPath[identifiersPath]);
	}

	/***************************************************************************
	* parseNpy => read a File as ArrayBuffer, parse with npyjs
	***************************************************************************/
	function parseNpy(file) {
	return new Promise((resolve, reject) => {
	const reader = new FileReader();
	reader.onload = async () => {
	try {
	const arrayBuffer = reader.result;
	const npy = new npyjs();
	resolve(await npy.parse(arrayBuffer));
	} catch (err) {
	reject(err);
	}
	};
	reader.onerror = err => reject(err);
	reader.readAsArrayBuffer(file);
	});
	}

	/***************************************************************************
	* readJsonFile => read a local JSON file into object
	***************************************************************************/
	function readJsonFile(file) {
	return new Promise((resolve, reject) => {
	const reader = new FileReader();
	reader.onload = () => {
	try {
	const obj = JSON.parse(reader.result);
	resolve(obj);
	} catch (err) {
	reject(err);
	}
	};
	reader.onerror = (err) => reject(err);
	reader.readAsText(file);
	});
	}

	/***************************************************************************
	* 3) Build group list in UI
	***************************************************************************/
	function buildGroupList() {
	document.getElementById("groupList").innerHTML = "<h3>Groups</h3>";
	const groupListDiv = document.getElementById("groupList");

	const nGroups = groupIndicesArr.length - 1;
	for (let g = 0; g < nGroups; g++) {
	const div = document.createElement("span");
	div.className = "group-item";
	div.textContent = `Group ${g}`;
	div.onclick = () => onSelectGroup(g);
	groupListDiv.appendChild(div);
	}
	}

	/***************************************************************************
	* onSelectGroup => show puzzles in that group
	***************************************************************************/
	function onSelectGroup(groupIndex) {
	document.getElementById("puzzleList").innerHTML = "";
	document.getElementById("puzzleView").innerHTML = "";

	const puzzleListDiv = document.getElementById("puzzleList");
	puzzleListDiv.innerHTML = `<h4>Puzzles in Group ${groupIndex}</h4>`;

	const firstPuzzle = groupIndicesArr[groupIndex];
	const lastPuzzle = groupIndicesArr[groupIndex + 1];

	for (let p = firstPuzzle; p < lastPuzzle; p++) {
	const puzzleIntId = puzzleIdentifiersArr[p];
	const puzzleStrId = (puzzleIntId < identifiersJson.length)
	? identifiersJson[puzzleIntId]
	: "<unknown>";

	const div = document.createElement("span");
	div.className = "puzzle-item";
	div.textContent = `Puzzle #${p} [ID=${puzzleIntId}: ${puzzleStrId}]`;
	div.onclick = () => onSelectPuzzle(p);
	puzzleListDiv.appendChild(div);
	}
	}

	/***************************************************************************
	* onSelectPuzzle => show each example
	***************************************************************************/
	function onSelectPuzzle(puzzleIndex) {
	const puzzleView = document.getElementById("puzzleView");
	puzzleView.innerHTML = "";

	// puzzle ID
	const puzzleIntId = puzzleIdentifiersArr[puzzleIndex];
	const puzzleStrId = (puzzleIntId < identifiersJson.length)
	? identifiersJson[puzzleIntId]
	: "<unknown>";

	const titleDiv = document.createElement("div");
	titleDiv.className = "puzzle-id";
	titleDiv.textContent = `Puzzle #${puzzleIndex} — ID: ${puzzleStrId}`;
	puzzleView.appendChild(titleDiv);

	// Examples are [puzzleIndicesArr[p], puzzleIndicesArr[p+1])
	const firstExample = puzzleIndicesArr[puzzleIndex];
	const lastExample = puzzleIndicesArr[puzzleIndex + 1];

	for (let e = firstExample; e < lastExample; e++) {
	const inputSeq = slice1D(inputsArr, eseqLen, (e+1)seqLen);
	const outputSeq = slice1D(labelsArr, eseqLen, (e+1)seqLen);

	const inputGrid = decodeGrid(inputSeq);
	const outputGrid = decodeGrid(outputSeq);

	const exDiv = document.createElement("div");
	exDiv.className = "example-container";
	exDiv.appendChild(document.createTextNode(`Example ${e}`));
	exDiv.appendChild(document.createElement("br"));

	exDiv.appendChild(renderGrid(inputGrid));
	exDiv.appendChild(renderGrid(outputGrid));

	puzzleView.appendChild(exDiv);
	}
	}

	/***************************************************************************
	* slice1D => typed array slicing
	***************************************************************************/
	function slice1D(arr, start, end) {
	const result = new Uint32Array(end - start);
	for (let i = start; i < end; i++) {
	result[i - start] = Number(arr[i]);
	}
	return result;
	}

	/***************************************************************************
	* decodeGrid => turn the flattened seq of length=gridSize^2 into 2D
	***************************************************************************/
	function decodeGrid(seq) {
	const grid = [];
	let idx = 0;
	for (let r = 0; r < gridSize; r++) {
	const row = [];
	for (let c = 0; c < gridSize; c++) {
	row.push(seq[idx]);
	idx++;
	}
	grid.push(row);
	}
	return grid;
	}

	/***************************************************************************
	* renderGrid => draws a 2D grid to <canvas>
	***************************************************************************/
	function renderGrid(grid2d) {
	const rows = grid2d.length;
	const cols = grid2d[0].length;
	const scale = 10;

	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 val = grid2d[r][c];
	ctx.fillStyle = indexToColor(val);
	ctx.fillRect(c * scale, r * scale, scale, scale);
	}
	}
	return canvas;
	}

	/***************************************************************************
	* indexToColor => color palette:
	* 0 => pad => white
	* 1 => eos => light gray
	* 2..11 => original color(0..9)
	***************************************************************************/
	function indexToColor(value) {
	if (value === 0) return "#FFFFFF"; // pad => white
	if (value === 1) return "#DDDDDD"; // eos => light gray

	// shift by 2 => original color in [0..9]
	const colorIdx = value - 2;
	const palette = [
	"#000000", // color0 => black
	"#FF0000", // color1 => red
	"#00FF00", // color2 => green
	"#0000FF", // color3 => blue
	"#FFFF00", // color4 => yellow
	"#FFA500", // color5 => orange
	"#800080", // color6 => purple
	"#00FFFF", // color7 => cyan
	"#FFC0CB", // color8 => pink
	"#808080" // color9 => gray
	];
	if (colorIdx >= 0 && colorIdx < palette.length) {
	return palette[colorIdx];
	}
	return "#FFFFFF"; // fallback
	}
	</script>
	</body>
	</html>