templates/index.html aktualisiert

templates/index.html

@@ -169,7 +169,7 @@
             
             <div id="ollama-url-container">
                 <label for="ollama-url">URL:</label>
-                <input type="text" id="ollama-url" placeholder="http://192.168.x.x:11434/v1">
+                <input type="text" id="ollama-url" onblur="updateModelDropdown(false)" placeholder="http://192.168.x.x:11434/v1">
             </div>
             
             <button class="save-btn" onclick="saveSettings()">Speichern</button>
@@ -262,38 +262,72 @@
             }
         }
 
-        function updateModelDropdown(isInitialLoad = false) {
+        async function updateModelDropdown(isInitialLoad = false) {
             const providerSelect = document.getElementById('ai-provider');
             const modelSelect = document.getElementById('ai-model');
             const urlContainer = document.getElementById('ollama-url-container');
-            
+            const ollamaUrlInput = document.getElementById('ollama-url');
+
             if (!providerSelect || !urlContainer) return;
 
             const provider = providerSelect.value;
-            console.log("Wechsel zu Provider:", provider);
 
             // Sichtbarkeit umschalten
             if (provider === "ollama") {
                 urlContainer.style.display = "flex";
+                
+                // AUTOMATIK: Modelle von Ollama abrufen
+                const baseUrl = ollamaUrlInput.value.replace(/\/v1\/?$/, ''); // Entfernt /v1 für den API-Check
+                if (baseUrl) {
+                    try {
+                        const response = await fetch(`${baseUrl}/api/tags`);
+                        const data = await response.json();
+                        
+                        modelSelect.innerHTML = '';
+                        data.models.forEach(m => {
+                            const opt = document.createElement('option');
+                            opt.value = m.name; // Nimmt den exakten Namen inkl. Tag (z.B. gemma3:4b)
+                            opt.textContent = m.name;
+                            modelSelect.appendChild(opt);
+                        });
+                        console.log("Ollama Modelle geladen:", data.models);
+                    } catch (e) {
+                        console.error("Konnte Ollama Modelle nicht laden:", e);
+                        // Fallback auf die statische Liste, falls der Server offline ist
+                        fillStaticModels(provider, modelSelect);
+                    }
+                }
             } else {
                 urlContainer.style.display = "none";
+                fillStaticModels(provider, modelSelect);
             }
 
-            // Modelle füllen
+            // Gespeicherten Wert setzen (nur beim ersten Laden)
-            modelSelect.innerHTML = '';
+            if (isInitialLoad && currentSettings) {
+                const savedModel = currentSettings[`${provider}_model`];
+                if (savedModel) {
+                    // Falls das Modell noch nicht im Dropdown ist (weil es neu geladen wurde), hinzufügen
+                    if (!Array.from(modelSelect.options).some(opt => opt.value === savedModel)) {
+                        const opt = document.createElement('option');
+                        opt.value = savedModel;
+                        opt.textContent = savedModel;
+                        modelSelect.appendChild(opt);
+                    }
+                    modelSelect.value = savedModel;
+                }
+            }
+        }
+
+        // Hilfsfunktion für die statischen Listen (OpenAI/Google)
+        function fillStaticModels(provider, selectElement) {
+            selectElement.innerHTML = '';
             const options = modelOptions[provider] || [];
             options.forEach(m => {
                 const opt = document.createElement('option');
                 opt.value = m;
                 opt.textContent = m;
-                modelSelect.appendChild(opt);
+                selectElement.appendChild(opt);
             });
-
-            // Gespeicherten Wert setzen
-            if (isInitialLoad && currentSettings) {
-                const savedModel = currentSettings[`${provider}_model`];
-                if (savedModel) modelSelect.value = savedModel;
-            }
         }
 
         async function saveSettings() {