Timmy-time-dashboard/src/dashboard/templates/voice_button.html

{% extends "base.html" %}

{% block title %}{{ page_title }}{% endblock %}

{% block extra_styles %}{% endblock %}

{% block content %}
<div class="voice-page py-3">
  <div class="card mc-panel">
    <div class="card-header mc-panel-header" style="text-align:center;">// VOICE CONTROL</div>
    <div class="card-body">
      <p style="color: var(--text-dim); font-size: 0.85rem; margin-bottom: 0;">Hold the button and speak to Timmy</p>

      <div class="voice-status" id="voice-status">Tap and hold to speak</div>

      <button class="voice-button" id="voice-btn"
              onmousedown="startListening()"
              onmouseup="stopListening()"
              ontouchstart="startListening()"
              ontouchend="stopListening()">
        &#x1F3A4;
      </button>

      <div id="voice-result" class="voice-result" style="display: none;">
        <div class="voice-transcript">
          <strong style="color:var(--text-dim);">You said:</strong> <span id="transcript-text"></span>
        </div>
        <div class="voice-response">
          <strong>Timmy:</strong> <span id="response-text"></span>
        </div>
      </div>

      <div class="voice-tips">
        <h3>Try saying:</h3>
        <ul>
          <li>"What's the status?"</li>
          <li>"Launch a research agent"</li>
          <li>"Create a task to find Bitcoin news"</li>
          <li>"Show me the marketplace"</li>
          <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>

<script>
var recognition = null;
var isListening = false;

if ('webkitSpeechRecognition' in window || 'SpeechRecognition' in window) {
    var SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition;
    recognition = new SpeechRecognition();
    recognition.continuous = false;
    recognition.interimResults = false;
    recognition.lang = 'en-US';

    recognition.onstart = function() {
        isListening = true;
        document.getElementById('voice-status').textContent = 'Listening...';
        document.getElementById('voice-btn').classList.add('listening');
    };

    recognition.onresult = function(event) {
        var transcript = event.results[0][0].transcript;
        processVoiceCommand(transcript);
    };

    recognition.onerror = function(event) {
        console.error('Speech recognition error:', event.error);
        document.getElementById('voice-status').textContent = 'Error: ' + event.error;
        resetButton();
    };

    recognition.onend = function() {
        isListening = false;
        resetButton();
    };
} else {
    document.getElementById('voice-status').textContent = 'Speech recognition not supported in this browser';
    document.getElementById('voice-btn').disabled = true;
}

function startListening() {
    if (recognition && !isListening) { recognition.start(); }
}
function stopListening() {
    if (recognition && isListening) { recognition.stop(); }
}
function resetButton() {
    document.getElementById('voice-status').textContent = 'Tap and hold to speak';
    document.getElementById('voice-btn').classList.remove('listening');
}

async function processVoiceCommand(text) {
    document.getElementById('transcript-text').textContent = text;
    document.getElementById('voice-status').textContent = 'Processing...';

    try {
        var response = await fetch('/voice/command', {
            method: 'POST',
            headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
            body: 'text=' + encodeURIComponent(text)
        });
        var data = await response.json();

        document.getElementById('response-text').textContent = data.command.response;
        document.getElementById('voice-result').style.display = 'block';
        document.getElementById('voice-status').textContent = 'Done!';

        if ('speechSynthesis' in window) {
            var utterance = new SpeechSynthesisUtterance(data.command.response);
            utterance.rate = 1.1;
            window.speechSynthesis.speak(utterance);
        }
    } catch (e) {
        document.getElementById('response-text').textContent = 'Sorry, I had trouble processing that.';
        document.getElementById('voice-result').style.display = 'block';
        document.getElementById('voice-status').textContent = 'Error';
    }

    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 %}