CodeBuddy Code + 腾讯混元打造“AI识菜通“
摘要：本文介绍了使用CodeBuddyCode和腾讯混元大模型开发"AI识菜通"应用的全过程。该应用能够识别多语言菜单图片，通过AI模型自动翻译成中文并生成菜品介绍和图片，最终形成点餐清单。文章详细说明了开发流程，包括CodeBuddyCode工具的使用、腾讯混元API接入方法，以及基于React框架的应用开发步骤。项目采用了shadcn/ui组件库，实现了图片上传、菜品识别、
目录
CodeBuddy Code + 腾讯混元打造"AI识菜通"
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生成的图片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格式的清单：
更多推荐
19
0- 0
已为社区贡献3条内容
所有评论(0)