Why do I get this Chrome console error

[SaeedP]

I keep encountering the below Chrome console error while it sounds like my code is correct.

@page "/"


@using System.Net.Http.Json
@using System.Text.Json
@using System.Diagnostics
@inject HttpClient Http


<form>

    <h1>AI Image Generator</h1>

    <div class="form-group">

        <label for="imageText">Enter your Image 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="imageText" @bind="@ImageText" />

    </div>

    <button @onclick="GenerateImage" type="button">Generate Image</button>

</form>


<div>
    @*  Display the generated image if available *@
    @if (generatedImageUrl != null)
        {
        <img src="@generatedImageUrl" alt="Generated Image" />
        }
</div>


@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 ()

        {

        // throw new Exception();

        // 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);

        if (response.IsSuccessStatusCode)
            {
            Console.WriteLine("HTTP request has been sent successfully.");
            }
        else
            {
            Console.WriteLine("Failed to send HTTP request. Status code: " + response.StatusCode);
            }

        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; }
        }

}

The eldest version of Firefox developer edition:

The eldest version of Polypane:

"DeepAI informed me that there might be an issue with the browser extension." There are no extensions installed on the browsers mentioned above.

This question on Microsoft Q$A

Why I get this Chrome console error - Microsoft Q&A



Please inform me.

 

[Skydiver]

This doesn't really look like a C# problem, but rather a JavaScript problem.

Anyway, just like what the answers in your original query in the Microsoft Q&A forum as well as the Video Skills Academy, you'll need to look at that content-all.js to see what it is attempting to access and is failing.

 

[SaeedP]

But there is no js code in my app!

 

[Skydiver]

I think you need to review how Blazor works, then re-consider your assertion that there is no JavaScript in your app.

 

[Skydiver]

Anyway, works just fine for me with Blazor WebAssembly. I get a different error instead:

 

[Skydiver]

Clearing the cache and refreshing fixed those two errors for me.

 

[Skydiver]

And Blazor Server works just fine:

 

[SaeedP]

Do you mean that you wrote the same code that I wrote and the result was this?

 

[Skydiver]

I copied and pasted the code, and then changed the API key. Compiled and run. That's the results I got. I was using .NET 8.0.

 

[SaeedP]

Yes, you are right. Thanks a lot.