feat: Support Images in Chat Messages

.vscode/launch.json

@@ -0,0 +1,20 @@
+{
+    // Use IntelliSense to learn about possible attributes.
+    // Hover to view descriptions of existing attributes.
+    // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
+    "version": "0.2.0",
+    "configurations": [
+        {
+            "name": "C#: OpenAIChatGPTBlazor Debug",
+            "type": "dotnet",
+            "request": "launch",
+            "projectPath": "${workspaceFolder}/OpenAIChatGPTBlazor/OpenAIChatGPTBlazor.csproj"
+        },
+        {
+            "name": ".NET Core Attach",
+            "type": "coreclr",
+            "request": "attach",
+            "processName": "OpenAIChatGPTBlazor.exe"
+        }
+    ]
+}

OpenAIChatGPTBlazor/OpenAIChatGPTBlazor.sln

@@ -0,0 +1,25 @@
+
+Microsoft Visual Studio Solution File, Format Version 12.00
+# Visual Studio Version 17
+VisualStudioVersion = 17.5.002.0
+MinimumVisualStudioVersion = 10.0.40219.1
+Project("{9A19103F-16F7-4668-BE54-9A1E7A4F7556}") = "OpenAIChatGPTBlazor", "OpenAIChatGPTBlazor.csproj", "{B8D1A04E-564B-41BB-AFBC-0B9399F5FE8B}"
+EndProject
+Global
+	GlobalSection(SolutionConfigurationPlatforms) = preSolution
+		Debug|Any CPU = Debug|Any CPU
+		Release|Any CPU = Release|Any CPU
+	EndGlobalSection
+	GlobalSection(ProjectConfigurationPlatforms) = postSolution
+		{B8D1A04E-564B-41BB-AFBC-0B9399F5FE8B}.Debug|Any CPU.ActiveCfg = Debug|Any CPU
+		{B8D1A04E-564B-41BB-AFBC-0B9399F5FE8B}.Debug|Any CPU.Build.0 = Debug|Any CPU
+		{B8D1A04E-564B-41BB-AFBC-0B9399F5FE8B}.Release|Any CPU.ActiveCfg = Release|Any CPU
+		{B8D1A04E-564B-41BB-AFBC-0B9399F5FE8B}.Release|Any CPU.Build.0 = Release|Any CPU
+	EndGlobalSection
+	GlobalSection(SolutionProperties) = preSolution
+		HideSolutionNode = FALSE
+	EndGlobalSection
+	GlobalSection(ExtensibilityGlobals) = postSolution
+		SolutionGuid = {6796C90A-3831-42E3-8AB2-DA34298F674A}
+	EndGlobalSection
+EndGlobal

OpenAIChatGPTBlazor/Pages/Index.razor

@@ -75,11 +75,24 @@
     </div>
     <hr />
     <div class="row footer">
-        <div class="col-sm-8">
+        <div class="col-sm-7">
             <textarea type="text" class="form-control" id="nextArea" placeholder="CTRL+Enter to submit search"
                       @bind="_next" @bind:event="oninput" @onkeydown="@OnNextKeydown" @ref=_nextArea>
-        </textarea>
+            </textarea>
+            <div style="cursor: pointer;" @onclick="() => {_file=null;}">@_file?.filename</div>
         </div>
+        @if (_SelectedOption?.HasVision == true)
+        {
+            <div class ="col-sm-1">
+                <div id="drop-area" class="border rounded d-flex justify-content-center align-items-center"
+                    style="cursor: pointer;">
+                    <div class="text-center">
+                    <i class="fas fa-image"></i>
+                    </div>
+                </div>
+                <InputFile class="d-none" id="fileElem" OnChange="LoadFiles" accept=".png,.jpg,.jpeg"/>
+            </div>
+        }
         <br />
         <div class="col-sm-2">
             <button id="searchBtn" class="btn btn-success" @onclick="OnSearchClick" type="submit" disabled=@_loading>

OpenAIChatGPTBlazor/Pages/Index.razor.cs

@@ -3,6 +3,7 @@
 using Microsoft.JSInterop;
 using System.Globalization;
 using Microsoft.Extensions.Options;
+using Microsoft.AspNetCore.Components.Forms;
 using System.Text.Json;
 using OpenAI.Chat;
 using OpenAI;
@@ -32,6 +33,8 @@ public partial class Index : IAsyncDisposable
         private bool _isTopRowToggled;
         private string _additionalTopRowClass = string.Empty;
         private string _SelectedOptionKey = string.Empty;
+        private OpenAIOptions? _SelectedOption;
+        private (string filename, BinaryData data, string mimeType)? _file = null;
 
         [Inject]
         public OpenAIClient OpenAIClient { get; set; } = null!;
@@ -44,8 +47,9 @@ public partial class Index : IAsyncDisposable
 
         protected override void OnInitialized()
         {
-            var options = OpenAIOptions.CurrentValue.FirstOrDefault();
-            _SelectedOptionKey = options != null ? options.Key : _SelectedOptionKey;
+            var option = OpenAIOptions.CurrentValue.FirstOrDefault();
+            _SelectedOptionKey = option != null ? option.Key : _SelectedOptionKey;
+            _SelectedOption = option;
         }
 
         protected override async Task OnAfterRenderAsync(bool firstRender)
@@ -69,6 +73,18 @@ protected override async Task OnAfterRenderAsync(bool firstRender)
             }
         }
 
+        private async Task LoadFiles(InputFileChangeEventArgs e)
+        {
+            var file = e.File;
+            if (file != null)
+            {
+                var buffer = new byte[file.Size];
+                // TODO
+                await file.OpenReadStream(1_024_000_000).ReadAsync(buffer);
+                _file = (file.Name, new BinaryData(buffer), file.ContentType);
+            }
+        }
+
         private async Task OnSearchClick()
         {
             await RunSearch();
@@ -93,12 +109,20 @@ private async Task RunSearch()
             {
                 _loading = true;
                 this.StateHasChanged();
-                _chatMessages.Add(new UserChatMessage(_next));
-
+                if (_file == null)
+                {
+                    _chatMessages.Add(new UserChatMessage(_next));
+                }
+                else
+                {
+                    _chatMessages.Add(new UserChatMessage(ChatMessageContentPart.CreateTextMessageContentPart(_next), 
+                        ChatMessageContentPart.CreateImageMessageContentPart(_file.Value.data, _file.Value.mimeType)));
+                    _file = null;
+                }
                 _next = string.Empty;
 
                 _searchCancellationTokenSource = new CancellationTokenSource();
-                var selectedOption = OpenAIOptions.CurrentValue.FirstOrDefault(x => x.Key == _SelectedOptionKey);
+                var selectedOption = _SelectedOption;
                 if (selectedOption is null)
                 {
                     throw new InvalidOperationException("Selected model is not found.");
@@ -213,6 +237,7 @@ private async Task OnSettingsChanged()
         {
             await LocalStorage.SetItemAsync<bool>(IS_AUTOSCROLL_ENABLED, _isAutoscrollEnabled);
             await LocalStorage.SetItemAsync<string>(SELECTED_MODEL, _SelectedOptionKey);
+            _SelectedOption = OpenAIOptions.CurrentValue.FirstOrDefault(x => x.Key == _SelectedOptionKey);
         }
 
         async ValueTask IAsyncDisposable.DisposeAsync()

OpenAIChatGPTBlazor/Pages/Index.razor.js

@@ -12,4 +12,10 @@ export async function downloadFileFromStream (fileName, contentStreamReference)
     anchorElement.click();
     anchorElement.remove();
     URL.revokeObjectURL(url);
-}
+}
+
+let dropArea = document.getElementById("drop-area");
+
+dropArea.addEventListener("click", () => {
+  fileElem.click();
+});

OpenAIChatGPTBlazor/Program.cs

@@ -66,6 +66,7 @@ public class OpenAIOptions
 {
     public string? Hint { get; set; }
     public string? DeploymentName { get; set; }
+    public bool HasVision { get; set; }
     public string Key => $"{DeploymentName}-{Hint}";
     public override string ToString() => $"{DeploymentName} ({Hint})";
 }