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

Translate UI to English and add PWA support

Browse Source
This commit is contained in:
Luca Sacchi Ricciardi
2026-04-25 15:32:10 +02:00
parent 2f28b6a52a
commit 3ba6a9a41c
9 changed files with 190 additions and 65 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/web/templates/index.html
+21 -16
View File
@@ -1,10 +1,14 @@
<!DOCTYPE html>
<html lang="it">
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>LLM Monitor - Dashboard Ollama</title>
<title>LLM Monitor - Ollama Dashboard</title>
<link rel="icon" href="/favicon.ico" sizes="any">
<link rel="manifest" href="/manifest.webmanifest">
<meta name="theme-color" content="#111827">
<meta name="application-name" content="LLM Monitor">
<meta name="description" content="Monitor available and running Ollama models.">
<!-- Tailwind CSS (compiled for production) -->
<link rel="stylesheet" href="/static/css/output.css">
<style>
@@ -47,10 +51,10 @@
<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>
<a href="/models-running" class="text-sm bg-gray-700 hover:bg-gray-600 px-3 py-2 rounded-lg transition">Running Models</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>
<span id="status-text" class="text-sm text-gray-400">Checking...</span>
</div>
</div>
</div>
@@ -63,15 +67,15 @@
<!-- Stats Cards -->
<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 Caricati</div>
<div class="text-gray-400 text-sm font-medium">Loaded Models</div>
<div id="models-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">Spazio Totale</div>
<div class="text-gray-400 text-sm font-medium">Total Size</div>
<div id="total-size" 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">Status Ollama</div>
<div class="text-gray-400 text-sm font-medium">Ollama Status</div>
<div id="ollama-status" class="text-4xl font-bold mt-2">-</div>
</div>
</div>
@@ -80,11 +84,11 @@
<div class="bg-gray-800 rounded-lg border border-gray-700 p-6">
<div class="flex items-center justify-between mb-6">
<div>
<h2 class="text-xl font-bold">Modelli Disponibili</h2>
<p class="text-xs text-gray-400 mt-1">Passa il mouse o clicca una card per aprire la modal dettagli.</p>
<h2 class="text-xl font-bold">Available Models</h2>
<p class="text-xs text-gray-400 mt-1">Hover or click a card to open the details modal.</p>
</div>
<button id="refresh-btn" class="bg-purple-600 hover:bg-purple-700 px-4 py-2 rounded-lg text-sm font-medium transition">
🔄 Aggiorna
Refresh
</button>
</div>
@@ -92,15 +96,15 @@
<div id="models-container" class="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-4">
<div class="text-center py-8">
<div class="animate-spin inline-block w-8 h-8 border-4 border-gray-600 border-t-purple-500 rounded-full"></div>
<p class="text-gray-400 mt-4">Caricamento modelli...</p>
<p class="text-gray-400 mt-4">Loading models...</p>
</div>
</div>
</div>
<!-- API Documentation Section -->
<div class="mt-8 bg-blue-900 bg-opacity-20 border border-blue-700 rounded-lg p-6">
<h3 class="text-lg font-bold mb-4">📚 Documentazione API</h3>
<p class="text-gray-300 mb-4">La API è documentata e testabile direttamente da:</p>
<h3 class="text-lg font-bold mb-4">API Documentation</h3>
<p class="text-gray-300 mb-4">The API is documented and testable from:</p>
<div class="flex gap-3 flex-wrap">
<a href="/docs" target="_blank" class="inline-block bg-blue-600 hover:bg-blue-700 px-4 py-2 rounded-lg text-sm font-medium transition">
Swagger UI
@@ -116,7 +120,7 @@
<!-- Footer -->
<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 • Fatto con ❤️ da <a href="https://lucasacchi.net" target="_blank" class="text-purple-400 hover:text-purple-300">LucaSacchi.Net</a></p>
<p>LLM Monitor v1.0.0 • Built by <a href="https://lucasacchi.net" target="_blank" class="text-purple-400 hover:text-purple-300">LucaSacchi.Net</a></p>
</div>
</footer>
</div>
@@ -128,10 +132,10 @@
<div id="model-details-section" class="w-full max-w-4xl bg-gray-800 rounded-lg border border-gray-700 p-6 shadow-xl">
<div class="flex items-center justify-between mb-4">
<div>
<h3 class="text-lg font-bold">Dettagli Modello</h3>
<h3 class="text-lg font-bold">Model Details</h3>
<span id="model-details-name" class="text-sm text-purple-300 font-medium"></span>
</div>
<button id="model-details-close" type="button" class="text-gray-300 hover:text-white text-2xl leading-none px-2" aria-label="Chiudi modal">×</button>
<button id="model-details-close" type="button" class="text-gray-300 hover:text-white text-2xl leading-none px-2" aria-label="Close modal">×</button>
</div>
<div class="modal-body">
<pre id="model-details-content" class="bg-gray-900 text-gray-200 text-xs p-4 rounded-lg whitespace-pre-wrap"></pre>
@@ -144,5 +148,6 @@
<!-- Web Worker for background data sync -->
<!-- localStorage for client-side persistence -->
<script src="/static/js/app.js"></script>
<script src="/static/js/pwa-register.js"></script>
</body>
</html>
app/web/templates/models_running.html
+17 -12
View File
@@ -1,10 +1,14 @@
<!DOCTYPE html>
<html lang="it">
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>LLM Monitor - Modelli in Memoria</title>
<title>LLM Monitor - Running Models</title>
<link rel="icon" href="/favicon.ico" sizes="any">
<link rel="manifest" href="/manifest.webmanifest">
<meta name="theme-color" content="#111827">
<meta name="application-name" content="LLM Monitor">
<meta name="description" content="View models currently loaded in Ollama memory.">
<link rel="stylesheet" href="/static/css/output.css">
<style>
@keyframes spin {
@@ -25,13 +29,13 @@
🧠
</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>
<h1 class="text-2xl font-bold">Running Models</h1>
<p class="text-xs text-gray-400">Dedicated view for ollama ps output</p>
</div>
</div>
<div class="flex items-center gap-2">
<a href="/models-available" class="text-sm bg-gray-700 hover:bg-gray-600 px-3 py-2 rounded-lg transition">Modelli Disponibili</a>
<button id="refresh-btn" class="text-sm bg-purple-600 hover:bg-purple-700 px-3 py-2 rounded-lg transition">Aggiorna</button>
<a href="/models-available" class="text-sm bg-gray-700 hover:bg-gray-600 px-3 py-2 rounded-lg transition">Available Models</a>
<button id="refresh-btn" class="text-sm bg-purple-600 hover:bg-purple-700 px-3 py-2 rounded-lg transition">Refresh</button>
</div>
</div>
</div>
@@ -41,25 +45,25 @@
<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 class="text-gray-400 text-sm font-medium">Loaded in Memory</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 class="text-gray-400 text-sm font-medium">Estimated Total VRAM</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 class="text-gray-400 text-sm font-medium">Last 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>
<h2 class="text-xl font-bold mb-4">Ollama PS Output</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>
<p class="text-gray-400 mt-4">Loading running models...</p>
</div>
</div>
</div>
@@ -68,11 +72,12 @@
<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>
<p>LLM Monitor v1.0.0 • Models currently loaded in memory (ollama ps)</p>
</div>
</footer>
</div>
<script src="/static/js/models-running.js"></script>
<script src="/static/js/pwa-register.js"></script>
</body>
</html>