Skip to content

Commit e7db750

Browse files
juhangiljuhangil
committed
Move position css of child component to parent
1 parent cb56739 commit e7db750

File tree

3 files changed

+37
-20
lines changed

3 files changed

+37
-20
lines changed

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

Lines changed: 8 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,10 @@
1-
<FluentLabel Typo="Typography.Body" Style="margin-left:10px">
1+
<FluentLabel Typo="Typography.Body" Style=@Style>
22
@LabelText
33
<FluentIcon Id=@anchorId Value="@(new Icons.Regular.Size12.Info())" />
4-
<FluentTooltip Anchor=@anchorId Position="TooltipPosition.End" MaxWidth="250px" UseTooltipService="false">
4+
<FluentTooltip Anchor=@anchorId Position="TooltipPosition.End"
5+
UseTooltipService="false"
6+
MaxWidth="250px"
7+
Style="line-break:anywhere">
58
@TooltipText
69
</FluentTooltip>
710
</FluentLabel>
@@ -16,6 +19,9 @@
1619
[Parameter, EditorRequired]
1720
public string TooltipText { get; set; } = string.Empty;
1821

22+
[Parameter]
23+
public string? Style { get; set; } = null;
24+
1925
private string anchorId = string.Empty;
2026

2127
protected override void OnParametersSet()

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

Lines changed: 21 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -3,27 +3,33 @@
33
<FluentLayout Id="@Id">
44
<LabelWithTooltip Id="slider-past-messages"
55
LabelText="Past messages included"
6-
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." />
7-
<SliderWithTextfield Min="1" Max="20" Step="1" @bind-Value=@pastMessagesValue />
6+
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."
7+
Style="padding-left:10px;font-weight:bold" />
8+
9+
<SliderWithTextfield Min="1" Max="20" Step="1" @bind-Value=@pastMessagesValue Style="padding-left:5px;padding-right:10px;" />
810

911
<LabelWithTooltip Id="slider-max-response"
1012
LabelText="Max response"
11-
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." />
12-
<SliderWithTextfield Min="1" Max="16000" Step="1" @bind-Value=@maxResponseValue />
13+
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."
14+
Style="padding-left:10px;font-weight:bold" />
15+
<SliderWithTextfield Min="1" Max="16000" Step="1" @bind-Value=@maxResponseValue Style="padding-left:5px;padding-right:10px;" />
1316

1417
<LabelWithTooltip Id="slider-temperature"
1518
LabelText="Temperature"
16-
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." />
17-
<SliderWithTextfield Min="0" Max="1" Step="0.01" @bind-Value=@temperatureValue />
19+
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."
20+
Style="padding-left:10px;font-weight:bold" />
21+
<SliderWithTextfield Min="0" Max="1" Step="0.01" @bind-Value=@temperatureValue Style="padding-left:5px;padding-right:10px;" />
1822

1923
<LabelWithTooltip Id="slider-top-p"
2024
LabelText="Top P"
21-
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." />
22-
<SliderWithTextfield Min="0" Max="1" Step="0.01" @bind-Value=@topPValue />
25+
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."
26+
Style="padding-left:10px;font-weight:bold" />
27+
<SliderWithTextfield Min="0" Max="1" Step="0.01" @bind-Value=@topPValue Style="padding-left:5px;padding-right:10px;" />
2328

2429
<LabelWithTooltip Id="complete-stop-sequence"
2530
LabelText="Stop sequence"
26-
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." />
31+
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."
32+
Style="padding-left:10px;font-weight:bold" />
2733

2834
<FluentAutocomplete TOption="string" Multiple="true" AutoComplete="false"
2935
ShowOverlayOnEmptyResults="false"
@@ -39,13 +45,15 @@
3945

4046
<LabelWithTooltip Id="slider-frequency-penalty"
4147
LabelText="Frequency penalty"
42-
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." />
43-
<SliderWithTextfield Min="0" Max="2" Step="0.01" @bind-Value=@frequencyPenaltyValue />
48+
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."
49+
Style="padding-left:10px;font-weight:bold" />
50+
<SliderWithTextfield Min="0" Max="2" Step="0.01" @bind-Value=@frequencyPenaltyValue Style="padding-left:5px;padding-right:10px;" />
4451

4552
<LabelWithTooltip Id="slider-presence-penalty"
4653
LabelText="Presence penalty"
47-
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." />
48-
<SliderWithTextfield Min="0" Max="2" Step="0.01" @bind-Value=@presencePenaltyValue />
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+
Style="padding-left:10px;font-weight:bold" />
56+
<SliderWithTextfield Min="0" Max="2" Step="0.01" @bind-Value=@presencePenaltyValue Style="padding-left:5px;padding-right:10px;" />
4957
</FluentLayout>
5058

5159
@code {

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

Lines changed: 8 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,18 @@
11
@typeparam TValue where TValue : System.Numerics.INumber<TValue>
22

3-
<FluentStack Orientation="Orientation.Horizontal">
3+
<FluentStack Orientation="Orientation.Horizontal" Style=@Style>
44
<FluentSlider Min="@Min" Max="@Max" Step="@Step"
55
@bind-Value=Value @bind-Value:after=AfterSliderChange
6-
Style="width:85%;padding-left:5px;padding-top:15px" />
6+
Style="width:88%;padding-top:15px;" />
77
<FluentTextField @bind-Value=textFieldValue @bind-Value:after=AfterTextFieldChange
8-
Style="width:15%;padding-right:10px" />
8+
Style="width:12%;padding-left:0px" />
99
</FluentStack>
1010

1111
@if (!hasNoError)
1212
{
13-
<FluentCard Style="padding:10px;width:95%;margin:0 auto;border-color:red;background-color:ghostwhite;color:red">
13+
<FluentCard Style="padding:10px;width:95%;margin:0 auto;border-color:crimson;background-color:lightcoral;color:black">
1414
@errorText
15-
</FluentCard>
15+
</FluentCard>
1616
}
1717

1818
@code {
@@ -34,6 +34,9 @@
3434
[Parameter]
3535
public EventCallback OnChangeEvent { get; set; }
3636

37+
[Parameter]
38+
public string? Style { get; set; } = null;
39+
3740
public string? textFieldValue { get; set; }
3841

3942
private bool hasNoError = true;

0 commit comments

Comments
 (0)