Added Temporary Configs

Components/Pages/Home.razor

@@ -1,16 +1,74 @@
 @page "/"
 @using FoodHealthChecker.Components.Layout
 @using FoodHealthChecker
+@using FoodHealthChecker.Models
 @using Markdig
 @using Microsoft.AspNetCore.Components
 @using System.Runtime.CompilerServices
+@rendermode InteractiveServer
+
 @implements IDisposable
 <PageTitle> Food Health Checker</PageTitle>
+@{
+    var showClass = isPopupVisible ? "d-block" : "d-none";
+}
 
 <div class="container mt-2">
-    <div style="display: flex; justify-content: space-between; ">
-        <h3 class="card-title mb-2 fw-bold">AI Food Health Checker</h3>
-        <a class="card-title mb-2 fw-bold btn btn-dark" href="@duplicateSpace" target="_blank">Duplicate this space</a>
+    <div class="d-flex justify-content-between gap-2">
+        <h3 class="card-title mb-2 fw-bold text-start">AI Food Health Checker</h3>
+        <div>
+            <a class="card-title mb-2 fw-bold btn btn-dark" href="@duplicateSpace" target="_blank">Duplicate this space</a>
+            <button @onclick="OpenModal" class="card-title mb-2 fw-bold btn btn-dark">Add temporary Config</button>
+        </div>
+    </div>
+
+    <!-- temporaryConfig Modal -->
+    <div class="modal @showClass" tabindex="-1" role="dialog" id="temporaryConfigModal">
+        <div class="modal-dialog modal-lg" role="document">
+            <div class="modal-content">
+                <div class="modal-header">
+                    <h5 class="modal-title fw-bold">Add Temporary Config (Any one)</h5>
+                    <button type="button" class="btn-close" @onclick="CloseModal"></button>
+                </div>
+                <div class="modal-body">
+                    <EditForm Model="@temporaryConfig" OnSubmit="SubmitForm" FormName="Configs">
+                        <div class="form-section">
+                            <h5 class="fw-bold">Azure OpenAI</h5>
+                            <div class="row">
+                                <div class="col-md-6">
+                                    <label for="AzureOpenAI_DeploymentName" class="form-label">Deployment Name</label>
+                                    <InputText class="form-control" id="AzureOpenAI_DeploymentName" @bind-Value="temporaryConfig.AzureOpenAI_DeploymentName" placeholder="Enter Deployment Name" />
+                                </div>
+                                <div class="col-md-6">
+                                    <label for="AzureOpenAI_Endpoint" class="form-label">Endpoint</label>
+                                    <InputText class="form-control" id="AzureOpenAI_Endpoint" @bind-Value="temporaryConfig.AzureOpenAI_Endpoint" placeholder="Enter Endpoint" />
+                                </div>
+                                <div class="col-md-6">
+                                    <label for="AzureOpenAI_ApiKey" class="form-label">API Key</label>
+                                    <InputText type="password" class="form-control" id="AzureOpenAI_ApiKey" @bind-Value="temporaryConfig.AzureOpenAI_ApiKey" placeholder="Enter API Key" />
+                                </div>
+                            </div>
+                        </div>
+                        <div class="form-section">
+                            <h5 class="fw-bold">OpenAI</h5>
+                            <div class="row">
+                                <div class="col-md-6">
+                                    <label for="OpenAI_ModelId" class="form-label">Model ID</label>
+                                    <InputText class="form-control" id="OpenAI_ModelId" @bind-Value="temporaryConfig.OpenAI_ModelId" placeholder="Enter Model ID" />
+                                </div>
+                                <div class="col-md-6">
+                                    <label for="OpenAI_ApiKey" class="form-label">API Key</label>
+                                    <InputText class="form-control" type="password"  id="OpenAI_ApiKey" @bind-Value="temporaryConfig.OpenAI_ApiKey" placeholder="Enter API Key" />
+                                </div>
+                            </div>
+                        </div>
+                        <div class="col-12">
+                            <button type="submit" class="btn btn-primary">Submit</button>
+                        </div>
+                    </EditForm>
+                </div>
+            </div>
+        </div>
     </div>
 
     <div class="row justify-content-center ">
@@ -93,13 +151,47 @@
 </div>
 
 @code {
+    public TemporaryConfig temporaryConfig { get; set; } = new TemporaryConfig();
+    private bool isPopupVisible = false;
+    private async Task OpenModal()
+    {
+        isPopupVisible = true;
+        StateHasChanged();
+    }
+
+    private async Task CloseModal()
+    {
+        isPopupVisible = false;
+        StateHasChanged();
+    }
+
+    private async Task SubmitForm()
+    {
+        try
+        {
+            if (!(temporaryConfig.isAzureOpenAIConfigValid() || temporaryConfig.isOpenAIConfigValid()))
+            {
+                errorMessage = "Invalid Config";
+            }
+            else
+            {
+                errorMessage = string.Empty;
+                _foodCheckerService.UpdateTemporaryKernel(temporaryConfig);
+            }
+        }
+        catch (Exception ex)
+        {
+            errorMessage = "Unexpected Error occured";
+        }
+        await CloseModal();
+    }
     public string ImageUrl { get; set; } = string.Empty;
     public ReadOnlyMemory<byte> ImageData { get; set; }
     public string ImageName { get; set; } = string.Empty;
 
     public string Ingredients { get; set; } = string.Empty;
     public string Result { get; set; } = string.Empty;
-    public string duplicateSpace  { get; set; } = string.Empty;
+    public string duplicateSpace { get; set; } = string.Empty;
 
     [Inject]
     public MarkdownPipeline pipeline { get; set; } = default!;
@@ -115,7 +207,7 @@
         duplicateSpace = Config.GetValue<string>("HFDuplicateSpace") ?? string.Empty;
         if (!_foodCheckerService.IsValid())
         {
-            errorMessage = "API keys missing. Duplicate this space to add missing keys";
+            errorMessage = "API keys missing from config. Add temporary keys (Space must be public for accessing image URLs)";
         }
     }
 

FoodCheckerService.cs

@@ -1,5 +1,5 @@
-using FoodHealthChecker.Options;
-using FoodHealthChecker.SemanticKernel.Filters;
+using FoodHealthChecker.Models;
+using FoodHealthChecker.Options;
 using FoodHealthChecker.SemanticKernel.Plugins;
 using Microsoft.SemanticKernel;
 
@@ -7,7 +7,7 @@ namespace FoodHealthChecker
 {
     public class FoodCheckerService
     {
-        private readonly Kernel _kernel;
+        private  Kernel _kernel;
         private bool isValid = false;
         private readonly FoodCheckerPlugin _foodCheckerPlugin;
         public FoodCheckerService(IConfiguration config, FoodCheckerPlugin foodCheckerPlugin)
@@ -36,6 +36,24 @@ namespace FoodHealthChecker
             _kernel = kernel;
         }
 
+        public void UpdateTemporaryKernel(TemporaryConfig config)
+        {
+            var kernelBuilder = Kernel.CreateBuilder();
+
+            if (config.isAzureOpenAIConfigValid())
+            {
+                kernelBuilder.AddAzureOpenAIChatCompletion(config.AzureOpenAI_DeploymentName,config.AzureOpenAI_ApiKey, config.AzureOpenAI_Endpoint);
+                isValid = true;
+            }
+            else if (config.isOpenAIConfigValid())
+            {
+                kernelBuilder.AddOpenAIChatCompletion(config.OpenAI_ModelId,config.OpenAI_ApiKey);
+                isValid = true;
+            }
+            var kernel = kernelBuilder.Build();
+            kernel.Plugins.AddFromObject(_foodCheckerPlugin);
+            _kernel = kernel;
+        }
         public bool IsValid()
         {
             return isValid;

Models/TemporaryConfig.cs

@@ -0,0 +1,23 @@
+using Microsoft.AspNetCore.DataProtection.KeyManagement;
+
+namespace FoodHealthChecker.Models
+{
+
+    public class TemporaryConfig
+    {
+        public string AzureOpenAI_DeploymentName { get; set; }
+        public string AzureOpenAI_Endpoint { get; set; }
+        public string AzureOpenAI_ApiKey { get; set; }
+        public string OpenAI_ModelId { get; set; }
+        public string OpenAI_ApiKey { get; set; }
+
+        public bool isAzureOpenAIConfigValid()
+        {
+            return !string.IsNullOrEmpty(AzureOpenAI_DeploymentName) && !string.IsNullOrEmpty(AzureOpenAI_ApiKey) && !string.IsNullOrEmpty(AzureOpenAI_Endpoint);
+        }
+        public bool isOpenAIConfigValid()
+        {
+            return !string.IsNullOrEmpty(OpenAI_ApiKey) && !string.IsNullOrEmpty(OpenAI_ModelId);
+        }
+    }
+}

README.md

@@ -11,11 +11,11 @@ app_port: 8080
 
 ## FoodHealthChecker
 
-An app that lists all the ingredients and nutritional info present in the images and predicts whether it is healthy or not.
+This is an C# blazor server app app that lists all the ingredients and nutritional info present in a given food products and predicts whether it is healthy or not.
 
-Build using .Net Semantic Kernel and Azure OpenAI/OpenAI Gpt-4-vision model.
+Build using .Net with the Semantic Kernel SDK and Azure OpenAI/OpenAI models.
 
-**NOTE Running this Repo locally requires either an Azure OpenAI endpoint or an OpenAI APIKey present in the app settings to function properly**
+**NOTE Running this app requires either an Azure OpenAI endpoint or an OpenAI APIKey present in the app settings to function properly.**
 
 
 

wwwroot/app.css

@@ -108,7 +108,9 @@ h4 {
 .container {
     background-color: #E0F2F1;
 }
-
+.modal-header {
+    background-color: #E0F2F1;
+}
 h1, h2, h3, h4, h5, h6 {
     color: #00695C;
 }