2025 · Conference paper
WebCode2M: A Real-World Dataset for Code Generation from Webpage Designs
WebCode2M pairs about 2.56 million real-world webpage screenshots with purified HTML/CSS code and element bounding-box layout trees. Pages sampled from a Common Crawl snapshot are cleaned (scripts, metadata and hidden elements removed, styles merged into one block), rendered with Playwright, and filtered by a neural scorer trained on 10,000 annotated samples. The paper fine-tunes Pix2Struct-1.3B as the WebCoder baseline, introduces TreeBLEU to measure DOM-structure recall, and benchmarks specialized, open and commercial multimodal models on short, medium and long test subsets of 256 pages each.
Scope and limitations
The task is static HTML/CSS generation from a design image. Scripts are stripped during purification, so interaction, client-side behavior and backend logic are not reconstructed, and outputs are judged by visual score, CLIP similarity and TreeBLEU rather than functional equivalence. The paper reports that no evaluated model reproduces image elements accurately, and scores fall as target code grows longer. The 768 test pages were drawn from high-scoring candidates and manually inspected; the scorer is about 90% accurate, so low-quality training samples remain, and the authors warn that crawled content may still include inappropriate material. Commercial models are named only by family, and about one-third of Gemini test cases failed with recitation errors, so those comparisons are snapshots. The dataset card's CC BY 4.0 license does not clear rights in the crawled pages' code, text or images.
Why it fits this collection
Adds a large real-world design-to-code training corpus with layout trees and a structure metric, complementing the smaller real-page and synthetic website-reconstruction benchmarks in this section.
Publication and review details
- Venue
- WWW 2025
- Status
- Conference paper
- Publication / posting date
- April 22, 2025
- Date source
- The ACM article page and ACM-deposited Crossref metadata agree on publication on 2025-04-22; the April 28–May 2 conference dates are not used as the publication date.
- First arXiv submission
- April 9, 2024
- arXiv
- 2404.06369
- Reviewed arXiv version
- v2
- DOI
- 10.1145/3696410.3714889
arXiv v1 (2024-04-09) was titled “VISION2UI: A Real-World Dataset with Layout for Code Generation from UI Designs”; the reviewed v2 (2025-02-22, comment “WWW'25”) carries the final title and DOI. The ACM page and Crossref list Bohua Chen before Yi Su, while arXiv v2 lists Yi Su first; this record follows the publisher order. The project page links the paper, the naturalcc code directory and the Hugging Face dataset. The reviewed dataset-card revision f53cd4a (2025-03-05) declares CC BY 4.0, says the dataset is also called Vision2UI, warns of inappropriate content and points to a purified variant; its data directory is about 1.1 TB. The naturalcc repository declares MIT. Its webcode2m README still uses earlier names: the UICoder model and the vision2ui_test set, which now redirects to webcode2m_test. The environment file pins Python 3.10, PyTorch 2.1.2 and Transformers 4.33.1. No dataset, model or code was downloaded or run.
Sources reviewed
Source review only; experiments were not rerun for this collection. Cite the original authors using the linked paper or BibTeX.
Primary sources
- https://dl.acm.org/doi/10.1145/3696410.3714889
- https://api.crossref.org/works/10.1145/3696410.3714889
- https://arxiv.org/abs/2404.06369
- https://arxiv.org/pdf/2404.06369v2
- https://webcode2m.github.io/
- https://huggingface.co/datasets/xcodemind/webcode2m/blob/f53cd4a9317364e32a6fc7d99dc50761fe54715f/README.md
- examples/webcode2m/README.MD GitHub · CGCL-codes/naturalcc · Revision 5f84062
- examples/webcode2m/environment.yml GitHub · CGCL-codes/naturalcc · Revision 5f84062
- examples/webcode2m/requirements.txt GitHub · CGCL-codes/naturalcc · Revision 5f84062
- LICENSE GitHub · CGCL-codes/naturalcc · Revision 5f84062