Hello, 各位 iT 邦幫忙 的粉絲們大家好~~~

在本系列文會展開使用 Avalonia UI 技術所建立的 TopAOAIConnector App 。由於使用 Avalonia UI 可以很快速的進行各平台的 桌面 應用程式開發，並且透過此 TopAOAIConnector App 來串接 Azure OpenAI Service 時所需的功能研究。

本篇是 就是要來點 A.I. 的 TopAOAIConnector App 系列文的 EP13。

前一回 提到先試試若有輸入文字在文字方塊中時，再點選 Attach 選取文字檔後，就會直接發送輸入的文字與相關的文字資料。

輸入文字：

選取文字檔案：

顯示結果在畫面中：

P.S. 前一回的新聞內容因為涉及到以巴戰爭，會被 Azure OpenAI Service 過濾掉禁止回應，所以換篇新聞內容。

等等！

不要有錯誤的期待好嗎？怎麼可能現在就有 AI 的回應呢...

別擔心，接著就要串接一下 Azure OpenAI Service。一開始先使用最原始的串接，後面有機會再進展到使用 Semantic Kernel 吧！？

首先，先透過安裝 "Azure.AI.OpenAI" 的 Nuget 套件完成後，就可以開始處理囉！

從 TopAOAIConnector 專案中，透過 "管理 Nuget 套件" 直接在 "瀏覽" 輸入 "Azure.AI.OpenAI"，並且勾選 "包含搶鮮版"：

出現結果後點選 Azure.AI.OpenAI 套件，並且點選 "安裝"：

安裝的過程如下：

完成安裝後，除了 Nuget 套件管理員的對於此套件的顯示改變外，應該可以在 TopAOAIConnector 專案的 "套件" 找到：

先來在專案的 Models/AOAISettings 加入以下程式碼：

public static AOAISettings Instance { get; set; }

static AOAISettings()
{
    Instance = new();
}

如下圖紅框：

Utilities 當中再設計一個 AoaiServiceHelper 類別：

internal class AoaiServiceHelper
{
    static readonly string endpoint = AOAISettings.Instance.Endpoint!;
    static readonly string key = AOAISettings.Instance.SecretKey1!;
    static readonly string deployModelName = AOAISettings.Instance.DeployModelName!;

    public static async Task<string> Go(string userMessage)
    {
        var azureOpenAIclient = new AzureOpenAIClient(new Uri(endpoint), new AzureKeyCredential(key));
        var chatClient = azureOpenAIclient.GetChatClient(deployModelName);

        var completionChat = await chatClient.CompleteChatAsync(
            new List<ChatMessage>()
            {
                new UserChatMessage(userMessage)
            });

        var result = $"{completionChat.Value.Role}:{Environment.NewLine}{completionChat.Value.Content[0].Text}";
        return result;
    }
}

如下圖紅框：

再次找到 ViewModels/ChatPageViewModel，除了加入下列方法的設計：

private async Task BuildAoaiResultToChatText(string userMessage)
{
    await AoaiServiceHelper.Go(userMessage).ContinueWith(async task =>
    {
        var result = await task;
        ChatText = $"{ChatText}{Environment.NewLine}{result}{Environment.NewLine}";
    });
}

如下圖紅框：

針對 Send 方法加入上述設計的方法呼叫並配合非同步呼叫改寫方法表頭：

await BuildAoaiResultToChatText(textContent);

差異處如下圖紅框：

針對 Attach 方法加入上述設計的方法呼叫：

await BuildAoaiResultToChatText(textContent);

差異處如下圖紅框：

好囉！

執行結果看看：

完成~~~