Kom igång med chattappar för multimodal vision med Hjälp av Azure OpenAI

Artikel
10/30/2024

Den här artikeln visar hur du använder multimodala Azure OpenAI-modeller för att generera svar på användarmeddelanden och uppladdade bilder i en chattapp. Det här chattappexemplet innehåller även all infrastruktur och konfiguration som krävs för att etablera Azure OpenAI-resurser och distribuera appen till Azure Container Apps med hjälp av Azure Developer CLI.

Genom att följa anvisningarna i den här artikeln gör du följande:

Distribuera en Azure Container-chattapp som använder hanterad identitet för autentisering.
Ladda upp bilder som ska användas som en del av chattströmmen.
Chatta med en Azure OpenAI multimodal stor språkmodell (LLM) med hjälp av OpenAI-biblioteket.

När du har slutfört den här artikeln kan du börja ändra det nya projektet med din anpassade kod.

Kommentar

Den här artikeln använder en eller flera AI-appmallar som grund för exemplen och vägledningen i artikeln. Med AI-appmallar får du väl underhållna och enkla att distribuera referensimplementeringar som hjälper dig att säkerställa en högkvalitativ startpunkt för dina AI-appar.

Arkitekturöversikt

En enkel arkitektur för chattappen visas i följande diagram:

Chattappen körs som en Azure Container App. Appen använder hanterad identitet via Microsoft Entra-ID för att autentisera med Azure OpenAI i stället för en API-nyckel. Chattappen använder Azure OpenAI för att generera svar på användarmeddelanden.

Programarkitekturen förlitar sig på följande tjänster och komponenter:

Azure OpenAI representerar DEN AI-provider som vi skickar användarens frågor till.
Azure Container Apps är den containermiljö där programmet finns.
Hanterad identitet hjälper oss att säkerställa förstklassig säkerhet och eliminerar kravet på att du som utvecklare ska hantera en hemlighet på ett säkert sätt.
Bicep-filer för etablering av Azure-resurser, inklusive Azure OpenAI, Azure Container Apps, Azure Container Registry, Azure Log Analytics och rollbaserade åtkomstkontrollroller (RBAC).
Microsoft AI Chat Protocol tillhandahåller standardiserade API-kontrakt mellan AI-lösningar och språk. Chattappen överensstämmer med Microsoft AI Chat Protocol.
En Python-kvart som använder openai paketet för att generera svar på användarmeddelanden med uppladdade bildfiler.
En grundläggande HTML-/JavaScript-klientdel som strömmar svar från serverdelen med hjälp av JSON-rader via en ReadableStream.

Kostnad

I ett försök att hålla priserna så låga som möjligt i det här exemplet använder de flesta resurser en prisnivå för grundläggande eller förbrukning. Ändra nivånivån efter behov baserat på din avsedda användning. Om du vill sluta debiteras tar du bort resurserna när du är klar med artikeln.

Läs mer om kostnaden i exempelrepo.

Förutsättningar

En utvecklingscontainermiljö är tillgänglig med alla beroenden som krävs för att slutföra den här artikeln. Du kan köra utvecklingscontainern i GitHub Codespaces (i en webbläsare) eller lokalt med hjälp av Visual Studio Code.

Om du vill använda den här artikeln måste du uppfylla följande krav:

GitHub Codespaces (rekommenderas)
Visual Studio Code

En Azure-prenumeration – Skapa en kostnadsfritt
Azure-kontobehörigheter – Ditt Azure-konto måste ha Microsoft.Authorization/roleAssignments/write behörigheter, till exempel administratör för användaråtkomst eller ägare.
GitHub-konto

Öppna utvecklingsmiljön

Använd följande instruktioner för att distribuera en förkonfigurerad utvecklingsmiljö som innehåller alla nödvändiga beroenden för att slutföra den här artikeln.

GitHub Codespaces (rekommenderas)
Visual Studio Code

GitHub Codespaces kör en utvecklingscontainer som hanteras av GitHub med Visual Studio Code för webben som användargränssnitt. För den enklaste utvecklingsmiljön använder du GitHub Codespaces så att du har rätt utvecklarverktyg och beroenden förinstallerade för att slutföra den här artikeln.

Viktigt!

Alla GitHub-konton kan använda Codespaces i upp till 60 timmar kostnadsfritt varje månad med 2 kärninstanser. Mer information finns i GitHub Codespaces månadsvis inkluderade lagrings- och kärntimmar.

Använd följande steg för att skapa ett nytt GitHub Codespace på grenen main av Azure-Samples/openai-chat-vision-quickstart GitHub-lagringsplatsen.

Högerklicka på följande knapp och välj Öppna länk i nytt fönster. Med den här åtgärden kan du ha utvecklingsmiljön och dokumentationen tillgänglig för granskning.
På sidan Skapa kodområde granskar du och väljer sedan Skapa nytt kodområde
Vänta tills kodområdet har startats. Den här startprocessen kan ta några minuter.
Logga in på Azure med Azure Developer CLI i terminalen längst ned på skärmen.
```
azd auth login
```
Kopiera koden från terminalen och klistra sedan in den i en webbläsare. Följ anvisningarna för att autentisera med ditt Azure-konto.

De återstående uppgifterna i den här artikeln sker i samband med den här utvecklingscontainern.

Dev Containers-tillägget för Visual Studio Code kräver att Docker installeras på den lokala datorn. Tillägget är värd för utvecklingscontainern lokalt med Docker-värden med rätt utvecklarverktyg och beroenden förinstallerade för att slutföra den här artikeln.

Skapa en ny lokal katalog på datorn för projektet.
```
mkdir my-chat-vision-app
```
Navigera till den katalog som du skapade.
```
cd my-chat-vision-app
```
Öppna Visual Studio Code i den katalogen:
```
code .
```
Öppna en ny terminal i Visual Studio Code.
Kör följande AZD-kommando för att ta GitHub-lagringsplatsen till din lokala dator.
```
azd init -t openai-chat-vision-quickstart
```
Öppna kommandopaletten, sök efter och välj Dev Containers: Öppna mapp i container för att öppna projektet i en utvecklingscontainer. Vänta tills utvecklingscontainern öppnas innan du fortsätter.
Logga in på Azure med Azure Developer CLI.
```
azd auth login
```
De återstående övningarna i det här projektet sker i samband med den här utvecklingscontainern.

Distribuera och köra

Exempellagringsplatsen innehåller alla kod- och konfigurationsfiler för chattappens Azure-distribution. Följande steg vägleder dig genom azure-distributionsprocessen för exempelchattappen.

Distribuera chattapp till Azure

Viktigt!

Azure-resurser som skapas i det här avsnittet medför omedelbara kostnader. Dessa resurser kan medföra kostnader även om du avbryter kommandot innan det körs fullständigt.

Kör följande Azure Developer CLI-kommando för Azure-resursetablering och källkodsdistribution:
```
azd up
```

Använd följande tabell för att besvara anvisningarna:

Prompt	Svar
Miljönamn	Håll den kort och gemen. Lägg till ditt namn eller alias. Exempel: `chat-vision` Den används som en del av resursgruppens namn.
Prenumeration	Välj den prenumeration som resurserna ska skapas i.
Plats (för värd)	Välj en plats nära dig i listan.
Plats för Azure OpenAI-modellen	Välj en plats nära dig i listan. Om samma plats är tillgänglig som din första plats väljer du det.

Vänta tills appen har distribuerats. Distributionen tar vanligtvis mellan 5 och 10 minuter att slutföra.

Använd chattappen för att ställa frågor till modellen för stora språk

Terminalen visar en URL efter en lyckad programdistribution.
Välj den URL:en som är märkt Deploying service web för att öppna chattprogrammet i en webbläsare.
Ladda upp en bild i webbläsaren genom att klicka på Välj fil och välja en bild.
Ställ en fråga om den uppladdade bilden, till exempel "Vad handlar bilden om?".
Svaret kommer från Azure OpenAI och resultatet visas.

Utforska exempelkoden

OpenAI och Azure OpenAI Service är beroende av ett vanligt Python-klientbibliotek, men små kodändringar krävs när du använder Azure OpenAI-slutpunkter. I det här exemplet används en multimodal Azure OpenAI-modell för att generera svar på användarmeddelanden och uppladdade bilder.

Base64 Koda den uppladdade bilden i klientdelen

Den uppladdade bilden måste vara Base64-kodad så att den kan användas direkt som en data-URI som en del av meddelandet.

I exemplet hanterar följande kodfragment i klientdelen i taggen scriptför filen den src/quartapp/templates/index.html funktionen. Pilfunktionen toBase64 använder readAsDataURL metodenFileReader för att asynkront läsa i den uppladdade bildfilen som en base64-kodad sträng.

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

Funktionen toBase64 anropas av en lyssnare på formulärets submit händelse. När händelsen submit utlöses söker lyssnaren efter en bildfil och hanterar den om den finns i Base64 som kodar avbildningen toBase64 med hjälp av funktionen. Den nya url:en för bilddata, fileData, läggs sedan till i meddelandet.

    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);

Hantera bilden med serverdelen

src\quartapp\chat.py I filen startar serverdelskoden för bildhantering efter att nyckellös autentisering har konfigurerats.

Kommentar

Mer information om hur du använder nyckellösa anslutningar för autentisering och auktorisering till Azure OpenAI finns i artikeln Kom igång med Azure OpenAI-säkerhetsbyggblocket Microsoft Learn.

Funktionen Chatthanterare

Funktionen chat_handler() väntar på inkommande JSON-begärandedata från chat/stream slutpunkten och bearbetar dem sedan. Meddelandena extraheras sedan från JSON-data. Slutligen hämtas den base64-kodade avbildningen från JSON-data.

@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"]

Svarsström med hjälp av OpenAI-klienten och modellen

Inuti response_stream chat_handler funktionen hanterar chattens slutförandeanrop i vägen. Följande kodfragment börjar med att förbearbeta användarinnehållsmeddelandena. Om en bild finns läggs bild-URL:en till i användarinnehållet, med

    @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])

Kommentar

Mer information om bildparametern detail och relaterade inställningar finns i avsnittet Detaljparameterinställningar i bildbearbetning: Låg, Hög, Automatisk i artikeln "Använd GPT-4 Turbo med vision".

bp.openai_client.chat.completions Därefter hämtar du chattavslut via ett Azure OpenAI API-anrop och strömmar svaret.

        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),
        )

Slutligen strömmas svaret tillbaka till klienten, med felhantering för eventuella undantag.

        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())

Andra exempelresurser att utforska

Förutom chattappexemplet finns det andra resurser på lagringsplatsen att utforska för vidare utbildning. Kolla in följande notebook-filer i notebooks katalogen:

Notebook-fil	beskrivning
chat_pdf_images.ipynb	Den här notebook-filen visar hur du konverterar PDF-sidor till bilder och skickar dem till en visionsmodell för slutsatsdragning.
chat_vision.ipynb	Den här notebook-filen tillhandahålls för manuell experimentering med den visionsmodell som används i appen.

Rensa resurser

Rensa Azure-resurser

De Azure-resurser som skapas i den här artikeln faktureras till din Azure-prenumeration. Om du inte förväntar dig att behöva dessa resurser i framtiden tar du bort dem för att undvika att debiteras mer.

Om du vill ta bort Azure-resurserna och ta bort källkoden kör du följande Azure Developer CLI-kommando:

azd down --purge

Om du tar bort GitHub Codespaces-miljön kan du maximera mängden kostnadsfria timmar per kärna som du får för ditt konto.

Viktigt!

Mer information om ditt GitHub-kontos rättigheter finns i GitHub Codespaces månadsvis inkluderade lagrings- och kärntimmar.

Logga in på GitHub Codespaces-instrumentpanelen (https://github.com/codespaces).
Leta upp de codespaces som körs från Azure-Samples//openai-chat-vision-quickstart GitHub-lagringsplatsen.
Öppna snabbmenyn för kodområdet och välj Ta bort.

Få hjälp

Logga problemet till lagringsplatsens problem.

Nästa steg

Kom igång med chatten med ditt eget dataexempel för Python

Dela via

Kom igång med chattappar för multimodal vision med Hjälp av Azure OpenAI

Arkitekturöversikt

Kostnad

Förutsättningar

Öppna utvecklingsmiljön

Distribuera och köra

Distribuera chattapp till Azure

Använd chattappen för att ställa frågor till modellen för stora språk

Utforska exempelkoden

Base64 Koda den uppladdade bilden i klientdelen

Hantera bilden med serverdelen

Funktionen Chatthanterare

Svarsström med hjälp av OpenAI-klienten och modellen

Andra exempelresurser att utforska

Rensa resurser

Rensa Azure-resurser

Rensa GitHub Codespaces

Få hjälp

Nästa steg

Feedback

Ytterligare resurser