initial
This commit is contained in:
bmachado
197
readme.md
Normal file
197
readme.md
Normal file
@ -0,0 +1,197 @@
|
||||
# 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 = grey (#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.
|
||||
|
||||
Reference in New Issue
Block a user