Freigeben über

Aktualisieren der Chat-App zur Verwendung des JavaScript-Frontends mit dem Python-Back-End

  • Artikel

Die Chat-App ist eine Referenzanwendung, die die Verwendung des Azure OpenAI-Diensts veranschaulicht. Jede Programmiersprachenreferenzarchitektur bietet geringfügig unterschiedliche Funktionen. In diesem Artikel wird beschrieben, wie Sie das JavaScript-Frontend mit dem Python-Back-End verwenden.

Durch Mischen und Abgleichen des Frontends und Back-Ends können Sie eine mehrsprachige Anwendung erstellen, die das Beste aus beiden Welten verwendet.

  • Demo- – JavaScript-Frontend mit Python-Back-End-Video konfigurieren

Dieser Artikel ist Teil einer Sammlung von Artikeln, die Ihnen zeigen, wie Sie eine Chat-App mit Azure OpenAI Service und Azure AI Search erstellen. Weitere Artikel in der Sammlung sind:

Hinweis

In diesem Artikel werden eine oder mehrere KI-App-Vorlagen als Grundlage für die Beispiele und Anleitungen im Artikel verwendet. KI-App-Vorlagen bieten Ihnen gut gepflegte, einfach zu implementierende Referenzimplementierungen, die helfen, einen qualitativ hochwertigen Ausgangspunkt für Ihre KI-Apps zu gewährleisten.

Voraussetzungen

Stellen Sie die beiden Referenzarchitekturen mithilfe der folgenden Artikel bereit. Stellen Sie sicher, dass Sie dasselbe Abonnement und dieselbe Region für beide Bereitstellungen verwenden. Die Bereitstellung kann bis zu 20 Minuten dauern. Lassen Sie die Bereitstellungen offen; Schließen Sie den Abschnitt Ressourcen bereinigen erst ab, wenn Sie mit diesem Artikel fertig sind.

  • Stellen Sie die JavaScript-Chat-App mithilfe dieses Artikels bereit
  • Stellen Sie die Python-Chat-App mithilfe dieses Artikels bereit

Abrufen der URLs für das Frontend und Back-End

Nach der Bereitstellung der beiden Referenzarchitekturen haben Sie zwei Full-Stack-Anwendungen bereitgestellt. Um das JavaScript-Frontend mit dem Python-Back-End zu verwenden, müssen Sie die URLs für das JS-Frontend und das PY-Back-End abrufen und in der anderen App konfigurieren.

Sie sollten jedes Repository in einer separaten Entwicklungsumgebung haben, entweder lokal in Codespaces.

Festlegen der JavaScript-Front-End-URL im Python-Back-End

  1. Rufen Sie in der JavaScript-Entwicklungsumgebung die URL für das JavaScript-Frontend ab, indem Sie den folgenden Befehl ausführen:

    azd env get-values | grep WEBAPP_URI

    Dieser Befehl ruft alle Cloudumgebungsvariablen und Filter für die variable WEBAPP_URI ab. Stellen Sie sicher, dass die URL nicht mit einem Schrägstrich /endet.

  2. Kopieren Sie die URL.

  3. Legen Sie in der Python-Entwicklungsumgebung die URL für das JavaScript-Frontend fest, indem Sie den folgenden Befehl ausführen:

    azd env set ALLOWED_ORIGIN <FRONTEND-URL>

  4. Stellen Sie in der Python-Entwicklungsumgebung das Python-Back-End erneut zur Anwendung, indem Sie den folgenden Befehl ausführen:

    azd up

Festlegen der Python-Back-End-URL im JavaScript-Frontend

  1. Rufen Sie in der Python-Entwicklungsumgebung die URL für das Python-Back-End ab, indem Sie den folgenden Befehl ausführen:

    azd env get-values | grep BACKEND_URI

    Dieser Befehl ruft alle Cloudumgebungsvariablen und Filter für die variable BACKEND_URI ab. Stellen Sie sicher, dass die URL nicht mit einem Schrägstrich /endet.

  2. Kopieren Sie die URL.

  3. Legen Sie in der JavaScript-Entwicklungsumgebung die URL für das Python-Back-End fest, indem Sie den folgenden Befehl ausführen:

    azd env set BACKEND_URI <BACKEND_URI>

  4. Stellen Sie in der Python-Entwicklungsumgebung das Python-Back-End erneut zur Anwendung, indem Sie den folgenden Befehl in der Python-Entwicklungsumgebung ausführen:

    azd up

Verwenden des JavaScript-Frontends mit dem Python-Back-End

Die Python-App verwendet einen Themenbereich für HR-Vorteile, während die JavaScript-App einen Themenbereich für Immobilien verwendet. Nachdem die Apps verbunden sind, können Sie die Benutzeroberfläche verwenden, um sich über die Leistungen der Personalabteilung zu erkundigen. Vorgeschlagene Fragen umfassen:

  • Was ist in meinem Northwind Health Plus-Plan enthalten, der nicht standardmäßig ist?
  • Was geschieht in einer Leistungsüberprüfung?
  • Was macht ein Product Manager?

Bereinigen von Ressourcen

Wenn Sie mit den Apps fertig sind, können Sie die Ressourcen löschen, um mehr Gebühren zu vermeiden.

Problembehandlung

  • Wenn Sie einen Fehler erhalten, überprüfen Sie die URLs, die Sie in der Umgebung eingegeben haben. Stellen Sie sicher, dass sie nicht mit einem Schrägstrich enden, /

Nächste Schritte