lucasacchi/llm-monitor
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add dedicated page for running Ollama models

Browse Source
This commit is contained in:
Luca Sacchi Ricciardi
2026-04-25 11:36:05 +02:00
parent 2f591e55ce
commit 1aee51b0d6
6 changed files with 327 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/web/templates/index.html
+1
View File
@@ -29,6 +29,7 @@
<h1 class="text-2xl font-bold">LLM Monitor</h1>
</div>
<div class="flex items-center gap-4">
<a href="/models-running" class="text-sm bg-gray-700 hover:bg-gray-600 px-3 py-2 rounded-lg transition">Modelli in Memoria</a>
<div id="health-status" class="flex items-center gap-2">
<div id="status-indicator" class="w-3 h-3 bg-gray-500 rounded-full"></div>
<span id="status-text" class="text-sm text-gray-400">Controllo...</span>
app/web/templates/models_running.html
+78
View File
@@ -0,0 +1,78 @@
<!DOCTYPE html>
<html lang="it">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>LLM Monitor - Modelli in Memoria</title>
<link rel="icon" href="/favicon.ico" sizes="any">
<link rel="stylesheet" href="/static/css/output.css">
<style>
@keyframes spin {
to { transform: rotate(360deg); }
}
.animate-spin {
animation: spin 1s linear infinite;
}
</style>
</head>
<body class="bg-gray-900 text-white">
<div class="min-h-screen flex flex-col">
<header class="bg-gray-800 border-b border-gray-700 sticky top-0 z-50">
<div class="max-w-7xl mx-auto px-4 py-6">
<div class="flex items-center justify-between gap-4">
<div class="flex items-center gap-3">
<div class="w-10 h-10 bg-gradient-to-br from-purple-500 to-pink-500 rounded-lg flex items-center justify-center font-bold text-lg">
🧠
</div>
<div>
<h1 class="text-2xl font-bold">Modelli in Memoria</h1>
<p class="text-xs text-gray-400">Vista dedicata all'output di ollama ps</p>
</div>
</div>
<div class="flex items-center gap-2">
<a href="/dashboard" class="text-sm bg-gray-700 hover:bg-gray-600 px-3 py-2 rounded-lg transition">Dashboard</a>
<button id="refresh-btn" class="text-sm bg-purple-600 hover:bg-purple-700 px-3 py-2 rounded-lg transition">Aggiorna</button>
</div>
</div>
</div>
</header>
<main class="flex-1">
<div class="max-w-7xl mx-auto px-4 py-8">
<div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-8">
<div class="bg-gray-800 rounded-lg p-6 border border-gray-700">
<div class="text-gray-400 text-sm font-medium">Modelli Residenti</div>
<div id="running-count" class="text-4xl font-bold mt-2">-</div>
</div>
<div class="bg-gray-800 rounded-lg p-6 border border-gray-700">
<div class="text-gray-400 text-sm font-medium">VRAM Totale Stimata</div>
<div id="vram-total" class="text-4xl font-bold mt-2">-</div>
</div>
<div class="bg-gray-800 rounded-lg p-6 border border-gray-700">
<div class="text-gray-400 text-sm font-medium">Ultimo Refresh</div>
<div id="last-refresh" class="text-base font-semibold mt-3">-</div>
</div>
</div>
<div class="bg-gray-800 rounded-lg border border-gray-700 p-6">
<h2 class="text-xl font-bold mb-4">Output Ollama PS</h2>
<div id="running-models" class="space-y-3">
<div class="text-center py-8">
<div class="inline-block w-8 h-8 border-4 border-gray-600 border-t-purple-500 rounded-full animate-spin"></div>
<p class="text-gray-400 mt-4">Caricamento modelli residenti...</p>
</div>
</div>
</div>
</div>
</main>
<footer class="bg-gray-800 border-t border-gray-700 mt-12">
<div class="max-w-7xl mx-auto px-4 py-6 text-center text-gray-400 text-sm">
<p>LLM Monitor v1.0.0 • Modelli residenti in memoria (ollama ps)</p>
</div>
</footer>
</div>
<script src="/static/js/models-running.js"></script>
</body>
</html>