diff --git a/.github/workflows/ui-tests.yml b/.github/workflows/ui-tests.yml index 5ae1eb9..4c81bf1 100644 --- a/.github/workflows/ui-tests.yml +++ b/.github/workflows/ui-tests.yml @@ -44,6 +44,7 @@ jobs: OpenAi__DeploymentName: xxxxxxxxxample OpenAi__Hint: xxxxxxxxxample ConnectionStrings__openAi : Endpoint=https://myoaiservice.openai.azure.com/;Key=xxx; + ConnectionStrings__openAi_Image : Endpoint=https://myoaiservice.openai.azure.com/;Key=xxx; - name: Build Tests run: dotnet build ./Tests/UiTests/UiTests.csproj diff --git a/OpenAIChatGPTBlazor/Components/GenerateImageOptions.razor b/OpenAIChatGPTBlazor/Components/GenerateImageOptions.razor index 20e75b4..57d2d08 100644 --- a/OpenAIChatGPTBlazor/Components/GenerateImageOptions.razor +++ b/OpenAIChatGPTBlazor/Components/GenerateImageOptions.razor @@ -1,4 +1,4 @@ -@using Azure.AI.OpenAI +@using Azure.AI.OpenAI @using OpenAI.Images
@@ -8,18 +8,15 @@ - - + + - - - - - - - + + + +
@@ -29,17 +26,15 @@ [Parameter] public string Prompt { get; set; } = string.Empty; - private string _size = GeneratedImageSize.W1024xH1024.ToString(); - private string _quality = GeneratedImageQuality.Standard.ToString(); - private string _style = GeneratedImageStyle.Natural.ToString(); + private string _size = "1024x1024"; + private string _quality = "high"; public ImageGenerationOptions AsAzureOptions(string deploymentName) { return new() { Size = new GeneratedImageSize(int.Parse(_size.Split("x")[0]), int.Parse(_size.Split("x")[1])), - Quality = Enum.Parse(_quality), - Style = Enum.Parse(_style) + Quality = new GeneratedImageQuality(_quality) }; } } diff --git a/OpenAIChatGPTBlazor/Components/Layout/NavMenu.razor b/OpenAIChatGPTBlazor/Components/Layout/NavMenu.razor index a627f60..97ae135 100644 --- a/OpenAIChatGPTBlazor/Components/Layout/NavMenu.razor +++ b/OpenAIChatGPTBlazor/Components/Layout/NavMenu.razor @@ -1,4 +1,4 @@ -
+
OpenAIChatGPTBlazor
@@ -15,7 +15,7 @@
- DALL-E + Image Gen
diff --git a/OpenAIChatGPTBlazor/Components/Pages/GenerateImage.razor b/OpenAIChatGPTBlazor/Components/Pages/GenerateImage.razor index 8922018..54b4ff9 100644 --- a/OpenAIChatGPTBlazor/Components/Pages/GenerateImage.razor +++ b/OpenAIChatGPTBlazor/Components/Pages/GenerateImage.razor @@ -1,4 +1,4 @@ -@page "/GenerateImage" +@page "/GenerateImage" @rendermode InteractiveServer @using System.Globalization @using Microsoft.Extensions.Options; @@ -37,6 +37,10 @@ { } + @if (_imageBytes is not null) + { + + }
diff --git a/OpenAIChatGPTBlazor/Components/Pages/GenerateImage.razor.cs b/OpenAIChatGPTBlazor/Components/Pages/GenerateImage.razor.cs index 73bf52e..94ffe12 100644 --- a/OpenAIChatGPTBlazor/Components/Pages/GenerateImage.razor.cs +++ b/OpenAIChatGPTBlazor/Components/Pages/GenerateImage.razor.cs @@ -1,8 +1,5 @@ -using Azure.AI.OpenAI; using Microsoft.AspNetCore.Components; -using Microsoft.AspNetCore.Components.Web; using OpenAI; -using OpenAIChatGPTBlazor.Components; namespace OpenAIChatGPTBlazor.Components.Pages { @@ -14,9 +11,10 @@ public partial class GenerateImage private GenerateImageOptions _optionsComponent = new(); private Uri? _imageUrl = null; + private BinaryData? _imageBytes = null; private string _revisedPrompt = string.Empty; - [Inject] + [Inject(Key = "OpenAi_Image")] public OpenAIClient OpenAIClient { get; set; } = null!; protected override void OnAfterRender(bool firstRender) @@ -24,38 +22,33 @@ protected override void OnAfterRender(bool firstRender) if (firstRender) { _loading = false; - this.StateHasChanged(); + StateHasChanged(); } } - private async Task OnSubmitClick() - { - await RunSubmit(); - } + private async Task OnSubmitClick() => await RunSubmit(); - private void OnAbortClick() - { - AbortSearch(); - } + private void OnAbortClick() => AbortSearch(); private async Task RunSubmit() { try { _loading = true; - this.StateHasChanged(); + StateHasChanged(); _searchCancellationTokenSource = new CancellationTokenSource(); - var imageClient = OpenAIClient.GetImageClient("Dalle3"); + var imageClient = OpenAIClient.GetImageClient("gpt-image-1"); // TODO Move prompt out of component into dedicated prompt component now? var res = await imageClient.GenerateImageAsync( _optionsComponent.Prompt, - _optionsComponent.AsAzureOptions("Dalle3"), + _optionsComponent.AsAzureOptions("gpt-image-1"), _searchCancellationTokenSource.Token ); _imageUrl = res.Value.ImageUri; + _imageBytes = res.Value.ImageBytes; _revisedPrompt = res.Value.RevisedPrompt; _loading = false; diff --git a/OpenAIChatGPTBlazor/Components/Pages/Index.razor.cs b/OpenAIChatGPTBlazor/Components/Pages/Index.razor.cs index 5d512d3..9f0f77a 100644 --- a/OpenAIChatGPTBlazor/Components/Pages/Index.razor.cs +++ b/OpenAIChatGPTBlazor/Components/Pages/Index.razor.cs @@ -33,7 +33,7 @@ public partial class Index : IAsyncDisposable private string _additionalTopRowClass = string.Empty; private string _SelectedOptionKey = string.Empty; - [Inject] + [Inject(Key = "OpenAi")] public OpenAIClient OpenAIClient { get; set; } = null!; [Inject] diff --git a/OpenAIChatGPTBlazor/OpenAIChatGPTBlazor.csproj b/OpenAIChatGPTBlazor/OpenAIChatGPTBlazor.csproj index 571e8c5..57e5989 100644 --- a/OpenAIChatGPTBlazor/OpenAIChatGPTBlazor.csproj +++ b/OpenAIChatGPTBlazor/OpenAIChatGPTBlazor.csproj @@ -9,8 +9,8 @@ - - + + diff --git a/OpenAIChatGPTBlazor/Program.cs b/OpenAIChatGPTBlazor/Program.cs index 96e1718..0e7e829 100644 --- a/OpenAIChatGPTBlazor/Program.cs +++ b/OpenAIChatGPTBlazor/Program.cs @@ -27,16 +27,16 @@ .Services.AddRazorComponents() .AddInteractiveServerComponents() .AddHubOptions(o => - { // Increase max message size so user can sent large input as part of conversation - o.MaximumReceiveMessageSize = 10240000; - }); + o.MaximumReceiveMessageSize = 10240000 + ); builder.Services.AddBlazoredLocalStorage(); builder.Services.AddFeatureManagement(); builder.Services.Configure>(builder.Configuration.GetSection("OpenAI")); -builder.AddAzureOpenAIClient("OpenAi"); +builder.AddKeyedAzureOpenAIClient("OpenAi"); +builder.AddKeyedAzureOpenAIClient("OpenAi_Image"); var app = builder.Build(); diff --git a/README.md b/README.md index fce9805..1b1fe0f 100644 --- a/README.md +++ b/README.md @@ -67,6 +67,7 @@ To use a local configuration, add user secrets with the following content: "ConnectionStrings": { //"OpenAi": "Endpoint=https://myoaiservice.openai.azure.com/;" // AAD Authentication //"OpenAi": "Endpoint=https://myoaiservice.openai.azure.com/;Key=xxx;" + //"OpenAi_Image_": "Endpoint=https://myoaiservice.openai.azure.com/;Key=xxx;" // Secondary endpoint for image generation } } ```