Vision models: Claude Vision, GPT-4V, Gemini

⏱ 13 min·⭐ 55 XP

Pré-requisitos (0/1)0%

⬜⚡ Realtime APIs: GPT-4o Realtime, conversational voice(Voice, Vision & Multimodal)

Recomendamos completar os pré-requisitos antes de seguir, mas nada te impede de continuar.

Três modelos, comportamentos diferentes

Claude 3.5 Sonnet / 3.7 Sonnet lidera em UI understanding e reasoning sobre diagramas — é a escolha para Computer Use e interpretação de screenshots complexos. GPT-4o ganha em velocidade e OCR de texto em imagens comuns. Gemini 1.5/2.0 aceita arquivos massivos (PDF até 1000 páginas, vídeo até horas) sem pipeline externo. A escolha depende do formato de entrada e do tipo de raciocínio.

Passando imagem: três formas

Forma de enviar	Quando cabe	Limite
Embutida na requisição	Imagem única e pequena	Infla o corpo e o custo de rede a cada chamada
Por URL	Imagem já hospedada e pública	O provedor precisa alcançar a URL — some em rede privada
Referência a arquivo enviado antes	A mesma imagem em várias chamadas	Exige gerenciar ciclo de vida do arquivo
Recortada e ampliada antes	Ler texto pequeno ou detalhe distante	É a técnica que mais melhora resultado — e a menos usada

Forma de enviarEmbutida na requisição

Quando cabeImagem única e pequena

LimiteInfla o corpo e o custo de rede a cada chamada

Forma de enviarPor URL

Quando cabeImagem já hospedada e pública

LimiteO provedor precisa alcançar a URL — some em rede privada

Forma de enviarReferência a arquivo enviado antes

Quando cabeA mesma imagem em várias chamadas

LimiteExige gerenciar ciclo de vida do arquivo

Forma de enviarRecortada e ampliada antes

Quando cabeLer texto pequeno ou detalhe distante

LimiteÉ a técnica que mais melhora resultado — e a menos usada

// 1. Base64 inline (Anthropic e OpenAI)
const b64 = fs.readFileSync('screenshot.png').toString('base64');

await anthropic.messages.create({
  model: 'claude-3-5-sonnet-20241022',
  max_tokens: 1024,
  messages: [{
    role: 'user',
    content: [
      { type: 'image', source: { type: 'base64', media_type: 'image/png', data: b64 } },
      { type: 'text', text: 'Descreva em PT-BR o que o usuário está vendo nesta tela.' },
    ],
  }],
});

// 2. URL pública (OpenAI aceita; Anthropic tem 'url' source)
await openai.chat.completions.create({
  model: 'gpt-4o',
  messages: [{
    role: 'user',
    content: [
      { type: 'text', text: 'Liste os campos deste formulário.' },
      { type: 'image_url', image_url: { url: 'https://exemplo.com/form.png', detail: 'high' } },
    ],
  }],
});

// 3. Files API (Gemini para arquivos grandes)
const file = await genAI.files.upload({ file: 'relatorio_100p.pdf', mimeType: 'application/pdf' });
await genAI.models.generateContent({
  model: 'gemini-2.0-flash',
  contents: [{ role: 'user', parts: [{ fileData: { fileUri: file.uri, mimeType: file.mimeType } }, { text: 'Resuma.' }] }],
});

Pre-processing: o que economiza dinheiro

Padrão profissional: nunca envie imagem crua do celular. Redimensione, comprima, e corte áreas irrelevantes antes de subir.

import sharp from 'sharp';

async function prepareForVision(inputPath: string): Promise<Buffer> {
  return sharp(inputPath)
    .resize(1568, 1568, { fit: 'inside', withoutEnlargement: true }) // sweet spot Anthropic
    .jpeg({ quality: 85, mozjpeg: true })
    .toBuffer();
}

// Para OCR de documento, preserve contraste com grayscale + normalize
async function prepareForOCR(inputPath: string): Promise<Buffer> {
  return sharp(inputPath)
    .resize(2048, null, { withoutEnlargement: true })
    .grayscale()
    .normalize()
    .png()
    .toBuffer();
}

💡

Para detail: 'high' no OpenAI, cada tile de 512px custa 170 tokens. Uma imagem 2048x2048 vira 16 tiles + base 85 = 2805 tokens. Reduzir para 1024x1024 = 4 tiles + base = 765 tokens. Mesmo conteúdo, custo 3.6x menor.

UI understanding: a fronteira de 2026

Claude Computer Use e similares funcionam porque o modelo entende coordenadas em screenshot. Mas sem prompt certo ele chuta. Padrão que funciona: enviar screenshot + pedir bounding box + fazer follow-up para executar.

const prompt =
  'A tela acima é um app de banco. O usuário quer cancelar a assinatura premium. ' +
  'Retorne JSON estrito: ' +
  '{ "elemento": "...", "bbox": [x1, y1, x2, y2], "acao": "click|type", "rationale": "..." } ' +
  'As coordenadas são em pixels, origem no canto superior esquerdo da imagem.';

const resp = await anthropic.messages.create({
  model: 'claude-3-5-sonnet-20241022',
  max_tokens: 512,
  messages: [{
    role: 'user',
    content: [
      { type: 'image', source: { type: 'base64', media_type: 'image/png', data: screenshotB64 } },
      { type: 'text', text: prompt },
    ],
  }],
});

Quiz rápido

Reduzir uma imagem de 2048 para 1024 pixels antes de enviar corta o custo em mais de três vezes. Por quê?

Charts e diagramas: onde vision LLM brilha

Extrair dados de gráfico (chart-to-data) é um caso onde vision LLM bate OCR tradicional facilmente. Pergunte dados estruturados com schema claro:

const schema = {
  type: 'object',
  properties: {
    title: { type: 'string' },
    chart_type: { type: 'string', enum: ['bar', 'line', 'pie', 'scatter'] },
    x_axis: { type: 'string' },
    y_axis: { type: 'string' },
    series: {
      type: 'array',
      items: {
        type: 'object',
        properties: {
          label: { type: 'string' },
          points: { type: 'array', items: { type: 'object', properties: { x: {}, y: { type: 'number' } } } },
        },
      },
    },
  },
};

// Claude: use tool_use para forçar JSON; OpenAI: response_format json_schema

⚠️

Sempre rode sanity checks: soma dos valores bate com legenda? Eixo Y é linear ou log? Vision LLM erra em gráficos log sem aviso — ele "normaliza" os valores. Teste com gráficos conhecidos antes de confiar em prod.

Custo operacional

# Comparativo aproximado (Abril 2026)
claude_3_5_sonnet:
  por_imagem_1024x1024: ~1400 tokens
  custo_usd: 0.0042     # $3/M input

gpt_4o_high_detail:
  tiles_512: 4 + 85 base = 425 tokens
  custo_usd: 0.0011     # $2.5/M input (alteração 2025)

gemini_1_5_pro:
  fixo_por_imagem: 258 tokens
  custo_usd: 0.0003     # baratíssimo para vision em lote

Resumo decisivo

✅

UI understanding / agents: Claude 3.5/3.7 Sonnet. Chart-to-data em escala: Gemini 1.5 Flash (custo). Reasoning rico sobre imagem única: GPT-4o ou Claude. Documentos escaneados em volume: serviço especializado (próximo módulo). Sempre redimensionar antes, sempre sanity-check output, sempre forçar schema JSON quando precisar de estrutura.

Perguntas frequentes

❓ Para que modelos de visão servem bem hoje?

Para responder pergunta aberta sobre imagem, ler documento com layout, descrever cena e extrair dado de captura de tela. Onde eles são fracos é contagem precisa, medida e localização exata de coordenada — tarefas que detector especializado resolve melhor.

❓ Quanto custa mandar imagem no contexto?

Custa como texto longo, proporcional à resolução — e é o item que mais surpreende na fatura de aplicação multimodal. Reduzir a imagem ao necessário e recortar a região relevante antes de enviar é a otimização de maior retorno.

❓ Modelo de visão substitui OCR?

Não em volume nem em custo para documento padronizado. Substitui quando o layout é variável ou a tarefa exige interpretar o que foi lido. O padrão que funciona é extração especializada primeiro, modelo para o campo que exige julgamento.

Fixando

Quiz rápido

Ao extrair dados de um gráfico, o módulo exige verificações de sanidade. Qual falha específica ele destaca?

Quiz rápido

Pedir a coordenada de um elemento na tela em formato estruturado, em vez de "clique no botão de cancelar", muda o quê?

Terminou de ler?

Marcar como concluído registra o XP, mantém sua sequência e coloca 3 cartas deste módulo na fila de revisão espaçada.

Próximos passos sugeridos

📄

OCR moderno: Azure Doc Intelligence, Textract, LandingAI

Voice, Vision & Multimodal · 12 min · +50 XP

→

Temas deste módulo

Ferramentas de IA do mercado

Discussão

Carregando comentários…

Vision models: Claude Vision, GPT-4V, Gemini

⏱ 13 min·⭐ 55 XP

Pré-requisitos (0/1)0%

⬜⚡ Realtime APIs: GPT-4o Realtime, conversational voice(Voice, Vision & Multimodal)

Recomendamos completar os pré-requisitos antes de seguir, mas nada te impede de continuar.

Três modelos, comportamentos diferentes

Passando imagem: três formas

Forma de enviar	Quando cabe	Limite
Embutida na requisição	Imagem única e pequena	Infla o corpo e o custo de rede a cada chamada
Por URL	Imagem já hospedada e pública	O provedor precisa alcançar a URL — some em rede privada
Referência a arquivo enviado antes	A mesma imagem em várias chamadas	Exige gerenciar ciclo de vida do arquivo
Recortada e ampliada antes	Ler texto pequeno ou detalhe distante	É a técnica que mais melhora resultado — e a menos usada

Forma de enviarEmbutida na requisição

Quando cabeImagem única e pequena

LimiteInfla o corpo e o custo de rede a cada chamada

Forma de enviarPor URL

Quando cabeImagem já hospedada e pública

LimiteO provedor precisa alcançar a URL — some em rede privada

Forma de enviarReferência a arquivo enviado antes

Quando cabeA mesma imagem em várias chamadas

LimiteExige gerenciar ciclo de vida do arquivo

Forma de enviarRecortada e ampliada antes

Quando cabeLer texto pequeno ou detalhe distante

LimiteÉ a técnica que mais melhora resultado — e a menos usada

// 1. Base64 inline (Anthropic e OpenAI)
const b64 = fs.readFileSync('screenshot.png').toString('base64');

await anthropic.messages.create({
  model: 'claude-3-5-sonnet-20241022',
  max_tokens: 1024,
  messages: [{
    role: 'user',
    content: [
      { type: 'image', source: { type: 'base64', media_type: 'image/png', data: b64 } },
      { type: 'text', text: 'Descreva em PT-BR o que o usuário está vendo nesta tela.' },
    ],
  }],
});

// 2. URL pública (OpenAI aceita; Anthropic tem 'url' source)
await openai.chat.completions.create({
  model: 'gpt-4o',
  messages: [{
    role: 'user',
    content: [
      { type: 'text', text: 'Liste os campos deste formulário.' },
      { type: 'image_url', image_url: { url: 'https://exemplo.com/form.png', detail: 'high' } },
    ],
  }],
});

// 3. Files API (Gemini para arquivos grandes)
const file = await genAI.files.upload({ file: 'relatorio_100p.pdf', mimeType: 'application/pdf' });
await genAI.models.generateContent({
  model: 'gemini-2.0-flash',
  contents: [{ role: 'user', parts: [{ fileData: { fileUri: file.uri, mimeType: file.mimeType } }, { text: 'Resuma.' }] }],
});

Pre-processing: o que economiza dinheiro

Padrão profissional: nunca envie imagem crua do celular. Redimensione, comprima, e corte áreas irrelevantes antes de subir.

import sharp from 'sharp';

async function prepareForVision(inputPath: string): Promise<Buffer> {
  return sharp(inputPath)
    .resize(1568, 1568, { fit: 'inside', withoutEnlargement: true }) // sweet spot Anthropic
    .jpeg({ quality: 85, mozjpeg: true })
    .toBuffer();
}

// Para OCR de documento, preserve contraste com grayscale + normalize
async function prepareForOCR(inputPath: string): Promise<Buffer> {
  return sharp(inputPath)
    .resize(2048, null, { withoutEnlargement: true })
    .grayscale()
    .normalize()
    .png()
    .toBuffer();
}

💡

UI understanding: a fronteira de 2026

const prompt =
  'A tela acima é um app de banco. O usuário quer cancelar a assinatura premium. ' +
  'Retorne JSON estrito: ' +
  '{ "elemento": "...", "bbox": [x1, y1, x2, y2], "acao": "click|type", "rationale": "..." } ' +
  'As coordenadas são em pixels, origem no canto superior esquerdo da imagem.';

const resp = await anthropic.messages.create({
  model: 'claude-3-5-sonnet-20241022',
  max_tokens: 512,
  messages: [{
    role: 'user',
    content: [
      { type: 'image', source: { type: 'base64', media_type: 'image/png', data: screenshotB64 } },
      { type: 'text', text: prompt },
    ],
  }],
});

Quiz rápido

Reduzir uma imagem de 2048 para 1024 pixels antes de enviar corta o custo em mais de três vezes. Por quê?

Charts e diagramas: onde vision LLM brilha

Extrair dados de gráfico (chart-to-data) é um caso onde vision LLM bate OCR tradicional facilmente. Pergunte dados estruturados com schema claro:

const schema = {
  type: 'object',
  properties: {
    title: { type: 'string' },
    chart_type: { type: 'string', enum: ['bar', 'line', 'pie', 'scatter'] },
    x_axis: { type: 'string' },
    y_axis: { type: 'string' },
    series: {
      type: 'array',
      items: {
        type: 'object',
        properties: {
          label: { type: 'string' },
          points: { type: 'array', items: { type: 'object', properties: { x: {}, y: { type: 'number' } } } },
        },
      },
    },
  },
};

// Claude: use tool_use para forçar JSON; OpenAI: response_format json_schema

⚠️

Custo operacional

# Comparativo aproximado (Abril 2026)
claude_3_5_sonnet:
  por_imagem_1024x1024: ~1400 tokens
  custo_usd: 0.0042     # $3/M input

gpt_4o_high_detail:
  tiles_512: 4 + 85 base = 425 tokens
  custo_usd: 0.0011     # $2.5/M input (alteração 2025)

gemini_1_5_pro:
  fixo_por_imagem: 258 tokens
  custo_usd: 0.0003     # baratíssimo para vision em lote

Resumo decisivo

✅

Perguntas frequentes

❓ Para que modelos de visão servem bem hoje?

❓ Quanto custa mandar imagem no contexto?

❓ Modelo de visão substitui OCR?

Fixando

Quiz rápido

Ao extrair dados de um gráfico, o módulo exige verificações de sanidade. Qual falha específica ele destaca?

Quiz rápido

Pedir a coordenada de um elemento na tela em formato estruturado, em vez de "clique no botão de cancelar", muda o quê?

Terminou de ler?

Marcar como concluído registra o XP, mantém sua sequência e coloca 3 cartas deste módulo na fila de revisão espaçada.

Próximos passos sugeridos

📄

OCR moderno: Azure Doc Intelligence, Textract, LandingAI

Voice, Vision & Multimodal · 12 min · +50 XP

→

Temas deste módulo

Ferramentas de IA do mercado

Discussão

Carregando comentários…