allow file upload

.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/Pages/Index.razor

@@ -73,11 +73,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

@@ -4,6 +4,7 @@
 using Azure.AI.OpenAI;
 using System.Globalization;
 using Microsoft.Extensions.Options;
+using Microsoft.AspNetCore.Components.Forms;
 
 namespace OpenAIChatGPTBlazor.Pages
 {
@@ -31,16 +32,19 @@ 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 IDictionary<string, OpenAIClient> OpenAIClients { get; set; } = new Dictionary<string, OpenAIClient>();
         [Inject]
         public IOptionsMonitor<List<OpenAIOptions>> OpenAIOptions { get; set; } = null!;
 
         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)
@@ -63,6 +67,17 @@ 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];
+                await file.OpenReadStream().ReadAsync(buffer);
+                _file = (file.Name, new BinaryData(buffer), file.ContentType);
+            }
+        }
+
         private async Task OnSearchClick()
         {
             await RunSearch();
@@ -87,11 +102,19 @@ private async Task RunSearch()
             {
                 _loading = true;
                 this.StateHasChanged();
-                _chat.Messages.Add(new ChatRequestUserMessage(_next));
+
+                // TODO Add UI Test that uploads file and ensures the filename is shown and can file can be removed again
+                var msg = new ChatRequestUserMessage(new ChatMessageTextContentItem(_next));
                 _next = string.Empty;
+                _chat.Messages.Add(msg);
+                if (_file != null)
+                {
+                    msg.MultimodalContentItems.Add(new ChatMessageImageContentItem(_file.Value.data, _file.Value.mimeType));
+                    _file = null;
+                }
 
                 _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.");
@@ -178,7 +201,9 @@ private static string GetChatMessageContent(ChatRequestMessage message)
         {
             return message switch
             {
-                ChatRequestUserMessage userMessage => userMessage.Content,
+                ChatRequestUserMessage userMessage => userMessage.Content
+                    ?? userMessage.MultimodalContentItems.OfType<ChatMessageTextContentItem>().FirstOrDefault()?.Text
+                    ?? "(no content found)",
                 ChatRequestSystemMessage systemMessage => systemMessage.Content,
                 ChatRequestAssistantMessage assistantMessage => assistantMessage.Content,
                 _ => string.Empty
@@ -195,6 +220,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

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