项目地址：https://github.com/bravekingzhang/gpt-frontend-code-gen# 前端页面/组件生成神器<img width="80%" alt="image" src="https://github.com/bravekingzhang/gpt-frontend-code-gen/assets/4476322/1f8e7ca2-0e15-4c05-a981-632be4c94a36">这是一个使用 React 和 Vite 构建的前端项目，配合 Koa 框架的后端服务，实现了一个前端页面生成并预览的功能，而且基于对话，可以不断调整页面效果。老板说要看一个交互效果，分分钟就出来啦。#### 看看效果step1: 一句话生成一个前端页面，让你的前端开发效率提升数倍。<img src="https://cdn.jsdelivr.net/gh/bravekingzhang/pic_go@master/vscode/219bbde8839c426c9ba84a9da76640ba0f4c8f0e196aa02ac536c977c8f33ea8.png" width="60%">step2：持续迭代，告诉他，修改下风格为 iOS 风格。<img src="https://cdn.jsdelivr.net/gh/bravekingzhang/pic_go@master/vscode/84ca16c261fedabaf7ae2e14b4e87f465f2a6561f67839e51ab40c75013e0241.png" width="60%">step3：继续让他在修改下布局，完美了。<img src="https://cdn.jsdelivr.net/gh/bravekingzhang/pic_go@master/vscode/7832d0c7e562dc9dcce53ca57be68bfdbd1b4a83b43ee14e9680a9c9ebaa87c1.png" width="60%">这一切，你只需要告诉他，我要一个什么样的页面，他就会给你生成出来，然后你可以不断的和他对话，让他帮你修改，直到你满意为止。## 功能- 使用 GPT-4 生成 React 组件。- 实时预览生成的组件。- 通过持续对话修改和更新组件。- 配置自己的 APIKey 和 BaseUrl，支持多种大模型。- 使用 Docker 和 Docker Compose 一键设置和启动。## 技术栈- 前端：React, Chakra UI, vite- 后端：Koa## 快速开始### 前提条件确保你的开发环境中已安装 Node.js（18以上） 和 Docker（可选），但是推荐 Docker 启动，真的很傻瓜式。### 安装依赖在项目的根目录下，分别为前端和后端安装依赖，启动：sh# 安装前端依赖cd frontendnpm installnpm run dev# 安装后端依赖cd ../servernpm installnpm run dev打开浏览器，访问 http://localhost:9000，即可看到前端页面，配置自己的 APIKey，和 BaseUrl。就可以愉快的玩耍了。建议私用 one-api，这样，所以的大模型都可以使用。## docker 一键启动强烈推荐使用 Docker 一键启动，真的很傻瓜式。shdocker-compose up -d --build