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

Artículo
12/11/2024

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 mezclar y combinar el front-end y el back-end, puede crear una aplicación multilingüe que use lo mejor de ambos mundos.

Demostración en vídeo de configuración de front-end de JavaScript con 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 Búsqueda de Azure AI. Otros artículos de la colección son:

Nota:

En este artículo se usan una o varias 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. Deja los implementaciones; no complete la sección Limpieza de recursos hasta que haya terminado con este artículo.

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

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

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

Debería tener cada repositorio en un entorno de desarrollo separado, ya sea localmente o en Codespaces.

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

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 nube y filtra por la variable WEBAPP_URI. Asegúrese de que la URL no termina con una barra, /.
Copie la dirección URL.
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>
```
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

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 nube y filtra por la variable WEBAPP_URI. Asegúrese de que la URL no termina con una barra, /.
Copie la dirección URL.
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>
```
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 dejar de incurrir en cargos.

Elimine la aplicación JavaScript siguiendo estas instrucciones
Elimine la aplicación Python siguiendo estas instrucciones

Solución de problemas

Si obtiene un error, revise las URL que introdujo en el entorno. Asegúrese de que no terminan con una barra, /.

Compartir vía