基于 CodeBuddy 与腾讯混元开发 AI 识菜通应用

3. API 文档

开发主要参考官方 API 文档进行接入。以下是调用示例的 POST 请求结构：

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 清晰描述需求。以下是一个较为完整的 Prompt 示例，涵盖了功能逻辑、技术栈及数据流向：

我要做一个"AI 识菜通"APP。它的输入是一张菜单图片，它可能是任何语言的。我需要调用腾讯混元模型，使用腾讯混元图片模型的 API 去理解图片，然后在网页上用户来上传这张图片，上传之后调用 腾讯混元文本大模型理解图片之后进入第二个页面就是点菜的页面，点菜的页面会包含，会把整个单变成中文的，用户可以点菜。每一道菜都包含它的名字、它的介绍和一张图片，图片也调用 腾讯混元 的生成图片的模型来生成，腾讯混元 API 放在 UI 中让用户输入并且存在 local storage 里，然后用户点加号可以把这道菜加入他的购物车，最后点提交生成一个一串字符，上面写他想要点哪些菜，方便他跟服务员说他要点哪些。这个字符应该包合中文名和他元语言的名字。项目需要使用 React 实现 UI，使用 shadcn、Radix 组件库。

2. 生成项目文档

将上述提示词输入到 CodeBuddy 中，不要急于让它直接生成代码。先让它生成一份 CodeBuddy.md 项目规划文档。

系统会询问是否保存分析结果，选择确认即可。生成的文档会保存在本地，你可以检查其中的技术栈定义、数据结构（如 Dish 接口）以及路由结构是否符合预期。

如果文档无误，即可让 CodeBuddy 对照文档开始全速开发。这一步通常会经历多次迭代，为了节省篇幅，我们直接查看最终成果。

成果展示

1. 部署阶段

项目构建完成后，部署至 Vercel 平台进行预览。Vercel 能够自动识别 React 项目结构，实现一键部署和持续集成，确保全球边缘网络分发，提升加载速度。

2. 首页与配置

应用启动后，首页提供 API 密钥输入框，密钥仅存储在本地 Storage 中，保障安全性。

3. 识别菜单

使用外文菜单图片进行测试。上传图片后，AI 开始分析内容。

识别完毕后，点击跳转至点菜页面，系统将自动把菜单翻译成中文并生成对应菜品卡片。

4. 购物车与订单

在点菜页面添加菜品至购物车，最后提交订单。系统会生成一份 TXT 格式的清单，包含中英文菜名，方便用户与服务员沟通。