From a2ec24876b7144147b6a8932ad7b02e76c3835d5 Mon Sep 17 00:00:00 2001 From: lxbdev Date: Tue, 6 May 2025 13:30:35 +0200 Subject: [PATCH 1/5] Switch Image Generation to gpt-image-1 - Modified `GenerateImageOptions.razor` to include new size and quality options, and updated default values. - Changed image generation link label in `NavMenu.razor` from "DALL-E" to "Image Gen". - Enhanced `GenerateImage.razor` to conditionally render images as base64 if available. - Introduced `_imageBytes` in `GenerateImage.razor.cs` and updated OpenAI client initialization to "gpt-image-1". - Updated OpenAI client injection in `Index.razor.cs` to use keyed injection. - Updated package references in `OpenAIChatGPTBlazor.csproj` to newer versions. - Refactored service registration in `Program.cs` to use `AddKeyedAzureOpenAIClient` and added a new keyed client for "OpenAi_Image". --- .../Components/GenerateImageOptions.razor | 25 ++++++++----------- .../Components/Layout/NavMenu.razor | 4 +-- .../Components/Pages/GenerateImage.razor | 6 ++++- .../Components/Pages/GenerateImage.razor.cs | 25 +++++++------------ .../Components/Pages/Index.razor.cs | 2 +- .../OpenAIChatGPTBlazor.csproj | 4 +-- OpenAIChatGPTBlazor/Program.cs | 8 +++--- 7 files changed, 33 insertions(+), 41 deletions(-) diff --git a/OpenAIChatGPTBlazor/Components/GenerateImageOptions.razor b/OpenAIChatGPTBlazor/Components/GenerateImageOptions.razor index 20e75b4..3689bd8 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 = "medium"; 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..22bc4f5 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(); From 0a673aff287d25034c94804227b6990bcf027d5c Mon Sep 17 00:00:00 2001 From: lxbdev Date: Tue, 6 May 2025 13:37:40 +0200 Subject: [PATCH 2/5] adapt UI test pipeline for new configuratoin --- .github/workflows/ui-tests.yml | 1 + 1 file changed, 1 insertion(+) 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 From 76fa8964388956778c782527bf5881e71aea57b7 Mon Sep 17 00:00:00 2001 From: lxbdev Date: Tue, 6 May 2025 13:47:43 +0200 Subject: [PATCH 3/5] set mime type to improve "save as" --- OpenAIChatGPTBlazor/Components/Pages/GenerateImage.razor | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/OpenAIChatGPTBlazor/Components/Pages/GenerateImage.razor b/OpenAIChatGPTBlazor/Components/Pages/GenerateImage.razor index 22bc4f5..54b4ff9 100644 --- a/OpenAIChatGPTBlazor/Components/Pages/GenerateImage.razor +++ b/OpenAIChatGPTBlazor/Components/Pages/GenerateImage.razor @@ -39,7 +39,7 @@ } @if (_imageBytes is not null) { - + }
From 07fbcc451f74e85569bab8f2c2418730d604d81a Mon Sep 17 00:00:00 2001 From: lxbdev Date: Tue, 6 May 2025 13:48:01 +0200 Subject: [PATCH 4/5] set image quality because text generation is better --- OpenAIChatGPTBlazor/Components/GenerateImageOptions.razor | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/OpenAIChatGPTBlazor/Components/GenerateImageOptions.razor b/OpenAIChatGPTBlazor/Components/GenerateImageOptions.razor index 3689bd8..57d2d08 100644 --- a/OpenAIChatGPTBlazor/Components/GenerateImageOptions.razor +++ b/OpenAIChatGPTBlazor/Components/GenerateImageOptions.razor @@ -27,7 +27,7 @@ public string Prompt { get; set; } = string.Empty; private string _size = "1024x1024"; - private string _quality = "medium"; + private string _quality = "high"; public ImageGenerationOptions AsAzureOptions(string deploymentName) { From ec3e65ca65cdb4c0564fa326ebdf002e6d83b16d Mon Sep 17 00:00:00 2001 From: lxbdev Date: Tue, 6 May 2025 13:55:32 +0200 Subject: [PATCH 5/5] update readme --- README.md | 1 + 1 file changed, 1 insertion(+) 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 } } ```