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
See Examples section below for more demos.
🆕 Try it here (bring your own OpenAI key - your key must have access to GPT-4 Vision. See FAQ section below for details). Or see Getting Started below for local install instructions.
- Nov 16 - Added a setting to disable DALL-E image generation if you don't need that
- Nov 16 - View code directly within the app
- Nov 15 - 🔥 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.
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 (I use Poetry for package management - pip install poetry
if you don't have it):
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
- I'm running into an error when setting up the backend. How can I fix it? Try this. If that still doesn't work, open an issue.
- How do I get an OpenAI API key that has the GPT4 Vision model available? Create an OpenAI account. And then, you need to buy at least $1 worth of credit on the Billing dashboard.
- How can I provide feedback? For feedback, feature requests and bug reports, open an issue or ping me on Twitter.
Hacker News but it gets the colors wrong at first so we nudge it
hacker.news.with.edits.mp4
NYTimes
![Screenshot 2023-11-16 at 12 06 09 PM](https://private-user-images.githubusercontent.com/23818/283541953-01b062c2-f39a-46dd-84ca-bec6c986463a.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjI1OTQ1ODgsIm5iZiI6MTcyMjU5NDI4OCwicGF0aCI6Ii8yMzgxOC8yODM1NDE5NTMtMDFiMDYyYzItZjM5YS00NmRkLTg0Y2EtYmVjNmM5ODY0NjNhLnBuZz9YLUFtei1BbGdvcml0aG09QVdTNC1ITUFDLVNIQTI1NiZYLUFtei1DcmVkZW50aWFsPUFLSUFWQ09EWUxTQTUzUFFLNFpBJTJGMjAyNDA4MDIlMkZ1cy1lYXN0LTElMkZzMyUyRmF3czRfcmVxdWVzdCZYLUFtei1EYXRlPTIwMjQwODAyVDEwMjQ0OFomWC1BbXotRXhwaXJlcz0zMDAmWC1BbXotU2lnbmF0dXJlPTM4MzlmODlmNTFjNTQ0YzY4OTYyNTZlYTdhZDViYmY3NzVmZDIxY2Q4ZDMzNGRlODFjNmJjYzI4ZjAwYjQyZWQmWC1BbXotU2lnbmVkSGVhZGVycz1ob3N0JmFjdG9yX2lkPTAma2V5X2lkPTAmcmVwb19pZD0wIn0.TxAjQOjiIN9b7SZt298G_ltOO4VjLZNGPRrramwano0)
![Screenshot 2023-11-16 at 12 07 25 PM](https://private-user-images.githubusercontent.com/23818/283541972-e1f662b6-68f7-4578-a64d-ea4be52e31f5.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjI1OTQ1ODgsIm5iZiI6MTcyMjU5NDI4OCwicGF0aCI6Ii8yMzgxOC8yODM1NDE5NzItZTFmNjYyYjYtNjhmNy00NTc4LWE2NGQtZWE0YmU1MmUzMWY1LnBuZz9YLUFtei1BbGdvcml0aG09QVdTNC1ITUFDLVNIQTI1NiZYLUFtei1DcmVkZW50aWFsPUFLSUFWQ09EWUxTQTUzUFFLNFpBJTJGMjAyNDA4MDIlMkZ1cy1lYXN0LTElMkZzMyUyRmF3czRfcmVxdWVzdCZYLUFtei1EYXRlPTIwMjQwODAyVDEwMjQ0OFomWC1BbXotRXhwaXJlcz0zMDAmWC1BbXotU2lnbmF0dXJlPWRkZGU0MTQ0OWM0YTc5MmJlYWZiZDgxYjQ3OTNhNTJhNTU2NDU1MDY5ODgxMGZkMmY2YjE1YjZkNTFmYzExM2QmWC1BbXotU2lnbmVkSGVhZGVycz1ob3N0JmFjdG9yX2lkPTAma2V5X2lkPTAmcmVwb19pZD0wIn0.CfFlvJD3u_PwrX7RpMvEgqDti-Y7uyWHWLl24-dB1gI)
🆕 Try it here (bring your own OpenAI key - your key must have access to GPT-4 Vision. See FAQ section below for details). Or see Getting Started below for local install instructions.