基于 CodeBuddy Code 与腾讯混元开发 AI 识菜通应用
CodeBuddy Code 使用指南
1. 背景信息
CodeBuddy CLI 是腾讯推出的命令行 AI 工具，旨在通过'氛围式编码'提升编程效率。它采用终端命令行操作方式，与 Cloudbase AI CLI 类似。
2. 下载安装
npm install -g @tencent-ai/codebuddy-code
命令行输入即可自动下载。
下载完成后直接输入 CodeBuddy 即可唤醒。
3. 登录
提供三种登录方式。
选择登录方式回车后进入网页，推荐使用 GitHub 登录。
跳转后若已登录则自动进入。
此时 CodeBuddy Code 已进入当前目录准备运行。
4. 测试
安装登录后进行简单测试。
运行正常，GitHub 登录提供免费额度。
腾讯混元 API 接入指南
1. 开通腾讯混元大模型
访问腾讯云控制台 https://console.cloud.tencent.com/hunyuan/start，点击立即开通。
2. 获取腾讯云密钥
进入 API 密钥管理界面 https://console.cloud.tencent.com/cam/capi，开通腾讯原 API 密钥。
3. 腾讯混元 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。
分析过程询问是否保存，选择 yes。
保存至本地 CodeBuddy.md。
编辑确认无误后让 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)
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: 测试和优化
- 功能测试
- 性能优化
- 错误处理完善
- 用户界面优化
注意事项
- API 密钥安全: 密钥存储在 localStorage 中，提醒用户不要在公共设备上使用
- 图片处理: 需要处理不同格式和大小的图片
- 多语言支持: 确保能正确识别和处理各种语言的菜单
- 错误处理: 完善的 API 调用失败处理机制
- 加载状态: 为 AI 处理过程添加适当的加载指示器
- 响应式设计: 确保在移动设备上的良好体验
预期挑战
- 菜单图片质量和格式的多样性
- 不同语言菜名的准确翻译
- AI 生成图片的质量和相关性
- API 调用的稳定性和错误处理
- 用户体验的流畅性
此文档将在开发过程中持续更新和完善
### 3. 全速开发
CodeBuddy 开始分析并对照文档开发，每一步操作都会询问。可选择全速开发模式。
## 成果展示
### 1. 部署阶段
项目使用 Vercel 作为托管平台，实现一键部署和持续集成。
### 2. 首页
### 3. 设置 API 密钥
API 密钥存放在本地 storage，确保用户密钥安全。
### 4. 识别菜单
上传国外菜单进行测试。
AI 开始分析。
识别完毕后点击去点菜，查看生成的中文菜单。
生成后的结果如下：
### 5. 点餐进入购物车
点击生成订单汇总，生成 TXT 格式的清单：
