CodeBuddy Code + 腾讯混元打造"AI识菜通"

CodeBuddy Code + 腾讯混元打造"AI识菜通"

CodeBuddy Code使用指南

@CodeBuddy

1. 背景信息

9月9日，腾讯正式重磅推出了 CodeBuddy CLI 🚀！之所以选在9月9号发布，是因为腾讯怀揣着一个美好愿景：未来99%的编程工作都能通过“vibe coding”（氛围式编码）自动完成，人类只需花1%的精力撰写提示词即可 💡。和 Cloudbase AI CLI 类似，CodeBuddy CLI 也采用终端命令行的操作方式。它的上线，标志着腾讯在开发者生态中已形成插件、IDE 与 CLI 三足鼎立的格局 ⚖️。今天在发布会上收获颇丰，结合自己的理解稍作梳理，与大家分享～ 🎯

2. 下载安装

跟大多数的命令行AI工具一样，CodeBuddy Code的下载方式也是如出一辙

npm install -g @tencent-ai/codebuddy-code

命令行输入就可以自动下载

下载完毕之后直接输入CodeBuddy即可唤醒

3. 登录

这里提供了三种不同的登录方式

选择好登录的方式回车之后会直接进入登录网页，这里我们选择用GitHub登录

跳转到网页之后，要是之前登录过就会自动登录

这时候再来看CodeBuddy Code就会发现已经进入到当前的目录下准备运行了~

4. 测试

安装登录完毕之后，我们这里来做一个简单的测试看看CodeBuddy是否可用。

完美运行，并且右侧有显示当前小号的tokens总数，用GitHub登录的话是有免费额度送的。

腾讯混元API接入指南

1. 开通腾讯混元大模型

访问腾讯云控制台中的腾讯混元大模型https://console.cloud.tencent.com/hunyuan/start，点击立即开通，开通之后就如下图所示：

2. 获取腾讯云密钥

进入到腾讯云控制台中的API密钥管理界面https://console.cloud.tencent.com/cam/capi，如下图所示开通腾讯原API密钥

3. 腾讯混元API文档

我这里开发主要是采用的腾讯混元API方式接入的，参考的是官方文的API文档，有兴趣的小伙伴也可以去尝试一下https://cloud.tencent.com/document/product/1729/101848：

这里是一个调用示例

POST / HTTP/1.1 Host: hunyuan.tencentcloudapi.com Content-Type: application/json X-TC-Action: ImageQuestion <公共请求参数> { "Model": "hunyuan-vision-image-question", "Messages": [ { "Role": "user", "Contents": [ { "Type": "text", "Text": "解答图片中的问题" }, { "Type": "image_url", "ImageUrl": { "Url": "https://qidian-qbot-1251316161.cos.ap-guangzhou.tencentcos.cn/public/0/0/image/hy/2c4dda9e032a477a6572866de2419ecd9e59076a-6145-46a0-9f47-1048f65cf4f8.png" } } ] } ], "Stream": false }

AI识菜通开发指南

上方的准备工作准备好之后，接下来就是开发时间：

1. 开发提示词

准备好下方的开发提示词

我要做一个"AI识菜通"APP。它的输入是一张菜单图片，它可能是任何语言的。我需要调用腾讯混元模型，使用腾讯混元图片模型的 API去理解图片，然后在网页上用户来上传这张图片，上传之后调用 腾讯混元文本大模型理解图片之后进入第二个页面就是点菜的页面，点菜的页面会包含，会把整个单变成中文的，用户可以点菜。每一道菜都包含它的名字、它的介绍和一张图片，图片也调用 腾讯混元 的生成图片的模型来生成，腾讯混元API放在UI中让用户输入并且存在local storage里，然后用户点加号可以把这道菜加入他的购物车，最后点提交生成一个一串字符，上面写他想要点哪些菜，方便他跟服务员说他要点哪些。这个字符应该包合中文名和他元语言的名字。项目需要使用|react 实现 U，使用 shadcn、redix 组件库。

2. CodeBuddy.md开发文档

输入到CodeBuddy中，并且先别让他直接开始开发，先让他生成CodeBuddy.md。

这里是CodeBuddy的分析过程，询问我们是否保存，这里选择yes

这里已经保存到了本地的CodeBuddy.md中

这是刚刚CodeBuddy生成的文档，这里我们发现有不对的地方可以随意编辑，如果确认无误的话就可以让CodeBuddy对着文档开始开发项目了。

# AI识菜通 APP 项目文档 ## 项目概述 "AI识菜通"是一个基于AI的智能点菜应用，用户可以上传任何语言的菜单图片，系统会自动识别并翻译成中文，生成带有图片和介绍的点菜界面，最终生成订单字符串方便用户与服务员沟通。 ## 技术栈 - **前端框架**: React - **UI组件库**: shadcn/ui + Radix UI - **AI服务**: 腾讯混元大模型 - 图片理解模型 (识别菜单) - 文本大模型 (翻译和生成介绍) - 图片生成模型 (生成菜品图片) - **状态管理**: React Context + useState - **本地存储**: localStorage (存储API密钥和购物车) ## 功能模块 ### 1. 首页 - 图片上传页面 - **功能**: - API密钥输入框 (存储到localStorage) - 菜单图片上传组件 - 上传按钮触发图片识别 - **API调用**: 腾讯混元图片理解模型 - **页面跳转**: 识别成功后跳转到点菜页面 ### 2. 点菜页面 - **功能**: - 显示识别出的菜品列表 - 每个菜品包含: - 中文名称 - 原语言名称 - AI生成的菜品图片 - 菜品介绍 - 添加到购物车按钮 (+) - 购物车侧边栏/底部栏 - 提交订单按钮 - **API调用**: - 腾讯混元文本模型 (翻译和生成介绍) - 腾讯混元图片生成模型 (生成菜品图片) ### 3. 订单确认 - **功能**: - 生成包含中文名和原语言名的订单字符串 - 方便用户与服务员沟通 ## 数据结构 ### 菜品对象 (Dish) ```typescript interface Dish { id: string; originalName: string; // 原语言名称 chineseName: string; // 中文名称 description: string; // 菜品介绍 imageUrl: string; // AI生成的图片URL price?: string; // 价格 (如果能识别出来) quantity: number; // 购物车中的数量 } ``` ### 购物车项目 (CartItem) ```typescript interface CartItem { dish: Dish; quantity: number; } ``` ## API集成 ### 腾讯混元API配置 - **图片理解API**: 识别菜单内容 - **文本生成API**: 翻译菜名和生成介绍 - **图片生成API**: 根据菜名生成菜品图片 - **API密钥管理**: 存储在localStorage中 ## 页面路由结构 ``` / # 首页 - 图片上传 /menu # 点菜页面 /order-summary # 订单确认页面 (可选) ``` ## 组件结构 ``` src/ ├── components/ │ ├── ui/ # shadcn/ui组件 │ ├── ImageUpload.tsx # 图片上传组件 │ ├── DishCard.tsx # 菜品卡片组件 │ ├── Cart.tsx # 购物车组件 │ ├── ApiKeyInput.tsx # API密钥输入组件 │ └── OrderSummary.tsx # 订单摘要组件 ├── pages/ │ ├── HomePage.tsx # 首页 │ ├── MenuPage.tsx # 点菜页面 │ └── OrderPage.tsx # 订单页面 ├── hooks/ │ ├── useApi.ts # 腾讯混元API调用hooks │ ├── useCart.ts # 购物车管理hooks │ └── useLocalStorage.ts # localStorage管理hooks ├── services/ │ └── tencentApi.ts # 腾讯混元API服务 ├── types/ │ └── index.ts # TypeScript类型定义 └── utils/ └── helpers.ts # 工具函数 ``` ## 开发阶段规划 ### 阶段1: 项目初始化 - [ ] 创建React项目 - [ ] 安装shadcn/ui和Radix UI - [ ] 设置项目结构和TypeScript配置 - [ ] 配置路由 ### 阶段2: 基础组件开发 - [ ] 创建API密钥输入组件 - [ ] 创建图片上传组件 - [ ] 创建菜品卡片组件 - [ ] 创建购物车组件 ### 阶段3: API集成 - [ ] 集成腾讯混元图片理解API - [ ] 集成腾讯混元文本生成API - [ ] 集成腾讯混元图片生成API - [ ] 实现错误处理和加载状态 ### 阶段4: 页面开发 - [ ] 开发首页 (图片上传) - [ ] 开发点菜页面 - [ ] 开发订单确认功能 - [ ] 实现页面间导航 ### 阶段5: 功能完善 - [ ] 实现购物车功能 - [ ] 实现订单字符串生成 - [ ] 添加响应式设计 - [ ] 优化用户体验 ### 阶段6: 测试和优化 - [ ] 功能测试 - [ ] 性能优化 - [ ] 错误处理完善 - [ ] 用户界面优化 ## 注意事项 1. **API密钥安全**: 密钥存储在localStorage中，提醒用户不要在公共设备上使用 2. **图片处理**: 需要处理不同格式和大小的图片 3. **多语言支持**: 确保能正确识别和处理各种语言的菜单 4. **错误处理**: 完善的API调用失败处理机制 5. **加载状态**: 为AI处理过程添加适当的加载指示器 6. **响应式设计**: 确保在移动设备上的良好体验 ## 预期挑战 1. 菜单图片质量和格式的多样性 2. 不同语言菜名的准确翻译 3. AI生成图片的质量和相关性 4. API调用的稳定性和错误处理 5. 用户体验的流畅性 --- *此文档将在开发过程中持续更新和完善*

3. 全速开发

可以看到CodeBuddy已经开始分析并且对照文档进行开发了，并且CodeBuddy的每一步操作都会询问，这里如果不想一直被询问的话可以选择第二个选项，这里我就直接让CodeBuddy全速开发了，接下来就是等待即可，由于篇幅原因我就直接跳到最后一步看成果了。

成果展示

1. 部署阶段

在项目“AI识菜通”的最终部署阶段，我选择了 Vercel 作为前端应用的托管平台。Vercel 以其卓越的开发者体验和对现代前端框架的深度支持，极大简化了部署流程。本项目基于 React 构建，并使用了 shadcn/ui 和 Radix UI 组件库，Vercel 能自动识别项目结构，实现一键部署和持续集成。每次代码推送至 GitHub 仓库，Vercel 都会自动构建并生成预览链接，方便快速测试与迭代。更重要的是，Vercel 提供全球边缘网络分发，确保用户无论身处何地，都能快速加载应用页面。整个“AI识菜通”从前端交互、图片上传，到调用腾讯混元大模型进行多语言菜单识别与菜品图像生成，最终生成点餐字符串，全部通过 Vercel 高效、稳定地交付给用户。借助 Vercel 的免费计划和无缝 DevOps 能力，我得以将精力聚焦在核心 AI 功能开发上，而无需担心服务器运维，真正实现了“开发即部署”的现代 Web 开发体验。https://ai-menu-a92k3hb78-pickstar-2002s-projects.vercel.app/

2. 首页

3. 设置API密钥

本项目的API密钥存放在本地的storage中，并不会上传到云端，确保用户的密钥安全。

4. 识别菜单

这里准备了国外的菜单进行测试：

上传图片之后AI开始分析

识别完毕之后点击去点菜即可看到生成的中文菜单

以下是生成后的结果，这样就可以顺利点菜了：

5. 点餐进入购物车

点击生成订单汇总，会生成一份刚刚的点菜TXT格式的清单：