Fix web interface model select to filter by mode

- In T2I mode, only show image models in the main model select
- In other modes (T2V, I2V, etc.), show video models
- Repopulate model select when switching modes
- Image model select for I2V mode always shows image models

static/js/app.js

@@ -53,31 +53,52 @@ async function loadModels() {
         const response = await fetch('/api/models');
         models = await response.json();
         
-        const modelSelect = document.getElementById('model');
-        const imageModelSelect = document.getElementById('image_model');
-        
-        modelSelect.innerHTML = '<option value="">Select a model...</option>';
-        imageModelSelect.innerHTML = '<option value="">Select a model...</option>';
-        
-        models.forEach(model => {
-            const option = document.createElement('option');
-            option.value = model.name;
-            option.textContent = `${model.name} (${model.type || 'video'})`;
-            option.dataset.type = model.type;
-            modelSelect.appendChild(option);
-            
-            // Add image models to image model select
-            if (model.type === 'image' || model.type === 't2i') {
-                const imgOption = option.cloneNode(true);
-                imageModelSelect.appendChild(imgOption);
-            }
-        });
+        // Populate model selects based on current mode
+        populateModelSelects();
     } catch (error) {
         console.error('Error loading models:', error);
         showToast('Failed to load models', 'error');
     }
 }
 
+// Populate model selects based on current mode
+function populateModelSelects() {
+    const modelSelect = document.getElementById('model');
+    const imageModelSelect = document.getElementById('image_model');
+    
+    modelSelect.innerHTML = '<option value="">Select a model...</option>';
+    imageModelSelect.innerHTML = '<option value="">Select a model...</option>';
+    
+    models.forEach(model => {
+        const option = document.createElement('option');
+        option.value = model.name;
+        option.textContent = `${model.name} (${model.type || 'video'})`;
+        option.dataset.type = model.type;
+        
+        // Determine if this model should be shown in main select based on mode
+        const isImageModel = model.type === 'image' || model.type === 't2i' || model.type === 'i2i';
+        const isVideoModel = model.type === 'video' || model.type === 't2v' || model.type === 'i2v' ||
+                            model.type === 'v2v' || !model.type; // Default to video if no type
+        
+        // For T2I mode, only show image models in main select
+        if (currentMode === 't2i') {
+            if (isImageModel) {
+                modelSelect.appendChild(option.cloneNode(true));
+            }
+        } else {
+            // For other modes, show video models in main select
+            if (isVideoModel) {
+                modelSelect.appendChild(option.cloneNode(true));
+            }
+        }
+        
+        // Add image models to image model select (for I2V mode)
+        if (isImageModel) {
+            imageModelSelect.appendChild(option.cloneNode(true));
+        }
+    });
+}
+
 // Load TTS voices
 async function loadTTSVoices() {
     try {
@@ -238,6 +259,9 @@ function switchMode(mode) {
             audioSection.classList.add('hidden');
             break;
     }
+    
+    // Update model select based on mode
+    populateModelSelects();
 }
 
 // Handle file upload