templates/index.html aktualisiert

templates/index.html

@@ -110,7 +110,7 @@
         }
 
         /* Der Container für die URL */
-        #ollama-url-container {
+        .ollama-url-container {
             display: none; /* Standardmäßig versteckt */
             align-items: center;
             gap: 10px;
@@ -160,7 +160,7 @@
             <select id="ai-provider" onchange="updateModelDropdown(false)">
                 <option value="google">Google Gemini</option>
                 <option value="openai">OpenAI</option>
-                <option value="ollama">Ollama (Lokal)</option>
+                <option value="ollama">Ollama</option>
             </select>
             
             <label for="ai-model">Modell:</label>
@@ -236,6 +236,30 @@
 
     <script>
         let termDataDisposable = null;
+
+        // Diese Liste definiert, welche Modelle in der Auswahl erscheinen
+        const modelOptions = {
+            google: [
+                "gemini-2.0-flash", 
+                "gemini-1.5-flash", 
+                "gemini-1.5-pro"
+            ],
+            openai: [
+                "gpt-4o", 
+                "gpt-4o-mini", 
+                "gpt-4-turbo"
+            ],
+            ollama: [
+                "llama3.2", 
+                "llama3.1", 
+                "mistral", 
+                "phi3", 
+                "qwen2.5"
+            ]
+        };
+
+        let currentSettings = {};
+
         document.addEventListener('DOMContentLoaded', function() {
             // 1. GridStack Initialisierung
             var grid = GridStack.init({
@@ -389,8 +413,6 @@
                 } 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"],
@@ -413,47 +435,53 @@
             }
 
             function updateModelDropdown(isInitialLoad = false) {
-                const provider = document.getElementById('ai-provider').value;
+                const providerSelect = document.getElementById('ai-provider');
                 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";
+                if (!providerSelect || !urlContainer) {
+                    console.error("Fehler: HTML Elemente nicht gefunden!");
+                    return;
                 }
 
-                // 2. Dropdown leeren und neu befüllen
-                modelSelect.innerHTML = ''; 
+                const provider = providerSelect.value;
+                console.log("Gewählter Provider:", provider); // Debug-Ausgabe für die Konsole
 
-                // Sicherheitscheck: Gibt es den Provider in unserer Liste?
-                if (modelOptions[provider]) {
-                    modelOptions[provider].forEach(m => {
+                // 1. Sichtbarkeit umschalten mit !important-Logik über JS
+                if (provider === "ollama") {
+                    urlContainer.setAttribute("style", "display: flex !important");
+                } else {
+                    urlContainer.setAttribute("style", "display: none !important");
+                }
+
+                // 2. Dropdown befüllen
+                if (modelSelect) {
+                    modelSelect.innerHTML = ''; 
+                    const options = modelOptions[provider] || [];
+                    
+                    options.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
+                    // 3. Wert beim Laden setzen
                     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)) {
+                        if (savedModel) {
+                            // Falls das Modell nicht in der Liste ist, hinzufügen
+                            if (!options.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;