anotation system operational

ANNOTATE/web/templates/components/training_panel.html

@@ -10,9 +10,7 @@
         <div class="mb-3">
             <label for="model-select" class="form-label small">Model</label>
             <select class="form-select form-select-sm" id="model-select">
-                <option value="StandardizedCNN">CNN Model</option>
-                <option value="DQN">DQN Agent</option>
-                <option value="Transformer">Transformer</option>
+                <option value="">Loading models...</option>
             </select>
         </div>
         
@@ -84,6 +82,42 @@
 </div>
 
 <script>
+    // Load available models on page load
+    function loadAvailableModels() {
+        fetch('/api/available-models')
+            .then(response => response.json())
+            .then(data => {
+                const modelSelect = document.getElementById('model-select');
+                modelSelect.innerHTML = '';
+                
+                if (data.success && data.models.length > 0) {
+                    data.models.forEach(model => {
+                        const option = document.createElement('option');
+                        option.value = model;
+                        option.textContent = model;
+                        modelSelect.appendChild(option);
+                    });
+                } else {
+                    const option = document.createElement('option');
+                    option.value = '';
+                    option.textContent = 'No models available';
+                    modelSelect.appendChild(option);
+                }
+            })
+            .catch(error => {
+                console.error('Error loading models:', error);
+                const modelSelect = document.getElementById('model-select');
+                modelSelect.innerHTML = '<option value="">Error loading models</option>';
+            });
+    }
+    
+    // Load models when page loads
+    if (document.readyState === 'loading') {
+        document.addEventListener('DOMContentLoaded', loadAvailableModels);
+    } else {
+        loadAvailableModels();
+    }
+    
     // Train model button
     document.getElementById('train-model-btn').addEventListener('click', function() {
         const modelName = document.getElementById('model-select').value;