跳到主要内容

多模态交互

问题​

AI 应用如何实现图片、语音等多模态输入输出？有哪些技术方案？

答案​

一、多模态能力概览​

二、图片输入（Vision）​

API 调用​

import OpenAI from "openai";
const openai = new OpenAI();

// 方式 1：图片 URL
const response = await openai.chat.completions.create({
  model: "gpt-4o",
  messages: [
    {
      role: "user",
      content: [
        { type: "text", text: "描述这张图片" },
        { type: "image_url", image_url: { url: "https://example.com/image.jpg" } },
      ],
    },
  ],
});

// 方式 2：Base64 编码
const base64Image = fs.readFileSync("image.jpg").toString("base64");
const response2 = await openai.chat.completions.create({
  model: "gpt-4o",
  messages: [
    {
      role: "user",
      content: [
        { type: "text", text: "这是什么？" },
        {
          type: "image_url",
          image_url: { url: `data:image/jpeg;base64,${base64Image}` },
        },
      ],
    },
  ],
});

前端图片上传​

function ImageUpload({ onUpload }: { onUpload: (file: File) => void }) {
  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    const file = e.target.files?.[0];
    if (file) {
      // 客户端压缩（大图片建议压缩后上传）
      if (file.size > 5 * 1024 * 1024) {
        alert("图片不超过 5MB");
        return;
      }
      onUpload(file);
    }
  };

  return (
    <label className="cursor-pointer">
      📎
      <input type="file" accept="image/*" onChange={handleChange} hidden />
    </label>
  );
}

三、语音输入（Speech-to-Text）​

// OpenAI Whisper API
const transcription = await openai.audio.transcriptions.create({
  file: fs.createReadStream("audio.mp3"),
  model: "whisper-1",
  language: "zh",
});
console.log(transcription.text);

浏览器端录音：

async function startRecording() {
  const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
  const mediaRecorder = new MediaRecorder(stream);
  const chunks: Blob[] = [];

  mediaRecorder.ondataavailable = (e) => chunks.push(e.data);
  mediaRecorder.onstop = async () => {
    const blob = new Blob(chunks, { type: "audio/webm" });
    // 发送到后端进行 STT
    const formData = new FormData();
    formData.append("audio", blob);
    await fetch("/api/transcribe", { method: "POST", body: formData });
  };

  mediaRecorder.start();
  return mediaRecorder; // 调用 .stop() 结束录音
}

四、语音输出（Text-to-Speech）​

// OpenAI TTS API
const speech = await openai.audio.speech.create({
  model: "tts-1",
  voice: "alloy",
  input: "你好，今天天气不错！",
});

// 保存为文件
const buffer = Buffer.from(await speech.arrayBuffer());
fs.writeFileSync("output.mp3", buffer);

浏览器端播放：

async function playTTS(text: string) {
  const response = await fetch("/api/tts", {
    method: "POST",
    body: JSON.stringify({ text }),
  });
  const blob = await response.blob();
  const url = URL.createObjectURL(blob);
  const audio = new Audio(url);
  audio.play();
}

五、图片生成​

// DALL-E 3
const image = await openai.images.generate({
  model: "dall-e-3",
  prompt: "一只在太空中漂浮的猫，赛博朋克风格",
  size: "1024x1024",
  quality: "hd",
});
const imageUrl = image.data[0].url;

六、模型多模态能力对比​

模型图片输入图片生成语音输入语音输出视频输入
GPT-4o✅✅✅✅❌
Claude 3.5✅❌❌❌❌
Gemini 2.0✅✅✅✅✅

常见面试问题​

Q1: Vision 模型的图片有什么限制？​

答案：

  • 大小限制：OpenAI 最大 20MB，建议压缩到 1-5MB
  • 分辨率：超过 2048px 会自动缩放
  • Token 消耗：图片会被转换为 Token（低分辨率 ~85 token，高分辨率可达数千）
  • 格式：支持 JPEG、PNG、GIF、WebP

Q2: 如何在 AI 应用中实现实时语音对话？​

答案：

  1. 录音：浏览器 MediaRecorder API 捕获音频
  2. STT：Whisper API 将语音转文本
  3. LLM：文本送入 LLM 生成回复
  4. TTS：回复文本通过 TTS 转语音
  5. 播放：Audio API 播放语音
  6. 优化：使用 OpenAI Realtime API（WebRTC）可实现端到端低延迟语音对话

相关链接​