Cómo integrar audio e imágenes en un chatbot

Contenido del curso

OpenAI API

Claude API

Gemini API y Despliegue con Vercel

Vercel AI SDK

ElevenLabs API

Tomar examen

Cursos Empresas Blog Live Conf Eventos Precios

0:0015:03

Cómo integrar audio e imágenes en un chatbot

Curso de Configuración de APIs de LLMs

Clase 6 de 18

Clase 6 / 18

Recursos

Transformar un chatbot de texto plano en una aplicación que escucha, habla y genera imágenes es más sencillo de lo que parece cuando conoces los endpoints correctos de OpenAI. Aquí se explica paso a paso cómo conectar las APIs de imagen, texto a audio y audio a texto para construir un asistente que se siente verdaderamente profesional.

¿Qué APIs de OpenAI se necesitan para ir más allá del texto?

Partiendo de una aplicación que ya funciona con el endpoint de completions para mantener conversaciones, se agregan tres capacidades nuevas [00:30]:

Generación de imágenes: utiliza images.generate para crear imágenes a partir de un prompt descriptivo.
Transcripción de audio a texto (Speech-to-Text): convierte la voz capturada por el micrófono en texto mediante audio.transcriptions con el modelo Whisper 1 [04:42].
Conversión de texto a audio (Text-to-Speech): transforma un texto escrito en un archivo de voz usando audio.speech [05:22].

Estos tres endpoints se suman al chat basado en texto que ya existía, creando una experiencia multimodal completa.

¿Cómo funciona la API de generación de imágenes?

La Image API ofrece tres operaciones: generaciones, ediciones y variaciones [02:10]. Para crear una imagen desde cero se utiliza el endpoint de generations. Los modelos compatibles incluyen GPT Image 1, GPT Image 1 mini y los conocidos DALL-E 2 y DALL-E 3.

En el código, la llamada se estructura así: se envía un prompt descriptivo, se indica el modelo y se configuran las dimensiones (por defecto 1024 × 1024 píxeles) junto con el formato de respuesta deseado [06:28]. Mientras más detallado sea el prompt —iluminación, raza, estilo—, más preciso será el resultado. Un prompt genérico como "una imagen de un perrito" produce una imagen aleatoria sin demasiado detalle [09:05].

¿Cómo se configura el system prompt para controlar las respuestas?

Un cambio clave en el código es la inclusión de un system message [05:52]. Este mensaje define la personalidad del asistente y establece reglas que se mantienen durante toda la conversación. Por ejemplo, cuando se trabaja con imágenes, el modelo podría intentar generar la salida en formato SVG o ASCII; con el system prompt se le indica explícitamente que nunca use esos formatos y devuelva únicamente JPG.

Este mensaje se agrega al listado de mensajes que llega desde el frontend, de modo que el modelo siempre lo recuerde en cada interacción.

¿Cómo integrar audio a texto y texto a audio en la aplicación?

Para la funcionalidad de audio a texto, la interfaz activa el micrófono del navegador. El audio capturado se envía al endpoint audio.transcriptions con el modelo Whisper 1 [07:15]. La respuesta es simplemente el texto transcrito, que se coloca directamente en el campo de prompt para que el usuario pueda editarlo antes de enviarlo al chat.

Un detalle importante: cuando una aplicación web necesita acceso al micrófono o la cámara, el navegador solicita permisos explícitos [07:40]. Se recomienda permitir el acceso solo por la sesión actual en entornos de desarrollo como localhost:3000.

Para la funcionalidad de texto a audio, el texto ingresado se envía al endpoint audio.speech. Se selecciona el modelo (como GPT-4o mini TTS), se elige una voz entre las disponibles y se especifica el formato de salida, en este caso MP3 para facilitar la reproducción en el navegador [05:35]. La respuesta requiere un buffer que la interfaz procesa para generar un reproductor de audio.

Ambos endpoints incluyen un manejo de errores que muestra información tanto en la consola como en la interfaz, lo que facilita la depuración durante el desarrollo.

¿Qué considerar sobre costos y modelos al escalar tu aplicación?

Cada modelo tiene un balance entre velocidad, calidad y precio. Los modelos más nuevos y potentes —como DALL-E 3 o GPT-4o mini TTS— ofrecen mejores resultados pero incrementan el costo por uso [10:22]. Para un prototipo o ejercicio de aprendizaje, modelos estándar como Whisper 1 y configuraciones por defecto son suficientes.

La documentación oficial de OpenAI lista todos los modelos compatibles con cada endpoint, sus limitaciones y sus precios. Revisar estos detalles antes de llevar la aplicación a producción es fundamental para controlar el presupuesto.

Con texto, imagen y audio funcionando, la base está lista para seguir explorando más endpoints de OpenAI. ¿Qué funcionalidad te gustaría integrar primero en tu proyecto? Comparte tu experiencia en los comentarios.

Gabriel Obregón

Hace 7 meses

🧠 CÓMO TRANSFORMAR UN CHATBOT SIMPLE (SOLO TEXTO) EN UNA APLICACIÓN MUCHO MÁS COMPLETA.

👉 La idea es convertirlo en un sistema multimodal, es decir, que pueda:

🎤 Escuchar
🗣️ Hablar
🖼️ Generar imágenes

Todo esto se logra integrando distintas APIs de OpenAI sin necesidad de gran complejidad técnica.

🔌 APIs NECESARIAS

Para lograr la multimodalidad, se agregan tres capacidades clave al chat:

🖼️ Generación de imágenes → images.generate
🎤 Audio a texto → audio.transcriptions (modelo Whisper 1)
🔊 Texto a audio → audio.speech

👉 Estas funciones trabajan junto al chat para crear una experiencia más completa.

🖼️ GENERACIÓN DE IMÁGENES

La API permite hacer tres cosas principales:

✨ Crear imágenes desde cero
🛠️ Editar imágenes
🔁 Generar variaciones

⚙️ Cómo crear una imagen

Para generar una imagen:

Se usa el endpoint de generations
Se envía:
- 📝 Un prompt (descripción)
- 🤖 Un modelo
- 📐 Un tamaño (por defecto: 1024×1024)

⚙️ SYSTEM PROMPT

El system prompt es un mensaje que define cómo se comporta el modelo.

🎛️ Qué controla

Permite definir:

🎭 Personalidad del asistente
📏 Reglas de salida

📌 Ejemplo práctico

Puedes indicar:

🚫 No usar formatos como SVG o ASCII
✅ Generar imágenes en formato JPG

👉 Este mensaje se mantiene durante toda la conversación.

🎤 AUDIO ↔ TEXTO

🎧 1. Audio a texto

Proceso:

🎤 Se usa el micrófono del navegador
📤 Se envía el audio a audio.transcriptions
🤖 Se procesa con Whisper 1
📝 Se obtiene texto editable

⚠️ Detalle importante

El navegador pedirá permiso para usar el micrófono
🔐 En desarrollo, conviene permitirlo solo por sesión

🔊 2. Texto a audio

Proceso:

Se usa audio.speech
Se configura:
- 🤖 Modelo (ej: GPT-4o mini TTS)
- 🗣️ Voz
- 🎵 Formato (MP3 recomendado)
📦 La respuesta llega como un buffer de audio
▶️ Luego se reproduce

OpenAI API

Construye tu propio ChatGPT

Cómo funciona la API de OpenAI

Conexión con la API de OpenAI

Cómo mantener contexto en conversaciones con OpenAI

Conectar OpenAI con Next.js paso a paso

Cómo integrar audio e imágenes en un chatbot

Claude API

Configuración de API keys en Anthropic

Primera llamada a la API de Claude con TypeScript

Streaming y mensajes múltiples en Anthropic

Integración de OpenAI y Anthropic en un solo chat

Gemini API y Despliegue con Vercel

Cómo generar tu API key de Google Gemini

Despliegue de Next.js con Vercel en 3 pasos

Vercel AI SDK

AI SDK: un solo código para todos los LLMs

Configurar el AI SDK de Vercel en TypeScript

AI SDK de Vercel: tres proveedores, un solo código

ElevenLabs API

Eleven Labs: text to speech con IA

Tu primera conversión de texto a voz con Eleven Labs

IA generativa: qué sigue después del curso

Cómo integrar audio e imágenes en un chatbot

Progreso del curso

OpenAI API

Claude API

Gemini API y Despliegue con Vercel

Vercel AI SDK

ElevenLabs API

Recursos

Recursos