Mesh 201 教學課程第 6 章：使用 Azure OpenAI 取得問題的解答

發行項
02/10/2025

在本章中，我們將移至第五個和最後一個月臺，您將在其中瞭解如何實作以 Azure OpenAI 為基礎的虛擬助理或“chatbot”。請注意，您可以在這裡使用您想要的任何 AI 服務 (例如，Copilot Studio) 。為了符合搜尋風力發電廠位置的主題，將會自定義 AI 助理來回答風力發電廠相關問題。

重要注意事項：

OpenAI 僅適用於已核准的企業客戶和合作夥伴。如果您尚未在此群組中，則必須提交註冊窗體。深入了解註冊程式。
如果您遇到訂用帳戶和 OpenAI 的問題，您可以在我們的 Mesh Creator 論壇張貼來找到答案。

設定此月臺

若要完成此月臺，您必須造訪 Azure 入口網站，然後取得 URI (也稱為「端點」) 以及租使用者的密鑰。稍後，您會將密鑰插入一些可讓您呼叫 Azure OpenAI 的程式代碼中。現在讓我們執行此步驟，讓您稍後不需要中斷工作流程。

建立和部署 Azure OpenAI 資源

在瀏覽器中，流覽至 Azure 入口網站，然後登入。
在視窗頂端的 [搜尋] 方塊中，輸入 “azure openai”，然後按 Enter 鍵。這會帶您前往 Azure AI 服務 |Azure OpenAI 頁面。
按兩下 [ 建立] 按鈕。

重要：針對以下詳述的許多設定，我們不會提出特定建議。您應該選擇最適合您和組織使用的選項。
在 [ 基本] 頁面上，建立所要求的名稱，然後選擇您要用於訂用帳戶、區域和 定價層的選項。
在 [ 網络] 頁面上，選擇您想要的選項。
在 [ 標記] 頁面上，您可以新增標記或略過這些選項。
在 [ 檢閱和提交] 頁面上檢閱信息，然後按兩下 [ 建立] 按鈕。

資源會部署，而您應該會看到一則訊息，指出部署正在進行中。最後，您會看到 [ 部署已完成] 頁面。

__________________________________

在 Azure OpenAI Studio 中部署模型

按兩下 [ 移至資源] 按鈕。
在 [資源] 頁面上，按兩下 [移至 Azure OpenAI Studio]。
在左側功能表的 [ 管理] 底下，選取 [ 部署]。
選 取 [建立新的部署]。
按兩下 [ 部署模型] 下拉式清單，然後選取 [ 部署基底模型]。
在 [ 選取模型] 對話框中，選取 [gpt-35-turbo]。
如果您想要的話，請花點時間來檢視描述。當您完成時，按兩下 [ 確認 ] 按鈕。

注意：您可以選擇不同的模型，但這需要對程式代碼進行一些變更。

在 [ 部署名稱] 字 段中，輸入 “gpt-35-turbo”。
針對其他設定，請選擇最適合您和貴組織的名稱和選項。當您完成時，按兩下 [ 部署] 按鈕。

複製 URI 和金鑰

流覽回 Azure 主頁面，然後在 [ 資源] 底下，選取您建立的資源。
在左側功能表的 [資源] 頁面上，選取 [ 金鑰和端點]。
在 [金鑰和端點] 頁面上，按下 [金鑰 1] 或 [金鑰 2] 的 [複製到剪貼簿] 按鈕 (不論哪一個) ，然後使用 Windows 記事本或其他文本編輯器將它貼到文本檔中。
按兩下端點的 [複製到剪貼簿] 按鈕，並將它貼到相同的文字檔中。
儲存文字檔。稍後在本教學課程中，您將需要這兩項資訊。

新增月臺 5 的預製專案

在 [專案] 資料夾中，流覽至 [ 資產>] [MeshCloudScripting] ，然後將 [5 - AIAssistant ] 預製專案拖曳至 [階層 ]，並將它當做子物件放置到 [Mesh Cloud Scripting ] 和 [ 4 - GlobeWithCloudScripting] 下方。

插入 Azure OpenAI 的 URI 和 API 資訊

在 [ 階層] 中，選取 [Mesh Cloud Scripting GameObject]。
在偵測器中，流覽至 Mesh Cloud Scripting 元件，然後按兩下 [ 開啟應用程式資料夾]。這會開啟項目資料夾，其中包含 Windows 檔案總管中 Mesh Cloud Scripting 的檔案。
開啟名為 appsettings 的檔案。UnityLocalDev.json 程式代碼編輯器中。最後兩行程式代碼包含 Azure OpenAI 組態設定的佔位元批注。
將您稍早從 Azure 入口網站複製的 URI 和金鑰貼到這兩行，取代佔位元批注。
儲存後關閉檔案。

更新 Directory.packages.props 檔案

在顯示 Mesh Cloud Scripting 檔案的檔案總管視窗中，在程式代碼編輯器中開啟名為 Directory.Packages.props 的檔案。請記下有關新增套件參考的批註。

以下欄程序代碼列取代批註：

<PackageVersion Include="Azure.AI.OpenAI" Version="1.0.0-beta.15"/>

儲存後關閉檔案。

更新 csproj 檔案

在顯示 Mesh Cloud Scripting 檔案的檔案總管視窗中，在程式代碼編輯器中開啟名為 StartingPoint.csproj 的檔案。
請注意，在檔案底部，在具有 WeatherAPI 資訊的 ItemGroup 元素正上方，有一個批注，其中包含套件參考的佔位符。
刪除註注，並以下列程式代碼列加以取代：
```
<PackageReference Include="Azure.AI.OpenAI" />
```
儲存後關閉檔案。

新增啟用 OpenAI 的程式代碼

在顯示 Mesh Cloud Scripting 檔案的檔案總管視窗中，流覽至 StartingPoint 資料夾，然後在程式代碼編輯器中開啟名為 App.cs 的檔案。
在App.cs檔案中，於指示詞清單 using 頂端尋找「在此處貼上程式代碼」批注。
複製下列程序代碼。
```
using Azure;
using Azure.AI.OpenAI;
```
將您剛才找到的「貼上程式碼」批註取代為您複製的程序代碼。
尋找位於欄位下方的 _weatherAPIKey_ 「在此貼上程式代碼」批註。
複製下列程序代碼。
```
private OpenAIClient _openAIClient;
```
將您剛才找到的「貼上程式碼」批註取代為您複製的程序代碼。
尋找位於建構函式主體中的「在此貼上程式代碼」批注。

複製下列程序代碼。

Uri azureOpenAIResourceUri = new(configuration.GetValue<string>("AZURE_OPENAI_API_URI"));
AzureKeyCredential azureOpenAIApiKey = new(configuration.GetValue<string>("AZURE_OPENAI_API_KEY"));
_openAIClient = new(azureOpenAIResourceUri, azureOpenAIApiKey);

將您剛才找到的「貼上程式碼」批註取代為您複製的程序代碼。
尋找方法內 StartAsync() if 語句後面的refreshButtonNode「在此貼上程式代碼」批注。

複製下列程序代碼。

var aiParentNode = _app.Scene.FindFirstChild("5 - AIAssistant", true) as TransformNode;
var infoButton = aiParentNode?.FindFirstChild<InteractableNode>(true);

if (infoButton != null)
{
    infoButton.Selected += async (sender, args) =>
    {
        // Ensure we have weather data before beginning the conversation
        await GetCurrentWeather(_latlong);

        // Display an input dialog for the user to send a message to the large language model (LLM)
        // Paste code here
    };
}

將您剛才找到的「貼上程式碼」批註取代為您複製的程序代碼。

新增顯示 OpenAI 輸入對話框的程式代碼

在 if 語句的 方法之後，尋找位於方法後面GetCurrentWeather()的infoButton「在此處貼上程式代碼」批注。

複製下列程序代碼。

await _app.ShowInputDialogToParticipantAsync("Ask Azure OpenAI", args.Participant).ContinueWith(async (response) =>
{
    try
    {
        if (response.Exception != null)
        {
            throw response.Exception.InnerException ?? response.Exception;
        }

        string participantInput = response.Result;

        // Paste code here

        // Wait for a response from OpenAI based on the user's message
        // Paste code here
    }
    catch (Exception ex)
    {
        var log = $"Exception during OpenAI request: {ex.Message}";
        _logger.LogCritical(log);

        if (!response.IsCanceled)
        {
            _app.ShowMessageToParticipant(log, args.Participant);
        }
    }
}, TaskScheduler.Default);

將您剛才找到的「貼上程式碼」批註取代為您複製的程序代碼。

程式代碼會執行下列動作：
- 透過名為 ShowInputDialogToParticipantAsync 的方法呼叫 Mesh Cloud Scripting () 。自變數是您想要提示使用者 (「詢問 Azure OpenAI」) ，以及您要向 (自變數顯示輸入對話框 的人員的訊息。參與者) 。
- 當輸入對話框快顯時，請檢查是否有錯誤。
- 將任何輸入的參與者儲存 (結果) 為 participantInput 做為 String。

將輸入對話框的結果傳送至 GPT-3.5 Turbo

下列程式代碼會傳送 GPT-3.5 Turbo 模型輸入對話框的結果，並提供如何回應目前天氣數據的指示。

在試用中尋找第一個「在此貼上程式代碼」批注...catch 區塊您剛貼上。

複製下列程式代碼：

    var chatCompletionsOptions = new ChatCompletionsOptions()
    {
        DeploymentName = "gpt-35-turbo", // Use DeploymentName for "model" with non-Azure clients
        Messages =
        {
            // The system message represents instructions or other guidance about how the assistant should behave
            new ChatRequestSystemMessage(
                "You are a helpful assistant." +
                "You're part of a developer sample for the Mesh Toolkit." +
                "Use brief answers, less than 1 paragraph." +
                "You can suggest a good location for a wind farm based on current and historical weather data." +
                "We're looking at globe with the current weather data displayed for each of these locations:  Lagos Nigeria, Redmond WA USA, Dublin Ireland" +
                "Current weather conditions for these locations:" + _currentWeatherText
                ),
            new ChatRequestUserMessage(participantInput),
        }
    };

將您剛才找到的「貼上程式碼」批註取代為您複製的程序代碼。

程式代碼會執行下列動作：
- 建立名為 chatCompletionOptions 的 ChatCompletionOptions 類別實例。
- 使用您稍早 (「gpt-35-turbo」) 建立的部署名稱，初始化名為 DeploymentName 的變數。
- 使用助理應如何回答問題的指引，初始化 ChatRequestSystemMessage 的新實例。這包括您感興趣的天氣數據位置，以及這些位置目前_currentWeatherText ) ( 條件。當我們在第 5 章中呼叫 weatherapi.com 時，收到_currentWeatherText的值。
- 使用參與者所詢問的問題，初始化 ChatRequestUserMessage 的新實例。
- 將要求的相關信息傳送至 LLM (大型語言模型) 。

新增顯示 LLM 回應的程式代碼

在嘗試中尋找其餘的「在此貼上程式代碼」批註...catch 區塊您剛貼上。

複製下列程式代碼：

        var aiResponse = await _openAIClient.GetChatCompletionsAsync(chatCompletionsOptions);

        // Display the first response from the LLM
        var responseMessage = aiResponse.Value.Choices[0].Message;
        _app.ShowMessageToParticipant($"<i>You asked: {participantInput}</i>\n\nResponse: {responseMessage.Content}", args.Participant);

將您剛才找到的「貼上程式碼」批註取代為您複製的程序代碼。

程式代碼會執行下列動作：
- 等候 LLM 的回應。
- LLM 會傳回陣列中的數個回應 (responseMessage) 。您可以選擇要顯示的。
- 在 Mesh Cloud Scripting API 中呼叫 ShowMessageToParticipant () ，以顯示回應。
儲存後關閉檔案。

測試您的工作

在 Unity 編輯器中，儲存項目，然後按 [播放] 按鈕。
您的虛擬人偶會繁衍於包含前三個月臺的Sphere擴充功能側邊。巡覽至 Sphere 的相反側邊，然後將自己放在月臺 5 前面。
按兩下位於 [月臺 5] 資訊文字框中的 [資訊] 按鈕。
當 [ 詢問 Azure OpenAI ] 對話框出現時，請輸入問題。
回應會出現在對話框中。完成後，按一下 [確定]。

總結

恭喜您！在本 Mesh 201 教學課程中，您已瞭解下列各項：

將本機共用和非共用的 HTML 檔案載入 WebSlate。
使用 3D 資產來呼叫 Web API，並將數據下載到 WebSlate。
將數據從內部或公用來源提取到場景，並以 3D 顯示。
使用 Azure OpenAI 型虛擬助理或“chatbot” 來設定 AI 支援的互動。

現在您可以運用新的 Mesh 技能來工作，並建置更實用且更令人興奮的共同作業體驗！

後續步驟

建置和發佈

如果您要建置和發佈此教學課程專案，請執行下列動作：

移至我們有關準備 Mesh Cloud Scripting 專案的文章，然後遵循指示來記錄您的資源群組和訂用帳戶標識碼。
請移至我們有關建置和發佈環境的文章，然後依照該處的指示作。在特定時間點，您必須流覽至增補文章，其中包含使用 Mesh Cloud Scripting 建置專案的特定指示，然後返回主要組建和發佈文章。此流程已在文章中為您配置。
如果您想要的話，可以在 Mesh 應用程式中測試您的環境。

深入瞭解 WebSlates

請流覽 Mesh 說明網站上的 WebSlates 文章。

閱讀 WebSlates 產品經理所撰寫的部落格文章。

挑戰

請嘗試使用 WebSlate 和載入 HTML 檔案的按鈕來建立您自己的月臺。請務必在我們的 Mesh 開發人員論壇中分享您的努力！

共用方式為

Mesh 201 教學課程第 6 章：使用 Azure OpenAI 取得問題的解答

設定此月臺

建立和部署 Azure OpenAI 資源

在 Azure OpenAI Studio 中部署模型

複製 URI 和金鑰

新增月臺 5 的預製專案

插入 Azure OpenAI 的 URI 和 API 資訊

更新 Directory.packages.props 檔案

更新 csproj 檔案

新增啟用 OpenAI 的程式代碼

新增顯示 OpenAI 輸入對話框的程式代碼

將輸入對話框的結果傳送至 GPT-3.5 Turbo

新增顯示 LLM 回應的程式代碼

測試您的工作

總結

後續步驟

意見反應

其他資源