Teilen über

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

  • Artikel

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

Durch Mischen und Abgleichen von Front-End und Back-End können Sie eine mehrsprachige Anwendung erstellen, die das Beste aus beiden Welten verwendet.

  • Demo - Konfigurieren des JavaScript-Front-Ends mit dem Python-Back-End – Video

Dieser Artikel ist Teil einer Sammlung von Artikeln, in denen gezeigt wird, wie Sie eine Chat-App unter Verwendung von Azure OpenAI Service und Azure KI-Suche erstellen. Weitere Artikel in der Sammlung sind:

Hinweis

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

Voraussetzungen

Stellen Sie die zwei 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.

  • Bereitstellen der JavaScript-Chat-App mithilfe dieses Artikels
  • Bereitstellen der Python-Chat-App mithilfe dieses Artikels

Abrufen der URLs für Front-End und Back-End

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

Sie sollten jedes Repository in einer separaten Entwicklungsumgebung haben, entweder lokal oder 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-Front-End ab, indem Sie den folgenden Befehl ausführen:

    azd env get-values | grep WEBAPP_URI

    Dieser Befehl ruft alle Cloud-Umgebungsvariablen und Filter für die WEBAPP_URI-Variable 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 JavaScript-Front-End 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 bereit, indem Sie den folgenden Befehl ausführen:

    azd up

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

  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 Cloud-Umgebungsvariablen und Filter für die BACKEND_URI-Variable 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 bereit, indem Sie den folgenden Befehl in der Python-Entwicklungsumgebung ausführen:

    azd up

Verwenden des JavaScript-Front-Ends 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 das Front-End verwenden, um nach HR-Vorteilen zu fragen. Vorgeschlagene Fragen sind etwa:

  • Was ist in meinem Northwind Health Plus-Plan enthalten, das nicht im Standard enthalten ist?
  • Was geschieht bei einer Leistungsüberprüfung?
  • Was tut ein Produktmanager?

Bereinigen von Ressourcen

Wenn Sie mit den Apps fertig sind, können Sie die Ressourcen löschen, damit keine weiteren Gebühren mehr anfallen.

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