OpenAI GPT-Image-1 Blazor .NET Image Generator Web App

In this blog post, we will present the OpenAI GPT-Image-1 Blazor .NET Image Generator Web App, a tool designed to demonstrate the capabilities of OpenAI’s latest image generation API.

 What Does the Web App Do?

This Blazor-based web application leverages OpenAI’s GPT-Image-1 model to generate stunning, high-quality images based on user-provided prompts. Whether you’re designing marketing materials, creating social media content, or experimenting with creative ideas, this app provides a seamless interface to bring your vision to life.

YouTube Video

Key features include:

• Customizable Prompts: Describe the image you want, and the app will generate it for you.
• Flexible Image Sizes: Choose from 256×256, 512×512, or 1024×1024 resolutions to suit your needs.
• Multiple Output Formats: Get the image as a URL or in Base64 JSON format.
• Downloadable Results: Easily download the generated images for use in your projects.
• Progress Feedback: A sleek progress bar keeps you informed while the image is being generated.

 How It Works

The app is built using Blazor, a modern .NET framework for building interactive web UIs. It communicates with OpenAI’s Image Generation API to process user inputs and return AI-generated images. The API uses the GPT-Image-1 model, which is known for its versatility in creating images across diverse styles, faithfully following custom guidelines, and leveraging world knowledge.

 Why Use OpenAI’s GPT-Image-1?

According to OpenAI, the GPT-Image-1 model which was released two days ago is already transforming industries like e-commerce, education, gaming, and enterprise software. Businesses like Canva, GoDaddy, and HubSpot are integrating this technology to empower users with tools for designing logos, creating marketing collateral, and more. The model’s ability to generate professional-grade images makes it a game-changer for developers and businesses alike.

“The model’s versatility allows it to create images across diverse styles, faithfully follow custom guidelines, leverage world knowledge, and accurately render text—unlocking countless practical applications across multiple domains.” — OpenAI

 Practical Applications

Here are just a few ways you can use this app:

• Marketing and Branding: Generate unique visuals for social media, email campaigns, and landing pages.
• Creative Design: Experiment with new ideas for logos, illustrations, and graphic elements.
• Education and Training: Create visual aids and educational materials with ease.
• E-commerce: Design product images or promotional content tailored to your brand.

 Code

The program main component is the OpenAI Service OpenAIService.cs (code below) that calls the new Image API (gpt-image-1) and generate an image.

using System.Net.Http.Headers;
using System.Text.Json;

namespace OpenAIImageWebApp.Services;

public class OpenAIService
{
    private readonly HttpClient _httpClient;
    private readonly string _apiKey;

    public OpenAIService(IHttpClientFactory httpClientFactory, IConfiguration configuration)
    {
        _httpClient = httpClientFactory.CreateClient("OpenAI");
        _apiKey = configuration["OpenAI:ApiKey"];
    }

    public async Task<string> GenerateImageAsync(string prompt, int n, string size, string responseFormat)
    {
        var requestBody = new
        {
            prompt,
            n,
            size,
            response_format = responseFormat
        };

        var requestContent = new StringContent(JsonSerializer.Serialize(requestBody));
        requestContent.Headers.ContentType = new MediaTypeHeaderValue("application/json");
        _httpClient.DefaultRequestHeaders.Authorization = new AuthenticationHeaderValue("Bearer", _apiKey);

        var response = await _httpClient.PostAsync("images/generations", requestContent);
        response.EnsureSuccessStatusCode();

        var responseContent = await response.Content.ReadAsStringAsync();
        var jsonResponse = JsonSerializer.Deserialize<JsonElement>(responseContent);

        return jsonResponse.GetProperty("data")[0].GetProperty("url").GetString();
    }
}

FrontEnd

The application has a razor web page that act as an interface to the service as shown below.

Once an image is generated the app displays it and provide a direct link to download it.

The complete source code will be available soon in our public GitHub public repository.

If you need help with your OpenAI integration and development please contact us.