进阶教程 AI识菜通

AI识菜通测评：CodeBuddy与腾讯混元联合打造

2026-06-08

阅读 0

热度 0

作者菜鸟AI编辑部

摘要

腾讯推出CodeBuddyCLI命令行工具，并结合腾讯混元大模型开发“AI识菜通”应用。用户上传菜

9月5日，腾讯正式推出CodeBuddy CLI。选择这个日期并非随意——数字9和5暗含一个长远愿景：让未来99%的编码工作通过“vibe coding”（氛围式编程）自动完成，人类只需投入1%的精力编写提示词。与Cloudbase AI CLI类似，CodeBuddy CLI同样采用终端命令行模式。它的发布意味着腾讯在开发者生态中已完整覆盖插件、IDE和CLI三大核心工具。今天发布会信息密集，我们将核心脉络梳理如下。

CodeBuddy Code使用指南

1. 背景信息

前述9月5日的发布只是引子，真正值得关注的是产品定位。对开发者而言，命令行式AI工具意味着更低的使用门槛与更高的自动化水平，尤其适合需要快速构建AI原型的场景。

2. 下载安装

与市面上大多数命令行AI工具相同，CodeBuddy Code的安装方式遵循同一模式——一条npm命令即可完成。

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

执行命令后自动下载，完成后直接输入CodeBuddy即可唤醒。

3. 登录

本次提供三种登录方式，任选一种进入登录页面。此处选择GitHub登录，跳转后若之前已登录，则自动完成认证。

登录成功后，CodeBuddy Code会显示已进入当前目录，准备就绪。

4. 测试

安装与登录完成后，运行一个小测试验证是否正常工作。结果完美执行，右侧同时显示当前对话的tokens总数。使用GitHub登录还可获赠免费额度。

腾讯混元API接入指南

1. 开通腾讯混元大模型

访问腾讯云控制台的腾讯混元大模型页面，点击“立即开通”，开通后界面如下。

2. 获取腾讯云密钥

进入腾讯云控制台的API密钥管理界面，按指引开通并获取腾讯云API密钥。

3. 腾讯混元API文档

本次开发主要采用腾讯混元API方式接入，参考官方API文档。以下是一个调用示例：

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依据文档开始开发。

# 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全速执行。接下来只需等待，限于篇幅，直接跳到最后一步查看成果。

成果展示

1. 部署阶段

项目“AI识菜通”进入最终部署阶段，前端应用托管在Vercel上。Vercel对现代前端框架的深度支持极大简化了部署流程。基于React构建，使用shadcn/ui和Radix UI组件库，Vercel能自动识别项目结构，实现一键部署与持续集成。每当你将代码推送至GitHub仓库，Vercel都会自动构建并生成预览链接。更重要的是，Vercel提供全球边缘网络分发，确保用户无论身在何处都能快速加载应用页面。从交互、图片上传，到调用腾讯混元大模型进行多语言菜单识别与菜品图像生成，最终生成点餐字符串，全部通过Vercel高效、稳定地交付。借助Vercel的免费计划和自动化运维能力，开发精力可完全聚焦于核心AI功能——这才是关键所在。