Switch Image Generation to gpt-image-1

.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

OpenAIChatGPTBlazor/Components/GenerateImageOptions.razor

@@ -1,4 +1,4 @@
-@using Azure.AI.OpenAI
+@using Azure.AI.OpenAI
 @using OpenAI.Images
 <EditForm Model="@this">
     <div class="form-group">
@@ -8,18 +8,15 @@
         <label for="size">Size</label>
         <InputSelect @bind-Value="_size">
             <option value="1024x1024">1024x1024</option>
-            <option value="1792x1024">1792x1024</option>
-            <option value="1024x1792">1024x1792</option>
+            <option value="1024x1536">1024x1536</option>
+            <option value="1536x1024">1536x1024</option>
         </InputSelect>
         <label for="quality">Quality</label>
         <InputSelect id="quality" name="quality" @bind-Value="_quality">
-            <option value="Standard">Standard</option>
-            <option value="HD">HD</option>
-        </InputSelect>
-        <label for="style">Style</label>
-        <InputSelect id="style" name="style" @bind-Value="_style">
-            <option value="Natural">Natural</option>
-            <option value="Vivid">Vivid</option>
+            <option value="auto">Auto</option>
+            <option value="high">High</option>
+            <option value="medium">Medium</option>
+            <option value="low">Low</option>
         </InputSelect>
     </div>
 </EditForm>
@@ -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<GeneratedImageQuality>(_quality),
-                Style = Enum.Parse<GeneratedImageStyle>(_style)
+                Quality = new GeneratedImageQuality(_quality)
             };
     }
 }

OpenAIChatGPTBlazor/Components/Layout/NavMenu.razor

@@ -1,4 +1,4 @@
-<div class="top-row ps-3 navbar navbar-dark">
+<div class="top-row ps-3 navbar navbar-dark">
     <div class="container-fluid">
         <a class="navbar-brand" href="">OpenAIChatGPTBlazor</a>
     </div>
@@ -15,7 +15,7 @@
         </div>
         <div class="nav-item px-3">
             <NavLink class="nav-link" href="GenerateImage" Match="NavLinkMatch.All">
-                <i class="bi fas fa-image" aria-hidden="true"></i> DALL-E
+                <i class="bi fas fa-image" aria-hidden="true"></i> Image Gen
             </NavLink>
         </div>
     </nav>

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 @@
         {
             <img src="@_imageUrl" class="img-fluid" />
         }
+        @if (_imageBytes is not null)
+        {
+            <img src="data:image/png;base64, @System.Convert.ToBase64String(_imageBytes)" class="img-fluid" />
+        }
     </div>
     <hr />
     <div class="row footer">

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,48 +11,44 @@ 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)
         {
             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;

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]

OpenAIChatGPTBlazor/OpenAIChatGPTBlazor.csproj

@@ -9,8 +9,8 @@
 	</PropertyGroup>
 
 	<ItemGroup>
-		<PackageReference Include="Aspire.Azure.AI.OpenAI" Version="8.2.1-preview.1.24473.4" />
-		<PackageReference Include="Azure.Identity" Version="1.12.0" />
+		<PackageReference Include="Aspire.Azure.AI.OpenAI" Version="9.2.1-preview.1.25222.1" />
+		<PackageReference Include="Azure.Identity" Version="1.13.2" />
 		<PackageReference Include="Blazored.LocalStorage" Version="4.5.0" />
 		<PackageReference Include="Markdig" Version="0.40.0" />
 		<PackageReference Include="Microsoft.Azure.AppConfiguration.AspNetCore" Version="8.0.0" />

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<List<OpenAIOptions>>(builder.Configuration.GetSection("OpenAI"));
 
-builder.AddAzureOpenAIClient("OpenAi");
+builder.AddKeyedAzureOpenAIClient("OpenAi");
+builder.AddKeyedAzureOpenAIClient("OpenAi_Image");
 
 var app = builder.Build();
 

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
   }
 }
 ```