497 lines
20 KiB
HTML
497 lines
20 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="de">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<title>Pi-Orchestrator AI Dashboard</title>
|
|
<script src="https://cdn.tailwindcss.com"></script>
|
|
|
|
<link href="/static/gridstack.min.css" rel="stylesheet"/>
|
|
<script src="/static/gridstack-all.js"></script>
|
|
|
|
<link rel="stylesheet" href="/static/xterm.css" />
|
|
<script src="/static/xterm.js"></script>
|
|
<script src="/static/xterm-addon-fit.js"></script>
|
|
<script src="/static/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; /* Platz für die Toolbar schaffen */
|
|
}
|
|
|
|
.top-toolbar {
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
background-color: #2c3e50;
|
|
color: white;
|
|
height: 50px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
padding: 0 20px;
|
|
box-sizing: border-box;
|
|
box-shadow: 0 2px 5px rgba(0,0,0,0.2);
|
|
z-index: 1000;
|
|
}
|
|
|
|
.toolbar-title {
|
|
font-weight: bold;
|
|
font-size: 1.2em;
|
|
}
|
|
|
|
/* Nur für Dropdowns und Eingabefelder (NICHT für den Button!) */
|
|
.toolbar-controls select,
|
|
.toolbar-controls input {
|
|
padding: 5px 10px;
|
|
border-radius: 4px;
|
|
border: 1px solid #bdc3c7;
|
|
color: #2c3e50; /* Dunkle Schrift */
|
|
background-color: white; /* Weißer Grund */
|
|
font-size: 14px;
|
|
outline: none;
|
|
}
|
|
|
|
/* Spezifisches Styling für den Speichern-Button */
|
|
.toolbar-controls .save-btn {
|
|
background-color: #27ae60;
|
|
color: white; /* Weiße Schrift */
|
|
border: none;
|
|
cursor: pointer;
|
|
font-weight: bold;
|
|
padding: 6px 15px;
|
|
border-radius: 4px;
|
|
transition: background 0.2s;
|
|
}
|
|
|
|
.toolbar-controls .save-btn:hover {
|
|
background-color: #2ecc71;
|
|
}
|
|
|
|
/* Der Container für die URL */
|
|
#ollama-url-container {
|
|
display: none; /* Standardmäßig versteckt */
|
|
align-items: center;
|
|
gap: 10px;
|
|
margin-left: 10px;
|
|
border-left: 1px solid #7f8c8d;
|
|
padding-left: 10px;
|
|
}
|
|
|
|
/* WICHTIG: Den Speichern-Button überschreiben wir wieder, damit er grün mit weißer Schrift bleibt */
|
|
.save-btn {
|
|
background-color: #27ae60;
|
|
color: white !important;
|
|
border: none;
|
|
cursor: pointer;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.save-btn {
|
|
background-color: #27ae60;
|
|
color: white;
|
|
border: none;
|
|
cursor: pointer;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.save-btn:hover {
|
|
background-color: #2ecc71;
|
|
}
|
|
|
|
#settings-status {
|
|
color: #2ecc71;
|
|
font-size: 0.9em;
|
|
min-width: 100px;
|
|
}
|
|
|
|
.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; }
|
|
</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">
|
|
<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 (Lokal)</option>
|
|
</select>
|
|
|
|
<label for="ai-model">Modell:</label>
|
|
<select id="ai-model"></select>
|
|
|
|
<div id="ollama-url-container">
|
|
<label for="ollama-url">API-URL:</label>
|
|
<input type="text" id="ollama-url" placeholder="http://IP:11434/v1">
|
|
</div>
|
|
|
|
<button class="save-btn" onclick="saveSettings()">Speichern</button>
|
|
<span id="settings-status"></span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="flex h-screen">
|
|
<div class="w-64 bg-slate-900 border-r border-slate-700 p-4 flex flex-col">
|
|
<h2 class="text-xl font-bold mb-4">📍 Nodes</h2>
|
|
<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" id="node-card-{{ node.id }}">
|
|
<div class="flex justify-between items-start">
|
|
<div class="text-sm font-bold">{{ node.name }}</div>
|
|
<form action="/remove_node/{{ node.id }}" method="post">
|
|
<button type="submit" class="text-slate-500 hover:text-red-500 text-xs">✕</button>
|
|
</form>
|
|
</div>
|
|
<div class="text-[10px] text-slate-500 font-mono flex justify-between items-center">
|
|
{{ node.ip }}
|
|
<button onclick="refreshNodeStatus({{ node.id }})" class="hover:text-blue-400">🔄</button>
|
|
</div>
|
|
<div class="mt-1 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] {% 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="openTerminal('{{ node.ip }}')" class="mt-2 w-full text-[10px] bg-slate-700 hover:bg-slate-600 py-1 rounded">Konsole öffnen</button>
|
|
</div>
|
|
{% endfor %}
|
|
</div>
|
|
<button onclick="addNode()" class="mt-4 bg-blue-600 hover:bg-blue-500 p-2 rounded text-sm font-bold">+ Node hinzufügen</button>
|
|
<button onclick="localStorage.removeItem('pi-orch-layout-v2'); location.reload();" class="mt-2 text-[10px] text-slate-500 hover:text-white uppercase">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="KI fragen..." autocomplete="off">
|
|
<button onclick="sendMessage()" class="ml-2 bg-blue-600 hover:bg-blue-500 px-3 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>
|
|
|
|
<script>
|
|
let termDataDisposable = null;
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
// 1. GridStack Initialisierung
|
|
var grid = GridStack.init({
|
|
cellHeight: 80,
|
|
margin: 10,
|
|
float: true,
|
|
handle: '.widget-header',
|
|
|
|
resizable: {
|
|
handles: 'all'
|
|
}
|
|
});
|
|
|
|
// Layout speichern/laden
|
|
function saveLayout() {
|
|
const data = grid.save(false);
|
|
localStorage.setItem('pi-orch-layout-v2', JSON.stringify(data));
|
|
}
|
|
|
|
const savedData = localStorage.getItem('pi-orch-layout-v2');
|
|
if (savedData) {
|
|
try { grid.load(JSON.parse(savedData)); } catch(e) { console.error(e); }
|
|
}
|
|
|
|
grid.on('resizestop dragstop', function() {
|
|
saveLayout();
|
|
if (window.fitAddon) setTimeout(() => window.fitAddon.fit(), 100);
|
|
});
|
|
|
|
// 2. Xterm.js Setup
|
|
const term = new Terminal({ theme: { background: '#000' }, fontSize: 13, cursorBlink: true, convertEol: true });
|
|
window.fitAddon = new FitAddon.FitAddon();
|
|
term.loadAddon(window.fitAddon);
|
|
term.open(document.getElementById('terminal'));
|
|
setTimeout(() => window.fitAddon.fit(), 500);
|
|
|
|
// 3. WebSockets
|
|
const logWs = new WebSocket(`ws://${location.host}/ws/install_logs`);
|
|
const logContainer = document.getElementById('install-log');
|
|
|
|
logWs.onmessage = (ev) => {
|
|
// 1. Neues Element erstellen statt innerHTML +=
|
|
const div = document.createElement('div');
|
|
div.textContent = `> ${ev.data}`;
|
|
logContainer.appendChild(div);
|
|
|
|
// 2. Zeilen begrenzen (z.B. max 500 Zeilen behalten)
|
|
if (logContainer.childNodes.length > 500) {
|
|
logContainer.removeChild(logContainer.firstChild);
|
|
}
|
|
|
|
// 3. Auto-Scroll nur wenn wir am Ende sind (optional, aber CPU-schonend)
|
|
logContainer.scrollTop = logContainer.scrollHeight;
|
|
};
|
|
|
|
const chatWs = new WebSocket(`ws://${location.host}/ws/chat`);
|
|
chatWs.onmessage = (ev) => appendChat("KI", ev.data, "text-blue-400 font-bold");
|
|
|
|
// 4. Chat Funktionen
|
|
const userInput = document.getElementById('user-input');
|
|
userInput.focus();
|
|
userInput.addEventListener('keydown', (e) => {
|
|
if (e.key === 'Enter') { e.preventDefault(); window.sendMessage(); }
|
|
});
|
|
|
|
window.sendMessage = function() {
|
|
const val = userInput.value.trim();
|
|
if(!val) return;
|
|
chatWs.send(val);
|
|
appendChat("Du", val, "text-slate-300 font-bold");
|
|
userInput.value = '';
|
|
userInput.focus();
|
|
};
|
|
|
|
function appendChat(user, msg, classes) {
|
|
const win = document.getElementById('chat-window');
|
|
let formattedMsg = msg;
|
|
if (user === "KI" && typeof marked !== 'undefined') {
|
|
formattedMsg = marked.parse(msg);
|
|
}
|
|
win.innerHTML += `<div class="mb-4"><span class="${classes} block mb-1">${user}:</span><div class="markdown-content text-slate-300 text-sm leading-relaxed">${formattedMsg}</div></div>`;
|
|
win.scrollTop = win.scrollHeight;
|
|
}
|
|
|
|
// 5. Node Funktionen
|
|
window.openTerminal = function(ip) {
|
|
|
|
// alte websocket schließen
|
|
if (window.termWs) {
|
|
window.termWs.close();
|
|
window.termWs = null;
|
|
}
|
|
|
|
// alten onData listener entfernen ✅
|
|
if (termDataDisposable) {
|
|
termDataDisposable.dispose();
|
|
termDataDisposable = null;
|
|
}
|
|
|
|
term.clear();
|
|
term.write(`\r\n\x1b[34m>>> Verbinde mit ${ip}...\x1b[0m\r\n`);
|
|
|
|
window.termWs = new WebSocket(`ws://${location.host}/ws/terminal/${ip}`);
|
|
|
|
window.termWs.onmessage = (ev) => {
|
|
term.write(ev.data);
|
|
};
|
|
|
|
window.termWs.onclose = () => {
|
|
term.write("\r\n\x1b[31m[Session beendet]\x1b[0m\r\n");
|
|
};
|
|
|
|
// NEUEN listener registrieren
|
|
termDataDisposable = term.onData(data => {
|
|
if (window.termWs &&
|
|
window.termWs.readyState === WebSocket.OPEN) {
|
|
window.termWs.send(data);
|
|
}
|
|
});
|
|
|
|
setTimeout(() => window.fitAddon.fit(), 100);
|
|
};
|
|
|
|
window.addNode = async function() {
|
|
const name = prompt("Node Name:");
|
|
const ip = prompt("IP Adresse:");
|
|
const user = prompt("Benutzername:", "pi");
|
|
const pass = prompt("SSH Passwort:");
|
|
if (name && ip && pass) {
|
|
const fd = new FormData();
|
|
fd.append('name', name); fd.append('ip', ip);
|
|
fd.append('user', user); fd.append('password', pass);
|
|
const response = await fetch('/add_node', { method: 'POST', body: fd });
|
|
if (response.ok) location.reload();
|
|
}
|
|
};
|
|
|
|
window.refreshNodeStatus = async function(nodeId) {
|
|
const badge = document.getElementById(`badge-${nodeId}`);
|
|
const led = document.getElementById(`led-${nodeId}`);
|
|
badge.innerText = "Prüfe...";
|
|
try {
|
|
const r = await fetch(`/refresh_status/${nodeId}`);
|
|
const d = await r.json();
|
|
badge.innerText = d.status;
|
|
if (d.status === "Docker Aktiv") {
|
|
led.className = "h-2 w-2 rounded-full bg-blue-500 shadow-[0_0_8px_#3b82f6]";
|
|
} else {
|
|
led.className = "h-2 w-2 rounded-full bg-yellow-500";
|
|
}
|
|
} catch (e) { badge.innerText = "Fehler"; }
|
|
};
|
|
|
|
let currentSettings = {};
|
|
|
|
// Bekannte Standard-Modelle für das Dropdown
|
|
const modelOptions = {
|
|
google: ["gemini-2.5-flash", "gemini-2.5-pro", "gemini-2.0-flash"],
|
|
openai: ["gpt-4o", "gpt-4-turbo", "gpt-3.5-turbo"],
|
|
ollama: ["llama3", "mistral", "qwen"]
|
|
};
|
|
|
|
async function loadSettings() {
|
|
try {
|
|
const res = await fetch('/api/settings');
|
|
currentSettings = await res.json();
|
|
|
|
document.getElementById('ai-provider').value = currentSettings.provider;
|
|
document.getElementById('ollama-url').value = currentSettings.ollama_base_url || "http://127.0.0.1:11434/v1";
|
|
|
|
updateModelDropdown(true);
|
|
} catch (e) {
|
|
console.error("Fehler beim Laden der Einstellungen:", e);
|
|
}
|
|
}
|
|
|
|
function updateModelDropdown(isInitialLoad = false) {
|
|
const provider = document.getElementById('ai-provider').value;
|
|
const modelSelect = document.getElementById('ai-model');
|
|
const urlContainer = document.getElementById('ollama-url-container');
|
|
|
|
// 1. Sichtbarkeit sofort umschalten (bevor etwas anderes schiefgehen kann)
|
|
if (provider === "ollama") {
|
|
urlContainer.style.display = "flex";
|
|
} else {
|
|
urlContainer.style.display = "none";
|
|
}
|
|
|
|
// 2. Dropdown leeren und neu befüllen
|
|
modelSelect.innerHTML = '';
|
|
|
|
// Sicherheitscheck: Gibt es den Provider in unserer Liste?
|
|
if (modelOptions[provider]) {
|
|
modelOptions[provider].forEach(m => {
|
|
const opt = document.createElement('option');
|
|
opt.value = m;
|
|
opt.textContent = m;
|
|
modelSelect.appendChild(opt);
|
|
});
|
|
}
|
|
|
|
// 3. Wenn es der Start der Seite ist, setzen wir den gespeicherten Wert
|
|
if (isInitialLoad && currentSettings) {
|
|
const savedModel = currentSettings[`${provider}_model`];
|
|
|
|
// Falls das Modell in der DB ist, aber nicht im Dropdown, fügen wir es als Option hinzu
|
|
if (savedModel && !modelOptions[provider].includes(savedModel)) {
|
|
const opt = document.createElement('option');
|
|
opt.value = savedModel;
|
|
opt.textContent = savedModel;
|
|
modelSelect.appendChild(opt);
|
|
}
|
|
|
|
if (savedModel) {
|
|
modelSelect.value = savedModel;
|
|
}
|
|
}
|
|
}
|
|
|
|
async function saveSettings() {
|
|
const provider = document.getElementById('ai-provider').value;
|
|
const model = document.getElementById('ai-model').value;
|
|
const ollamaUrl = document.getElementById('ollama-url').value; // NEU
|
|
const statusEl = document.getElementById('settings-status');
|
|
|
|
statusEl.textContent = "Speichere...";
|
|
statusEl.style.color = "#f1c40f";
|
|
|
|
try {
|
|
await fetch('/api/settings', {
|
|
method: 'POST',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify({
|
|
provider: provider,
|
|
model: model,
|
|
ollama_base_url: ollamaUrl // NEU
|
|
})
|
|
});
|
|
|
|
statusEl.textContent = "✅ Gespeichert!";
|
|
statusEl.style.color = "#2ecc71";
|
|
|
|
currentSettings.provider = provider;
|
|
currentSettings[`${provider}_model`] = model;
|
|
currentSettings.ollama_base_url = ollamaUrl;
|
|
|
|
} catch (e) {
|
|
statusEl.textContent = "❌ Fehler";
|
|
statusEl.style.color = "#e74c3c";
|
|
}
|
|
|
|
setTimeout(() => statusEl.textContent = "", 3000);
|
|
}
|
|
// Einstellungen beim Laden der Seite abrufen
|
|
window.addEventListener('DOMContentLoaded', loadSettings);
|
|
});
|
|
</script>
|
|
</body>
|
|
</html> |