Add voice settings UI

src/dashboard/templates/voice_button.html

@@ -40,6 +40,29 @@
           <li>"Emergency stop"</li>
         </ul>
       </div>
+    
+      <div class="voice-settings mt-4 pt-4 border-top" style="border-top: 1px solid var(--border-color);">
+        <h3 style="font-size: 1rem; color: var(--text-bright); margin-bottom: 1rem;">// SETTINGS</h3>
+        
+        <div class="mb-3">
+          <label class="form-label d-block mb-1" style="font-size: 0.8rem; color: var(--text-dim);">Voice Selection</label>
+          <select id="voice-select" class="form-select mc-input" style="width: 100%; background: var(--bg-dark); color: var(--text-bright); border: 1px solid var(--border-color); padding: 0.4rem;">
+            <option value="">Default System Voice</option>
+          </select>
+        </div>
+
+        <div class="mb-3">
+          <label class="form-label d-block mb-1" style="font-size: 0.8rem; color: var(--text-dim);">Speaking Rate: <span id="rate-val">175</span></label>
+          <input type="range" id="voice-rate" min="50" max="300" value="175" class="form-range" style="width: 100%;">
+        </div>
+
+        <div class="mb-3">
+          <label class="form-label d-block mb-1" style="font-size: 0.8rem; color: var(--text-dim);">Volume: <span id="volume-val">90</span>%</label>
+          <input type="range" id="voice-volume" min="0" max="100" value="90" class="form-range" style="width: 100%;">
+        </div>
+
+        <button onclick="saveVoiceSettings()" class="btn btn-sm mc-btn-primary w-100">Save Settings</button>
+      </div>
     </div>
   </div>
 </div>
@@ -120,6 +143,71 @@ async function processVoiceCommand(text) {
     }
 
     setTimeout(resetButton, 2000);
+
+async function loadVoiceSettings() {
+    try {
+        const [settingsRes, statusRes] = await Promise.all([
+            fetch('/voice/settings'),
+            fetch('/voice/tts/status')
+        ]);
+        
+        const settings = await settingsRes.json();
+        const status = await statusRes.json();
+        
+        // Populate voices
+        const select = document.getElementById('voice-select');
+        if (status.voices) {
+            status.voices.forEach(v => {
+                const opt = document.createElement('option');
+                opt.value = v.id;
+                opt.textContent = v.name;
+                if (v.id === settings.voice_id) opt.selected = true;
+                select.appendChild(opt);
+            });
+        }
+        
+        // Set sliders
+        document.getElementById('voice-rate').value = settings.rate;
+        document.getElementById('rate-val').textContent = settings.rate;
+        document.getElementById('voice-volume').value = settings.volume * 100;
+        document.getElementById('volume-val').textContent = Math.round(settings.volume * 100);
+    } catch (e) {
+        console.error('Failed to load voice settings:', e);
+    }
+}
+
+async function saveVoiceSettings() {
+    const rate = document.getElementById('voice-rate').value;
+    const volume = document.getElementById('voice-volume').value / 100;
+    const voice_id = document.getElementById('voice-select').value;
+    
+    try {
+        const response = await fetch('/voice/settings', {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
+            body: `rate=${rate}&volume=${volume}&voice_id=${encodeURIComponent(voice_id)}`
+        });
+        
+        if (response.ok) {
+            document.getElementById('voice-status').textContent = 'Settings saved!';
+            setTimeout(resetButton, 2000);
+        }
+    } catch (e) {
+        console.error('Failed to save voice settings:', e);
+    }
+}
+
+// Update display values on slide
+document.getElementById('voice-rate').oninput = function() {
+    document.getElementById('rate-val').textContent = this.value;
+};
+document.getElementById('voice-volume').oninput = function() {
+    document.getElementById('volume-val').textContent = this.value;
+};
+
+// Load on start
+loadVoiceSettings();
+
 }
 </script>
 {% endblock %}