本文作者：摘星，TRAE 开发者用户
项目背景
面对陌生语言的菜单，如何快速识别菜品并准确下单？这一痛点长期困扰着跨国旅行者和留学生。基于此，我开发了“AI 识菜通”——一款融合多模态感知、跨语言理解与生成式视觉的智能点餐助手。
用户只需上传一张任意语言的菜单图片，即可在数秒内获得结构化、本地化（中文）的菜品列表，每道菜附带精准描述与逼真图像，并支持一键加入购物车、生成可直接向服务员展示的点餐字符串。
这看似简单的功能背后，涉及图像识别、多语言翻译、AI 图像生成等多项技术的协同工作。本文将重点介绍我们如何运用 TRAE SOLO 的上下文工程能力，协同豆包大模型 Version 1.6 和 Seedream 4.0，构建这个端到端的智能点餐系统。
从 Prompt Engineering 到 Context Engineering 的演进
过去几年，大家都在谈论 Prompt Engineering（提示词工程），通过精心设计输入文本来引导 AI 模型输出期望的结果。但随着 AI 应用场景越来越复杂，单纯的 prompt 已经不够用了。
想象一下，如果你要开发一个智能客服系统，它不仅要理解用户当前的问题，还要记住之前的对话内容，知道用户的身份信息，甚至要根据不同的业务场景调用不同的处理流程。这时候，静态的 prompt 就显得力不从心了。
上下文工程（Context Engineering）正是为了解决这个问题而生。它不再把 AI 调用看作一次性的“黑箱请求”，而是将其放在一个结构化、可演化、可追溯的上下文空间中。简单来说，就是要在正确的时间，给正确的模型，提供正确的上下文信息。
技术选型：豆包大模型生态
本项目所用的视觉理解大模型和文生图大模型均采用火山引擎 Mass 平台，分别是 doubao-seed-1-6-vision-250815 和 doubao-seedream-4-0-250828，主要基于两个考量：
doubao-seed-1-6-vision 具备强大的视觉理解能力，适用于视频理解、Grounding、GUI Agent 等高复杂度场景。相比 Doubao-1.5-thinking-vision-pro，它在教育、图像审核、巡检与安防和 AI 搜索问答等场景下展现出更强的通用多模态理解和推理能力，支持 256k 上下文窗口，输出长度支持最大 64k tokens。
doubao-seedream-4.0 基于领先架构的 SOTA 级多模态图像创作模型，打破传统文生图模型的创作边界。它原生支持文本、单图和多图输入，用户可自由融合文本与图像，在同一模型下实现基于主体一致性的多图融合创作、图像编辑、组图生成等多样玩法。
接入指南
通过火山引擎 Mass 平台（https://www.volcengine.com/）可以快速接入这些模型。
点击所需的 AI API 进入，进行快捷 API 接入即可。
以下是调用示例：
doubao-seed-1-6-vision 调用示例：
curl https://ark.cn-beijing.volces.com/api/v3/chat/completions \
-H "Content-Type: application/json" \
-H "Authorization: Bearer your api key" \
-d $'{
"model": "doubao-seed-1-6-vision-250815",
"messages": [
{
"content": [
{
"image\_url": {
"url": "https://ark-project.tos-cn-beijing.ivolces.com/images/view.jpeg"
},
"type": "image\_url"
},
{
"text": "图片主要讲了什么?",
"type": "text"
}
],
"role": "user"
}
]
}'
doubao-seedream-4.0 调用示例：
curl -X POST https://ark.cn-beijing.volces.com/api/v3/images/generations \
-H "Content-Type: application/json" \
-H "Authorization: Bearer your api key" \
-d '{
"model": "doubao-seedream-4-0-250828",
"prompt": "Generate 3 images of a girl and a cow plushie happily riding a roller coaster in an amusement park, depicting morning, noon, and night.",
"image": ["https://ark-doc.tos-ap-southeast-1.bytepluses.com/doc\_image/seedream4\_imagesToimages\_1.png", "https://ark-doc.tos-ap-southeast-1.bytepluses.com/doc\_image/seedream4\_imagesToimages\_2.png"],
"sequential\_image\_generation": "auto",
"sequential\_image\_generation\_options": {
"max\_images": 3
},
"response\_format": "url",
"size": "2K",
"stream": true,
"watermark": true
}'
基于 TRAE SOLO 的开发实践
开发流程概述
整个开发过程始于一个简单的需求描述：
我要做一个AI识菜通应用。功能是：用户可以上传一张任何语言菜单图片，调用视觉理解模型doubao-seed-1-6-vision-250815，分析菜单中的内容并翻译为中文，之后进入第二个页面：点菜页面，点菜页面会将AI翻译后的中文菜单一一展示，并且用户可以点菜。每一道菜都包含它的名字、它的介绍和一张图片，图片调用doubao-seedream-4-0-250828模型的生成图片，然后用户点加号可以把这道菜加入他的购物车，最后点提交生成一个一串字符，上面写他想要点哪些菜，方便他跟服务员说他要点哪些。这个字符应该包合中文名和他元语言的名字。项目需要使用react 实现，使用 shadcn、redix 组件库。AI模型的API KEY放在local storage，通过网页右上角的齿轮按钮输入。
输入到 TRAE SOLO 对话框中，TRAE SOLO 不会直接开始开发，而是会先设计两份文档，待我们确认之后才会开始开发。
自动生成的项目文档
TRAE SOLO 会自动帮你创建两份文档，分别是需求文档和架构文档：
AI 识菜通产品需求文档
产品需求文档涵盖了产品概述、核心功能、用户流程和界面设计等方面。文档详细描述了三个主要页面：首页（菜单上传功能）、点餐页面（菜品展示列表、购物车管理）、设置页面（API 密钥配置），并绘制了完整的用户操作流程图。
上下滑动查看完整内容
# AI识菜通产品需求文档
## 1. 产品概述
AI识菜通是一款智能菜单识别与点餐应用，帮助用户快速理解任何语言的菜单内容并完成点餐。
用户只需上传菜单图片，AI即可自动识别并翻译菜单内容，生成精美的菜品图片，让用户轻松完成点餐流程。
该产品主要面向出国旅游、商务出差或在多语言环境用餐的用户，解决语言障碍带来的点餐困扰。
## 2. 核心功能
### 2.1 用户角色
本产品无需用户注册，所有功能对所有用户开放。
### 2.2 功能模块
我们的AI识菜通应用包含以下主要页面：
1. **首页**：菜单上传功能、应用介绍、导航菜单
2. **点餐页面**：菜品展示列表、购物车管理、订单生成
3. **设置页面**：API密钥配置、应用设置
### 2.3 页面详情
| 页面名称 | 模块名称 | 功能描述 |
| ---- | ------ | --------------------------------- |
| 首页 | 菜单上传区域 | 支持拖拽或点击上传菜单图片，显示上传进度和预览 |
| 首页 | 应用介绍 | 展示应用功能特色和使用说明 |
| 首页 | 导航栏 | 包含设置按钮和应用标题 |
| 点餐页面 | 菜品列表 | 展示AI识别的菜品信息，包含中文名称、原文名称、描述和AI生成图片 |
| 点餐页面 | 购物车 | 显示已选菜品数量和总览，支持增减数量 |
| 点餐页面 | 订单生成 | 生成包含中文和原文的点餐清单字符串 |
| 设置页面 | API配置 | 输入和保存Doubao API密钥 |
| 设置页面 | 应用设置 | 语言偏好、主题设置等基础配置 |
## 3. 核心流程
**主要用户操作流程：**
1. 用户进入首页，点击或拖拽上传菜单图片
2. 系统调用视觉识别AI分析菜单内容并翻译为中文
3. 跳转到点餐页面，展示识别结果和AI生成的菜品图片
4. 用户浏览菜品，点击加号将心仪菜品加入购物车
5. 确认选择后，生成包含中文和原文的点餐清单
6. 用户可将清单展示给服务员完成点餐
```mermaid
graph TD
A[首页] --> B[上传菜单图片]
B --> C[AI识别处理]
C --> D[点餐页面]
D --> E[浏览菜品]
E --> F[添加到购物车]
F --> G[生成点餐清单]
A --> H[设置页面]
H --> I[配置API密钥]
4. 用户界面设计
4.1 设计风格
- 主色调：现代蓝色 (#3B82F6) 和温暖橙色 (#F59E0B)
- 辅助色：中性灰色系 (#6B7280, #F3F4F6)
- 按钮样式：圆角设计，悬停效果，阴影层次
- 字体：中文使用思源黑体，英文使用 Inter 字体，主要字号 16px
- 布局风格：卡片式设计，顶部导航，响应式网格布局
- 图标风格：线性图标，统一的视觉语言，支持深浅主题
4.2 页面设计概览
| 页面名称 | 模块名称 | 界面元素 |
|---|---|---|
| 首页 | 上传区域 | 虚线边框的拖拽区域，上传图标，进度条，图片预览卡片 |
| 首页 | 导航栏 | 应用Logo，标题，设置齿轮图标按钮 |
| 点餐页面 | 菜品卡片 | 圆角卡片，AI生成图片，菜名标题，描述文本，加号按钮 |
| 点餐页面 | 购物车 | 浮动购物车图标，数量徽章，侧边栏展开面板 |
| 设置页面 | 配置表单 | 输入框，保存按钮，状态提示，分组设置项 |
4.3 响应式设计
应用采用移动优先的响应式设计，完美适配手机、平板和桌面设备。在移动端优化触摸交互体验，确保按钮大小适合手指操作。
4.4 API调用示例
doubao-seedream-4-0-250828调用示例如下
curl -X POST https://ark.cn-beijing.volces.com/api/v3/images/generations \
-H "Content-Type: application/json" \
-H "Authorization: Bearer your api key" \
-d '{
"model": "doubao-seedream-4-0-250828",
"prompt": "Generate 3 images of a girl and a cow plushie happily riding a roller coaster in an amusement park, depicting morning, noon, and night.",
"image": [" https://ark-doc.tos-ap-southeast-1.bytepluses.com/doc_image/seedream4_imagesToimages_1.png ", " https://ark-doc.tos-ap-southeast-1.bytepluses.com/doc_image/seedream4_imagesToimages_2.png "],
"sequential_image_generation": "auto",
"sequential_image_generation_options": {
"max_images": 3
},
"response_format": "url",
"size": "2K",
"stream": true,
"watermark": true
}'
doubao-seed-1-6-vision-250815调用示例
curl https://ark.cn-beijing.volces.com/api/v3/chat/completions \
-H "Content-Type: application/json" \
-H "Authorization: Bearer your api key" \
-d $'{
"model": "doubao-seed-1-6-vision-250815",
"messages": [
{
"content": [
{
"image_url": {
"url": " https://ark-project.tos-cn-beijing.ivolces.com/images/view.jpeg "
},
"type": "image_url"
},
{
"text": "图片主要讲了什么?",
"type": "text"
}
],
"role": "user"
}
]
}'
**AI 识菜通技术架构文档**
技术架构文档则从系统架构、技术选型、路由定义、API 接口、数据模型等维度进行了全面设计。架构采用纯前端方案，使用 React + TypeScript + Vite + TailwindCSS 技术栈，集成 shadcn/ui 和 Radix UI 组件库，所有数据存储在 LocalStorage 中确保安全性。
**上下滑动查看完整内容**
AI识菜通技术架构文档
1. Architecture design
graph TD
A[用户浏览器] --> B[React前端应用]
B --> C[Doubao Vision API]
B --> D[Doubao Image Generation API]
B --> E[LocalStorage]
subgraph "前端层"
B
F[shadcn/ui组件]
G[Radix UI组件]
H[状态管理]
B --> F
B --> G
B --> H
end
subgraph "外部服务"
C
D
end
subgraph "本地存储"
E
end
2. Technology Description
- Frontend: React@18 + TypeScript + Vite + TailwindCSS
- UI Components: shadcn/ui + Radix UI
- State Management: React Context + useState/useReducer
- HTTP Client: Fetch API
- Storage: LocalStorage
- Icons: Lucide React
- External APIs: Doubao Vision API, Doubao Image Generation API
3. Route definitions
| Route | Purpose |
|---|---|
| / | 首页，菜单图片上传和AI处理 |
| /menu | 点菜页面，显示翻译后的菜品列表和购物车功能 |
| /settings | 设置页面，配置API密钥和应用设置 |
4. API definitions
4.1 Core API
Doubao Vision API 调用
POST https://ark.cn-beijing.volces.com/api/v3/chat/completions
Request Headers:
| Header Name | Value | Description |
|---|---|---|
| Authorization | Bearer {API_KEY} | API密钥认证 |
| Content-Type | application/json | 请求内容类型 |
| Request Body: |
{
"model": "doubao-seed-1-6-vision-250815",
"messages": [
{
"role": "user",
"content": [
{
"type": "text",
"text": "请识别这张菜单图片中的所有菜品，并翻译为中文。请按照以下JSON格式返回：{\"dishes\": [{\"originalName\": \"原文名称\", \"chineseName\": \"中文名称\", \"description\": \"菜品描述\", \"estimatedPrice\": \"预估价格\"}]}"
},
{
"type": "image_url",
"image_url": {
"url": "data:image/jpeg;base64,{base64_image}"
}
}
]
}
]
}
Doubao Image Generation API 调用
POST https://ark.cn-beijing.volces.com/api/v3/images/generations
Request Headers:
| Header Name | Value | Description |
|---|---|---|
| Authorization | Bearer {API_KEY} | API密钥认证 |
| Content-Type | application/json | 请求内容类型 |
| Request Body: |
{
"model": "doubao-seedream-4-0-250828",
"prompt": "高质量的{菜品名称}美食摄影，专业餐厅级别，自然光线，精美摆盘",
"n": 1,
"size": "1024x1024",
"quality": "standard"
}
4.2 数据类型定义
// 菜品信息
interface Dish {
id: string;
originalName: string;
chineseName: string;
description: string;
estimatedPrice?: string;
imageUrl?: string;
isGeneratingImage?: boolean;
}
// 购物车项目
interface CartItem {
dish: Dish;
quantity: number;
}
// API配置
interface ApiConfig {
visionApiKey: string;
imageApiKey: string;
}
// 应用状态
interface AppState {
dishes: Dish[];
cart: CartItem[];
isProcessing: boolean;
processingStep: 'uploading' | 'analyzing' | 'translating' | 'generating_images' | 'completed';
apiConfig: ApiConfig;
}
5. Data model
5.1 LocalStorage 数据结构
由于这是一个纯前端应用，所有数据都存储在浏览器的LocalStorage中：
// API配置存储
localStorage.setItem('ai-menu-api-config', JSON.stringify({
visionApiKey: string,
imageApiKey: string
}));
// 最近处理的菜单缓存
localStorage.setItem('ai-menu-recent-dishes', JSON.stringify({
timestamp: number,
dishes: Dish[]
}));
// 用户偏好设置
localStorage.setItem('ai-menu-preferences', JSON.stringify({
language: 'zh-CN',
imageQuality: 'standard',
autoGenerateImages: true
}));
5.2 组件状态管理
// 全局应用状态 Context
const AppContext = createContext<{
state: AppState;
dispatch: React.Dispatch<AppAction>;
}>();
// 状态更新动作
type AppAction =
| { type: 'SET_DISHES'; payload: Dish[] }
| { type: 'ADD_TO_CART'; payload: Dish }
| { type: 'REMOVE_FROM_CART'; payload: string }
| { type: 'UPDATE_CART_QUANTITY'; payload: { dishId: string; quantity: number } }
| { type: 'SET_PROCESSING'; payload: boolean }
| { type: 'SET_PROCESSING_STEP'; payload: AppState['processingStep'] }
| { type: 'UPDATE_DISH_IMAGE'; payload: { dishId: string; imageUrl: string } };
6. 项目结构
ai-menu/
├── src/
│ ├── components/
│ │ ├── ui/ # shadcn/ui组件
│ │ ├── ImageUpload.tsx # 图片上传组件
│ │ ├── DishCard.tsx # 菜品卡片组件
│ │ ├── Cart.tsx # 购物车组件
│ │ ├── OrderSummary.tsx # 订单摘要组件
│ │ └── ApiKeySettings.tsx # API密钥设置组件
│ ├── pages/
│ │ ├── HomePage.tsx # 首页
│ │ ├── MenuPage.tsx # 点菜页面
│ │ └── SettingsPage.tsx # 设置页面
│ ├── hooks/
│ │ ├── useApiConfig.ts # API配置管理
│ │ ├── useImageUpload.ts # 图片上传处理
│ │ └── useCart.ts # 购物车逻辑
│ ├── services/
│ │ ├── doubaoApi.ts # Doubao API调用
│ │ └── imageService.ts # 图片处理服务
│ ├── context/
│ │ └── AppContext.tsx # 全局状态管理
│ ├── types/
│ │ └── index.ts # TypeScript类型定义
│ ├── utils/
│ │ ├── storage.ts # LocalStorage工具
│ │ └── imageUtils.ts # 图片处理工具
│ └── App.tsx
├── public/
├── package.json
├── tailwind.config.js
├── vite.config.ts
└── tsconfig.json
**上下文工程开发**
如果对于 SOLO 生成的文档不满意，或者有部分地方需要修改的话，是可以直接在文档中进行编辑的，这一点做得非常丝滑，SOLO 给我的整体体验就是整个项目开发过程全在你的掌控中。
文档就是 TRAE 对整个项目的理解，这个修正过程是很有必要的。确认文档无误后，TRAE SOLO 开始按照文档进行开发。整个过程展现了上下文工程的强大能力：
**智能依赖管理**
SOLO 会在开发的过程中自动下载依赖、创建配置文件、生成函数、运行终端，遇到的问题也都会被当做上下文继续完善开发。
**实时错误处理**
遇到编译错误时可以一键添加到上下文中进行修复，系统会根据上下文自动测试，比传统的复制控制台错误再手动调试要高效得多。
**动态需求调整**
开发过程中可以随时打断并提出问题或修改需求，TRAE SOLO 会根据上下文重新思考，结合已生成的内容和新提出的内容进行综合考量，确保逻辑连贯。
**成果展示**
**部署体验**
项目部署选择了 Vercel 平台，Vercel 以其卓越的开发者体验和对现代前端框架的深度支持，极大简化了部署流程，整个部署流程仅需一句话即可完成。
如果缺少 API 密钥或依赖，TRAE SOLO 会及时提醒补充信息。
**功能演示**
**首页界面**
在部署完毕之后访问 AI 识菜通网址的第一印象就是首页，界面整洁，重点突出，作为初版生成效果还是符合预期的，后续可以给 TRAE 更多参考再优化。
**API 密钥设置**
想要使用本项目的话，第一件事就是设置豆包大模型的 API 密钥，这里声明一下：用户自己的 API 密钥存放在本地的 storage 中，并不会上传到云端，确保用户的密钥安全。
**菜单识别流程**
我从网上下载了一份英文菜单进行测试，看看项目到底能不能打：
上传图片之后项目就会调用豆包大模型进行分析，整体的时间根据菜单内容的多少会有些出入，静静等待几分钟就好：
菜单识别完毕之后，首页会提示，点击去点菜即可看到生成的中文菜单。
以下是生成后的结果，可以看到，生成的图片是很符合菜单中的样子的，这样让本来晦涩难懂的菜单有了活力，这也许就是科技带给我们的意义吧，服务生活，然后这样就可以顺利点菜了：
**购物车管理**
支持添加菜品、调整数量、删除操作，最终生成包含中文和原文的双语点餐清单，可直接展示给服务员。
点击生成订单汇总，会生成一份刚刚的点菜 TXT 格式的清单：
**总结**
“AI 识菜通”是一个融合多模态 AI 能力的智能点餐应用，通过用户上传任意语言的菜单图片，自动调用豆包大模型（doubao-seed-1.6-vision）进行视觉识别与翻译，再结合 Seedream 4.0 生成高质量菜品图像，最终实现结构化中文菜单展示、购物车管理与点餐清单生成。整个项目采用 React + TypeScript 技术栈，集成 shadcn/ui 与 Radix UI 组件库，所有数据（包括 API 密钥）均本地存储于浏览器 LocalStorage，无需后端依赖。项目通过 Vercel 实现一键部署，具备完整的响应式设计与流畅的用户交互体验。
在这个过程中，**TRAE SOLO 不仅是一款开发工具，更像一位“全栈 AI 工程师搭档”** 。它从需求理解开始，自动生成产品文档与技术架构，再逐步完成项目初始化、依赖安装、组件开发、错误修复与部署上线，全程丝滑流畅。其上下文感知能力极强——即使中途打断或修改需求，也能基于已有上下文智能调整，确保逻辑连贯。更难得的是，它对开发者体验极度友好：自动处理依赖冲突、一键修复语法错误、实时预览效果，真正实现了“Talk。 Think. Ship.”的开发哲学。
