mirror of
https://github.com/leigest519/ScreenCoder.git
synced 2026-02-13 18:22:50 +00:00
57 lines
2.7 KiB
Markdown
57 lines
2.7 KiB
Markdown
# 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. |