截图转代码

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

支持的技术栈:

支持的AI模型:

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

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

google in app quick 3

赞助商

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

需要的密钥:

运行后端(我使用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

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

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

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

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

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

设置后端时遇到错误。如何修复? 试试这个。如果仍然不行,请提出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的照片)

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