[Playground] Refactoring OpenAIApiClient #163

src/AzureOpenAIProxy.AppHost/Program.cs

@@ -5,6 +5,7 @@
 
 builder.AddProject<Projects.AzureOpenAIProxy_PlaygroundApp>("playgroundapp")
        .WithExternalHttpEndpoints()
-       .WithReference(apiapp);
+       .WithReference(apiapp)
+       .WithEnvironment("ServiceNames__Backend", apiapp.Resource.Name);
 
 await builder.Build().RunAsync();

src/AzureOpenAIProxy.PlaygroundApp/Clients/OpenAIApiClient.cs

@@ -1,51 +1,58 @@
-using System.ClientModel;
-
-using Azure.AI.OpenAI;
-
-using OpenAI.Chat;
-
-namespace AzureOpenAIProxy.PlaygroundApp.Clients;
-
-/// <summary>
-/// This provides interfaces to the <see cref="OpenAIApiClient"/> class.
-/// </summary>
-public interface IOpenAIApiClient
-{
-    /// <summary>
-    /// Send a chat completion request to the OpenAI API.
-    /// </summary>
-    /// <param name="clientOptions"><see cref="OpenAIApiClientOptions"/> instance.</param>
-    /// <returns>Returns the chat completion result.</returns>
-    Task<string> CompleteChatAsync(OpenAIApiClientOptions clientOptions);
-}
-
-/// <summary>
-/// This represents the OpenAI API client entity.
-/// </summary>
-public class OpenAIApiClient : IOpenAIApiClient
-{
-    /// <inheritdoc />
-    public async Task<string> CompleteChatAsync(OpenAIApiClientOptions clientOptions)
-    {
-        var endpoint = new Uri($"{clientOptions.Endpoint!.TrimEnd('/')}/api");
-        var credential = new ApiKeyCredential(clientOptions.ApiKey!);
-        var openai = new AzureOpenAIClient(endpoint, credential);
-        var chat = openai.GetChatClient(clientOptions.DeploymentName);
-
-        var messages = new List<ChatMessage>()
-        {
-            new SystemChatMessage(clientOptions.SystemPrompt),
-            new UserChatMessage(clientOptions.UserPrompt),
-        };
-        var options = new ChatCompletionOptions
-        {
-            MaxOutputTokenCount = clientOptions.MaxOutputTokenCount,
-            Temperature = clientOptions.Temperature,
-        };
-
-        var result = await chat.CompleteChatAsync(messages, options).ConfigureAwait(false);
-        var response = result.Value.Content.First().Text;
-
-        return response;
-    }
-}
+using System.ClientModel;
+
+using Azure.AI.OpenAI;
+
+using AzureOpenAIProxy.PlaygroundApp.Configurations;
+
+using OpenAI.Chat;
+
+namespace AzureOpenAIProxy.PlaygroundApp.Clients;
+
+/// <summary>
+/// This provides interfaces to the <see cref="OpenAIApiClient"/> class.
+/// </summary>
+public interface IOpenAIApiClient
+{
+    /// <summary>
+    /// Send a chat completion request to the OpenAI API.
+    /// </summary>
+    /// <param name="clientOptions"><see cref="OpenAIApiClientOptions"/> instance.</param>
+    /// <returns>Returns the chat completion result.</returns>
+    Task<string> CompleteChatAsync(OpenAIApiClientOptions clientOptions);
+}
+
+/// <summary>
+/// This represents the OpenAI API client entity.
+/// </summary>
+public class OpenAIApiClient(ServiceNamesSettings names, ServicesSettings settings) : IOpenAIApiClient
+{
+    private readonly ServiceNamesSettings _names = names ?? throw new ArgumentNullException(nameof(names));
+    private readonly ServicesSettings _settings = settings ?? throw new ArgumentNullException(nameof(settings));
+
+    /// <inheritdoc />
+    public async Task<string> CompleteChatAsync(OpenAIApiClientOptions clientOptions)
+    {
+        var service = settings[this._names.Backend!];
+        var endpoint = service.Https.FirstOrDefault() ?? service.Http.First();
+
+        clientOptions.Endpoint = new Uri($"{endpoint!.TrimEnd('/')}/api");
+
+        var credential = new ApiKeyCredential(clientOptions.ApiKey!);
+        var openai = new AzureOpenAIClient(clientOptions.Endpoint, credential);
+        var chat = openai.GetChatClient(clientOptions.DeploymentName);
+
+        var messages = new List<ChatMessage>()
+        {
+            new SystemChatMessage(clientOptions.SystemPrompt), new UserChatMessage(clientOptions.UserPrompt),
+        };
+        var options = new ChatCompletionOptions
+        {
+            MaxOutputTokenCount = clientOptions.MaxTokens, Temperature = clientOptions.Temperature,
+        };
+
+        var result = await chat.CompleteChatAsync(messages, options).ConfigureAwait(false);
+        var response = result.Value.Content.First().Text;
+
+        return response;
+    }
+}

src/AzureOpenAIProxy.PlaygroundApp/Clients/OpenAIApiClientOptions.cs

@@ -8,13 +8,13 @@ public class OpenAIApiClientOptions
     /// <summary>
     /// Gets or sets the OpenAI API endpoint.
     /// </summary>
-    public string? Endpoint { get; set; }
+    public Uri? Endpoint { get; set; }
 
     /// <summary>
     /// Gets or sets the OpenAI API key.
     /// </summary>
     public string? ApiKey { get; set; }
-
+    
     /// <summary>
     /// Gets or sets the deployment name.
     /// </summary>

src/AzureOpenAIProxy.PlaygroundApp/Components/UI/ChatWindowComponent.razor

@@ -1,11 +1,20 @@
-@using AzureOpenAIProxy.PlaygroundApp.Models
+@using AzureOpenAIProxy.PlaygroundApp.Clients
+@using AzureOpenAIProxy.PlaygroundApp.Models
+
+@inject IOpenAIApiClient Api
 
 <FluentStack Id="@Id" Style="width: 100%; height: 100%;" Orientation="Orientation.Vertical" VerticalAlignment="VerticalAlignment.Bottom">
     <ChatHistoryComponent Id="chat-history" Messages="messages" />
     <ChatPromptComponent Id="chat-prompt" OnPromptSent="SendPrompt" OnChatCleared="ClearMessage" />
 </FluentStack>
 
 @code {
+    private string? apiKey = "abcdef";
+    private string? deploymentName = "model-gpt35turbo16k-0613";
+    private int? maxTokens = 4096;
+    private float? temperature = 0.7f;
+    private string? systemPrompt = "You are an AI assistant that helps people find information.";
+
     private List<ChatMessage>? messages;
 
     [Parameter]
@@ -21,8 +30,18 @@
     private async Task SendPrompt(string prompt)
     {
         this.messages!.Add(new ChatMessage() { Role = MessageRole.User, Message = prompt });
-
-        await Task.CompletedTask;
+        var options = new OpenAIApiClientOptions()
+            {
+                ApiKey = apiKey,
+                DeploymentName = deploymentName,
+                MaxTokens = maxTokens,
+                Temperature = temperature,
+                SystemPrompt = systemPrompt,
+                UserPrompt = prompt,
+            };
+
+        var result = await Api.CompleteChatAsync(options);
+        this.messages!.Add(new ChatMessage() { Role = MessageRole.Assistant, Message = result });
     }
 
     private async Task ClearMessage()

src/AzureOpenAIProxy.PlaygroundApp/Components/UI/OldChatWindowComponent.razor

@@ -25,7 +25,6 @@
 </div>
 
 @code {
-    private string? endpoint = "https://localhost:7001/";
     private string? apiKey = "abcdef";
     private string? deploymentName = "model-gpt35turbo16k-0613";
     private int? maxTokens = 4096;
@@ -43,7 +42,6 @@
         {
             var options = new OpenAIApiClientOptions()
             {
-                Endpoint = endpoint,
                 ApiKey = apiKey,
                 DeploymentName = deploymentName,
                 MaxTokens = maxTokens,

src/AzureOpenAIProxy.PlaygroundApp/Configurations/ServicesSettings.cs

@@ -0,0 +1,44 @@
+namespace AzureOpenAIProxy.PlaygroundApp.Configurations;
+
+/// <summary>
+/// This represents the app settings entity for services.
+/// </summary>
+public class ServicesSettings : Dictionary<string, ServiceSettings>
+{
+    /// <summary>
+    /// Gets the name of the configuration settings.
+    /// </summary>
+    public const string Name = "services";
+}
+
+/// <summary>
+/// This represents the service settings entity.
+/// </summary>
+public class ServiceSettings
+{
+    /// <summary>
+    /// Gets or sets the HTTP endpoints.
+    /// </summary>
+    public List<string>? Http { get; set; }
+
+    /// <summary>
+    /// Gets or sets the HTTPS endpoints.
+    /// </summary>
+    public List<string>? Https { get; set; }
+}
+
+/// <summary>
+/// This represents the app settings entity for service names.
+/// </summary>
+public class ServiceNamesSettings
+{
+    /// <summary>
+    /// Gets the name of the configuration settings.
+    /// </summary>
+    public const string Name = "ServiceNames";
+
+    /// <summary>
+    /// Gets or sets the backend service name.
+    /// </summary>
+    public string? Backend { get; set; }
+}

src/AzureOpenAIProxy.PlaygroundApp/Program.cs

@@ -1,4 +1,5 @@
 using AzureOpenAIProxy.PlaygroundApp.Clients;
+using AzureOpenAIProxy.PlaygroundApp.Configurations;
 
 using Microsoft.FluentUI.AspNetCore.Components;
 
@@ -14,6 +15,28 @@
 
 builder.Services.AddFluentUIComponents();
 
+builder.Services.AddSingleton<ServicesSettings>(sp =>
+{
+    var configuration = sp.GetService<IConfiguration>()
+        ?? throw new InvalidOperationException($"{nameof(IConfiguration)} service is not registered.");
+
+    var settings = configuration.GetSection(ServicesSettings.Name).Get<ServicesSettings>()
+        ?? throw new InvalidOperationException($"{nameof(ServicesSettings)} could not be retrieved from the configuration.");
+
+    return settings!;
+});
+
+builder.Services.AddSingleton<ServiceNamesSettings>(sp =>
+{
+    var configuration = sp.GetService<IConfiguration>()
+        ?? throw new InvalidOperationException($"{nameof(IConfiguration)} service is not registered.");
+
+    var settings = configuration.GetSection(ServiceNamesSettings.Name).Get<ServiceNamesSettings>()
+        ?? throw new InvalidOperationException($"{nameof(ServiceNamesSettings)} could not be retrieved from the configuration.");
+
+    return settings!;
+});
+
 builder.Services.AddScoped<IOpenAIApiClient, OpenAIApiClient>();
 
 var app = builder.Build();