基于多模态大模型与上下文工程的智能菜单识别应用

（3）多轮意图对齐与状态管理 用户交互是动态的。上下文工程框架内置强大的状态机与意图识别模块，能够实时捕获用户行为（如点击、取消、修改），并更新上下文图谱。更重要的是，它支持上下文回溯、分支与合并——当用户修改选择时，系统能快速撤销相关操作，而不会导致状态混乱。这种对用户意图的持续对齐，是构建流畅体验的基础。

（4）错误处理与降级策略 AI 模型并非 100% 可靠。上下文工程框架提供了完善的错误监控与降级机制。例如，若豆包模型返回格式错误，系统可自动切换至备用 OCR+ 翻译流程；若 Seedream 图像生成失败，则回退至默认占位图。所有错误均被记录到上下文日志中，便于后续分析与优化。

3. 上下文工程的价值：从'能用'到'好用'

通过上下文工程实施上下文工程，AI 系统实现了三大跃升：

• 准确性提升：上下文提供领域知识与任务约束，显著减少模型幻觉；
• 鲁棒性增强：状态管理与错误处理机制保障系统在异常情况下仍可运行；
• 可维护性提高：上下文结构清晰，模块解耦，便于迭代与调试。

可以说，上下文工程是 AI 应用从'技术演示'走向'产品落地'的必经之路。而上下文工程框架，正是这条路上的强大引擎。

豆包大模型接入指南

本项目所用的视觉理解大模型和文生图大模型均采用火山引擎 Mass 平台，分别是 doubao-seed-1-6-vision-250815 和 doubao-seedream-4-0-250828。

火山引擎 Mass 平台

点击需要的 AI API 进入，进行快捷 API 接入即可。

doubao-seed-1-6-vision

doubao-seed-1-6-vision：适用于视频理解、Grounding、GUI Agent 等高复杂度的场景，与 Doubao-1.5-thinking-vision-pro 相比，在教育、图像审核、巡检与安防和 AI 搜索问答等场景下展现出更强的通用多模态理解和推理能力，支持 256k 上下文窗口，输出长度支持最大 64k tokens。

下方是调用示例：

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

doubao-seedream-4.0 基于领先架构的 SOTA 级多模态图像创作模型。其打破传统文生图模型的创作边界，原生支持文本、单图和多图输入，用户可自由融合文本与图像，在同一模型下实现基于主体一致性的多图融合创作、图像编辑、组图生成等多样玩法，让图像创作更加自由可控。

下方是接入示例：

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 }'

项目开发

开发提示词

准备好如下开发提示词：

我要做一个 AI 识菜通应用。功能是：用户可以上传一张任何语言菜单图片，调用视觉理解模型 doubao-seed-1-6-vision-250815，分析菜单中的内容并翻译为中文，之后进入第二个页面：点菜页面，点菜页面会将 AI 翻译后的中文菜单一一展示，并且用户可以点菜。每一道菜都包含它的名字、它的介绍和一张图片，图片调用 doubao-seedream-4-0-250828 模型的生成图片，然后用户点加号可以把这道菜加入他的购物车，最后点提交生成一个一串字符，上面写他想要点哪些菜，方便他跟服务员说他要点哪些。这个字符应该包合中文名和他元语言的名字。项目需要使用 react 实现，使用 shadcn、redix 组件库。AI 模型的 API KEY 放在 local storage，通过网页右上角的齿轮按钮输入。

输入至开发环境对话框中。

项目文档

开发工具会自动帮你创建两份文档，分别是需求文档和架构文档：

AI 识菜通产品需求文档

# 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 页面设计概览

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 识菜通技术架构文档

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

4. API definitions

4.1 Core API

Doubao Vision API 调用

POST https://ark.cn-beijing.volces.com/api/v3/chat/completions

Request Headers:

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:

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

### 上下文工程开发

确认文档无误之后即可向开发环境发出命令：按照文档进行开发！

![](图片)

开发环境会在开发的过程中自动下载依赖、创建配置文件、生成函数、运行终端，遇到的问题也都会被当做上下文继续完善开发，让整个从 0 到 1 的过程无比丝滑流畅：

![](图片)

![](图片)

遇到错误之后也可以一键添加到上下文中进行修复：

![](图片)

若有什么小问题也可以随时打断并提出问题，开发环境会根据上下文进行重新思考：

![](图片)

## 成果展示

### 1. 部署阶段

在项目'AI 识菜通'的最终部署阶段，我选择了 Vercel 作为前端应用的托管平台。Vercel 以其对现代前端框架的深度支持，极大简化了部署流程。本项目基于 React 构建，并使用了 shadcn/ui 和 Radix UI 组件库，Vercel 能自动识别项目结构，实现一键部署和持续集成。每次代码推送至 GitHub 仓库，Vercel 都会自动构建并生成预览链接，方便快速测试与迭代。更重要的是，Vercel 提供全球边缘网络分发，确保用户无论身处何地，都能快速加载应用页面。整个'AI 识菜通'从前端交互、图片上传，到调用大模型进行多语言菜单识别与菜品图像生成，最终生成点餐字符串，全部通过 Vercel 高效、稳定地交付给用户。借助 Vercel 的免费计划和无缝 DevOps 能力，得以将精力聚焦在核心 AI 功能开发上，而无需担心服务器运维，真正实现了'开发即部署'的现代 Web 开发体验。

![](图片)

### 2. 首页

![](图片)

### 3. 设置 API 密钥

本项目的 API 密钥存放在本地的 storage 中，并不会上传到云端，确保用户的密钥安全。

![](图片)

### 4. 识别菜单

这里准备了国外的菜单进行测试：

![](图片)

上传图片之后 AI 开始分析

![](图片)

识别完毕之后点击去点菜即可看到生成的中文菜单

![](图片)

以下是生成后的结果，这样就可以顺利点菜了：

![](图片)

### 5. 点餐进入购物车

![](图片)

点击生成订单汇总，会生成一份刚刚的点菜 TXT 格式的清单：

![](图片)