pi-farm/PiDoBot
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

templates/index.html aktualisiert

Browse Source
This commit is contained in:
info@pi-farm.de
2026-03-06 19:18:08 +00:00
parent 9419c8a243
commit 64586f0058
1 changed files with 78 additions and 200 deletions
Download Patch File Download Diff File Expand all files Collapse all files

238
templates/index.html
View File

@@ -14,10 +14,14 @@
<script src="/static/marked.min.js"></script> <script src="/static/marked.min.js"></script>
<style> <style>
body { margin: 0; background: #0f172a; }
.grid-stack { .grid-stack {
background: transparent; background: transparent;
min-height: calc(100vh - 55px); min-height: calc(100vh - 60px);
padding: 10px; padding: 10px;
}
.grid-stack-item-content { .grid-stack-item-content {
background: #1e293b; background: #1e293b;
color: white; color: white;
@@ -29,7 +33,8 @@
} }
.terminal-container { .terminal-container {
min-height: 200px; flex: 1;
width: 100%;
background: black; background: black;
} }
@@ -55,10 +60,6 @@
user-select: none; user-select: none;
} }
body {
margin: 0;
}
.top-toolbar { .top-toolbar {
position: fixed; position: fixed;
top: 0; top: 0;
@@ -77,165 +78,92 @@
border-bottom: 1px solid #334155; border-bottom: 1px solid #334155;
} }
.toolbar-title { .toolbar-title { font-weight: bold; font-size: 1.1em; color: #38bdf8; }
font-weight: bold; .toolbar-controls { display: flex; align-items: center; gap: 10px; }
font-size: 1.1em; .toolbar-controls label { white-space: nowrap; font-size: 12px; color: #94a3b8; }
color: #38bdf8;
}
.toolbar-controls {
display: flex;
align-items: center;
gap: 10px;
}
.toolbar-controls label {
white-space: nowrap;
font-size: 12px;
color: #94a3b8;
}
/* 1. Den Container flexibel machen */
#ollama-url-container { #ollama-url-container {
display: none; /* Wird per JS auf 'flex' gesetzt */ display: none;
align-items: center; align-items: center;
gap: 8px; gap: 8px;
border-left: 1px solid #475569; border-left: 1px solid #475569;
padding-left: 12px; padding-left: 12px;
} }
/* 2. Speziell das Input-Feld im Container verbreitern */ #ollama-url { width: 200px; }
#ollama-url { .toolbar-controls select, .toolbar-controls input {
width: 250px; /* Feste Breite für das Eingabefeld */ height: 32px; background: #0f172a; color: white;
transition: width 0.3s ease; border: 1px solid #475569; border-radius: 4px; padding: 0 8px; font-size: 12px;
}
/* Optional: Das Feld wird noch breiter, wenn man hineinklickt */
#ollama-url:focus {
width: 350px;
border-color: #38bdf8;
}
.toolbar-controls select,
.toolbar-controls input {
height: 32px;
background: #0f172a;
color: white;
border: 1px solid #475569;
border-radius: 4px;
padding: 0 8px;
font-size: 12px;
outline: none;
}
.toolbar-controls select:focus,
.toolbar-controls input:focus {
border-color: #38bdf8;
} }
.btn-tool { .btn-tool {
height: 32px; height: 32px; padding: 0 12px; border-radius: 4px; font-size: 12px;
padding: 0 12px; font-weight: bold; display: flex; align-items: center; gap: 5px;
border-radius: 4px;
font-size: 12px;
font-weight: bold;
transition: all 0.2s;
display: flex;
align-items: center;
gap: 5px;
} }
.save-btn { background-color: #059669; color: white; } .save-btn { background-color: #059669; color: white; }
.save-btn:hover { background-color: #10b981; }
.add-node-btn { background-color: #2563eb; color: white; } .add-node-btn { background-color: #2563eb; color: white; }
.add-node-btn:hover { background-color: #3b82f6; }
#settings-status { .node-badge {
color: #10b981; background: #334155; padding: 2px 5px; border-radius: 4px;
font-size: 11px; font-size: 8px; text-transform: uppercase; font-weight: bold; color: #94a3b8;
min-width: 80px;
} }
.markdown-content pre { background: #000; padding: 8px; border-radius: 4px; border: 1px solid #334155; overflow-x: auto; margin: 8px 0; } .markdown-content pre { background: #000; padding: 8px; border-radius: 4px; border: 1px solid #334155; overflow-x: auto; margin: 8px 0; }
.markdown-content code { font-family: monospace; color: #4ade80; }
.markdown-content p { margin-bottom: 8px; }
/* NEUE STYLES FÜR NODE CARDS */
.node-badge {
background: #334155;
padding: 2px 5px;
border-radius: 4px;
font-size: 8px;
text-transform: uppercase;
font-weight: bold;
color: #94a3b8;
}
</style> </style>
</head> </head>
<body class="bg-slate-950 text-white overflow-hidden"> <body class="text-white">
<div class="top-toolbar"> <div class="top-toolbar">
<div class="toolbar-title">🤖 KI-Orchestrator</div> <div class="toolbar-title">🤖 KI-Orchestrator</div>
<div class="toolbar-controls"> <div class="toolbar-controls">
<button onclick="addNode()" class="btn-tool add-node-btn"> <button onclick="addNode()" class="btn-tool add-node-btn"><span>+</span> Node</button>
<span>+</span> Node hinzufügen <div class="h-6 w-px bg-slate-700 mx-1"></div>
</button> <label>Provider:</label>
<div class="h-6 w-px bg-slate-700 mx-2"></div>
<label for="ai-provider">Provider:</label>
<select id="ai-provider" onchange="updateModelDropdown(false)"> <select id="ai-provider" onchange="updateModelDropdown(false)">
<option value="google">Google Gemini</option> <option value="google">Google Gemini</option>
<option value="openai">OpenAI</option> <option value="openai">OpenAI</option>
<option value="nvidia">NVIDIA</option> <option value="nvidia">NVIDIA</option>
<option value="ollama">Ollama</option> <option value="ollama">Ollama</option>
</select> </select>
<label>Modell:</label>
<label for="ai-model">Modell:</label>
<select id="ai-model"></select> <select id="ai-model"></select>
<div id="ollama-url-container"> <div id="ollama-url-container">
<label for="ollama-url">URL:</label> <input type="text" id="ollama-url" onblur="updateModelDropdown(false)" placeholder="URL: http://...">
<input type="text" id="ollama-url" onblur="updateModelDropdown(false)" placeholder="http://192.168.x.x:11434/v1">
</div> </div>
<button class="btn-tool save-btn" onclick="saveSettings()">Speichern</button> <button class="btn-tool save-btn" onclick="saveSettings()">Speichern</button>
<span id="settings-status"></span> <span id="settings-status"></span>
</div> </div>
</div> </div>
<div class="flex h-screen"> <div class="flex min-h-screen pt-[55px]">
<div class="flex min-h-screen pt-[55px]"> <div class="w-64 bg-slate-900 border-r border-slate-800 p-4 flex flex-col fixed left-0 top-[55px] bottom-0 z-10">
<div class="w-64 bg-slate-900 border-r border-slate-800 p-4 flex flex-col fixed left-0 top-[55px] bottom-0 z-10">
<div id="node-list" class="flex-1 overflow-y-auto space-y-2"> <div id="node-list" class="flex-1 overflow-y-auto space-y-2">
{% for node in nodes %} {% for node in nodes %}
<div class="p-3 bg-slate-800 rounded border border-slate-700 relative group" id="node-card-{{ node.id }}"> <div class="p-3 bg-slate-800 rounded border border-slate-700 relative group" id="node-card-{{ node.id }}">
<div class="flex justify-between items-start"> <div class="flex justify-between items-start">
<div class="text-sm font-bold">{{ node.name }}</div> <div class="text-sm font-bold">{{ node.name }}</div>
<form action="/remove_node/{{ node.id }}" method="post" onsubmit="return confirm('Node wirklich entfernen?')"> <form action="/remove_node/{{ node.id }}" method="post" onsubmit="return confirm('Entfernen?')">
<button type="submit" class="text-slate-500 hover:text-red-500 text-xs">✕</button> <button type="submit" class="text-slate-500 hover:text-red-500 text-xs">✕</button>
</form> </form>
</div> </div>
<div class="text-[10px] text-slate-500 font-mono flex justify-between items-center mb-1"> <div class="text-[10px] text-slate-500 font-mono flex justify-between items-center mb-1">
{{ node.ip }} {{ node.ip }}
<button onclick="refreshNodeStatus({{ node.id }})" class="hover:text-blue-400">🔄</button> <button onclick="refreshNodeStatus({{ node.id }})" class="hover:text-blue-400">🔄</button>
</div> </div>
<div class="flex gap-1 mb-2"> <div class="flex gap-1 mb-2">
<span id="os-{{ node.id }}" class="node-badge truncate max-w-[80px]" title="{{ node.os }}">{{ node.os }}</span> <span id="os-{{ node.id }}" class="node-badge truncate max-w-[80px]">{{ node.os }}</span>
<span id="arch-{{ node.id }}" class="node-badge">{{ node.arch }}</span> <span id="arch-{{ node.id }}" class="node-badge">{{ node.arch }}</span>
</div> </div>
<div class="mt-1 flex items-center gap-2"> <div class="mt-1 flex items-center gap-2">
<span id="led-{{ node.id }}" class="h-2 w-2 rounded-full {% if 'Aktiv' in node.status %} bg-blue-500 shadow-[0_0_8px_#3b82f6] {% else %} bg-yellow-500 {% endif %}"></span> <span id="led-{{ node.id }}" class="h-2 w-2 rounded-full {% if 'Aktiv' in node.status %} bg-blue-500 shadow-[0_0_8px_#3b82f6] {% else %} bg-yellow-500 {% endif %}"></span>
<span id="badge-{{ node.id }}" class="text-[9px] uppercase font-mono text-slate-300">{{ node.status }}</span> <span id="badge-{{ node.id }}" class="text-[9px] uppercase font-mono text-slate-300">{{ node.status }}</span>
</div> </div>
<button onclick="openTerminal('{{ node.ip }}')" class="mt-2 w-full text-[10px] bg-slate-700 hover:bg-slate-600 py-1 rounded transition-colors">Konsole öffnen</button> <button onclick="openTerminal('{{ node.ip }}')" class="mt-2 w-full text-[10px] bg-slate-700 hover:bg-slate-600 py-1 rounded">Konsole</button>
</div> </div>
{% endfor %} {% endfor %}
</div> </div>
<button onclick="localStorage.removeItem('pi-orch-layout-v2'); location.reload();" class="mt-4 text-[10px] text-slate-500 hover:text-white uppercase text-center w-full">Layout Reset</button> <button onclick="localStorage.removeItem('pi-orch-layout-v2'); location.reload();" class="mt-4 text-[10px] text-slate-500 hover:text-white uppercase">Layout Reset</button>
</div> </div>
<div class="flex-1 ml-64 bg-slate-950 overflow-y-auto"> <div class="flex-1 ml-64 bg-slate-950 overflow-y-auto">
@@ -245,8 +173,8 @@
<div class="widget-header"><span>💬 KI Chat</span> <span>⠿</span></div> <div class="widget-header"><span>💬 KI Chat</span> <span>⠿</span></div>
<div id="chat-window" class="flex-1 p-4 overflow-y-auto text-sm space-y-2 bg-[#0f172a]/50"></div> <div id="chat-window" class="flex-1 p-4 overflow-y-auto text-sm space-y-2 bg-[#0f172a]/50"></div>
<div class="p-2 border-t border-slate-700 flex bg-slate-800"> <div class="p-2 border-t border-slate-700 flex bg-slate-800">
<input id="user-input" type="text" class="flex-1 bg-slate-900 p-2 rounded text-xs outline-none border border-slate-700 focus:border-blue-500" placeholder="Nachricht (Enter zum Senden)..." autocomplete="off"> <input id="user-input" type="text" class="flex-1 bg-slate-900 p-2 rounded text-xs outline-none border border-slate-700 focus:border-blue-500" placeholder="Frage eingeben...">
<button onclick="sendMessage()" class="ml-2 bg-blue-600 hover:bg-blue-500 px-4 py-1 rounded text-xs transition-colors">Senden</button> <button onclick="sendMessage()" class="ml-2 bg-blue-600 hover:bg-blue-500 px-4 py-1 rounded text-xs">Senden</button>
</div> </div>
</div> </div>
</div> </div>
@@ -254,7 +182,7 @@
<div class="grid-stack-item" gs-id="logs-widget" gs-w="6" gs-h="5" gs-x="6" gs-y="0"> <div class="grid-stack-item" gs-id="logs-widget" gs-w="6" gs-h="5" gs-x="6" gs-y="0">
<div class="grid-stack-item-content"> <div class="grid-stack-item-content">
<div class="widget-header"><span>📜 System Logs</span> <span>⠿</span></div> <div class="widget-header"><span>📜 System Logs</span> <span>⠿</span></div>
<div id="install-log">Warte auf Aufgaben...</div> <div id="install-log">Warte auf Daten...</div>
</div> </div>
</div> </div>
@@ -272,13 +200,13 @@
<div class="bg-slate-800 p-6 rounded-lg border border-slate-600 w-96"> <div class="bg-slate-800 p-6 rounded-lg border border-slate-600 w-96">
<h3 class="text-lg font-bold mb-4">Neuen Node hinzufügen</h3> <h3 class="text-lg font-bold mb-4">Neuen Node hinzufügen</h3>
<form action="/add_node" method="post" class="space-y-4"> <form action="/add_node" method="post" class="space-y-4">
<input type="text" name="name" placeholder="Name (z.B. Pi-Worker-1)" class="w-full bg-slate-900 border border-slate-700 p-2 rounded text-sm" required> <input type="text" name="name" placeholder="Name" class="w-full bg-slate-900 border border-slate-700 p-2 rounded text-sm" required>
<input type="text" name="ip" placeholder="IP Adresse" class="w-full bg-slate-900 border border-slate-700 p-2 rounded text-sm" required> <input type="text" name="ip" placeholder="IP Adresse" class="w-full bg-slate-900 border border-slate-700 p-2 rounded text-sm" required>
<input type="text" name="user" placeholder="SSH Benutzer" class="w-full bg-slate-900 border border-slate-700 p-2 rounded text-sm" required> <input type="text" name="user" placeholder="SSH Benutzer" class="w-full bg-slate-900 border border-slate-700 p-2 rounded text-sm" required>
<input type="password" name="password" placeholder="Sudo/SSH Passwort" class="w-full bg-slate-900 border border-slate-700 p-2 rounded text-sm" required> <input type="password" name="password" placeholder="Passwort" class="w-full bg-slate-900 border border-slate-700 p-2 rounded text-sm" required>
<div class="flex justify-end gap-2 pt-2"> <div class="flex justify-end gap-2 pt-2">
<button type="button" onclick="closeAddNode()" class="px-4 py-2 text-sm text-slate-400">Abbrechen</button> <button type="button" onclick="closeAddNode()" class="px-4 py-2 text-sm text-slate-400">Abbrechen</button>
<button type="submit" class="bg-blue-600 px-4 py-2 text-sm rounded font-bold">Koppeln & Inventur</button> <button type="submit" class="bg-blue-600 px-4 py-2 text-sm rounded font-bold">Koppeln</button>
</div> </div>
</form> </form>
</div> </div>
@@ -288,7 +216,7 @@
let currentSettings = {}; let currentSettings = {};
let termDataDisposable = null; let termDataDisposable = null;
// 1. CHAT LOGIK // CHAT
function initChat(chatWs) { function initChat(chatWs) {
const input = document.getElementById('user-input'); const input = document.getElementById('user-input');
window.sendMessage = function() { window.sendMessage = function() {
@@ -297,56 +225,20 @@
chatWs.send(msg); chatWs.send(msg);
appendChat("Du", msg, "text-slate-400 font-bold"); appendChat("Du", msg, "text-slate-400 font-bold");
input.value = ''; input.value = '';
input.focus();
}; };
input.addEventListener('keydown', (e) => { if (e.key === 'Enter') { e.preventDefault(); sendMessage(); } }); input.addEventListener('keydown', (e) => { if (e.key === 'Enter') sendMessage(); });
} }
// 2. MODAL LOGIK
window.addNode = () => document.getElementById('add-node-modal').classList.remove('hidden'); window.addNode = () => document.getElementById('add-node-modal').classList.remove('hidden');
window.closeAddNode = () => document.getElementById('add-node-modal').classList.add('hidden'); window.closeAddNode = () => document.getElementById('add-node-modal').classList.add('hidden');
// 3. ERWEITERTER REFRESH (Aktualisiert OS & Arch) // AI SETTINGS
window.refreshNodeStatus = async function(nodeId) {
const badge = document.getElementById(`badge-${nodeId}`);
const led = document.getElementById(`led-${nodeId}`);
const osEl = document.getElementById(`os-${nodeId}`);
const archEl = document.getElementById(`arch-${nodeId}`);
const card = document.getElementById(`node-card-${nodeId}`);
badge.textContent = "PRÜFE...";
card.style.opacity = "0.7";
try {
const response = await fetch(`/refresh_status/${nodeId}`);
const data = await response.json();
badge.textContent = data.status;
osEl.textContent = data.os;
archEl.textContent = data.arch;
if (data.status.includes("Aktiv")) {
led.className = "h-2 w-2 rounded-full bg-blue-500 shadow-[0_0_8px_#3b82f6]";
} else if (data.status === "Offline") {
led.className = "h-2 w-2 rounded-full bg-red-500 shadow-[0_0_8px_#ef4444]";
} else {
led.className = "h-2 w-2 rounded-full bg-yellow-500";
}
} catch (e) {
badge.textContent = "FEHLER";
led.className = "h-2 w-2 rounded-full bg-red-500";
} finally {
card.style.opacity = "1";
}
};
// 4. SETTINGS & MODEL LOGIK
async function loadSettings() { async function loadSettings() {
try { try {
const res = await fetch('/api/settings'); const res = await fetch('/api/settings');
currentSettings = await res.json(); currentSettings = await res.json();
document.getElementById('ai-provider').value = currentSettings.provider; document.getElementById('ai-provider').value = currentSettings.provider;
document.getElementById('ollama-url').value = currentSettings.ollama_base_url || "http://127.0.0.1:11434/v1"; document.getElementById('ollama-url').value = currentSettings.ollama_base_url || "";
updateModelDropdown(true); updateModelDropdown(true);
} catch (e) {} } catch (e) {}
} }
@@ -361,77 +253,63 @@
modelSelect.innerHTML = '<option>Lade...</option>'; modelSelect.innerHTML = '<option>Lade...</option>';
try { try {
// URL Parameter nur aufbauen, wenn nötig
let queryUrl = `/api/models?provider=${provider}`; let queryUrl = `/api/models?provider=${provider}`;
if (provider === "ollama") { if (provider === "ollama" && ollamaUrl) queryUrl += `&url=${encodeURIComponent(ollamaUrl)}`;
queryUrl += `&url=${encodeURIComponent(ollamaUrl)}`;
}
const res = await fetch(queryUrl); const res = await fetch(queryUrl);
const data = await res.json(); const data = await res.json();
modelSelect.innerHTML = ''; modelSelect.innerHTML = '';
if (data.models && data.models.length > 0) { if (data.models) {
data.models.forEach(m => { data.models.forEach(m => {
const opt = document.createElement('option'); const opt = document.createElement('option');
opt.value = opt.textContent = m; opt.value = opt.textContent = m;
modelSelect.appendChild(opt); modelSelect.appendChild(opt);
}); });
// Korrektur: In deiner main.py ist ein Tippfehler bei "mvidia_model" (mit m)
// Prüfe das in deiner settings API oder korrigiere es hier:
const savedModel = currentSettings[`${provider}_model`] || (provider === 'nvidia' ? currentSettings['nvidia_model'] : null); const savedModel = currentSettings[`${provider}_model`] || (provider === 'nvidia' ? currentSettings['nvidia_model'] : null);
if (isInitialLoad && savedModel) modelSelect.value = savedModel; if (isInitialLoad && savedModel) modelSelect.value = savedModel;
} }
} catch (e) { } catch (e) { modelSelect.innerHTML = '<option>Fehler</option>'; }
modelSelect.innerHTML = '<option>Fehler beim Laden</option>';
}
} }
async function saveSettings() { async function saveSettings() {
const provider = document.getElementById('ai-provider').value; const provider = document.getElementById('ai-provider').value;
const model = document.getElementById('ai-model').value; const model = document.getElementById('ai-model').value;
const ollama_base_url = document.getElementById('ollama-url').value; const ollama_base_url = document.getElementById('ollama-url').value;
const statusEl = document.getElementById('settings-status');
try { try {
await fetch('/api/settings', { await fetch('/api/settings', {
method: 'POST', method: 'POST',
headers: { 'Content-Type': 'application/json' }, headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ provider, model, ollama_base_url }) body: JSON.stringify({ provider, model, ollama_base_url })
}); });
statusEl.textContent = "✅ Gespeichert"; document.getElementById('settings-status').textContent = "✅";
setTimeout(() => statusEl.textContent = "", 2000); setTimeout(() => document.getElementById('settings-status').textContent = "", 2000);
} catch (e) { statusEl.textContent = "❌ Fehler"; } } catch (e) {}
} }
// 5. INITIALISIERUNG // INIT EVERYTHING
document.addEventListener('DOMContentLoaded', function() { document.addEventListener('DOMContentLoaded', function() {
var grid = GridStack.init({ const grid = GridStack.init({
cellHeight: 80, cellHeight: 80, margin: 10, handle: '.widget-header', resizable: { handles: 'all' }
margin: 10,
float: true,
handle: '.widget-header',
resizable: { handles: 'all' },
alwaysShowResizeHandle: /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)
}); });
const savedLayout = localStorage.getItem('pi-orch-layout-v2'); const savedLayout = localStorage.getItem('pi-orch-layout-v2');
if (savedLayout) { try { grid.load(JSON.parse(savedLayout)); } catch(e){} } if (savedLayout) try { grid.load(JSON.parse(savedLayout)); } catch(e){}
grid.on('resizestop dragstop', () => { grid.on('resizestop dragstop', () => localStorage.setItem('pi-orch-layout-v2', JSON.stringify(grid.save(false))));
localStorage.setItem('pi-orch-layout-v2', JSON.stringify(grid.save(false)));
});
const term = new Terminal({ theme: { background: '#000' }, fontSize: 13, convertEol: true }); const term = new Terminal({ theme: { background: '#000' }, fontSize: 13, convertEol: true });
const fitAddon = new FitAddon.FitAddon(); const fitAddon = new FitAddon.FitAddon();
term.loadAddon(fitAddon); term.loadAddon(fitAddon);
term.open(document.getElementById('terminal')); term.open(document.getElementById('terminal'));
setTimeout(() => fitAddon.fit(), 200);
const logWs = new WebSocket(`ws://${location.host}/ws/install_logs`); const logWs = new WebSocket(`ws://${location.host}/ws/install_logs`);
logWs.onmessage = (ev) => { logWs.onmessage = (ev) => {
const div = document.createElement('div'); const div = document.createElement('div');
div.textContent = `> ${ev.data}`; div.textContent = `> ${ev.data}`;
document.getElementById('install-log').appendChild(div); const logBox = document.getElementById('install-log');
document.getElementById('install-log').scrollTop = document.getElementById('install-log').scrollHeight; logBox.appendChild(div);
logBox.scrollTop = logBox.scrollHeight;
}; };
const chatWs = new WebSocket(`ws://${location.host}/ws/chat`); const chatWs = new WebSocket(`ws://${location.host}/ws/chat`);