Introducción a Azure OpenAI con Asistentes y llamadas a funciones en JavaScript

Este artículo le muestra cómo implementar y ejecutar el serverless Azure OpenAI Assistant Quick Start. Este ejemplo implementa una aplicación de asistentes usando JavaScript, Azure OpenAI Service Assistants con llamada a funciones y Azure Functions.

Introducción a la arquitectura

Azure OpenAI Assistants le permite crear asistentes de IA adaptados a sus necesidades mediante instrucciones personalizadas y aumentadas con herramientas avanzadas como el intérprete de código y las funciones personalizadas. En este artículo, se proporciona un tutorial detallado sobre cómo empezar a trabajar con la API de asistentes.

Diagrama que muestra la arquitectura desde el cliente hasta la aplicación de back-end.

Esta aplicación está construida en torno a dos componentes principales:

  • Una página HTML sencilla con archivos CSS y JavaScript puros, alojada en Azure Static Web Apps.

  • Una API sin servidor creada con Azure Functions y que usa el SDK de JavaScript de OpenAI. La aplicación sin servidor envía la definición de los asistentes, incluida la llamada a la función, al punto de conexión de OpenAI. El punto de conexión responde con la llamada a la función de seguimiento y los parámetros necesarios para completar dicha llamada.

    • La llamada a la función del ejemplo simula una llamada API generando un valor de ticker bursátil aleatorio a partir del símbolo bursátil enviado a la función de Azure. Esta simulación puede sustituirse por una API remota en su solución.

    Diagrama que muestra la integración de Azure Functions con Azure OpenAI, donde Azure OpenAI puede devolver nombres de funciones de seguimiento a las que Azure Functions debe llamar.

Requisitos previos

Está disponible un entorno de contenedor de desarrollo con todas las dependencias necesarias para completar este artículo. Puede ejecutar el contenedor de desarrollo en GitHub Codespaces (en un navegador) o localmente utilizando Visual Studio Code.

Para usar este artículo, necesita los siguientes requisitos previos:

  1. Una suscripción de Azure: Cree una gratis
  2. Permisos de la cuenta de Azure: Su cuenta de Azure debe tener el permiso Microsoft.Authorization/roleAssignments/write, como Administrador de acceso de usuario o Propietario.
  3. Una cuenta de GitHub.

Entorno de desarrollo abierto

Use las instrucciones siguientes para implementar un entorno de desarrollo preconfigurado que contenga todas las dependencias necesarias para completar este artículo.

GitHub Codespaces se ejecuta en un contenedor de desarrollo gestionado por GitHub, con Visual Studio Code for the Web como interfaz de usuario. Para obtener el entorno de desarrollo más sencillo, utilice Codespaces de GitHub de modo que tenga las herramientas y dependencias de desarrollador correctas preinstaladas para completar este artículo.

Importante

Todas las cuentas de GitHub pueden usar Codespaces durante un máximo de 60 horas gratis cada mes con dos instancias principales. Para obtener más información, consulte Almacenamiento mensual incluido y horas de núcleo en GitHub Codespaces.

  1. Inicie el proceso para crear un nuevo codespace de GitHub en la rama main del repositorio de GitHub Azure-Samples/azure-openai-assistant-javascript.

  2. Haga clic con el botón derecho en el siguiente botón y seleccione Abrir enlace en ventanas nuevas para tener el entorno de desarrollo y la documentación disponibles al mismo tiempo.

    Abrir en GitHub Codespaces

  3. En la página Crear espacio de código, revise las opciones de configuración del espacio de código y, a continuación, seleccione Crear nuevo espacio de código.

  4. Espere a que se inicie Codespace. Este proceso de startup puede tardar unos minutos.

  5. Inicie sesión en Azure con la CLI para desarrolladores de Azure en el terminal de la parte inferior de la pantalla.

    azd auth login

  6. Copie el código del terminal y péguelo en un navegador. Siga las instrucciones para autenticarse con su cuenta Azure.

  7. Las tareas restantes de este artículo tienen lugar en el contexto de este contenedor de desarrollo.

Implementación y ejecución

El repositorio de ejemplo contiene todo el código y los archivos de configuración necesarios para implementar una aplicación de funciones en Azure. Los siguientes pasos le guiarán a través del proceso de implementación de la muestra en Azure.

Implementación de la aplicación de asistentes en Azure

Importante

Los recursos Azure creados en esta sección incurren en costes inmediatos, principalmente del recurso Búsqueda de Azure AI. Estos recursos pueden acumular costos incluso si interrumpe el comando antes de que finalice.

  1. Ejecute el siguiente comando de la Azure Developer CLI para aprovisionar los recursos de Azure e implementar el código fuente:

    azd up

  2. Cuando se le pida que introduzca un nombre de entorno, manténgalo corto y en minúsculas. Por ejemplo, myenv. Se usa como parte del nombre del grupo de recursos.

  3. Cuando se le solicite, seleccione una suscripción en la que crear los recursos.

  4. Cuando se le pida que seleccione una ubicación la primera vez, seleccione una ubicación cercana. Esta ubicación se utiliza para la mayoría de los recursos, incluido el hospedaje.

  5. Si se le pide una ubicación para el modelo OpenAI, seleccione una ubicación que esté cerca de usted. Si está disponible la misma ubicación que la primera, selecciónela.

  6. Espere hasta que se implemente la aplicación. La implementación puede tardar entre 5 y 10 minutos.

  7. Después de implementar la aplicación correctamente, verá una dirección URL mostrada en el terminal.

  8. Seleccione la URL con la etiqueta Deploying service web para abrir la aplicación del asistente en un navegador.

Uso de la aplicación del asistente

Utiliza la aplicación de asistente para obtener el precio del mercado de valores de MSFT. Los pasos a continuación le guiarán a través del proceso de uso de la aplicación de asistente. El asistente puede enviarle las respuestas por correo electrónico. Puesto que la característica de envío de correo electrónico no está configurada, modifique la solicitud para no usar esa instrucción.

  1. En el navegador, copie y pegue el siguiente prompt:

    Based on the latest financial data and current stock market trends, can you provide a detailed analysis of Microsoft's current state? Please include insights into their recent performance, market position, and future outlook. Additionally, retrieve and include the latest closing price of Microsoft's stock using its ticker symbol (MSFT).

  2. Haga clic en el botón Ejecutar. Sus resultados deberían ser similares a la siguiente respuesta.

    Captura de pantalla de la primera respuesta de la aplicación del asistente.

Limpieza de recursos

Limpieza de los recursos de Azure

Los recursos Azure creados en este artículo se facturan a su suscripción Azure. Si no espera necesitar estos recursos en el futuro, elimínelos para evitar incurrir en más gastos.

Ejecute el siguiente comando de la Azure Developer CLI para eliminar los recursos de Azure y eliminar el código de origen:

azd down --purge

Limpiar GitHub Codespaces

Eliminar el entorno de GitHub Codespaces le permite aprovechar al máximo la cantidad de horas gratuitas por núcleo de las que dispone su cuenta.

Importante

Para obtener más información sobre los recursos incluidos de tu cuenta de GitHub, consulta Almacenamiento mensual incluido y horas de proceso de GitHub Codespaces.

  1. Inicie sesión en el panel de GitHub Codespaces.

  2. Localice sus Codespaces en ejecución actualmente originados en el repositorio de GitHub Azure-Samples/azure-openai-assistant-javascript.

    Captura de pantalla de todos los Codespaces que están en ejecución, incluido su estado y sus plantillas.

  3. Abra el menú contextual, ..., del codespace y, a continuación, seleccione Eliminar.

Obtener ayuda

Este repositorio de ejemplo ofrece información para solucionar problemas.

Si su problema no se resuelve, registre su incidencia en la sección Issues del repositorio.

Contenido relacionado

  • Last updated on