Erste Schritte mit Azure OpenAI mit Assistenten und Funktionsaufrufen in JavaScript

In diesem Artikel erfahren Sie, wie Sie den serverlosen Azure OpenAI-Assistenten schnellstart bereitstellen und ausführen. In diesem Beispiel wird eine Assistenten-App mit JavaScript, Azure OpenAI Service-Assistenten mit Funktionsaufrufen und Azure Functions implementiert.

Übersicht über die Architektur

Mit Azure OpenAI-Assistenten können Sie KI-Assistenten erstellen, die auf Ihre Anforderungen zugeschnitten sind, indem Sie benutzerdefinierte Anweisungen befolgen und durch erweiterte Tools wie Codedolmetscher und benutzerdefinierte Funktionen erweitert werden. In diesem Artikel finden Sie eine ausführliche exemplarische Vorgehensweise für die ersten Schritte mit der Assistenten-API.

Diese Anwendung basiert auf zwei Hauptkomponenten:

• Eine einfache HTML-Seite mit einer Vanille-CSS- und JavaScript-Datei und gehostet auf Azure Static Web-Apps.

• Eine serverlose API, die mit Azure-Funktionen erstellt wurde und openAI JavaScript SDK verwendet. 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. Azure-Abonnement: Kostenloses Azure-Konto
2. Azure-Kontoberechtigungen: Ihr Azure-Konto muss über Microsoft.Authorization/roleAssignments/Schreibberechtigungen verfügen, z. B. Benutzerzugriffsadministrator oder Besitzer.
3. Zugriff auf Azure OpenAI im gewünschten Azure-Abonnement gewährt. Derzeit wird der Zugriff auf diesen Dienst nur auf Antrag gewährt. Sie können den Zugriff auf Azure OpenAI beantragen, indem Sie das Formular unter https://aka.ms/oai/access ausfüllen. Öffnen Sie ein Problem in diesem Repository, um uns bei einem Problem zu kontaktieren.
4. GitHub -Konto

Visual Studio Code

1. Azure-Abonnement: Kostenloses Azure-Konto
2. Azure-Kontoberechtigungen: Ihr Azure-Konto muss über Microsoft.Authorization/roleAssignments/Schreibberechtigungen verfügen, z. B. Benutzerzugriffsadministrator oder Besitzer.
3. Zugriff auf Azure OpenAI im gewünschten Azure-Abonnement gewährt. Derzeit wird der Zugriff auf diesen Dienst nur auf Antrag gewährt. Sie können den Zugriff auf Azure OpenAI beantragen, indem Sie das Formular unter https://aka.ms/oai/access ausfüllen. Öffnen Sie ein Problem in diesem Repository, um uns bei einem Problem zu kontaktieren.
4. Azure Developer CLI
5. Docker Desktop: Starten sie Docker Desktop, wenn er noch nicht läuft
6. Git-Client
7. Visual Studio Code
8. Dev-Containererweiterung

Öffnen Sie die Entwicklungsumgebung

Beginnen Sie jetzt mit einer Entwicklungsumgebung, in der alle Abhängigkeiten installiert sind, 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 pro Monat mit zwei Kerninstanzen kostenlos 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 den 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 diesen Azure-Samples/azure-openai-assistant-javascript-Link auswählen.

2. Klonen Sie Ihr Verzweigungs-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 die Dev Containers-Erweiterung in Visual Studio Code installiert ist.

5. Öffnen Sie ein neues Terminal im Codespace.

   Tipp

   Sie können das Hauptmenü verwenden, um zur Menüoption Terminal zu navigieren und dann die Option Neues Terminal auszuwä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 Kontext 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, selbst 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. Sie 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 5 bis 10 Minuten dauern, bis die Bereitstellung abgeschlossen ist.

7. Nachdem die Anwendung erfolgreich bereitgestellt wurde, wird eine URL im Terminal angezeigt.

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

Verwenden der Assistenten-App

Sie können die Assistenten-App verwenden, um den Börsenkurs zu MSFTerhalten. Die folgenden Schritte führen Sie durch den Prozess der Verwendung der Assistenten-App. Der Assistent kann Ihnen die Antworten per E-Mail senden. Dies ist noch nicht konfiguriert, sodass Sie die Eingabeaufforderung so ändern, 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 ähnlich wie die folgende Antwort 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 weitere 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

Bereinigen von GitHub-Codespaces

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 zur Ausführung 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 befindet sich weiterhin in Docker in einem beendeten Zustand. Sie haben immer die Möglichkeit, die Containerinstanz, das Containerimage und die Volumes aus Docker zu löschen, um mehr Speicherplatz auf Ihrem lokalen Computer freizugeben.

Hilfe erhalten

Dieses Beispiel-Repository bietet Informationen zur Problembehandlung.

Wenn Ihre ausgestellte Datei nicht behoben ist, protokollieren Sie Ihr Problem mit den Problemen des Repositorys.

Zugehöriger Inhalt

• Erste Schritte mit der Auswertung von Antworten in einer Chat-App in JavaScript