Github/screenshot-to-code
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
迁移分享：屏幕截图转为HTML或vue代码
38 Commits 18 Branches 0 Tags 39 MiB
Python 54.8%
TypeScript 42.9%
JavaScript 0.7%
CSS 0.7%
HTML 0.5%
Other 0.3%
07eba3ba4a
Go to file
Abi Raja 07eba3ba4a
Update README.md
2023-11-15 11:48:20 -05:00
backend add image generation for placeholder images 2023-11-14 23:05:41 -05:00
frontend add default backend URL as fallback if the user hasn't set up the env file 2023-11-15 11:33:41 -05:00
.gitattributes Initial commit 2023-11-14 12:53:23 -05:00
.gitignore Update .gitignore 2023-11-14 15:10:47 -05:00
LICENSE Initial commit 2023-11-14 12:53:23 -05:00
README.md Update README.md 2023-11-15 11:48:20 -05:00

README.md

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.

https://github.com/abi/screenshot-to-code/assets/23818/6cebadae-2fe3-4986-ac6a-8fb9db030045

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.