Erste Schritte mit Azure OpenAI mit Assistenten und Funktionsaufrufen in JavaScript

In diesem Artikel wird Ihnen gezeigt, wie Sie den serverlosen Azure OpenAI-Assistenten Quick Startbereitstellen und ausführen. In diesem Beispiel wird eine Assistenten-App mit JavaScript, Azure OpenAI Service-Assistenten mit Funktionsaufrufen und Azure Functions implementiert.

Architekturübersicht

Mit Azure OpenAI-Assistenten können Sie KI-Assistenten erstellen, die durch benutzerdefinierte Anweisungen und den Einsatz fortschrittlicher Tools wie einem Code-Interpreter und benutzerdefinierten Funktionen genau auf Ihre Anforderungen zugeschnitten sind. In diesem Artikel finden Sie eine ausführliche Anleitung zur Einführung in die Assistants-API.

Diese Anwendung basiert auf zwei Hauptkomponenten:

• Eine einfache HTML-Seite mit standardmäßigem CSS und JavaScript-Dateien, gehostet auf Azure Static Web Apps.

• Eine serverlose API, die mit Azure Functions und mit dem OpenAI JavaScript SDK erstellt wurde. Die serverlose App sendet die Assistentendefinition einschließlich des Funktionsaufrufs an den OpenAI-Endpunkt. Der Endpunkt antwortet mit dem Nachverfolgungsfunktionsaufruf und den Parametern, die zum Abschließen dieses Aufrufs erforderlich sind.

  • Der Funktionsaufruf des Beispiels simuliert einen API-Aufruf, indem ein zufälliger Aktientickerwert basierend auf dem Aktiensymbol generiert wird, das an die Azure-Funktion gesendet wird. Diese Simulation kann durch eine Remote-API in Ihrer Lösung ersetzt werden.

  

Voraussetzungen

Eine Entwicklungscontainerumgebung ist mit allen Abhängigkeiten verfügbar, die zum Abschließen dieses Artikels erforderlich sind. Sie können den Entwicklungscontainer in GitHub Codespaces (in einem Browser) oder lokal mit Visual Studio Code ausführen.

Um diesen Artikel zu verwenden, benötigen Sie die folgenden Voraussetzungen:

Codespaces (empfohlen)

1. Ein Azure-Abonnement – Kostenlos erstellen
2. Azure-Kontoberechtigungen: Ihr Azure-Konto muss über Microsoft.Authorization/roleAssignments/Schreibberechtigungen verfügen, z. B. Benutzerzugriffsadministrator oder Besitzer.
3. Ein GitHub-Konto.

Visual Studio Code

1. Ein Azure-Abonnement – Kostenlos erstellen
2. Azure-Kontoberechtigungen: Ihr Azure-Konto muss über Microsoft.Authorization/roleAssignments/Schreibberechtigungen verfügen, z. B. Benutzerzugriffsadministrator oder Besitzer.
3. Azure Developer CLI
4. Docker Desktop – starten Sie Docker Desktop, falls die Anwendung nicht bereits ausgeführt wird.
5. Git
6. Visual Studio Code
7. Dev-Containererweiterung

Offene Entwicklungsumgebung

Verwenden Sie die folgenden Anweisungen, um eine vorkonfigurierte Entwicklungsumgebung bereitzustellen, die alle erforderlichen Abhängigkeiten enthält, um diesen Artikel abzuschließen.

GitHub Codespaces (empfohlen)

GitHub Codespaces führt einen von GitHub verwalteten Entwicklungscontainer mit Visual Studio Code für Web als Benutzeroberfläche aus. Verwenden Sie für die einfachste Entwicklungsumgebung GitHub Codespaces, damit Sie die richtigen Entwicklertools und Abhängigkeiten vorinstalliert haben, um diesen Artikel abzuschließen.

Wichtig

Alle GitHub-Konten können Codespaces für bis zu 60 Stunden kostenlos jeden Monat mit 2 Kerninstanzen verwenden. Weitere Informationen finden Sie im Artikel zu monatlich enthaltener Speicherkapazität und Kernstunden in GitHub Codespaces.

1. Starten Sie den Prozess, um einen neuen GitHub Codespace im Branch main des GitHub-Repositorys Azure-Samples/azure-openai-assistant-javascript zu erstellen.

2. Klicken Sie mit der rechten Maustaste auf die folgende Schaltfläche, und wählen Sie Link in neuen Fenstern öffnen aus, damit sowohl die Entwicklungsumgebung als auch die Dokumentation gleichzeitig verfügbar sind.

   

3. Überprüfen Sie auf der Seite Codespace erstellen die Codespace-Konfigurationseinstellungen, und wählen Sie dann Neuen Codespace erstellen aus.

4. Warten Sie den Start des Codespaces ab. Dieser Startvorgang kann einige Minuten dauern.

5. Melden Sie sich am unteren Bildschirmrand am Terminal mit der Azure Developer CLI bei Azure an.

   azd auth login
   

6. Kopieren Sie den Code vom Terminal, und fügen Sie ihn dann in einen Browser ein. Befolgen Sie die Anweisungen zum Authentifizieren mit Ihrem Azure-Konto.

7. Die verbleibenden Aufgaben in diesem Artikel finden im Kontext dieses Entwicklungscontainers statt.

Visual Studio Code

Die Dev Containers-Erweiterung für Visual Studio Code erfordert, dass Docker auf Ihrem lokalen Computer installiert ist. Die Erweiterung hostet den Entwicklungscontainer lokal mithilfe des Docker-Hosts mit den richtigen Entwicklertools und Abhängigkeiten, die vorinstalliert sind, um diesen Artikel abzuschließen.

1. Verzweigen Sie das Beispiel-Repository, indem Sie den Link Azure-Samples/azure-openai-assistant-javascript auswählen.

2. Klonen Sie Ihr Fork-Repository. Ersetzen Sie <YOUR-GITHUB-ACCOUNT> durch Ihren GitHub-Kontonamen.

   git clone https://github.com/<YOUR-GITHUB-ACCOUNT>/azure-openai-assistant-javascript
   

3. Öffnen Sie Visual Studio Code im neuen Ordner.

   cd azure-openai-assistant-javascript
   code .
   

4. Stellen Sie sicher, dass Sie die Erweiterung Dev Containers in Visual Studio Code installiert haben.

5. Öffnen Sie ein neues Terminal im Editor.

   Tipp

   Mit dem Hauptmenü können Sie zur Menüoption Terminal navigieren und dann die Option Neues Terminal auswählen.

   

6. Melden Sie sich mit der Azure Developer CLI bei Azure an.

   azd auth login
   

   Kopieren Sie den Code vom Terminal, und fügen Sie ihn dann in einen Browser ein. Befolgen Sie die Anweisungen zum Authentifizieren mit Ihrem Azure-Konto.

7. Öffnen Sie die Befehlspalette, suchen Sie nach den Dev Containers-Befehlen, und wählen Sie dann Dev Containers: In Container erneut öffnen aus.

   Tipp

   Visual Studio Code fordert Sie möglicherweise automatisch auf, den vorhandenen Ordner in einem Entwicklungscontainer erneut zu öffnen. Dies entspricht funktional der Verwendung der Befehlspalette, um den aktuellen Arbeitsbereich in einem Container erneut zu öffnen.

8. Öffnen Sie das Terminalfenster erneut (STRG + `), und lassen Sie es geöffnet.

9. Die restlichen Übungen in diesem Projekt finden im Rahmen dieses Entwicklungscontainers statt.

Bereitstellen und Ausführen

Das Beispiel-Repository enthält alle Code- und Konfigurationsdateien, die Sie zum Bereitstellen einer Funktions-App in Azure benötigen. Die folgenden Schritte führen Sie durch den Prozess der Bereitstellung des Beispiels in Azure.

Bereitstellen der Assistenten-App in Azure

Wichtig

In diesem Abschnitt erstellte Azure-Ressourcen verursachen sofortige Kosten, in erster Linie durch die Azure KI-Suche-Ressource. Diese Ressourcen können Kosten verursachen, auch wenn Sie den Befehl unterbrechen, bevor er vollständig ausgeführt wird.

1. Führen Sie den folgenden Azure Developer CLI-Befehl aus, um die Azure-Ressourcen bereitzustellen und den Quellcode bereitzustellen:

   azd up
   

2. Wenn Sie aufgefordert werden, einen Umgebungsnamen einzugeben, halten Sie ihn kurz und klein geschrieben. Beispiel: myenv. Er wird als Teil des Ressourcengruppennamens verwendet.

3. Wenn Sie dazu aufgefordert werden, wählen Sie ein Abonnement aus, in dem die Ressourcen erstellt werden sollen.

4. Wenn Sie aufgefordert werden, einen Ort zum ersten Mal auszuwählen, wählen Sie einen Ort in Ihrer Nähe aus. Dieser Speicherort wird für die meisten Ressourcen einschließlich Hosting verwendet.

5. Wenn Sie zur Eingabe eines Speicherorts für das OpenAI-Modell aufgefordert werden, wählen Sie einen Speicherort aus, der sich in Ihrer Nähe befindet. Wenn derselbe Speicherort wie Ihr erster Speicherort verfügbar ist, wählen Sie diesen Speicherort aus.

6. Warten Sie, bis die App bereitgestellt wird. Es kann bis zu 5 bis 10 Minuten dauern, bis die Bereitstellung abgeschlossen ist.

7. Nach der erfolgreichen Bereitstellung der Anwendung wird im Terminal eine URL angezeigt.

8. Wählen Sie diese URL mit der Bezeichnung Deploying service web aus, um die Assistentenanwendung in einem Browser zu öffnen.

Verwenden Sie die Assistenten-App

Sie können die Assistant-App verwenden, um den Börsenkurs von MSFT zu erhalten. Die folgenden Schritte führen Sie durch den Prozess der Verwendung der Assistenten-App. Der Assistent kann Ihnen die Antworten per E-Mail senden. Da die Funktion zum Senden von E-Mails nicht konfiguriert ist, ändern Sie die Eingabeaufforderung so, dass diese Anweisung nicht verwendet wird.

1. Kopieren Sie im Browser die folgende Eingabeaufforderung, und fügen Sie sie ein:

   Based on the latest financial data and current stock market trends, can you provide a detailed analysis of Microsoft's current state? Please include insights into their recent performance, market position, and future outlook. Additionally, retrieve and include the latest closing price of Microsoft's stock using its ticker symbol (MSFT). 
   

2. Wählen Sie die Schaltfläche Ausführen. Ihre Ergebnisse sollten etwa wie die folgende Reaktion aussehen.

   

Bereinigen von Ressourcen

Bereinigen von Azure-Ressourcen

Die in diesem Artikel erstellten Azure-Ressourcen werden Ihrem Azure-Abonnement in Rechnung gestellt. Wenn Sie nicht erwarten, dass diese Ressourcen in Zukunft benötigt werden, löschen Sie sie, um mehr Gebühren zu vermeiden.

Führen Sie den folgenden Azure Developer CLI-Befehl aus, um die Azure-Ressourcen zu löschen und den Quellcode zu entfernen:

azd down --purge

GitHub-Codespaces bereinigen

GitHub Codespaces

Durch das Löschen der GitHub Codespaces-Umgebung wird sichergestellt, dass Sie die Anzahl der kostenlosen Berechtigungsstunden pro Kern maximieren können, die Sie für Ihr Konto erhalten.

Wichtig

Weitere Informationen zu den Berechtigungen Ihres GitHub-Kontos finden Sie im Artikel zu monatlich enthaltener Speicherkapazität und Kernstunden in GitHub Codespaces.

1. Melden Sie sich beim GitHub Codespaces-Dashboard (https://github.com/codespaces) an.

2. Suchen Sie Ihre derzeit ausgeführten Codespaces, die aus dem GitHub-Repository Azure-Samples/azure-openai-assistant-javascript stammen.

   

3. Öffnen Sie das Kontextmenü, ..., für den Codespace, und wählen Sie dann Löschen aus.

Visual Studio Code

Sie müssen Ihre lokale Umgebung nicht unbedingt bereinigen, aber Sie können den ausgeführten Entwicklungscontainer beenden und zum Ausführen von Visual Studio Code im Kontext eines lokalen Arbeitsbereichs zurückkehren.

1. Öffnen Sie die Befehlspalette, suchen Sie nach den Dev Containers-Befehlen, und wählen Sie dann Dev Containers: Ordner erneut öffnen aus.

   

Tipp

Visual Studio Code beendet den ausgeführten Entwicklungscontainer, aber der Container ist weiterhin in Docker in einem angehaltenen Zustand vorhanden. Sie haben immer die Möglichkeit, die Containerinstanz, das Containerimage und Volumes von Docker zu löschen, um mehr Speicherplatz auf Ihrem lokalen Computer freizugeben.

Hilfe anfordern

Dieses Beispiel-Repository bietet Informationen zur Problembehandlung.

Wenn Ihr Problem nicht behoben wurde, protokollieren Sie Ihr Problem in den Problemen des Repositorys.

Verwandte Inhalte

• Was ist die Azure OpenAI-Assistenten-API?
• Einführung in das Auswerten von Antworten in einer Chat-App mit JavaScript