Skip to content

Commit 669c3bd

Browse files
juhangiljuhangil
committed
Move label component to slider and list
1 parent 2019a70 commit 669c3bd

File tree

6 files changed

+154
-119
lines changed

6 files changed

+154
-119
lines changed

‎src/AzureOpenAIProxy.PlaygroundApp/Components/UI/LabelWithTooltip.razor‎

Lines changed: 0 additions & 30 deletions
This file was deleted.

‎src/AzureOpenAIProxy.PlaygroundApp/Components/UI/ParameterListComponent.razor‎

Lines changed: 56 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,56 @@
1+
@inherits FluentComponentBase
2+
3+
<div id="@Id">
4+
<label id=@($"{Id}-label") for=@($"{Id}-content")
5+
style="display:inline-block;padding-left:5px;font-weight:bold;">
6+
@LabelText
7+
8+
@* Tooltip Image *@
9+
<FluentIcon Id=@($"{Id}-anchor") Value="@(new Icons.Regular.Size12.Info())" />
10+
<FluentTooltip Id=@($"{Id}-tooltip")
11+
Anchor=@($"{Id}-anchor")
12+
Position="TooltipPosition.End"
13+
UseTooltipService="false"
14+
MaxWidth="250px"
15+
Style="line-break:anywhere">
16+
@TooltipText
17+
</FluentTooltip>
18+
</label>
19+
20+
<div id=@($"{Id}-content")>
21+
<FluentAutocomplete TOption="string" Multiple="true" AutoComplete="false"
22+
ShowOverlayOnEmptyResults="false"
23+
SelectValueOnTab="true"
24+
MaximumOptionsSearch="1"
25+
@bind-SelectedOptions=stopSequenceValue
26+
OnOptionsSearch=OnSearchAsync
27+
Style="width:95%;padding:5px 0px;margin: 0 auto">
28+
<OptionTemplate>
29+
<FluentLabel>Create "@(context)"</FluentLabel>
30+
</OptionTemplate>
31+
</FluentAutocomplete>
32+
</div>
33+
</div>
34+
35+
@code {
36+
[Parameter, EditorRequired]
37+
public string LabelText { get; set; } = string.Empty;
38+
39+
[Parameter, EditorRequired]
40+
public string TooltipText { get; set; } = string.Empty;
41+
42+
private IEnumerable<string> stopSequenceValue = new List<string>();
43+
private List<string> searchTextItems = new();
44+
45+
private Task OnSearchAsync(OptionsSearchEventArgs<string> e)
46+
{
47+
searchTextItems.Clear();
48+
if (string.IsNullOrEmpty(e.Text) || stopSequenceValue.Contains(e.Text))
49+
return Task.CompletedTask;
50+
51+
searchTextItems.Add(e.Text);
52+
e.Items = searchTextItems;
53+
54+
return Task.CompletedTask;
55+
}
56+
}

‎src/AzureOpenAIProxy.PlaygroundApp/Components/UI/SliderWithTextfield.razor‎ renamed to ‎src/AzureOpenAIProxy.PlaygroundApp/Components/UI/ParameterSliderComponent.razor‎

Lines changed: 34 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,38 @@
11
@inherits FluentComponentBase
22
@typeparam TValue where TValue : System.Numerics.INumber<TValue>
33

4-
<div class=@Class>
5-
<FluentStack Orientation="Orientation.Horizontal">
6-
7-
<FluentSlider Min="@Min" Max="@Max" Step="@Step"
8-
@bind-Value=Value @bind-Value:after=AfterSliderChange
9-
Style="width:88%;padding-top:15px;" />
10-
11-
<FluentTextField @bind-Value=textFieldValue @bind-Value:after=AfterTextFieldChange
12-
Style="width:12%;font-size:9px" />
4+
<div id="@Id">
5+
<label id=@($"{Id}-label") class="parameter-label" for=@($"{Id}-content")>
6+
@LabelText
7+
8+
@* Tooltip Image *@
9+
<FluentIcon Id=@($"{Id}-anchor") Value="@(new Icons.Regular.Size12.Info())" />
10+
<FluentTooltip Id=@($"{Id}-tooltip")
11+
Anchor=@($"{Id}-anchor")
12+
Position="TooltipPosition.End"
13+
UseTooltipService="false"
14+
MaxWidth="250px"
15+
Style="line-break:anywhere">
16+
@TooltipText
17+
</FluentTooltip>
18+
</label>
19+
20+
<FluentStack Id=@($"{Id}-content")
21+
Orientation="Orientation.Horizontal"
22+
Style="column-gap:0px">
23+
24+
<FluentSlider Class="parameter-slider"
25+
Min="@Min" Max="@Max" Step="@Step"
26+
@bind-Value=Value @bind-Value:after=AfterSliderChange />
27+
28+
<FluentTextField Class="parameter-textfield"
29+
@bind-Value=textFieldValue @bind-Value:after=AfterTextFieldChange />
1330

1431
</FluentStack>
1532

1633
@if (!hasNoError)
1734
{
18-
<FluentCard Style="padding:10px;width:95%;margin:0 auto;border-color:crimson;background-color:lightcoral;color:black">
35+
<FluentCard Class="parameter-error">
1936
@errorText
2037
</FluentCard>
2138
}
@@ -37,8 +54,11 @@
3754
[Parameter]
3855
public EventCallback<TValue> ValueChanged { get; set; }
3956

40-
[Parameter]
41-
public EventCallback OnChangeEvent { get; set; }
57+
[Parameter, EditorRequired]
58+
public string LabelText { get; set; } = string.Empty;
59+
60+
[Parameter, EditorRequired]
61+
public string TooltipText { get; set; } = string.Empty;
4262

4363
public string? textFieldValue { get; set; }
4464

@@ -47,9 +67,10 @@
4767

4868
protected override void OnInitialized()
4969
{
50-
base.OnInitialized();
5170
textFieldValue = Value!.ToString();
5271
errorText = $"Only numbers between {Min} and {Max} are permitted";
72+
73+
base.OnInitialized();
5374
}
5475

5576
private async Task AfterSliderChange()
@@ -58,7 +79,6 @@
5879
textFieldValue = Value!.ToString();
5980

6081
await ValueChanged.InvokeAsync(Value);
61-
await OnChangeEvent.InvokeAsync();
6282
}
6383

6484
private async Task AfterTextFieldChange()
@@ -73,6 +93,5 @@
7393

7494
this.Value = parsed;
7595
await ValueChanged.InvokeAsync(Value);
76-
await OnChangeEvent.InvokeAsync();
7796
}
7897
}

‎src/AzureOpenAIProxy.PlaygroundApp/Components/UI/ParameterSliderComponent.razor.css‎

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
::deep .parameter-label {
2+
display: inline-block;
3+
padding-left: 5px;
4+
font-weight: bold;
5+
font-size: 8px;
6+
}
7+
8+
::deep .parameter-slider {
9+
width: 88%;
10+
padding-top: 15px;
11+
}
12+
13+
::deep .parameter-textfield {
14+
width: 12%;
15+
font-size: 9px;
16+
padding-right: 5px;
17+
}
18+
19+
::deep .parameter-error {
20+
padding: 10px;
21+
width: 95%;
22+
margin: 5px auto;
23+
border-color: crimson;
24+
background-color: lightcoral;
25+
color: black
26+
}

‎src/AzureOpenAIProxy.PlaygroundApp/Components/UI/ParametersTabComponent.razor‎

Lines changed: 38 additions & 65 deletions
Original file line numberDiff line numberDiff line change
@@ -1,73 +1,58 @@
11
@using System.Linq
22

33
<div id="@Id">
4+
<ParameterSliderComponent Id="slider-pastmessages"
5+
Class="label-with-tooltip"
6+
LabelText="Past messages included"
7+
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."
8+
Min="1" Max="20" Step="1" @bind-Value=@pastMessagesValue />
49

510
@* Past Messages Slider *@
6-
<LabelWithTooltip Id="slider-past-messages"
7-
Class="label-with-tooltip"
8-
LabelText="Past messages included"
9-
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." />
10-
11-
<SliderWithTextfield Class="slider-with-text" Min="1" Max="20" Step="1" @bind-Value=@pastMessagesValue />
11+
<ParameterSliderComponent Id="slider-past-messages"
12+
Class="label-with-tooltip"
13+
LabelText="Past messages included"
14+
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."
15+
Min="1" Max="20" Step="1" @bind-Value=@pastMessagesValue />
1216

1317
@* Max Response Slider *@
14-
<LabelWithTooltip Id="slider-max-response"
15-
Class="label-with-tooltip"
16-
LabelText="Max response"
17-
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." />
18-
19-
<SliderWithTextfield Class="slider-with-text" Min="1" Max="16000" Step="1" @bind-Value=@maxResponseValue />
18+
<ParameterSliderComponent Id="slider-max-response"
19+
Class="label-with-tooltip"
20+
LabelText="Max response"
21+
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."
22+
Min="1" Max="16000" Step="1" @bind-Value=@maxResponseValue />
2023

2124
@* Temperature Slider *@
22-
<LabelWithTooltip Id="slider-temperature"
23-
Class="label-with-tooltip"
24-
LabelText="Temperature"
25-
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." />
26-
27-
<SliderWithTextfield Class="slider-with-text" Min="0" Max="1" Step="0.01" @bind-Value=@temperatureValue />
25+
<ParameterSliderComponent Id="slider-temperature"
26+
Class="label-with-tooltip"
27+
LabelText="Temperature"
28+
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."
29+
Min="0" Max="1" Step="0.01" @bind-Value=@temperatureValue />
2830

2931
@* Top P Slider *@
30-
<LabelWithTooltip Id="slider-top-p"
31-
Class="label-with-tooltip"
32-
LabelText="Top P"
33-
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." />
34-
35-
<SliderWithTextfield Class="slider-with-text" Min="0" Max="1" Step="0.01" @bind-Value=@topPValue />
32+
<ParameterSliderComponent Id="slider-top-p"
33+
Class="label-with-tooltip"
34+
LabelText="Top P"
35+
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."
36+
Min="0" Max="1" Step="0.01" @bind-Value=@topPValue />
3637

3738
@* Stop Sequence Auto Complete *@
38-
<LabelWithTooltip Id="complete-stop-sequence"
39-
Class="label-with-tooltip"
40-
LabelText="Stop sequence"
41-
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." />
42-
43-
<FluentAutocomplete TOption="string" Multiple="true" AutoComplete="false"
44-
ShowOverlayOnEmptyResults="false"
45-
SelectValueOnTab="true"
46-
MaximumOptionsSearch="1"
47-
@bind-SelectedOptions=stopSequenceValue
48-
OnOptionsSearch=OnSearchAsync
49-
Style="width:95%;padding:5px 0px;margin: 0 auto">
50-
<OptionTemplate>
51-
<FluentLabel>Create "@(context)"</FluentLabel>
52-
</OptionTemplate>
53-
</FluentAutocomplete>
39+
<ParameterListComponent Id="complete-stop-sequence"
40+
LabelText="Stop sequence"
41+
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." />
5442

5543
@* Frequency Penalty Slider *@
56-
<LabelWithTooltip Id="slider-frequency-penalty"
57-
Class="label-with-tooltip"
58-
LabelText="Frequency penalty"
59-
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." />
60-
61-
<SliderWithTextfield Class="slider-with-text" Min="0" Max="2" Step="0.01" @bind-Value=@frequencyPenaltyValue />
44+
<ParameterSliderComponent Id="slider-frequency-penalty"
45+
Class="label-with-tooltip"
46+
LabelText="Frequency penalty"
47+
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."
48+
Min="0" Max="2" Step="0.01" @bind-Value=@frequencyPenaltyValue />
6249

6350
@* Presence Penalty Slider *@
64-
<LabelWithTooltip Id="slider-presence-penalty"
65-
Class="label-with-tooltip"
66-
LabelText="Presence penalty"
67-
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." />
68-
69-
<SliderWithTextfield Class="slider-with-text" Min="0" Max="2" Step="0.01" @bind-Value=@presencePenaltyValue />
70-
51+
<ParameterSliderComponent Id="slider-presence-penalty"
52+
Class="label-with-tooltip"
53+
LabelText="Presence penalty"
54+
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."
55+
Min="0" Max="2" Step="0.01" @bind-Value=@presencePenaltyValue />
7156
</div>
7257

7358
@code {
@@ -84,16 +69,4 @@
8469

8570
private IEnumerable<string> stopSequenceValue = new List<string>();
8671
private List<string> searchTextItems = new();
87-
88-
private Task OnSearchAsync(OptionsSearchEventArgs<string> e)
89-
{
90-
searchTextItems.Clear();
91-
if (string.IsNullOrEmpty(e.Text) || stopSequenceValue.Contains(e.Text))
92-
return Task.CompletedTask;
93-
94-
searchTextItems.Add(e.Text);
95-
e.Items = searchTextItems;
96-
97-
return Task.CompletedTask;
98-
}
9972
}

‎src/AzureOpenAIProxy.PlaygroundApp/Components/UI/ParametersTabComponent.razor.css‎

Lines changed: 0 additions & 9 deletions
This file was deleted.

0 commit comments

Comments
 (0)