templates/index.html aktualisiert
This commit is contained in:
@@ -54,13 +54,88 @@
|
||||
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 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()">
|
||||
<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="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>
|
||||
@@ -273,6 +348,89 @@
|
||||
}
|
||||
} 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>
|
||||
</body>
|
||||
|
||||
Reference in New Issue
Block a user