Luca Sacchi Ricciardi
87 lines
4.4 KiB
HTML
87 lines
4.4 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<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 {
|
|
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">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 id="servers-link" href="/servers" class="text-sm bg-gray-700 hover:bg-gray-600 px-3 py-2 rounded-lg transition">Servers</a>
|
|
<a id="available-link" href="/models-available" class="text-sm bg-gray-700 hover:bg-gray-600 px-3 py-2 rounded-lg transition">Available Models</a>
|
|
<span id="active-server-label" class="hidden text-xs text-gray-300 bg-gray-700 px-3 py-2 rounded-lg"></span>
|
|
<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>
|
|
</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">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">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">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">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">Loading running models...</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 • Models currently loaded in memory (ollama ps)</p>
|
|
</div>
|
|
</footer>
|
|
</div>
|
|
|
|
<script src="/static/js/server-config.js"></script>
|
|
<script src="/static/js/models-running.js"></script>
|
|
<script src="/static/js/pwa-register.js"></script>
|
|
</body>
|
|
</html>
|