AuthorBuddy/Components/Pages/Models.razor
2026-05-16 16:13:35 +02:00

142 lines
4.1 KiB
Text

@page "/models"
@inject IOllamaService OllamaService
@inject NavigationManager Navigation
<PageTitle>Modelle - Author Buddy</PageTitle>
<div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px;">
<h3>Ollama Modelle verwalten</h3>
<button @onclick="RefreshModels" disabled="@isLoading">Aktualisieren</button>
</div>
@if (isLoading)
{
<p>Lade Modelle...</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">
Größe: @FormatSize(model.Size) |
Geändert: @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;">Neues Modell herunterladen</h4>
<div style="display: flex; gap: 8px; align-items: flex-end;">
<div class="form-group" style="flex: 1; margin-bottom: 0;">
<label for="pullModelName">Modellname:</label>
<input id="pullModelName" @bind="modelToPull" placeholder="z.B. llama3.2" />
</div>
<button @onclick="PullModel" disabled="@(isPulling || string.IsNullOrWhiteSpace(modelToPull))">
Herunterladen
</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 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}%";
protected override async Task OnInitializedAsync()
{
await RefreshModels();
}
private async Task RefreshModels()
{
isLoading = true;
errorMessage = null;
try
{
var models = await OllamaService.GetLocalModelsAsync();
localModels = models.ToList();
}
catch (Exception ex)
{
errorMessage = $"Fehler beim Laden der Modelle: {ex.Message}";
localModels = new();
}
finally
{
isLoading = false;
}
}
private async Task PullModel()
{
if (string.IsNullOrWhiteSpace(modelToPull)) return;
isPulling = true;
pullProgress = 0;
pullStatus = "Starte Download...";
pullResult = null;
try
{
var progress = new Progress<string>(status =>
{
pullStatus = status;
InvokeAsync(StateHasChanged);
});
await OllamaService.PullModelAsync(modelToPull, progress);
pullResult = $"Modell '{modelToPull}' erfolgreich heruntergeladen.";
modelToPull = string.Empty;
await RefreshModels();
}
catch (Exception ex)
{
pullResult = $"Fehler: {ex.Message}";
}
finally
{
isPulling = false;
}
}
private static string FormatSize(long? bytes)
{
if (!bytes.HasValue) return "Unbekannt";
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";
}
}