Множество Мандельброта

using GenieFramework, Stipple, PlotlyBase, LinearAlgebra

@genietools
@app begin
    @in xSize = 1000
    @in ySize = 720
    @in iter = 256
    @in centerX = -0.75
    @in centerY = 0.0
    @in zoom = 1
    @in colorscheme = "YlGnBu" 
    
    @out график = PlotlyBase.Plot(
        PlotlyBase.heatmap(x=[0], y=[0], z=[[0]]))

    @out layout = PlotlyBase.Layout(
        title = "Множество Мандельброта",
        xaxis = PlotlyBase.attr(
            title="Вещественная ось",
            showgrid=false,
            zeroline=false,
            showticklabels=false,
            scaleanchor=nothing ),
        yaxis = PlotlyBase.attr(
            title="Мнимая ось",
            showgrid=false,
            zeroline=false,
            showticklabels=false,
            scaleanchor=nothing ),
        width = 1000,
        height = 720,
        margin = PlotlyBase.attr(l=10, r=10, t=40, b=10),
        autosize = true)

    @onchange xSize, ySize, iter, centerX, centerY, zoom, colorscheme begin
        xWidth = 2.7/zoom
        yHeight = 2.7/zoom
        xlim = (centerX - xWidth/2, centerX + xWidth/2)
        ylim = (centerY - yHeight/2, centerY + yHeight/2)
        x = collect(range(xlim[1], xlim[2], length=xSize))
        y = collect(range(ylim[1], ylim[2], length=ySize))
        c = [xx + yy*im for yy in y, xx in x]
        z = zeros(ComplexF64, ySize, xSize)
        cnt = zeros(Int, ySize, xSize)

        for _ in 1:iter
            mask = abs.(z) .<= 2
            z[mask] = z[mask].^2 .+ c[mask]
            cnt[mask] .+= 1
        end

        layout = PlotlyBase.Layout(
            title = "Множество Мандельброта",
            xaxis = PlotlyBase.attr(
                title="Вещественная ось",
                showgrid=false,
                zeroline=false,
                showticklabels=false,
                scaleanchor=nothing),
            yaxis = PlotlyBase.attr(
                title="Мнимая ось",
                showgrid=false,
                zeroline=false,
                showticklabels=false,
                scaleanchor=nothing),
            width = xSize,
            height = ySize,
            margin = PlotlyBase.attr(l=10, r=10, t=40, b=10),
            autosize = true)

        график = PlotlyBase.Plot(
            PlotlyBase.heatmap(
                x = x,
                y = y,
                z = cnt,
                colorscale = colorscheme,
                showscale = false,
                type = "heatmap"))
    end
end

function ui()
    row([
        column([
            textfield("Размер вещественной оси", :xSize,
                type="number", min=160, step="1",
                style="margin-bottom: 15px; width: 100%;"),
            textfield("Размер мнимой оси", :ySize,
                type="number", min=90, step="1",
                style="margin-bottom: 15px; width: 100%;"),
            textfield("Количество итераций", :iter,
                type="number", min=1, step="1",
                style="margin-bottom: 15px; width: 100%;"),
            textfield("Центр вещественной оси", :centerX,
                type="number", min=-2, max=2, step="0.001",
                style="margin-bottom: 15px; width: 100%;"),
            textfield("Центр мнимой оси", :centerY,
                type="number", min=-2, max=2, step="0.001",
                style="margin-bottom: 15px; width: 100%;"),
            textfield("Масштаб", :zoom,
                type="number", min=1, step="1",
                style="margin-bottom: 15px; width: 100%;"),
            select(
                :colorscheme;
                options =  [
    "Blackbody",
    "Blues",
    "Cividis",
    "Earth",
    "Electric",
    "Greens",
    "Hot",                        
    "Jet",
    "Picnic",
    "Portland",
    "Rainbow",
    "RdBu",
    "Viridis",
    "YlGnBu",     
    "YlOrRd"],
                label = "Цветовая схема",
                style = "margin-top: 15px; width: 100%; font-weight: bold;")

        ], style="width: 25%; padding: 20px; background-color: #f5f5f5; border-radius: 10px 0 0 10px;"),
        column([
            plotly(:график, layout=:layout)
        ], style="width: 75%; padding: 0; background-color: white; border-radius: 0 10px 10px 0; display: flex; justify-content: center; align-items: center;")

    ], style="display: flex; margin: 0; height: 100vh;")
end


@page("/", ui)