一张截图就能让AI生成一个网站？
今天介绍一款最近在GitHub上爆火的项目：GitHub – abi/screenshot-to-code：放入屏幕截图并将其转换为干净的代码 （HTML/Tailwind/React/Vue），正如标题所说，随意截取一个自己喜欢网站的图片，导入到此项目就可以生成干净的HTML代码。这样我们自己可以在几分钟内解决可能需要花费一天写网页代码的开发难题，即使是小白也可以当独立网站开发者。
以下是本地部署教程：
如果你没有安装过Python或者Yarn，那就用下面两条命令来安装Python，Node或者Yarn
brew install python
brew install node
brew install yarn
brew install git
并且通过一两个命令来确认，安装是否成功
node --version
npm --version
python --version
yarn --version
Node: v18.12.1
npm: 8.19.2
Python: 3.11.5
Yarn: 1.22.19
这个软件对版本要求并不高，所以最新版的就行，我用的版本如下，你可以对照一下
然后Clone这个软件包，如下：
git clone
# 进入软件目录
cd screenshot-to-code
# 进入后台目录
cd backend
# GPT4 的API key
echo "OPENAI_API_KEY=sk-your-key" > .env
# 安装Poetry 依赖包管理器
pip install poetry
# 安装依赖包
poetry install
# 激活命令行
poetry shell
# 运行程序
poetry run uvicorn main:app --reload --port 7000
如何获取openai密钥 ？
参考这个链接：https://github.com/abi/screenshot-to-code/blob/main/Troubleshooting.md，注意一点是，你的密钥必须能够访问 GPT-4 Vision。后台运行好之后，再打开另外一个命令行来运行前段程序：
# 同样的进入软件目
cd screenshot-to-code
# 进入前台目录
cd frontend
# 安装前台依赖包
yarn
yarn dev
打开浏览器地址，就可以使用了。
http://localhost:5173/
此：https://screenshottocode.com/，为托管网站，自己可以在线尝试。
不过仍然需要GPT-4密钥，有条件的同学可以生成自己感兴趣的网站。
- 发表于:
- 原文链接：https://page.om.qq.com/page/OgUvWjt2pjmQeDJzzN2EQxQw0
- 腾讯「腾讯云开发者社区」是腾讯内容开放平台帐号（企鹅号）传播渠道之一，根据《腾讯内容开放平台服务协议》转载发布内容。
- 如有侵权，请联系 cloudcommunity@tencent.com 删除。
相关快讯
扫码
添加站长 进交流群
领取专属 10元无门槛券
私享最新 技术干货
腾讯云开发者
