当你上传一张图片,然后图片可以直接转变为原型图和前端代码,这样的工具你会不会感兴趣?今天就介绍一个开源的工具,screenshot to code,可以将你的截屏秒变代码,帮你快速为网站生成 Demo
那么接下来我们就看看这个工具如何使用。
首先我们打开它的git地址,上面详细说明了如何去用,非常简单,可以去看看。
提醒一下,我们需要有GPT4的API,如果没有的话请自行准备好。
第一,我们先把代码从git上clone下来。执行git clone的命令,稍等一会,clone完成后,我们在编辑器里把项目打开。项目分成了前后端。
第二,导航到项目文件夹内,然后使用命令 poetry install
安装项目依赖。前提是你已经在你的系统上安装了 Poetry,如果没有安装,请先运行pip install poetry指令来安装一下
第三,安装完成后,我们导航到backend,进入后端的文件夹。然后按指引输入指令,创建 env 文件并添加 API 密钥,这里确保将命令里的API替换成你自己的实际API。当然前提是你要有GPT4的API。
第四,输入命令 poetry shell
来激活虚拟环境,激活后,运行应用程序,来启动你的FastAPI 应用程序。
到这里后,项目的后端服务就已经运行好了。
接下来我们运行前端的服务
首先,我们先导航到frontend,进入前端的文件夹。
进入之后,我们安装依赖并且运行开发服务器。按步骤操作等待一会后,我们就完成了所有的操作
发现项目就可以跑起来了。
如果过程中如果遇到什么问题,建议可以去咨询一下chatgpt,chatgpt还是可以给出很准确的答案的
我们在浏览器打开地址,上传图片,然后我们找两个网页的页面截图分别试一下,就会看到AI帮我们生成了对应的图片的原型和前端代码了,可以看看它的效果。是不是非常容易,感兴趣的话可以试一试
git地址: