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

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

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

在 EP 19 有提到要客製化設定系統角色扮演 Prompt，就在這回來考慮考慮怎處理囉！

找到 Views/SettingPageView.axml，原本的 XAML 在 <Border> 標記中的設計應該為：

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

將其替換為：

<ScrollViewer Margin="6">
    <Grid ColumnDefinitions="*,Auto" RowDefinitions="Auto,Auto,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>
        <StackPanel Grid.Row="1" Grid.ColumnSpan="2" 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>
        <TextBlock Grid.Row="2" Margin="6,24,6,12" VerticalAlignment="Center" FontSize="20" Text="Setting for Chat System Role:" />
        <StackPanel Grid.Row="3" Grid.ColumnSpan="2" Margin="0,6">
            <TextBlock Margin="0,6" Text="目前已定義的 System Role：" />
            <ComboBox >
                <ComboBoxItem Content="Default System Role" />
                <ComboBoxItem Content="Movie Reviewer Role" />
            </ComboBox>
            <StackPanel Margin="0,10">
                <TextBlock Margin="0,6" Text="Name" />
                <TextBox Watermark="請輸入 System Role 的名稱。" />
                <TextBlock Margin="0,6" Text="Prompt" />
                <TextBox Watermark="請輸入 System Role 的 Prompt 定義。" />
            </StackPanel>
        </StackPanel>
        <StackPanel Grid.Row="3" Grid.Column="1" Margin="6,24" HorizontalAlignment="Right" VerticalAlignment="Top" Orientation="Horizontal">
            <Button>
                <StackPanel>
                    <fluenticons:SymbolIcon FontSize="16" IconVariant="Regular" Symbol="Delete" />
                    <TextBlock Text="刪除" />
                </StackPanel>
            </Button>
            <Button>
                <StackPanel>
                    <fluenticons:SymbolIcon FontSize="16" IconVariant="Regular" Symbol="Add" />
                    <TextBlock Text="新增" />
                </StackPanel>
            </Button>
        </StackPanel>
    </Grid>
</ScrollViewer>

變更處如下圖紅框：

其 UI 變更後的完成結果如下：

完成！！！

而如何讓此設定正確的運用到 Chat 當中，就下回再續吧~~~