templates/index.html aktualisiert

This commit is contained in:
2026-03-05 17:05:09 +00:00
parent b325dfa516
commit d837909136

View File

@@ -81,14 +81,26 @@
font-size: 1.2em; font-size: 1.2em;
} }
/* Schriftfarbe und Hintergrund für Dropdowns und Eingabefelder korrigieren */
.toolbar-controls select, .toolbar-controls select,
.toolbar-controls input, .toolbar-controls input,
.toolbar-controls button { .toolbar-controls button {
padding: 5px 10px; padding: 5px 10px;
border-radius: 4px; border-radius: 4px;
border: 1px solid #bdc3c7; border: 1px solid #bdc3c7;
color: #333; /* Dunkle Schrift erzwingen */ color: #2c3e50; /* Dunkle Schriftfarbe! */
background-color: #fff; /* Weißen Hintergrund erzwingen */ background-color: white; /* Weißer Grund! */
font-size: 14px;
}
/* Der Container für die URL (standardmäßig versteckt) */
#ollama-url-container {
display: none;
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 */ /* WICHTIG: Den Speichern-Button überschreiben wir wieder, damit er grün mit weißer Schrift bleibt */
@@ -129,24 +141,24 @@
<div class="toolbar-controls"> <div class="toolbar-controls">
<label for="ai-provider">Provider:</label> <label for="ai-provider">Provider:</label>
<select id="ai-provider" onchange="updateModelDropdown()"> <select id="ai-provider" onchange="updateModelDropdown(false)">
<option value="google">Google Gemini</option> <option value="google">Google Gemini</option>
<option value="openai">OpenAI</option> <option value="openai">OpenAI</option>
<option value="ollama">Ollama (Lokal)</option> <option value="ollama">Ollama (Lokal)</option>
</select> </select>
<label for="ai-model">Modell:</label> <label for="ai-model">Modell:</label>
<select id="ai-model"> <select id="ai-model"></select>
</select>
<span id="ollama-url-container" style="display: none; align-items: center; gap: 5px; margin-left: 10px;"> <div id="ollama-url-container">
<label for="ollama-url">URL:</label> <label for="ollama-url">API-URL:</label>
<input type="text" id="ollama-url" placeholder="http://127.0.0.1:11434/v1" style="width: 200px;"> <input type="text" id="ollama-url" placeholder="http://IP:11434/v1">
</span> </div>
<button class="save-btn" onclick="saveSettings()">Speichern</button> <button class="save-btn" onclick="saveSettings()">Speichern</button>
<span id="settings-status"></span> <span id="settings-status"></span>
</div> </div>
</div>
</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">
@@ -376,8 +388,7 @@
currentSettings = await res.json(); currentSettings = await res.json();
document.getElementById('ai-provider').value = currentSettings.provider; document.getElementById('ai-provider').value = currentSettings.provider;
// NEU: Ollama URL laden document.getElementById('ollama-url').value = currentSettings.ollama_base_url || "http://127.0.0.1:11434/v1";
document.getElementById('ollama-url').value = currentSettings.ollama_url || "http://127.0.0.1:11434/v1";
updateModelDropdown(true); updateModelDropdown(true);
} catch (e) { } catch (e) {
@@ -388,37 +399,32 @@
function updateModelDropdown(isInitialLoad = false) { function updateModelDropdown(isInitialLoad = false) {
const provider = document.getElementById('ai-provider').value; const provider = document.getElementById('ai-provider').value;
const modelSelect = document.getElementById('ai-model'); const modelSelect = document.getElementById('ai-model');
const ollamaContainer = document.getElementById('ollama-url-container'); // NEU const urlContainer = document.getElementById('ollama-url-container');
// NEU: URL-Feld nur anzeigen, wenn Ollama gewählt ist
if (provider === 'ollama') {
ollamaContainer.style.display = 'flex';
} else {
ollamaContainer.style.display = 'none';
}
// Dropdown leeren und neu befüllen
modelSelect.innerHTML = ''; modelSelect.innerHTML = '';
// Modelle des gewählten Providers einfügen
if(modelOptions[provider]) {
modelOptions[provider].forEach(m => { modelOptions[provider].forEach(m => {
const opt = document.createElement('option'); const opt = document.createElement('option');
opt.value = m; opt.value = m;
opt.textContent = m; opt.textContent = m;
modelSelect.appendChild(opt); modelSelect.appendChild(opt);
}); });
// Zeige das URL-Feld NUR bei Ollama an
if (provider === "ollama") {
urlContainer.style.display = "flex";
} else {
urlContainer.style.display = "none";
} }
if (isInitialLoad) { if (isInitialLoad) {
const savedModel = currentSettings[`${provider}_model`]; const savedModel = currentSettings[`${provider}_model`];
if (savedModel && !modelOptions[provider].includes(savedModel)) { if (savedModel && !modelOptions[provider].includes(savedModel)) {
const opt = document.createElement('option'); const opt = document.createElement('option');
opt.value = savedModel; opt.value = savedModel;
opt.textContent = savedModel; opt.textContent = savedModel;
modelSelect.appendChild(opt); modelSelect.appendChild(opt);
} }
if (savedModel) modelSelect.value = savedModel; if (savedModel) modelSelect.value = savedModel;
} }
} }
@@ -457,7 +463,6 @@
setTimeout(() => statusEl.textContent = "", 3000); setTimeout(() => statusEl.textContent = "", 3000);
} }
// Einstellungen beim Laden der Seite abrufen // Einstellungen beim Laden der Seite abrufen
window.addEventListener('DOMContentLoaded', loadSettings); window.addEventListener('DOMContentLoaded', loadSettings);
}); });