将屏幕截图转换为代码（HTML/Tailwind CSS、React、Vue 或 Bootstrap）。
它利用 GPT-4 Vision 天生代码，并利用 DALL-E 3 天生外不雅观相似的图像。
还可以输入 URL 来克隆实时网站！

Tips:带上您自己的 OpenAI 密钥 -您的密钥必须有权访问 GPT-4 Vision

项目地址：https://github.com/abi/screenshot-to-code

示例

仿制的INS博主页面

一张网页截图AI帮你写前端代码前端窃喜终于不用干体力活了

支配

1：拉取代码

2：该运用程序有一个 React/Vite 前端和一个 FastAPI 后端。
您将须要一个能够访问 GPT-4 Vision API 的 OpenAI API 密钥。

运行后端（我利用 Poetry 进行包管理 -pip install poetry如果你没有它）：

cd backendecho "OPENAI_API_KEY=sk-your-key" > .envpoetry installpoetry shellpoetry run uvicorn main:app --reload --port 7001

3：前端启动

cd frontendyarnyarn dev

4：运行

打开http://localhost:5173以利用该运用程序。

如果您希望在不同端口上运行后端，请更新 VITE_WS_BACKEND_URLfrontend/.env.local

出于调试目的，如果您不想摧残浪费蹂躏 GPT4-Vision 积分，您可以在仿照模式下运行后端（该模式会传输预先录制的相应）：

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

感兴趣的小伙伴们，可以操练起来啦！