截图转代码

一个简单的工具,利用AI将截图、模型和Figma设计转换为干净、功能性的代码。现在支持Claude Sonnet 3.5和GPT-4O!

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

支持的技术栈:

• HTML + Tailwind
• HTML + CSS
• React + Tailwind
• Vue + Tailwind
• Bootstrap
• Ionic + Tailwind
• SVG

支持的AI模型:

• Claude Sonnet 3.5 - 最佳模型!
• GPT-4O - 同样推荐!
• GPT-4 Turbo (2024年4月)
• GPT-4 Vision (2023年11月)
• Claude 3 Sonnet
• DALL-E 3用于图像生成

查看下方的示例部分获取更多演示。

我们还刚刚添加了实验性支持,可以录制网站运行的视频/屏幕,并将其转换为功能性原型。

点此了解更多关于视频的信息。

在Twitter上关注我以获取更新。

赞助商

<a href="https://konghq.com/products/kong-konnect?utm_medium=referral&utm_source=github&utm_campaign=platform&utm_content=screenshot-to-code" target="_blank" title="Kong - powering the API world"><img src="https://picoapps.xyz/s2c-sponsors/Kong-GitHub-240x100.png"></a>

🚀 托管版本

在托管版本上试用(付费)。

🛠 开始使用

该应用有一个React/Vite前端和FastAPI后端。

需要的密钥:

• 可访问GPT-4的OpenAI API密钥
• Anthropic密钥(可选) - 仅当你想使用Claude Sonnet,或用于实验性视频支持。

运行后端(我使用Poetry进行包管理 - 如果你没有它,请pip install poetry):

cd backend
echo "OPENAI_API_KEY=sk-your-key" > .env
poetry install
poetry shell
poetry run uvicorn main:app --reload --port 7001

如果你想使用Anthropic,请在backend/.env中添加ANTHROPIC_API_KEY。你也可以通过前端的设置对话框设置密钥(加载前端后点击齿轮图标)。

运行前端:

cd frontend
yarn
yarn dev

打开http://localhost:5173使用应用。

如果你想在不同端口运行后端,请更新frontend/.env.local中的VITE_WS_BACKEND_URL。

出于调试目的,如果你不想浪费GPT4-Vision额度,可以在模拟模式下运行后端(它会流式传输预先录制的响应):

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

Docker

如果你的系统上安装了Docker,在根目录运行:

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

应用将在http://localhost:5173运行。注意,你无法使用此设置开发应用,因为文件更改不会触发重建。

🙋‍♂️ 常见问题

• 设置后端时遇到错误。如何修复? 试试这个。如果仍然不行,请提出issue。
• 如何获取OpenAI API密钥? 参见https://github.com/abi/screenshot-to-code/blob/main/Troubleshooting.md
• 如何配置OpenAI代理? - 如果你无法直接访问OpenAI API(例如由于国家限制),你可以尝试VPN或配置OpenAI基础URL以使用代理:在backend/.env中设置OPENAI_BASE_URL,或直接在UI的设置对话框中设置。确保URL的路径中包含"v1",应该像这样: https://xxx.xxxxx.xxx/v1
• 如何更新我的前端连接到的后端主机? - 在front/.env.local中配置VITE_HTTP_BACKEND_URL和VITE_WS_BACKEND_URL。例如,设置VITE_HTTP_BACKEND_URL=http://124.10.20.1:7001
• 运行后端时看到UTF-8错误? - 在Windows上,用notepad++打开.env文件,然后转到编码并选择UTF-8。
• 如何提供反馈? 对于反馈、功能请求和错误报告,请提出issue或在Twitter上联系我。

📚 示例

NYTimes

原始	复制品
<img width="1238" alt="Screenshot 2023-11-20 at 12 54 03 PM" src="https://github.com/abi/screenshot-to-code/assets/23818/3b644dfa-9ca6-4148-84a7-3405b6671922">	<img width="1414" alt="Screenshot 2023-11-20 at 12 59 56 PM" src="https://github.com/abi/screenshot-to-code/assets/23818/26201c9f-1a28-4f35-a3b1-1f04e2b8ce2a">

Instagram页面(不是Taylor Swift的照片)

https://github.com/abi/screenshot-to-code/assets/23818/503eb86a-356e-4dfc-926a-dabdb1ac7ba1

Hacker News但它最初弄错了颜色,所以我们稍微调整了一下

https://github.com/abi/screenshot-to-code/assets/23818/3fec0f77-44e8-4fb3-a769-ac7410315e5d

🌍 托管版本

🆕 在这里试用(付费)。或参见开始使用以获取本地安装说明,使用你自己的API密钥。