342 lines
21 KiB
HTML
342 lines
21 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="de">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<title>Pi-Orchestrator AI Dashboard</title>
|
|
<script src="https://cdn.jsdelivr.net/npm/tailwindcss.com"></script>
|
|
<script src="https://cdn.tailwindcss.com"></script>
|
|
|
|
<link href="https://cdn.jsdelivr.net/npm/gridstack@11.1.0/dist/gridstack.min.css" rel="stylesheet"/>
|
|
<script src="https://cdn.jsdelivr.net/npm/gridstack@11.1.0/dist/gridstack-all.js"></script>
|
|
|
|
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/xterm@5.3.0/css/xterm.css" />
|
|
<script src="https://cdn.jsdelivr.net/npm/xterm@5.3.0/lib/xterm.js"></script>
|
|
<script src="https://cdn.jsdelivr.net/npm/xterm-addon-fit@0.8.0/lib/xterm-addon-fit.js"></script>
|
|
<script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
|
|
|
|
<style>
|
|
.grid-stack { background: #0f172a; min-height: 100vh; padding: 10px; }
|
|
.grid-stack-item-content {
|
|
background: #1e293b;
|
|
color: white; border: 1px solid #334155; border-radius: 8px;
|
|
display: flex; flex-direction: column; overflow: hidden;
|
|
}
|
|
.terminal-container, #terminal { flex: 1; width: 100%; height: 100%; background: black; }
|
|
#install-log { flex: 1; font-family: monospace; font-size: 11px; color: #4ade80; padding: 10px; overflow-y: auto; background: #0f172a; }
|
|
.widget-header { background: #334155; padding: 8px 12px; cursor: move; font-size: 12px; font-weight: bold; display: flex; justify-content: space-between; align-items: center; user-select: none; }
|
|
body { margin: 0; padding-top: 60px; }
|
|
.top-toolbar { position: fixed; top: 0; left: 0; width: 100%; background-color: #1e293b; color: white; height: 55px; display: flex; align-items: center; justify-content: space-between; padding: 0 20px; box-sizing: border-box; box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.3); z-index: 1000; border-bottom: 1px solid #334155; }
|
|
.toolbar-title { font-weight: bold; font-size: 1.1em; color: #38bdf8; }
|
|
.toolbar-controls { display: flex; align-items: center; gap: 10px; }
|
|
.toolbar-controls label { white-space: nowrap; font-size: 12px; color: #94a3b8; }
|
|
#ollama-url-container { display: none; align-items: center; gap: 8px; border-left: 1px solid #475569; padding-left: 12px; }
|
|
.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; }
|
|
.btn-tool { height: 32px; padding: 0 12px; 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; }
|
|
.add-node-btn { background-color: #2563eb; color: white; }
|
|
#settings-status { color: #10b981; font-size: 11px; min-width: 80px; }
|
|
.markdown-content pre { background: #000; padding: 8px; border-radius: 4px; border: 1px solid #334155; overflow-x: auto; margin: 8px 0; }
|
|
|
|
/* Hilfsklassen für Resize-Handles (GridStack) */
|
|
.ui-resizable-handle { opacity: 0.2; transition: opacity 0.2s; }
|
|
.ui-resizable-handle:hover { opacity: 1; background: rgba(56, 189, 248, 0.5); }
|
|
</style>
|
|
</head>
|
|
<body class="bg-slate-950 text-white overflow-hidden">
|
|
|
|
<div class="top-toolbar">
|
|
<div class="toolbar-title">🤖 KI-Orchestrator</div>
|
|
<div class="toolbar-controls">
|
|
<button onclick="addNode()" class="btn-tool add-node-btn"><span>+</span> Node hinzufügen</button>
|
|
<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)">
|
|
<option value="google">Google Gemini</option>
|
|
<option value="openai">OpenAI</option>
|
|
<option value="ollama">Ollama</option>
|
|
</select>
|
|
<label for="ai-model">Modell:</label>
|
|
<select id="ai-model"></select>
|
|
<div id="ollama-url-container">
|
|
<label for="ollama-url">URL:</label>
|
|
<input type="text" id="ollama-url" onblur="updateModelDropdown(false)" placeholder="http://192.168.x.x:11434/v1">
|
|
</div>
|
|
<button class="btn-tool save-btn" onclick="saveSettings()">Speichern</button>
|
|
<span id="settings-status"></span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="flex h-screen">
|
|
<div class="w-64 bg-slate-900 border-r border-slate-800 p-4 flex flex-col">
|
|
<div id="node-list" class="flex-1 overflow-y-auto space-y-2">
|
|
{% for node in nodes %}
|
|
<div class="p-3 bg-slate-800 rounded border border-slate-700 relative group node-card-entry"
|
|
id="node-card-{{ node.id }}"
|
|
data-node-id="{{ node.id }}">
|
|
<div class="flex justify-between items-start">
|
|
<div class="text-sm font-bold flex items-center gap-1.5 cursor-pointer hover:text-blue-400" onclick="openEditNode({{ node.id }})">
|
|
<span id="os-icon-{{ node.id }}" class="text-lg" title="{{ node.os }}">🖥️</span>
|
|
<span>{{ node.name }}</span>
|
|
</div>
|
|
<div class="flex items-center gap-2">
|
|
<button onclick="openEditNode({{ node.id }})" class="text-slate-500 hover:text-blue-400 text-xs">✏️</button>
|
|
<form action="/remove_node/{{ node.id }}" method="post" class="inline m-0 p-0">
|
|
<button type="submit" class="text-slate-500 hover:text-red-500 text-xs">✕</button>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
<div class="text-[10px] text-slate-400 font-mono flex justify-between items-center mt-1">
|
|
{{ node.ip }}
|
|
<span id="arch-{{ node.id }}" class="bg-slate-900 border border-slate-700 px-1.5 rounded">{{ node.arch }}</span>
|
|
</div>
|
|
<div class="mt-2 flex items-center justify-between">
|
|
<div class="flex items-center gap-2">
|
|
<span id="led-{{ node.id }}" class="h-2 w-2 rounded-full {% if node.status == 'Docker Aktiv' %} bg-blue-500 shadow-[0_0_8px_#3b82f6] {% elif 'Offline' in node.status %} bg-red-500 shadow-[0_0_8px_#ef4444] {% else %} bg-yellow-500 {% endif %}"></span>
|
|
<span id="badge-{{ node.id }}" class="text-[9px] uppercase font-mono text-slate-300">{{ node.status }}</span>
|
|
</div>
|
|
<button onclick="refreshNodeStatus({{ node.id }})" class="text-slate-500 hover:text-blue-400 text-[10px]">🔄</button>
|
|
</div>
|
|
<div class="flex gap-1.5 mt-2">
|
|
<span class="text-[9px] px-1.5 rounded font-bold bg-green-900/50 text-green-400 border border-green-800">SSH</span>
|
|
<span id="vnc-badge-{{ node.id }}" class="text-[9px] px-1.5 rounded font-bold border {% if node.vnc %}bg-purple-900/50 text-purple-400 border-purple-800{% else %}bg-slate-800 text-slate-600 border-slate-700{% endif %}">VNC</span>
|
|
</div>
|
|
<button onclick="openTerminal('{{ node.ip }}')" class="mt-3 w-full text-[10px] bg-slate-700 hover:bg-slate-600 py-1.5 rounded font-bold uppercase tracking-wider">Terminal öffnen</button>
|
|
</div>
|
|
{% endfor %}
|
|
</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>
|
|
</div>
|
|
|
|
<div class="flex-1 overflow-y-auto">
|
|
<div class="grid-stack">
|
|
<div class="grid-stack-item" gs-id="chat-widget" gs-w="6" gs-h="5" gs-x="0" gs-y="0">
|
|
<div class="grid-stack-item-content">
|
|
<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 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..." autocomplete="off">
|
|
<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 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="widget-header"><span>📜 System Logs</span> <span>⠿</span></div>
|
|
<div id="install-log">Warte auf Aufgaben...</div>
|
|
</div>
|
|
</div>
|
|
<div class="grid-stack-item" gs-id="term-widget" gs-w="12" gs-h="6" gs-x="0" gs-y="5">
|
|
<div class="grid-stack-item-content">
|
|
<div class="widget-header"><span>🖥️ Live Terminal</span> <span>⠿</span></div>
|
|
<div id="terminal" class="terminal-container"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="add-node-modal" class="hidden fixed inset-0 bg-black/80 flex items-center justify-center z-[2000]">
|
|
<div class="bg-slate-800 p-6 rounded-lg border border-slate-600 w-96 shadow-2xl">
|
|
<h3 class="text-lg font-bold mb-4 text-blue-400">Neuen Node hinzufügen</h3>
|
|
<form action="/add_node" method="post" class="space-y-3">
|
|
<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="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="password" name="password" placeholder="SSH 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-4">
|
|
<button type="button" onclick="closeAddNode()" class="px-4 py-2 text-sm text-slate-400 hover:text-white">Abbrechen</button>
|
|
<button type="submit" class="bg-blue-600 hover:bg-blue-500 px-4 py-2 text-sm rounded font-bold">Koppeln</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="edit-node-modal" class="hidden fixed inset-0 bg-black/80 flex items-center justify-center z-[2000]">
|
|
<div class="bg-slate-800 p-6 rounded-lg border border-slate-600 w-96 shadow-2xl">
|
|
<h3 class="text-lg font-bold mb-4 text-emerald-400">Node bearbeiten</h3>
|
|
<form id="edit-node-form" method="post" class="space-y-3">
|
|
<input type="text" id="edit-name" name="name" class="w-full bg-slate-900 border border-slate-700 p-2 rounded text-sm" required placeholder="Name">
|
|
<input type="text" id="edit-ip" name="ip" class="w-full bg-slate-900 border border-slate-700 p-2 rounded text-sm" required placeholder="IP">
|
|
<input type="text" id="edit-user" name="user" class="w-full bg-slate-900 border border-slate-700 p-2 rounded text-sm" required placeholder="SSH User">
|
|
<div class="flex justify-end gap-2 pt-4">
|
|
<button type="button" onclick="closeEditNode()" class="px-4 py-2 text-sm text-slate-400 hover:text-white">Abbrechen</button>
|
|
<button type="submit" class="bg-emerald-600 hover:bg-emerald-500 px-4 py-2 text-sm rounded font-bold">Speichern</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
let currentSettings = {};
|
|
let termDataDisposable = null;
|
|
let fitAddon = new FitAddon.FitAddon();
|
|
|
|
// Icon-Helper
|
|
function getOsIcon(osName) {
|
|
const os = (osName || "").toLowerCase();
|
|
if (os.includes("mac") || os.includes("darwin")) return "🍏";
|
|
if (os.includes("win")) return "🪟";
|
|
if (os.includes("ubuntu")) return "🟠";
|
|
if (os.includes("raspbian") || os.includes("debian") || os.includes("linux")) return "🐧";
|
|
return "🖥️";
|
|
}
|
|
|
|
// Modal Controls
|
|
window.addNode = () => document.getElementById('add-node-modal').classList.remove('hidden');
|
|
window.closeAddNode = () => document.getElementById('add-node-modal').classList.add('hidden');
|
|
window.closeEditNode = () => document.getElementById('edit-node-modal').classList.add('hidden');
|
|
|
|
window.openEditNode = async function(nodeId) {
|
|
try {
|
|
const res = await fetch(`/api/node/${nodeId}`);
|
|
const data = await res.json();
|
|
document.getElementById('edit-name').value = data.name;
|
|
document.getElementById('edit-ip').value = data.ip;
|
|
document.getElementById('edit-user').value = data.user;
|
|
document.getElementById('edit-node-form').action = `/edit_node/${nodeId}`;
|
|
document.getElementById('edit-node-modal').classList.remove('hidden');
|
|
} catch(e) { console.error("Fehler beim Laden der Node-Daten:", e); }
|
|
};
|
|
|
|
// Status Update
|
|
window.refreshNodeStatus = async function(nodeId, isAuto = false) {
|
|
const badge = document.getElementById(`badge-${nodeId}`);
|
|
const led = document.getElementById(`led-${nodeId}`);
|
|
const card = document.getElementById(`node-card-${nodeId}`);
|
|
if (!isAuto) { 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;
|
|
document.getElementById(`arch-${nodeId}`).textContent = data.arch;
|
|
document.getElementById(`os-icon-${nodeId}`).innerText = getOsIcon(data.os);
|
|
|
|
if (data.status === "Docker Aktiv") led.className = "h-2 w-2 rounded-full bg-blue-500 shadow-[0_0_8px_#3b82f6]";
|
|
else if (data.status.includes("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) { if (!isAuto) badge.textContent = "FEHLER"; }
|
|
finally { card.style.opacity = "1"; }
|
|
};
|
|
|
|
// DOMContentLoaded Init
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
// 1. GridStack (Resize all handles)
|
|
const grid = GridStack.init({
|
|
cellHeight: 80, margin: 10, float: true,
|
|
handle: '.widget-header',
|
|
resizable: { handles: 'all' }
|
|
});
|
|
const savedLayout = localStorage.getItem('pi-orch-layout-v2');
|
|
if (savedLayout) grid.load(JSON.parse(savedLayout));
|
|
grid.on('resizestop dragstop', () => {
|
|
localStorage.setItem('pi-orch-layout-v2', JSON.stringify(grid.save(false)));
|
|
if (window.term) fitAddon.fit();
|
|
grid.on('resizestop', (event, el) => {
|
|
// Wenn das Terminal-Widget vergrößert wurde, pass das Terminal-Layout an
|
|
if (el.getAttribute('gs-id') === 'term-widget') {
|
|
setTimeout(() => fitAddon.fit(), 100);
|
|
}
|
|
});
|
|
|
|
// 2. Terminal
|
|
window.term = new Terminal({ theme: { background: '#000' }, fontSize: 13, convertEol: true });
|
|
window.term.loadAddon(fitAddon);
|
|
window.term.open(document.getElementById('terminal'));
|
|
fitAddon.fit();
|
|
|
|
// 3. Chat logic & Enter Key
|
|
const chatInput = document.getElementById('user-input');
|
|
const chatWs = new WebSocket(`ws://${location.host}/ws/chat`);
|
|
|
|
window.sendMessage = () => {
|
|
if(!chatInput.value.trim()) return;
|
|
chatWs.send(chatInput.value);
|
|
appendChat("Du", chatInput.value, "text-slate-400 font-bold");
|
|
chatInput.value = '';
|
|
};
|
|
|
|
chatInput.addEventListener('keypress', (e) => {
|
|
if (e.key === 'Enter') sendMessage();
|
|
});
|
|
|
|
chatWs.onmessage = (ev) => appendChat("KI", ev.data, "text-blue-400 font-bold");
|
|
|
|
window.appendChat = (user, msg, classes) => {
|
|
const win = document.getElementById('chat-window');
|
|
win.innerHTML += `<div class="mb-4"><span class="${classes} block mb-1 text-[10px] uppercase">${user}</span><div class="markdown-content text-slate-300 text-sm">${marked.parse(msg)}</div></div>`;
|
|
win.scrollTop = win.scrollHeight;
|
|
};
|
|
|
|
// 4. Terminal WS
|
|
window.openTerminal = (ip) => {
|
|
if (window.termWs) window.termWs.close();
|
|
window.term.clear();
|
|
window.termWs = new WebSocket(`ws://${location.host}/ws/terminal/${ip}`);
|
|
window.termWs.onmessage = (ev) => window.term.write(ev.data);
|
|
if (termDataDisposable) termDataDisposable.dispose();
|
|
termDataDisposable = window.term.onData(data => {
|
|
if(window.termWs.readyState === 1) window.termWs.send(data);
|
|
});
|
|
};
|
|
|
|
// 5. Logs WS
|
|
const logWs = new WebSocket(`ws://${location.host}/ws/install_logs`);
|
|
logWs.onmessage = (ev) => {
|
|
const div = document.createElement('div');
|
|
div.textContent = `> ${ev.data}`;
|
|
document.getElementById('install-log').appendChild(div);
|
|
document.getElementById('install-log').scrollTop = document.getElementById('install-log').scrollHeight;
|
|
};
|
|
|
|
// 6. Settings
|
|
async function loadSettings() {
|
|
try {
|
|
const res = await fetch('/api/settings');
|
|
currentSettings = await res.json();
|
|
document.getElementById('ai-provider').value = currentSettings.provider;
|
|
updateModelDropdown(true);
|
|
} catch (e) {}
|
|
}
|
|
loadSettings();
|
|
|
|
// Auto-Refresh Nodes
|
|
setInterval(() => {
|
|
document.querySelectorAll('.node-card-entry').forEach(card => {
|
|
refreshNodeStatus(card.getAttribute('data-node-id'), true);
|
|
});
|
|
}, 60000);
|
|
});
|
|
|
|
// Provider/Model Functions (global)
|
|
async function updateModelDropdown(isInitialLoad = false) {
|
|
const provider = document.getElementById('ai-provider').value;
|
|
const modelSelect = document.getElementById('ai-model');
|
|
try {
|
|
const res = await fetch(`/api/models?provider=${provider}`);
|
|
const data = await res.json();
|
|
modelSelect.innerHTML = '';
|
|
data.models.forEach(m => {
|
|
const opt = document.createElement('option');
|
|
opt.value = opt.textContent = m;
|
|
modelSelect.appendChild(opt);
|
|
});
|
|
if (isInitialLoad && currentSettings[`${provider}_model`]) modelSelect.value = currentSettings[`${provider}_model`];
|
|
} catch (e) {}
|
|
}
|
|
|
|
async function saveSettings() {
|
|
const provider = document.getElementById('ai-provider').value;
|
|
const model = document.getElementById('ai-model').value;
|
|
try {
|
|
await fetch('/api/settings', {
|
|
method: 'POST',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify({ provider, model })
|
|
});
|
|
document.getElementById('settings-status').textContent = "✅ Gespeichert";
|
|
setTimeout(() => document.getElementById('settings-status').textContent = "", 2000);
|
|
} catch (e) {}
|
|
}
|
|
</script>
|
|
</body>
|
|
</html> |