屏幕截图生成代码

TOOL Nov 25, 2024

Screenshot-to-code是一个简单的工具，可使用 AI 将屏幕截图、模型和 Figma 设计转换为干净、实用的代码。现在支持 Claude Sonnet 3.5 和 GPT-4o！

Screenshot-to-code支持的技术栈：

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

Screenshot-to-code支持的 AI 模型：

Claude Sonnet 3.5 - 最佳模型！
GPT-4o - 也推荐！
DALL-E 3 或 Flux Schnell（使用 Replicate）用于图像生成

1、快速入门

Screen-to-code包含React/Vite 前端和 FastAPI 后端。

所需密钥：

可访问 GPT-4 的 OpenAI API 密钥或 Anthropic 密钥（可选）
建议同时使用这两种密钥，以便你比较 Claude 和 GPT4o 的结果

如果你想使用 Ollama 开源模型运行该应用程序（由于结果质量差，不推荐），请关注此评论。

运行后端（我使用 Poetry 进行包管理 - 安装请使用 pip install poetry）：

cd backend
echo "OPENAI_API_KEY=sk-your-key" > .env
echo "ANTHROPIC_API_KEY=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

2、使用Docker

如果你的系统上安装了 Docker，请在根目录中运行：

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

该应用程序将在 http://localhost:5173 上启动并运行。请注意，你无法使用此设置开发应用程序，因为文件更改不会触发重建。

3、常见问题解答

我在设置后端时遇到错误。我该如何修复它？

试试这个。如果仍然不起作用，请打开一个问题。

如何获取 OpenAI API 密钥？

请参阅这里的说明。

如何配置 OpenAI 代理？

如果你无法直接访问 OpenAI API，可以配置 OpenAI 基本 URL 以使用代理：在 backend/.env 中设置 OPENAI_BASE_URL，或直接在设置对话框中的 UI 中设置。确保 URL 路径中包含“v1”，因此它应该如下所示： https://xxx.xxxxx.xxx/v1