大家好，这里是了不起的开源圈。
专注为大家分享一些开源资源和开源项目。
今天的开源项目是「screenshot-to-code」——这就是那个能够将截图转化为HTML/JS/Tailwind CSS代码的项目。
利用GPT-4 Vision生成代码、结合DALL-E 3生成相似的图片。
✨ 「项目的独特之处：」
「1. 屏幕截图即代码：」 将屏幕截图瞬间转变为可运行的HTML/JS/Tailwind CSS代码，让你在片刻间变身为前端大师。
「2. GPT-4 Vision：」 利用最新的GPT-4 Vision技术，项目能够生成高度智能化的代码，让代码生成更加贴近你的设计意图。
「3. DALL-E 3 图片生成：」 结合DALL-E 3技术生成相似的图片，使得你的页面呈现更加丰富多彩、独具特色。
🛠 开始使用
该应用程序有一个 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以使用该应用程序。
如果您希望在不同端口上运行后端，请更新 VITE_WS_BACKEND_URLfrontend/.env.local
出于调试目的，如果您不想浪费 GPT4-Vision 积分，您可以在模拟模式下运行后端（该模式会传输预先录制的响应）：
MOCK=true poetry run uvicorn main:app --reload --port 7001
配置
-
如果需要使用代理，您可以配置 OpenAI 基本 URL：在 backend/.env设置对话框中或直接在 UI 中设置 OPENAI_BASE_URL
码头工人
如果您的系统上安装了 Docker，请在根目录中运行：
echo "OPENAI_API_KEY=sk-your-key" > .env
docker-compose up -d --build
该应用程序将在http://localhost:5173启动并运行。请注意，您无法使用此设置开发应用程序，因为文件更改不会触发重建。
🌍在线托管版本
🆕 https://screenshottocode.com 带上您自己的 OpenAI 密钥 –「您的密钥必须有权访问 GPT-4 Vision」。
开源项目地址：
https://github.com/abi/screenshot-to-code
原文始发于微信公众号（python学习之旅）：32.2K star, 将屏幕截图变为HTML代码!
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。
文章由极客之音整理，本文链接：https://www.bmabk.com/index.php/post/282860.html
