Convert Screenshots To HTML Code With AI

Instantly generate HTML codes from screenshots using GPT and DALL-E, accelerating development workflows.

Screenshot-to-Code is an open-source web app that converts a screenshot into an HTML page styled with TailwindCSS. Written in Python and TypeScript.

It utilizes GPT-4 Vision and DALL-E 3 to analyze screenshots and output clean, editable HTML code. This allows developers to rapidly prototype and build UIs by providing a screenshot, saving significant time and effort. Not just that, it enables you to clone live websites by entering a URL, leveraging the power of Screenshotone API.

Subscribe to our newsletter and get the top 10 AI tools and apps delivered straight to your inbox. Subscribe now!

GitHub RepoExample App

How to deploy it:

1. To get started, ensure you have an OpenAI API key with access to the GPT-4 Vision API. Then, follow these steps:

  1. Install Poetry for package management (pip install poetry).
  2. Navigate to the backend directory (cd backend).
  3. Create a .env file with your OpenAI API key (echo "OPENAI_API_KEY=sk-your-key" > .env).
  4. Install dependencies (poetry install).
  5. Activate the virtual environment (poetry shell).
  6. Launch the FastAPI server (poetry run uvicorn main:app --reload --port 7001).

2. Frontend setup:

  1. Navigate to the frontend directory (cd frontend).
  2. Install dependencies (yarn).
  3. Start the development server (yarn dev).

3. If you encounter issues at the poetry install step:

  1. Navigate to the backend directory (cd backend).
  2. Create a new backend folder inside (mkdir backend).
  3. Move Python files into this new folder (mv *.py backend/).
  4. Retry the installation (poetry install).
  5. Enter the new backend directory (cd backend) and launch the server (poetry run uvicorn main:app --reload --port 7000).

4. To use the app, open your browser and go to http://localhost:5173.

Leave a Reply

Your email address will not be published. Required fields are marked *

Get the latest & top AI tools sent directly to your email.

Subscribe now to explore the latest & top AI tools and resources, all in one convenient newsletter. No spam, we promise!