Mettez à jour l’application de chat pour utiliser le frontend JavaScript avec le backend Python

  • Article

L’application de chat est une application de référence qui montre comment utiliser le service Azure OpenAI. Chaque architecture de référence de langage de programmation offre une fonctionnalité légèrement différente. Cet article décrit comment utiliser le frontend JavaScript avec le backend Python.

En combinant le frontend et le backend, vous pouvez créer une application multilingue qui utilise le meilleur des deux mondes.

  • Démo : Configurer le frontend JavaScript avec la vidéo du backend Python

Cet article fait partie d’un ensemble d’articles montrant comment créer une application de chat en utilisant Azure OpenAI Service et la Recherche Azure AI. Vous trouvez ci-dessous d’autres articles de cette collection :

Remarque

Cet article utilise un ou plusieurs modèles d’application IA comme base pour les exemples et les conseils qu’il contient. Les modèles d’application IA vous fournissent des implémentations de référence bien gérées et faciles à déployer, qui constituent un point de départ de qualité pour vos applications IA.

Prérequis

Déployez les 2 architectures de référence en utilisant les articles suivants. Assurez-vous d’utiliser le même abonnement et la même région pour les deux déploiements. Le déploiement peut prendre jusqu’à 20 minutes. Laissez les déploiements en place; ne complétez pas la section Nettoyer les ressources jusqu’à ce que vous ayez terminé cet article.

  • Déployez l’application de chat JavaScript en utilisant cet article
  • Déployez l’application de chat Python en utilisant cet article

Obtenez les URL pour le frontend et le backend

Après avoir déployé les deux architectures de référence, vous avez deux applications full-stack déployées. Pour utiliser le frontend JavaScript avec le backend Python, vous devez obtenir les URL du frontend JS et du backend PY et les configurer dans l’autre application.

Vous devez avoir chaque référentiel dans un environnement de développement distinct, soit localement, soit dans Codespaces.

Définir l’URL du frontend JavaScript dans le backend Python

  1. Dans l’environnement de développement JavaScript, obtenez l’URL du frontend JavaScript en exécutant la commande suivante :

    azd env get-values | grep WEBAPP_URI

    Cette commande obtient toutes les variables d’environnement cloud et filtre pour la variable WEBAPP_URI. Assurez-vous que l’URL ne se termine pas par un slash, /.

  2. Copiez l’URL.

  3. Dans l’environnement de développement Python, définissez l’URL du frontend JavaScript en exécutant la commande suivante :

    azd env set ALLOWED_ORIGIN <FRONTEND-URL>

  4. Dans l’environnement de développement Python, redéployez le backend Python en exécutant la commande suivante :

    azd up

Définir l’URL du backend Python dans le frontend JavaScript

  1. Dans l’environnement de développement Python, obtenez l’URL du backend Python en exécutant la commande suivante :

    azd env get-values | grep BACKEND_URI

    Cette commande obtient toutes les variables d’environnement cloud et filtre pour la variable BACKEND_URI. Assurez-vous que l’URL ne se termine pas par un slash, /.

  2. Copiez l’URL.

  3. Dans l’environnement de développement JavaScript, définissez l’URL du backend Python en exécutant la commande suivante :

    azd env set BACKEND_URI <BACKEND_URI>

  4. Dans l’environnement de développement Python, redéployez le backend Python en exécutant la commande suivante dans l’environnement de développement Python :

    azd up

Utiliser le frontend JavaScript avec le backend Python

L’application Python utilise un domaine de sujet lié aux avantages sociaux tandis que l’application JavaScript utilise un domaine de sujet lié à l’immobilier. Maintenant que les applications sont connectées, vous pouvez utiliser le frontend pour poser des questions sur les avantages sociaux. Les questions suggérées incluent :

  • Qu’est-ce qui est inclus dans mon plan Northwind Health Plus qui n’est pas standard ?
  • Que se passe-t-il lors d’une évaluation de performance ?
  • Que fait un chef de produit ?

Nettoyer les ressources

Une fois que vous avez terminé avec les applications, vous pouvez supprimer les ressources pour éviter d’engager plus de frais.

Dépannage

  • Si vous obtenez une erreur, vérifiez les URL que vous avez saisies dans l’environnement. Assurez-vous qu’elles ne se terminent pas par un slash, /.

Étapes suivantes