介绍利用 CodeBuddy Code 命令行工具与腾讯混元大模型 API，构建一款名为 AI 识菜通的 React 应用。该应用支持上传多语言菜单图片，自动识别并翻译为中文，生成带菜品图片和介绍的点餐界面，提供购物车及订单生成功能。技术栈涵盖 React、shadcn/ui、Radix UI 及腾讯云 API，最终部署于 Vercel 平台。
CodeBuddy CLI 是腾讯推出的命令行 AI 工具，旨在通过'氛围式编码'提升编程效率。它采用终端命令行操作方式，与 Cloudbase AI CLI 类似。
npm install -g @tencent-ai/codebuddy-code
命令行输入即可自动下载。
下载完成后直接输入 CodeBuddy 即可唤醒。
提供三种登录方式。
选择登录方式回车后进入网页，推荐使用 GitHub 登录。
跳转后若已登录则自动进入。
此时 CodeBuddy Code 已进入当前目录准备运行。
安装登录后进行简单测试。
运行正常，GitHub 登录提供免费额度。
进入 API 密钥管理界面 https://console.cloud.tencent.com/cam/capi，开通腾讯原 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 识菜通"APP。它的输入是一张菜单图片，它可能是任何语言的。我需要调用腾讯混元模型，使用腾讯混元图片模型的 API 去理解图片，然后在网页上用户来上传这张图片，上传之后调用 腾讯混元文本大模型理解图片之后进入第二个页面就是点菜的页面，点菜的页面会包含，会把整个单变成中文的，用户可以点菜。每一道菜都包含它的名字、它的介绍和一张图片，图片也调用 腾讯混元 的生成图片的模型来生成，腾讯混元 API 放在 UI 中让用户输入并且存在 local storage 里，然后用户点加号可以把这道菜加入他的购物车，最后点提交生成一个一串字符，上面写他想要点哪些菜，方便他跟服务员说他要点哪些。这个字符应该包合中文名和他元语言的名字。项目需要使用|react 实现 U，使用 shadcn、redix 组件库。
输入到 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; // 购物车中的数量
}
interface CartItem {
dish: Dish;
quantity: number;
}
/ # 首页 - 图片上传
/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 # 工具函数
此文档将在开发过程中持续更新和完善
### 3. 全速开发
CodeBuddy 开始分析并对照文档开发，每一步操作都会询问。可选择全速开发模式。
## 成果展示
### 1. 部署阶段
项目使用 Vercel 作为托管平台，实现一键部署和持续集成。
### 2. 首页
### 3. 设置 API 密钥
API 密钥存放在本地 storage，确保用户密钥安全。
### 4. 识别菜单
上传国外菜单进行测试。
AI 开始分析。
识别完毕后点击去点菜，查看生成的中文菜单。
生成后的结果如下：
### 5. 点餐进入购物车
点击生成订单汇总，生成 TXT 格式的清单：
微信公众号「极客日志V2」，在微信中扫描左侧二维码关注。展示文案：极客日志V2 zeeklog
生成新的随机RSA私钥和公钥pem证书。 在线工具，RSA密钥对生成器在线工具，online
基于 Mermaid.js 实时预览流程图、时序图等图表，支持源码编辑与即时渲染。 在线工具，Mermaid 预览与可视化编辑在线工具，online
随机生成西班牙地址（支持马德里、加泰罗尼亚、安达卢西亚、瓦伦西亚筛选），支持数量快捷选择、显示全部与下载。 在线工具，随机西班牙地址生成器在线工具，online
将字符串编码和解码为其 Base64 格式表示形式即可。 在线工具，Base64 字符串编码/解码在线工具，online
将字符串、文件或图像转换为其 Base64 表示形式。 在线工具，Base64 文件转换器在线工具，online
将 Markdown（GFM）转为 HTML 片段，浏览器内 marked 解析；与 HTML转Markdown 互为补充。 在线工具，Markdown转HTML在线工具，online