Actualizar la aplicación de chat para usar el front-end de JavaScript con el back-end de Python

Chat es una aplicación de referencia que muestra cómo usar el servicio Azure OpenAI. La arquitectura de referencia de cada lenguaje de programación proporciona una funcionalidad ligeramente diferente. Este artículo describe cómo usar el front-end de JavaScript con el back-end de Python.

Al combinar e intercambiar el frontend y el backend, puedes crear una aplicación multilingüe que aproveche lo mejor de ambos mundos.

  • Demostración - Configuración de frontend de JavaScript con backend de Python en vídeo

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 Búsqueda de Azure AI. Otros artículos de la colección son:

Nota:

En este artículo se utilizan una o más plantillas de aplicaciones de IA como base para los ejemplos e instrucciones del artículo. Las plantillas de aplicaciones de IA le proporcionan implementaciones de referencia bien mantenidas y fáciles de implementar que le ayudan a garantizar un punto inicial de alta calidad para sus aplicaciones de IA.

Requisitos previos

Implemente las dos arquitecturas de referencia mediante los siguientes artículos. Asegúrese de usar la misma suscripción y región para ambas implementaciones. La implementación puede tardar hasta 20 minutos. Deje las implementaciones en marcha; no complete la sección Limpieza de recursos hasta que haya terminado con este artículo.

  • Implemente la aplicación de chat de JavaScript usando este artículo
  • Despliegue la aplicación de chat de Python usando este artículo

Obtención de las URL para el front-end y el back-end

Una vez que implementas las dos arquitecturas de referencia, tienes dos aplicaciones full-stack. Para conectar el front-end de JavaScript con el back-end de Python, obtenga las direcciones URL de ambas aplicaciones y configúrelas.

Debe tener cada repositorio en un entorno de desarrollo independiente, ya sea localmente o en Codespaces.

Establecimiento de la URL del front-end de JavaScript en el back-end de Python

  1. En el entorno de desarrollo de JavaScript, obtenga la URL del front-end de JavaScript ejecutando el siguiente comando:

    azd env get-values | grep WEBAPP_URI

    Este comando obtiene todas las variables de entorno de la nube y filtra por la variable WEBAPP_URI. Asegúrese de que la URL no termine con una diagonal, /.

  2. Copie la dirección URL.

  3. En el entorno de desarrollo de Python, obtenga la URL del front-end de JavaScript ejecutando el siguiente comando:

    azd env set ALLOWED_ORIGIN <FRONTEND-URL>

  4. En el entorno de desarrollo Python, vuelva a implementar el back-end de Python ejecutando el siguiente comando:

    azd up

Establecimiento de la URL del back-end de Python en el front-end de JavaScript

  1. En el entorno de desarrollo de Python, obtenga la URL del back-end de Python ejecutando el siguiente comando:

    azd env get-values | grep BACKEND_URI

    Este comando obtiene todas las variables de entorno de la nube y filtra por la variable BACKEND_URI. Asegúrese de que la URL no termine con una diagonal, /.

  2. Copie la dirección URL.

  3. En el entorno de desarrollo de JavaScript, establezca la URL del back-end de Python ejecutando el siguiente comando:

    azd env set BACKEND_URI <BACKEND_URI>

  4. En el entorno de desarrollo Python, vuelva a implementar el back-end de Python ejecutando el siguiente comando en el entorno de desarrollo de Python:

    azd up

Uso del front-end de JavaScript con el back-end de Python

La aplicación Python usa un área temática de beneficios de RR. HH., mientras que la aplicación JavaScript usa un área temática de inmobiliaria. Ahora que las aplicaciones están conectadas, puede usar el front-end para preguntar por los beneficios de RR. HH. Las preguntas sugeridas incluyen:

  • ¿Qué incluye mi plan Northwind Health Plus que no sea estándar?
  • ¿Qué ocurre en una revisión del rendimiento?
  • ¿Qué hace un jefe de producto?

Limpieza de recursos

Una vez que haya terminado con las aplicaciones, puede eliminar los recursos para evitar incurrir en más cargos.

Troubleshoot

  • Si recibe un error, asegúrese de que las direcciones URL especificadas en el entorno no terminan con una barra diagonal, /.

Contenido relacionado

  • Last updated on