From af6ce882735d6b52e90918239cc4406ab78f844e Mon Sep 17 00:00:00 2001
From: Zachary Teutsch <zteutsch@microsoft.com>
Date: Thu, 23 Jan 2025 18:49:00 -0800
Subject: [PATCH 1/3] Save custom parameters state with AppData

---
 .../Language Models/CustomSystemPrompt.xaml   |  2 +-
 .../CustomSystemPrompt.xaml.cs                | 33 +++++++++++++++++++
 AIDevGallery/Utils/AppData.cs                 | 13 ++++++++
 3 files changed, 47 insertions(+), 1 deletion(-)

diff --git a/AIDevGallery/Samples/Open Source Models/Language Models/CustomSystemPrompt.xaml b/AIDevGallery/Samples/Open Source Models/Language Models/CustomSystemPrompt.xaml
index 8715503..57cff7a 100644
--- a/AIDevGallery/Samples/Open Source Models/Language Models/CustomSystemPrompt.xaml	
+++ b/AIDevGallery/Samples/Open Source Models/Language Models/CustomSystemPrompt.xaml	
@@ -39,7 +39,7 @@
                     AcceptsReturn="True"
                     AutomationProperties.Name="Prompt input"
                     PlaceholderText="Enter a system prompt for the model..."
-                    Text="You are a helpful assistant."
+                    Text="{x:Bind defaultSystemPrompt, Mode=OneTime}"
                     TextWrapping="Wrap" />
                 <TextBox
                     x:Name="InputTextBox"
diff --git a/AIDevGallery/Samples/Open Source Models/Language Models/CustomSystemPrompt.xaml.cs b/AIDevGallery/Samples/Open Source Models/Language Models/CustomSystemPrompt.xaml.cs
index 7c5f06c..8ebacb8 100644
--- a/AIDevGallery/Samples/Open Source Models/Language Models/CustomSystemPrompt.xaml.cs	
+++ b/AIDevGallery/Samples/Open Source Models/Language Models/CustomSystemPrompt.xaml.cs	
@@ -4,6 +4,7 @@
 using AIDevGallery.Models;
 using AIDevGallery.Samples.Attributes;
 using AIDevGallery.Samples.SharedCode;
+using AIDevGallery.Utils;
 using Microsoft.Extensions.AI;
 using Microsoft.UI.Xaml;
 using Microsoft.UI.Xaml.Controls;
@@ -33,6 +34,7 @@ internal sealed partial class CustomSystemPrompt : BaseSamplePage
     private readonly float defaultTemperature = 1;
     private readonly int defaultMaxLength = 1024;
     private readonly bool defaultDoSample = true;
+    private readonly string defaultSystemPrompt = "You are a helpful assistant.";
     private IChatClient? model;
     private CancellationTokenSource? cts;
     private bool isProgressVisible;
@@ -40,6 +42,7 @@ internal sealed partial class CustomSystemPrompt : BaseSamplePage
     public CustomSystemPrompt()
     {
         Unloaded += (s, e) => CleanUp();
+        Unloaded += (s, e) => Page_Unloaded(); // <exclude-line>
         Loaded += (s, e) => Page_Loaded(); // <exclude-line>
         InitializeComponent();
         DoSampleToggle.Toggled += DoSampleToggle_Toggled;
@@ -56,6 +59,36 @@ protected override async Task LoadModelAsync(SampleNavigationParameters samplePa
     private void Page_Loaded()
     {
         InputTextBox.Focus(FocusState.Programmatic);
+        CustomParametersState? lastState = App.AppData.LastCustomParamtersState;
+        if (lastState != null)
+        {
+            DoSampleToggle.IsOn = lastState.DoSample ?? defaultDoSample;
+            MinLengthSlider.Value = lastState.MinLength ?? 0;
+            MaxLengthSlider.Value = lastState.MaxLength ?? defaultMaxLength;
+            TopKSlider.Value = lastState.TopK ?? defaultTopK;
+            TemperatureSlider.Value = lastState.Temperature ?? defaultTemperature;
+            TopPSlider.Value = lastState.TopP ?? defaultTopP;
+            SystemPromptInputTextBox.Text = lastState.SystemPrompt ?? defaultSystemPrompt;
+            InputTextBox.Text = lastState.UserPrompt ?? string.Empty;
+        }
+    }
+
+    private void Page_Unloaded()
+    {
+        CustomParametersState lastState = new()
+        {
+            DoSample = DoSampleToggle.IsOn,
+            MinLength = (int)MinLengthSlider.Value,
+            MaxLength = (int)MaxLengthSlider.Value,
+            TopK = (int)TopKSlider.Value,
+            TopP = (float)TopPSlider.Value,
+            Temperature = (float)TemperatureSlider.Value,
+            SystemPrompt = SystemPromptInputTextBox.Text,
+            UserPrompt = InputTextBox.Text
+        };
+
+        App.AppData.LastCustomParamtersState = lastState;
+        App.AppData.SaveAsync();
     }
 
     // </exclude>
diff --git a/AIDevGallery/Utils/AppData.cs b/AIDevGallery/Utils/AppData.cs
index e636359..0cf38ad 100644
--- a/AIDevGallery/Utils/AppData.cs
+++ b/AIDevGallery/Utils/AppData.cs
@@ -16,6 +16,7 @@ internal class AppData
 {
     public required string ModelCachePath { get; set; }
     public required LinkedList<MostRecentlyUsedItem> MostRecentlyUsedItems { get; set; }
+    public CustomParametersState? LastCustomParamtersState { get; set; }
 
     // model or api ids
     public required LinkedList<string> UsageHistory { get; set; }
@@ -101,4 +102,16 @@ private static AppData GetDefault()
             UsageHistory = new()
         };
     }
+}
+
+internal class CustomParametersState
+{
+    public bool? DoSample { get; set; }
+    public int? MaxLength { get; set; }
+    public int? MinLength { get; set; }
+    public int? TopK { get; set; }
+    public float? TopP { get; set; }
+    public float? Temperature { get; set; }
+    public string? UserPrompt { get; set; }
+    public string? SystemPrompt { get; set; }
 }
\ No newline at end of file

From 4288b417f128002d012fd0bb5684e8228d955e28 Mon Sep 17 00:00:00 2001
From: Zachary Teutsch <zteutsch@microsoft.com>
Date: Thu, 23 Jan 2025 20:04:22 -0800
Subject: [PATCH 2/3] added await

---
 .../Language Models/CustomSystemPrompt.xaml.cs                | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/AIDevGallery/Samples/Open Source Models/Language Models/CustomSystemPrompt.xaml.cs b/AIDevGallery/Samples/Open Source Models/Language Models/CustomSystemPrompt.xaml.cs
index 8ebacb8..e75c22f 100644
--- a/AIDevGallery/Samples/Open Source Models/Language Models/CustomSystemPrompt.xaml.cs	
+++ b/AIDevGallery/Samples/Open Source Models/Language Models/CustomSystemPrompt.xaml.cs	
@@ -73,7 +73,7 @@ private void Page_Loaded()
         }
     }
 
-    private void Page_Unloaded()
+    private async void Page_Unloaded()
     {
         CustomParametersState lastState = new()
         {
@@ -88,7 +88,7 @@ private void Page_Unloaded()
         };
 
         App.AppData.LastCustomParamtersState = lastState;
-        App.AppData.SaveAsync();
+        await App.AppData.SaveAsync();
     }
 
     // </exclude>

From c08ea1465e973b7272a24a0715dffa3eae29f3ac Mon Sep 17 00:00:00 2001
From: Niels Laute <niels.laute@live.nl>
Date: Fri, 24 Jan 2025 17:03:38 +0100
Subject: [PATCH 3/3] UI tweaks

---
 .../Language Models/CustomSystemPrompt.xaml   | 241 +++++++++---------
 1 file changed, 116 insertions(+), 125 deletions(-)

diff --git a/AIDevGallery/Samples/Open Source Models/Language Models/CustomSystemPrompt.xaml b/AIDevGallery/Samples/Open Source Models/Language Models/CustomSystemPrompt.xaml
index 57cff7a..e1dd91d 100644
--- a/AIDevGallery/Samples/Open Source Models/Language Models/CustomSystemPrompt.xaml	
+++ b/AIDevGallery/Samples/Open Source Models/Language Models/CustomSystemPrompt.xaml	
@@ -1,167 +1,158 @@
 <?xml version="1.0" encoding="utf-8" ?>
 <samples:BaseSamplePage
-    xmlns:samples="using:AIDevGallery.Samples"
     x:Class="AIDevGallery.Samples.OpenSourceModels.LanguageModels.CustomSystemPrompt"
     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
     xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
     xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
+    xmlns:samples="using:AIDevGallery.Samples"
     xmlns:ui="using:CommunityToolkit.WinUI"
     mc:Ignorable="d">
 
     <ScrollViewer
-        Padding="0,0,16,0"
+        Padding="0,0,8,0"
         HorizontalScrollBarVisibility="Disabled"
         VerticalScrollBarVisibility="Auto">
-        <Grid RowSpacing="8">
+        <Grid ColumnSpacing="36" RowSpacing="8">
             <Grid.RowDefinitions>
-                <RowDefinition Height="Auto" />
-                <RowDefinition Height="Auto" />
                 <RowDefinition Height="Auto" />
                 <RowDefinition Height="Auto" />
                 <RowDefinition Height="*" />
             </Grid.RowDefinitions>
-            <Grid RowSpacing="8">
-                <Grid.RowDefinitions>
-                    <RowDefinition Height="Auto" />
-                    <RowDefinition Height="Auto" />
-                    <RowDefinition Height="Auto" />
-                </Grid.RowDefinitions>
-                <Grid.ColumnDefinitions>
-                    <ColumnDefinition Width="3*" />
-                    <ColumnDefinition Width="2*" />
-                    <ColumnDefinition Width="2*" />
-                </Grid.ColumnDefinitions>
+            <Grid.ColumnDefinitions>
+                <ColumnDefinition Width="*" />
+                <ColumnDefinition Width="286" />
+            </Grid.ColumnDefinitions>
+
+            <StackPanel Orientation="Vertical" Spacing="12">
                 <TextBox
                     x:Name="SystemPromptInputTextBox"
                     Grid.Row="0"
-                    Height="100"
+                    MinHeight="96"
+                    MaxHeight="300"
                     AcceptsReturn="True"
                     AutomationProperties.Name="Prompt input"
-                    PlaceholderText="Enter a system prompt for the model..."
+                    Header="System prompt"
+                    PlaceholderText="Enter a system prompt for the model.."
                     Text="{x:Bind defaultSystemPrompt, Mode=OneTime}"
                     TextWrapping="Wrap" />
                 <TextBox
                     x:Name="InputTextBox"
-                    Grid.Row="1"
-                    Height="100"
+                    MinHeight="96"
+                    MaxHeight="300"
+                    Margin="0,12,0,0"
                     AcceptsReturn="True"
                     AutomationProperties.Name="Query input"
                     Description=" "
-                    PlaceholderText="Enter a query to the model for a response..."
+                    Header="Query"
+                    PlaceholderText="Enter a query to the model for a response.."
                     TextChanged="InputBox_Changed"
                     TextWrapping="Wrap" />
                 <StackPanel
-                    Grid.RowSpan="2"
-                    Grid.Column="1"
-                    Margin="10,0,0,0"
-                    Spacing="20">
-                    <Slider
-                        x:Name="MinLengthSlider"
-                        FontSize="12"
-                        Header="Min Length"
-                        Maximum="2048"
-                        Minimum="0"
-                        StepFrequency="1"
-                        ToolTipService.ToolTip="The min length parameter sets the minimum number of tokens for the model to respond with."
-                        Value="0" />
-                    <Slider
-                        x:Name="MaxLengthSlider"
-                        FontSize="12"
-                        Header="Max Length"
-                        Maximum="2048"
-                        Minimum="1"
-                        StepFrequency="1"
-                        ToolTipService.ToolTip="The max length parameter sets the maximum number of tokens for the model to respond with."
-                        Value="{x:Bind defaultMaxLength, Mode=OneTime}" />
-                    <ToggleSwitch
-                        x:Name="DoSampleToggle"
-                        FontSize="12"
-                        Header="Sampling Enabled"
-                        IsOn="{x:Bind defaultDoSample, Mode=OneTime}"
-                        ToolTipService.ToolTip="If Sampling is disabled, a greedy approach will be used and the model will select the most likely token every time. If enabled,tokens will be selected based on the token probability distribution. The Top K, Top P, and Temperature parameters only apply if sampling is enabled." />
-                </StackPanel>
-                <StackPanel
-                    Grid.RowSpan="2"
-                    Grid.Column="2"
-                    Margin="10,0,0,0"
-                    Spacing="20">
-                    <Slider
-                        x:Name="TopPSlider"
-                        FontSize="12"
-                        Header="Top P"
-                        Maximum="1"
-                        Minimum="0"
-                        StepFrequency="0.01"
-                        ToolTipService.ToolTip="The top P parameter tells the model to only consider tokens up until a cumulative probability of P. Lower this value for more predictable, focused generation and increase it for more random response."
-                        Value="{x:Bind defaultTopP, Mode=OneTime}" />
-                    <Slider
-                        x:Name="TopKSlider"
-                        FontSize="12"
-                        Header="Top K"
-                        Maximum="200"
-                        Minimum="0"
-                        StepFrequency="1"
-                        ToolTipService.ToolTip="The top K parameter tells the model to only consider the K most probable tokens at each generation step. Lower this value for more predictable, focused generation and increase it for more random response."
-                        Value="{x:Bind defaultTopK, Mode=OneTime}" />
-                    <Slider
-                        x:Name="TemperatureSlider"
-                        FontSize="12"
-                        Header="Temperature"
-                        Maximum="5"
-                        Minimum="0.01"
-                        StepFrequency="0.01"
-                        ToolTipService.ToolTip="The temperature parameter is a scaling factor for the probability distribution of tokens during generation. Values lower than 1 will produce more deterministic response while values higher than 1 will increase ramdomness."
-                        Value="{x:Bind defaultTemperature, Mode=OneTime}" />
+                    HorizontalAlignment="Right"
+                    Orientation="Horizontal"
+                    Spacing="8">
+                    <Button
+                        x:Name="GenerateButton"
+                        Grid.Row="2"
+                        MinWidth="86"
+                        HorizontalAlignment="Right"
+                        Click="GenerateButton_Click"
+                        Content="Generate"
+                        IsEnabled="False"
+                        Style="{StaticResource AccentButtonStyle}" />
+                    <Button
+                        x:Name="StopBtn"
+                        Grid.Row="2"
+                        MinWidth="86"
+                        HorizontalAlignment="Right"
+                        AutomationProperties.Name="Stop"
+                        Click="StopBtn_Click"
+                        Style="{ThemeResource AccentButtonStyle}"
+                        Visibility="Collapsed">
+                        <StackPanel Orientation="Horizontal" Spacing="8">
+                            <FontIcon
+                                x:Name="StopIcon"
+                                FontSize="16"
+                                Glyph="&#xE73B;" />
+                            <ProgressRing
+                                x:Name="OutputProgressBar"
+                                Width="16"
+                                Height="16"
+                                Foreground="{ThemeResource TextOnAccentFillColorPrimaryBrush}"
+                                IsIndeterminate="True"
+                                Visibility="Collapsed" />
+                            <TextBlock Text="Stop" />
+                        </StackPanel>
+                    </Button>
+                    <Button
+                        x:Name="ResetButton"
+                        Grid.Row="1"
+                        MinWidth="86"
+                        HorizontalAlignment="Right"
+                        Click="ResetButton_Click"
+                        Content="Reset to defaults" />
                 </StackPanel>
-            </Grid>
-            <Button
-                x:Name="ResetButton"
-                Grid.Row="1"
-                MinWidth="86"
-                HorizontalAlignment="Right"
-                Click="ResetButton_Click"
-                Content="Reset To Default"/>
-            <Button
-                x:Name="GenerateButton"
-                Grid.Row="2"
-                MinWidth="86"
-                HorizontalAlignment="Right"
-                Click="GenerateButton_Click"
-                Content="Generate"
-                IsEnabled="False"
-                Style="{StaticResource AccentButtonStyle}" />
-            <Button
-                x:Name="StopBtn"
-                Grid.Row="2"
-                MinWidth="86"
-                HorizontalAlignment="Right"
-                AutomationProperties.Name="Stop"
-                Click="StopBtn_Click"
-                Style="{ThemeResource AccentButtonStyle}"
-                Visibility="Collapsed">
-                <StackPanel Orientation="Horizontal" Spacing="8">
-                    <FontIcon
-                        x:Name="StopIcon"
-                        FontSize="16"
-                        Glyph="&#xE73B;" />
-                    <ProgressRing
-                        x:Name="OutputProgressBar"
-                        Width="16"
-                        Height="16"
-                        Foreground="{ThemeResource TextOnAccentFillColorPrimaryBrush}"
-                        IsIndeterminate="True"
-                        Visibility="Collapsed" />
-                    <TextBlock Text="Stop" />
-                </StackPanel>
-            </Button>
+            </StackPanel>
+
+            <StackPanel
+                Grid.RowSpan="3"
+                Grid.Column="1"
+                Spacing="12">
+                <Slider
+                    x:Name="MinLengthSlider"
+                    Header="Min Length"
+                    Maximum="2048"
+                    Minimum="0"
+                    StepFrequency="1"
+                    ToolTipService.ToolTip="The min length parameter sets the minimum number of tokens for the model to respond with."
+                    Value="0" />
+                <Slider
+                    x:Name="MaxLengthSlider"
+                    Header="Max Length"
+                    Maximum="2048"
+                    Minimum="1"
+                    StepFrequency="1"
+                    ToolTipService.ToolTip="The max length parameter sets the maximum number of tokens for the model to respond with."
+                    Value="{x:Bind defaultMaxLength, Mode=OneTime}" />
+                <Slider
+                    x:Name="TopPSlider"
+                    Header="Top P"
+                    Maximum="1"
+                    Minimum="0"
+                    StepFrequency="0.01"
+                    ToolTipService.ToolTip="The top P parameter tells the model to only consider tokens up until a cumulative probability of P. Lower this value for more predictable, focused generation and increase it for more random response."
+                    Value="{x:Bind defaultTopP, Mode=OneTime}" />
+                <Slider
+                    x:Name="TopKSlider"
+                    Header="Top K"
+                    Maximum="200"
+                    Minimum="0"
+                    StepFrequency="1"
+                    ToolTipService.ToolTip="The top K parameter tells the model to only consider the K most probable tokens at each generation step. Lower this value for more predictable, focused generation and increase it for more random response."
+                    Value="{x:Bind defaultTopK, Mode=OneTime}" />
+                <Slider
+                    x:Name="TemperatureSlider"
+                    Header="Temperature"
+                    Maximum="5"
+                    Minimum="0.01"
+                    StepFrequency="0.01"
+                    ToolTipService.ToolTip="The temperature parameter is a scaling factor for the probability distribution of tokens during generation. Values lower than 1 will produce more deterministic response while values higher than 1 will increase ramdomness."
+                    Value="{x:Bind defaultTemperature, Mode=OneTime}" />
+                <ToggleSwitch
+                    x:Name="DoSampleToggle"
+                    Header="Sampling"
+                    IsOn="{x:Bind defaultDoSample, Mode=OneTime}"
+                    ToolTipService.ToolTip="If Sampling is disabled, a greedy approach will be used and the model will select the most likely token every time. If enabled,tokens will be selected based on the token probability distribution. The Top K, Top P, and Temperature parameters only apply if sampling is enabled." />
+            </StackPanel>
             <TextBlock
-                Grid.Row="3"
+                Grid.Row="1"
+                Margin="0,16,0,0"
                 Style="{ThemeResource BodyStrongTextBlockStyle}"
                 Text="Output:" />
             <TextBlock
                 x:Name="OutputTextBlock"
-                Grid.Row="4"
+                Grid.Row="2"
                 AutomationProperties.Name="Output"
                 Foreground="{ThemeResource TextFillColorSecondaryBrush}"
                 IsTextSelectionEnabled="True"