Introducción al ejemplo de chat empresarial de JavaScript mediante RAG

  • Artículo

En este artículo se muestra cómo implementar y ejecutar el ejemplo de aplicación de chat Enterprise para JavaScript. En este ejemplo se implementa una aplicación de chat mediante JavaScript, Azure OpenAI Service y Recuperación de generación aumentada (RAG) en Azure AI Search para obtener respuestas sobre las propiedades de alquiler. La aplicación de chat de propiedades de alquiler se propaga con datos de archivos markdown (*.md), incluida una directiva de privacidad, términos de servicio y soporte técnico.

Empezar ahora

Siguiendo las instrucciones de este artículo, podrá:

  • Implemente una aplicación de chat en Azure.
  • Obtenga respuestas sobre la información del sitio web de propiedades de alquiler.
  • Cambie la configuración para modificar el comportamiento de las respuestas.

Una vez completado este artículo, puede empezar a modificar el nuevo proyecto con el código y los datos personalizados.

Este artículo forma parte de una colección de artículos que muestran cómo crear una aplicación de chat mediante Azure OpenAI Service y Azure AI Search. Otros artículos de la colección son:

Introducción a la arquitectura

En el siguiente diagrama se muestra una arquitectura sencilla de la aplicación de chat:

Diagrama que muestra la arquitectura del cliente a la aplicación back-end.

La aplicación de ejemplo de chat se crea para una empresa ficticia denominada Contoso Real Estate y la experiencia de chat inteligente permite a sus clientes formular preguntas de soporte técnico sobre el uso de sus productos. Los datos de ejemplo incluyen un conjunto de documentos que describen sus términos de servicio, la directiva de privacidad y una guía de soporte técnico. Los documentos se ingieren en la arquitectura durante la implementación.

La aplicación se realiza a partir de varios componentes, entre los que se incluyen:

  • servicio Search: el servicio back-end que proporciona las funcionalidades de búsqueda y recuperación.
  • Servicio de indexador: el servicio que indexa los datos y crea los índices de búsqueda.
  • Aplicación web: la aplicación web de front-end que proporciona la interfaz de usuario y organiza la interacción entre el usuario y los servicios back-end.

Diagrama que muestra los servicios de Azure y su flujo de integración para la aplicación front-end, la búsqueda y la ingesta de documentos.

Costee

La mayoría de los recursos de esta arquitectura utilizan un nivel de precios básico o de consumo. La tarifa del consumo se basa en el uso, lo que significa que solo paga por lo que utiliza. Para completar este artículo, habrá que pagar una tasa, pero será mínima. Cuando haya terminado con el artículo, puede eliminar los recursos para dejar de incurrir en cargos.

Obtenga más información sobre el costo en el repositorio de ejemplo.

Requisitos previos

Hay disponible un entorno 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 a Azure: cree una cuenta gratuita.
  2. Permisos de la cuenta Azure: Su cuenta Azure debe tener permisos Microsoft.Authorization/roleAssignments/write, como Administrador de acceso de usuario o Propietario.
  3. Acceso concedido a Azure OpenAl en la suscripción de Azure que quiera. Actualmente, solo la aplicación concede acceso a este servicio. Para solicitar acceso a Azure OpenAI, rellene el formulario en https://aka.ms/oai/access. Si tiene algún problema, abra una incidencia en este repositorio para ponerse en contacto con nosotros.
  4. GitHub

Entorno de desarrollo abierto

Comience ahora con un entorno de desarrollo que tenga todas las dependencias instaladas para completar este artículo.

GitHub Codespaces ejecuta un contenedor de desarrollo administrado por GitHub con Visual Studio Code para la 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 2 instancias principales. Para obtener más información, consulte Almacenamiento y horas de núcleo incluidas mensualmente en GitHub Codespaces.

  1. Inicie el proceso para crear una nueva instancia de GitHub Codespace en la rama main del repositorio de GitHub Azure-Samples/azure-search-openai-javascript.

  2. Haga clic con el botón derecho del ratón en el botón siguiente y seleccione Abrir vínculo en ventanas nuevas para disponer al mismo tiempo del entorno de desarrollo y de la documentación.

    Abra este proyecto en GitHub Codespaces.

  3. En la página Crear codespace, revise las opciones de configuración de codespace y, después, seleccione Crear nuevo codespace

    Captura de pantalla de la pantalla de confirmación antes de crear un nuevo codespace.

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

  5. En el terminal de la parte inferior de la pantalla, inicie sesión en Azure con Azure Developer CLI.

    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 chat 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 chat en Azure

Importante

Los recursos Azure creados en esta sección incurren en costes inmediatos, principalmente del recurso Azure AI Search. Estos recursos pueden acumular costes incluso si interrumpe el comando antes de que se ejecute por completo.

  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 en completarse.

  7. Una vez que la aplicación se ha implementado correctamente, aparece una URL en el terminal.

  8. Seleccione esa URL etiquetada Deploying service web para abrir la aplicación de chat en un navegador.

    Captura de pantalla de la aplicación de chat en el explorador que muestra varias sugerencias para la entrada de chat y el cuadro de texto de chat para escribir una pregunta.

Uso de la aplicación de chat para obtener respuestas de archivos markdown

La aplicación de chat se carga previamente con información de alquiler de un catálogo de archivos markdown. Puede usar la aplicación de chat para hacer preguntas sobre el proceso de alquiler. Los siguientes pasos le guiarán a través del proceso de uso de la aplicación de chat.

  1. En el explorador, seleccione o escriba ¿Qué es la directiva de reembolso en el cuadro de texto de la parte inferior de la página?

    Captura de pantalla de la primera respuesta de la aplicación de chat.

  2. En la respuesta, seleccione Mostrar proceso de pensamiento.

    Captura de pantalla de la primera respuesta de la aplicación de chat con Mostrar proceso de pensamiento resaltado en un cuadro rojo.

  3. En el panel derecho, use las pestañas para comprender cómo se generó la respuesta.

    Pestaña Descripción
    Proceso de ideas Este es un script de las interacciones en el chat. Puede ver la pregunta del sistema (content) y su pregunta de usuario (content).
    Contenido adicional Esto incluye la información para responder a su pregunta y el material de origen. El número de citas del material fuente se indica en los Configuración de desarrollador. El valor predeterminado es 3.
    Referencia bibliográfica Esto muestra la página original que contiene la cita.

  4. Cuando haya terminado, seleccione el botón Ocultar indicado con una X encima de las pestañas.

Utilice la configuración de la aplicación de chat para cambiar el comportamiento de las respuestas

La inteligencia de la aplicación de chat viene determinada por el modelo de OpenAI y la configuración que se usa para interactuar con el modelo.

Captura de pantalla de la configuración del desarrollador de chat

Configuración Descripción
Anular plantilla de solicitud Esta es la pregunta que se utiliza para generar la respuesta.
Recuperar esta cantidad de resultados Es el número de resultados de búsqueda que se utilizan para generar la respuesta. Puede ver estas fuentes devueltas en las pestañas Proceso de ideas y Contenido de soporte de la cita.
Excluir categoría Es la categoría de documentos que se excluyen de los resultados de la búsqueda.
Utilizar un clasificador semántico para la recuperación Se trata de una característica de Búsqueda de Azure AI que utiliza el aprendizaje automático para mejorar la relevancia de los resultados de búsqueda.
Utilizar resúmenes contextuales de consultas en lugar de documentos completos Cuando Use semantic ranker y Use query-contextual summaries están marcadas, el LLM utiliza subtítulos extraídos de pasajes clave, en lugar de todos los pasajes, en los documentos mejor clasificados.
Sugerir preguntas de seguimiento Haga que la aplicación de chat sugiera preguntas de seguimiento en función de la respuesta.
Modo de recuperación Vectores + Texto significa que los resultados de la búsqueda se basan en el texto de los documentos y en las incrustaciones de los mismos. Vectores significa que los resultados de la búsqueda se basan en las incrustaciones de los documentos. Texto significa que los resultados de la búsqueda se basan en el texto de los documentos.
Respuestas de finalización de chat en secuencias Transmita la respuesta en lugar de esperar hasta que la respuesta completa esté disponible para una respuesta.

Los siguientes pasos le guiarán a través del proceso de cambio de la configuración.

  1. En el explorador, seleccione la pestaña Desarrollador Configuración.

  2. Active la casilla Usar resúmenes contextuales de consulta en lugar de realizar la misma pregunta de nuevo.

    What happens if the rental doesn't fit the description?

    El chat volvió con una respuesta más concisa, como la siguiente.

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

La eliminación del entorno de GitHub Codespaces garantiza que pueda maximizar la cantidad de derechos de horas gratuitas por núcleo que obtiene para su cuenta.

Importante

Para obtener más información sobre los derechos de la cuenta de GitHub, consulte Almacenamiento y horas de núcleo incluidas mensualmente en GitHub Codespaces.

  1. Inicie sesión en el panel de GitHub Codespaces (https://github.com/codespaces).

  2. Busque los codespaces en ejecución actualmente procedentes del repositorio de GitHub Azure-Samples/azure-search-openai-javascript.

    Captura de pantalla de todos los codespaces en ejecución, incluidos sus estados y plantillas.

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

    Captura de pantalla del menú contextual de un solo codespace con la opción para eliminar resaltada.

Obtener ayuda

Este repositorio de muestras ofrece información para la resolución de problemas.

Si no se soluciona el problema, registre el problema en los problemas del repositorio.

Pasos siguientes