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

[SaeedP]

Hello,

My question is regarding Blazor service:

In my app, I have a component: Logo-builder. razor

@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

A 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())}";

        }

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

builder.Services.AddSingleton<LogoBuiderService>();

builder.Services.AddScoped<LogoBuiderService>();

How should I instantiate LogoBuilder.cs in the component and use the GenerateLogo method?

regards,

Saeed

 

[cjard]

Assuming LogoBuilder.cs and LogoBuilderService.cs are the same thing, then you already did it:

@inject LogoBuiderService logoBuilderService

Just register it once, probably as a singleton in this case. Remember that Blazor server side Scoped is more like Singleton anyway, being as the only request that takes place does so when the client first connects, so even Scoped things end up being very long lived. Consider not using GDI things in a Blazor app