MaIN.NET/src/MaIN.InferPage/Components/Layout/NavBar.razor at 0264765585f01add435d143086f1f29e3efd9f4b · wisedev-code/MaIN.NET · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
@using Microsoft.FluentUI.AspNetCore.Components.Icons.Regular
@using MaIN.Domain.Configuration
@using MaIN.InferPage.Services
@inject NavigationManager _navigationManager
@inject IJSRuntime JS
@inject SettingsStateService SettingsState
@implements IDisposable
@rendermode @(new InteractiveServerRenderMode(prerender: false))

<FluentDesignTheme @bind-Mode="@Mode"
                   StorageName="theme" />

<header class="navbar">
<span class="fancy-text" style="align-self: flex-start;">M.A.I.N</span>
    <FluentBadge
        Appearance="Appearance.Neutral"
        Fill="highlight"
        BackgroundColor="@GetBackendColor()"
        Color="#fff"
        Style="margin-left: 10px">@GetBackendDisplayName()</FluentBadge>
    <FluentBadge
        Appearance="Appearance.Neutral"
        Fill="highlight"
        BackgroundColor="#ffd800;"
        Color="#000"
        Style="margin-left: 10px">@Utils.Model</FluentBadge>
    @if (Utils.Reason)
    {
        <FluentBadge
            Appearance="Appearance.Accent"
            BackgroundColor="#ffd800;"
            Color="#000"
            Style="margin-left: 10px">Reasoning ✨</FluentBadge>
    }
    @if (Utils.ImageGen)
    {
        <FluentBadge
            Appearance="Appearance.Neutral"
            Fill="highlight"
            BackgroundColor="#7c3aed"
            Color="#fff"
            Style="margin-left: 10px">Image Gen 🎨</FluentBadge>
    }
    @if (Utils.Vision)
    {
        <FluentBadge
            Appearance="Appearance.Neutral"
            Fill="highlight"
            BackgroundColor="#0ea5e9"
            Color="#fff"
            Style="margin-left: 10px">Vision 👁️</FluentBadge>
    }
    <div  style="margin-left: auto; align-self: flex-end;">
        <FluentButton Style="background-color: transparent;"
                      BackgroundColor="rgba(0, 0, 0, 0)"
                      Appearance="Appearance.Lightweight"
                      OnClick="@(() => SettingsState.RequestSettings())" IconStart="@(new Icons.Regular.Size24.Settings().WithColor(AccentColor))">
        </FluentButton>
        <FluentButton Style="padding: 10px; background-color: transparent;"
                      BackgroundColor="rgba(0, 0, 0, 0)"
                      Appearance="Appearance.Lightweight"
                      OnClick="@Reload" IconStart="@(new Icons.Filled.Size24.ArrowClockwise().WithColor(AccentColor))">
        </FluentButton>
        <FluentButton Style="background-color: transparent;"
                      BackgroundColor="rgba(0, 0, 0, 0)"
                      Appearance="Appearance.Lightweight"
                      OnClick="@SetTheme" IconStart="@(new Size24.WeatherMoon().WithColor(AccentColor))">
        </FluentButton>
    </div>
</header>

@code {
    private DesignThemeModes Mode { get; set; }
    private string AccentColor => Mode == DesignThemeModes.Dark ? "#00ffcc" : "#00cca3";

    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        if (firstRender)
        {
            var stored = await JS.InvokeAsync<string>("themeManager.load");
            Mode = stored == "dark" ? DesignThemeModes.Dark : DesignThemeModes.Light;
            SettingsState.OnSettingsApplied += OnSettingsChanged;
            StateHasChanged();
        }
    }

    private void OnSettingsChanged()
    {
        InvokeAsync(StateHasChanged);
    }

    private void SetTheme()
        => Mode = Mode == DesignThemeModes.Dark ? DesignThemeModes.Light : DesignThemeModes.Dark;

    private void Reload()
        => _navigationManager.Refresh(true);

    private string GetBackendColor()
    {
        return Utils.IsLocal ? "#6b7280" : "#10a37f";
    }

    private string GetBackendDisplayName()
    {
        return Utils.BackendType switch
        {
            BackendType.Self => "Local",
            BackendType.Ollama when !Utils.HasApiKey => "Local Ollama",
            _ => Utils.BackendType.ToString()
        };
    }

    public void Dispose()
    {
        SettingsState.OnSettingsApplied -= OnSettingsChanged;
    }
}