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

目录

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

CodeBuddy Code使用指南

1. 背景信息

2. 下载安装

3. 登录

4. 测试

腾讯混元API接入指南

1. 开通腾讯混元大模型

2. 获取腾讯云密钥

3. 腾讯混元API文档

AI识菜通开发指南

1. 开发提示词

2. CodeBuddy.md开发文档

3. 全速开发

成果展示

1. 部署阶段

2. 首页

3. 设置API密钥

4. 识别菜单

5. 点餐进入购物车

---

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

CodeBuddy Code使用指南

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生成的图片URLprice?: 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格式的清单：