AI-Studio/app/MindWork AI Studio/Dialogs/ProviderDialog.razor

@using AIStudio.Provider
@using AIStudio.Provider.HuggingFace
@using AIStudio.Provider.SelfHosted

<MudDialog>
    <DialogContent>
        <MudForm @ref="@this.form" @bind-IsValid="@this.dataIsValid" @bind-Errors="@this.dataIssues">
            <MudStack Row="@true" AlignItems="AlignItems.Center">
                @* ReSharper disable once CSharpWarnings::CS8974 *@
                <MudSelect @bind-Value="@this.DataLLMProvider" Label="Provider" Class="mb-3" OpenIcon="@Icons.Material.Filled.AccountBalance" AdornmentColor="Color.Info" Adornment="Adornment.Start" Validation="@this.providerValidation.ValidatingProvider">
                    @foreach (LLMProviders provider in Enum.GetValues(typeof(LLMProviders)))
                    {
                        <MudSelectItem Value="@provider">
                            @provider.ToName()
                        </MudSelectItem>
                    }
                </MudSelect>
                <MudButton Disabled="@(!this.DataLLMProvider.ShowRegisterButton())" Variant="Variant.Filled" Size="Size.Small" StartIcon="@Icons.Material.Filled.OpenInBrowser" Href="@this.DataLLMProvider.GetCreationURL()" Target="_blank">Create account</MudButton>
            </MudStack>
            
            @if (this.DataLLMProvider.IsAPIKeyNeeded(this.DataHost))
            {
                @* ReSharper disable once CSharpWarnings::CS8974 *@
                <MudTextField
                    T="string"
                    @bind-Text="@this.dataAPIKey"
                    Label="@this.APIKeyText"
                    Class="mb-3"
                    Adornment="Adornment.Start"
                    AdornmentIcon="@Icons.Material.Filled.VpnKey"
                    AdornmentColor="Color.Info"
                    InputType="InputType.Password"
                    Immediate="true"
                    Validation="@this.providerValidation.ValidatingAPIKey"/>
            }

            @if (this.DataLLMProvider.IsHostnameNeeded())
            {
                <MudTextField
                    T="string"
                    @bind-Text="@this.DataHostname"
                    Label="Hostname"
                    Class="mb-3"
                    Adornment="Adornment.Start"
                    AdornmentIcon="@Icons.Material.Filled.Dns"
                    AdornmentColor="Color.Info"
                    Validation="@this.providerValidation.ValidatingHostname"
                    UserAttributes="@SPELLCHECK_ATTRIBUTES"/>
            }

            @if (this.DataLLMProvider.IsHostNeeded())
            {
                <MudSelect @bind-Value="@this.DataHost" Label="Host" Class="mb-3" OpenIcon="@Icons.Material.Filled.ExpandMore" AdornmentColor="Color.Info" Adornment="Adornment.Start" Validation="@this.providerValidation.ValidatingHost">
                    @foreach (Host host in Enum.GetValues(typeof(Host)))
                    {
                        <MudSelectItem Value="@host">
                            @host.Name()
                        </MudSelectItem>
                    }
                </MudSelect>
            }

            @if (this.DataLLMProvider.IsHFInstanceProviderNeeded())
            {
                <MudSelect @bind-Value="@this.HFInferenceProviderId" Label="Hugging Face Inference Provider" Class="mb-3" OpenIcon="@Icons.Material.Filled.Dns" AdornmentColor="Color.Info" Adornment="Adornment.Start" Validation="@this.providerValidation.ValidatingHFInstanceProvider">
                    @foreach (HFInferenceProvider inferenceProvider in Enum.GetValues(typeof(HFInferenceProvider)))
                    {
                        <MudSelectItem Value="@inferenceProvider">
                            @inferenceProvider.ToName()
                        </MudSelectItem>
                    }
                </MudSelect>
                
                <MudJustifiedText Class="mb-3"> Please double-check if your model name matches the curl specifications provided by the inference provider. If it doesn't, you might get a <b>Not Found</b> error when trying to use the model. Here's a <MudLink Href="https://huggingface.co/meta-llama/Llama-3.1-8B-Instruct?inference_api=true&inference_provider=novita&language=sh" Target="_blank">curl example</MudLink>.</MudJustifiedText>
            }

            <MudField FullWidth="true" Label="Model selection" Variant="Variant.Outlined" Class="mb-3">
                <MudStack Row="@true" AlignItems="AlignItems.Baseline" StretchItems="StretchItems.End">
                    @if (this.DataLLMProvider.IsLLMModelProvidedManually())
                    {
                        <MudButton Variant="Variant.Filled" Size="Size.Small" StartIcon="@Icons.Material.Filled.OpenInBrowser" Href="@this.DataLLMProvider.GetModelsOverviewURL(this.HFInferenceProviderId)" Target="_blank">
                            Show available models
                        </MudButton>
                        <MudTextField
                            T="string"
                            @bind-Text="@this.dataManuallyModel"
                            Label="Model"
                            Adornment="Adornment.Start"
                            AdornmentIcon="@Icons.Material.Filled.FaceRetouchingNatural"
                            AdornmentColor="Color.Info"
                            Validation="@this.ValidateManuallyModel"
                            UserAttributes="@SPELLCHECK_ATTRIBUTES"
                        />
                    }
                    else
                    {
                        <MudButton Disabled="@(!this.DataLLMProvider.CanLoadModels(this.DataHost, this.dataAPIKey))" Variant="Variant.Filled" Size="Size.Small" StartIcon="@Icons.Material.Filled.Refresh" OnClick="this.ReloadModels">
                            Load models
                        </MudButton>
                        @if(this.availableModels.Count is 0)
                        {
                            <MudText Typo="Typo.body1">
                                No models loaded or available.
                            </MudText>
                        }
                        else
                        {
                            <MudSelect @bind-Value="@this.DataModel"
                                       OpenIcon="@Icons.Material.Filled.FaceRetouchingNatural" AdornmentColor="Color.Info"
                                       Adornment="Adornment.Start" Validation="@this.providerValidation.ValidatingModel">
                                @foreach (var model in this.availableModels)
                                {
                                    <MudSelectItem Value="@model">@model</MudSelectItem>
                                }
                            </MudSelect>
                        }
                    }
                </MudStack>
            </MudField>

            @* ReSharper disable once CSharpWarnings::CS8974 *@
            <MudTextField
                T="string"
                @bind-Text="@this.DataInstanceName"
                Label="Instance Name"
                Class="mb-3"
                MaxLength="40"
                Counter="40"
                Immediate="@true"
                Adornment="Adornment.Start"
                AdornmentIcon="@Icons.Material.Filled.Lightbulb"
                AdornmentColor="Color.Info"
                Validation="@this.providerValidation.ValidatingInstanceName"
                UserAttributes="@SPELLCHECK_ATTRIBUTES"
            />
            
        </MudForm>
        <Issues IssuesData="@this.dataIssues"/>
    </DialogContent>
    <DialogActions>
        <MudButton OnClick="@this.Cancel" Variant="Variant.Filled">Cancel</MudButton>
        <MudButton OnClick="@this.Store" Variant="Variant.Filled" Color="Color.Primary">
            @if(this.IsEditing)
            {
                @:Update
            }
            else
            {
                @:Add
            }
        </MudButton>
    </DialogActions>
</MudDialog>