Spaces:
Running
Running
File size: 2,718 Bytes
a383d0e |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 |
# UI2Code Demo
UI2Code Demo is an interactive web application that demonstrates how to reconstruct high-fidelity frontend code from UI screenshots or design mockups, step by step. It is designed for research, education, and showcasing code generation techniques for modern web interfaces.
## Features
- **Multiple Real-World Demos:** Includes step-by-step reconstructions of YouTube, Instagram, and Google Search interfaces.
- **Progressive Code Generation:** Visualizes the incremental build-up of complex UIs, showing each step in the process.
- **Live Preview:** Responsive, high-fidelity preview of the generated code at every step.
- **Custom Screenshot Upload:** (Optional) Upload your own screenshot to experience AI-driven code generation (if integrated).
- **Final HTML Output:** Each demo provides a complete, production-quality HTML/CSS result for reference.
- **Modern UI/UX:** Built with React, Tailwind CSS, and Monaco Editor for a smooth developer and user experience.
## Getting Started
### Prerequisites
- Node.js (v16+ recommended)
- pnpm (recommended) or npm
### Installation
```bash
pnpm install
# or
npm install
```
### Running the Development Server
```bash
pnpm run dev
# or
npm run dev
```
Visit [http://localhost:5173](http://localhost:5173) in your browser to use the demo.
## Usage
1. **Select a Demo:** Choose from YouTube, Instagram, or Google Search Design in the left sidebar.
2. **Play the Generation:** Click the "▶️ Play" button to watch the UI being reconstructed step by step, or use the slider to scrub through steps manually.
3. **View Final Result:** At the end, see the complete HTML/CSS for the chosen interface.
4. **(Optional) Upload Screenshot:** If enabled, upload your own screenshot to try AI-powered code generation.
## Demo Data & Extensibility
- **Step Files:** Each demo consists of a manifest and a sequence of HTML files (`0001.html`, `0002.html`, ...), plus a `final_*.html` for the complete result.
- **Adding New Demos:**
1. Prepare your stepwise HTML files and a manifest in a new folder under `public/demos/`.
2. Add a thumbnail image to `public/assets/`.
3. Update `public/demos.json` with the new demo's metadata.
- **Assets:** All images used in demos are stored in `public/assets/` and referenced relatively in HTML.
## Dependencies
- [React](https://react.dev/) 18+
- [Vite](https://vitejs.dev/)
- [Tailwind CSS](https://tailwindcss.com/)
- [@monaco-editor/react](https://github.com/suren-atoyan/monaco-react)
## Scripts
- `script/prepare_steps.py`: Python script to generate stepwise HTML files from a design.
## Tools
- `UIED`: Tradition UI element detection used to detect elements in the screenshot and obtain corresponding bboxes. |