Tema 13 · Visión AI

13. Visión Multimodal: Análisis de Facturas, Gráficos y OCR con LLMs

Integra modelos con visión (GPT-4o, Claude 3.5 Sonnet) para analizar capturas de pantalla, facturas escaneadas y generar etiquetas accesibles.

La Era Multimodal: Cuando el LLM Sabe "Ver"

Hasta hace poco, para procesar imágenes en la web se requerían pipelines complejos y frágiles con motores OCR dedicados (como Tesseract) combinados con expresiones regulares. Hoy, los modelos multimodales (GPT-4o, Claude 3.5 Sonnet, Gemini 1.5 Flash) pueden recibir imágenes directamente como parte del arreglo de mensajes y comprender diagramas, leer tickets arrugados, interpretar tablas gráficas y generar código de componentes visuales con precisión humana.

En una aplicación web, puedes enviar imágenes a través de dos mecanismos:

  • URL Pública HTTPS: Si la imagen ya está almacenada en tu CDN o Amazon S3 ({"url": "https://..."}).
  • Data URL en Base64: Ideal para imágenes recién subidas por el usuario en un <input type="file"> sin necesidad de guardarlas primero en el disco (data:image/png;base64,...).

Optimización de Costos: Modo "Low" vs "High" Detail

Modo de Detalle Costo en Tokens Cuándo Utilizarlo
detail: "low" Costo fijo y ultra bajo (85 tokens por imagen). Clasificación general de imágenes, generación de textos alt para accesibilidad web o detección de colores predominantes.
detail: "high" Variable (~765 a 2,000+ tokens según resolución en mosaicos de 512x512). Lectura de recibos, facturas con letras pequeñas, capturas de pantalla de código o diagramas de arquitectura.

⚡ Extracción de Datos de Factura con Visión y Salida JSON en Node.js

Envía una imagen en Base64 al modelo con visión y extrae emisor, total e impuestos en un objeto JSON limpio.

invoice-ocr-vision.js
Solo lectura
/**
 * invoice-ocr-vision.js - Extracción inteligente de documentos con Visión AI
 */
import fs from "node:fs";

async function analyzeInvoiceImage(imagePath, apiKey) {
  // 1. Leer imagen y convertir a Base64
  const imageBuffer = fs.readFileSync(imagePath);
  const base64Data = imageBuffer.toString("base64");
  const dataUrl = `data:image/jpeg;base64,${base64Data}`;

  // 2. Construir la llamada con contenido mixto (texto + imagen)
  const response = await fetch("https://api.openai.com/v1/chat/completions", {
    method: "POST",
    headers: {
      "Content-Type": "application/json",
      "Authorization": `Bearer ${apiKey}`
    },
    body: JSON.stringify({
      model: "gpt-4o-mini",
      response_format: { type: "json_object" },
      temperature: 0.1,
      messages: [
        {
          role: "system",
          content: "Eres un sistema de contabilidad automatizado. Analiza la imagen de la factura y responde en JSON estricto con los campos: proveedor, nit_o_ruc, fecha, subtotal, iva, total y lista de items."
        },
        {
          role: "user",
          content: [
            {
              type: "text",
              text: "Extrae todos los datos contables de esta factura digitalizada."
            },
            {
              type: "image_url",
              image_url: {
                url: dataUrl,
                detail: "high" // Alta resolución para leer números pequeños
              }
            }
          ]
        }
      ]
    })
  });

  const data = await response.json();
  const rawJson = data.choices[0].message.content;
  return JSON.parse(rawJson);
}

// Ejemplo de retorno estructurado:
// {
//   "proveedor": "Ferretería Central S.A.S.",
//   "nit_o_ruc": "900.123.456-1",
//   "fecha": "2026-11-04",
//   "subtotal": 120.00,
//   "iva": 22.80,
//   "total": 142.80,
//   "items": [{"descripcion": "Taladro Percutor 1/2", "cantidad": 1, "precio": 120.00}]
// }
🧠
Mini-Quiz de Retención
Comprueba tu comprensión antes de pasar a la siguiente lección
1 Pregunta
Pregunta 1
¿Cuál es la forma más directa de enviar una imagen subida por el usuario en el navegador a una API de visión sin requerir almacenamiento permanente previo?
🦉
¿Tienes dudas con este tema?
Sócrates AI puede darte analogías y explicarte este código paso a paso.

🚀 ¿Quieres dominar IA Aplicada a Desarrollo Web: APIs, RAG & Agentes y crear proyectos reales?

Aprende arquitectura limpia, desarrollo web moderno, buenas prácticas y despliegue en producción con nuestro Bootcamp Fullstack Developer con mentorías en vivo.

🏛️ Autoría y Propiedad Intelectual: Obra educativa original de David Amador para Kilopolis Academia (Solucionáticos), estructurada sobre las especificaciones y estándares abiertos del W3C, el estándar vivo de WHATWG y la documentación oficial de código abierto. © Todos los derechos reservados.