How webpai/dcgen works
DCGen is a screenshot-to-webpage-code toolkit and interactive tool. Its principal workflow segments a screenshot, uses an MLLM to describe visual regions, and assembles generated code into a webpage. The README also documents website capture and evaluation; the sampled excerpts do not show every implementation detail, so uncertain internal wiring is omitted.
Main entry points: app.py Tool server · utils.py Model clients · evaluate.py Evaluation runner · experiments.py Generation workflows
Components 17
Capture and Inputs
- Website capture
scripts/single_file.py - Screenshot helpers
utils.py - Sample pages
data
DCGen Generation
- Image segmentation
utils.py - DCGen trace
utils.py - Grid generation
utils.py - Generation workflows
scripts/experiments.py - Model clients
utils.py
Interactive Tool
- Tool server
Tool/app.py - Web interface
Tool/templates/interface.html - Generated pages
data/dcgen_demo
Evaluation
- Evaluation runner
scripts/evaluate.py - Visual metrics
scripts/metric/Design2Code/metrics/visual_score.py - Evaluation results
scripts/evaluate.py
Other components
- Developer
- Website
- MLLM service
Connections 21
- Developer → Website capture: requests capture
- Website capture → Website: fetches page
- Developer → Screenshot helpers: captures screenshot
- Developer → Generation workflows: starts generation
- Generation workflows → Image segmentation: segments image
- Generation workflows → Grid generation: generates grid
- Image segmentation → Grid generation: provides regions
- Generation workflows → Model clients: selects model
- Grid generation → Model clients: requests region code
- Model clients → MLLM service: sends prompt and image
- Developer → Web interface: uses tool
- Web interface → Tool server: submits requests
- Tool server → Image segmentation: segments image
- Tool server → DCGen trace: builds trace
- Tool server → Model clients: creates client
- DCGen trace → Model clients: requests code
- Tool server → Web interface: returns JSON
- Evaluation runner → Visual metrics: computes visual scores
- Evaluation runner → Sample pages: reads references
- Evaluation runner → Generated pages: reads generated pages
- Evaluation runner → Evaluation results: writes scores