198 lines
6.1 KiB
Markdown
198 lines
6.1 KiB
Markdown
# ARC Render
|
||
|
||
A toolkit for rendering and managing ARC (Abstraction and Reasoning Corpus) puzzle data with Retool integration.
|
||
|
||
## Project Structure
|
||
|
||
```
|
||
arc_render/
|
||
├── src/ # JavaScript rendering components
|
||
│ ├── arcRender.js
|
||
│ ├── arcRender_retool.js
|
||
│ ├── arcRender_retool_inline.js
|
||
│ └── arcRender_testOutput_inline.js
|
||
├── scripts/ # Python utility scripts
|
||
│ ├── upload_to_db.py
|
||
│ ├── extract_solutions.py
|
||
│ ├── verify_solutions.py
|
||
│ ├── generate_v1_csv.py
|
||
│ ├── generate_v2_csv.py
|
||
│ ├── generate_v1_list.py
|
||
│ ├── generate_sql.py
|
||
│ ├── list_v1_task_ids.py
|
||
│ └── check_and_fix_column.py
|
||
├── data/ # ARC puzzle data
|
||
│ ├── v1/ # ARC v1 datasets
|
||
│ ├── v2/ # ARC v2 datasets
|
||
│ ├── examples/ # Example puzzle files
|
||
│ ├── training.txt
|
||
│ └── evaluation.txt
|
||
├── docs/ # Documentation
|
||
│ ├── RETOOL_DATABASE_SETUP.md
|
||
│ ├── RETOOL_INLINE_SETUP.md
|
||
│ ├── RETOOL_USAGE.md
|
||
│ ├── ARC_V1_TASK_IDS_README.md
|
||
│ └── test.html
|
||
├── .env # Environment configuration
|
||
├── todo.md # Project tasks
|
||
└── readme.md # This file
|
||
```
|
||
|
||
## Overview
|
||
|
||
We are going to write a code to be used within retool to render ARC Problems JSON objects as visual renderings.
|
||
|
||
|
||
## Description of the JSON notation used by ARC-PRIZE:
|
||
|
||
The JSON contains two sets of grids, 'train' and 'test'. Each containing multiples GRIDS arranged in pairs INPUT-OUTPUT.
|
||
|
||
### train sets
|
||
|
||
These are the grids to teach the agent on how to grids behave in a before and after transformation.
|
||
|
||
The grid sizes may be variable across Input and Output grids.
|
||
|
||
## Representing the Grids
|
||
|
||
Each grid is represented individually, with each row being an array with the number of elements equal to the number of columns the grid has. So a 4x4 grid, would have 4 arrays with 4 elements inside each.
|
||
|
||
Each of these elements is represented by a not null numeric value that varies from 0 to 10, each value is representative of a color as indicated in the Color Code section below.
|
||
|
||
|
||
## Color code
|
||
0 = black
|
||
1 = blue
|
||
2 = red
|
||
3 = green
|
||
4 = yellow
|
||
5 = grey
|
||
6 = magenta
|
||
7 = orange
|
||
8 = light blue
|
||
9 = dark red
|
||
|
||
# Objective
|
||
|
||
We are to make a Javascript code that takes these Jsons and represent visually the grids contained in them in pair forms "INPUT-OUTPUT", with the execption of the Test Output Grid which will require a separate code so we can toggle it and save its value separately.
|
||
|
||
|
||
# Requeriments
|
||
|
||
- The code must be done in simple Javascript compatible with Retool
|
||
- No Frameworks or additional dependencies are allowed (ex. React, Vue etc)
|
||
- Display the graphic as an HTML
|
||
|
||
|
||
## 1. Layout
|
||
|
||
- Training examples should be displayd side-by-side (Input - Output) for each pair a line.
|
||
|
||
|
||
## 2. Test Output
|
||
|
||
- We are making a separate code to display it in a differente element.
|
||
|
||
## 3. Retool Integration
|
||
|
||
- Will the JSON be passed as a JavaScript variable (e.g., {{ query1.data }})?
|
||
YES
|
||
|
||
- Should the component accept a JSON string or parsed object?
|
||
Yes
|
||
|
||
- Need any interactivity (click cells, zoom, export)?
|
||
No
|
||
|
||
## 4. Multiple Grids Display
|
||
|
||
- Should it handle displaying one puzzle at a time or multiple puzzles?
|
||
Only one Puzzle at a time, with all its grids (Train and Test). We are going to load each problem individually for visualization
|
||
|
||
## 5. Styling Preferences
|
||
|
||
- Cell border color/width?
|
||
|
||
Option A: Fixed pixel size per cell
|
||
E.g., 20px × 20px per cell
|
||
Large grids may overflow or require scrolling
|
||
Simple and consistent
|
||
|
||
- Spacing between INPUT and OUTPUT grids?
|
||
Adjusted to the width of the frame with enough space to make them visually separate. Maybe about 1 or two cells of separation
|
||
|
||
- Spacing between different training examples?
|
||
1 or two lines
|
||
|
||
- Overall padding/margins?
|
||
No padding or margins necessary
|
||
|
||
- Dark mode or light background?
|
||
Transparent, since all cells with have a solid color, thats not an issue.
|
||
|
||
- Borders
|
||
Also make the border of the grids black 2px
|
||
Individual Cell Borders - a light grey, just to help separate the cells.
|
||
|
||
You mentioned "border of the grids black 2px" - do you mean:
|
||
Border around the entire grid (like a picture frame)? YES
|
||
|
||
## 6. Function Signature
|
||
|
||
- What should the main function look like? For example:
|
||
"function renderArcPuzzle(jsonData, options) { ... }
|
||
// or
|
||
renderArcGrid(grid, containerElement) { ... }"
|
||
|
||
We are going with Option A, Direct HTML Generation.
|
||
ex:
|
||
|
||
// Returns HTML string that Retool injects into an HTML component
|
||
function renderArcPuzzle(jsonData) {
|
||
// ... generate HTML ...
|
||
return htmlString;
|
||
}
|
||
|
||
// Usage in Retool HTML component:
|
||
{{ renderArcPuzzle(query1.data) }}
|
||
|
||
|
||
## 7. Labels and Titles
|
||
|
||
Should each grid pair have labels? No
|
||
"Train Example 1", "Train Example 2", etc.?
|
||
"Input" / "Output" labels above each grid? NO
|
||
"Test Input" / "Test Output" for test section?
|
||
Or no labels at all (grids only)? No labels necessary just to separate TRAIN from TEST grids
|
||
|
||
## 8. Test Section Display
|
||
|
||
Option B: Display test INPUT and OUTPUT side-by-side (like training pairs)
|
||
AND the TEST Input, we are not presenting the TEST Output [this would be separate program just for the Test Output, which is the answer to the puzzle]
|
||
|
||
|
||
This seems contradictory. Let me confirm - for the TEST section, should I: Option A: Show ONLY test INPUT (no output at all) YES! Dont show the TEST Output grid.
|
||
|
||
|
||
|
||
|
||
## 9. Grid Dimensions Display
|
||
Should we show the grid dimensions somewhere (e.g., "30×30" label)? This could be helpful since grids vary in size. Yes that's helpful! Lets show that.
|
||
|
||
## 10. Color Palette Confirmation
|
||
The corrected color code (0-9):
|
||
0 = black (#000000)
|
||
1 = blue (#0074D9)
|
||
2 = red (#FF4136)
|
||
3 = green (#2ECC40)
|
||
4 = yellow (#FFDC00)
|
||
5 = gray (#AAAAAA)
|
||
6 = magenta (#F012BE)
|
||
7 = orange (#FF851B)
|
||
8 = light blue (#7FDBFF)
|
||
9 = dark red (#85144b)
|
||
|
||
Should I use standard ARC colors or would you prefer different hex values?
|
||
Yes use the ARC standard colors.
|
||
|