在开发过程中,是否经常遇到老板临时要看某个交互效果的情况?gpt-frontend-code-gen
是一个前端页面生成神器,今天我把他开源了,你可以在这里找到:https://github.com/bravekingzhang/gpt-frontend-code-gen
一句话说,该项目支持实时预览和对话式修改交互效果。这不仅大大提高了开发效率,还能让你在极短时间内做出令人满意的前端效果。
step1: 一句话生成一个前端页面,让你的前端开发效率提升数倍。
step2:持续迭代,告诉他,修改下风格为 iOS 风格。
step3:继续让他在修改下布局,完美了。
这一切,你只需要告诉他,我要一个什么样的页面,他就会给你生成出来,然后你可以不断的和他对话,让他帮你修改,直到你满意为止。
gpt-frontend-code-gen
是一个利用 React 和 Vite 构建的前端项目,结合 Koa 框架的后端服务,支持一键生成和预览前端页面,并且可以通过对话不断调整页面效果。
项目前端使用 React 和 Vite,配合 Chakra UI 实现页面生成和 UI 展示。后端采用 Koa 框架,处理生成请求并与 AI 进行交互。用户可以通过对话不断向 AI 提出需求,后台根据需求生成相应的 React 组件,并在前端展示出来。
最直接的方式是通过 Docker 启动项目,只需执行以下命令即可:
docker-compose up -d --build
如果你想手动启动项目,可以按照以下步骤操作:
# 安装前端依赖
cd frontend
npm install
npm run dev
# 安装后端依赖
cd ../server
npm install
npm run dev
打开浏览器访问 http://localhost:9000
,配置 APIKey 和 BaseUrl,需要是 openai 的结构标准的 api,建议使用 one-api 来做代码,这样,理论上所有的模型都支持,当然包括你本地部署的。
前端项目中,src/components/Preview.tsx 文件中,实际上是一个占位文件,通过大模型生成的代码会写入到这个文件种,然后通过 vite 的热更新,实时预览。
后端项目中,src/routes/index.ts 文件中,通过 koa 的路由,接收前端的请求,然后调用大模型生成代码,然后将生成的代码写入到前端项目中。
Docker 的方式,因为前后端项目会打不同的镜像,因此,使用了共享 volume 的方式,将前端项目的代码挂载到后端项目中,这样,后端项目就可以直接写入到前端项目中。
原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。
如有侵权,请联系 cloudcommunity@tencent.com 删除。
原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。
如有侵权,请联系 cloudcommunity@tencent.com 删除。