Reubencf/adaption-react-screenshot-to-code
This dataset is a remastered version of this dataset prepared using Adaption's Adaptive Data platform. adaption-react_screenshot_to_code This dataset contains 1,000 paired examples for training multimodal screenshot-to-code systems, specifically targeting React and TypeScript implementations. Each entry consists of a source webpage screenshot, a detailed visual description, and the corresponding generated React/TSX source code. The samples demonstrate high-fidelity UI… See the full description on the dataset page: https://huggingface.co/datasets/Reubencf/adaption-react-screenshot-to-code.
044
1---2annotations_creators: []3language:4 - en5language_creators: []6license: []7multilinguality:8- monolingual9pretty_name: 'adaption-react_screenshot_to_code'10size_categories:11- n<1K12source_datasets:13- 'extended|https://huggingface.co/datasets/Reubencf/frontend-react-dataset'14tags:15 - adaption16 - instruction-tuning17 - code18task_categories: []19task_ids: []20---21 2223 24This dataset is a remastered version of this [dataset](https://huggingface.co/datasets/Reubencf/frontend-react-dataset) prepared using [Adaption's](https://adaptionlabs.ai/app/auth) Adaptive Data platform.25 26# adaption-react_screenshot_to_code27 28This dataset contains 1,000 paired examples for training multimodal screenshot-to-code systems, specifically targeting React and TypeScript implementations. Each entry consists of a source webpage screenshot, a detailed visual description, and the corresponding generated React/TSX source code. The samples demonstrate high-fidelity UI recreations featuring modern libraries like Framer Motion for animations and Lucide React for iconography.29 30### Dataset size31 32There are 100 data points in this dataset. This is an instruction tuning dataset.33 34### Quality of Remastered Dataset35 36The final quality is A, with a relative quality improvement of 4.4%.37 38### Domain39- Code (100%)40 41### Language42- English (100%)43 44### Tone45- Technical (98%)46- Practical (2%)47 48### Evaluation Results49 50- **Quality Gains:**51<img src="https://proteus-prod-public.s3.us-east-1.amazonaws.com/temp/cb0271e6-c4a9-4ea8-a376-ed93be51046d.png" alt="QualityGains" style="max-width: 50%; display: block; margin-left: auto; margin-right: auto;" />52 53- **Grade Improvement:**54<img src="https://proteus-prod-public.s3.us-east-1.amazonaws.com/temp/339bb08a-5fb7-45a4-9ced-d5e1cfcd206e.png" alt="Grade" style="max-width: 50%; display: block; margin-left: auto; margin-right: auto;" />55 56- **Percentile Chart:**57<img src="https://proteus-prod-public.s3.us-east-1.amazonaws.com/temp/0c960c17-18fa-4909-9647-8bbde41ec4d3.png" alt="Percentile Chart" style="max-width: 50%; display: block; margin-left: auto; margin-right: auto;" />58