Crear un servicio de audio en tiempo real utilizando OpenAI

Aunque Deepseek R1 ha sido lanzado, no cabe duda de que la API que ofrece Open AI sigue siendo excelente y atractiva.

Hoy intentaremos crear un servicio web de audio en tiempo real utilizando la API Realtime de Open AI.

1. ¿Qué es la API Realtime?

Es un servicio lanzado por OpenAI el 1 de octubre de 2024, que admite la entrada y salida de voz en tiempo real.

Anteriormente, para interactuar con chatGPT usando voz, era necesario utilizar un modelo de reconocimiento de voz como Whisper para convertir el audio en texto, enviarlo y luego usar la conversión texto-voz para la respuesta del modelo.

Este método resultaba en un tiempo de retraso más largo de lo esperado.

La API Realtime implementa directamente la entrada y salida de audio.

Con el modelo GPT-4o y utilizando Websocket, WebRTC, se puede implementar la entrada y salida de audio en tiempo real.

Para más detalles, consulta el sitio oficial.

2. Open AI Realtime Blocks

No pasó mucho tiempo desde su lanzamiento para que algún genio ya implementara la API y la subiera a GitHub como código abierto.

El propio sitio web era tan bonito que pensé que el SDK había sido creado por Vercel.

Pongo el sitio del creador.

Cuando vas a la instalación, no hay yarn o npm, simplemente toma lo que necesites y úsalo.

Incluso hay código disponible.

Solo necesitas leer por encima y trasladar las partes necesarias a tu proyecto.

Hay varios formatos como Classic, Dock, Siri, pero la versión de ChatGPT fue la que más me gustó.

3. Implementación (Ctrl + C & V)

Esto es más copia y pega que implementación.

Primero, instalemos todas las dependencias.

El modelo que elegí solo requería una dependencia.

yarn add framer-motion

Y añadí un gancho.

Consulta el documento Crear el Hook WebRTC para el código completo.

"use client";
 
import { useState, useRef, useEffect } from "react";
import { Tool } from "@/lib/tools";

const useWebRTCAudioSession = (voice: string, tools?: Tool[]) => {
  const [status, setStatus] = useState("");
  const [isSessionActive, setIsSessionActive] = useState(false);
  const audioIndicatorRef = useRef<HTMLDivElement | null>(null);
  const audioContextRef = useRef<AudioContext | null>(null);
  const audioStreamRef = useRef<MediaStream | null>(null);
  const peerConnectionRef = useRef<RTCPeerConnection | null>(null);

se acorta...

Honestamente, añadí sin pensar para un desarrollo rápido...

Dependiendo del modelo que vayas a usar, añade o elimina adecuadamente audio o texto en modalities.

Si no quieres demasiados registros en la consola después del desarrollo, también puedes eliminar todos los console.log.

Luego crea la ruta para la sesión de creación de websocket.

import { NextResponse } from 'next/server';

export async function POST() {
    try {        
        if (!process.env.OPENAI_API_KEY){
            throw new Error(`OPENAI_API_KEY no está configurado`);

        }
        const response = await fetch("https://api.openai.com/v1/realtime/sessions", {
            method: "POST",
            headers: {
                Authorization: `Bearer ${process.env.OPENAI_API_KEY}`,
                "Content-Type": "application/json",
            },
            body: JSON.stringify({
                model: "gpt-4o-mini-realtime-preview",
                voice: "alloy",
                modalities: ["audio", "text"],
                // instructions:"You are a helpful assistant for the website named OpenAI Realtime Blocks, a UI Library for Nextjs developers who want to integrate pre-made UI components using TailwindCSS, Framer Motion into their web projects. It works using an OpenAI API Key and the pre-defined 'use-webrtc' hook that developers can copy and paste easily into any Nextjs app. There are a variety of UI components that look beautiful and react to AI Voice, which should be a delight on any modern web app.",
                tools: tools,
                tool_choice: "auto",
            }),
        });

        if (!response.ok) {
            throw new Error(`La solicitud de API falló con el estado ${response.status}`);
        }

        const data = await response.json();

        // Devolver la respuesta JSON al cliente
        return NextResponse.json(data);
    } catch (error) {
        console.error("Error al obtener datos de sesión:", error);
        return NextResponse.json({ error: "Error al obtener datos de sesión" }, { status: 500 });
    }
}

const tools = [
    {
        "type": "function",
        "name": "getPageHTML",
        "description": "Obtiene el HTML de la página actual",
        "parameters": {
            "type": "object",
            "properties": {}
        }
    },
    {
        "type": "function", 
        "name": "getWeather",
        "description": "Obtiene el clima actual",
        "parameters": {
            "type": "object",
            "properties": {}
        }
    },
    {
        "type": "function",
        "name": "getCurrentTime",
        "description": "Obtiene la hora actual",
        "parameters": {
            "type": "object",
            "properties": {}
        }
    },
];

Por si acaso, no olvides configurar la clave API en el archivo .env.local.

Entra al documento correspondiente donde están chatgpt.tsx y page.tsx.

Copia eso.

Yo lo configuré de la siguiente manera:

import React, { useEffect, useState } from "react";
import { motion } from "framer-motion";
import useWebRTCAudioSession from "@/hooks/use-webrtc";
 
const ChatGPT: React.FC = () => {
  const { currentVolume, isSessionActive, handleStartStopClick, msgs } =
    useWebRTCAudioSession("alloy");
 
  const silenceTimeoutRef = React.useRef<NodeJS.Timeout | null>(null);
 
  const [mode, setMode] = useState<"idle" | "thinking" | "responding" | "volume" | "">(
    ""
  );
  const [volumeLevels, setVolumeLevels] = useState([0, 0, 0, 0]);

  ....se acorta

Y también creé un page.tsx.

import ChatGPT from "@/components/aiChat/AudioChatGPT";
 
export default function Page() {
  return (
    <main className="flex items-center justify-center h-screen">
      <ChatGPT />
    </main>
  );
}

Ahora, al realizar pruebas, verás que funciona correctamente.

Aún no tengo modo oscuro, así que cambié el color del svg a gris.

4. Opiniones

El coste es de 0.06$ por minuto de entrada de audio y 0.24$ por salida.

No parece mucho, pero al probar y hablar un poco durante el día, acabo con el siguiente coste.

Gaste 2 dólares en los últimos dos meses usando streamText, pero hoy en un solo día gasté 1.5 dólares...

Definitivamente es más barato que pagar, pero sigue siendo más caro de lo que pensaba.

Mi esposa me pidió que implementara un GPT para el aprendizaje de inglés, así que probaré con esto.