From 689fc41189089f92233800c055401eb64fd26bc9 Mon Sep 17 00:00:00 2001
From: juhangil <tensil94@gmail.com>
Date: Wed, 18 Sep 2024 06:34:04 +0900
Subject: [PATCH] Move label component to slider and list

---
 .../Components/UI/LabelWithTooltip.razor      |  30 -----
 .../UI/ParameterListComponent.razor           |  56 ++++++++++
 ...d.razor => ParameterSliderComponent.razor} |  49 ++++++---
 .../UI/ParameterSliderComponent.razor.css     |  26 +++++
 .../UI/ParametersTabComponent.razor           | 103 +++++++-----------
 .../UI/ParametersTabComponent.razor.css       |   9 --
 6 files changed, 154 insertions(+), 119 deletions(-)
 delete mode 100644 src/AzureOpenAIProxy.PlaygroundApp/Components/UI/LabelWithTooltip.razor
 create mode 100644 src/AzureOpenAIProxy.PlaygroundApp/Components/UI/ParameterListComponent.razor
 rename src/AzureOpenAIProxy.PlaygroundApp/Components/UI/{SliderWithTextfield.razor => ParameterSliderComponent.razor} (56%)
 create mode 100644 src/AzureOpenAIProxy.PlaygroundApp/Components/UI/ParameterSliderComponent.razor.css
 delete mode 100644 src/AzureOpenAIProxy.PlaygroundApp/Components/UI/ParametersTabComponent.razor.css

diff --git a/src/AzureOpenAIProxy.PlaygroundApp/Components/UI/LabelWithTooltip.razor b/src/AzureOpenAIProxy.PlaygroundApp/Components/UI/LabelWithTooltip.razor
deleted file mode 100644
index 88756b1d..00000000
--- a/src/AzureOpenAIProxy.PlaygroundApp/Components/UI/LabelWithTooltip.razor
+++ /dev/null
@@ -1,30 +0,0 @@
-@inherits FluentComponentBase
-
-<div class=@Class>
-    @LabelText
-
-    @* Tooltip Image *@
-    <FluentIcon Id=@anchorId Value="@(new Icons.Regular.Size12.Info())" />
-    <FluentTooltip Anchor=@anchorId Position="TooltipPosition.End"
-                   UseTooltipService="false"
-                   MaxWidth="250px"
-                   Style="line-break:anywhere">
-        @TooltipText
-    </FluentTooltip>
-</div>
-
-@code {
-    [Parameter, EditorRequired]
-    public string LabelText { get; set; } = string.Empty;
-
-    [Parameter, EditorRequired]
-    public string TooltipText { get; set; } = string.Empty;
-
-    private string anchorId = string.Empty;
-
-    protected override void OnInitialized()
-    {
-        base.OnInitialized();
-        anchorId = $"{Id}-tooltip";
-    }
-}
\ No newline at end of file
diff --git a/src/AzureOpenAIProxy.PlaygroundApp/Components/UI/ParameterListComponent.razor b/src/AzureOpenAIProxy.PlaygroundApp/Components/UI/ParameterListComponent.razor
new file mode 100644
index 00000000..184f0e71
--- /dev/null
+++ b/src/AzureOpenAIProxy.PlaygroundApp/Components/UI/ParameterListComponent.razor
@@ -0,0 +1,56 @@
+@inherits FluentComponentBase
+
+<div id="@Id">
+    <label id=@($"{Id}-label") for=@($"{Id}-content")
+           style="display:inline-block;padding-left:5px;font-weight:bold;">
+        @LabelText
+
+        @* Tooltip Image *@
+        <FluentIcon Id=@($"{Id}-anchor") Value="@(new Icons.Regular.Size12.Info())" />
+        <FluentTooltip Id=@($"{Id}-tooltip")
+                       Anchor=@($"{Id}-anchor")
+                       Position="TooltipPosition.End"
+                       UseTooltipService="false"
+                       MaxWidth="250px"
+                       Style="line-break:anywhere">
+            @TooltipText
+        </FluentTooltip>
+    </label>
+
+    <div id=@($"{Id}-content")>
+        <FluentAutocomplete TOption="string" Multiple="true" AutoComplete="false"
+                            ShowOverlayOnEmptyResults="false"
+                            SelectValueOnTab="true"
+                            MaximumOptionsSearch="1"
+                            @bind-SelectedOptions=stopSequenceValue
+                            OnOptionsSearch=OnSearchAsync
+                            Style="width:95%;padding:5px 0px;margin: 0 auto">
+            <OptionTemplate>
+                <FluentLabel>Create "@(context)"</FluentLabel>
+            </OptionTemplate>
+        </FluentAutocomplete>
+    </div>
+</div>
+
+@code {
+    [Parameter, EditorRequired]
+    public string LabelText { get; set; } = string.Empty;
+
+    [Parameter, EditorRequired]
+    public string TooltipText { get; set; } = string.Empty;
+
+    private IEnumerable<string> stopSequenceValue = new List<string>();
+    private List<string> searchTextItems = new();
+
+    private Task OnSearchAsync(OptionsSearchEventArgs<string> e)
+    {
+        searchTextItems.Clear();
+        if (string.IsNullOrEmpty(e.Text) || stopSequenceValue.Contains(e.Text))
+            return Task.CompletedTask;
+
+        searchTextItems.Add(e.Text);
+        e.Items = searchTextItems;
+
+        return Task.CompletedTask;
+    }
+}
diff --git a/src/AzureOpenAIProxy.PlaygroundApp/Components/UI/SliderWithTextfield.razor b/src/AzureOpenAIProxy.PlaygroundApp/Components/UI/ParameterSliderComponent.razor
similarity index 56%
rename from src/AzureOpenAIProxy.PlaygroundApp/Components/UI/SliderWithTextfield.razor
rename to src/AzureOpenAIProxy.PlaygroundApp/Components/UI/ParameterSliderComponent.razor
index 1506b605..01f3c052 100644
--- a/src/AzureOpenAIProxy.PlaygroundApp/Components/UI/SliderWithTextfield.razor
+++ b/src/AzureOpenAIProxy.PlaygroundApp/Components/UI/ParameterSliderComponent.razor
@@ -1,21 +1,38 @@
 @inherits FluentComponentBase
 @typeparam TValue where TValue : System.Numerics.INumber<TValue>
 
-<div class=@Class>
-    <FluentStack Orientation="Orientation.Horizontal">
-
-        <FluentSlider Min="@Min" Max="@Max" Step="@Step"
-                      @bind-Value=Value @bind-Value:after=AfterSliderChange
-                      Style="width:88%;padding-top:15px;" />
-
-        <FluentTextField @bind-Value=textFieldValue @bind-Value:after=AfterTextFieldChange
-                         Style="width:12%;font-size:9px" />
+<div id="@Id">
+    <label id=@($"{Id}-label") class="parameter-label" for=@($"{Id}-content")>
+        @LabelText
+
+        @* Tooltip Image *@
+        <FluentIcon Id=@($"{Id}-anchor") Value="@(new Icons.Regular.Size12.Info())" />
+        <FluentTooltip Id=@($"{Id}-tooltip")
+                       Anchor=@($"{Id}-anchor")
+                       Position="TooltipPosition.End"
+                       UseTooltipService="false"
+                       MaxWidth="250px"
+                       Style="line-break:anywhere">
+            @TooltipText
+        </FluentTooltip>
+    </label>
+
+    <FluentStack Id=@($"{Id}-content")
+                 Orientation="Orientation.Horizontal"
+                 Style="column-gap:0px">
+
+        <FluentSlider Class="parameter-slider"
+                      Min="@Min" Max="@Max" Step="@Step"
+                      @bind-Value=Value @bind-Value:after=AfterSliderChange />
+
+        <FluentTextField Class="parameter-textfield"
+                         @bind-Value=textFieldValue @bind-Value:after=AfterTextFieldChange />
 
     </FluentStack>
 
     @if (!hasNoError)
     {
-        <FluentCard Style="padding:10px;width:95%;margin:0 auto;border-color:crimson;background-color:lightcoral;color:black">
+        <FluentCard Class="parameter-error">
             @errorText
         </FluentCard>
     }
@@ -37,8 +54,11 @@
     [Parameter]
     public EventCallback<TValue> ValueChanged { get; set; }
 
-    [Parameter]
-    public EventCallback OnChangeEvent { get; set; }
+    [Parameter, EditorRequired]
+    public string LabelText { get; set; } = string.Empty;
+
+    [Parameter, EditorRequired]
+    public string TooltipText { get; set; } = string.Empty;
 
     public string? textFieldValue { get; set; }
 
@@ -47,9 +67,10 @@
 
     protected override void OnInitialized()
     {
-        base.OnInitialized();
         textFieldValue = Value!.ToString();
         errorText = $"Only numbers between {Min} and {Max} are permitted";
+
+        base.OnInitialized();
     }
 
     private async Task AfterSliderChange()
@@ -58,7 +79,6 @@
         textFieldValue = Value!.ToString();
 
         await ValueChanged.InvokeAsync(Value);
-        await OnChangeEvent.InvokeAsync();
     }
 
     private async Task AfterTextFieldChange()
@@ -73,6 +93,5 @@
 
         this.Value = parsed;
         await ValueChanged.InvokeAsync(Value);
-        await OnChangeEvent.InvokeAsync();
     }
 }
diff --git a/src/AzureOpenAIProxy.PlaygroundApp/Components/UI/ParameterSliderComponent.razor.css b/src/AzureOpenAIProxy.PlaygroundApp/Components/UI/ParameterSliderComponent.razor.css
new file mode 100644
index 00000000..9f15a73b
--- /dev/null
+++ b/src/AzureOpenAIProxy.PlaygroundApp/Components/UI/ParameterSliderComponent.razor.css
@@ -0,0 +1,26 @@
+::deep .parameter-label {
+    display: inline-block;
+    padding-left: 5px;
+    font-weight: bold;
+    font-size: 8px;
+}
+
+::deep .parameter-slider {
+    width: 88%;
+    padding-top: 15px;
+}
+
+::deep .parameter-textfield {
+    width: 12%;
+    font-size: 9px;
+    padding-right: 5px;
+}
+
+::deep .parameter-error {
+    padding: 10px;
+    width: 95%;
+    margin: 5px auto;
+    border-color: crimson;
+    background-color: lightcoral;
+    color: black
+}
diff --git a/src/AzureOpenAIProxy.PlaygroundApp/Components/UI/ParametersTabComponent.razor b/src/AzureOpenAIProxy.PlaygroundApp/Components/UI/ParametersTabComponent.razor
index 58cdfa06..4ea33346 100644
--- a/src/AzureOpenAIProxy.PlaygroundApp/Components/UI/ParametersTabComponent.razor
+++ b/src/AzureOpenAIProxy.PlaygroundApp/Components/UI/ParametersTabComponent.razor
@@ -1,73 +1,58 @@
 @using System.Linq
 
 <div id="@Id">
+    <ParameterSliderComponent Id="slider-pastmessages"
+                              Class="label-with-tooltip"
+                              LabelText="Past messages included"
+                              TooltipText="Select the number of past messages to include in each new API request. This helps give the model context for new user queries. Setting this number to 10 will include 5 user queries and 5 system responses."
+                              Min="1" Max="20" Step="1" @bind-Value=@pastMessagesValue />
 
     @* Past Messages Slider *@
-    <LabelWithTooltip Id="slider-past-messages"
-                      Class="label-with-tooltip"
-                      LabelText="Past messages included"
-                      TooltipText="Select the number of past messages to include in each new API request. This helps give the model context for new user queries. Setting this number to 10 will include 5 user queries and 5 system responses." />
-
-    <SliderWithTextfield Class="slider-with-text" Min="1" Max="20" Step="1" @bind-Value=@pastMessagesValue />
+    <ParameterSliderComponent Id="slider-past-messages"
+                              Class="label-with-tooltip"
+                              LabelText="Past messages included"
+                              TooltipText="Select the number of past messages to include in each new API request. This helps give the model context for new user queries. Setting this number to 10 will include 5 user queries and 5 system responses."
+                              Min="1" Max="20" Step="1" @bind-Value=@pastMessagesValue />
 
     @* Max Response Slider *@
-    <LabelWithTooltip Id="slider-max-response"
-                      Class="label-with-tooltip"
-                      LabelText="Max response"
-                      TooltipText="Set a limit on the number of tokens per model response. The API supports a maximum of MaxTokensPlaceholderDoNotTranslate tokens shared between the prompt (including system message, examples, message history, and user query) and the model's response. One token is roughly 4 characters for typical English text." />
-
-    <SliderWithTextfield Class="slider-with-text" Min="1" Max="16000" Step="1" @bind-Value=@maxResponseValue />
+    <ParameterSliderComponent Id="slider-max-response"
+                              Class="label-with-tooltip"
+                              LabelText="Max response"
+                              TooltipText="Set a limit on the number of tokens per model response. The API supports a maximum of MaxTokensPlaceholderDoNotTranslate tokens shared between the prompt (including system message, examples, message history, and user query) and the model's response. One token is roughly 4 characters for typical English text."
+                              Min="1" Max="16000" Step="1" @bind-Value=@maxResponseValue />
 
     @* Temperature Slider *@
-    <LabelWithTooltip Id="slider-temperature"
-                      Class="label-with-tooltip"
-                      LabelText="Temperature"
-                      TooltipText="Controls randomness. Lowering the temperature means that the model will produce more repetitive and deterministic responses. Increasing the temperature will result in more unexpected or creative responses. Try adjusting temperature or Top P but not both." />
-
-    <SliderWithTextfield Class="slider-with-text" Min="0" Max="1" Step="0.01" @bind-Value=@temperatureValue />
+    <ParameterSliderComponent Id="slider-temperature"
+                              Class="label-with-tooltip"
+                              LabelText="Temperature"
+                              TooltipText="Controls randomness. Lowering the temperature means that the model will produce more repetitive and deterministic responses. Increasing the temperature will result in more unexpected or creative responses. Try adjusting temperature or Top P but not both."
+                              Min="0" Max="1" Step="0.01" @bind-Value=@temperatureValue />
 
     @* Top P Slider *@
-    <LabelWithTooltip Id="slider-top-p"
-                      Class="label-with-tooltip"
-                      LabelText="Top P"
-                      TooltipText="Similar to temperature, this controls randomness but uses a different method. Lowering Top P will narrow the model’s token selection to likelier tokens. Increasing Top P will let the model choose from tokens with both high and low likelihood. Try adjusting temperature or Top P but not both." />
-
-    <SliderWithTextfield Class="slider-with-text" Min="0" Max="1" Step="0.01" @bind-Value=@topPValue />
+    <ParameterSliderComponent Id="slider-top-p"
+                              Class="label-with-tooltip"
+                              LabelText="Top P"
+                              TooltipText="Similar to temperature, this controls randomness but uses a different method. Lowering Top P will narrow the model’s token selection to likelier tokens. Increasing Top P will let the model choose from tokens with both high and low likelihood. Try adjusting temperature or Top P but not both."
+                              Min="0" Max="1" Step="0.01" @bind-Value=@topPValue />
 
     @* Stop Sequence Auto Complete *@
-    <LabelWithTooltip Id="complete-stop-sequence"
-                      Class="label-with-tooltip"
-                      LabelText="Stop sequence"
-                      TooltipText="Make the model end its response at a desired point. The model response will end before the specified sequence, so it won't contain the stop sequence text. For ChatGPT, using <|im_end|> ensures that the model response doesn't generate a follow-up user query. You can include as many as four stop sequences." />
-
-    <FluentAutocomplete TOption="string" Multiple="true" AutoComplete="false"
-                        ShowOverlayOnEmptyResults="false"
-                        SelectValueOnTab="true"
-                        MaximumOptionsSearch="1"
-                        @bind-SelectedOptions=stopSequenceValue
-                        OnOptionsSearch=OnSearchAsync
-                        Style="width:95%;padding:5px 0px;margin: 0 auto">
-        <OptionTemplate>
-            <FluentLabel>Create "@(context)"</FluentLabel>
-        </OptionTemplate>
-    </FluentAutocomplete>
+    <ParameterListComponent Id="complete-stop-sequence"
+                            LabelText="Stop sequence"
+                            TooltipText="Make the model end its response at a desired point. The model response will end before the specified sequence, so it won't contain the stop sequence text. For ChatGPT, using <|im_end|> ensures that the model response doesn't generate a follow-up user query. You can include as many as four stop sequences." />
 
     @* Frequency Penalty Slider *@
-    <LabelWithTooltip Id="slider-frequency-penalty"
-                      Class="label-with-tooltip"
-                      LabelText="Frequency penalty"
-                      TooltipText="Reduce the chance of repeating a token proportionally based on how often it has appeared in the text so far. This decreases the likelihood of repeating the exact same text in a response." />
-
-    <SliderWithTextfield Class="slider-with-text" Min="0" Max="2" Step="0.01" @bind-Value=@frequencyPenaltyValue />
+    <ParameterSliderComponent Id="slider-frequency-penalty"
+                              Class="label-with-tooltip"
+                              LabelText="Frequency penalty"
+                              TooltipText="Reduce the chance of repeating a token proportionally based on how often it has appeared in the text so far. This decreases the likelihood of repeating the exact same text in a response."
+                              Min="0" Max="2" Step="0.01" @bind-Value=@frequencyPenaltyValue />
 
     @* Presence Penalty Slider *@
-    <LabelWithTooltip Id="slider-presence-penalty"
-                      Class="label-with-tooltip"
-                      LabelText="Presence penalty"
-                      TooltipText="Reduce the chance of repeating any token that has appeared in the text at all so far. This increases the likelihood of introducing new topics in a response." />
-
-    <SliderWithTextfield Class="slider-with-text" Min="0" Max="2" Step="0.01" @bind-Value=@presencePenaltyValue />
-
+    <ParameterSliderComponent Id="slider-presence-penalty"
+                              Class="label-with-tooltip"
+                              LabelText="Presence penalty"
+                              TooltipText="Reduce the chance of repeating any token that has appeared in the text at all so far. This increases the likelihood of introducing new topics in a response."
+                              Min="0" Max="2" Step="0.01" @bind-Value=@presencePenaltyValue />
 </div>
 
 @code {
@@ -84,16 +69,4 @@
 
     private IEnumerable<string> stopSequenceValue = new List<string>();
     private List<string> searchTextItems = new();
-
-    private Task OnSearchAsync(OptionsSearchEventArgs<string> e)
-    {
-        searchTextItems.Clear();
-        if (string.IsNullOrEmpty(e.Text) || stopSequenceValue.Contains(e.Text))
-            return Task.CompletedTask;
-
-        searchTextItems.Add(e.Text);
-        e.Items = searchTextItems;
-
-        return Task.CompletedTask;
-    }
 }
\ No newline at end of file
diff --git a/src/AzureOpenAIProxy.PlaygroundApp/Components/UI/ParametersTabComponent.razor.css b/src/AzureOpenAIProxy.PlaygroundApp/Components/UI/ParametersTabComponent.razor.css
deleted file mode 100644
index acab3cf1..00000000
--- a/src/AzureOpenAIProxy.PlaygroundApp/Components/UI/ParametersTabComponent.razor.css
+++ /dev/null
@@ -1,9 +0,0 @@
-::deep .label-with-tooltip {
-    padding-left: 10px;
-    font-weight: bold;
-}
-
-::deep .slider-with-text {
-    padding-left: 5px;
-    padding-right: 10px;
-}
\ No newline at end of file