Skip to content

Commit 78f5a1f

Browse files
juhangiljuhangil
committed
Move inline styles to isolated css file
1 parent d4d68a8 commit 78f5a1f

File tree

4 files changed

+52
-40
lines changed

4 files changed

+52
-40
lines changed

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

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
@inherits FluentComponentBase
2-
<FluentLabel Typo="Typography.Body" Style=@Style>
2+
3+
<div class=@Class>
34
@LabelText
45

56
@* Tooltip Image *@
@@ -10,8 +11,7 @@
1011
Style="line-break:anywhere">
1112
@TooltipText
1213
</FluentTooltip>
13-
14-
</FluentLabel>
14+
</div>
1515

1616
@code {
1717
[Parameter, EditorRequired]
@@ -22,9 +22,9 @@
2222

2323
private string anchorId = string.Empty;
2424

25-
protected override void OnParametersSet()
25+
protected override void OnInitialized()
2626
{
27-
base.OnParametersSet();
27+
base.OnInitialized();
2828
anchorId = $"{Id}-tooltip";
2929
}
3030
}

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

Lines changed: 23 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -1,43 +1,44 @@
11
@using System.Linq
22

3-
<FluentLayout Id="@Id">
3+
<div id="@Id">
44

55
@* Past Messages Slider *@
66
<LabelWithTooltip Id="slider-past-messages"
7+
Class="label-with-tooltip"
78
LabelText="Past messages included"
8-
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."
9-
Style="padding-left:10px;font-weight:bold" />
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." />
1010

11-
<SliderWithTextfield Min="1" Max="20" Step="1" @bind-Value=@pastMessagesValue Style="padding-left:5px;padding-right:10px;" />
11+
<SliderWithTextfield Class="slider-with-text" Min="1" Max="20" Step="1" @bind-Value=@pastMessagesValue />
1212

1313
@* Max Response Slider *@
1414
<LabelWithTooltip Id="slider-max-response"
15+
Class="label-with-tooltip"
1516
LabelText="Max response"
16-
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."
17-
Style="padding-left:10px;font-weight:bold" />
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." />
1818

19-
<SliderWithTextfield Min="1" Max="16000" Step="1" @bind-Value=@maxResponseValue Style="padding-left:5px;padding-right:10px;" />
19+
<SliderWithTextfield Class="slider-with-text" Min="1" Max="16000" Step="1" @bind-Value=@maxResponseValue />
2020

2121
@* Temperature Slider *@
2222
<LabelWithTooltip Id="slider-temperature"
23+
Class="label-with-tooltip"
2324
LabelText="Temperature"
24-
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."
25-
Style="padding-left:10px;font-weight:bold" />
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." />
2626

27-
<SliderWithTextfield Min="0" Max="1" Step="0.01" @bind-Value=@temperatureValue Style="padding-left:5px;padding-right:10px;" />
27+
<SliderWithTextfield Class="slider-with-text" Min="0" Max="1" Step="0.01" @bind-Value=@temperatureValue />
2828

2929
@* Top P Slider *@
3030
<LabelWithTooltip Id="slider-top-p"
31+
Class="label-with-tooltip"
3132
LabelText="Top P"
32-
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."
33-
Style="padding-left:10px;font-weight:bold" />
34-
<SliderWithTextfield Min="0" Max="1" Step="0.01" @bind-Value=@topPValue Style="padding-left:5px;padding-right:10px;" />
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 />
3536

3637
@* Stop Sequence Auto Complete *@
3738
<LabelWithTooltip Id="complete-stop-sequence"
39+
Class="label-with-tooltip"
3840
LabelText="Stop sequence"
39-
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."
40-
Style="padding-left:10px;font-weight:bold" />
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." />
4142

4243
<FluentAutocomplete TOption="string" Multiple="true" AutoComplete="false"
4344
ShowOverlayOnEmptyResults="false"
@@ -53,21 +54,21 @@
5354

5455
@* Frequency Penalty Slider *@
5556
<LabelWithTooltip Id="slider-frequency-penalty"
57+
Class="label-with-tooltip"
5658
LabelText="Frequency penalty"
57-
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."
58-
Style="padding-left:10px;font-weight:bold" />
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." />
5960

60-
<SliderWithTextfield Min="0" Max="2" Step="0.01" @bind-Value=@frequencyPenaltyValue Style="padding-left:5px;padding-right:10px;" />
61+
<SliderWithTextfield Class="slider-with-text" Min="0" Max="2" Step="0.01" @bind-Value=@frequencyPenaltyValue />
6162

6263
@* Presence Penalty Slider *@
6364
<LabelWithTooltip Id="slider-presence-penalty"
65+
Class="label-with-tooltip"
6466
LabelText="Presence penalty"
65-
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."
66-
Style="padding-left:10px;font-weight:bold" />
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." />
6768

68-
<SliderWithTextfield Min="0" Max="2" Step="0.01" @bind-Value=@presencePenaltyValue Style="padding-left:5px;padding-right:10px;" />
69+
<SliderWithTextfield Class="slider-with-text" Min="0" Max="2" Step="0.01" @bind-Value=@presencePenaltyValue />
6970

70-
</FluentLayout>
71+
</div>
7172

7273
@code {
7374
[Parameter]

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

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
::deep .label-with-tooltip {
2+
padding-left: 10px;
3+
font-weight: bold;
4+
}
5+
6+
::deep .slider-with-text {
7+
padding-left: 5px;
8+
padding-right: 10px;
9+
}

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

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

4-
<FluentStack Orientation="Orientation.Horizontal" Style=@Style>
4+
<div class=@Class>
5+
<FluentStack Orientation="Orientation.Horizontal">
56

6-
<FluentSlider Min="@Min" Max="@Max" Step="@Step"
7-
@bind-Value=Value @bind-Value:after=AfterSliderChange
8-
Style="width:88%;padding-top:15px;" />
7+
<FluentSlider Min="@Min" Max="@Max" Step="@Step"
8+
@bind-Value=Value @bind-Value:after=AfterSliderChange
9+
Style="width:88%;padding-top:15px;" />
910

10-
<FluentTextField @bind-Value=textFieldValue @bind-Value:after=AfterTextFieldChange
11-
Style="width:12%;padding-left:0px;font-size:9px" />
11+
<FluentTextField @bind-Value=textFieldValue @bind-Value:after=AfterTextFieldChange
12+
Style="width:12%;font-size:9px" />
1213

13-
</FluentStack>
14+
</FluentStack>
1415

15-
@if (!hasNoError)
16-
{
17-
<FluentCard Style="padding:10px;width:95%;margin:0 auto;border-color:crimson;background-color:lightcoral;color:black">
18-
@errorText
19-
</FluentCard>
20-
}
16+
@if (!hasNoError)
17+
{
18+
<FluentCard Style="padding:10px;width:95%;margin:0 auto;border-color:crimson;background-color:lightcoral;color:black">
19+
@errorText
20+
</FluentCard>
21+
}
22+
</div>
2123

2224
@code {
2325
[Parameter, EditorRequired]

0 commit comments

Comments
 (0)