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 - 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¿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.