这款神器可以让屏幕截图变为HTML代码!!【送源码】

今天的开源项目是「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

 —— EOF ——

福利：

扫码回复【图书】可免费领取图书管理系统源码