https://github.com/toreaurstadboss/DallEImageGenerationImgeDemoV4
First, let's look at the following extension class that geneates the image. The method returnin a string will be used. The image is returned in this sample code in the responseformat Bytes. This is actually base 64 string, looking at the BinaryData and converted into base 64 string. A browser can display base-64 strings and the Dall-e-3 AI services delivers images in png format.
DallEImageExtensions.cs | C# source code
using OpenAI.Images;
namespace DallEImageGenerationDemo.Utility
{
public static class DallEImageExtensions
{
/// <summary>
/// Generates an image from an description in <paramref name="imagedescription"/>
/// This uses OpenAI DALL-e-3 AI
/// </summary>
/// <param name="imageClient"></param>
/// <param name="imagedescription"></param>
/// <param name="options">Send in options for the image generation. If no options are sent, a 512x512 natural image in response format bytes will be returned</param>
/// <returns></returns>
public static async Task<GeneratedImage> GenerateDallEImageAsync(this ImageClient imageClient,
string imagedescription, ImageGenerationOptions? options = null)
{
options = options ?? new ImageGenerationOptions
{
Quality = GeneratedImageQuality.High,
Size = GeneratedImageSize.W1024xH1024,
Style = GeneratedImageStyle.Vivid,
};
options.ResponseFormat = GeneratedImageFormat.Bytes;
return await imageClient.GenerateImageAsync(imagedescription, options);
}
/// <summary>
/// Generates an image from an description in <paramref name="imagedescription"/>
/// This uses OpenAI DALL-e-3 AI. Base-64 string is extracted from the bytes in the image for easy display of
/// image inside a web application (e.g. Blazor WASM)
/// </summary>
/// <param name="imageClient"></param>
/// <param name="imagedescription"></param>
/// <param name="options">Send in options for the image generation. If no options are sent, a 512x512 natural image in response format bytes will be returned</param>
/// <returns></returns>
public static async Task<string> GenerateDallEImageB64StringAsync(this ImageClient imageClient,
string imagedescription, ImageGenerationOptions? options = null)
{
GeneratedImage generatedImage = await GenerateDallEImageAsync(imageClient, imagedescription, options);
string preamble = "data:image/png;base64,";
return $"{preamble}{Convert.ToBase64String(generatedImage.ImageBytes.ToArray())}";
}
}
}
As we can see, creating a Dall-e-3 image using an OpenAI.Image.ImageClient. The ImageClient is set up in Program.cs registered it as a scoped service.
Program.cs | C# source code
builder.Services.AddScoped(sp =>
{
var config = sp.GetRequiredService<IConfiguration>();
string imageModelName = "dall-e-3";
return new ImageClient(imageModelName, config["OpenAI:DallE3:ApiKey"]);
});
The api key for Dall-e-3 will be set up in the appsettings.json file.
appsettings.json | .json file
{
"OpenAI": {
"DallE3": {
"ApiKey": "openapi_api_key_inserted_here"
},
"ChatGpt4": {
"ApiKey": "chat_gpt_4_api_key_inserted_here",
"Endpoint": "chat_gpt_4_endpoint_inserted_here"
}
}
}
To generate suggestions for how to create the image, we can use Chat GPT-4. Here is the code to generate an Open AI chat enabled ChatClient.
OpenAIChatClientBuilder.cs | C# source code
using Azure.AI.OpenAI;
using OpenAI.Chat;
using System.ClientModel;
namespace DallEImageGenerationImageDemoV4.Utility
{
/// <summary>
/// Creates AzureOpenAIClient or ChatClient (default ai model (LLM) is set to "gpt-4")
/// </summary>
public class OpenAIChatClientBuilder(IConfiguration configuration)
{
private string? _endpoint = null;
private ApiKeyCredential? _key = null;
private readonly IConfiguration _configuration = configuration;
/// <summary>
/// Set the endpoint for Open AI Chat GPT-4 chat client. Defaults to config setting 'ChatGpt4:Endpoint' inside the appsettings.json file
/// </summary>
public OpenAIChatClientBuilder WithEndpoint(string? endpoint = null)
{
_endpoint = endpoint ?? _configuration["OpenAI:ChatGpt4:Endpoint"];
return this;
}
/// <summary>
/// Set the key for Open AI Chat GPT-4 chat client. Defaults to config setting 'ChatGpt4:ApiKey' inside the appsettings.json file
/// </summary>
public OpenAIChatClientBuilder WithApiKey(string? key = null)
{
string? keyToUse = key ?? _configuration["OpenAI:ChatGpt4:ApiKey"];
if (!string.IsNullOrWhiteSpace(keyToUse))
{
_key = new ApiKeyCredential(keyToUse!);
}
return this;
}
/// <summary>
/// In case the derived AzureOpenAIClient is to be used, use this Build method to get a specific AzureOpenAIClient
/// </summary>
/// <returns></returns>
public AzureOpenAIClient? BuildAzureOpenAIClient() => !string.IsNullOrWhiteSpace(_endpoint) && _key != null ? new AzureOpenAIClient(new Uri(_endpoint), _key) : null;
/// <summary>
/// Returns the ChatClient that is set up to use OpenAI Default ai model (LLM) will be set 'gpt-4'.
/// </summary>
/// <returns></returns>
public ChatClient? Build(string aiModel = "gpt-4") => BuildAzureOpenAIClient()?.GetChatClient(aiModel);
}
}
We generate a builder for the chat client using a factory. This is so we can first get hold of the IConfiguration via dependency injection and use it for the builder of the OpenAI enabled chat client.
OpenAiChatClientBuilderFactory.cs | C# source code
namespace DallEImageGenerationImageDemoV4.Utility
{
public class OpenAiChatClientBuilderFactory : IOpenAiChatClientBuilderFactory
{
private readonly IConfiguration _configuration;
public OpenAiChatClientBuilderFactory(IConfiguration configuration)
{
_configuration = configuration;
}
public OpenAIChatClientBuilder Create()
{
var openAiChatClient = new OpenAIChatClientBuilder(_configuration)
.WithApiKey()
.WithEndpoint();
return openAiChatClient;
}
}
}
The factory is registered into Program.cs
Program.cs | C# source code
builder.Services.AddSingleton<IOpenAiChatClientBuilderFactory, OpenAiChatClientBuilderFactorygt;();
The chat client builder is listed next.
OpenAiChatClientBuilder.cs | C# source code
using Azure.AI.OpenAI;
using OpenAI.Chat;
using System.ClientModel;
namespace DallEImageGenerationImageDemoV4.Utility
{
/// <summary>
/// Creates AzureOpenAIClient or ChatClient (default ai model (LLM) is set to "gpt-4")
/// </summary>
public class OpenAIChatClientBuilder(IConfiguration configuration)
{
private string? _endpoint = null;
private ApiKeyCredential? _key = null;
private readonly IConfiguration _configuration = configuration;
/// <summary>
/// Set the endpoint for Open AI Chat GPT-4 chat client. Defaults to config setting 'ChatGpt4:Endpoint' inside the appsettings.json file
/// </summary>
public OpenAIChatClientBuilder WithEndpoint(string? endpoint = null)
{
_endpoint = endpoint ?? _configuration["OpenAI:ChatGpt4:Endpoint"];
return this;
}
/// <summary>
/// Set the key for Open AI Chat GPT-4 chat client. Defaults to config setting 'ChatGpt4:ApiKey' inside the appsettings.json file
/// </summary>
public OpenAIChatClientBuilder WithApiKey(string? key = null)
{
string? keyToUse = key ?? _configuration["OpenAI:ChatGpt4:ApiKey"];
if (!string.IsNullOrWhiteSpace(keyToUse))
{
_key = new ApiKeyCredential(keyToUse!);
}
return this;
}
/// <summary>
/// In case the derived AzureOpenAIClient is to be used, use this Build method to get a specific AzureOpenAIClient
/// </summary>
/// <returns></returns>
public AzureOpenAIClient? BuildAzureOpenAIClient() => !string.IsNullOrWhiteSpace(_endpoint) && _key != null ? new AzureOpenAIClient(new Uri(_endpoint), _key) : null;
/// <summary>
/// Returns the ChatClient that is set up to use OpenAI Default ai model (LLM) will be set 'gpt-4'.
/// </summary>
/// <returns></returns>
public ChatClient? Build(string aiModel = "gpt-4") => BuildAzureOpenAIClient()?.GetChatClient(aiModel);
}
}
A helper method is also added to get a streamed reply.
OpenAIChatClientExtensions.cs | C# source code
using OpenAI.Chat;
using System.ClientModel;
namespace OpenAIDemo
{
public static class OpenAIChatClientExtensions
{
/// <summary>
/// Provides a stream result from the Chatclient service using AzureAI services.
/// </summary>
/// <param name="chatClient">ChatClient instance</param>
/// <param name="message">The message to send and communicate to the ai-model</param>
/// <param name="systemMessage">Set the system message to instruct the chat response. Defaults to 'You are an helpful, wonderful AI assistant'.</param>
/// <returns>Streamed chat reply / result. Consume using 'await foreach'</returns>
public static async IAsyncEnumerable<string?> GetStreamedReplyStringAsync(this ChatClient chatClient, string message, string? systemMessage = null)
{
await foreach (var update in GetStreamedReplyInnerAsync(chatClient, message, systemMessage))
{
foreach (var textReply in update.ContentUpdate.Select(cu => cu.Text))
{
yield return textReply;
}
}
}
private static AsyncCollectionResult<StreamingChatCompletionUpdate> GetStreamedReplyInnerAsync(this ChatClient chatClient, string message, string? systemMessage = null) =>
chatClient.CompleteChatStreamingAsync(
[new SystemChatMessage(systemMessage ?? "You are an helpful, wonderful AI assistant"), new UserChatMessage(message)]);
}
}
Here is the client side code in the code behind file of the page displaying the Dall-e-3 image and Open AI Chat gpt-4 response.
using DallEImageGenerationDemo.Components.Pages;
using DallEImageGenerationDemo.Utility;
using DallEImageGenerationImageDemoV4.Models;
using DallEImageGenerationImageDemoV4.Utility;
using Microsoft.AspNetCore.Components;
using Microsoft.JSInterop;
using OpenAI.Images;
using OpenAIDemo;
namespace DallEImageGenerationImageDemoV4.Pages;
public partial class Home : ComponentBase
{
[Inject]
public required IConfiguration Config { get; set; }
[Inject]
public required IJSRuntime JSRuntime { get; set; }
[Inject]
public required ImageClient DallEImageClient { get; set; }
[Inject]
public required IOpenAiChatClientBuilderFactory OpenAIChatClientFactory { get; set; }
private readonly HomeModel homeModel = new();
private bool IsLoading { get; set; }
private string ImageData { get; set; } = string.Empty;
private const string modelName = "dall-e-3";
protected async Task HandleGenerateText()
{
var openAiChatClient = OpenAIChatClientFactory
.Create()
.Build();
if (openAiChatClient == null)
{
await JSRuntime.InvokeAsync<string>("alert", "Sorry, the OpenAI Chat client did not initiate properly. Cannot generate text.");
return;
}
string description = """
You are specifying instructions for generating a DALL-e-3 image.
Do not always choose Bergen! Also choose among smaller cities, villages and different locations in Norway.
Just generate one image, not a montage. Only provide one suggestion.
The suggestion should be based from this input and randomize what to display:
Suggests a cozy vivid location set in Norway showing outdoor scenery in good weather at different places
and with nice weather aimed to attract tourists. Note - it should also display both urban,
suburban or nature scenery with a variance of which of these three types of locations to show.
It should also include some Norwegian animals and flowers and show people. It should pick random cities and places in Norway to display.
""";
homeModel.Description = string.Empty;
await foreach (var updateContentPart in openAiChatClient.GetStreamedReplyStringAsync(description))
{
homeModel.Description += updateContentPart;
StateHasChanged();
await Task.Delay(20);
}
}
protected async Task HandleValidSubmit()
{
IsLoading = true;
string generatedImageBase64 = await DallEImageClient.GenerateDallEImageB64StringAsync(homeModel.Description!,
new ImageGenerationOptions
{
Quality = MapQuality(homeModel.Quality),
Style = MapStyle(homeModel.Style),
Size = MapSize(homeModel.Size)
});
ImageData = generatedImageBase64;
if (!string.IsNullOrWhiteSpace(ImageData))
{
// Open the modal
await JSRuntime.InvokeVoidAsync("showModal", "imageModal");
}
IsLoading = false;
StateHasChanged();
}
private static GeneratedImageSize MapSize(ImageSize size) => size switch
{
ImageSize.W1024xH1792 => GeneratedImageSize.W1024xH1792,
ImageSize.W1792H1024 => GeneratedImageSize.W1792xH1024,
_ => GeneratedImageSize.W1024xH1024,
};
private static GeneratedImageStyle MapStyle(ImageStyle style) => style switch
{
ImageStyle.Vivid => GeneratedImageStyle.Vivid,
_ => GeneratedImageStyle.Natural
};
private static GeneratedImageQuality MapQuality(ImageQuality quality) => quality switch
{
ImageQuality.High => GeneratedImageQuality.High,
_ => GeneratedImageQuality.Standard
};
}
Finally, a screenshot of the app !
