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

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

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

前一回 提到 Setting 若已經有儲存資料，下次再執行此 TopAOAIConnector App 並切換到 Setting 時，資料是否能讀取回來唷！

在這邊就也展示一下。

首先把四個文字框貼入從 Azure OpenAI Service 與 Azure OpenAI Studio 當中取得的值貼入：

點選 "儲存"：

接著關閉視窗或是用 Visaul Stduio 的 "停止偵錯" 都可以：

再次執行透過 "偵錯執行" 後切到 Setting，會看到其文字框中都有上次填寫的內容：

下面用 GIF 畫面展示一次上述 "再次執行透過 "偵錯執行" 後切到 Setting，會看到其文字框中都有上次填寫的內容" 的概念：

好的，看倌們應該都能完成上述的處理吧！

接著就要再回到 EP10 所談的 Chat 處理，接著要至少讓 Send 時，能將所輸入的文字與 Attach 的文字，顯示到 Chat 的畫面上！

首先，在專案底下設計 Utilities/AttachFileHelper.cs 的類別：

using Avalonia.Platform.Storage;

namespace TopAOAIConnector.Utilities;

internal static class AttachFileHelper
{
    public static IStorageProvider? StorageProvider { get; set; }
}

如下圖紅框：

在 App.axmal.cs 當中找到 OnFrameworkInitializationCompleted 方法，並再繼續增加相關程式碼：

var topLevel = TopLevel.GetTopLevel(desktop.MainWindow);
Utilities.AttachFileHelper.StorageProvider = topLevel!.StorageProvider;

如下圖紅框：

接著再次回到 ViewModels/ChatPAgeViewModel.cs 當中。

把原本：

private string _chatText = "Chat Page!";

替換成：

private string _chatText = $"Welcome to TopAOAIConnector!{Environment.NewLine}";

如下圖紅框：

接著設計一個 BuildChatText 方法：

private void BuildChatText(string textContent)
{
    ChatText = $"{ChatText}{Environment.NewLine}You:{Environment.NewLine}{textContent}{Environment.NewLine}";
    
    InputText = string.Empty;
}

如下圖紅框：

找到原本撰寫的 Attach 方法：

private void Attach()
{
    System.Diagnostics.Debug.WriteLine("Attach...");
}

更改成：

private async Task Attach()
{
    System.Diagnostics.Debug.WriteLine("Attach...");

    var storageProvider = Utilities.AttachFileHelper.StorageProvider;
    var resultFiles = await storageProvider!.OpenFilePickerAsync(new FilePickerOpenOptions()
    {
        AllowMultiple = false,
        FileTypeFilter = [FilePickerFileTypes.TextPlain],
        Title = "請選擇文字檔(.txt)",
        SuggestedStartLocation = await storageProvider.TryGetWellKnownFolderAsync(WellKnownFolder.Desktop),
    });

    if (resultFiles.Count <= 0) 
        return;

    await using var stream = await resultFiles[0].OpenReadAsync();
    using var reader = new StreamReader(stream);
    var fileContent = await reader.ReadToEndAsync();

    var textContent = InputText == string.Empty ? fileContent : $"{InputText}{Environment.NewLine}{fileContent}";
    
    BuildChatText(textContent);
}

有差異的地方如下圖紅框：

找到原本撰寫的 Send 方法：

private void Send()
{
    System.Diagnostics.Debug.WriteLine("Send...");
}

更改成：

private void Send()
{
    System.Diagnostics.Debug.WriteLine("Send...");

    var textContent = InputText;

    BuildChatText(textContent);
}

有差異的地方如下圖紅框：

"執行並偵錯(F5)" 後，在 Chat 畫面中的輸入框打入文字，再點選 "Send"：

點選 "Attach"：

會開啟檔案選取的對話窗格，並且預設的路徑為使用者桌面資料夾。在這邊選取事先準備好的一個文字檔，接著點選 "開啟"：

就會看到該文字檔直接被讀取到畫面上顯示：

看倌也可以試試若有輸入文字在文字方塊中時，再點選 Attach 選文字檔後，會發生什麼狀況？

好~~~那下回就準備來透過 Azure OpenAI Service 來完成回應結果吧！