2026-03-03

AI-Agent

11.1 多模态 AI 概述

什么是多模态 AI

多模态 AI（Multimodal AI）是指能够同时处理和理解多种类型数据（如文本、图像、音频、视频等）的人工智能系统。与传统仅处理文本的 AI 不同，多模态 AI 像人类一样，可以通过多种感官来感知和理解世界。

单模态 vs 多模态

单模态 AI 只能处理单一类型的数据：

文本模型：只理解文字
语音模型：只处理音频
视觉模型：只分析图像

多模态 AI 可以融合多种数据类型：

文本 + 图像 → 理解图片内容并回答问题
音频 + 文本 → 语音助手理解上下文
视频 + 音频 + 文本 → 全面的视频理解

多模态 AI 的优势

更自然的人机交互
- 用户可以直接发送图片而不需要描述
- 支持拖拽截图、拍照等直观操作
更丰富的信息理解
- 结合视觉和语言理解上下文
- 处理复杂的现实世界场景
更广泛的应用场景
- 图像描述生成
- 文档 OCR 和分析
- 图表数据提取
- 视觉问答系统

视觉能力在 AI Agent 中的重要性

对于 AI Agent 来说，视觉能力扩展了其与世界的交互方式：

1. 理解视觉内容

1
2
3

// 用户可以发送截图让 Agent 理解错误信息
用户: [上传错误截图]
Agent: 我看到这是一个 TypeError，错误发生在...

2. 分析文档和图表

1
2
3

// Agent 可以读取图片中的文档内容
用户: [上传发票图片]
Agent: 这张发票的金额是 256.00 元，日期是...

3. 处理视觉设计

1
2
3

// Agent 可以理解和讨论界面设计
用户: [上传设计稿]
Agent: 这个设计采用了三栏布局，主色调是蓝色...

主流视觉模型介绍

OpenAI GPT-4 Vision

GPT-4 Vision 是 OpenAI 推出的多模态版本，能够理解图像内容。

特点：

强大的视觉理解能力
支持高分辨率图像
善于文本识别（OCR）
适合复杂的推理任务

模型名称：

gpt-4-vision-preview - GPT-4V 预览版
gpt-4o - GPT-4 Omni（支持多模态）

使用示例：

const response = await openai.chat.completions.create({
  model: "gpt-4-vision-preview",
  messages: [{
    role: "user",
    content: [
      { type: "text", text: "描述这张图片" },
      {
        type: "image_url",
        image_url: {
          url: "data:image/png;base64,iVBORw0KG..."
        }
      }
    ]
  }]
});

Anthropic Claude 3

Claude 3 系列提供了强大的视觉能力。

特点：

Opus 模型视觉能力最强
支持 5MB 以上图像
擅长细节分析
更长的上下文窗口

模型名称：

claude-3-opus-20240229 - 最强视觉能力
claude-3-sonnet-20240229 - 平衡性能
claude-3-haiku-20240307 - 快速响应

其他视觉模型

模型	提供商	特点
Gemini Pro Vision	Google	免费额度多
Qwen-VL	阿里云	中文优化
Yi-VL	01.AI	开源友好

本章实现目标

在本章中，我们将在 Step 8 的基础上添加多模态支持，使 Agent 能够：

接收图像输入
- Web UI 上传图片
- CLI 通过命令发送图片
处理多模态消息
- 纯文本消息
- 纯图像消息
- 文本 + 图像混合消息
调用视觉模型
- 自动检测图像内容
- 切换到视觉模型
- 返回分析结果
保持向后兼容
- 不影响现有文本对话
- 可配置视觉模型
- 优雅降级处理

技术架构

┌─────────────────────────────────────────────────────────┐
│                        客户端                             │
├─────────────────────────────────────────────────────────┤
│  Web UI                          CLI Client              │
│  ├─ 图像上传按钮                  ├─ image: 命令         │
│  ├─ 图像预览                      ├─ 文件路径解析        │
│  └─ Base64 编码                   └─ 格式检测            │
└─────────────────────┬───────────────────────────────────┘
                      │ WebSocket
                      ↓
┌─────────────────────────────────────────────────────────┐
│                      服务器                               │
├─────────────────────────────────────────────────────────┤
│  WebSocket 协议层                                         │
│  ├─ 多模态消息解析                                        │
│  └─ content: TextContent | ImageContent | []            │
├─────────────────────────────────────────────────────────┤
│  Agent Service                                           │
│  ├─ 检测图像内容                                          │
│  ├─ 选择视觉模型                                          │
│  └─ 调用 LLM Client                                      │
├─────────────────────────────────────────────────────────┤
│  LLM Client                                              │
│  ├─ hasImage() 检测                                      │
│  ├─ getModel() 模型选择                                  │
│  └─ convertMessage() 格式转换                            │
└─────────────────────┬───────────────────────────────────┘
                      │ API Call
                      ↓
              ┌───────────────┐
              │  视觉 LLM      │
              │  GPT-4V       │
              │  Claude 3     │
              └───────────────┘

实现概览

新增文件：

src/types/multimodal.ts - 多模态类型定义
src/client/cli.ts - 添加图像命令处理
public/ - 更新 Web UI

修改文件：

src/llm/client.ts - 添加视觉模型支持
src/server/protocol.ts - 扩展消息协议
src/server/agent-service.ts - 处理多模态内容
src/agent.ts - 支持多模态消息

小结

本节介绍了多模态 AI 的基本概念、视觉能力在 AI Agent 中的重要性，以及主流的视觉模型。接下来，我们将深入实现细节，了解如何在 Agent 中集成视觉能力。

架构师