Hugging Face's logo

Spaces:
Jimmyzheng-10
/
ScreenCoder
Running

App Files Community
ScreenCoder / screencoder /demo /README.md
Jimmyzheng-10's picture
Jimmyzheng-10
Add app.py and the screencoder repo
a383d0e
preview code
|
raw
history blame
2.72 kB

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 

pnpm install
# or
npm install

Running the Development Server 

pnpm run dev
# or
npm run dev

Visit 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

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.