screenshot-to-code 屏幕截图转换为代码

eye 2023年12月09日 216次浏览

screenshot-to-code

这个简单的应用程序将屏幕截图转换为代码(HTML/Tailwind CSS、React、Vue 或 Bootstrap)。它使用 GPT-4 Vision 生成代码,并使用 DALL-E 3 生成外观相似的图像。您现在还可以输入 URL 来克隆实时网站!

开始使用

该应用程序有一个 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

安装使用

要使用这款工具,您需要按照以下步骤操作。

  1. 为了下载这款工具,您需要访问[GitHub的仓库],点击Clone or download按钮,然后下载ZIP文件。或者,您也可以在终端中执行以下命令。
git clone https://github.com/abi/screenshot-to-code.git
  1. 进入下载的文件夹,安装所需的库,执行以下命令。
cd screenshot-to-code
pip install -r requirements.txt
  1. 下载模型的权重文件,执行以下命令。
wget https://github.com/abi/screenshot-to-code/releases/download/v0.1/weights.h5
  1. 启动Web应用程序,执行以下命令。
python app.py
  1. 在浏览器中访问[http://localhost:5000],上传图片或草图,生成代码。生成的代码可以在浏览器中预览。您也可以复制代码,然后在自己的编辑器中编辑或保存。