Added transcription providers (#619)

app/MindWork AI Studio/Components/Settings/SettingsPanelEmbeddings.razor

@@ -4,10 +4,10 @@
 
 @if (PreviewFeatures.PRE_RAG_2024.IsEnabled(this.SettingsManager))
 {
-    <ExpansionPanel HeaderIcon="@Icons.Material.Filled.IntegrationInstructions" HeaderText="@T("Configure Embeddings")">
+    <ExpansionPanel HeaderIcon="@Icons.Material.Filled.IntegrationInstructions" HeaderText="@T("Configure Embedding Providers")">
         <PreviewPrototype ApplyInnerScrollingFix="true"/>
         <MudText Typo="Typo.h4" Class="mb-3">
-            @T("Configured Embeddings")
+            @T("Configured Embedding Providers")
         </MudText>
         <MudJustifiedText Typo="Typo.body1" Class="mb-3">
             @T("Embeddings are a way to represent words, sentences, entire documents, or even images and videos as digital fingerprints. Just like each person has a unique fingerprint, embedding models create unique digital patterns that capture the meaning and characteristics of the content they analyze. When two things are similar in meaning or content, their digital fingerprints will look very similar. For example, the fingerprints for 'happy' and 'joyful' would be more alike than those for 'happy' and 'sad'.")
@@ -35,7 +35,7 @@
                 <MudTd>@context.Num</MudTd>
                 <MudTd>@context.Name</MudTd>
                 <MudTd>@context.UsedLLMProvider.ToName()</MudTd>
-                <MudTd>@this.GetEmbeddingProviderModelName(context)</MudTd>
+                <MudTd>@GetEmbeddingProviderModelName(context)</MudTd>
                 
                 <MudTd>
                     <MudStack Row="true" Class="mb-2 mt-2" Wrap="Wrap.Wrap">
@@ -43,10 +43,10 @@
                             <MudIconButton Color="Color.Info" Icon="@Icons.Material.Filled.OpenInBrowser" Href="@context.UsedLLMProvider.GetDashboardURL()" Target="_blank" Disabled="@(!context.UsedLLMProvider.HasDashboard())"/>
                         </MudTooltip>
                         <MudTooltip Text="@T("Edit")">
-                            <MudIconButton Color="Color.Info" Icon="@Icons.Material.Filled.Edit" OnClick="() => this.EditEmbeddingProvider(context)"/>
+                            <MudIconButton Color="Color.Info" Icon="@Icons.Material.Filled.Edit" OnClick="@(() => this.EditEmbeddingProvider(context))"/>
                         </MudTooltip>
                         <MudTooltip Text="@T("Delete")">
-                            <MudIconButton Color="Color.Error" Icon="@Icons.Material.Filled.Delete" OnClick="() => this.DeleteEmbeddingProvider(context)"/>
+                            <MudIconButton Color="Color.Error" Icon="@Icons.Material.Filled.Delete" OnClick="@(() => this.DeleteEmbeddingProvider(context))"/>
                         </MudTooltip>
                     </MudStack>
                 </MudTd>

app/MindWork AI Studio/Components/Settings/SettingsPanelEmbeddings.razor.cs

@@ -15,7 +15,7 @@ public partial class SettingsPanelEmbeddings : SettingsPanelBase
     [Parameter]
     public EventCallback<List<ConfigurationSelectData<string>>> AvailableEmbeddingProvidersChanged { get; set; }
     
-    private string GetEmbeddingProviderModelName(EmbeddingProvider provider)
+    private static string GetEmbeddingProviderModelName(EmbeddingProvider provider)
     {
         const int MAX_LENGTH = 36;
         var modelName = provider.Model.ToString();

app/MindWork AI Studio/Components/Settings/SettingsPanelProviders.razor

@@ -3,9 +3,9 @@
 @using AIStudio.Provider.SelfHosted
 @inherits SettingsPanelBase
 
-<ExpansionPanel HeaderIcon="@Icons.Material.Filled.Layers" HeaderText="@T("Configure Providers")">
+<ExpansionPanel HeaderIcon="@Icons.Material.Filled.Layers" HeaderText="@T("Configure LLM Providers")">
     <MudText Typo="Typo.h4" Class="mb-3">
-        @T("Configured Providers")
+        @T("Configured LLM Providers")
     </MudText>
     <MudJustifiedText Typo="Typo.body1" Class="mb-3">
         @T("What we call a provider is the combination of an LLM provider such as OpenAI and a model like GPT-4o. You can configure as many providers as you want. This way, you can use the appropriate model for each task. As an LLM provider, you can also choose local providers. However, to use this app, you must configure at least one provider.")
@@ -32,11 +32,11 @@
             <MudTd>
                 @if (context.UsedLLMProvider is not LLMProviders.SELF_HOSTED)
                 {
-                    @this.GetLLMProviderModelName(context)
+                    @GetLLMProviderModelName(context)
                 }
-                else if (context.UsedLLMProvider is LLMProviders.SELF_HOSTED && context.Host is not Host.LLAMACPP)
+                else if (context.UsedLLMProvider is LLMProviders.SELF_HOSTED && context.Host is not Host.LLAMA_CPP)
                 {
-                    @this.GetLLMProviderModelName(context)
+                    @GetLLMProviderModelName(context)
                 }
                 else
                 {
@@ -57,10 +57,10 @@
                             <MudIconButton Color="Color.Info" Icon="@Icons.Material.Filled.OpenInBrowser" Href="@context.UsedLLMProvider.GetDashboardURL()" Target="_blank" Disabled="@(!context.UsedLLMProvider.HasDashboard())"/>
                         </MudTooltip>
                         <MudTooltip Text="@T("Edit")">
-                            <MudIconButton Color="Color.Info" Icon="@Icons.Material.Filled.Edit" OnClick="() => this.EditLLMProvider(context)"/>
+                            <MudIconButton Color="Color.Info" Icon="@Icons.Material.Filled.Edit" OnClick="@(() => this.EditLLMProvider(context))"/>
                         </MudTooltip>
                         <MudTooltip Text="@T("Delete")">
-                            <MudIconButton Color="Color.Error" Icon="@Icons.Material.Filled.Delete" OnClick="() => this.DeleteLLMProvider(context)"/>
+                            <MudIconButton Color="Color.Error" Icon="@Icons.Material.Filled.Delete" OnClick="@(() => this.DeleteLLMProvider(context))"/>
                         </MudTooltip>
                     }
                 </MudStack>

app/MindWork AI Studio/Components/Settings/SettingsPanelProviders.razor.cs

@@ -134,7 +134,7 @@ public partial class SettingsPanelProviders : SettingsPanelBase
         await this.MessageBus.SendMessage<bool>(this, Event.CONFIGURATION_CHANGED);
     }
 
-    private string GetLLMProviderModelName(AIStudio.Settings.Provider provider)
+    private static string GetLLMProviderModelName(AIStudio.Settings.Provider provider)
     {
         const int MAX_LENGTH = 36;
         var modelName = provider.Model.ToString();

app/MindWork AI Studio/Components/Settings/SettingsPanelTranscription.razor

@@ -0,0 +1,64 @@
+@using AIStudio.Provider
+@using AIStudio.Settings.DataModel
+@inherits SettingsPanelBase
+
+@if (PreviewFeatures.PRE_SPEECH_TO_TEXT_2026.IsEnabled(this.SettingsManager))
+{
+    <ExpansionPanel HeaderIcon="@Icons.Material.Filled.VoiceChat" HeaderText="@T("Configure Transcription Providers")">
+        <PreviewPrototype ApplyInnerScrollingFix="true"/>
+        <MudText Typo="Typo.h4" Class="mb-3">
+            @T("Configured Transcription Providers")
+        </MudText>
+        <MudJustifiedText Typo="Typo.body1" Class="mb-3">
+            @T("With the support of transcription models, MindWork AI Studio can convert human speech into text. This is useful, for example, when you need to dictate text. You can choose from dedicated transcription models, but not multimodal LLMs (large language models) that can handle both speech and text. The configuration of multimodal models is done in the \"Configure providers\" section.")
+        </MudJustifiedText>
+        
+        <MudTable Items="@this.SettingsManager.ConfigurationData.TranscriptionProviders" Hover="@true" Class="border-dashed border rounded-lg">
+            <ColGroup>
+                <col style="width: 3em;"/>
+                <col style="width: 12em;"/>
+                <col style="width: 12em;"/>
+                <col/>
+                <col style="width: 16em;"/>
+            </ColGroup>
+            <HeaderContent>
+                <MudTh>#</MudTh>
+                <MudTh>@T("Name")</MudTh>
+                <MudTh>@T("Provider")</MudTh>
+                <MudTh>@T("Model")</MudTh>
+                <MudTh>@T("Actions")</MudTh>
+            </HeaderContent>
+            <RowTemplate>
+                <MudTd>@context.Num</MudTd>
+                <MudTd>@context.Name</MudTd>
+                <MudTd>@context.UsedLLMProvider.ToName()</MudTd>
+                <MudTd>@GetTranscriptionProviderModelName(context)</MudTd>
+                
+                <MudTd>
+                    <MudStack Row="true" Class="mb-2 mt-2" Wrap="Wrap.Wrap">
+                        <MudTooltip Text="@T("Open Dashboard")">
+                            <MudIconButton Color="Color.Info" Icon="@Icons.Material.Filled.OpenInBrowser" Href="@context.UsedLLMProvider.GetDashboardURL()" Target="_blank" Disabled="@(!context.UsedLLMProvider.HasDashboard())"/>
+                        </MudTooltip>
+                        <MudTooltip Text="@T("Edit")">
+                            <MudIconButton Color="Color.Info" Icon="@Icons.Material.Filled.Edit" OnClick="@(() => this.EditTranscriptionProvider(context))"/>
+                        </MudTooltip>
+                        <MudTooltip Text="@T("Delete")">
+                            <MudIconButton Color="Color.Error" Icon="@Icons.Material.Filled.Delete" OnClick="@(() => this.DeleteTranscriptionProvider(context))"/>
+                        </MudTooltip>
+                    </MudStack>
+                </MudTd>
+            </RowTemplate>
+        </MudTable>
+
+        @if (this.SettingsManager.ConfigurationData.TranscriptionProviders.Count == 0)
+        {
+            <MudText Typo="Typo.h6" Class="mt-3">
+                @T("No transcription provider configured yet.")
+            </MudText>
+        }
+
+        <MudButton Variant="Variant.Filled" Color="@Color.Primary" StartIcon="@Icons.Material.Filled.AddRoad" Class="mt-3 mb-6" OnClick="@this.AddTranscriptionProvider">
+            @T("Add transcription provider")
+        </MudButton>
+    </ExpansionPanel>
+}

app/MindWork AI Studio/Components/Settings/SettingsPanelTranscription.razor.cs

@@ -0,0 +1,122 @@
+using AIStudio.Dialogs;
+using AIStudio.Settings;
+
+using Microsoft.AspNetCore.Components;
+
+using DialogOptions = AIStudio.Dialogs.DialogOptions;
+
+namespace AIStudio.Components.Settings;
+
+public partial class SettingsPanelTranscription : SettingsPanelBase
+{
+    [Parameter]
+    public List<ConfigurationSelectData<string>> AvailableTranscriptionProviders { get; set; } = new();
+    
+    [Parameter]
+    public EventCallback<List<ConfigurationSelectData<string>>> AvailableTranscriptionProvidersChanged { get; set; }
+    
+    private static string GetTranscriptionProviderModelName(TranscriptionProvider provider)
+    {
+        const int MAX_LENGTH = 36;
+        var modelName = provider.Model.ToString();
+        return modelName.Length > MAX_LENGTH ? "[...] " + modelName[^Math.Min(MAX_LENGTH, modelName.Length)..] : modelName;
+    }
+    
+    #region Overrides of ComponentBase
+
+    protected override async Task OnInitializedAsync()
+    {
+        await this.UpdateTranscriptionProviders();
+        await base.OnInitializedAsync();
+    }
+
+    #endregion
+    
+    private async Task AddTranscriptionProvider()
+    {
+        var dialogParameters = new DialogParameters<TranscriptionProviderDialog>
+        {
+            { x => x.IsEditing, false },
+        };
+        
+        var dialogReference = await this.DialogService.ShowAsync<TranscriptionProviderDialog>(T("Add Transcription Provider"), dialogParameters, DialogOptions.FULLSCREEN);
+        var dialogResult = await dialogReference.Result;
+        if (dialogResult is null || dialogResult.Canceled)
+            return;
+        
+        var addedTranscription = (TranscriptionProvider)dialogResult.Data!;
+        addedTranscription = addedTranscription with { Num = this.SettingsManager.ConfigurationData.NextTranscriptionNum++ };
+        
+        this.SettingsManager.ConfigurationData.TranscriptionProviders.Add(addedTranscription);
+        await this.UpdateTranscriptionProviders();
+        
+        await this.SettingsManager.StoreSettings();
+        await this.MessageBus.SendMessage<bool>(this, Event.CONFIGURATION_CHANGED);
+    }
+    
+    private async Task EditTranscriptionProvider(TranscriptionProvider transcriptionProvider)
+    {
+        var dialogParameters = new DialogParameters<TranscriptionProviderDialog>
+        {
+            { x => x.DataNum, transcriptionProvider.Num },
+            { x => x.DataId, transcriptionProvider.Id },
+            { x => x.DataName, transcriptionProvider.Name },
+            { x => x.DataLLMProvider, transcriptionProvider.UsedLLMProvider },
+            { x => x.DataModel, transcriptionProvider.Model },
+            { x => x.DataHostname, transcriptionProvider.Hostname },
+            { x => x.IsSelfHosted, transcriptionProvider.IsSelfHosted },
+            { x => x.IsEditing, true },
+            { x => x.DataHost, transcriptionProvider.Host },
+        };
+        
+        var dialogReference = await this.DialogService.ShowAsync<TranscriptionProviderDialog>(T("Edit Transcription Provider"), dialogParameters, DialogOptions.FULLSCREEN);
+        var dialogResult = await dialogReference.Result;
+        if (dialogResult is null || dialogResult.Canceled)
+            return;
+        
+        var editedTranscriptionProvider = (TranscriptionProvider)dialogResult.Data!;
+        
+        // Set the provider number if it's not set. This is important for providers
+        // added before we started saving the provider number.
+        if(editedTranscriptionProvider.Num == 0)
+            editedTranscriptionProvider = editedTranscriptionProvider with { Num = this.SettingsManager.ConfigurationData.NextTranscriptionNum++ };
+        
+        this.SettingsManager.ConfigurationData.TranscriptionProviders[this.SettingsManager.ConfigurationData.TranscriptionProviders.IndexOf(transcriptionProvider)] = editedTranscriptionProvider;
+        await this.UpdateTranscriptionProviders();
+        
+        await this.SettingsManager.StoreSettings();
+        await this.MessageBus.SendMessage<bool>(this, Event.CONFIGURATION_CHANGED);
+    }
+
+    private async Task DeleteTranscriptionProvider(TranscriptionProvider provider)
+    {
+        var dialogParameters = new DialogParameters<ConfirmDialog>
+        {
+            { x => x.Message, string.Format(T("Are you sure you want to delete the transcription provider '{0}'?"), provider.Name) },
+        };
+        
+        var dialogReference = await this.DialogService.ShowAsync<ConfirmDialog>(T("Delete Transcription Provider"), dialogParameters, DialogOptions.FULLSCREEN);
+        var dialogResult = await dialogReference.Result;
+        if (dialogResult is null || dialogResult.Canceled)
+            return;
+        
+        var deleteSecretResponse = await this.RustService.DeleteAPIKey(provider);
+        if(deleteSecretResponse.Success)
+        {
+            this.SettingsManager.ConfigurationData.TranscriptionProviders.Remove(provider);
+            await this.SettingsManager.StoreSettings();
+        }
+        
+        await this.UpdateTranscriptionProviders();
+        await this.MessageBus.SendMessage<bool>(this, Event.CONFIGURATION_CHANGED);
+    }
+    
+    private async Task UpdateTranscriptionProviders()
+    {
+        this.AvailableTranscriptionProviders.Clear();
+        foreach (var provider in this.SettingsManager.ConfigurationData.TranscriptionProviders)
+            this.AvailableTranscriptionProviders.Add(new (provider.Name, provider.Id));
+        
+        await this.AvailableTranscriptionProvidersChanged.InvokeAsync(this.AvailableTranscriptionProviders);
+    }
+}