Problem with AI logo builder program

Question

Hello,

In these lines of code, I have tried to create a logo builder program using DeepAI API. It seems that the program works, but the received image is not clear.

@page "/LogoBuilder"
@layout EmptyLayout

@inherits LayoutComponentBase

<div>
    <h3>LogoBuilder</h3>

    <SaeedMenu />



    <form>
        <div class="form-group">
            <label for="logoText">Enter your logo text:</label>
            <!-- Use @bind to bind the value of the input field to a property in our code-behind file -->
            <input type="text" class="form-control" id="logoText" @bind="@LogoText" />
        </div>

        <!-- Bind the click event of the "Generate Logo" button to a method in our code-behind file -->
        <button type="button" class="btn btn-primary" @onclick="@GenerateLogo">Generate Logo</button>
    </form>

    <!-- Display the generated logo image -->
    <div>
        @if (LogoImageUrl != null)
        {
            <img src="@LogoImageUrl" alt="Generated logo image" />
        }
    </div>
</div>

@code {

    // Define a property to store the user's input text
    private string LogoText { get; set; }
    // Define a property to store the URL of the generated logo image
    private string LogoImageUrl { get; set; }



    // Define a method to generate the logo using Deep AI
    private async Task GenerateLogo()
    {
        // Construct the request URL with the user's input text
        ////var apiUrl = $"https://api.deepai.org/api/text2img?text={LogoText}";

        var apiUrl = $"https://api.deepai.org/api/logo-generator?text={LogoText}";

        // Create a new HttpClient instance
        var httpClient = new HttpClient();

        // Add the Deep AI API key to the request headers
        httpClient.DefaultRequestHeaders.Add("api-key", "My_API_key");

        // Send a GET request to the Deep AI API with the user's input text
        var response = await httpClient.GetAsync(apiUrl);

        // Read the response content as a byte array
        var imageBytes = await response.Content.ReadAsByteArrayAsync();


        // Convert the byte array to a Base64-encoded string
        var base64String = Convert.ToBase64String(imageBytes);

        // Construct the data URL for the generated logo image
        LogoImageUrl = $"data:image/png;base64,{base64String}";
    }


}

Here is the result

Can you please inform me?

regards,

Saeed

Answer 1

Hi @Saeed Pooladzadeh

If you check the Logo Generator API document and the sample code, you can see the response is a Json result, like this:

So, in the GenerateLogo method, we should use the ReadAsStringAsync method to get the Json string, instead of the ReadAsByteArrayAsync method, then deserialize the Json string and get the image url. After that set the image source via the url. Refer to the following code:

    // Define a method to generate the logo using Deep AI
    private async Task GenerateLogo()
    {
        // Construct the request URL with the user's input text
        ////var apiUrl = $"https://api.deepai.org/api/text2img?text={LogoText}";

        var apiUrl = $"https://api.deepai.org/api/logo-generator";

        // Create a new HttpClient instance
        var httpClient = new HttpClient();

        // Add the Deep AI API key to the request headers
        httpClient.DefaultRequestHeaders.Add("api-key", "quickstart-QUdJIGlzIGNvbWluZy4uLi4K");

        var formContent = new FormUrlEncodedContent(new[]
        {
            new KeyValuePair<string, string>("text", LogoText),
        });

        // Send a Post request to the Deep AI API with the user's input text
        var response = await httpClient.PostAsync(apiUrl,formContent);

        //  
        var jsonstring = await response.Content.ReadAsStringAsync();
        //the output format
        //{
        //    "id": "2c438118-9a32-4f89-90f4-a8610deb1077",
        //    "output_url": "https://api.deepai.org/job-view-file/2c438118-9a32-4f89-90f4-a8610deb1077/outputs/output.jpg"
        //}

        //deserialize the json string.
        var logo = System.Text.Json.JsonSerializer.Deserialize<LogoResult>(jsonstring);


        // Construct the data URL for the generated logo image
        LogoImageUrl = logo.output_url;
    }

    public class LogoResult
    {
        public string id { get; set; }
        public string output_url { get; set; }
    }

The output as below: in my sample, it will spend almost 10~20seconds to load the image, you can check it on your side.

---

If the answer is the right solution, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment".

Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.

Best regards,

Dillion

Answer 2

the response is not a png file but rather json.

{
    "id": "a27c2e2b-646a-4568-88d6-d26f518595de",
    "output_url": "https://api.deepai.org/job-view-file/a27c2e2b-646a-4568-88d6-d26f518595de/outputs/output.jpg"
}

your code needs to parse the json. then fetch the image. you will also need to convert jpeg to png if you want to return png instead of jpeg.