Construyendo un Asistente con ChatGPT y Voz habilitada utilizando React y Express

Construyendo un Asistente con ChatGPT y Voz en React y Express

Con los Grandes Modelos de Lenguaje volviéndose cada vez más populares en el mundo actual, el interés en su uso para el desarrollo también está aumentando, aunque no siempre es fácil saber por dónde empezar.

En esta publicación, vamos a explicar cómo construir un chatbot simple impulsado por el modelo de lenguaje ChatGPT (en este caso, gpt-35-turbo), como una forma de entender cómo se pueden implementar estos modelos en una aplicación de la vida real. El chatbot que desarrollaremos consistirá en una simple aplicación web, escrita principalmente en TypeScript. Utilizaremos el servicio Azure OpenAI para acceder al modelo, Azure AI Speech para habilitar características de texto a voz y voz a texto, un servidor Express para manejar las solicitudes de la API y la comunicación entre el chatbot y los servicios de Azure, y finalmente un front-end React.

Una demostración rápida de la aplicación.

• Extiende tus alas Falcon 180B está aquí
• Explorando Grandes Modelos de Lenguaje – Parte 1
• Explorando modelos de lenguaje grandes – Parte 3

GPT significa “Generative Pre-trained Transformer”. Es un modelo de aprendizaje automático que se entrena en un corpus grande de datos de texto para predecir la probabilidad de que una palabra o frase aparezca en un contexto dado. Los modelos GPT se pueden utilizar para una variedad de tareas de procesamiento del lenguaje natural, incluyendo la traducción de idiomas, la resumen de texto y el desarrollo de chatbots. En lugar de profundizar en cómo funcionan estos tipos de modelos, prefiero dirigirte a un excelente y muy completo artículo escrito por Beatriz Stollnitz aquí.

La aplicación se puede encontrar en este repositorio de GitHub: github.com/gcordido/VoiceEnabledGPT, que contiene instrucciones sobre cómo instalarlo y ejecutarlo, consejos sobre Ingeniería de Prompts y cómo preparar mejor el modelo para obtener resultados precisos.

Para desarrollar esta aplicación, primero debemos considerar su “arquitectura” y para abordar esto debemos responder las siguientes preguntas: ¿Cómo se ve la interfaz del chatbot? ¿Cómo proporciona el usuario entrada al bot? ¿Cómo se comunica la aplicación con el modelo? ¿Cómo se verá la entrada? ¿Cómo obtenemos la información del modelo para el usuario?

Diagrama de Arquitectura de la Aplicación

Primero, vamos a esbozar cómo se vería la ventana de chat. En este contexto, opté por una interfaz de chat típica donde la ventana muestra una lista de mensajes, con los mensajes del usuario a la derecha y las respuestas del chatbot a la izquierda. Para lograr esto, utilizamos un componente de React para renderizar la interfaz del chat, incluyendo elementos como un cuadro de entrada, un botón de voz a texto y un cuerpo de chat expandible.

La comunicación entre la aplicación y el modelo se facilita mediante API. El servicio Azure OpenAI proporciona acceso a estos modelos realizando llamadas a través de una API REST, que toma un conjunto de parámetros y se accede utilizando secretos en forma de un punto final y una clave de API. Dado que estos últimos son, bueno, secretos, debemos asegurarnos de que no se expongan cuando realicemos la llamada a la API. Por lo tanto, creamos un servidor Express para manejar estas solicitudes de la API.

El servidor recibirá una llamada desde la interfaz principal del chatbot una vez que el usuario presione el botón “Enviar” y recibirá la lista de mensajes anteriores para alimentarlos al modelo al realizar la llamada a la API. Ten en cuenta que dije la lista de mensajes anteriores, en lugar de solo el último mensaje. Esto es intencional, ya que una de las características más interesantes de los modelos GPT es su capacidad para mantener el contexto a lo largo de una conversación siempre que se proporcione. Esta lista está codificada como una lista de objetos, cada uno con dos propiedades: ‘role’ y ‘content’. La propiedad ‘role’ diferencia los mensajes del usuario y del asistente, mientras que la propiedad ‘content’ simplemente contiene el texto del mensaje.

Con el proceso de comunicación entre la aplicación y el modelo GPT ahora definido, el último paso es agregar soporte de audio. Para esto, utilizamos Azure AI Speech, que proporciona un SDK fácil de usar para JavaScript. El SDK proporciona métodos para detectar audio en vivo del micrófono, reconocer el habla y sintetizar el habla a partir del texto.

Para acceder al SDK de Speech y sus métodos desde el cliente, requerimos un Token de Autorización. Este token se genera autenticando nuestra aplicación con el servicio Azure AI Speech, utilizando su clave de API y región en el lado del servidor. Una vez que tenemos el token, podemos utilizar el método SpeechRecognizer del SDK para detectar y transcribir audio desde el micrófono. Esta transcripción luego se agrega a nuestra lista de mensajes como entrada de usuario y se envía al servidor de la misma manera que la entrada escrita.

Una vez que se genera una respuesta, la salida del modelo se envía de vuelta a la interfaz de chat por el servidor. Se agrega una nueva entrada a la lista de mensajes bajo el rol del asistente y la ventana de chat se actualiza con el mensaje del chatbot reflejando la nueva entrada. Esta nueva entrada se puede pasar a través del método SpeechSynthesizer del SDK de Voz, lo que permite que la aplicación lea en voz alta la respuesta del chatbot a través de los altavoces.

Aunque la aplicación no va mucho más allá, todavía hay muchas formas de experimentar y modificar la forma en que nos comunicamos con el modelo y cómo nos responde.

Como firme creyente en el aprendizaje a través de la práctica, te sugiero encarecidamente que pruebes la aplicación en sí misma clonando el repositorio y experimentando con los parámetros de la aplicación. Por ejemplo, prueba a cambiar el “System Prompt” (instrucciones iniciales) para que el modelo responda en prosa o haikus, cambia el idioma del sintetizador de voz a español o limita el número de mensajes guardados para el contexto y observa cómo responde el modelo.

Artículo publicado originalmente aquí. Vuelto a publicar con permiso.

We will continue to update Zepes; if you have any questions or suggestions, please contact us!