这款神器可以让屏幕截图变为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 ——

福利:

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

图片

  • 15
    点赞
  • 8
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值