Convert Screenshots To HTML Code With AI

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 Repo – Example 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.