AI翻译生成，注意意外错误。

截图转代码

这款简单的应用程序可将截图转换为代码（支持 HTML/Tailwind CSS、React、Bootstrap 或 Vue），并使用 GPT-4 视觉模型（或 Claude 3）生成代码以及 DALL-E 3 生成相似图像。现在还可以输入网址来克隆实时网站。

🆕 现已支持 Claude 3！

示例链接 更多信息和示例请参阅下方示例部分。关注我的推特账号获取最新动态。

🚀 即刻体验！ 🆕 点击此处亲自尝试（需携带自己的 OpenAI Key，且确保密钥有 GPT-4 Vision 授权。详情请参考 FAQ 部分说明）。或者查阅下面的“入门指南”进行本地安装。

🌟 最新进展 3月5日 - 新增对 Claude 3 Sonnet 的支持，其性能表现与 GPT-4 Vision 相当甚至更好，并且通常速度更快！

🛠 入门指南 该应用由 React/Vite 前端与 FastAPI 后端组成。你需要一个具备 GPT-4 Vision API 访问权限的 OpenAI API 密钥。

启动后端（如未安装 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

启动前端：

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

配置

• 若需要通过代理设置 OpenAI 基础 URL，请在 backend/.env 文件或 UI 设置对话框中设置 OPENAI_BASE_URL 变量

使用 Claude 3

我们最近增加了对 Claude 3 Sonnet 的支持。对于许多输入，它的性能与 GPT-4 视觉相当或更优，并且往往速度更快。

1. 将来自 Anthropic 的 API 密钥添加至环境变量 ANTHROPIC_API_KEY，存入 backend/.env 文件中
2. 在前端使用时，在模型下拉菜单中选择 "Claude 3 Sonnet"

Docker

如果你的系统已经安装了 Docker，在项目根目录下执行以下命令：

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

应用将在 http://localhost:5173 上运行。注意：使用 Docker 安装方式时无法实现热重载，即文件更改不会触发重新构建。

👋 常见问题解答

• 配置后端时遇到错误怎么办？ 试试这个方法。如果仍然无效，请在此处创建一个问题报告。
• 如何获取 OpenAI API 密钥？ 查看 https://github.com/abi/screenshot-to-code/blob/main/Troubleshooting.md
• 如何提供反馈？ 对于反馈、功能请求和错误报告，请提交问题或在我的 Twitter 上联系我。

📚 示例

纽约时报

原始页面	复制品

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

🌍 托管版本

🆕 点击此处在线试用（需自备 OpenAI Key，且务必确保密钥有权访问 GPT-4 Vision。具体详情请查看 FAQ 部分）。或者参照“入门指南”进行本地部署安装。

注：由于 Markdown 格式限制，图片地址未能完整展示，实际使用时请替换为相应图片链接地址。