puzzle_visualizer.html

<!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,  e*seqLen, (e+1)*seqLen);
    const outputSeq = slice1D(labelsArr, e*seqLen, (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>