Wprowadzenie do wielomodalnych aplikacji do czatów wizyjnych przy użyciu usługi Azure OpenAI
W tym artykule pokazano, jak używać modeli wielomodalnych usługi Azure OpenAI do generowania odpowiedzi na wiadomości użytkowników i przekazywania obrazów w aplikacji do czatu. Ten przykład aplikacji do czatów zawiera również całą infrastrukturę i konfigurację wymaganą do aprowizacji zasobów usługi Azure OpenAI oraz wdrażania aplikacji w usłudze Azure Container Apps przy użyciu interfejsu wiersza polecenia dla deweloperów platformy Azure.
Postępując zgodnie z instrukcjami w tym artykule, wykonasz następujące czynności:
- Wdróż aplikację czatu kontenera platformy Azure, która używa tożsamości zarządzanej do uwierzytelniania.
- Przekazywanie obrazów do użycia w ramach strumienia czatu.
- Porozmawiaj z wielomodalnym modelem języka wielomodalnego platformy Azure OpenAI (LLM) przy użyciu biblioteki OpenAI.
Po ukończeniu tego artykułu możesz rozpocząć modyfikowanie nowego projektu przy użyciu kodu niestandardowego.
Uwaga
W tym artykule użyto co najmniej jednego szablonu aplikacji sztucznej inteligencji jako podstawy przykładów i wskazówek w artykule. Szablony aplikacji sztucznej inteligencji zapewniają dobrze utrzymywane, łatwe w wdrażaniu implementacje referencyjne, które pomagają zapewnić wysokiej jakości punkt wyjścia dla aplikacji sztucznej inteligencji.
Omówienie architektury
Prosta architektura aplikacji do czatu jest pokazana na poniższym diagramie: 
Aplikacja do czatu działa jako aplikacja kontenera platformy Azure. Aplikacja używa tożsamości zarządzanej za pośrednictwem identyfikatora Entra firmy Microsoft do uwierzytelniania za pomocą usługi Azure OpenAI zamiast klucza interfejsu API. Aplikacja do czatu używa usługi Azure OpenAI do generowania odpowiedzi na komunikaty użytkowników.
Architektura aplikacji opiera się na następujących usługach i składnikach:
- Usługa Azure OpenAI reprezentuje dostawcę sztucznej inteligencji, do którego wysyłamy zapytania użytkownika.
- Usługa Azure Container Apps to środowisko kontenera, w którym jest hostowana aplikacja.
- Tożsamość zarządzana pomaga nam zapewnić najlepsze zabezpieczenia w klasie i wyeliminować wymaganie, aby jako deweloper bezpiecznie zarządzać wpisem tajnym.
- Pliki Bicep do aprowizowania zasobów platformy Azure, w tym azure OpenAI, Azure Container Apps, Azure Container Registry, Azure Log Analytics i ról kontroli dostępu (RBAC).
- Protokół Microsoft AI Chat Protocol udostępnia standardowe kontrakty interfejsu API w rozwiązaniach i językach sztucznej inteligencji. Aplikacja do czatu jest zgodna z protokołem Microsoft AI Chat Protocol.
- Kwart języka Python, który używa
openaipakietu do generowania odpowiedzi na komunikaty użytkowników z przekazanymi plikami obrazów. - Podstawowy fronton HTML/JavaScript, który przesyła strumieniowo odpowiedzi z zaplecza przy użyciu linii JSON za pośrednictwem elementu ReadableStream.
Koszt
Próbując zachować możliwie niskie ceny w tym przykładzie, większość zasobów korzysta z warstwy cenowej podstawowa lub zużycie. Zmień poziom warstwy zgodnie z potrzebami na podstawie zamierzonego użycia. Aby zatrzymać naliczanie opłat, usuń zasoby po zakończeniu pracy z artykułem.
Dowiedz się więcej o kosztach w repozytorium przykładowym.
Wymagania wstępne
Środowisko kontenera deweloperskiego jest dostępne ze wszystkimi zależnościami wymaganymi do ukończenia tego artykułu. Kontener deweloperski można uruchomić w usłudze GitHub Codespaces (w przeglądarce) lub lokalnie przy użyciu programu Visual Studio Code.
Aby użyć tego artykułu, należy spełnić następujące wymagania wstępne:
Subskrypcja platformy Azure — utwórz bezpłatnie
Uprawnienia konta platformy Azure — Twoje konto platformy Azure musi mieć
Microsoft.Authorization/roleAssignments/writeuprawnienia, takie jak administrator dostępu użytkowników lub właściciel.Konto usługi GitHub
Otwieranie środowiska projektowego
Skorzystaj z poniższych instrukcji, aby wdrożyć wstępnie skonfigurowane środowisko programistyczne zawierające wszystkie wymagane zależności, aby ukończyć ten artykuł.
Usługa GitHub Codespaces uruchamia kontener deweloperski zarządzany przez usługę GitHub za pomocą programu Visual Studio Code dla sieci Web jako interfejsu użytkownika. W przypadku najprostszego środowiska programistycznego użyj usługi GitHub Codespaces, aby wstępnie zainstalować odpowiednie narzędzia deweloperskie i zależności, aby ukończyć ten artykuł.
Ważne
Wszystkie konta usługi GitHub mogą korzystać z usługi Codespaces przez maksymalnie 60 godzin bezpłatnych każdego miesiąca z 2 podstawowymi wystąpieniami. Aby uzyskać więcej informacji, zobacz GitHub Codespaces monthly included storage and core hours (Miesięczne miejsca do magazynowania i godzin rdzeni usługi GitHub Codespaces).
Wykonaj poniższe kroki, aby utworzyć nową usługę GitHub Codespace w main gałęzi Azure-Samples/openai-chat-vision-quickstart repozytorium GitHub.
Kliknij prawym przyciskiem myszy poniższy przycisk i wybierz polecenie Otwórz link w nowym oknie. Ta akcja umożliwia zapoznanie się ze środowiskiem deweloperów i dokumentacją.
Na stronie Tworzenie przestrzeni kodu przejrzyj, a następnie wybierz pozycję Utwórz nową przestrzeń kodu
Poczekaj na uruchomienie przestrzeni kodu. Ten proces uruchamiania może potrwać kilka minut.
Zaloguj się na platformie Azure przy użyciu interfejsu wiersza polecenia dla deweloperów platformy Azure w terminalu w dolnej części ekranu.
azd auth loginSkopiuj kod z terminalu, a następnie wklej go w przeglądarce. Postępuj zgodnie z instrukcjami, aby uwierzytelnić się przy użyciu konta platformy Azure.
Pozostałe zadania w tym artykule mają miejsce w kontekście tego kontenera deweloperskiego.
Wdrażanie i uruchamianie
Przykładowe repozytorium zawiera wszystkie pliki kodu i konfiguracji dla wdrożenia aplikacji czatu na platformie Azure. W poniższych krokach przedstawiono przykładowy proces wdrażania aplikacji czatu platformy Azure.
Wdrażanie aplikacji czatu na platformie Azure
Ważne
Zasoby platformy Azure utworzone w tej sekcji generują natychmiastowe koszty. Te zasoby mogą naliczać koszty nawet w przypadku przerwania działania polecenia przed jego pełnym wykonaniem.
Uruchom następujące polecenie interfejsu wiersza polecenia dla deweloperów platformy Azure na potrzeby aprowizacji zasobów platformy Azure i wdrożenia kodu źródłowego:
azd upUżyj poniższej tabeli, aby odpowiedzieć na monity:
Monit Odpowiedź Nazwa środowiska Zachowaj krótkie i małe litery. Dodaj swoją nazwę lub alias. Na przykład chat-vision. Jest ona używana jako część nazwy grupy zasobów.Subskrypcja Wybierz subskrypcję, w ramach których chcesz utworzyć zasoby. Lokalizacja (na potrzeby hostingu) Wybierz lokalizację w pobliżu z listy. Lokalizacja modelu Azure OpenAI Wybierz lokalizację w pobliżu z listy. Jeśli ta sama lokalizacja jest dostępna jako pierwsza lokalizacja, wybierz tę lokalizację. Poczekaj na wdrożenie aplikacji. Wdrożenie zwykle trwa od 5 do 10 minut.
Używanie aplikacji do czatu w celu zadawania pytań do modelu dużego języka
W terminalu zostanie wyświetlony adres URL po pomyślnym wdrożeniu aplikacji.
Wybierz ten adres URL oznaczony
Deploying service webetykietą, aby otworzyć aplikację czatu w przeglądarce.
W przeglądarce przekaż obraz, klikając pozycję Wybierz plik i wybierając obraz.
Zadaj pytanie dotyczące przekazanego obrazu, takiego jak "Co to jest obraz?".
Odpowiedź pochodzi z usługi Azure OpenAI i zostanie wyświetlony wynik.
Eksplorowanie przykładowego kodu
Chociaż interfejsy OpenAI i Azure OpenAI Service opierają się na wspólnej bibliotece klienta języka Python, podczas korzystania z punktów końcowych usługi Azure OpenAI potrzebne są niewielkie zmiany kodu. W tym przykładzie użyto wielomodalnego modelu usługi Azure OpenAI do generowania odpowiedzi na komunikaty użytkowników i przekazanych obrazów.
Base64 Kodowanie przekazanego obrazu w frontonie
Przekazany obraz musi być zakodowany w formacie Base64, aby mógł być używany bezpośrednio jako identyfikator URI danych w ramach komunikatu.
W przykładzie poniższy fragment kodu frontonu w scripttagu src/quartapp/templates/index.html pliku obsługuje te funkcje. Funkcja toBase64 arrow używa readAsDataURL metody ,FileReader aby asynchronicznie odczytywać w przekazanym pliku obrazu jako ciąg zakodowany w formacie base64.
const toBase64 = file => new Promise((resolve, reject) => {
const reader = new FileReader();
reader.readAsDataURL(file);
reader.onload = () => resolve(reader.result);
reader.onerror = reject;
});
Funkcja toBase64 jest wywoływana przez odbiornik zdarzenia formularza submit . submit Gdy zdarzenie jest uruchamiane, odbiornik sprawdza plik obrazu i obsługuje go, jeśli jest obecny przez kodowanie obrazu base64 przy użyciu toBase64 funkcji . Nowy adres URL danych obrazu , fileDatajest następnie dołączany do wiadomości.
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);
Obsługa obrazu za pomocą zaplecza
W pliku kod zaplecza do obsługi obrazów rozpoczyna się po skonfigurowaniu src\quartapp\chat.py uwierzytelniania bez klucza.
Uwaga
Aby uzyskać więcej informacji na temat używania połączeń bez kluczy do uwierzytelniania i autoryzacji w usłudze Azure OpenAI, zapoznaj się z artykułem Rozpoczynanie pracy z blokiem konstrukcyjnym zabezpieczeń usługi Azure OpenAI w usłudze Microsoft Learn.
Funkcja obsługi czatów
Funkcja chat_handler() czeka na dane JSON żądania przychodzącego z punktu końcowego chat/stream , a następnie przetwarza je. Komunikaty są następnie wyodrębniane z danych JSON. Na koniec obraz zakodowany w formacie base64 jest pobierany z danych JSON.
@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"]
Strumień odpowiedzi przy użyciu klienta i modelu OpenAI
chat_handler Wewnątrz response_stream funkcji obsługuje wywołanie ukończenia czatu w trasie. Poniższy fragment kodu rozpoczyna się od wstępnego przetwarzania komunikatów zawartości użytkownika. Jeśli obraz jest obecny, adres URL obrazu jest dołączany do zawartości użytkownika z
@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])
Uwaga
Aby uzyskać więcej informacji na temat parametru obrazu detail i powiązanych ustawień, zapoznaj się z sekcją Szczegóły parametrów przetwarzania obrazów: Niska, Wysoka, Automatyczna w artykule "Korzystanie z GPT-4 Turbo z obrazem" Microsoft Learn.
bp.openai_client.chat.completions Następnie uzyskuje ukończenie czatu za pośrednictwem wywołania interfejsu API usługi Azure OpenAI i przesyła strumieniowo odpowiedź.
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),
)
Na koniec odpowiedź jest przesyłana strumieniowo do klienta z obsługą błędów dla wszystkich wyjątków.
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())
Inne przykładowe zasoby do eksplorowania
Oprócz przykładowej aplikacji do czatu istnieją inne zasoby w repozytorium, które można eksplorować, aby dowiedzieć się więcej. Zapoznaj się z następującymi notesami w notebooks katalogu:
| Notes | opis |
|---|---|
| chat_pdf_images.ipynb | W tym notesie pokazano, jak przekonwertować strony PDF na obrazy i wysłać je do modelu przetwarzania obrazów w celu wnioskowania. |
| chat_vision.ipynb | Ten notes jest dostarczany do ręcznego eksperymentowania z modelem przetwarzania obrazów używanym w aplikacji. |
Czyszczenie zasobów
Czyszczenie zasobów platformy Azure
Zasoby platformy Azure utworzone w tym artykule są rozliczane z subskrypcją platformy Azure. Jeśli nie spodziewasz się, że te zasoby będą potrzebne w przyszłości, usuń je, aby uniknąć naliczania dodatkowych opłat.
Aby usunąć zasoby platformy Azure i usunąć kod źródłowy, uruchom następujące polecenie interfejsu wiersza polecenia dla deweloperów platformy Azure:
azd down --purge
Czyszczenie usługi GitHub Codespaces
Usunięcie środowiska Usługi GitHub Codespaces gwarantuje, że możesz zmaksymalizować ilość bezpłatnych godzin na godziny korzystania z konta.
Ważne
Aby uzyskać więcej informacji na temat uprawnień konta usługi GitHub, zobacz Artykuł GitHub Codespaces monthly included storage and core hours (Miesięczne miejsca do magazynowania i godzin rdzeni w usłudze GitHub).
Zaloguj się do pulpitu nawigacyjnego usługi GitHub Codespaces (https://github.com/codespaces).
Znajdź aktualnie uruchomione środowisko Codespaces pochodzące z
Azure-Samples//openai-chat-vision-quickstartrepozytorium GitHub.Otwórz menu kontekstowe dla przestrzeni kodu i wybierz pozycję Usuń.
Uzyskaj pomoc
Zarejestruj problem w problemach repozytorium.