Skip to content

Drop in a screenshot and convert it to clean code (HTML/Tailwind/React/Vue)放下屏幕截图并将其转换为干净的代码(HTML/Tailwind/React/Vue)

License

Notifications You must be signed in to change notification settings

mrylil/screenshot-to-code

This branch is 288 commits behind abi/screenshot-to-code:main.

Folders and files

NameName
Last commit message
Last commit date

Latest commit

214163b · Mar 8, 2024
Mar 4, 2024
Mar 8, 2024
Mar 8, 2024
Mar 8, 2024
Nov 14, 2023
Dec 5, 2023
Mar 5, 2024
Nov 14, 2023
Mar 8, 2024
Jan 7, 2024
Dec 10, 2023
Nov 20, 2023

Repository files navigation

screenshot-to-code

This simple app converts a screenshot to code (HTML/Tailwind CSS, or React or Bootstrap or Vue). It uses GPT-4 Vision (or Claude 3) to generate the code and DALL-E 3 to generate similar-looking images. You can now also enter a URL to clone a live website.

🆕 Now, supporting Claude 3!

Youtube.Clone.mp4

See the Examples section below for more demos.

Follow me on Twitter for updates.

🚀 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

  • Mar 8 - 🔥🎉🎁 Video-to-app: turn videos/screen recordings into functional apps
  • Mar 5 - Added support for Claude Sonnet 3 (as capable as or better than GPT-4 Vision, and faster!)

🛠 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

For debugging purposes, if you don't want to waste GPT4-Vision credits, you can run the backend in mock mode (which streams a pre-recorded response):

MOCK=true poetry run uvicorn main:app --reload --port 7001

Video to app (experimental)

output3.mp4

Record yourself using any website or app or even a Figma prototype, drag & drop in a video and in a few minutes, get a functional, similar-looking app.

You need an Anthropic API key for this functionality. Follow instructions here.

Configuration

  • You can configure the OpenAI base URL if you need to use a proxy: Set OPENAI_BASE_URL in the backend/.env or directly in the UI in the settings dialog

Using Claude 3

We recently added support for Claude 3 Sonnet. It performs well, on par or better than GPT-4 vision for many inputs, and it tends to be faster.

  1. Add an env var ANTHROPIC_API_KEY to backend/.env with your API key from Anthropic
  2. When using the front-end, select "Claude 3 Sonnet" from the model dropdown

Docker

If you have Docker installed on your system, in the root directory, run:

echo "OPENAI_API_KEY=sk-your-key" > .env
docker-compose up -d --build

The app will be up and running at http://localhost:5173. Note that you can't develop the application with this setup as the file changes won't trigger a rebuild.

🙋‍♂️ FAQs

📚 Examples

NYTimes

Original Replica
Screenshot 2023-11-20 at 12 54 03 PM Screenshot 2023-11-20 at 12 59 56 PM

Instagram page (with not Taylor Swift pics)

instagram.taylor.swift.take.1.mp4

Hacker News but it gets the colors wrong at first so we nudge it

hacker.news.with.edits.mp4

🌍 Hosted Version

🆕 Try it here (bring your own OpenAI key - your key must have access to GPT-4 Vision. See FAQ section for details). Or see Getting Started for local install instructions.

"Buy Me A Coffee"

About

Drop in a screenshot and convert it to clean code (HTML/Tailwind/React/Vue)放下屏幕截图并将其转换为干净的代码(HTML/Tailwind/React/Vue)

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages

  • TypeScript 48.4%
  • Python 48.1%
  • JavaScript 1.2%
  • CSS 1.0%
  • HTML 0.8%
  • Dockerfile 0.4%
  • Shell 0.1%