Ui Cloner

CLI Usage

# Install dependencies
pip install -r requirements.txt

# Set API keys
export OPENROUTER_API_KEY=your_key
export FIREWORKS_API_KEY=your_key

# Run the full 3-phase pipeline
python main.py ui-inspo/sample.png --name my-component

# Run specific phases
python main.py ui-inspo/sample.png --phase 1  # Just analyze structure
python main.py ui-inspo/sample.png --phase 2  # Just generate code
python main.py ui-inspo/sample.png --phase 3  # Just refine

# Use different providers
python main.py ui-inspo/sample.png --provider fireworks
python main.py ui-inspo/sample.png --provider openrouter --vision-provider fireworks

How It Works

Phase 1: UI Grouping Chain

1. UI Division — Partition screenshot into 3-10 semantic regions (nav, hero, footer, etc.)
2. Semantic Extraction — Label elements within each region (buttons, headings, images, etc.)
3. Component Grouping — Build a hierarchical component tree from flat elements

Phase 2: Hierarchy-Aware Code Generation

1. HTML Generation — Generate HTML structure that mirrors the component tree exactly
2. Style Generation — Apply plain CSS styles based on bounding box geometry (no Tailwind)

Phase 3: Self-Correcting Refinement

1. Render & Extract — Render HTML in Playwright, capture screenshot + DOM
2. Component Matching — Match rendered DOM elements to expected tree nodes
3. Visual Comparison — Per-component SSIM + optional vision-model analysis
4. Targeted Repair — Fix specific components via BeautifulSoup (no full-page rewrite)
5. Iterate until SSIM threshold or max iterations reached

Rules

• Plain CSS only — no Tailwind, no utility classes, Use CSS custom properties and plain selectors.
• Use colors from extract_colors for the palette.
• The component tree from Phase 1 is the structural contract for Phase 2.
• Phase 3 uses per-component SSIM, not just global SSIM.
• Check the web UI (SvelteKit viewer) to see iteration history.
• User decides when done.

View Progress

The SvelteKit viewer shows live progress:

1. Home page: / — List all components with status
2. Component page: /component/[id] — Preview, iterations, diffs, activity feed
3. Test page: /test — Phase 1 segmentation testing

Start the dev server:

npm run dev

Configuration

Create a .env file:

OPENROUTER_API_KEY=sk-or-v1-...
FIREWORKS_API_KEY=fw-...
DEFAULT_PROVIDER=openrouter