Reubencf/adaption-react-screenshot-to-code

This dataset is a remastered version of this dataset prepared using Adaption's Adaptive Data platform.

adaption-reactscreenshotto_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 recreations featuring modern libraries like Framer Motion for animations and Lucide React for iconography.

Dataset size

There are 100 data points in this dataset. This is an instruction tuning dataset.

Quality of Remastered Dataset

The final quality is A, with a relative quality improvement of 4.4%.

Domain

• —Code (100%)

Language

• —English (100%)

Tone

• —Technical (98%)
• —Practical (2%)

Evaluation Results

• —Quality Gains: <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;" />

• —Grade Improvement: <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;" />

• —Percentile Chart: <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;" />