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.

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 *