# webpai/dcgen architecture

> Architecture diagram of the GitHub repository webpai/dcgen, generated by GitDiagram from its file tree, README and a sample of source files (last updated 2026-09-29). It is an AI-made overview: check details against the source.

- Interactive diagram: https://gitdiagram.com/webpai/dcgen
- Repository: https://github.com/webpai/dcgen

## Overview

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: [`Tool/app.py`](https://github.com/webpai/dcgen/blob/main/Tool/app.py) (Tool server), [`utils.py`](https://github.com/webpai/dcgen/blob/main/utils.py) (Model clients), [`scripts/evaluate.py`](https://github.com/webpai/dcgen/blob/main/scripts/evaluate.py) (Evaluation runner), [`scripts/experiments.py`](https://github.com/webpai/dcgen/blob/main/scripts/experiments.py) (Generation workflows)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_capture["Capture and Inputs"]
  node_single_file["Website capture<br/>[single_file.py]"]
  node_capture_helpers["Screenshot helpers<br/>[utils.py]"]
  node_dataset["Sample pages"]
end

subgraph group_generation["DCGen Generation"]
  node_segmentation["Image segmentation<br/>[utils.py]"]
  node_trace["DCGen trace<br/>[utils.py]"]
  node_grid["Grid generation<br/>[utils.py]"]
  node_experiments["Generation workflows<br/>[experiments.py]"]
  node_model_clients["Model clients<br/>[utils.py]"]
end

subgraph group_tool["Interactive Tool"]
  node_flask_app["Tool server<br/>[app.py]"]
  node_interface["Web interface<br/>[interface.html]"]
  node_generated_pages["Generated pages"]
end

subgraph group_evaluation["Evaluation"]
  node_eval_script["Evaluation runner<br/>[evaluate.py]"]
  node_visual_metrics["Visual metrics<br/>[visual_score.py]"]
  node_eval_results["Evaluation results<br/>[evaluate.py]"]
end

node_developer(("Developer"))
node_website(("Website"))
node_mllm(("MLLM service"))

node_developer -->|"requests capture"| node_single_file
node_single_file -->|"fetches page"| node_website
node_developer -->|"captures screenshot"| node_capture_helpers
node_developer -->|"starts generation"| node_experiments
node_experiments -->|"segments image"| node_segmentation
node_experiments -->|"generates grid"| node_grid
node_segmentation -->|"provides regions"| node_grid
node_experiments -->|"selects model"| node_model_clients
node_grid -->|"requests region code"| node_model_clients
node_model_clients -.->|"sends prompt and image"| node_mllm
node_developer -->|"uses tool"| node_interface
node_interface -->|"submits requests"| node_flask_app
node_flask_app -->|"segments image"| node_segmentation
node_flask_app -->|"builds trace"| node_trace
node_flask_app -->|"creates client"| node_model_clients
node_trace -->|"requests code"| node_model_clients
node_flask_app -->|"returns JSON"| node_interface
node_eval_script -.->|"computes visual scores"| node_visual_metrics
node_eval_script -->|"reads references"| node_dataset
node_eval_script -->|"reads generated pages"| node_generated_pages
node_eval_script -->|"writes scores"| node_eval_results

click node_single_file "https://github.com/webpai/dcgen/blob/main/scripts/single_file.py"
click node_capture_helpers "https://github.com/webpai/dcgen/blob/main/utils.py"
click node_dataset "https://github.com/webpai/dcgen/tree/main/data"
click node_segmentation "https://github.com/webpai/dcgen/blob/main/utils.py"
click node_trace "https://github.com/webpai/dcgen/blob/main/utils.py"
click node_grid "https://github.com/webpai/dcgen/blob/main/utils.py"
click node_experiments "https://github.com/webpai/dcgen/blob/main/scripts/experiments.py"
click node_model_clients "https://github.com/webpai/dcgen/blob/main/utils.py"
click node_flask_app "https://github.com/webpai/dcgen/blob/main/Tool/app.py"
click node_interface "https://github.com/webpai/dcgen/blob/main/Tool/templates/interface.html"
click node_generated_pages "https://github.com/webpai/dcgen/tree/main/data/dcgen_demo"
click node_eval_script "https://github.com/webpai/dcgen/blob/main/scripts/evaluate.py"
click node_visual_metrics "https://github.com/webpai/dcgen/blob/main/scripts/metric/Design2Code/metrics/visual_score.py"
click node_eval_results "https://github.com/webpai/dcgen/blob/main/scripts/evaluate.py"

classDef toneNeutral fill:#f8fafc,stroke:#334155,stroke-width:1.5px,color:#0f172a
classDef toneBlue fill:#dbeafe,stroke:#2563eb,stroke-width:1.5px,color:#172554
classDef toneAmber fill:#fef3c7,stroke:#d97706,stroke-width:1.5px,color:#78350f
classDef toneMint fill:#dcfce7,stroke:#16a34a,stroke-width:1.5px,color:#14532d
classDef toneRose fill:#ffe4e6,stroke:#e11d48,stroke-width:1.5px,color:#881337
classDef toneIndigo fill:#e0e7ff,stroke:#4f46e5,stroke-width:1.5px,color:#312e81
classDef toneTeal fill:#ccfbf1,stroke:#0f766e,stroke-width:1.5px,color:#134e4a
class node_single_file,node_capture_helpers,node_dataset toneBlue
class node_segmentation,node_trace,node_grid,node_experiments,node_model_clients toneAmber
class node_flask_app,node_interface,node_generated_pages toneMint
class node_eval_script,node_visual_metrics,node_eval_results toneRose
class node_developer,node_website,node_mllm toneIndigo
```

## Components

### Capture and Inputs

- [Website capture](https://github.com/webpai/dcgen/blob/main/scripts/single_file.py): `scripts/single_file.py`
- [Screenshot helpers](https://github.com/webpai/dcgen/blob/main/utils.py): `utils.py`
- [Sample pages](https://github.com/webpai/dcgen/tree/main/data): `data`

### DCGen Generation

- [Image segmentation](https://github.com/webpai/dcgen/blob/main/utils.py): `utils.py`
- [DCGen trace](https://github.com/webpai/dcgen/blob/main/utils.py): `utils.py`
- [Grid generation](https://github.com/webpai/dcgen/blob/main/utils.py): `utils.py`
- [Generation workflows](https://github.com/webpai/dcgen/blob/main/scripts/experiments.py): `scripts/experiments.py`
- [Model clients](https://github.com/webpai/dcgen/blob/main/utils.py): `utils.py`

### Interactive Tool

- [Tool server](https://github.com/webpai/dcgen/blob/main/Tool/app.py): `Tool/app.py`
- [Web interface](https://github.com/webpai/dcgen/blob/main/Tool/templates/interface.html): `Tool/templates/interface.html`
- [Generated pages](https://github.com/webpai/dcgen/tree/main/data/dcgen_demo): `data/dcgen_demo`

### Evaluation

- [Evaluation runner](https://github.com/webpai/dcgen/blob/main/scripts/evaluate.py): `scripts/evaluate.py`
- [Visual metrics](https://github.com/webpai/dcgen/blob/main/scripts/metric/Design2Code/metrics/visual_score.py): `scripts/metric/Design2Code/metrics/visual_score.py`
- [Evaluation results](https://github.com/webpai/dcgen/blob/main/scripts/evaluate.py): `scripts/evaluate.py`

### Other components

- **Developer**
- **Website**
- **MLLM service**

## Connections

- 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