با Blazor یک تولید کننده تصویر ایجاد کنید

public class Image
    {
        public string Width { get; set; }
        public string Height { get; set; }
        public bool HasId { get; set; }
        public int ImageId { get; set; }
        public bool Grayscale { get; set; }
        public bool Blur { get; set; }
        public int BlurLevel { get; set; }
        public string Extension { get; set; }
    }

public class ImageSettings
{
    private Image image;

    public ImageSettings()
    {
        image = new Image();
    }

    public ImageSettings SetWidth(string width){
        image.Width = width;
        return this;
    }

    public ImageSettings SetHeight(string height){
        image.Height = height;
        return this;
    }

    public ImageSettings SetGrayscale(bool hasGrasyScale){
        image.Grayscale = hasGrasyScale;
        return this;
    }

    public ImageSettings SetBlur(bool hasBlur, int blurLevel = 0){
        image.Blur = hasBlur;
        image.BlurLevel = blurLevel;
        return this;
    }

    public ImageSettings SetImageId(bool hasId,int id){
        image.HasId = hasId;
        image.ImageId = id;
        return this;
    }

    public ImageSettings SetImageExtensions(string extension)
    {
        image.Extension = extension;
        return this;
    }

    public Image Build(){
        return image;
    }
}

public static class LinkBuilder
{
    public static string BuildLink(Image image)
    {
        var sb = new StringBuilder("https://picsum.photos");

        if (image.HasId is true)
        {
            sb.Append($"/id/{image.ImageId}");
        }

        sb.Append($"/{image.Width}");

        if (image.Height is not null)
        {
            sb.Append($"/{image.Height}");
        }

        if (!string.IsNullOrEmpty(image.Extension))
        {
            sb.Append($".{image.Extension}");
        }

        if (image.Blur is true && image.Grayscale is true)
        {
            sb.Append("?grayscale&blur");

            if (image.BlurLevel > 0)
            {
                sb.Append($"={image.BlurLevel}");
            }
        }
        else
        {
            if (image.Grayscale is true)
            {
                sb.Append("?grayscale");
            }

            if (image.Blur is true)
            {
                sb.Append("?blur");
                if (image.BlurLevel > 0)
                {
                    sb.Append($"={image.BlurLevel}");
                }
            }
        }

        return sb.ToString();
    }
}

@code {
    //Fields & Properties
    private string height;
    private string width;
    private bool hasGrasyScale;
    private bool hasBlur;
    private int blurLevel = 1;
    private string imageExtension;
    private int imageId;
    private bool hasId = false;
    private bool isIdInputDisabled = true;
    private bool isBlurInputDisabled = true;
    private string imageSrc = "";

    //Functions
    void GenerateImage()
    {
        Image randomImage = new ImageSettings()
                            .SetWidth(width)
                            .SetHeight(height)
                            .SetGrayscale(hasGrasyScale)
                            .SetBlur(hasBlur, blurLevel)
                            .SetImageExtensions(imageExtension)
                            .SetImageId(hasId, imageId)
                            .Build();

        imageSrc = BuildLink(randomImage);

        Console.WriteLine(imageSrc);
    }

    string BuildLink(Image image) => LinkBuilder.BuildLink(image);

    private void DisableIdInput()
    {
        isIdInputDisabled = !isIdInputDisabled;
        hasId = !hasId;
    }

    private void DisableBlurInput()
    {
        hasBlur = !hasBlur;
        isBlurInputDisabled = !isBlurInputDisabled;
    }
}

@page "https://dev.to/"
@using Util
@using Models

<div class="main-container d-flex">

    <div class="sidebar" id="side-nav">

        <h4 class="my-3">Image Dimensions</h4>
        <div class="col-10 mx-3 mb-2">
            <label for="" class="form-label">Width</label>
            <input class="form-control" type="number" placeholder="Width" @bind="@width" />
        </div>

        <div class="col-10 mx-3 mb-3">
            <label for="" class="form-label">Height</label>
            <input class="form-control" type="number" placeholder="Height" @bind="@height" />
        </div>
        <hr>

        <h4 class="my-3">Specific Image</h4>

        <div class="col-10 mx-3 mb-3">
            <div class="form-check">
                <input id="imageId" class="form-check-input" type="checkbox" @onchange="@DisableIdInput" />
                <label for="imageId" class="form-check-label">Use Image Id</label>
            </div>
        </div>

        <div class="col-10 mx-3 mb-3">
            <label for="" class="form-label">Image Id</label>
            <input class="form-control" type="number" placeholder="Image Id" @bind="@imageId"
                disabled="@isIdInputDisabled" />
        </div>
        <hr>

        <h4 class="my-3">Filters</h4>

        <div class="col-10 mx-3 mb-3">
            <div class="form-check">
                <input id="grayscaleCheck" class="form-check-input" type="checkbox" placeholder="Grayscale"
                    @bind="@hasGrasyScale" />
                <label for="grayscaleCheck" class="form-check-label">Grayscale</label>
            </div>
        </div>

        <div class="col-10 mx-3 mb-3">
            <div class="form-check">
                <input id="blurCheck" class="form-check-input" type="checkbox" placeholder="Blur"
                    @onchange="@DisableBlurInput" />
                <label for="blurCheck" class="form-check-label">Blur Image</label>
            </div>
        </div>

        <div class="col-10 mx-3 mb-3">
            <label class="form-check-label" for="">Blur level</label>
            <input class="form-control" type="number" placeholder="Blur Level" @bind="@blurLevel"
                disabled="@isBlurInputDisabled" min="1" max="10"/>
        </div>

        <div class="col-11 d-flex justify-content-end">
            <button class="btn btn-primary" @onclick="@GenerateImage" type="button">
                Generate Image
            </button>
        </div>
    </div>

    <div class="container">
        <div class="my-3 d-flex justify-content-center">
            <h1 class="app-title">Image Generator</h1>
        </div>

        <div class="d-flex justify-content-center mt-3 mb-4">
            <img src="@imageSrc" alt="" srcset="">
        </div>
    </div>
</div>

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<link rel="stylesheet" href="Imagegenerator.styles.css">
<link href="css/app.css" rel="stylesheet" />

#side-nav {
    background: #30343F;
    min-width: 250px;
    max-width: 250px;
    color: #fff;
    padding-left: 10px;
}

.container {
    min-height: 100vh;
    width: 100%;
    overflow: scroll;
    padding: 10px;
}

input[type="number"]:disabled {
    background: #aaa;
}