Erste Schritte mit multimodalen Vision-Chat-Apps mit Azure OpenAI

Artikel
10/30/2024

In diesem Artikel erfahren Sie, wie Sie mithilfe von multimodalen Azure OpenAI-Modellen Antworten auf Benutzernachrichten und hochgeladene Bilder in einer Chat-App generieren. Dieses Beispiel für Eine Chat-App enthält auch alle Infrastruktur und Konfiguration, die für die Bereitstellung von Azure OpenAI-Ressourcen und die Bereitstellung der App in Azure-Container-Apps mit der Azure Developer CLI erforderlich ist.

Indem Sie die Anweisungen in diesem Artikel befolgen, werden Sie:

Stellen Sie eine Azure Container-Chat-App bereit, die verwaltete Identität für die Authentifizierung verwendet.
Laden Sie Bilder hoch, die als Teil des Chatstreams verwendet werden sollen.
Chatten Sie mit einem azure OpenAI multimodalen Large Language Model (LLM) mithilfe der OpenAI-Bibliothek.

Nachdem Sie das Verfahren in diesem Artikel abgeschlossen haben, können Sie mit dem Ändern des neuen Projekts mit Ihrem benutzerdefinierten Code beginnen.

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.

Übersicht über die Architektur

Eine einfache Architektur der Chat-App wird im folgenden Diagramm gezeigt:

Die Chat-App wird als Azure-Container-App ausgeführt. Die App verwendet verwaltete Identität über Microsoft Entra ID, um sich mit Azure OpenAI zu authentifizieren, anstatt mit einem API-Schlüssel. Die Chat-App verwendet Azure OpenAI, um Antworten auf Benutzernachrichten zu generieren.

Die Anwendungsarchitektur basiert auf den folgenden Diensten und Komponenten:

Azure OpenAI stellt den KI-Anbieter dar, an den die Abfragen des Benutzers gesendet werden.
Azure Container Apps ist die Containerumgebung, in der die Anwendung gehostet wird.
Managed Identity hilft uns dabei, eine erstklassige Sicherheit zu gewährleisten und die Anforderung für Sie als Entwickler zu beseitigen, einen geheimen Schlüssel sicher zu verwalten.
Bicep-Dateien für die Bereitstellung von Azure-Ressourcen, einschließlich Azure OpenAI, Azure Container Apps, Azure Container Registry, Azure Log Analytics und rollenbasierte Zugriffssteuerungsrollen (RBAC).
Das Microsoft KI-Chat-Protokoll bietet standardisierte API-Verträge über KI-Lösungen und Sprachen hinweg. Die Chat-App entspricht dem Microsoft AI-Chatprotokoll.
Ein Python Quart , das das openai Paket verwendet, um Antworten auf Benutzernachrichten mit hochgeladenen Bilddateien zu generieren.
Ein einfaches HTML/JavaScript-Frontend, das Antworten aus dem Back-End mithilfe von JSON-Zeilen über einen ReadableStream streamt.

Kosten

Bei dem Versuch, die Preise in diesem Beispiel so niedrig wie möglich zu halten, verwenden die meisten Ressourcen ein Einfaches oder Verbrauchspreisniveau. Ändern Sie die Ebenenebene je nach Bedarf basierend auf Ihrer beabsichtigten Verwendung. Löschen Sie die Ressourcen, wenn Sie mit dem Artikel fertig sind, um die Anfallenden Gebühren zu beenden.

Weitere Informationen zu den Kosten im Beispielrepository finden Sie hier.

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, müssen Sie die folgenden Voraussetzungen erfüllen:

GitHub Codespaces (empfohlen)
Visual Studio Code

Azure-Abonnement: Kostenloses Azure-Konto
Azure-Kontoberechtigungen – Ihr Azure-Konto muss Microsoft.Authorization/roleAssignments/write über Berechtigungen verfügen, z . B. Benutzerzugriffsadministrator oder Besitzer.
GitHub -Konto

Öffnen Sie die 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)
Visual Studio Code

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.

Führen Sie die folgenden Schritte aus, um einen neuen GitHub Codespace auf der main Verzweigung des Azure-Samples/openai-chat-vision-quickstart GitHub-Repositorys zu erstellen.

Klicken Sie mit der rechten Maustaste auf die folgende Schaltfläche, und wählen Sie im neuen Fenster "Link öffnen" aus. Mit dieser Aktion können Sie die Entwicklungsumgebung und die Dokumentation zur Überprüfung zur Verfügung stellen.
Überprüfen Sie auf der Seite "Codespace erstellen" die Option "Neuen Codespace erstellen", und wählen Sie dann "Neuen Codespace erstellen" aus.
Warten Sie den Start des Codespaces ab. Dieser Startvorgang kann einige Minuten dauern.
Melden Sie sich mit der Azure Developer CLI am unteren Bildschirmrand 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.

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

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.

Erstellen Sie auf Ihrem Computer ein neues lokales Verzeichnis für das Projekt.
```
mkdir my-chat-vision-app
```
Navigieren Sie zu dem von Ihnen erstellten Verzeichnis.
```
cd my-chat-vision-app
```
Öffnen Sie Visual Studio Code in diesem Verzeichnis:
```
code .
```
Öffnen Sie in Visual Studio Code ein neues Terminal.
Führen Sie den folgenden AZD-Befehl aus, um das GitHub-Repository auf Ihrem lokalen Computer zu platzieren.
```
azd init -t openai-chat-vision-quickstart
```
Öffnen Sie die Befehlspalette, suchen Sie nach Dev Containers: Ordner in Container öffnen, und wählen Sie diese Option aus, um das Projekt in einem Dev-Container zu öffnen. Warten Sie, bis der Entwicklercontainer geöffnet wurde, bevor Sie fortfahren.
Melden Sie sich mit der Azure Developer CLI bei Azure an.
```
azd auth login
```
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 für die Azure-Bereitstellung der Chat-App. Die folgenden Schritte führen Sie durch den Azure-Bereitstellungsprozess der Beispielchat-App.

Bereitstellen einer Chat-App in Azure

Wichtig

Azure-Ressourcen, die in diesem Abschnitt erstellt wurden, verursachen sofortige Kosten. Diese Ressourcen können Kosten verursachen, selbst wenn Sie den Befehl unterbrechen, bevor er vollständig ausgeführt wird.

Führen Sie den folgenden Azure Developer CLI-Befehl für die Bereitstellung von Azure-Ressourcen und die Quellcodebereitstellung aus:
```
azd up
```

Gehen Sie zum Beantworten der Eingabeaufforderungen gemäß der folgenden Tabelle vor:

Prompt	Antwort
Umgebungsname	Halten Sie dies kurz, und verwenden Sie nur Kleinbuchstaben. Fügen Sie Ihren Namen oder Alias hinzu. Beispiel: `chat-vision`. Er wird als Teil des Ressourcengruppennamens verwendet.
Abonnement	Wählen Sie das Abonnement aus, in dem Sie die Ressourcen erstellen möchten.
Standort (für Hosting)	Wählen Sie aus der Liste einen Standort in Ihrer Nähe aus.
Speicherort für das Azure OpenAI-Modell	Wählen Sie aus der Liste einen Standort in Ihrer Nähe aus. Wenn derselbe Speicherort wie Ihr erster Speicherort verfügbar ist, wählen Sie diesen Speicherort aus.

Warten Sie, bis die App bereitgestellt wird. Die Bereitstellung dauert in der Regel zwischen 5 und 10 Minuten, bis die Bereitstellung abgeschlossen ist.

Verwenden der Chat-App zum Stellen von Fragen zum Großen Sprachmodell

Das Terminal zeigt eine URL nach erfolgreicher Anwendungsbereitstellung an.
Wählen Sie diese URL aus, die als Deploying service web beschriftet ist, um die Chatanwendung in einem Browser zu öffnen.
Laden Sie im Browser ein Bild hoch, indem Sie auf " Datei auswählen" klicken und ein Bild auswählen.
Stellen Sie eine Frage zu dem hochgeladenen Bild, z. B. "Worum handelt es sich um das Bild?".
Die Antwort stammt aus Azure OpenAI und das Ergebnis wird angezeigt.

Erkunden des Beispielcodes

Während OpenAI und Azure OpenAI Service auf eine allgemeine Python-Clientbibliothek angewiesen sind, werden kleine Codeänderungen bei Verwendung von Azure OpenAI-Endpunkten benötigt. In diesem Beispiel wird ein multimodales Azure OpenAI-Modell verwendet, um Antworten auf Benutzernachrichten und hochgeladene Bilder zu generieren.

Base64 Codieren des hochgeladenen Bilds im Frontend

Das hochgeladene Bild muss Base64-codiert sein, damit es direkt als Daten-URI als Teil der Nachricht verwendet werden kann.

Im Beispiel behandelt der folgende Frontend-Codeausschnitt im scriptTag der src/quartapp/templates/index.html Datei diese Funktionalität. Die toBase64 Pfeilfunktion verwendet die readAsDataURL Methode desFileReader asynchronen Lesens in der hochgeladenen Bilddatei als base64-codierte Zeichenfolge.

    const toBase64 = file => new Promise((resolve, reject) => {
        const reader = new FileReader();
        reader.readAsDataURL(file);
        reader.onload = () => resolve(reader.result);
        reader.onerror = reject;
    });

Die toBase64 Funktion wird von einem Listener für das Ereignis des Formulars submit aufgerufen. Wenn das submit Ereignis ausgelöst wird, sucht der Listener nach einer Bilddatei und behandelt es, wenn es vorhanden ist, indem Base64 das Bild mithilfe der toBase64 Funktion codiert. Die url der neuen Bilddaten fileDatawird dann an die Nachricht angefügt.

    form.addEventListener("submit", async function(e) {
        e.preventDefault();

        const file = document.getElementById("file").files[0];
        const fileData = file ? await toBase64(file) : null;

        const message = messageInput.value;

        const userTemplateClone = userTemplate.content.cloneNode(true);
        userTemplateClone.querySelector(".message-content").innerText = message;
        if (file) {
            const img = document.createElement("img");
            img.src = fileData;
            userTemplateClone.querySelector(".message-file").appendChild(img);
        }
        targetContainer.appendChild(userTemplateClone);

Behandeln des Bilds mit dem Back-End

In der src\quartapp\chat.py Datei beginnt der Back-End-Code für die Bildverarbeitung nach der Konfiguration der schlüssellosen Authentifizierung.

Hinweis

Weitere Informationen zur Verwendung von schlüssellosen Verbindungen für die Authentifizierung und Autorisierung für Azure OpenAI finden Sie im Artikel "Erste Schritte mit dem Azure OpenAI-Sicherheitsbaustein Microsoft Learn".

Chathandlerfunktion

Die chat_handler() Funktion wartet auf JSON-Daten der eingehenden Anforderung vom chat/stream Endpunkt und verarbeitet sie. Die Nachrichten werden dann aus den JSON-Daten extrahiert. Schließlich wird das base64-codierte Bild aus den JSON-Daten abgerufen.

@bp.post("/chat/stream")
async def chat_handler():
    request_json = await request.get_json()
    request_messages = request_json["messages"]
    # get the base64 encoded image from the request
    image = request_json["context"]["file"]

Antwortdatenstrom mit dem OpenAI-Client und -Modell

In response_stream der chat_handler Funktion wird der Chatabschlussanruf in der Route behandelt. Der folgende Codeausschnitt beginnt mit der Vorverarbeitung der Benutzerinhaltsmeldungen. Wenn ein Bild vorhanden ist, wird die Bild-URL an den Benutzerinhalt angefügt, wobei die

    @stream_with_context
    async def response_stream():
        # This sends all messages, so API request may exceed token limits
        all_messages = [
            {"role": "system", "content": "You are a helpful assistant."},
        ] + request_messages[0:-1]
        all_messages = request_messages[0:-1]
        if image:
            user_content = []
            user_content.append({"text": request_messages[-1]["content"], "type": "text"})
            user_content.append({"image_url": {"url": image, "detail": "auto"}, "type": "image_url"})
            all_messages.append({"role": "user", "content": user_content})
        else:
            all_messages.append(request_messages[-1])

Hinweis

Weitere Informationen zum Bildparameter detail und den zugehörigen Einstellungen finden Sie in den Detailparametereinstellungen in der Bildverarbeitung: Low, High, Auto section in the "Use GPT-4 Turbo with Vision" Microsoft Learn artikel.

bp.openai_client.chat.completions Ruft als Nächstes Chatabschlusse über einen Azure OpenAI-API-Aufruf ab und streamt die Antwort.

        chat_coroutine = bp.openai_client.chat.completions.create(
            # Azure OpenAI takes the deployment name as the model name
            model=os.environ["OPENAI_MODEL"],
            messages=all_messages,
            stream=True,
            temperature=request_json.get("temperature", 0.5),
        )

Schließlich wird die Antwort zurück an den Client gestreamt, mit der Fehlerbehandlung für ausnahmen.

        try:
            async for event in await chat_coroutine:
                event_dict = event.model_dump()
                if event_dict["choices"]:
                    yield json.dumps(event_dict["choices"][0], ensure_ascii=False) + "\n"
        except Exception as e:
            current_app.logger.error(e)
            yield json.dumps({"error": str(e)}, ensure_ascii=False) + "\n"

    return Response(response_stream())

Weitere Beispielressourcen zum Erkunden

Zusätzlich zum Beispiel einer Chat-App gibt es weitere Ressourcen im Repository, um weitere Informationen zu erhalten. Sehen Sie sich die folgenden Notizbücher im notebooks Verzeichnis an:

Notebook	Beschreibung
chat_pdf_images.ipynb	In diesem Notizbuch wird veranschaulicht, wie PDF-Seiten in Bilder konvertiert und an ein Visionsmodell gesendet werden, um daraus zu ziehen.
chat_vision.ipynb	Dieses Notizbuch wird für manuelle Experimente mit dem in der App verwendeten Visionsmodell bereitgestellt.

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

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.

Melden Sie sich beim GitHub Codespaces-Dashboard (https://github.com/codespaces) an.
Suchen Sie Ihre derzeit ausgeführten Codespaces, die aus dem GitHub-Repository Azure-Samples//openai-chat-vision-quickstart stammen.
Öffnen Sie das Kontextmenü für den Codespace, und wählen Sie Löschen aus.

Hilfe erhalten

Protokollieren Sie Ihr Problem mit den Problemen des Repositorys.

Nächste Schritte

Erste Schritte mit dem Chat und eigenen Daten für Python

Freigeben über

Erste Schritte mit multimodalen Vision-Chat-Apps mit Azure OpenAI

Übersicht über die Architektur

Kosten

Voraussetzungen

Öffnen Sie die Entwicklungsumgebung

Bereitstellen und Ausführen

Bereitstellen einer Chat-App in Azure

Verwenden der Chat-App zum Stellen von Fragen zum Großen Sprachmodell

Erkunden des Beispielcodes

Base64 Codieren des hochgeladenen Bilds im Frontend

Behandeln des Bilds mit dem Back-End

Chathandlerfunktion

Antwortdatenstrom mit dem OpenAI-Client und -Modell

Weitere Beispielressourcen zum Erkunden

Bereinigen von Ressourcen

Bereinigen von Azure-Ressourcen

Bereinigen von GitHub-Codespaces

Hilfe erhalten

Nächste Schritte

Feedback

Zusätzliche Ressourcen