Začínáme s multimodálními chatovacími aplikacemi pomocí Azure OpenAI
V tomto článku se dozvíte, jak pomocí multimodálních modelů Azure OpenAI generovat odpovědi na zprávy uživatelů a nahrané obrázky v chatovací aplikaci. Tato ukázka chatovací aplikace zahrnuje také veškerou infrastrukturu a konfiguraci potřebnou ke zřízení prostředků Azure OpenAI a nasazení aplikace do Azure Container Apps pomocí Azure Developer CLI.
Postupujte podle pokynů v tomto článku:
- Nasaďte chatovací aplikaci Azure Container, která k ověřování používá spravovanou identitu.
- Nahrajte obrázky, které se použijí jako součást streamu chatu.
- Chatujte s multimodálním velkým jazykovým modelem Azure OpenAI (LLM) pomocí knihovny OpenAI.
Po dokončení tohoto článku můžete začít upravovat nový projekt pomocí vlastního kódu.
Poznámka:
Tento článek používá jednu nebo více šablon aplikací AI jako základ pro příklady a pokyny v tomto článku. Šablony aplikací AI poskytují dobře udržované a snadno použitelné referenční implementace, které pomáhají zajistit vysoce kvalitní výchozí bod pro vaše aplikace AI.
Přehled architektury
Jednoduchá architektura chatovací aplikace je znázorněná v následujícím diagramu: 
Chatovací aplikace běží jako aplikace kontejneru Azure. Aplikace používá spravovanou identitu prostřednictvím ID Microsoft Entra k ověření pomocí Azure OpenAI místo klíče rozhraní API. Chatovací aplikace používá Azure OpenAI k vygenerování odpovědí na zprávy uživatelů.
Architektura aplikace spoléhá na následující služby a komponenty:
- Azure OpenAI představuje poskytovatele AI, kterému posíláme dotazy uživatele.
- Azure Container Apps je prostředí kontejneru, ve kterém je aplikace hostovaná.
- Spravovaná identita nám pomáhá zajistit zabezpečení na nejvyšší úrovni a eliminuje požadavek, aby vy jako vývojář bezpečně spravoval tajný klíč.
- Soubory Bicep pro zřizování prostředků Azure, včetně rolí řízení přístupu na základě role (RBAC) Azure OpenAI, Azure Container Apps, Azure Container Registry, Azure Log Analytics a řízení přístupu na základě role (RBAC).
- Protokol Microsoft AI Chat Protocol poskytuje standardizované kontrakty rozhraní API napříč řešeními a jazyky AI. Chatovací aplikace odpovídá protokolu Microsoft AI Chat Protocol.
- Python Quart , který používá
openaibalíček k vygenerování odpovědí na zprávy uživatelů s nahranými soubory obrázků. - Základní front-end HTML/JavaScript, který streamuje odpovědi z back-endu pomocí řádků JSON přes readableStream.
Náklady
Při pokusu o co nejnižší ceny v této ukázce používá většina prostředků cenovou úroveň Basic nebo Consumption. Podle potřeby upravte úroveň úrovně na základě zamýšleného využití. Pokud chcete přestat účtovat poplatky, odstraňte prostředky, až budete s článkem hotovi.
Přečtěte si další informace o nákladech v ukázkovém úložišti.
Požadavky
Vývojové prostředí kontejneru je k dispozici se všemi závislostmi potřebnými k dokončení tohoto článku. Vývojový kontejner můžete spustit v GitHub Codespaces (v prohlížeči) nebo místně pomocí editoru Visual Studio Code.
Pokud chcete tento článek použít, musíte splnit následující požadavky:
Předplatné Azure – Vytvoření předplatného zdarma
Oprávnění účtu Azure – Váš účet Azure musí mít
Microsoft.Authorization/roleAssignments/writeoprávnění, jako je správce uživatelských přístupů nebo vlastník.Účet GitHub
Otevřené vývojové prostředí
Podle následujících pokynů nasaďte předkonfigurované vývojové prostředí obsahující všechny požadované závislosti pro dokončení tohoto článku.
GitHub Codespaces spouští vývojový kontejner spravovaný GitHubem pomocí editoru Visual Studio Code pro web jako uživatelského rozhraní. Pro nejjednodušší vývojové prostředí použijte GitHub Codespaces, abyste měli předinstalované správné vývojářské nástroje a závislosti k dokončení tohoto článku.
Důležité
Všechny účty GitHubu můžou každý měsíc používat Codespaces až 60 hodin zdarma se 2 jádrovými instancemi. Další informace najdete v tématu GitHub Codespaces měsíčně zahrnuté úložiště a hodiny jádra.
Pomocí následujícího postupu vytvořte nový GitHub Codespace ve main větvi Azure-Samples/openai-chat-vision-quickstart úložiště GitHub.
Klikněte pravým tlačítkem myši na následující tlačítko a vyberte Otevřít odkaz v novém okně. Tato akce umožňuje mít vývojové prostředí a dokumentaci k dispozici ke kontrole.
Na stránce Create codespace (Vytvořit kódový prostor) zkontrolujte a pak vyberte Create new codespace (Vytvořit nový prostor kódu).
Počkejte, až se prostor kódu spustí. Tento proces spuštění může trvat několik minut.
Přihlaste se k Azure pomocí Azure Developer CLI v terminálu v dolní části obrazovky.
azd auth loginZkopírujte kód z terminálu a vložte ho do prohlížeče. Postupujte podle pokynů k ověření pomocí účtu Azure.
Zbývající úlohy v tomto článku probíhají v kontextu tohoto vývojového kontejneru.
Nasazení a spuštění
Ukázkové úložiště obsahuje veškerý kód a konfigurační soubory pro nasazení chatovací aplikace Azure. Následující kroky vás provedou procesem nasazení ukázkové chatovací aplikace Azure.
Nasazení chatovací aplikace do Azure
Důležité
Prostředky Azure vytvořené v této části účtují okamžité náklady. Tyto prostředky můžou nabíhání nákladů i v případě, že příkaz přerušíte před jeho úplným spuštěním.
Spusťte následující příkaz Azure Developer CLI pro zřizování prostředků Azure a nasazení zdrojového kódu:
azd upPomocí následující tabulky odpovězte na výzvy:
Instrukce Odpověď Název prostředí Nechte ho krátkým a malými písmeny. Přidejte svoje jméno nebo alias. Například chat-vision. Používá se jako součást názvu skupiny prostředků.Předplatné Vyberte předplatné, ve které chcete prostředky vytvořit. Umístění (pro hostování) V seznamu vyberte umístění blízko vás. Umístění modelu Azure OpenAI V seznamu vyberte umístění blízko vás. Pokud je stejné umístění dostupné jako vaše první umístění, vyberte ho. Počkejte, až se aplikace nasadí. Dokončení nasazení obvykle trvá 5 až 10 minut.
Použití chatovací aplikace k kladení otázek do velkého jazykového modelu
V terminálu se po úspěšném nasazení aplikace zobrazí adresa URL.
Výběrem této adresy URL otevřete
Deploying service webchatovací aplikaci v prohlížeči.
V prohlížeči nahrajte obrázek kliknutím na Zvolit soubor a výběrem obrázku.
Položte otázku týkající se nahraného obrázku, například "O čem je obrázek?".
Odpověď pochází z Azure OpenAI a výsledek se zobrazí.
Prozkoumání ukázkového kódu
I když služba OpenAI a Azure OpenAI využívají společnou klientskou knihovnu Pythonu, při používání koncových bodů Azure OpenAI se vyžadují malé změny kódu. Tato ukázka používá multimodální model Azure OpenAI ke generování odpovědí na uživatelské zprávy a nahrané obrázky.
Kódování Base64 nahraného obrázku v front-endu
Nahraný obrázek musí být kódovaný v Base64, aby ho bylo možné použít přímo jako identifikátor URI dat jako součást zprávy.
V ukázce následující fragment kódu front-endu scriptve značce src/quartapp/templates/index.html souboru zpracovává tyto funkce. Funkce toBase64 šipky používá readAsDataURL metoduFileReader asynchronního čtení v nahraném souboru obrázku jako řetězec kódovaný v base64.
const toBase64 = file => new Promise((resolve, reject) => {
const reader = new FileReader();
reader.readAsDataURL(file);
reader.onload = () => resolve(reader.result);
reader.onerror = reject;
});
Funkce toBase64 je volána naslouchacím procesem v události formuláře submit . Když se submit událost aktivuje, naslouchací proces zkontroluje soubor obrázku a zpracuje ho, pokud je k dispozici kódováním Base64 pomocí toBase64 funkce. Nová adresa URL fileDatadat obrázku se pak připojí ke zprávě.
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);
Zpracování image pomocí back-endu
src\quartapp\chat.py V souboru se spustí back-endový kód pro zpracování obrázků po konfiguraci ověřování bez klíčů.
Poznámka:
Další informace o používání bezklíčových připojení k ověřování a autorizaci k Azure OpenAI najdete v článku Začínáme se stavebním blokem zabezpečení Azure OpenAI v Microsoft Learn.
Funkce obslužné rutiny chatu
Funkce chat_handler() čeká na příchozí data JSON požadavku z koncového chat/stream bodu a pak je zpracuje. Zprávy se pak extrahují z dat JSON. Nakonec se z dat JSON načte zakódovaný obrázek base64.
@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"]
Stream odpovědí s využitím klienta OpenAI a modelu
Vnitřní response_stream chat_handler funkce zpracovává volání dokončení chatu v trase. Následující fragment kódu začíná předzpracováním zpráv uživatelského obsahu. Pokud je obrázek k dispozici, adresa URL obrázku se připojí k obsahu uživatele pomocí
@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])
Poznámka:
Další informace o parametru obrázku detail a souvisejících nastaveních najdete v tématu Použití GPT-4 Turbo s obrazem v článku "Použití GPT-4 Turbo s obrazem" v nastavení podrobností o zpracování obrázků: Nízká, Vysoká, Auto .
bp.openai_client.chat.completions V dalším kroku získá dokončení chatu prostřednictvím volání rozhraní API Azure OpenAI a streamuje odpověď.
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),
)
Odpověď se nakonec streamuje zpět do klienta s případnými výjimkami.
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())
Další ukázkové zdroje informací k prozkoumání
Kromě ukázky chatovací aplikace jsou v úložišti k dispozici i další zdroje informací, které je potřeba prozkoumat. Podívejte se na notebooks následující poznámkové bloky v adresáři:
| Poznámkový blok | Popis |
|---|---|
| chat_pdf_images.ipynb | Tento poznámkový blok ukazuje, jak převést stránky PDF na obrázky a odeslat je do modelu zpracování obrazu pro odvozování. |
| chat_vision.ipynb | Tento poznámkový blok je k dispozici pro ruční experimentování s modelem zpracování obrazu používaným v aplikaci. |
Vyčištění prostředků
Vyčištění prostředků Azure
Prostředky Azure vytvořené v tomto článku se fakturují k vašemu předplatnému Azure. Pokud v budoucnu tyto prostředky nepotřebujete, odstraňte je, abyste se vyhnuli účtování dalších poplatků.
Pokud chcete odstranit prostředky Azure a odebrat zdrojový kód, spusťte následující příkaz Azure Developer CLI:
azd down --purge
Vyčištění služby GitHub Codespaces
Odstraněním prostředí GitHub Codespaces zajistíte, že můžete maximalizovat nárok na počet bezplatných hodin za jádro, které získáte pro svůj účet.
Důležité
Další informace o oprávněních účtu GitHub najdete v tématu GitHub Codespaces měsíčně zahrnuté hodiny úložiště a jádra.
Přihlaste se k řídicímu panelu GitHub Codespaces (https://github.com/codespaces).
Vyhledejte aktuálně spuštěné Codespaces zdrojové z
Azure-Samples//openai-chat-vision-quickstartúložiště GitHub.Otevřete místní nabídku pro codespace a vyberte Odstranit.
Získání pomoci
Zapište svůj problém do problémů úložiště.