Change component name and id

juhangil · Sep 25, 2024 · a25fd42 · a25fd42
1 parent 9acde67
commit a25fd42
Show file tree

Hide file tree

Showing 4 changed files with 33 additions and 39 deletions.
diff --git a/...ponents/UI/ParameterSliderComponent.razor → ...mponents/UI/ParameterRangeComponent.razor b/...ponents/UI/ParameterSliderComponent.razor → ...mponents/UI/ParameterRangeComponent.razor
diff --git a/...nts/UI/ParameterSliderComponent.razor.css → ...ents/UI/ParameterRangeComponent.razor.css b/...nts/UI/ParameterSliderComponent.razor.css → ...ents/UI/ParameterRangeComponent.razor.css
diff --git a/src/AzureOpenAIProxy.PlaygroundApp/Components/UI/ParametersTabComponent.razor b/src/AzureOpenAIProxy.PlaygroundApp/Components/UI/ParametersTabComponent.razor
@@ -1,44 +1,44 @@
 @using System.Linq
 
 <div id="@Id" class="parameter-tab">
-    @* Past Messages Slider *@
-    <ParameterSliderComponent Id="slider-past-messages"
+    @* Past Messages Range *@
+    <ParameterRangeComponent Id="range-past-messages"
                               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 *@
-    <ParameterSliderComponent Id="slider-max-response"
+    @* Max Response Range *@
+    <ParameterRangeComponent Id="range-max-response"
                               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 *@
-    <ParameterSliderComponent Id="slider-temperature"
+    @* Temperature Range *@
+    <ParameterRangeComponent Id="range-temperature"
                               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 *@
-    <ParameterSliderComponent Id="slider-top-p"
+    @* Top P Range *@
+    <ParameterRangeComponent Id="range-top-p"
                               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 *@
-    <ParameterMultiselectComponent Id="multiselect-stop-sequence"
+    @* Stop Sequence Multi Select *@
+    <ParameterMultiselectComponent Id="select-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."
                                    @ref=stopSequence />
 
-    @* Frequency Penalty Slider *@
-    <ParameterSliderComponent Id="slider-frequency-penalty"
+    @* Frequency Penalty Range *@
+    <ParameterRangeComponent Id="range-frequency-penalty"
                               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 *@
-    <ParameterSliderComponent Id="slider-presence-penalty"
+    @* Presence Penalty Range *@
+    <ParameterRangeComponent Id="range-presence-penalty"
                               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 />

diff --git a/test/AzureOpenAIProxy.PlaygroundApp.Tests/Pages/PlaygroundPageConfigWindowTests.cs b/test/AzureOpenAIProxy.PlaygroundApp.Tests/Pages/PlaygroundPageConfigWindowTests.cs
@@ -358,7 +358,7 @@ string expectedValue
         await applyButton.ClickAsync(new() { Delay = 500 });
         await resetButton.ClickAsync(new() { Delay = 500 });
         await Task.Delay(1000);
-        
+
         var actualValue = await systemMessageTextArea.GetAttributeAsync("value");
         var isApplyButtonEnabled = await applyButton.GetAttributeAsync("disabled");
         var isResetButtonEnabled = await resetButton.GetAttributeAsync("disabled");
@@ -368,27 +368,24 @@ string expectedValue
         isApplyButtonEnabled.Should().NotBeNull();
         isResetButtonEnabled.Should().NotBeNull();
     }
-    
-    [TestCase("slider-past-messages", "Past messages included")]
-    [TestCase("slider-max-response", "Max response")]
-    [TestCase("slider-temperature", "Temperature")]
-    [TestCase("slider-top-p", "Top P")]
-    [TestCase("slider-frequency-penalty", "Frequency penalty")]
-    [TestCase("slider-presence-penalty", "Presence penalty")]
+
+    [TestCase("range-past-messages", "Past messages included")]
+    [TestCase("range-max-response", "Max response")]
+    [TestCase("range-temperature", "Temperature")]
+    [TestCase("range-top-p", "Top P")]
+    [TestCase("range-frequency-penalty", "Frequency penalty")]
+    [TestCase("range-presence-penalty", "Presence penalty")]
     public async Task Given_ParameterTab_When_Updated_Then_Parameter_Slider_Should_Be_Visible(string id, string label)
     {
         // Arrange
-        var parameterTab = Page.Locator("div.config-grid")
-                               .Locator("fluent-tabs#config-tabs")
-                               .Locator("fluent-tab#parameters-tab");
+        var configTab = Page.Locator("div.config-grid")
+                            .Locator("fluent-tabs#config-tabs");
 
+        var parameterTab = configTab.Locator("fluent-tab#parameters-tab");
         await parameterTab.ClickAsync();
 
-        var component = Page.Locator("div.config-grid")
-                            .Locator("fluent-tabs#config-tabs")
-                            .Locator("fluent-tab-panel#parameters-tab-panel")
-                            .Locator($"div#{id}");
-
+        var component = configTab.Locator("fluent-tab-panel#parameters-tab-panel")
+                                 .Locator($"div#{id}");
         var labelComponent = component.Locator($"label[for='{id}-content']");
 
         // Act
@@ -403,21 +400,18 @@ public async Task Given_ParameterTab_When_Updated_Then_Parameter_Slider_Should_B
     }
 
     [Test]
-    [TestCase("multiselect-stop-sequence", "Stop sequence")]
+    [TestCase("select-stop-sequence", "Stop sequence")]
     public async Task Given_ParameterTab_When_Updated_Then_Parameter_MultiSelect_Should_Be_Visible(string id, string label)
     {
         // Arrange
-        var parameterTab = Page.Locator("div.config-grid")
-                               .Locator("fluent-tabs#config-tabs")
-                               .Locator("fluent-tab#parameters-tab");
+        var configTab = Page.Locator("div.config-grid")
+                            .Locator("fluent-tabs#config-tabs");
 
+        var parameterTab = configTab.Locator("fluent-tab#parameters-tab");
         await parameterTab.ClickAsync();
 
-        var component = Page.Locator("div.config-grid")
-                            .Locator("fluent-tabs#config-tabs")
-                            .Locator("fluent-tab-panel#parameters-tab-panel")
-                            .Locator($"div#{id}");
-
+        var component = configTab.Locator("fluent-tab-panel#parameters-tab-panel")
+                                 .Locator($"div#{id}");
         var labelComponent = component.Locator($"label[for='{id}-content']");
 
         // Act