templates/index.html aktualisiert

templates/index.html

@@ -306,8 +306,60 @@
             }
         };
 
-        // --- Settings & Models (unverändert) ---
+        // --- Settings & Models ---
-        // ... (hier kommt dein bestehender Code für loadSettings, updateModelDropdown etc.) ...
+        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(e); }
+        }
+
+        async function updateModelDropdown(isInitialLoad = false) {
+            const provider = document.getElementById('ai-provider').value;
+            const modelSelect = document.getElementById('ai-model');
+            const urlContainer = document.getElementById('ollama-url-container');
+            const ollamaUrl = document.getElementById('ollama-url').value;
+
+            urlContainer.style.display = (provider === "ollama") ? "flex" : "none";
+            modelSelect.innerHTML = '<option>Lade...</option>';
+
+            try {
+                const res = await fetch(`/api/models?provider=${provider}&url=${encodeURIComponent(ollamaUrl)}`);
+                const data = await res.json();
+                modelSelect.innerHTML = '';
+                
+                if (data.models && data.models.length > 0) {
+                    data.models.forEach(m => {
+                        const opt = document.createElement('option');
+                        opt.value = opt.textContent = m;
+                        modelSelect.appendChild(opt);
+                    });
+                    const savedModel = currentSettings[`${provider}_model`];
+                    if (isInitialLoad && savedModel) modelSelect.value = savedModel;
+                }
+            } catch (e) { modelSelect.innerHTML = '<option>Fehler</option>'; }
+        }
+
+        async function saveSettings() {
+            const provider = document.getElementById('ai-provider').value;
+            const model = document.getElementById('ai-model').value;
+            const ollama_base_url = document.getElementById('ollama-url').value;
+            const statusEl = document.getElementById('settings-status');
+
+            try {
+                await fetch('/api/settings', {
+                    method: 'POST',
+                    headers: { 'Content-Type': 'application/json' },
+                    body: JSON.stringify({ provider, model, ollama_base_url })
+                });
+                statusEl.textContent = "✅ Gespeichert";
+                setTimeout(() => statusEl.textContent = "", 2000);
+            } catch (e) { statusEl.textContent = "❌ Fehler"; }
+        }
+
 
         // --- INIT & AUTO-REFRESH ---
         document.addEventListener('DOMContentLoaded', function() {
@@ -326,9 +378,41 @@
             if (savedLayout) { try { grid.load(JSON.parse(savedLayout)); } catch(e){} }
             grid.on('resizestop dragstop', () => localStorage.setItem('pi-orch-layout-v2', JSON.stringify(grid.save(false))));
 
-            // Terminal, Logs, Chat Init (unverändert)
+            const term = new Terminal({ theme: { background: '#000' }, fontSize: 13, convertEol: true });
-            // ... (bestehende WebSocket-Logik hier lassen) ...
+            const fitAddon = new FitAddon.FitAddon();
+            term.loadAddon(fitAddon);
+            term.open(document.getElementById('terminal'));
+            
+            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;
+            };
 
+            const chatWs = new WebSocket(`ws://${location.host}/ws/chat`);
+            chatWs.onmessage = (ev) => appendChat("KI", ev.data, "text-blue-400 font-bold");
+            initChat(chatWs);
+
+            window.appendChat = function(user, msg, classes) {
+                const win = document.getElementById('chat-window');
+                let formattedMsg = (user === "KI") ? marked.parse(msg) : msg;
+                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">${formattedMsg}</div></div>`;
+                win.scrollTop = win.scrollHeight;
+            };
+
+            window.openTerminal = function(ip) {
+                if (window.termWs) window.termWs.close();
+                if (termDataDisposable) termDataDisposable.dispose();
+                term.clear();
+                window.termWs = new WebSocket(`ws://${location.host}/ws/terminal/${ip}`);
+                window.termWs.onmessage = (ev) => term.write(ev.data);
+                termDataDisposable = term.onData(data => {
+                    if (window.termWs?.readyState === WebSocket.OPEN) window.termWs.send(data);
+                });
+            };
+            
             // --- NEU: AUTO REFRESH LOOP (Alle 60 Sek) ---
             setInterval(() => {
                 console.log("Auto-Refresh der Node-Badges...");