ReVision

A visual feedback agent that sees what it builds.

ReVision recreates a static webpage from a reference screenshot, renders its own HTML/CSS in a real browser, and iteratively repairs visual mismatches.

Current Status

Phase 0 through Phase 5 are implemented as CLI steps. The evaluator is a rough local pixel-level trend signal, not a human visual correctness score.

Setup

pip install -r requirements.txt
python -m playwright install chromium

Create a local .env file with your OpenAI API key and preferred model:

OPENAI_API_KEY=your_api_key_here
OPENAI_MODEL=gpt-5.6-luna

Phase 0 Usage

Run with the default sample page:

python main.py

This verifies the local browser rendering loop and saves:

output/screenshot.png

Phase 1 Usage

Generate HTML/CSS from a target screenshot, then render the first iteration:

python main.py --target "examples/Yamibuy.png"

Outputs:

output/index.html
output/style.css
output/iterations/iteration_0.html
output/iterations/iteration_0.css
output/iterations/iteration_0.png

Phase 2 Usage

Run visual critique against an existing first iteration:

python main.py --target "examples/Yamibuy.png" --current output/iterations/iteration_0.png --critique

Output:

output/iterations/iteration_0_critique.json

You can also generate and critique in one command:

python main.py --target "examples/Yamibuy.png" --critique

Phase 3 Usage

Apply one focused repair pass from a critique JSON, then render the next iteration:

python main.py --target "examples/Yamibuy.png" --repair output/iterations/iteration_0_critique.json --iteration 1

Outputs:

output/index.html
output/style.css
output/iterations/iteration_1.html
output/iterations/iteration_1.css
output/iterations/iteration_1.png

Phase 4 Usage

Run the full generate -> critique -> repair -> render loop from scratch:

python main.py --target "examples/Yamibuy.png" --loop 3

For --loop 3, expect one initial generation plus three critique/repair cycles.

Phase 5 Usage

Evaluate existing iteration screenshots with a local pixel-level metric:

python main.py --target "examples/Yamibuy.png" --evaluate

Output:

output/evaluation.json

The score is useful for trend tracking only. It should be checked against human visual judgment before making claims.