WebSight: Synthetic HTML Websites & Screenshots
WebSight is a vast synthetic data set combining HTML/CSS/Tailwind code and automatically generated website screenshots.
Description
WebSight is a unique dataset, bringing together more than 2.7 million pairs composed of HTML/CSS code and associated screenshots. These websites are automatically generated with ideas produced by LLMs, making them an ideal resource for UI generation, prototyping, or visual understanding of web pages.
What is this dataset for?
- Train models capable of generating HTML from an image (reverse UI)
- Test visual code generation or design system algorithms
- Create accessibility or interface semantic analysis tools
Can it be enriched or improved?
Yes, it is possible to add UX annotations, semantic structure labels, or even to train models to improve visual diversity. Using it in conjunction with other real web datasets can also increase the robustness of the models generated.
🔎 In summary
🧠 Recommended for
- Generation UI AI projects
- Visual interaction researchers
- LLM-assisted design
🔧 Compatible tools
- PyTorch
- Hugging Face Transformers
- VisionEncoderDecoder
- CLIP
- HTML parsers
💡 Tip
To train effectively, start by filtering version v0.2 (with real images and Tailwind CSS), which is richer in diversity.
Frequently Asked Questions
Does this dataset only include fictional sites or real sites?
These are exclusively synthetically generated sites, with no real content from the web, which guarantees a legal framework for use.
Can WebSight be used to train a model to generate HTML from an image?
Yes, it is precisely one of its main use cases. Each image corresponds to its HTML/CSS code, ideal for image-to-code training.
Which version should you start with: v0.1 or v0.2?
Version v0.2 is recommended: it includes realistic images, more examples, and code structured with Tailwind CSS.
