Lernprogramm: Erstellen eines Chatbots mit Azure App Service und Azure OpenAI (.NET)

In diesem Lernprogramm erstellen Sie eine intelligente KI-Anwendung, indem Sie Azure OpenAI in eine .NET Blazor-Anwendung integrieren und in Azure App Service bereitstellen. Sie erstellen eine interaktive Blazor-Seite, die Chatabschlussanforderungen an ein Modell in Azure OpenAI sendet und die Antwort zurück auf die Seite streamt.

In diesem Tutorial lernen Sie Folgendes:

Voraussetzungen

• Ein Azure-Konto mit einem aktiven Abonnement
• Ein GitHub-Konto für die Verwendung von GitHub Codespaces

1. Erstellen einer Azure OpenAI-Ressource

In diesem Abschnitt verwenden Sie GitHub Codespaces, um eine Azure OpenAI-Ressource mit der Azure CLI zu erstellen.

1. Wechseln Sie zu GitHub Codespaces , und melden Sie sich mit Ihrem GitHub-Konto an.

2. Suchen Sie die leere Vorlage von GitHub, und wählen Sie "Diese Vorlage verwenden " aus, um einen neuen leeren Codespace zu erstellen.

3. Installieren Sie im Codespace-Terminal die Azure CLI:

   curl -sL https://aka.ms/InstallAzureCLIDeb | sudo bash
   

4. Melden Sie sich bei Ihrem Azure-Konto an:

   az login
   

   Folgen Sie den Anweisungen im Terminal, um sich zu authentifizieren.

5. Legen Sie Umgebungsvariablen für den Namen der Ressourcengruppe, den Namen des Azure OpenAI-Dienstes und den Speicherort fest.

   export RESOURCE_GROUP="<group-name>"
   export OPENAI_SERVICE_NAME="<azure-openai-name>"
   export APPSERVICE_NAME="<app-name>"
   export LOCATION="eastus2"
   

   Von Bedeutung

   Die Region ist kritisch, da sie an die regionale Verfügbarkeit des ausgewählten Modells gebunden ist. Die Modellverfügbarkeit und die Verfügbarkeit des Bereitstellungstyps variieren von Region zu Region. Dieses Tutorial verwendet gpt-4o-mini, das im Standardbereitstellungstyp unter eastus2 verfügbar ist. Wenn Sie eine Bereitstellung in einer anderen Region ausführen, ist dieses Modell möglicherweise nicht verfügbar oder erfordert eine andere Ebene. Überprüfen Sie, bevor Sie Regionen ändern, die Modellzusammenfassungstabelle und die Regionsverfügbarkeit, um die Unterstützung des Modells in Ihrer bevorzugten Region zu überprüfen.

6. Erstellen Sie eine Ressourcengruppe und eine Azure OpenAI-Ressource mit einer benutzerdefinierten Domäne, und fügen Sie dann ein gpt-4o-mini-Modell hinzu:

   # Resource group
   az group create --name $RESOURCE_GROUP --___location $LOCATION
   # Azure OpenAI resource
   az cognitiveservices account create \
     --name $OPENAI_SERVICE_NAME \
     --resource-group $RESOURCE_GROUP \
     --___location $LOCATION \
     --custom-___domain $OPENAI_SERVICE_NAME \
     --kind OpenAI \
     --sku s0
   # gpt-4o-mini model
   az cognitiveservices account deployment create \
     --name $OPENAI_SERVICE_NAME \
     --resource-group $RESOURCE_GROUP \
     --deployment-name gpt-4o-mini \
     --model-name gpt-4o-mini \
     --model-version 2024-07-18 \
     --model-format OpenAI \
     --sku-name Standard \
     --sku-capacity 1
   # Cognitive Services OpenAI User role that lets the signed in Azure user to read models from Azure OpenAI
   az role assignment create \
     --assignee $(az ad signed-in-user show --query id -o tsv) \
     --role "Cognitive Services OpenAI User" \
     --scope /subscriptions/$(az account show --query id -o tsv)/resourceGroups/$RESOURCE_GROUP/providers/Microsoft.CognitiveServices/accounts/$OPENAI_SERVICE_NAME
   

Nachdem Sie nun über eine Azure OpenAI-Ressource verfügen, erstellen Sie eine Webanwendung für die Interaktion damit.

2. Erstellen und Einrichten einer Blazor-Web-App

In diesem Abschnitt erstellen Sie eine neue Blazor-Webanwendung mit der .NET CLI.

1. Erstellen Sie in Ihrem Codespace-Terminal eine neue Blazor-App, und versuchen Sie es zum ersten Mal auszuführen.

   dotnet new blazor -o .
   dotnet run
   

   In GitHub Codespaces sollte eine Benachrichtigung angezeigt werden, die angibt, dass die App an einem bestimmten Port verfügbar ist. Wählen Sie "Im Browser öffnen " aus, um die App auf einer neuen Browserregisterkarte zu starten.

2. Beenden Sie die App wieder im Codespace-Terminal mit STRG+C.

3. Installieren Sie die erforderlichen NuGet-Pakete für die Arbeit mit Azure OpenAI:

   dotnet add package Azure.AI.OpenAI
   dotnet add package Azure.Identity
   

4. Öffnen Sie Components/Pages/Home.razor und ersetzen Sie dessen Inhalt durch den folgenden Code für einen einfachen Aufruf eines Chat-Vervollständigungsstreams mit Azure OpenAI.

   @page "/"
   @rendermode InteractiveServer
   @using Azure.AI.OpenAI
   @using Azure.Identity
   @using OpenAI.Chat
   @inject Microsoft.Extensions.Configuration.IConfiguration _config
   
   <h3>Azure OpenAI Chat</h3>
   <div class="mb-3 d-flex align-items-center" style="margin:auto;">
       <input class="form-control me-2" @bind="userMessage" placeholder="Type your message..." />
       <button class="btn btn-primary" @onclick="SendMessage">Send</button>
   </div>
   <div class="card p-3" style="margin:auto;">
       @if (!string.IsNullOrEmpty(aiResponse))
       {
           <div class="alert alert-info mt-3 mb-0">@aiResponse</div>
       }
   </div>
   
   @code {
       private string? userMessage;
       private string? aiResponse;
   
       private async Task SendMessage()
       {
           if (string.IsNullOrWhiteSpace(userMessage)) return;
   
           // Initialize the Azure OpenAI client
           var endpoint = new Uri(_config["AZURE_OPENAI_ENDPOINT"]!);
           var client = new AzureOpenAIClient(endpoint, new DefaultAzureCredential());
           var chatClient = client.GetChatClient("gpt-4o-mini");
   
           aiResponse = string.Empty;
           StateHasChanged();
   
           // Create a chat completion streaming request
           var chatUpdates = chatClient.CompleteChatStreamingAsync(
               [
                   new UserChatMessage(userMessage)
               ]);
   
               await foreach(var chatUpdate in chatUpdates)
               {
                   // Update the UI with the streaming response
                   foreach(var contentPart in chatUpdate.ContentUpdate)
               {
                   aiResponse += contentPart.Text;
                   StateHasChanged();
               }
           }
       }
   }
   

5. Rufen Sie im Terminal Ihren OpenAI-Endpunkt ab:

   az cognitiveservices account show \
     --name $OPENAI_SERVICE_NAME \
     --resource-group $RESOURCE_GROUP \
     --query properties.endpoint \
     --output tsv
   

6. Führen Sie die App erneut aus, indem Sie AZURE_OPENAI_ENDPOINT mit seinem Wert aus der CLI-Ausgabe hinzufügen.

   AZURE_OPENAI_ENDPOINT=<output-from-previous-cli-command> dotnet run
   

7. Wählen Sie "Im Browser öffnen " aus, um die App auf einer neuen Browserregisterkarte zu starten.

8. Geben Sie eine Nachricht in das Textfeld ein, und wählen Sie "Senden" aus, und geben Sie der App ein paar Sekunden, um mit der Nachricht von Azure OpenAI zu antworten.

Die Anwendung verwendet DefaultAzureCredential, die automatisch Ihren azure CLI-Angemeldeten Benutzer für die Tokenauthentifizierung verwendet. Später in diesem Lernprogramm stellen Sie Ihre Blazor-App in Azure App Service bereit und konfigurieren sie so, dass eine sichere Verbindung mit Ihrer Azure OpenAI-Ressource mithilfe der verwalteten Identität hergestellt wird. Dasselbe DefaultAzureCredential in Ihrem Code kann die verwaltete Identität erkennen und für die Authentifizierung verwenden. Es ist kein zusätzlicher Code erforderlich.

3. Bereitstellen für Azure App Service und Konfigurieren der OpenAI-Verbindung

Nachdem Ihre App lokal funktioniert, stellen wir sie in Azure App Service bereit und richten eine Dienstverbindung mit Azure OpenAI mithilfe der verwalteten Identität ein.

1. Stellen Sie zunächst Ihre App mit dem Azure CLI-Befehl in Azure App Service bereit az webapp up. Mit diesem Befehl wird eine neue Web-App erstellt und Ihr Code darauf bereitgestellt:

   az webapp up \
     --resource-group $RESOURCE_GROUP \
     --___location $LOCATION \
     --name $APPSERVICE_NAME \
     --plan $APPSERVICE_NAME \
     --sku B1 \
     --os-type Linux \
     --track-status false
   

   Die Ausführung dieses Befehls kann einige Minuten dauern. Sie erstellt eine neue Web-App in derselben Ressourcengruppe wie Ihre OpenAI-Ressource.

2. Erstellen Sie nach der Bereitstellung der App eine Dienstverbindung zwischen Ihrer Web-App und der Azure OpenAI-Ressource mit verwalteter Identität:

   az webapp connection create cognitiveservices \
     --resource-group $RESOURCE_GROUP \
     --name $APPSERVICE_NAME \
     --target-resource-group $RESOURCE_GROUP \
     --account $OPENAI_SERVICE_NAME
     --connection azure-openai \
     --system-identity
   

   Dieser Befehl erstellt eine Verbindung zwischen Ihrer Web-App und der Azure OpenAI-Ressource durch:

   • Generieren der vom System zugewiesenen verwalteten Identität für die Web-App.
   • Hinzufügen der Rolle "Cognitive Services OpenAI-Mitwirkender" zur verwalteten Identität für die Azure OpenAI-Ressource.
   • Hinzufügen der AZURE_OPENAI_ENDPOINT App-Einstellung zu Ihrer Web-App.

   Ihre App wird jetzt bereitgestellt und mit Azure OpenAI mit verwalteter Identität verbunden. Die App-Einstellung AZURE_OPENAI_ENDPOINT wird über die IConfiguration-Einfügung gelesen.

3. Öffnen Sie die bereitgestellte Web-App im Browser. Suchen Sie die URL der bereitgestellten Web-App in der Terminalausgabe. Öffnen Sie Ihren Webbrowser, und navigieren Sie dorthin.

   az webapp browse
   

4. Geben Sie eine Nachricht in das Textfeld ein, und wählen Sie "Senden" aus, und geben Sie der App ein paar Sekunden, um mit der Nachricht aus Azure OpenAI zu antworten.

   

Häufig gestellte Fragen

• Was geschieht, wenn ich anstelle von Azure OpenAI eine Verbindung mit OpenAI herstellen möchte?
• Kann ich stattdessen eine Verbindung mit Azure OpenAI mit einem API-Schlüssel herstellen?
• Wie funktioniert DefaultAzureCredential in diesem Lernprogramm?

Was geschieht, wenn ich anstelle von Azure OpenAI eine Verbindung mit OpenAI herstellen möchte?

Um stattdessen eine Verbindung mit OpenAI herzustellen, verwenden Sie den folgenden Code:

@using OpenAI.Client

var client = new OpenAIClient("<openai-api-key>");

Weitere Informationen finden Sie unter OpenAI-API-Authentifizierung.

Wenn Sie mit Verbindungsschlüsseln in App Service arbeiten, sollten Sie Key Vault-Verweise verwenden, anstatt geheime Schlüssel direkt in Ihrer Codebasis zu speichern. Dadurch wird sichergestellt, dass vertrauliche Informationen sicher bleiben und zentral verwaltet werden.

Kann ich stattdessen eine Verbindung mit Azure OpenAI mit einem API-Schlüssel herstellen?

Ja, Sie können eine Verbindung mit Azure OpenAI mithilfe eines API-Schlüssels anstelle der verwalteten Identität herstellen. Dieser Ansatz wird von den Azure OpenAI-SDKs und dem semantischen Kernel unterstützt.

• Ausführliche Informationen zur Verwendung von API-Schlüsseln mit dem semantischen Kernel in C# finden Sie in der Schnellstartanleitung für den semantischen Kernel C#.
• Ausführliche Informationen zur Verwendung von API-Schlüsseln mit der Azure OpenAI-Clientbibliothek: Schnellstart: Einführung in die Nutzung von Chat-Vervollständigungen mit dem Azure OpenAI-Dienst.

Wenn Sie mit Verbindungsschlüsseln in App Service arbeiten, sollten Sie Key Vault-Verweise verwenden, anstatt geheime Schlüssel direkt in Ihrer Codebasis zu speichern. Dadurch wird sichergestellt, dass vertrauliche Informationen sicher bleiben und zentral verwaltet werden.

Wie funktioniert DefaultAzureCredential in diesem Lernprogramm?

Die DefaultAzureCredential Authentifizierung wird vereinfacht, indem automatisch die beste verfügbare Authentifizierungsmethode ausgewählt wird:

• Während der lokalen Entwicklung: Nach der Ausführung az loginwerden Ihre lokalen Azure CLI-Anmeldeinformationen verwendet.
• Wenn sie in Azure App Service bereitgestellt wird: Sie verwendet die verwaltete Identität der App für sichere, kennwortlose Authentifizierung.

Mit diesem Ansatz kann Ihr Code ohne Änderungen sicher und nahtlos in lokalen und Cloudumgebungen ausgeführt werden.

Weitere Ressourcen

• Lernprogramm: Erstellen einer erweiterten Abrufgenerierung mit Azure OpenAI und Azure AI Search (.NET)
• Lernprogramm: Ausführen eines Chatbots in App Service mit einer Phi-4-Sidecar-Erweiterung (ASP.NET Core)
• Erstellen und Bereitstellen einer Azure OpenAI Service-Ressource
• Weitere Informationen zur verwalteten Identität in App Service