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

In diesem Lernprogramm erstellen Sie eine intelligente KI-Anwendung, indem Sie Azure OpenAI in eine Python-Webanwendung integrieren und in Azure App Service bereitstellen. Sie erstellen eine Flask-App, die Chatabschlussanforderungen an ein Modell in Azure OpenAI sendet.

Screenshot des Chatbots, der in Azure App Service ausgeführt wird.

In diesem Tutorial lernen Sie Folgendes:

Erstellen Sie eine Azure OpenAI-Ressource, und stellen Sie ein Sprachmodell bereit.
Erstellen Sie eine Flask-Anwendung, die eine Verbindung mit Azure OpenAI herstellt.
Stellen Sie die Anwendung in Azure App Service bereit.
Implementieren Sie die kennwortlose sichere Authentifizierung sowohl in der Entwicklungsumgebung als auch in Azure.

Prerequisites

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.

Wechseln Sie zu GitHub Codespaces , und melden Sie sich mit Ihrem GitHub-Konto an.
Suchen Sie die leere Vorlage von GitHub, und wählen Sie "Diese Vorlage verwenden " aus, um einen neuen leeren Codespace zu erstellen.

Installieren Sie im Codespace-Terminal die Azure CLI:

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

Melden Sie sich bei Ihrem Azure-Konto an:
```
az login
```
Folgen Sie den Anweisungen im Terminal, um sich zu authentifizieren.
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"
```
Important

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.

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 Flask-App

Erstellen Sie in Ihrem Codespace-Terminal eine virtuelle Umgebung, und installieren Sie die benötigten PIP-Pakete.

python3 -m venv .venv
source .venv/bin/activate
pip install flask openai azure.identity dotenv
pip freeze > requirements.txt

Erstellen Sie im Arbeitsbereichsstamm eine app.py und kopieren Sie den folgenden Code in die Datei, um einen einfachen Chat-Abschlussaufruf mit Azure OpenAI auszuführen.

import os
from flask import Flask, render_template, request
from azure.identity import DefaultAzureCredential, get_bearer_token_provider
from openai import AzureOpenAI

app = Flask(__name__)

# Initialize the Azure OpenAI client with Microsoft Entra authentication
token_provider = get_bearer_token_provider(
    DefaultAzureCredential(), "https://cognitiveservices.azure.com/.default"
)
client = AzureOpenAI(
    api_version="2024-10-21",
    azure_endpoint=os.getenv("AZURE_OPENAI_ENDPOINT"),
    azure_ad_token_provider=token_provider,
)

@app.route('/', methods=['GET', 'POST'])
def index():
    response = None
    if request.method == 'POST': # Handle form submission
        user_message = request.form.get('message')
        if user_message:
            try:
                # Call the Azure OpenAI API with the user's message
                completion = client.chat.completions.create(
                    model="gpt-4o-mini",
                    messages=[{"role": "user", "content": user_message}]
                )
                ai_message = completion.choices[0].message.content
                response = ai_message
            except Exception as e:
                response = f"Error: {e}"
    return render_template('index.html', response=response)

if __name__ == '__main__':
    app.run()

Erstellen Sie ein Vorlagenverzeichnis und eine index.html Datei darin. Kopieren Sie den folgenden Code dort ein für eine einfache Chatschnittstelle.

<!doctype html>
<html>
<head>
    <title>Azure OpenAI Chat</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
</head>
<body>
    <main class="container py-4">
        <h1 class="mb-4 text-primary">Azure OpenAI Chat</h1>
        <form method="post" action="/" class="mb-3">
            <div class="input-group">
                <input type="text" name="message" class="form-control" placeholder="Type your message..." required>
                <button type="submit" class="btn btn-primary">Send</button>
            </div>
        </form>
        <div class="card p-3">
            {% if response %}
                <div class="alert alert-info mt-3">{{ response }}</div>
            {% endif %}
        </div>
    </main>
</body>
</html>

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

Führen Sie die App aus, indem Sie AZURE_OPENAI_ENDPOINT mit dem Wert aus der CLI-Ausgabe einfügen.
```
AZURE_OPENAI_ENDPOINT=<output-from-previous-cli-command> flask run
```
Wählen Sie "Im Browser öffnen " aus, um die App auf einer neuen Browserregisterkarte zu starten. Senden Sie eine Frage, und überprüfen Sie, ob Sie eine Antwortnachricht erhalten.

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.

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.
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.
Ö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
```
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.

Ihre App wird jetzt bereitgestellt und mit Azure OpenAI mit verwalteter Identität verbunden.

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:

from openai import OpenAI

client = OpenAI(
    api_key="<openai-api-key>"
)

Weitere Informationen finden Sie unter Wechseln zwischen OpenAI- und Azure OpenAI-Endpunkten mit Python.

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 semantischem Kernel: Semantischer Kernel C# – Schnellstart.
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.

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.

Nächste Schritte

Feedback

War diese Seite hilfreich?

Last updated on 2025-05-20