Reubencf/frontend-react-dataset

Frontend React Dataset

This dataset contains 1,000 matched examples for training and evaluating multimodal screenshot-to-code systems.

Dataset structure

The dataset has one train split and exactly three columns:

• —screenshot: the source webpage screenshot as an embedded PNG image
• —description: a detailed, section-by-section visual description generated with Gemini 3.6 Flash
• —response: React/TSX implementation generated with GPT-5.6 Sol

The response field contains extracted source code without surrounding Markdown code fences.

Quality checks

• —All 1,000 source images were matched to their corresponding description and code response.
• —Image SHA-256 hashes were checked while packaging the dataset.
• —Every response passed static TSX syntax validation with esbuild.
• —API generation status was successful for all 1,000 examples.

Static syntax validation does not guarantee pixel-perfect visual similarity or that every example runs without its expected React dependencies.

Intended use

This dataset is intended for research and development involving:

• —screenshot-to-React generation
• —multimodal code generation
• —UI reconstruction
• —supervised fine-tuning and evaluation

Review the source screenshots and generated code for licensing, privacy, and redistribution requirements before making the dataset public or using it commercially.