zweertsk / screenshot-to-code

Drop in a screenshot and convert it to clean HTML/Tailwind/JS code

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

screenshot-to-code

This is a simple app that converts a screenshot to HTML/Tailwind CSS. It uses GPT-4 Vision to generate the code, and DALL-E 3 to generate similar looking images.

Youtube.Clone.mp4

Updates

  • 🔥 You can now instruct the AI to update the code as you wish. Useful if the AI messed up some styles or missed a section.

Getting Started

The app has a React/Vite frontend and a FastAPI backend. You will need an OpenAI API key with access to the GPT-4 Vision API.

Run the backend (make sure you have poetry installed on your system):

cd backend
echo "OPENAI_API_KEY=sk-your-key" > .env
poetry install
poetry shell
poetry run uvicorn main:app --reload --port 7000

Run the frontend:

cd frontend
yarn
yarn dev

Open http://localhost:5173 to use the app.

If you prefer to run the backend on a different port, update VITE_WS_BACKEND_URL in frontend/.env.local

Feedback

If you have feature requests, bug reports or other feedback, open an issue or ping me on Twitter.

Hosted Version

Hosted version coming soon on Pico.

About

Drop in a screenshot and convert it to clean HTML/Tailwind/JS code

License:MIT License


Languages

Language:TypeScript 50.6%Language:Python 37.4%Language:JavaScript 5.9%Language:CSS 4.6%Language:HTML 1.6%