使用 Azure OpenAI 開始使用多模式視覺聊天應用程式

發行項
10/30/2024

本文說明如何使用 Azure OpenAI 多模式模型，在聊天應用程式中產生使用者訊息和上傳影像的回應。此聊天應用程式範例也包含布建 Azure OpenAI 資源所需的所有基礎結構和設定，以及使用 Azure 開發人員 CLI 將應用程式部署至 Azure Container Apps。

遵循本文中的指示，您將會：

部署使用受控識別進行驗證的 Azure 容器聊天應用程式。
上傳要作為聊天串流一部分使用的影像。
使用 OpenAI 連結庫與 Azure OpenAI 多模式大型語言模型（LLM）聊天。

完成本文之後，您可以使用自定義程式代碼開始修改新專案。

注意

本文使用一或多個 AI 應用程式範本作為本文範例和指引的基礎。 AI 應用程式範本提供您妥善維護且易於部署的參考實作，以協助確保 AI 應用程式的高品質起點。

架構概觀

下列圖表顯示聊天應用程式的簡單架構：

聊天應用程式是以 Azure 容器應用程式的形式執行。應用程式會透過 Microsoft Entra ID 使用受控識別，向 Azure OpenAI 進行驗證，而不是 API 金鑰。聊天應用程式會使用 Azure OpenAI 來產生使用者訊息的回應。

應用程式架構依賴下列服務和元件：

Azure OpenAI 代表我們傳送用戶查詢的 AI 提供者。
Azure Container Apps 是裝載應用程式的容器環境。
受控識別可協助我們確保頂級安全性，並免除身為開發人員安全地管理秘密的需求。
布建 Azure 資源的 Bicep 檔案，包括 Azure OpenAI、Azure Container Apps、Azure Container Registry、Azure Log Analytics 和角色型訪問控制（RBAC）角色。
Microsoft AI 聊天通訊協定提供跨 AI 解決方案和語言的標準化 API 合約。聊天應用程式符合Microsoft AI 聊天通訊協定。
Python Quart ，使用 openai 套件來產生具有上傳圖像檔的使用者訊息回應。
基本 HTML/JavaScript 前端，可透過 ReadableStream 使用 JSON Line 串流來自後端的回應。

成本

嘗試讓此範例中的定價盡可能低，大部分的資源都會使用基本或耗用量定價層。根據您的預期使用量，視需要改變階層層級。若要停止產生費用，請在完成本文時刪除資源。

深入瞭解範例存放庫中的成本。

必要條件

開發容器環境可提供完成本文所需的所有相依性。您可以在 GitHub Codespaces (瀏覽器中) 或使用 Visual Studio Code 在本機執行開發容器。

若要使用本文，您必須滿足下列必要條件：

GitHub Codespaces (建議)
Visual Studio Code

Azure 訂用帳戶 - 免費建立一個訂用帳戶
Azure 帳戶許可權 - 您的 Azure 帳戶必須具有 Microsoft.Authorization/roleAssignments/write 許可權，例如使用者存取系統管理員或擁有者。
GitHub 帳戶

開啟開發環境

使用下列指示來部署預先設定的開發環境，其中包含完成本文所需的所有相依性。

GitHub Codespaces (建議)
Visual Studio Code

GitHub Codespaces 會使用網頁版 Visual Studio Code 作爲使用者介面，執行由 GitHub 管理的開發容器。如需最直接的開發環境，請使用 GitHub Codespaces，使得您有已預先安裝的正確開發人員工具和相依性，以便完成本文。

重要

所有 GitHub 帳戶每個月最多可以使用 Codespaces 60 小時，且有 2 個核心執行個體。如需詳細資訊，請參閱 GitHub Codespaces 每月包含的儲存體和核心時數。

使用下列步驟，在 GitHub 存放庫的Azure-Samples/openai-chat-vision-quickstart分支上main建立新的 GitHub Codespace。

以滑鼠右鍵按下列按鈕，然後選取新視窗中的 [開啟連結]。此動作可讓您擁有開發環境和可供檢閱的檔。
在 [ 建立代碼空間] 頁面上，檢閱然後選取 [ 建立新的程式代碼空間]
等候 Codespace 開始。此啟動程序可能需要幾分鐘的時間。
使用畫面底部終端機中的 Azure 開發人員 CLI 登入 Azure。
```
azd auth login
```
從終端機複製程式碼，然後將它貼到瀏覽器中。遵循指示使用 Azure 帳戶進行驗證。

本文中的其餘工作會在此開發容器的內容中進行。

適用於 Visual Studio Code 的開發容器延伸模組需要將 Docker安裝在本機電腦上。延伸模組會使用具有預先安裝的正確開發人員工具和相依性的 Docker 主機在本機裝載開發容器，來完成本文。

在您的電腦上為專案建立新的本機目錄。
```
mkdir my-chat-vision-app
```
流覽至您建立的目錄。
```
cd my-chat-vision-app
```
在該目錄中開啟 Visual Studio Code:
```
code .
```
在 Visual Studio Code 中開啟新的終端機。
執行下列 AZD 命令，將 GitHub 存放庫帶入本機電腦。
```
azd init -t openai-chat-vision-quickstart
```
開啟命令選擇區，搜尋並選取 [開發容器：在容器 中開啟資料夾]，以在開發容器中開啟專案。等到開發容器開啟，再繼續進行。
使用 Azure Developer CLI 登入 Azure。
```
azd auth login
```
此專案中的其餘練習會在此開發容器的內容中進行。

部署和執行

範例存放庫包含聊天應用程式 Azure 部署的所有程式代碼和組態檔。下列步驟會逐步引導您完成範例聊天應用程式 Azure 部署程式。

部署聊天應用程式至 Azure

重要

本節中建立的 Azure 資源會產生立即成本。即使您在命令完整執行之前中斷命令，這些資源仍可能會產生成本。

針對 Azure 資源布建和原始程式碼部署執行下列 Azure 開發人員 CLI 命令：
```
azd up
```

使用下表回答提示：

提示	回答
環境名稱	保持簡短和小寫。新增您的名稱或別名。例如： `chat-vision` 。它用來作為資源組名的一部分。
訂用帳戶	選取要在其中建立資源的訂用帳戶。
位置（用於載入）	從清單中選取您附近的位置。
Azure OpenAI 模型的位置	從清單中選取您附近的位置。如果有與您的第一個位置相同的位置，請選取該位置。

等候應用程式部署。部署通常需要 5 到 10 分鐘才能完成。

使用聊天應用程式向大型語言模型詢問問題

終端機會在應用程式部署成功之後顯示 URL。
選取標示為 Deploying service web 的 URL，以在瀏覽器中開啟聊天應用程式。
在瀏覽器中，按兩下 [ 選擇檔案 ] 並選取影像，以上傳影像。
詢問已上傳影像的問題，例如「映像是什麼？」。
答案來自 Azure OpenAI，結果隨即顯示。

探索範例程序代碼

雖然 OpenAI 和 Azure OpenAI 服務依賴一般 Python 用戶端連結庫，但使用 Azure OpenAI 端點時需要小型程式代碼變更。此範例會使用 Azure OpenAI 多模式模型來產生使用者訊息和上傳影像的回應。

Base64 編碼前端中上傳的影像

上傳的影像必須經過Base64編碼，才能直接作為訊息的一部分使用作為數據URI。

在範例中，檔案標籤src/quartapp/templates/index.html中的script下列前端代碼段會處理該功能。 toBase64箭號函式會使用 readAsDataURL 的FileReader方法，以異步方式讀取上傳的影像檔作為base64編碼字串。

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

函 toBase64 式是由表單 submit 事件上的接聽程式所呼叫。 submit引發事件時，接聽程式會檢查影像檔案，並使用函式將影像toBase64編碼為Base64來處理它。新的影像數據 URL fileData接著會附加至訊息。

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

使用後端處理映像

在檔案中 src\quartapp\chat.py ，映像處理的後端程式代碼會在設定無密鑰驗證之後開始。

注意

如需如何使用無密鑰連線進行 Azure OpenAI 驗證和授權的詳細資訊，請參閱開始使用 Azure OpenAI 安全性建置組塊 Microsoft Learn 一文。

聊天處理程式函式

函 chat_handler() 式會等候來自端點的 chat/stream 傳入要求 JSON 數據，然後加以處理。然後會從 JSON 資料擷取訊息。最後，會從 JSON 數據擷取 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"]

使用 OpenAI 用戶端和模型的響應數據流

函式chat_handler內的會response_stream處理路由中的聊天完成呼叫。下列代碼段的開頭是前置處理用戶內容訊息。如果影像存在，影像 URL 會附加至用戶內容，其中包含

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

注意

如需影像 detail 參數和相關設定的詳細資訊，請參閱 <使用 GPT-4 Turbo 搭配視覺>一文中的影像處理詳細參數設定：低、高、自動一節，Microsoft Learn 一文。

接下來， bp.openai_client.chat.completions 透過 Azure OpenAI API 呼叫取得聊天完成，並串流回應。

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

最後，回應會串流回用戶端，並處理任何例外狀況的錯誤。

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

要探索的其他範例資源

除了聊天應用程式範例之外，存放庫中還有其他資源可供進一步學習。請檢視目錄中的下列筆記本 notebooks ：

Notebook	描述
chat_pdf_images.ipynb	此筆記本示範如何將 PDF 頁面轉換成影像，並將其傳送至視覺模型以進行推斷。
chat_vision.ipynb	此筆記本是針對使用應用程式中所使用的視覺模型進行手動實驗。

清除資源

清除 Azure 資源

在本文中建立的 Azure 資源會向您的 Azure 訂用帳戶計費。如果您預計未來不需要這些資源，請將其刪除，以避免產生更多費用。

若要刪除 Azure 資源並移除原始程式碼，請執行下列 Azure 開發人員 CLI 命令：

azd down --purge

刪除 GitHub Codespaces 環境，可確保您可將您為帳戶取得的每個核心免費時數權利數量最大化。

重要

如需 GitHub 帳戶權利的詳細資訊，請參閱 GitHub Codespaces 每月包含的儲存體和核心時數。

登入 GitHub Codespaces 儀表板 (https://github.com/codespaces)。
找出您目前執行中的 Codespaces，而其來源為 Azure-Samples//openai-chat-vision-quickstart GitHub 存放庫。
開啟 Codespace 的操作功能表，然後選取 [刪除]。

取得協助

將您的問題記錄到存放庫的問題。

下一步

使用您自己的 Python 數據範例開始使用聊天

共用方式為