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-05 16:41:12 +00:00
parent e50c8622a1
commit 2040c73c9e
1 changed files with 159 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

158
templates/index.html
View File

@@ -54,13 +54,88 @@
user-select: none; 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;
}
.toolbar-controls {
display: flex;
gap: 10px;
align-items: center;
}
.toolbar-controls select, .toolbar-controls button {
padding: 5px 10px;
border-radius: 4px;
border: 1px solid #bdc3c7;
}
.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 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 code { font-family: monospace; color: #4ade80; }
.markdown-content p { margin-bottom: 8px; } .markdown-content p { margin-bottom: 8px; }
</style> </style>
</head> </head>
<body class="bg-slate-950 text-white overflow-hidden"> <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()">
<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>
<button class="save-btn" onclick="saveSettings()">Speichern</button>
<span id="settings-status"></span>
</div>
</div>
<div class="flex h-screen"> <div class="flex h-screen">
<div class="w-64 bg-slate-900 border-r border-slate-700 p-4 flex flex-col"> <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> <h2 class="text-xl font-bold mb-4">📍 Nodes</h2>
@@ -273,6 +348,89 @@
} }
} catch (e) { badge.innerText = "Fehler"; } } 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;
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');
modelSelect.innerHTML = ''; // Leeren
// Modelle des gewählten Providers einfügen
modelOptions[provider].forEach(m => {
const opt = document.createElement('option');
opt.value = m;
opt.textContent = m;
modelSelect.appendChild(opt);
});
if (isInitialLoad) {
// Das aktuell gespeicherte Modell setzen
const savedModel = currentSettings[`${provider}_model`];
// Falls das in der .env gespeicherte Modell nicht in unserer Liste ist, fügen wir es 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 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, model })
});
statusEl.textContent = "✅ Gespeichert!";
statusEl.style.color = "#2ecc71";
// Aktualisiere unsere lokalen Daten
currentSettings.provider = provider;
currentSettings[`${provider}_model`] = model;
} catch (e) {
statusEl.textContent = "❌ Fehler";
statusEl.style.color = "#e74c3c";
}
setTimeout(() => statusEl.textContent = "", 3000);
}
// Einstellungen beim Laden der Seite abrufen
window.addEventListener('DOMContentLoaded', loadSettings);
}); });
</script> </script>
</body> </body>