Blazor AI imge generator

Question

Hi, I'm trying to make an online AI image generator with blazor. It sounds like everything is correct but the app does nothing. Can you please guide me? Below you can see my code:

@page "/"
@using System.Net.Http.Json
@using System.Text.Json
@inject HttpClient Http
<h1>AI Image Generator</h1>
<form>
    <div>
        <label for="ImageText">Enter your Image text:</label>
        <input type="text"  id="ImageText" @bind="@ImageText" />
    </div>
    <button @onclick="GenerateImage">Generate Image</button>
</form>

@if (generatedImageUrl != null)
{
    <img src="@generatedImageUrl" alt="Generated Image" />
}
@code {
    // Property to store the URL of the generated image
    private string generatedImageUrl;
    private string ImageText { get; set; }
    // Method to generate an image using the DeepAI API
    private async Task GenerateImage()
    {
        // Call the DeepAI API to generate an image based on a sample text
        var apiUrl = $"https://api.deepai.org/api/text2img";
        // 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", ImageText),
    });
        // 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();
        //deserialize the json string.
        var image = System.Text.Json.JsonSerializer.Deserialize<ImageResult>(jsonstring);
        // Construct the data URL for the generated logo image
        generatedImageUrl = image.output_url;
    }
    public class ImageResult
    {
        public string id { get; set; }
        public string output_url { get; set; }
    }
}

Answer 1

Hi,@Saeed Pooladzadeh,you may follow these steps:

1,If you haven't enabled interactive render modes for entire app,you have to call @attribute [RenderModeInteractiveServer] in current component

2, modify <button @onclick="GenerateImage">Generate Image</button> to <button @onclick="GenerateImage" type="button">Generate Image</button> , so that you could interact with server via signalr instead of sending post request to server

3,If your api endpoints are not hosted together with your blazor app,enable cors in your api project

---

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,
Ruikai Feng

Answer 2

Could you get into GenerateImage() method when you debug?Did you reveive the url successfully?Could you see the image when you input the url you reveived in browser?

I mean when I press the button no image appears. And the generatedImageUrl is null.