挑战如何通过AI十分钟快速生成一个网站的代码并分析生成过程
- 2024-01-17
- pjd
- 原创 336
一、通过文心一言写需求文档
-你是一个产品经理，帮助我起草一个博客网站的prd文档，请详细一点，更专业一点，最好能加一些例子 -以下生成自文心一言3.5 ########################################### 产品需求文档（PRD）——博客网站 一、概述 本PRD文档旨在详细描述博客网站的产品需求，包括功能、性能、用户界面和用户体验等方面的要求。本产品将为用户提供一个分享和发现高质量内容的平台，满足不同用户的需求。 二、产品功能 用户注册与登录 功能描述：用户需要能够方便地注册和登录博客网站。 详细说明： 用户能够通过邮箱或手机号进行注册。 提供“忘记密码？”链接，允许用户重置密码。 支持第三方账号登录，如微信、QQ等。 注册和登录流程应简洁明了，避免过多的表单填写。 例子：当用户访问博客网站时，显示登录和注册选项。点击“注册”后，出现注册表单，要求填写邮箱或手机号，并设置密码。用户填写完毕后，系统发送验证邮件或短信，用户点击链接完成注册。已注册用户可以直接输入邮箱或手机号，并输入密码进行登录。 用户个人中心 功能描述：允许用户管理自己的个人资料等信息。 详细说明： 用户可以查看、编辑自己的个人资料，包括头像、昵称、签名等。 提供编辑个人资料的界面，允许用户上传头像、修改昵称和签名。 用户可以管理自己的发布内容，进行删除、编辑等操作。 例子：在用户个人中心页面，列出用户的个人信息，如头像、昵称、签名等。提供“编辑资料”按钮，点击后进入编辑页面，允许用户上传新头像、修改昵称和签名等。此外，还应提供“我的发布”或“我的文章”等选项，展示用户发布的所有内容，并允许用户进行管理。 内容发布 功能描述：允许用户发布文章、图片、视频等多种形式的内容。 详细说明： 提供富文本编辑器，支持格式、字体、颜色等编辑功能。 支持上传图片和视频，并对其进行编辑和美化。 内容应支持保存为草稿、预览发布内容和最终发布。 例子：在发布内容的页面，提供富文本编辑器，允许用户输入文本、设置格式、插入图片和视频等。提供“上传图片”和“上传视频”按钮，允许用户上传文件。在发布之前，提供预览功能，让用户确认内容无误后进行发布。 内容浏览与发现 功能描述：允许用户浏览各类内容，并根据分类、标签或时间进行筛选。 详细说明： 列出各类内容分类，如科技、时尚、美食等。 提供标签功能，方便用户根据感兴趣的标签浏览内容。 根据时间顺序显示最新发布的内容。 提供热门内容推荐和个性化推荐功能。 例子：在首页或内容列表页面上，列出各类内容的分类选项卡，如“科技”、“时尚”、“美食”等。同时显示热门标签，如“人工智能”、“健身”、“旅游”等。在内容列表中，按照时间顺序排列最新发布的内容，并提供筛选选项，让用户根据分类、标签或时间进行筛选。此外，还应根据用户的浏览历史和偏好，推荐相关内容。 Product Requirement Document (PRD) - Blog Website I. Overview This PRD document aims to describe the product requirements of the blog website in detail, including functional, performance, user interface, and user experience requirements. This product will provide users with a platform to share and discover high-quality content, meeting the needs of different users. II. Product Functionality User Registration and Login Function Description: Users need to be able to easily register and login to the blog website. Detailed Explanation: Users are able to register using email or mobile phone number. Provide a "forgot password?" link to allow users to reset their passwords. Support third-party account login, such as WeChat, QQ, etc. The registration and login process should be concise and clear, avoiding excessive form filling. Example: When a user visits the blog website, they are prompted with login and registration options. By clicking "Register," a registration form appears, requiring the user to input their email or mobile phone number and set a password. Once the user has completed the form, the system sends a verification email or SMS, and the user clicks on the link to complete the registration process. Registered users can directly input their email or mobile phone number and enter their password to login. User Dashboard Function Description: Allow users to manage their personal information and other details. Detailed Explanation: Users are able to view and edit their personal information, including avatar, nickname, signature, etc. Provide an edit profile interface that allows users to upload avatars, modify nicknames, and set signatures. Users are able to manage their published content, performing actions such as deletion, editing, etc. Example: On the user dashboard page, display the user's personal information, such as avatar, nickname, signature, etc. Provide an "Edit Profile" button that takes the user to an edit page where they can upload a new avatar, modify their nickname, set a signature, etc. Additionally, provide options like "My Posts" or "My Articles" to show all of the content published by the user and allow them to manage it. Content Publishing Function Description: Allow users to publish articles, images, videos, and other forms of content. Detailed Explanation: Provide a rich text editor that supports formatting, fonts, colors, etc for content editing. Enable users to upload images and videos and apply editing and美化 to them. Editor and美化 are translated separately because "美化" has specific cultural context and might be better translated as "beautification" instead of "beautify". Content should support saving as drafts, previewing published content, and final publishing. Example: On the content publishing page, provide a rich text editor that allows users to input text, set formatting, insert images and videos, etc. Provide "Upload Image" and "Upload Video" buttons that allow users to upload files. Before publishing, provide a preview function to allow users to confirm the content is accurate before publishing it.
二、进入usemage.ai网站在线生成
1、将上面文心一言3.5生成的需求文档翻译后的英文复制到网站描述中，并给网站起个名字。
2、点击生成，等待几分钟，成功后弹出提示：
Your App is Ready! Close modal We've made this tool completely free and cover all the costs Number of tokens your app used: 59,400 Cost to generate your app: $0.24 Total number of apps generated with Mage: 32,890 But you can still show your support by starring us on GitHub: Star Wasp on GitHub This helps spread the word, so we can keep making Mage better. We'd very much appreciate it!
查看代码链接： https://usemage.ai/result/a71fd931-dab4-402f-9e87-65953f047bc0
三、生成记录
Generating a new Wasp project named Blog! ⌛️ Generating project skeleton... ✅ Generated project skeleton. ⌛️ Generating plan (slowest step, usually takes 30 to 90 seconds)... ✅ Initial plan generated! - 2 queries: ["getPosts","getPost"] - 3 actions: ["createPost","updatePost","createComment"] - 3 entities: ["User","Post","Comment"] - 4 pages: ["HomePage","NewPostPage","EditPostPage","ViewPostPage"] ⌛️ Fixing initial plan... ✅ Plan fixed! ✅ Updated the Wasp file with entities. ⌛️ Generating actions... ❌ Failed to parse ChatGPT response as JSON, trying again. ✅ Generated action: createPost ✅ Generated action: updatePost ✅ Generated action: createComment ⌛️ Generating queries... ✅ Generated query: getPosts ✅ Generated query: getPost ⌛️ Generating pages... ✅ Generated page: HomePage ✅ Generated page: NewPostPage ✅ Generated page: EditPostPage ✅ Generated page: ViewPostPage ⌛️ Fixing mistakes in the Wasp file... ✅ Wasp file fixed. ⌛️ Fixing mistakes in NodeJS operation files... ✅ Fixed NodeJS operation file 'src/server/queries.js'. ❌ Failed to parse ChatGPT response as JSON, trying again. ✅ Fixed NodeJS operation file 'src/server/actions.js'. ✅ NodeJS operation files fixed. ⌛️ Fixing common mistakes in pages... ✅ Fixed 'src/client/pages/Home.jsx' page. ✅ Fixed 'src/client/pages/NewPost.jsx' page. ✅ Fixed 'src/client/pages/EditPost.jsx' page. ✅ Fixed 'src/client/pages/ViewPost.jsx' page. ✅ Pages fixed. ⌛️ Fixing import mistakes in pages... ✅ Fixed 'src/client/pages/Home.jsx' page. ✅ Fixed 'src/client/pages/NewPost.jsx' page. ✅ Fixed 'src/client/pages/EditPost.jsx' page. ✅ Fixed 'src/client/pages/ViewPost.jsx' page. ✅ Imports in pages fixed.
四、运行项目
如何运行？
给定一个简单的 .wasp 配置文件（描述 Web 应用程序的高级详细信息）和 .js(x)/.css/...（具有您独特逻辑的源文件），Wasp 编译器会生成 Web 应用程序的完整源代码目标堆栈中：前端、后端和部署。
这种独特的方法使黄蜂变得“聪明”并赋予它超能力！
有关 Wasp 的更多信息，请查看 文档 。
五、总结
1、这个生成网站是个开源项目，开源地址： https://github.com/wasp-lang/wasp/tree/wasp-ai
2、Wasp（Web应用程序规范）是一个适用于 React、Node.js 和 Prisma 的类似 Rails 的框架。在一天之内构建您的应用程序并使用单个 CLI 命令进行部署！
a.快速入门：由于其表现力，您可以从头开始创建和部署一个生产就绪的 Web 应用程序，只需很少行简洁、一致的声明性代码。
b.无样板代码：通过抽象出复杂的全栈功能，可以减少样板代码。这意味着需要维护和理解的代码更少！这也意味着更容易升级。
c.无锁定：您可以将 Wasp 应用程序部署在任何您喜欢的地方。不存在特定提供商的锁定；您可以完全控制代码（如果您有兴趣，实际上可以在 .wasp/ dir 中查看它）。
3、分析代码生成过程分析
# Wasp项目创建流程
* 生成项目骨架
* 等待项目骨架生成
* 成功生成项目骨架
* 生成计划
* 等待计划生成
* 成功生成初始计划
* 2个查询：["getPosts","getPost"]
* 3个操作：["createPost","updatePost","createComment"]
* 3个实体：["User","Post","Comment"]
* 4个页面：["HomePage","NewPostPage","EditPostPage","ViewPostPage"]
* 修复初始计划
* 计划修复成功
* 生成操作
* 等待生成操作
* 生成操作成功
* 创建Post操作
* 更新Post操作
* 创建Comment操作
* 生成查询
* 生成getPosts查询
* 生成getPost查询
* 生成页面
* 生成HomePage页面
* 生成NewPostPage页面
* 生成EditPostPage页面
* 生成ViewPostPage页面
* 修复Wasp文件错误
* 等待修复Wasp文件错误
* Wasp文件修复成功
* 修复NodeJS操作文件错误
* 等待修复NodeJS操作文件错误
* NodeJS操作文件修复成功
* 'src/server/queries.js'修复成功
* 'src/server/actions.js'修复成功
* 修复页面常见错误
* Home.jsx修复成功
* NewPost.jsx修复成功
* EditPost.jsx修复成功
* ViewPost.jsx修复成功
* 修复页面导入错误
* Home.jsx导入修复成功
* NewPost.jsx导入修复成功
* EditPost.jsx导入修复成功
* ViewPost.jsx导入修复成功
从上面可以看出，这是一个典型的智能体agent，主线流程为：react和nodejs模板-计划-修复-动作-修复，从而先后完成【生成项目骨架】->【生成计划】->【修复初始计划】->【生成操作】->【生成查询】->【生成页面】->【修复Wasp文件错误】->【修复NodeJS操作文件错误】->【修复页面常见错误】->【修复页面导入错误】。
4、展望
提示词+微调+代码生成+自我修复的这个开发过程比较容易复现，没有太高的技术门槛，但需要大量高质量数据的微调，照这个架式，估计1年左右时间，就会出现支持各种框架模板的生成，成熟度也会越来越高。
近日国内智谱AI的GLM4指令遵循率达到97.29%，GPT最高更是达到了99.44%，这将大大促进AI自行计划和自动执行更加复杂任务。
乐观观点更是认为 下图中的UnitEval 是 AI 自组织的下一代 架构范式Unit Mesh（《渐近式 AI 编程架构：Unit Mesh 架构的设计与探索 》） 的一个典型成员，AI编程已经遍地开花。