Build a text-to-image generator using the DALL-E API in C#.NET. by Marvel Delante | November, 2022

Step-by-Step Guide to Build This Awesome Generator

Photo by: https://openai.com/blog/dall-e

DALL-E is an AI system that converts a natural language or textual description into realistic images and art. DALL-E is fantastic. After its release, I saw many discussions on the internet. From developers to artists to art lovers, most of them agree that this technology really is next level.

Photo by: Marvel DeLante – Generated using the DALL-E preview app

Last Friday, November 4th, 2022, I received an email from OpenAI announcing the availability of the DALL-E API. I have been waiting for this since last year. Now that the API is available, I’m excited to try it.

I visited the website and looked for the documentation. I found API documentation supporting Node.js, Python, and curl. I am a .NET developer and could not find libraries for .NET, so I decided to share with you how I can use the DALL-E API in my Netcore project.

In this demo, you don’t need to build your project in netcore. I used the pure .NET library, so whether you use .NET Standard or NetCore, both are supported. Let’s make a project now, shall we? ,

In this demo, I have created this project using Visual Studio 2022 Preview.
The project is an ASP.Net Core Web App (MVC).

Photo by: Marvel DeLante

i’m going to name it DALLEAPIDemo,

Photo by: Marvel DeLante

The framework is .NET6.0, then I would leave the rest as is. Then click “Create”.

Photo by: Marvel DeLante

After the project is created. On the left, “Solution Explorer.”
Right-click on Dependencies > Manage Nuget Packages > Browse Tab > Find Newtonsoft.json > Select the first one seen in the image below > Click on Install button on the far right side of the Browse tab.

* The button “Install” is labeled as “Uninstall” in the image below because it is already installed. We will be using the Newtonsoft library for serializing and deserializing objects.

Photo by: Marvel DeLante

open api key

Before we can call DALL-E API. First, we need to secure an API key as it needs to be included in our header, so the API will know who is sending the request.

To get an API key, we need to have an OpenAI account. You can sign up here.

After a successful account creation. Login to your account, click your profile icon, click View API Keys on the dropdown, and click the “+ Create New Secret Key” button.

Temporarily copy and save your API key somewhere, for example, in Notepad. We are going to use it later.

  • Creating images using the DALL-E API isn’t free, but the price is very reasonable. Please refer to the pricing section of the documentation.
Photo by: Marvel DeLante

Now let’s code.

appsettings.json

add one OPEN_API_KEY item, then set the value to the API key you previously saved somewhere.

model

In Solution Explorer, open Models folder, create a new item ResponseModel.csand create three model classes inside”input“which serves as our input model,”Link“Which will be used in . ResponseModelAnd this ResponseModelWhich will be used to map the DALL-E API response.

controller

expand the Controllers View more folders in Solution Explorer HomeController.cs,

create a string variable APIKEY and set its value to empty. In the constructor, inject IConfiguration interface so that we can access the elements in appsettings.jsonthen set the value of APIKEY,

string APIKEY = string.Empty;
public HomeController(IConfiguration conf)
{
APIKEY = conf.GetSection("OPENAI_API_KEY").Value;
}

Now, let’s make a HTTP POST verb and name it GenerateImagewhich accepts the input model from the request body as a parameter.

In GenerateImage method, let’s create an example ResponseModel and name it resp, Then we will create a new instance of HttpClient, Next, we’ll clear the default headers because we don’t want unnecessary headers for the request. Then, we’ll add an Authorization header, and from here on out, we’re going to use APIKEY,

then we will call client.PostAsync using method with epipath and serialized input model JsonConvert.SerializeObject as body and set its content to “application/json”.

If the response code is successful, we will read the content and set the value of resp From the deserialized value of the content using JsonConvert.DeserializeObject class from Newtonsoft.json,

Complete HomeController Should look like this:

sight

On your right, Solution Explorer > View > Home > Open Index.cshtml

The scene is very simple. We will add a page header “DALL-E API in .NET”. Then we’ll add a text area txt For prompt, an input that accepts a number quantity which is used for the number of images you want to generate, a combobox/select sel For the user to choose the size of the image, a button btnand a div display where we display the images.

Javascript

On your solution explorer, expand wwwroot folder, js open folder again site.js,

From here, we’ll create a button click event listener and instantiate a input The object used as our request body. Then we’ll send a post request with the HomeController > GenerateImage method input object as a parameter.

If the request is successful, we will get a response in JSON format, and then we will loop through the data objects that contain the URL of the images. After that, we’ll create a div with an img element and set its src to the response URL generated by the DALL-E API, and append it display Department

Production

Run the app, enter your text, enter how many images you want to generate, choose the size of the image, then hit the generate button, and voila! Here’s your text-to-image generator in .NET with the DALL-E API.

Photo by: Marvel DeLante

It’s fascinating that .NET can also use the DALL-E API. With this demo project, we can explore other possibilities for embedding DALL-E in various .Net projects such as desktop, mobile, and web apps besides other .Net apps.

If you like technology and coding topics, please enjoy my work more. I would be inspired to write more.

thank you so much.

Happy coding, everyone.

Leave a Comment