Creación de aplicaciones de voz con la API en tiempo real de OpenAI

Introducción

La forma en que interactuamos con la IA está evolucionando rápidamente. Con la introducción de la API en tiempo real de OpenAI, los desarrolladores ya pueden integrar experiencias de voz a voz multimodales y de baja latencia directamente en sus aplicaciones. Este avance permite mantener conversaciones fluidas en tiempo real con la IA, eliminando los retrasos y las complejidades de los canales tradicionales de procesamiento del habla.

En este artículo, exploraremos cómo funciona la API en tiempo real y recorreremos una implementación práctica utilizando WebRTC para establecer una conexión de igual a igual para la interacción de voz en tiempo real. Trataremos:

• Cómo la API Realtime mejora las aplicaciones de IA por voz
• Configuración de una conexión WebRTC para el intercambio de audio en directo
• Envío y recepción de mensajes con un canal de datos WebRTC
• Creación de una interfaz de usuario para controlar las sesiones y visualizar las interacciones

Al final, comprenderás cómo crear un asistente de voz de IA en tiempo real capaz de entablar conversaciones naturales similares a las humanas.

Evolución de los asistentes de voz con IA

Anteriormente, las aplicaciones de IA por voz requerían múltiples componentes:

1. Reconocimiento automático del habla (ASR): conversión del habla en texto mediante modelos como Whisper.
2. Procesamiento de texto: envío de texto a un modelo de IA para razonar y generar respuestas.
3. Texto a voz (TTS): conversión de la respuesta de la IA en voz mediante un modelo independiente.

Este enfoque introducía latencia y pérdida de expresividad, lo que hacía que las interacciones no parecieran naturales. La API en tiempo real agiliza este proceso gestionando las interacciones de voz a voz de forma nativa en una única llamada a la API, de forma similar al modo de voz avanzado de ChatGPT.

Bajo el capó, la API en tiempo real:

• Utiliza WebSockets para una comunicación persistente y en tiempo real con el modelo GPT-4o Realtime de OpenAI.
• Admite llamadas a funciones, lo que permite a los asistentes de IA activar acciones de forma dinámica en función de las entradas del usuario.
• Transmite directamente las entradas y salidas de audio, lo que garantiza la naturalidad de los turnos y las interrupciones, como en una conversación humana.

Con estas funciones, los desarrolladores pueden crear aplicaciones de voz para el aprendizaje de idiomas, atención al cliente, herramientas de accesibilidad, etc.

Implementación de conversaciones de IA en tiempo real con WebRTC

Para demostrar cómo integrar la API Realtime de OpenAI en una aplicación React, vamos a desglosar los componentes clave de un asistente de voz basado en WebRTC. Puedes encontrar más información sobre esta aplicación en el repositorio oficial de OpenAI Realtime Console en Github.

Configuración de WebRTC para la transmisión de audio en directo

WebRTC (Web Real-Time Communication) permite la comunicación peer-to-peer para el streaming de medios de baja latencia. En nuestra aplicación, nosotros:

• Captura la entrada del micrófono usando navigator.mediaDevices.getUserMedia()
• Establecer una conexión WebRTC RTCPeerConnection
• Crea un DataChannel para enviar y recibir interacciones basadas en texto.
• Adjunta un elemento <audio> para reproducir la respuesta de voz de la IA.

Así es como inicializamos la conexión WebRTC:

const pc = new RTCPeerConnection();
const audioElement = document.createElement("audio");
audioElement.autoplay = true;
pc.ontrack = (e) => (audioElement.srcObject = e.streams[0]);
const mediaStream = await navigator.mediaDevices.getUserMedia({ audio: true });
pc.addTrack(mediaStream.getTracks()[0]);
const dataChannel = pc.createDataChannel("oai-events");

Esto sienta las bases para la transmisión de voz en tiempo real entre el usuario y el modelo de OpenAI. Si necesitas obtener más información sobre WebRTC, puedes leer mi artículo aquí.

Iniciar una sesión con la API en tiempo real

Para conectarnos con la API en tiempo real de OpenAI, necesitamos:

1. Obtener una clave de autenticación efímera de nuestro servidor.
2. Generar una oferta WebRTC SDP (Protocolo de descripción de sesión).
3. Envía la oferta a la API de OpenAI para establecer una conexión.
4. Recibe y configura la respuesta de la API como descripción remota.

async function startSession() {
  const tokenResponse = await fetch("/token");
  const data = await tokenResponse.json();
  const EPHEMERAL_KEY = data.client_secret.value;  
  const offer = await pc.createOffer();
  await pc.setLocalDescription(offer);
  const sdpResponse = await fetch("https://api.openai.com/v1/realtime", {
    method: "POST",
    body: offer.sdp,
    headers: {
      Authorization: `Bearer ${EPHEMERAL_KEY}`,
      "Content-Type": "application/sdp",
    },
  });
  const answer = { type: "answer", sdp: await sdpResponse.text() };
  await pc.setRemoteDescription(answer);
}

Una vez que se ejecuta esta función, nuestra aplicación puede transmitir datos de voz en tiempo real a la API en tiempo real de OpenAI.

Envío y recepción de mensajes a través del canal de datos

Para comunicarnos con la IA, necesitamos enviar mensajes estructurados a través del canal de datos de WebRTC:

function sendTextMessage(message) {
  const event = {
    type: "conversation.item.create",
    item: {
      type: "message",
      role: "user",
      content: [{ type: "input_text", text: message }],
    },
  };
  dataChannel.send(JSON.stringify(event));
  dataChannel.send(JSON.stringify({ type: "response.create" }));
}

De manera similar, escuchamos las respuestas de la IA:

dataChannel.addEventListener("message", (e) => {
  const response = JSON.parse(e.data);
  console.log("AI Response:", response);
});

Ahora, nuestro asistente de IA puede enviar y recibir mensajes de forma dinámica, lo que permite conversaciones naturales.

Creación de una interfaz de usuario para la interacción con IA en tiempo real

Para hacer que nuestro asistente sea más interactivo, creamos una interfaz de usuario simple con:

• Un botón de iniciar/detener sesión
• Un registro de mensajes para mostrar interacciones.
• Un panel de herramientas para controles adicionales

<SessionControls
  startSession={startSession}
  stopSession={stopSession}
  sendClientEvent={sendClientEvent}
  sendTextMessage={sendTextMessage}
  isSessionActive={isSessionActive}
/>

Este componente de React permite a los usuarios iniciar una conversación, enviar mensajes y recibir respuestas en tiempo real.

Conclusión

Con la API en tiempo real de OpenAI, los desarrolladores pueden crear aplicaciones de voz que se sientan naturales: baja latencia, expresivas e interactivas. Al aprovechar WebRTC para la comunicación en tiempo real, hemos demostrado cómo:

• Transmite audio en vivo desde y hacia el modelo GPT-4o de OpenAI
• Utiliza WebRTC para conectividad de igual a igual
• Enviar mensajes estructurados a través de un canal de datos.
• Crea una interfaz de usuario de React simple para la interacción del usuario

Esto marca un paso importante para hacer que las conversaciones de IA sean más humanas y receptivas. Ya sea para educación, atención al cliente o accesibilidad, las interacciones de voz con IA en tiempo real ahora están a nuestro alcance.

¿Listo para crear tu propio asistente de IA en tiempo real? ¡Empiece a experimentar con la API en tiempo real de OpenAI hoy!