一张截图就能让AI生成一个网站?

今天介绍一款最近在GitHub上爆火的项目:GitHub – abi/screenshot-to-code:放入屏幕截图并将其转换为干净的代码 (HTML/Tailwind/React/Vue),正如标题所说,随意截取一个自己喜欢网站的图片,导入到此项目就可以生成干净的HTML代码。这样我们自己可以在几分钟内解决可能需要花费一天写网页代码的开发难题,即使是小白也可以当独立网站开发者。

香的不谈,直接看视频了解一下:

这个是直接将泰勒的ins主页做了一个截图,然后将截图拖入指定区域后自动生成对应css的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 <https://github.com/abi/screenshot-to-code>
# 进入软件目录
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密钥 ?参考这个链接:screenshot-to-code/Troubleshooting.md at main · abi/screenshot-to-code · GitHub,注意一点是,你的密钥必须能够访问 GPT-4 Vision。后台运行好之后,再打开另外一个命令行来运行前段程序:

# 同样的进入软件目录
cd screenshot-to-code
# 进入前台目录
cd frontend
# 安装前台依赖包
yarn
yarn dev

打开浏览器地址,就可以使用了。

http://localhost:5173/

此:Screenshot to Code为托管网站,自己可以在线尝试。

不过仍然需要GPT-4密钥,有条件的同学可以生成自己感兴趣的网站。

发表回复