From ec2dbb923cc88af61de274f95364bfefa38f2b24 Mon Sep 17 00:00:00 2001
From: Thorsten Sommer <mail@tsommer.org>
Date: Sun, 19 May 2024 16:12:07 +0200
Subject: [PATCH] Added model selection

---
 .../Settings/ProviderDialog.razor             | 11 ++++++
 .../Settings/ProviderDialog.razor.cs          | 37 +++++++++++++++++++
 2 files changed, 48 insertions(+)

diff --git a/app/MindWork AI Studio/Settings/ProviderDialog.razor b/app/MindWork AI Studio/Settings/ProviderDialog.razor
index ed5a048..9a2d225 100644
--- a/app/MindWork AI Studio/Settings/ProviderDialog.razor	
+++ b/app/MindWork AI Studio/Settings/ProviderDialog.razor	
@@ -34,6 +34,17 @@
                 InputType="InputType.Password"
                 Validation="@this.ValidatingAPIKey"
             />
+
+            <MudStack Row="@true" AlignItems="AlignItems.Center">
+                <MudButton Variant="Variant.Filled" Size="Size.Small" StartIcon="@Icons.Material.Filled.Refresh" OnClick="this.ReloadModels">Reload</MudButton>
+                <MudSelect @bind-Value="@this.DataModel" Label="Model" Class="mb-3" OpenIcon="@Icons.Material.Filled.FaceRetouchingNatural" AdornmentColor="Color.Info" Adornment="Adornment.Start" Validation="@this.ValidatingModel">
+                    @foreach (var model in this.availableModels)
+                    {
+                        <MudSelectItem Value="@model">@model</MudSelectItem>
+                    }
+                </MudSelect>
+            </MudStack>
+            
         </MudForm>
 
         @if (this.dataIssues.Any())
diff --git a/app/MindWork AI Studio/Settings/ProviderDialog.razor.cs b/app/MindWork AI Studio/Settings/ProviderDialog.razor.cs
index 91cf2b3..8e1f938 100644
--- a/app/MindWork AI Studio/Settings/ProviderDialog.razor.cs	
+++ b/app/MindWork AI Studio/Settings/ProviderDialog.razor.cs	
@@ -35,6 +35,12 @@ public partial class ProviderDialog : ComponentBase
     [Parameter]
     public Providers DataProvider { get; set; } = Providers.NONE;
     
+    /// <summary>
+    /// The LLM model to use, e.g., GPT-4o.
+    /// </summary>
+    [Parameter]
+    public Model DataModel { get; set; }
+    
     /// <summary>
     /// Should the dialog be in editing mode?
     /// </summary>
@@ -60,6 +66,8 @@ public partial class ProviderDialog : ComponentBase
     
     // We get the form reference from Blazor code to validate it manually:
     private MudForm form = null!;
+    
+    private readonly List<Model> availableModels = new();
 
     #region Overrides of ComponentBase
 
@@ -79,7 +87,12 @@ public partial class ProviderDialog : ComponentBase
             // Load the API key:
             var requestedSecret = await this.SettingsManager.GetAPIKey(this.JsRuntime, provider);
             if(requestedSecret.Success)
+            {
                 this.dataAPIKey = requestedSecret.Secret;
+                
+                // Now, we try to load the list of available models:
+                await this.ReloadModels();
+            }
             else
             {
                 this.dataAPIKeyStorageIssue = $"Failed to load the API key from the operating system. The message was: {requestedSecret.Issue}. You might ignore this message and provide the API key again.";
@@ -119,6 +132,7 @@ public partial class ProviderDialog : ComponentBase
             Id = this.DataId,
             InstanceName = this.DataInstanceName,
             UsedProvider = this.DataProvider,
+            Model = this.DataModel,
         };
         
         // We need to instantiate the provider to store the API key:
@@ -144,6 +158,14 @@ public partial class ProviderDialog : ComponentBase
         return null;
     }
     
+    private string? ValidatingModel(Model model)
+    {
+        if (model == default)
+            return "Please select a model.";
+        
+        return null;
+    }
+    
     [GeneratedRegex("^[a-zA-Z0-9 ]+$")]
     private static partial Regex InstanceNameRegex();
     
@@ -185,4 +207,19 @@ public partial class ProviderDialog : ComponentBase
     }
 
     private void Cancel() => this.MudDialog.Cancel();
+
+    private async Task ReloadModels()
+    {
+        var provider = this.DataProvider.CreateProvider(this.DataInstanceName);
+        if(provider is NoProvider)
+            return;
+
+        var models = await provider.GetTextModels(this.JsRuntime, this.SettingsManager);
+        
+        // Order descending by ID means that the newest models probably come first:
+        var orderedModels = models.OrderByDescending(n => n.Id);
+        
+        this.availableModels.Clear();
+        this.availableModels.AddRange(orderedModels);
+    }
 }
\ No newline at end of file