What is the process for creating an instance of a class within a Blazor component and utilizing its methods?

Regarding Blazor service, I have a component called Logo-builder.razor in my application.

@page "/logo-builder"
@using BlazorApp_AI_1.Data
@inject LogoBuiderService logoBuilderService

<h1>Logo Builder</h1>

<label for="text-input">Text:</label>
<input type="text" id="text-input" @bind-value="@LogoText" />
<label for="color-picker">Color:</label>
<input type="color" id="color-picker" @bind-value="@LogoColor" />

<button @onclick="GenerateLogo">Generate Logo</button>

@if (LogoImage != null)
{
    <img src="@LogoImage" alt="Generated Logo" />
}

@code{
}

LogoBuilderService.cs:

Here are some parts of this class:

public string GenerateLogo(string text, string color)
{
	// Convert the color string to a Color object
	var colorObj = ColorTranslator.FromHtml(color);

	// Create a new LogoInput object with the user inputs
	var input = new LogoInput { Text = text, Color = colorObj };

	// Feed the LogoInput object to the prediction engine to generate a LogoOutput object
	var output = predictionEngine.Predict(input);

	// Create a new bitmap with the width and height of the generated logo
	var bitmap = new Bitmap(output.Width, output.Height);

	// Create a new Graphics object to draw on the bitmap
	var graphics = Graphics.FromImage(bitmap);

	// Set the background color of the bitmap
	graphics.Clear(output.BackgroundColor);

	// Draw the text on the bitmap using the font name, font size, font color, and positioning from the LogoOutput object
	graphics.DrawString(text, new Font(output.FontName, output.FontSize), new SolidBrush(output.FontColor), new PointF(output.X, output.Y));


	// Convert the bitmap to a PNG image and write it to a memory stream
	var stream = new MemoryStream();
	bitmap.Save(stream, System.Drawing.Imaging.ImageFormat.Png);
	stream.Seek(0, SeekOrigin.Begin);

	// Convert the memory stream to a base64-encoded string and return it
	return $"data:image/png;base64,{Convert.ToBase64String(stream.ToArray())}";
}

I have registered the LogoBuilder.cs file in the Program.cs file.

builder.Services.AddSingleton<LogoBuiderService>();

builder.Services.AddScoped<LogoBuiderService>();

How can I instantiate LogoBuilder.cs within a component and utilize the GenerateLogo method?

I want to use this service class in my component.
How should be the instantiation?

I think that you can use in this way:

@page "/logo-builder"
@using BlazorApp_AI_1.Data
@inject LogoBuilderService logoBuilderService

<h1>Logo Builder</h1>

<label for="text-input">Text:</label>
<input type="text" id="text-input" @bind="@LogoText" />
<label for="color-picker">Color:</label>
<input type="color" id="color-picker" @bind="@LogoColor" />

<button @onclick="GenerateLogo">Generate Logo</button>

@if (!string.IsNullOrEmpty(LogoImage))
{
    <img src="@LogoImage" alt="Generated Logo" />
}

@code {
    private string LogoText;
    private string LogoColor;
    private string LogoImage;

    private async Task GenerateLogo()
    {
        LogoImage = logoBuilderService.GenerateLogo(LogoText, LogoColor);
    }
}

Maybe it is better if you can make GenerateLogo to return a Task<string> to allow for asynchronous operations.