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

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

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

話說 TopAOAIConnector App 若要能夠直接串接 Azure OpenAI Service 使用 Chat，那大概會需要有 Azure OpenAI Service 的三個資訊必須要先記在 TopAOAIConnector App 當中：

1. 端點 (在 Azure OpenAI Service 的 "資源管理" 中取得)

2. 金鑰 (在 Azure OpenAI Service 的 "資源管理" 中取得)
   

3. 模型名稱 (在 Azure OpenAI Studio 的 "部屬" 中取得)
   

所以上述的這三個資訊，就透過先前規劃的 Setting 來處理吧！

註：請勿直接分享 Azure OpenAI Service 的端點與金鑰資訊，並請在正式環境使用時考慮更具 "安全性" 的儲存與存取上述相關資訊的策略，替換掉本系列文當中所會使用的處理方式。

那就回到 TopAOAIConnector App 的 Avalonia UI 專案囉！

找到 Models 資料夾，在其中增加一個 C# 類別 "AOAISettings"，其程式碼如下：

namespace TopAOAIConnector.Models;

internal class AOAISettings
{
    public string? Endpoint { get; set; }
    public string? SecretKey1 { get; set; }
    public string? SecretKey2 { get; set; }
    public string? DeployModelName { get; set; }
}

完成後大概會如下圖 (紅框為上述的 C# 程式碼)：

接著再找到先前在 ViewModels/SettingPageViewModel.cs 大概會長這樣子：

在該 SettingPageViewModel 當中加入以下程式碼：

private readonly string settingsPath = Path.Combine(Environment.GetFolderPath(Environment.SpecialFolder.Personal), "TopAOAIConnector", "settings.json");

[ObservableProperty]
private AOAISettings? _settings;

[RelayCommand]
private void Clear()
{
    System.Diagnostics.Debug.WriteLine($"Clear...");
}

[RelayCommand]
private void Save()
{
    System.Diagnostics.Debug.WriteLine($"Save to...{settingsPath}");
}

改完後大概會如下圖 (紅框為所加入的 C# 程式碼)：

接著切到 Views/SettingPageView.axaml 大概會長這樣子：

在該 SettingPageView 當中來編輯 XAML：

加入 "FluentIcons.Avalonia"、"models"、"viewmodels" 的命名空間的使用(點 1)。

xmlns:fluenticons="using:FluentIcons.Avalonia"
xmlns:models="using:TopAOAIConnector.Models"
xmlns:viewmodels="using:TopAOAIConnector.ViewModels"

加入強勢型別的描述(點 2)。

x:DataType="viewmodels:SettingPageViewModel"

加入在設計時期 preview 時使用的 DataContext (點 3)：

<Design.DataContext>
    <viewmodels:SettingPageViewModel />
</Design.DataContext>

替換掉原本 UserControl 標記中單純文字顯示 "Welcome to Avalonia! This is the Setting Page." 為下列標記(點 4)。

<Border Margin="10" BorderBrush="DarkGray" BorderThickness="2" CornerRadius="4">
    <Grid ColumnDefinitions="*,Auto" RowDefinitions="Auto,*">
        <TextBlock Margin="6" VerticalAlignment="Center" FontSize="20" Text="Setting for Azure OpenAI Service:" />
        <StackPanel Grid.Column="1" Margin="6" HorizontalAlignment="Right" Orientation="Horizontal">
            <Button Command="{Binding ClearCommand}">
                <StackPanel>
                    <fluenticons:SymbolIcon FontSize="16" IconVariant="Regular" Symbol="Delete" />
                    <TextBlock Text="清除" />
                </StackPanel>
            </Button>
            <Button Command="{Binding SaveCommand}">
                <StackPanel>
                    <fluenticons:SymbolIcon FontSize="16" IconVariant="Regular" Symbol="Save" />
                    <TextBlock Text="儲存" />
                </StackPanel>
            </Button>
        </StackPanel>
        <ScrollViewer Grid.Row="1" Grid.ColumnSpan="2" Margin="6">
            <StackPanel x:DataType="models:AOAISettings" DataContext="{Binding Settings}">
                <TextBlock Margin="0,6" Text="Endpoint (端點):" />
                <TextBox Text="{Binding Endpoint}" Watermark="請輸入 &quot;端點&quot; 資訊..." />
                <TextBlock Margin="0,6" Text="Access Key1 (金鑰1):" />
                <TextBox PasswordChar="*" Text="{Binding SecretKey1}" Watermark="請輸入 &quot;金鑰1&quot; 資訊..." />
                <TextBlock Margin="0,6" Text="Access Key2 (金鑰2):" />
                <TextBox PasswordChar="*" Text="{Binding SecretKey2}" Watermark="請輸入 &quot;金鑰2&quot; 資訊..." />
                <TextBlock Margin="0,6" Text="Deploy Model Name (部署的名稱):" />
                <TextBox Text="{Binding DeployModelName}" Watermark="請輸入 &quot;部署的名稱&quot; 資訊..." />
            </StackPanel>
        </ScrollViewer>
    </Grid>
</Border>

如果 XAML 編輯正確，也應該能夠在 Visaul Studio 中正確地看到 preview 的結果(點 5)。

上述完成後會大概如下圖：

"執行並偵錯(F5)" 後，切到 "Setting" 出現的畫面應該會如下圖紅框中的畫面：

若點選 "儲存" 按鈕，則會在 Visaul Studio 輸出窗格顯示 "Save to...<路徑>"：

若點選 "清除" 按鈕，則會在 Visaul Studio 輸出窗格顯示 "Clear..."：

到這邊就完成最 "基本" 的 Setting 有關的 UI 規劃囉！

那就下回見~~~