initial

2025-11-05 00:24:05 +00:00
commit b8856c0660
1157 changed files with 26817 additions and 0 deletions
--- a/docs/ARC_V1_TASK_IDS_README.md
+++ b/docs/ARC_V1_TASK_IDS_README.md
@ -0,0 +1,118 @@
+# ARC-AGI Version 1 Task IDs
+
+## Summary
+
+This directory contains the official list of **800 task IDs** from the original ARC-AGI Version 1 dataset.
+
+- **Source**: [fchollet/ARC-AGI](https://github.com/fchollet/ARC-AGI) v1.0.2
+- **Training Tasks**: 400
+- **Evaluation Tasks**: 400
+- **Total**: 800 tasks
+
+## Files Generated
+
+1. **arc_v1_official_task_ids.json** - Complete structured JSON with all V1 task IDs
+2. **arc_v1_all_ids.txt** - Simple text file with all task IDs
+3. **arc_v1_training_ids.txt** - Training task IDs only (400 tasks)
+4. **arc_v1_evaluation_ids.txt** - Evaluation task IDs only (400 tasks)
+
+## Key Findings About Your Dataset
+
+Your local `arc_data` directory contains:
+- **Training**: 1,000 tasks (600 more than V1)
+- **Evaluation**: 120 tasks (280 fewer than V1)
+- **Total**: 1,120 tasks
+
+This indicates your dataset is **NOT the original V1** and likely contains:
+- Extended/augmented training data
+- Potentially a subset of evaluation data
+- Possibly a mix of V1 and newer tasks
+
+## How to Identify V1 Tasks in Your Dataset
+
+Use the task IDs in `arc_v1_official_task_ids.json` as a reference:
+
+```python
+import json
+
+# Load official V1 IDs
+with open('arc_v1_official_task_ids.json', 'r') as f:
+    v1_data = json.load(f)
+    v1_task_ids = set(v1_data['all_task_ids'])
+
+# Check if a task is V1
+task_id = "007bbfb7"
+is_v1 = task_id in v1_task_ids
+print(f"Task {task_id} is V1: {is_v1}")
+```
+
+## Sample V1 Training Task IDs
+
+```
+007bbfb7
+00d62c1b
+017c7c7b
+025d127b
+045e512c
+0520fde7
+05269061
+05f2a901
+06df4c85
+08ed6ac7
+```
+
+## Sample V1 Evaluation Task IDs
+
+```
+00576224
+009d5c81
+00dbd492
+03560426
+05a7bcf2
+0607ce86
+0692e18c
+070dd51e
+08573cc6
+0934a4d8
+```
+
+## Usage
+
+To tag your database with version information:
+
+```python
+import json
+import pymysql
+
+# Load V1 task IDs
+with open('arc_v1_official_task_ids.json', 'r') as f:
+    v1_data = json.load(f)
+    v1_task_ids = set(v1_data['all_task_ids'])
+
+# Connect to database
+connection = pymysql.connect(...)
+cursor = connection.cursor()
+
+# Add version column (if not exists)
+cursor.execute("ALTER TABLE arc_jsons ADD COLUMN version VARCHAR(10)")
+
+# Tag V1 tasks
+for task_id in v1_task_ids:
+    cursor.execute(
+        "UPDATE arc_jsons SET version = 'v1' WHERE id = %s",
+        (task_id,)
+    )
+
+# Tag non-V1 tasks as v2 or unknown
+cursor.execute(
+    "UPDATE arc_jsons SET version = 'v2_or_extended' WHERE version IS NULL"
+)
+
+connection.commit()
+```
+
+## References
+
+- [ARC-AGI Repository](https://github.com/fchollet/ARC-AGI)
+- [ARC Prize](https://arcprize.org/)
+- [Original Paper: On the Measure of Intelligence](https://arxiv.org/abs/1911.01547)
--- a/docs/RETOOL_DATABASE_SETUP.md
+++ b/docs/RETOOL_DATABASE_SETUP.md
@ -0,0 +1,223 @@
+# Retool Setup with Database Query
+
+## Database Structure
+
+Your table has:
+- **id** (problem name, e.g., "0a1d4ef5")
+- **json** (ARC puzzle JSON stored as text)
+
+## Setup Instructions
+
+### Step 1: Create Database Query
+
+1. In Retool, add a **SQL Query** (or REST API query, depending on your database)
+2. Name it something like `arcPuzzleQuery`
+3. Write your query:
+
+```sql
+SELECT id, json
+FROM arc_problems
+WHERE id = {{ selectProblem.value }}
+-- Or to get all:
+-- SELECT id, json FROM arc_problems
+```
+
+### Step 2: Add JavaScript Code
+
+1. Create a new **JavaScript Query** named `arcRenderCode`
+2. Copy and paste the **entire contents** of `arcRender_retool.js`
+3. Set it to run **On page load** (optional, just loads the functions)
+
+### Step 3: Create HTML Component for Main Display
+
+1. Add an **HTML** component
+2. In the HTML content field, use:
+
+#### Option A: If json column is already parsed as object
+```javascript
+{{ renderArcPuzzle(arcPuzzleQuery.data[0].json) }}
+```
+
+#### Option B: If json column is stored as text string
+```javascript
+{{ renderArcPuzzle(JSON.parse(arcPuzzleQuery.data[0].json)) }}
+```
+
+#### Option C: With error handling
+```javascript
+{{
+  (() => {
+    try {
+      const puzzleData = arcPuzzleQuery.data && arcPuzzleQuery.data[0]
+        ? arcPuzzleQuery.data[0].json
+        : null;
+
+      if (!puzzleData) {
+        return '<div style="color: orange; padding: 20px;">No puzzle selected</div>';
+      }
+
+      // Parse if it's a string, otherwise use as-is
+      const data = typeof puzzleData === 'string'
+        ? JSON.parse(puzzleData)
+        : puzzleData;
+
+      return renderArcPuzzle(data);
+    } catch (error) {
+      return '<div style="color: red; padding: 20px;">Error loading puzzle: ' + error.message + '</div>';
+    }
+  })()
+}}
+```
+
+### Step 4: Add Problem Selector (Optional)
+
+1. Add a **Select** component named `selectProblem`
+2. Set **Data source** to query all problem IDs:
+
+```sql
+SELECT id, id as label FROM arc_problems ORDER BY id
+```
+
+3. Set the select to trigger `arcPuzzleQuery` on change
+
+### Step 5: Add Test Output Component (Separate)
+
+1. Add another **HTML** component for the test output answer
+2. Add a **Toggle** or **Button** component to control visibility
+3. In the HTML component:
+
+```javascript
+{{
+  (() => {
+    if (!toggleShowAnswer.value) {
+      return ''; // Hidden
+    }
+
+    try {
+      const puzzleData = arcPuzzleQuery.data && arcPuzzleQuery.data[0]
+        ? arcPuzzleQuery.data[0].json
+        : null;
+
+      if (!puzzleData) {
+        return '<div style="color: orange;">No puzzle data</div>';
+      }
+
+      const data = typeof puzzleData === 'string'
+        ? JSON.parse(puzzleData)
+        : puzzleData;
+
+      // Check if test output exists
+      if (!data.test || !data.test[0] || !data.test[0].output) {
+        return '<div style="color: orange;">No test output available</div>';
+      }
+
+      return renderTestOutput(data.test[0].output);
+    } catch (error) {
+      return '<div style="color: red;">Error: ' + error.message + '</div>';
+    }
+  })()
+}}
+```
+
+## Complete Retool Layout Example
+
+```
+┌─────────────────────────────────────┐
+│  Select Problem: [Dropdown ▼]       │
+└─────────────────────────────────────┘
+
+┌─────────────────────────────────────┐
+│  HTML Component (Main Puzzle)       │
+│  {{ renderArcPuzzle(...) }}         │
+│                                     │
+│  [Training Examples Display]        │
+│  [Test Input Display]               │
+└─────────────────────────────────────┘
+
+┌─────────────────────────────────────┐
+│  [Toggle] Show Test Answer          │
+└─────────────────────────────────────┘
+
+┌─────────────────────────────────────┐
+│  HTML Component (Test Output)       │
+│  {{ renderTestOutput(...) }}        │
+│  (Visible only if toggle is on)     │
+└─────────────────────────────────────┘
+```
+
+## Troubleshooting
+
+### "renderArcPuzzle is not defined"
+- Make sure the JavaScript query with the render functions is set to run on page load
+- Or copy the functions directly into the HTML component's JS section
+
+### "Unexpected token" or JSON parsing errors
+- Check if your json column returns a string or object
+- Use `console.log(typeof arcPuzzleQuery.data[0].json)` to check
+- Adjust parsing accordingly (use JSON.parse only if it's a string)
+
+### Puzzle not displaying
+- Check the browser console (F12) for errors
+- Verify query returned data: `{{ arcPuzzleQuery.data }}`
+- Test with a simple value first: `{{ JSON.stringify(arcPuzzleQuery.data[0]) }}`
+
+### Grid borders not showing correctly
+- Make sure the HTML component has enough width/height
+- Try setting min-height on the HTML component (e.g., 800px)
+
+## Alternative: Inline Function Approach
+
+If you have issues with the separate JavaScript query, you can inline everything:
+
+```javascript
+{{
+  // Color mapping for ARC puzzles (0-9)
+  const ARC_COLORS = {
+    0: '#000000', 1: '#0074D9', 2: '#FF4136', 3: '#2ECC40', 4: '#FFDC00',
+    5: '#AAAAAA', 6: '#F012BE', 7: '#FF851B', 8: '#7FDBFF', 9: '#85144b'
+  };
+
+  function renderGrid(grid, label) {
+    // ... paste full function here
+  }
+
+  function renderPair(inputGrid, outputGrid, exampleIndex) {
+    // ... paste full function here
+  }
+
+  function renderArcPuzzle(jsonData) {
+    // ... paste full function here
+  }
+
+  // Then call it
+  const data = typeof arcPuzzleQuery.data[0].json === 'string'
+    ? JSON.parse(arcPuzzleQuery.data[0].json)
+    : arcPuzzleQuery.data[0].json;
+
+  return renderArcPuzzle(data);
+}}
+```
+
+## Database Query Examples
+
+### PostgreSQL
+```sql
+SELECT id, json::text as json
+FROM arc_problems
+WHERE id = {{ selectProblem.value }}
+```
+
+### MySQL
+```sql
+SELECT id, json
+FROM arc_problems
+WHERE id = {{ selectProblem.value }}
+```
+
+### SQLite
+```sql
+SELECT id, json
+FROM arc_problems
+WHERE id = ?
+-- Use {{ selectProblem.value }} as parameter
+```
--- a/docs/RETOOL_INLINE_SETUP.md
+++ b/docs/RETOOL_INLINE_SETUP.md
@ -0,0 +1,185 @@
+# Retool Inline Setup Guide - Single File Version
+
+This guide shows you how to use the inline versions that don't require separate JavaScript queries.
+
+## File Overview
+
+1. **arcRender_retool_inline.js** - Main puzzle renderer (training + test input)
+2. **arcRender_testOutput_inline.js** - Test output/answer renderer (separate, with toggle)
+
+## Step-by-Step Setup
+
+### Step 1: Create Database Query
+
+1. Add a **SQL Query** component
+2. Name it: `arcPuzzleQuery`
+3. Query:
+
+```sql
+SELECT id, json
+FROM your_table_name
+WHERE id = {{ selectProblem.value }}
+-- Replace with your actual table name
+```
+
+### Step 2: Create Problem Selector (Optional)
+
+1. Add a **Select** component
+2. Name it: `selectProblem`
+3. Set **Data source** to a query:
+
+```sql
+SELECT id, id as label FROM your_table_name ORDER BY id
+```
+
+4. Set the select to trigger `arcPuzzleQuery` on change
+
+### Step 3: Add Main Puzzle HTML Component
+
+1. Add an **HTML** component
+2. Copy the **ENTIRE contents** of `arcRender_retool_inline.js`
+3. Paste it wrapped in `{{ ... }}`:
+
+```javascript
+{{
+  (function() {
+    // ... PASTE ENTIRE arcRender_retool_inline.js CONTENT HERE ...
+  })()
+}}
+```
+
+4. **IMPORTANT:** Edit line 13 in the pasted code to match your query name:
+```javascript
+const queryData = arcPuzzleQuery.data; // Change if your query has different name
+```
+
+### Step 4: Add Test Output HTML Component (Optional)
+
+1. Add a **Toggle** or **Checkbox** component
+2. Name it: `toggleShowAnswer`
+
+3. Add another **HTML** component (below the main one)
+4. Copy the **ENTIRE contents** of `arcRender_testOutput_inline.js`
+5. Paste it wrapped in `{{ ... }}`:
+
+```javascript
+{{
+  (function() {
+    // ... PASTE ENTIRE arcRender_testOutput_inline.js CONTENT HERE ...
+  })()
+}}
+```
+
+6. **IMPORTANT:** Edit these lines in the pasted code:
+   - Line 15: `const shouldShow = toggleShowAnswer.value;` (your toggle name)
+   - Line 25: `const queryData = arcPuzzleQuery.data;` (your query name)
+
+## Quick Copy-Paste Example
+
+### For Main Puzzle Display:
+
+```javascript
+{{
+  (function() {
+    const queryData = arcPuzzleQuery.data; // YOUR QUERY NAME
+
+    if (!queryData || queryData.length === 0) {
+      return '<div style="color: orange; padding: 20px; font-family: Arial;">No puzzle data available.</div>';
+    }
+
+    const row = queryData[0];
+    let puzzleData;
+    try {
+      puzzleData = typeof row.json === 'string' ? JSON.parse(row.json) : row.json;
+    } catch (e) {
+      return '<div style="color: red; padding: 20px;">Error: ' + e.message + '</div>';
+    }
+
+    // ... rest of the code from arcRender_retool_inline.js ...
+  })()
+}}
+```
+
+## Customization
+
+### Change Query Name
+Find this line in the code:
+```javascript
+const queryData = arcPuzzleQuery.data; // YOUR QUERY NAME HERE
+```
+
+Change `arcPuzzleQuery` to your actual query component name.
+
+### Change Column Name
+If your JSON column is not named `json`, change this line:
+```javascript
+puzzleData = typeof row.json === 'string' // Change 'json' to your column name
+```
+
+### Change Toggle Name (for test output)
+Find this line in the test output code:
+```javascript
+const shouldShow = toggleShowAnswer.value; // YOUR TOGGLE NAME HERE
+```
+
+## Layout Example
+
+```
+┌─────────────────────────────────────┐
+│  Select: [Problem Dropdown ▼]       │
+└─────────────────────────────────────┘
+
+┌─────────────────────────────────────┐
+│  HTML Component 1                    │
+│  (Main Puzzle - Training + Test)    │
+│  {{ arcRender_retool_inline.js }}   │
+└─────────────────────────────────────┘
+
+┌─────────────────────────────────────┐
+│  [✓] Show Test Answer                │
+└─────────────────────────────────────┘
+
+┌─────────────────────────────────────┐
+│  HTML Component 2                    │
+│  (Test Output - Answer)              │
+│  {{ arcRender_testOutput_inline.js }}│
+└─────────────────────────────────────┘
+```
+
+## Troubleshooting
+
+### "queryData is not defined"
+- Make sure your query is named correctly
+- Check that the query has run successfully
+- Verify with `{{ arcPuzzleQuery.data }}` in a text component
+
+### "Cannot read property 'json' of undefined"
+- Query returned no data
+- Check your WHERE clause and selected value
+- Test query manually in SQL editor
+
+### JSON parsing error
+- Check if your json column is text or already an object
+- Try logging: `{{ typeof arcPuzzleQuery.data[0].json }}`
+- Adjust the parsing logic accordingly
+
+### Nothing displays
+- Check browser console (F12) for errors
+- Make sure HTML component has sufficient height
+- Try a simple test first: `{{ "test" }}`
+
+### Grids look wrong
+- Make sure the JSON structure is correct
+- Check that it has `train` and `test` properties
+- Verify with: `{{ JSON.stringify(arcPuzzleQuery.data[0]) }}`
+
+## Advantages of Inline Version
+
+✅ **Single component** - No separate JavaScript query needed
+✅ **Self-contained** - All code in one place
+✅ **Easy to customize** - Just edit the HTML component
+✅ **No dependencies** - Works immediately after paste
+
+## Performance Note
+
+The inline version recalculates on every Retool state change. For better performance with many components on the page, consider using the separate JavaScript query version ([arcRender_retool.js](arcRender_retool.js)) instead.
--- a/docs/RETOOL_USAGE.md
+++ b/docs/RETOOL_USAGE.md
@ -0,0 +1,162 @@
+# How to Use ARC Renderer in Retool
+
+## Setup Instructions
+
+### Step 1: Add the JavaScript Code
+
+1. In Retool, create a new **JavaScript Query** (or Code Block)
+2. Copy the entire contents of `arcRender.js`
+3. Paste it into the JavaScript Query
+4. Name it something like `arcRenderFunctions`
+
+### Step 2: Create HTML Component for Main Puzzle Display
+
+1. Add an **HTML Component** to your Retool app
+2. In the HTML content field, use the following:
+
+```javascript
+{{ renderArcPuzzle(query1.data) }}
+```
+
+Replace `query1.data` with your actual data source (could be from an API query, transformer, etc.)
+
+### Step 3: Create HTML Component for Test Output (Optional)
+
+1. Add another **HTML Component** for the test output answer
+2. Use:
+
+```javascript
+{{ renderTestOutput(query1.data.test[0].output) }}
+```
+
+3. You can control visibility with a Toggle component or Button
+
+## Usage Examples
+
+### Example 1: Basic Usage with API Query
+
+```javascript
+// In your HTML component:
+{{ renderArcPuzzle(arcPuzzleQuery.data) }}
+```
+
+### Example 2: With JSON Transformer
+
+If your data needs transformation:
+```javascript
+// In a Transformer:
+return {
+  train: transformedTrainData,
+  test: transformedTestData
+};
+
+// In HTML component:
+{{ renderArcPuzzle(transformer1.value) }}
+```
+
+### Example 3: Toggle Test Output
+
+**Setup:**
+1. Add a Toggle component (name it `showTestOutput`)
+2. Add an HTML component with conditional rendering:
+
+```javascript
+{{ showTestOutput.value ? renderTestOutput(arcPuzzleQuery.data.test[0].output) : '' }}
+```
+
+### Example 4: With Local JSON Data
+
+```javascript
+// In a JavaScript Query, define your data:
+const puzzleData = {
+  "train": [
+    {
+      "input": [[0, 1, 2], [3, 4, 5]],
+      "output": [[1, 2, 3], [4, 5, 6]]
+    }
+  ],
+  "test": [
+    {
+      "input": [[0, 0, 0], [1, 1, 1]],
+      "output": [[2, 2, 2], [3, 3, 3]]
+    }
+  ]
+};
+
+return puzzleData;
+
+// In HTML component:
+{{ renderArcPuzzle(jsQuery1.data) }}
+```
+
+## Data Structure Requirements
+
+Your JSON data must follow this structure:
+
+```json
+{
+  "train": [
+    {
+      "input": [[0, 1, 2], [3, 4, 5], [6, 7, 8]],
+      "output": [[1, 2, 3], [4, 5, 6], [7, 8, 9]]
+    }
+  ],
+  "test": [
+    {
+      "input": [[0, 1], [2, 3]],
+      "output": [[1, 2], [3, 4]]
+    }
+  ]
+}
+```
+
+- `train`: Array of training examples
+- `test`: Array of test examples
+- Each example has `input` and `output` as 2D arrays
+- Values are integers 0-9 representing colors
+
+## Troubleshooting
+
+### "Invalid JSON data" Error
+- Check that your data source is properly formatted
+- Verify the JSON structure matches the required format
+- Try parsing manually: `JSON.parse(yourDataSource)`
+
+### Grids Not Displaying
+- Ensure the HTML component has sufficient height/width
+- Check browser console for JavaScript errors
+- Verify data is being passed correctly with `{{ query1.data }}`
+
+### Colors Look Wrong
+- Verify your grid values are 0-9
+- Check the color mapping in the code matches ARC standard
+
+## Customization
+
+To modify styling, edit these values in `arcRender.js`:
+
+- **Cell size**: Change `cellSize = 20` (line 27)
+- **Grid border**: Change `border: 2px solid #000000` (line 38)
+- **Cell borders**: Change `border: 1px solid #DDDDDD` (line 48)
+- **Spacing**: Modify the spacing divs (lines 77, 91)
+- **Colors**: Edit the `ARC_COLORS` object (lines 8-19)
+
+## Functions Available
+
+### `renderArcPuzzle(jsonData)`
+- **Purpose**: Renders complete puzzle with training pairs and test input
+- **Input**: ARC puzzle JSON object or string
+- **Output**: HTML string
+- **Displays**: All training INPUT-OUTPUT pairs + Test INPUT only
+
+### `renderTestOutput(testOutputGrid)`
+- **Purpose**: Renders only the test output grid (the answer)
+- **Input**: 2D array representing test output
+- **Output**: HTML string
+- **Use case**: For showing/hiding the puzzle answer
+
+## Performance Notes
+
+- Fixed 20px cells work well for grids up to ~30×30
+- Larger grids may require scrolling in the HTML component
+- Consider adding overflow:auto to the HTML component for large puzzles
--- a/docs/test.html
+++ b/docs/test.html
@ -0,0 +1,248 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>ARC Puzzle Renderer Test</title>
+    <style>
+        body {
+            font-family: Arial, sans-serif;
+            padding: 20px;
+            background-color: #f5f5f5;
+        }
+        .container {
+            background-color: white;
+            padding: 20px;
+            border-radius: 8px;
+            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
+            max-width: 1400px;
+            margin: 0 auto;
+        }
+        h1 {
+            color: #333;
+            margin-bottom: 20px;
+        }
+        .section {
+            margin-top: 40px;
+            border-top: 2px solid #ddd;
+            padding-top: 20px;
+        }
+        .test-output-toggle {
+            margin-top: 20px;
+        }
+        button {
+            padding: 10px 20px;
+            background-color: #0074D9;
+            color: white;
+            border: none;
+            border-radius: 4px;
+            cursor: pointer;
+            font-size: 14px;
+            margin-right: 10px;
+        }
+        button:hover {
+            background-color: #0056b3;
+        }
+        #testOutputContainer {
+            margin-top: 20px;
+        }
+        .info {
+            background-color: #e7f3ff;
+            padding: 15px;
+            border-radius: 4px;
+            margin-bottom: 20px;
+        }
+    </style>
+</head>
+<body>
+    <div class="container">
+        <div id="puzzleContainer"></div>
+
+        <div class="section test-output-toggle">
+            <button onclick="loadAnotherExample()">Load Another Example</button>
+        </div>
+    </div>
+
+    <script>
+        // Color mapping for ARC puzzles (0-9)
+        const ARC_COLORS = {
+          0: '#000000', // black
+          1: '#0074D9', // blue
+          2: '#FF4136', // red
+          3: '#2ECC40', // green
+          4: '#FFDC00', // yellow
+          5: '#AAAAAA', // grey
+          6: '#F012BE', // magenta
+          7: '#FF851B', // orange
+          8: '#7FDBFF', // light blue
+          9: '#85144b'  // dark red
+        };
+
+        /**
+         * Renders a single grid as HTML
+         */
+        function renderGrid(grid, label) {
+          if (!grid || grid.length === 0) {
+            return '<div style="color: red;">Invalid grid data</div>';
+          }
+
+          const rows = grid.length;
+          const cols = grid[0].length;
+          const cellSize = 20; // Fixed 20px per cell
+
+          let html = '<div style="display: inline-block; margin: 10px;">';
+
+          // Add dimension label
+          if (label) {
+            html += `<div style="text-align: center; margin-bottom: 5px; font-size: 12px; color: #333;">${label}</div>`;
+          }
+
+          // Grid container with black border
+          html += `<div style="display: inline-block; border: 1px solid #000000;">`;
+
+          // Render each row
+          for (let r = 0; r < rows; r++) {
+            html += '<div style="display: flex; line-height: 0;">';
+
+            // Render each cell in the row
+            for (let c = 0; c < cols; c++) {
+              const cellValue = grid[r][c];
+              const color = ARC_COLORS[cellValue] || '#FFFFFF'; // Default to white if value unknown
+
+              html += `<div style="width: ${cellSize}px; height: ${cellSize}px; background-color: ${color}; outline: 0.5px solid rgba(200, 200, 200, 0.3); outline-offset: -0.5px;"></div>`;
+            }
+
+            html += '</div>'; // Close row
+          }
+
+          html += '</div>'; // Close grid container
+          html += '</div>'; // Close inline-block wrapper
+
+          return html;
+        }
+
+        /**
+         * Renders a training or test pair (input and output side-by-side)
+         */
+        function renderPair(inputGrid, outputGrid, exampleIndex) {
+          let html = '';
+
+          // Add spacing between examples (except for the first one)
+          if (exampleIndex > 0) {
+            html += '<div style="height: 40px;"></div>'; // 2 lines spacing
+          }
+
+          html += '<div style="display: flex; align-items: flex-start; justify-content: flex-start;">';
+
+          // Render input grid
+          const inputRows = inputGrid.length;
+          const inputCols = inputGrid[0].length;
+          html += renderGrid(inputGrid, `${inputCols}×${inputRows}`);
+
+          // Add spacing between input and output (2 cells worth = 40px)
+          html += '<div style="width: 40px;"></div>';
+
+          // Render output grid if provided
+          if (outputGrid) {
+            const outputRows = outputGrid.length;
+            const outputCols = outputGrid[0].length;
+            html += renderGrid(outputGrid, `${outputCols}×${outputRows}`);
+          }
+
+          html += '</div>'; // Close pair container
+
+          return html;
+        }
+
+        /**
+         * Main function: Renders complete ARC puzzle with training pairs and test input
+         */
+        function renderArcPuzzle(jsonData) {
+          // Parse JSON if string is provided
+          let data = jsonData;
+          if (typeof jsonData === 'string') {
+            try {
+              data = JSON.parse(jsonData);
+            } catch (e) {
+              return '<div style="color: red;">Error: Invalid JSON data</div>';
+            }
+          }
+
+          // Validate data structure
+          if (!data || !data.train || !data.test) {
+            return '<div style="color: red;">Error: JSON must contain "train" and "test" properties</div>';
+          }
+
+          let html = '<div style="font-family: Arial, sans-serif;">';
+
+          // === TRAINING SECTION ===
+          html += '<div style="margin-bottom: 60px;">';
+          html += '<h3 style="margin: 0 0 20px 0; color: #333;">Training Examples</h3>';
+
+          data.train.forEach((example, index) => {
+            html += renderPair(example.input, example.output, index);
+          });
+
+          html += '</div>'; // Close training section
+
+          // === TEST SECTION ===
+          html += '<div>';
+          html += '<h3 style="margin: 0 0 20px 0; color: #333;">Test</h3>';
+
+          data.test.forEach((example, index) => {
+            // Render both test input and output
+            html += renderPair(example.input, example.output, index);
+          });
+
+          html += '</div>'; // Close test section
+
+          html += '</div>'; // Close main container
+
+          return html;
+        }
+
+        // Global variables
+        let arcData = null;
+        let exampleIndex = 0;
+        const examples = ['0a1d4ef5.json', '0a2355a6.json', '0a938d79.json', '0b148d64.json'];
+
+        // Load and render puzzle
+        function loadPuzzle() {
+            if (!arcData) {
+                document.getElementById('puzzleContainer').innerHTML = '<div style="color: orange;">Loading puzzle data...</div>';
+                return;
+            }
+            document.getElementById('puzzleContainer').innerHTML = renderArcPuzzle(arcData);
+        }
+
+        // Load another example from files
+        function loadAnotherExample() {
+            exampleIndex = (exampleIndex + 1) % examples.length;
+            loadExampleByIndex(exampleIndex);
+        }
+
+        // Load specific example by index
+        function loadExampleByIndex(index) {
+            fetch('arc_examples/' + examples[index])
+                .then(response => {
+                    if (!response.ok) {
+                        throw new Error('File not found');
+                    }
+                    return response.json();
+                })
+                .then(data => {
+                    arcData = data;
+                    loadPuzzle();
+                })
+                .catch(error => {
+                    document.getElementById('puzzleContainer').innerHTML =
+                        '<div style="color: red;">Error loading puzzle file: ' + examples[index] +
+                        '<br>Make sure you are running a local server (e.g., python3 -m http.server)</div>';
+                });
+        }
+
+        // Initial load - load first example
+        loadExampleByIndex(0);
+    </script>
+</body>
+</html>