Compartir a través de

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

  • Artículo

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

Al mezclar y buscar coincidencias con el front-end y el back-end, puede crear una aplicación multilanguage que use lo mejor de ambos mundos.

  • Demostración : configuración del front-end de JavaScript con vídeo back-end de Python

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:

Nota:

En este artículo se usan una o varias plantillas de aplicación de IA como base para los ejemplos e instrucciones del artículo. Las plantillas de aplicación de IA proporcionan implementaciones de referencia bien mantenidas y fáciles de implementar que ayudan a garantizar un punto de partida de alta calidad para las aplicaciones de IA.

Requisitos previos

Implemente las 2 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 durar hasta 20 minutos. Deje las implementaciones en marcha; no complete la sección Limpieza de recursos hasta que haya terminado con este artículo.

  • Implementación de la aplicación de chat de JavaScript con este artículo
  • Implementación de la aplicación de chat de Python con este artículo

Obtención de las direcciones URL del front-end y back-end

Después de implementar las dos arquitecturas de referencia, tiene dos aplicaciones de pila completa implementadas. Para usar el front-end de JavaScript con el back-end de Python, debe obtener las direcciones URL del front-end de JS y el back-end de PY y configurarlas en la otra aplicación.

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

Establecimiento de la dirección URL de front-end de JavaScript en el back-end de Python

  1. En el entorno de desarrollo de JavaScript, ejecute el comando siguiente para obtener la dirección URL del front-end de JavaScript:

    azd env get-values | grep WEBAPP_URI

    Este comando obtiene todas las variables de entorno en la nube y los filtros de la WEBAPP_URI variable. Asegúrese de que la dirección URL no termina con una barra diagonal, /.

  2. Copie la dirección URL.

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

    azd env set ALLOWED_ORIGIN <FRONTEND-URL>

  4. En el entorno de desarrollo de Python, vuelva a implementar el back-end de Python mediante la ejecución del siguiente comando:

    azd up

Establecimiento de la dirección URL de back-end de Python en el front-end de JavaScript

  1. En el entorno de desarrollo de Python, ejecute el comando siguiente para obtener la dirección URL del back-end de Python:

    azd env get-values | grep BACKEND_URI

    Este comando obtiene todas las variables de entorno en la nube y los filtros de la BACKEND_URI variable. Asegúrese de que la dirección URL no termina con una barra diagonal, /.

  2. Copie la dirección URL.

  3. En el entorno de desarrollo de JavaScript, establezca la dirección URL del back-end de Python mediante la ejecución del comando siguiente:

    azd env set BACKEND_URI <BACKEND_URI>

  4. En el entorno de desarrollo de Python, vuelva a implementar el back-end de Python mediante la ejecución del 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 de asunto de ventajas de rr. HH. mientras que la aplicación javaScript usa un área de asunto de bienes raíces. Ahora que las aplicaciones están conectadas, puede usar el front-end para preguntar sobre las ventajas de rr. HH. Entre las preguntas sugeridas se incluyen:

  • ¿Qué se incluye en mi plan Northwind Health Plus que no es estándar?
  • ¿Qué ocurre en una revisión de rendimiento?
  • ¿Qué hace un Administrador de productos?

Limpieza de recursos

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

Solución de problemas

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

Pasos siguientes