Contenido del curso
Fundamentos de la API de OpenAI
Control de Respuestas
Desarrollo de 'PlatziVision'
Fine-Tuning
OpenAI Batch
OpenAI Assistants
Proyecto Final y Cierre del Curso
Imágenes en base64 con la API de OpenAI
Resumen
Integrar análisis de imágenes en un chatbot con GPT requiere un paso clave: convertir la imagen a base64 y formatearla en la estructura exacta que espera la API de OpenAI. Aquí verás cómo hacerlo dentro de PlaxiVision, partiendo de un chat.py que ya envía y procesa mensajes de texto.
Esta guía es para desarrolladores que ya construyeron la base del chat y quieren sumar visión por computador sin depender de servicios externos para alojar imágenes.
¿Por qué convertir la imagen a base64 antes de enviarla a OpenAI?
La interfaz de PlaxiVision no sube la imagen a la nube, así que no puedes generar una URL pública. La solución es codificarla en base64 y enviarla como data URL directamente al modelo. Lo bueno: no necesitas la librería base64 de Python porque la interfaz ya entrega la imagen lista en ese formato.
¿Qué es base64 y por qué se usa con imágenes? Es un esquema que convierte datos binarios en texto plano. Permite enviar una imagen dentro de un payload JSON sin necesidad de hospedarla en un servidor.
¿Cómo limpiar el mensaje antes de enviarlo al modelo GPT?
Cada mensaje en el chat tiene un role (user, assistant o system) y un content. Eso es lo que OpenAI procesa. El problema aparece cuando agregas una propiedad extra como image_data: la API no la reconoce y lanza error.
La estrategia es tratar image_data como una propiedad opcional dentro del mensaje, verificar su existencia y, solo si está presente, transformar el contenido antes de enviarlo. Si no existe, mandas el mensaje tal cual con su role y content de texto normal.
¿Qué pasa cuando el contenido deja de ser string y se vuelve arreglo?
Cuando hay imagen, el content cambia de string a una lista de partes. Esa lista combina dos tipos de elementos:
- Un objeto con
type: textque contiene la pregunta del usuario, por ejemplo "Analiza esta imagen" o "¿Qué puedes leer aquí?". - Uno o varios objetos con
type: image_url, donde la propiedadurllleva la imagen codificada comodata:image/png;base64,<contenido>.
Esa estructura es la que el modelo GPT entiende para hacer análisis visual.
¿Cómo se construye el contenido con texto e imagen juntos?
Dentro del bloque que detecta image_data, primero agregas la parte de texto con lo que pidió el usuario. Luego iteras sobre la lista de imágenes, porque puede llegar más de una, y por cada una añades un diccionario nuevo a las partes del contenido.
El formato del data URL sigue este patrón: data:image/png;base64, seguido del string base64. En el ejemplo se asume PNG, aunque sería mejor detectar el tipo real de la imagen antes de enviarla.
¿Puedo enviar varias imágenes en un solo mensaje a GPT? Sí. Como el contenido es un arreglo, basta con hacer un bucle sobre la lista de imágenes y agregar un objeto
image_urlpor cada una.
Una vez armadas todas las partes, agregas el mensaje completo a la lista que se envía a OpenAI, fuera del bucle de imágenes para no duplicarlo. La diferencia frente al flujo de texto puro es que en lugar de mandar message.content como string, mandas el arreglo de partes.
¿Cómo se prueba el soporte de imágenes en PlaxiVision?
Con el servidor encendido, el flujo de prueba es directo. Empiezas con un saludo simple para confirmar que el chat responde, luego subes una imagen y escribes una instrucción como "Por favor, analiza esta imagen".
Después de un par de segundos, el modelo devuelve una descripción del contenido visual, por ejemplo identificando que se trata de una captura de la interfaz de PlaxiVision. Con eso confirmas que el formateo a base64 y la estructura de partes están correctos.
Conceptos y habilidades clave que se trabajan en esta integración
Estos son los puntos técnicos que vale la pena dominar para replicar la solución:
- Codificación base64 [0:38]: convertir binarios a texto para incrustar imágenes en JSON sin URL externa.
- Estructura de mensajes en OpenAI [0:54]: cada mensaje requiere
roleycontent, sin propiedades extra comoimage_data. - Limpieza de payload [1:24]: filtrar solo las propiedades válidas antes de enviar al modelo para evitar errores de la API.
- Propiedad opcional
image_data[1:48]: verificar su existencia con un condicional antes de procesar la imagen. - Content como arreglo de partes [2:13]: cuando hay imagen, el contenido pasa de string a lista con objetos
type: textytype: image_url. - Formato data URL [2:55]:
data:image/png;base64,<string>es el patrón que GPT acepta para imágenes embebidas. - Iteración sobre múltiples imágenes [4:38]: el modelo soporta varias imágenes por mensaje, así que el bucle sobre la lista permite analizarlas todas en una sola llamada.
Ahora que el soporte básico funciona, prueba enviar dos o tres imágenes en un mismo mensaje y compara cómo responde el modelo. ¿Qué resultados obtuviste al analizar varias imágenes a la vez? Cuéntalo en los comentarios.