AuthorBuddy/Components/Pages/Models.razor

@page "/models"
@attribute [Authorize]
@inject IOllamaService OllamaService
@inject ISettingsService SettingsService
@inject NavigationManager Navigation


<PageTitle>@T("Modelle - Author Buddy", "Models - Author Buddy")</PageTitle>

<div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px;">
    <h3>@T("Ollama Modelle verwalten", "Manage Ollama models")</h3>
    <button @onclick="RefreshModels" disabled="@isLoading">@T("Aktualisieren", "Refresh")</button>
</div>

@if (isLoading)
{
    <p>@T("Lade Modelle...", "Loading models...")</p>
}
else if (!string.IsNullOrEmpty(errorMessage))
{
    <div style="color: red; margin-bottom: 12px;">@errorMessage</div>
}
else
{
    <div class="model-list">
        @foreach (var model in localModels)
        {
            <div class="model-card">
                <div class="model-name">@model.Name</div>
                <div class="model-details">
                    @T("Größe:", "Size:") @FormatSize(model.Size) |
                    @T("Geändert:", "Modified:") @model.ModifiedAt?.ToString("g")
                </div>
            </div>
        }
    </div>
}

<div style="margin-top: 24px; border-top: 1px solid var(--border-color); padding-top: 16px;">
    <h4 style="margin-bottom: 8px;">@T("Neues Modell herunterladen", "Download new model")</h4>
    <div style="display: flex; gap: 8px; align-items: flex-end;">
        <div class="form-group" style="flex: 1; margin-bottom: 0;">
            <label for="pullModelName">@T("Modellname:", "Model name:")</label>
            <input id="pullModelName" @bind="modelToPull" placeholder="@T("z.B. llama3.2", "e.g. llama3.2")" />
        </div>
        <button @onclick="PullModel" disabled="@(isPulling || string.IsNullOrWhiteSpace(modelToPull))">
            @T("Herunterladen", "Download")
        </button>
    </div>
    @if (isPulling)
    {
        <div style="margin-top: 8px;">
            <div class="progress-bar">
                <div class="progress-fill" style="width: @pullPercentDisplay"></div>
            </div>
            <div style="font-size: 12px; margin-top: 4px;">@pullStatus (@pullPercentDisplay)</div>
        </div>
    }
</div>

@if (pullResult != null)
{
    <div style="margin-top: 12px; padding: 8px; background: var(--card-bg); border: 1px solid var(--accent-color); font-size: 13px;">
        @pullResult
    </div>
}

@code {
    private string _language = "de";
    private List<LLM_Model> localModels = new();
    private bool isLoading;
    private string? errorMessage;
    private string modelToPull = string.Empty;
    private bool isPulling;
    private double pullProgress;
    private string pullStatus = string.Empty;
    private string? pullResult;
    private string pullPercentDisplay => $"{pullProgress:F0}%";

    private string T(string de, string en) => _language == "en" ? en : de;

    protected override async Task OnInitializedAsync()
    {
        _language = await SettingsService.GetLanguageAsync() ?? "de";
        await RefreshModels();
    }

    private async Task RefreshModels()
    {
        isLoading = true;
        errorMessage = null;

        try
        {
            var models = await OllamaService.GetLocalModelsAsync();
            localModels = models.ToList();
        }
        catch (Exception ex)
        {
            errorMessage = $"{T("Fehler beim Laden der Modelle:", "Error loading models:")} {ex.Message}";
            localModels = new();
        }
        finally
        {
            isLoading = false;
        }
    }

    private async Task PullModel()
    {
        if (string.IsNullOrWhiteSpace(modelToPull)) return;

        isPulling = true;
        pullProgress = 0;
        pullStatus = T("Starte Download...", "Starting download...");
        pullResult = null;

        try
        {
            var progress = new Progress<string>(status =>
            {
                pullStatus = status;
                InvokeAsync(StateHasChanged);
            });

            await OllamaService.PullModelAsync(modelToPull, progress);
            pullResult = $"{T("Modell", "Model")} '{modelToPull}' {T("erfolgreich heruntergeladen.", "downloaded successfully.")}";
            modelToPull = string.Empty;
            await RefreshModels();
        }
        catch (Exception ex)
        {
            pullResult = $"{T("Fehler:", "Error:")} {ex.Message}";
        }
        finally
        {
            isPulling = false;
        }
    }

    private static string FormatSize(long? bytes)
    {
        if (!bytes.HasValue) return "---";
        if (bytes < 1024 * 1024) return $"{bytes / 1024.0:F1} KB";
        if (bytes < 1024 * 1024 * 1024) return $"{bytes / (1024.0 * 1024):F1} MB";
        return $"{bytes / (1024.0 * 1024 * 1024):F1} GB";
    }
}