IA Multi-Modal (Imágenes + Texto) - Tutorial de LangChain | TechLead

¿Qué es la IA Multi-Modal?

Los modelos de IA multi-modal pueden procesar múltiples tipos de entrada — texto, imágenes, audio y video. Con LangChain, puedes construir aplicaciones que analizan imágenes, generan descripciones, extraen datos de capturas de pantalla y combinan comprensión visual con razonamiento textual.

👁️ Casos de Uso Multi-Modal

Análisis de Imágenes: Describir, clasificar o extraer datos de imágenes
Captura a Código: Convertir capturas de UI en componentes React
OCR de Documentos: Leer texto de imágenes de documentos
Q&A Visual: Responder preguntas sobre imágenes

Enviando Imágenes a Modelos de Chat

import { ChatOpenAI } from "@langchain/openai";
import { HumanMessage } from "@langchain/core/messages";

const model = new ChatOpenAI({ modelName: "gpt-4o" }); // Modelo con capacidad de visión

const response = await model.invoke([
  new HumanMessage({
    content: [
      { type: "text", text: "¿Qué hay en esta imagen? Descríbela en detalle." },
      {
        type: "image_url",
        image_url: {
          url: "https://ejemplo.com/foto.jpg",
          detail: "high",
        },
      },
    ],
  }),
]);

console.log(response.content);

Usando Imágenes en Base64

import { readFileSync } from "fs";

const imageBuffer = readFileSync("./captura.png");
const base64Image = imageBuffer.toString("base64");

const response = await model.invoke([
  new HumanMessage({
    content: [
      { type: "text", text: "Describe este diseño de UI." },
      {
        type: "image_url",
        image_url: {
          url: `data:image/png;base64,${base64Image}`,
        },
      },
    ],
  }),
]);

Captura de Pantalla a Código

const response = await model.invoke([
  new HumanMessage({
    content: [
      {
        type: "text",
        text: `Convierte esta captura de pantalla UI a un componente React usando Tailwind CSS.
               Usa TypeScript y componentes funcionales con tipos apropiados.
               Incluye diseño responsivo para móvil.`,
      },
      {
        type: "image_url",
        image_url: {
          url: `data:image/png;base64,${capturaBase64}`,
          detail: "high",
        },
      },
    ],
  }),
]);

// ¡Devuelve código completo de componente React + Tailwind!

Extrayendo Datos Estructurados de Imágenes

import { z } from "zod";

const ReciboSchema = z.object({
  tienda: z.string(),
  fecha: z.string(),
  articulos: z.array(z.object({
    nombre: z.string(),
    cantidad: z.number(),
    precio: z.number(),
  })),
  total: z.number(),
  impuesto: z.number(),
});

const model = new ChatOpenAI({ modelName: "gpt-4o" })
  .withStructuredOutput(ReciboSchema);

const recibo = await model.invoke([
  new HumanMessage({
    content: [
      { type: "text", text: "Extrae todos los datos de esta imagen de recibo." },
      {
        type: "image_url",
        image_url: { url: `data:image/jpeg;base64,${reciboBase64}` },
      },
    ],
  }),
]);

console.log(recibo);
// { tienda: "Walmart", fecha: "2026-02-08", articulos: [...], total: 47.93, impuesto: 3.84 }

💡 Puntos Clave

• Usa modelos con capacidad de visión como GPT-4o o Claude 3 para comprensión de imágenes
• Las imágenes se pueden enviar como URLs o cadenas codificadas en base64
• Combina withStructuredOutput() con imágenes para extraer datos tipados
• La conversión de captura a código es una aplicación práctica poderosa
• Usa detail: "high" para imágenes que necesitan análisis preciso