ScreenshotToCode
Screenshot to Code is an open-source project that uses AI (GPT-4V and DALL·E 3) to convert user screenshots into front-end web code, automating the web design coding process.
What is Screenshot to Code?
Screenshot to Code is an open-source AI tool that converts screenshots into front-end web code. It uses GPT-4V for code generation and DALL·E 3 for image synthesis, automating the process of transforming design drafts into functional HTML, CSS, and JavaScript. The tool is designed to save time and effort for front-end developers by streamlining the coding process.
Key Features
- Intelligent Code Generation: Automatically generates HTML, CSS, and JavaScript from screenshots using GPT-4V.
- Similar Image Generation: Uses DALL·E 3 to create images that match the design, embedding them into the generated code.
- Real-Time Code Updates: Allows users to view and modify code in real-time within the application.
- Flexible Frameworks: Supports multiple front-end frameworks, including React, Tailwind, Bootstrap, and Vue.
- URL Web Cloning: Automatically takes screenshots and clones online websites from a URL.
- Built-In Code Editor: Enables developers to fine-tune generated code and add custom styles.
- Local Deployment: Offers the option to run the tool locally for added convenience.
Getting Started
Online Usage
- Visit Screenshot to Code and log in.
- Enter your OpenAI API key in the settings.
- Upload a screenshot or provide a URL.
- Select your preferred framework and wait for the code to generate.
- Modify or download the generated code as needed.
Local Deployment
- Clone the GitHub repository:
git clone https://github.com/abi/screenshot-to-code.git. - Install dependencies using Poetry:
pip install poetry. - Set your OpenAI API key:
echo "OPENAI_API_KEY=your-key" > .env. - Start the backend server:
poetry run uvicorn main:app --reload --port 7001. - Install frontend dependencies:
cd frontend && yarn install. - Run the frontend:
yarn dev. - Access the tool at
http://localhost:5173.
Pricing
- Free Version: Use the tool for free by deploying it locally or providing your OpenAI API key.
- Paid Plans: Hobby plan ($15/month for 100 credits) and Pro plan ($40/month for 300 credits).
FAQs
- Is Screenshot to Code free?
Yes, it’s free and open-source. You can use it with your OpenAI API key. - What AI models does it use?
GPT-4V for code generation and DALL·E 3 for image synthesis. - What frameworks are supported?
HTML + Tailwind, React + Tailwind, Bootstrap, Vue + Tailwind, and more.
Features & Capabilities
What You Can Do
Code Generation
Image Synthesis
Web Design Automation
Real-Time Code Updates
Url Web Cloning
Categories
AI
Web Development
Open Source
Code Generation
GPT-4
DALL·E 3
Front-End
Automation
Design-to-Code
Real-Time Updates
Getting Started
Pricing
freemium
Free version available with local deployment or OpenAI API key. Paid plans include Hobby ($15/month for 100 credits) and Pro ($40/month for 300 credits).
Requirements
- Python 3.8+
- OpenAI API Key
- Poetry Package Manager
- Node.js
Screenshots & Images
Primary Screenshot
Additional Images
Stats
0
Views
0
Likes
Invite Gmail Contacts
