Files
2nd/10_Wiki/Topics/Coding/AI_Multimodal_Vision_Patterns.md
T
2026-05-09 21:08:02 +09:00

5.3 KiB

id, title, category, status, source_trust_level, verification_status, created_at, updated_at, tags, tech_stack, applied_in, aliases
id title category status source_trust_level verification_status created_at updated_at tags tech_stack applied_in aliases
ai-multimodal-vision-patterns Multimodal — 이미지 / 음성 / 비디오 LLM Coding draft B conceptual 2026-05-09 2026-05-09
ai
multimodal
vision
audio
vibe-coding
language applicable_to
TS / OpenAI / Anthropic / Gemini
Backend
vision
image input
OCR
Whisper
audio
video
multimodal LLM

Multimodal LLM

Text 만 아님 — image / audio / video 입력 가능. Vision 으로 OCR / 차트 분석 / UI 검사. Whisper 로 STT. Gemini 가 native 비디오. 입력 크기 제한 + 비용 차이.

📖 핵심 개념

  • Vision: 이미지 → text understanding.
  • STT (Speech-to-Text): Whisper / Deepgram.
  • TTS (Text-to-Speech): OpenAI / ElevenLabs.
  • Video: Gemini 1.5/2 / Twelve Labs.
  • Token cost: 이미지 = 픽셀 기반 token.

💻 코드 패턴

Anthropic Vision

const r = await anthropic.messages.create({
  model: 'claude-opus-4-7',
  max_tokens: 1024,
  messages: [{
    role: 'user', content: [
      { type: 'image', source: { type: 'base64', media_type: 'image/png', data: base64 } },
      { type: 'text', text: 'Extract all text from this receipt.' },
    ],
  }],
});

URL 직접 (일부 제공자):

{ type: 'image', source: { type: 'url', url: 'https://...' } }

OpenAI Vision (gpt-4o)

const r = await openai.chat.completions.create({
  model: 'gpt-4o',
  messages: [{
    role: 'user', content: [
      { type: 'image_url', image_url: { url: 'data:image/png;base64,...', detail: 'high' } },
      { type: 'text', text: 'Describe the chart.' },
    ],
  }],
});

detail: low (적은 token) / high (정확).

OCR vs vision LLM

  • 단순 영수증 / 명함: Tesseract / AWS Textract / Google Vision API (싸고 빠름).
  • 차트 해석 / 표 + 의미: Vision LLM.

Whisper (STT)

const r = await openai.audio.transcriptions.create({
  file: fs.createReadStream('audio.mp3'),
  model: 'whisper-1',
  language: 'ko',
  response_format: 'verbose_json',
  timestamp_granularities: ['segment', 'word'],
});

console.log(r.text);
console.log(r.segments); // [{ start, end, text }]

TTS

const r = await openai.audio.speech.create({
  model: 'tts-1-hd',
  voice: 'alloy', // alloy / echo / fable / onyx / nova / shimmer
  input: 'Hello world',
  response_format: 'mp3',
});
const buf = Buffer.from(await r.arrayBuffer());
fs.writeFileSync('out.mp3', buf);

Streaming TTS (real-time)

import { OpenAI } from 'openai';
const stream = await openai.audio.speech.create({
  model: 'tts-1', voice: 'nova', input: text, response_format: 'opus',
});
// chunk 로 stream 재생

ElevenLabs (사람 같은 음성)

import { ElevenLabs } from 'elevenlabs';
const client = new ElevenLabs({ apiKey });
const stream = await client.textToSpeech.convertAsStream('voice-id', {
  text, modelId: 'eleven_turbo_v2_5',
});

Realtime API (OpenAI / Anthropic)

  • 사용자 음성 → 즉시 응답 음성.
  • WebRTC 또는 WebSocket.
  • 대화형 voice agent.
const ws = new WebSocket('wss://api.openai.com/v1/realtime?model=gpt-4o-realtime-preview', {
  headers: { Authorization: `Bearer ${apiKey}`, 'OpenAI-Beta': 'realtime=v1' },
});

ws.on('message', (msg) => {
  const ev = JSON.parse(msg);
  if (ev.type === 'response.audio.delta') {
    const audio = Buffer.from(ev.delta, 'base64');
    speaker.write(audio);
  }
});

Gemini Video

import { GoogleGenerativeAI } from '@google/generative-ai';
const genAI = new GoogleGenerativeAI(apiKey);
const model = genAI.getGenerativeModel({ model: 'gemini-1.5-pro' });

const file = await fileManager.uploadFile('video.mp4', { mimeType: 'video/mp4' });
const r = await model.generateContent([
  { fileData: { fileUri: file.uri, mimeType: file.mimeType } },
  'Summarize this video.',
]);

Image generation (DALL-E / Imagen / Stable Diffusion)

const r = await openai.images.generate({
  model: 'dall-e-3',
  prompt: 'A red cat in space',
  size: '1024x1024',
  quality: 'hd',
});
const url = r.data[0].url;

비용 절감

  • Vision detail: low / auto / high.
  • 이미지 압축 (1024px 충분).
  • Cache: 같은 이미지 hash → 결과 cache.

🤔 의사결정 기준

입력 추천
영수증 OCR Vision LLM (Claude / GPT-4o) 또는 Textract
차트 해석 Vision LLM
사용자 음성 transcribe Whisper / Deepgram (실시간)
자연 음성 출력 ElevenLabs / OpenAI TTS
음성 대화 agent OpenAI Realtime / Pipecat
비디오 분석 Gemini 1.5+
이미지 생성 DALL-E / Flux / Imagen

안티패턴

  • 큰 이미지 base64: token 비용. resize.
  • 모든 이미지 detail high: low / auto 충분 자주.
  • PII 음성 그대로 외부 API: privacy. on-prem Whisper.
  • 응답 stream X 음성 대화: latency 5s+ — 비실시간.
  • 동영상 통째 input: 1분당 token 폭발. 키 frame 추출.
  • OCR 결과 그대로 신뢰: 재검토 / structured output.
  • Base 인코딩 큰 파일 메모리: stream / multipart.

🤖 LLM 활용 힌트

  • Vision = base64 / URL.
  • Whisper = STT 표준.
  • Realtime API 가 voice agent 의 미래.
  • 비용 = detail / 차원 / cache.

🔗 관련 문서