feat(webui): preselect the accelerator the machine actually has

webui/app.py

@@ -662,12 +662,33 @@ def load_model():
     except Exception as e:
         return jsonify({'error': f'Model loading failed: {str(e)}'}), 500
 
+def recommended_device():
+    """Best device actually present on this machine.
+
+    The UI's <select> is authored with CPU first, so on an Apple Silicon Mac
+    the default was to ignore the GPU entirely. Detect here rather than in the
+    browser: the browser cannot see what torch was built against.
+    """
+    if not MODEL_AVAILABLE:
+        return 'cpu'
+    try:
+        import torch
+    except ImportError:
+        return 'cpu'
+    if torch.cuda.is_available():
+        return 'cuda'
+    if getattr(torch.backends, 'mps', None) is not None and torch.backends.mps.is_available():
+        return 'mps'
+    return 'cpu'
+
+
 @app.route('/api/available-models')
 def get_available_models():
     """Get available model list"""
     return jsonify({
         'models': AVAILABLE_MODELS,
-        'model_available': MODEL_AVAILABLE
+        'model_available': MODEL_AVAILABLE,
+        'recommended_device': recommended_device()
     })
 
 @app.route('/api/model-status')

webui/templates/index.html

@@ -671,6 +671,7 @@ <h4>Detailed Comparison Data:</h4>
                 if (response.data.model_available) {
                     availableModels = response.data.models;
                     populateModelSelect();
+                    applyRecommendedDevice(response.data.recommended_device);
                     console.log('✅ Available models loaded successfully:', availableModels);
                 } else {
                     console.warn('⚠️ Kronos model library not available');
@@ -682,6 +683,22 @@ <h4>Detailed Comparison Data:</h4>
             }
         }
 
+        // Preselect whatever accelerator this machine actually has.
+        // The <select> is authored CPU-first, so on an Apple Silicon Mac the
+        // default silently ignored the GPU; the server detects the device
+        // because only it can see what torch was built against.
+        function applyRecommendedDevice(device) {
+            if (!device) return;
+            const select = document.getElementById('device-select');
+            const match = Array.from(select.options).find(o => o.value === device);
+            if (!match) return;
+            select.value = device;
+            const hint = select.parentElement.querySelector('.form-text');
+            if (hint) {
+                hint.textContent = `Select the device to run the model on (detected: ${match.textContent})`;
+            }
+        }
+
         // Populate model selection dropdown
         function populateModelSelect() {
             const modelSelect = document.getElementById('model-select');