AI Code Generation from image

This simple app 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.

Try It Out!

🆕 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.

🌟 Recent Updates

• Nov 19 – Support for dark/light code editor theme – thanks https://github.com/kachbit

• 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. It is helpful 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 (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 7001

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

If you are a frontend developer, I've got some exciting news to share. Facebook has recently open-sourced their innovative design system, known as Facebook StyleX. This powerful tool is now available for you to explore and integrate into your projects. Don't miss out on this opportunity to elevate your design game. Check out the detailed post over at 1hour.dev and discover how Facebook StyleX can transform your workflow!