Generate Images In ASP.NET Core MVC Using OpenAI

1. First, create an ASP.NET Core MVC project. To know more about creating a project, please refer here.
2. Add your API key in the appsettings.json file as given below

   //demo key 
   "OpenAI_API_KEY": "sk-cF8Dv3n2YtUXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX"

3. Add the below-given code for the UI in your Index.cshtml file inside Views>Home>Index.cshtml

   <h1 class="display-4">Image Generator</h1>
   <!--Image info-->
   <input type="text" class="form-control" id="txt" style="width:400px;" placeholder="Image Description" />
   <br />
   <!--Image Size-->
   <select id="size">
       <option selected>256x256</option>
       <option>512x512</option>
   </select>
   <!--Images Required-->
   <input type="number" value="1" placeholder="Images Required" id="quantity" />
   <!--Generate button-->
   <button id="generate">
       Generate
   </button>
   <br />
   <!--Display image here-->
   <div id="Imagedisplay" class="col-md-14 row">
   </div>

   In the above-given code, you have added a UI for the home page to enter some basic details required for the image, like the information about the image, the number of images required, and the size of the image.

4. Now you will add a model class ImageInfo.cs inside the Models folder as given below.

   public class ImageInfo {
       public string ? ImageText {
           get;
           set;
       }
   }
   public class RequiredImage {
       public string ? prompt {
           get;
           set;
       }
       public short ? n {
           get;
           set;
       }
       public string ? size {
           get;
           set;
       }
   }
   public class ImageUrls {
       public string ? url {
           get;
           set;
       }
   }
   // response handling
   public class ResponseModel {
       public long created {
           get;
           set;
       }
       public List < ImageUrls > ? data {
           get;
           set;
       }
   }

   In the above-given code, You have added ResponseModel class for handling the response and RequiredImage class for the input data about the required image.

5. Now you will add a controller method inside HomeController.cs as given below.

   [HttpPost]
   public async Task < IActionResult > GenerateImage([FromBody] RequiredImage obj) {
       string imglink = string.Empty;
       var response = new ResponseModel();
       using(var client = new HttpClient()) {
           client.DefaultRequestHeaders.Clear();
           client.DefaultRequestHeaders.Authorization = new AuthenticationHeaderValue("Bearer", APIKEY);
           var Message = await client.PostAsync("https://api.openai.com/v1/images/generations", new StringContent(JsonConvert.SerializeObject(obj), Encoding.UTF8, "application/json"));
           if (Message.IsSuccessStatusCode) {
               var content = await Message.Content.ReadAsStringAsync();
               response = JsonConvert.DeserializeObject < ResponseModel > (content);
               imglink = resp.data[0].url.ToString();
           }
       }
       return Json(response);
   }

   You have added a post-call with the DALL-E API key in the above given code. You have to pass the API key shown above.

6. The final step is to display the image on the UI using javascript. So you have to add the below-given code inside wwwroot>js>site.js.

   $(document).ready(() => {
       $('#generate').click(function() {
           var info = {};
           info.n = parseInt($('#quantity').val());
           info.prompt = $('#txt').val();
           info.size = $('#size').find(":selected").val();
           $.ajax({
               url: '/Home/GenerateImage',
               method: 'post',
               contentType: 'application/json',
               data: JSON.stringify(info)
           }).done(function(data) {
               $.each(data.data, function() {
                   $('#Imagedisplay').append('<div class="col-md-5" style="padding-top:12px">' + '<img class="p-12" src = "' + this.url + '"/>' + '</div>');
               });
           });
       });
   });

Output

Conclusion

OpenAI provides us with lots and lots of use for artificial intelligence. AI has become a part of our daily life nowadays. ChatGPT and DALL-E are all advanced and great examples of AI. To generate an image, you need two things. First, the OpenAI APOI key and second DALL-E API endpoint. Pass the API key in the header and freely use that endpoint.

Thank You, and Stay Tuned for More

Popular Articles from My Account

• ChatGPT Completions in ASP.NET Core Web API
• Validate Purchase Receipt With the Play Store