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

摘要

在人工智能技术迅猛发展的今天，大模型正以前所未有的深度与广度渗透进日常生活的各个场景。从智能客服到内容创作，从代码生成到图像理解，AI 正在重塑人与信息、人与服务之间的交互方式。而在餐饮这一高频、高感知的领域，语言障碍与菜单理解困难长期困扰着跨国旅行者、留学生乃至本地食客——面对一张满是陌生文字或模糊排版的菜单，如何快速识别菜品、理解其风味、并准确下单？正是在这一现实痛点驱动下，我们开发了'AI 识菜通'——一款融合多模态感知、跨语言理解与生成式视觉的智能点餐助手。

'AI 识菜通'的核心目标，是让用户只需上传一张任意语言的菜单图片，即可在数秒内获得结构化、本地化（中文）的菜品列表，每道菜附带精准描述与逼真图像，并支持一键加入购物车、生成可直接向服务员展示的点餐字符串。这一看似简单的流程背后，实则涉及图像识别、多语言翻译、语义理解、图像生成、状态管理与前端交互等多个技术模块的协同。而要让这些模块高效、准确、一致地工作，关键不在于单个模型的性能上限，而在于如何构建一个强大、灵活、可维护的上下文工程（Context Engineering）体系。

在本项目中，我们创新性地以 上下文工程框架 作为核心引擎，协同 火山引擎豆包大模型 Version 1.6（负责多语言理解与结构化输出）与 Seedream 4.0（负责高质量菜品图像生成），共同构建了一个端到端的智能点餐系统。本文将重点剖析上下文工程在'AI 识菜通'中的实践，揭示其如何通过精细化的上下文设计、动态记忆管理与多轮意图对齐，显著提升整个系统的准确性、鲁棒性与用户体验。

上下文工程框架

1. 从 Prompt Engineering 到 Context Engineering

过去几年，Prompt Engineering（提示词工程）被视为驾驭大模型的核心技能。开发者通过精心设计输入文本，引导模型输出期望结果。然而，随着 AI 应用场景从单轮问答走向多步骤、多模态、状态依赖的复杂任务（如智能客服、自动化办公、个性化推荐），静态、孤立的 prompt 已显乏力。问题在于：真实世界的任务往往具有上下文依赖性——当前操作依赖于历史行为，模型输出需与系统状态对齐，用户意图在交互中动态演化。

正是在这一背景下，上下文工程（Context Engineering） 应运而生。它不再将 AI 调用视为一次性的'黑箱请求'，而是将其嵌入一个结构化、可演化、可追溯的上下文空间中。上下文工程关注的核心问题是：如何在正确的时间，向正确的模型，提供正确的上下文信息，以驱动整个系统达成目标？

文章配图

2. 上下文工程框架：上下文编排与推理调度平台

上下文工程框架并非一个大语言模型，而是一个专为复杂 AI 应用设计的上下文编排与推理调度平台。它旨在成为 AI 系统的'操作系统'，负责管理任务流、维护状态、协调多模型协作，并确保上下文在全生命周期中的一致性与有效性。

上下文工程框架的核心能力可概括为以下四点：

（1）结构化上下文建模 上下文工程框架允许开发者以声明式方式定义整个应用的上下文结构。这包括：

输入上下文：用户上传的图像、文本、地理位置、设备类型等原始数据；
系统状态上下文：当前任务阶段、已提取的实体、用户选择、错误状态等；
模型能力上下文：各 AI 模型的接口规范、输入输出格式、性能边界、调用成本等；
领域知识上下文：预加载的行业术语、常见实体库、业务规则等。

这些上下文被组织为一个动态更新的'上下文图谱'（Context Graph），所有模块均可读写，确保信息同步。

文章配图

（2）动态上下文注入与路由 在调用任一 AI 模型前，上下文工程框架会根据当前任务阶段与系统状态，动态组装最合适的上下文包。例如，在菜单识别阶段，它会将图像、语言先验、菜系知识、任务指令等打包发送给豆包模型；而在生成点餐字符串时，则只传递选中的菜品列表与格式要求。这种按需注入机制，既提升了模型输出的相关性，又避免了信息过载。

文章配图

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

页面名称	模块名称	界面元素
首页	上传区域	虚线边框的拖拽区域，上传图标，进度条，图片预览卡片
首页	导航栏	应用 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 识菜通技术架构文档

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


### 上下文工程开发

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

![](图片)

开发环境会在开发的过程中自动下载依赖、创建配置文件、生成函数、运行终端，遇到的问题也都会被当做上下文继续完善开发，让整个从 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 格式的清单：

![](图片)