写在前面：需要你有GPT4的API KEY.
安装教程
首先放上该项目的开源地址：
然后我们先将项目克隆到本地
git clone https://github.com/abi/screenshot-to-code.git
官方给出了两种启动项目的方式，一种是通过命令行分别启动前后端，一种是放在docker中启动，我选择前者，因为我的windows没有安装docker，再去折腾一个docker虚拟环境就太麻烦了。
后端
项目后端是 Python 写的，用的是fastapi 框架。该仓库使用的是poetry来管理依赖，需要我们先安装它。
github文档上告诉我们使用pip install，但实际上poetry官方并不推荐使用这种安装方式，我们来到poetry官网：
官方给出了windows的安装命令，我们按这个来，完整命令：
(Invoke-WebRequest -Uri https://install.python-poetry.org -UseBasicParsing).Content | py -
我并不记得我的python是通过microsoft store安装的，但是终端给我报错
那就将py改成python，成功了
注意：这个命令最好在powershell中执行，否则可能会出现“此处不应该有.Content”的报错。
接着还没完，装是装完了，但是此时输入poetry --version仍然会报错，因为想要在终端中使用poetry命令，需要在windoes的“系统”中安装poetry，也就是说我们还需要将刚刚安装的poetry添加到windows的环境变量。
这部分命令行也给了提示：
我们只需要把这个路径复制下来，然后添加到系统环境变量的path中即可（不要忘了点确定哟）。
然后我们打开另一个终端，在原来的终端还是会显示安装失败，输入poetry --version：
安装成功！！
然后我们按照Github上的指示添加自己的API key
cd backend
echo "OPENAI_API_KEY=sk-your-key" > .env
然后需要安装poetry依赖
接下来我们使用poetry shell命令开启python环境隔离
最后根据文档提示使用poetry run uvicorn main:app --reload --port 7001命令启动后端项目
后端成功运行在本地的7001端口。
前端
首先新建一个终端，将目录切换到前端目录：cd frontend
然后使用yarn安装项目的依赖。
安装成功后，使用yarn dev命令启动前端项目。
实际效果测试
当前后端都成功启动之后，我们在浏览器打开5173端口，右上角mobile按钮可以模拟手机上显示的效果，code按钮可以展示网页代码，下面进行实际测试：
我上来就截取了一个网站的整个界面，可以看到我上传的照片里面有很多复杂的元素，但是该模型只关注了中间的一小部分（尽管绘制效果倒是很不错）
于是我灵机一动，如果我把一个页面“揉碎了”喂给它，会不会效果更好一点？
然后我截取了页面的导航栏，可以看到最终绘制的效果还是很棒的。
这是另外一部分的效果：
这么看该模型对于有棱有角的模块绘制效果还是niu的，但是像下面这种抽象一点的图形就不尽人意了。
实际效果：
作者：L011apa100za
链接：https://juejin.cn/post/7308364564310704180
来源：稀土掘金
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。
