@openpalm/channel-voice 0.9.0

package/web/app.js

@@ -0,0 +1,520 @@
+/* ================================================================
+   OpenPalm Voice — App
+   State machine: idle → recording → processing → idle
+   Falls back to browser Speech APIs when server STT/TTS unavailable.
+   ================================================================ */
+
+;(function () {
+  'use strict'
+
+  // --- DOM refs ---
+  var recordBtn = document.getElementById('record-btn')
+  var log = document.getElementById('log')
+  var statusEl = document.getElementById('status')
+  var settingsBtn = document.getElementById('settings-btn')
+  var settingsDialog = document.getElementById('settings-dialog')
+  var settingsForm = document.getElementById('settings-form')
+  var announcer = document.getElementById('announcer')
+  var inputVoice = document.getElementById('setting-voice')
+  var inputHaptic = document.getElementById('setting-haptic')
+  var inputWakelock = document.getElementById('setting-wakelock')
+  var inputContinuous = document.getElementById('setting-continuous')
+  var continuousBtn = document.getElementById('continuous-btn')
+
+  // --- State ---
+  var state = 'idle'
+  var continuous = false
+  var recorder = null
+  var chunks = []
+  var wakeLock = null
+  var audioCtx = null
+
+  // --- Capabilities (populated on init from /api/health) ---
+  var caps = {
+    serverStt: false,
+    serverTts: false,
+    browserStt: !!(window.SpeechRecognition || window.webkitSpeechRecognition),
+    browserTts: 'speechSynthesis' in window
+  }
+
+  // --- Settings ---
+  function loadSettings() {
+    try {
+      var s = JSON.parse(localStorage.getItem('voice-settings') || '{}')
+      inputVoice.value = s.voice || ''
+      inputHaptic.checked = s.haptic !== false
+      inputWakelock.checked = s.wakelock !== false
+      inputContinuous.checked = !!s.continuous
+    } catch (_) {
+      inputHaptic.checked = true
+      inputWakelock.checked = true
+      inputContinuous.checked = false
+    }
+  }
+
+  function saveSettings() {
+    localStorage.setItem('voice-settings', JSON.stringify({
+      voice: inputVoice.value,
+      haptic: inputHaptic.checked,
+      wakelock: inputWakelock.checked,
+      continuous: inputContinuous.checked
+    }))
+    setContinuous(inputContinuous.checked)
+  }
+
+  function getSetting(key) {
+    try {
+      var s = JSON.parse(localStorage.getItem('voice-settings') || '{}')
+      if (key === 'haptic') return s.haptic !== false
+      if (key === 'wakelock') return s.wakelock !== false
+      if (key === 'continuous') return !!s.continuous
+      return s[key] || ''
+    } catch (_) {
+      return key === 'voice' ? '' : (key === 'continuous' ? false : true)
+    }
+  }
+
+  function setContinuous(enabled) {
+    continuous = enabled
+    continuousBtn.setAttribute('aria-pressed', String(enabled))
+    if (enabled && state === 'idle') {
+      startRecording()
+    }
+  }
+
+  // --- Utilities ---
+  function escapeHtml(text) {
+    var el = document.createElement('span')
+    el.textContent = text
+    return el.innerHTML
+  }
+
+  function announce(msg) {
+    announcer.textContent = msg
+  }
+
+  function pickMimeType() {
+    var types = ['audio/mp4', 'audio/webm;codecs=opus', 'audio/webm']
+    for (var i = 0; i < types.length; i++) {
+      if (typeof MediaRecorder.isTypeSupported === 'function' && MediaRecorder.isTypeSupported(types[i])) {
+        return types[i]
+      }
+    }
+    return ''
+  }
+
+  function haptic(pattern) {
+    if (getSetting('haptic') && navigator.vibrate) {
+      navigator.vibrate(pattern)
+    }
+  }
+
+  // --- UI Updates ---
+  function setState(newState, statusMsg) {
+    state = newState
+    recordBtn.setAttribute('data-state', newState)
+    statusEl.textContent = statusMsg || newState
+    statusEl.setAttribute('aria-label', 'Status: ' + (statusMsg || newState))
+    announce(statusMsg || newState)
+
+    if (newState === 'idle') {
+      recordBtn.setAttribute('aria-label', 'Start recording')
+    } else if (newState === 'recording') {
+      recordBtn.setAttribute('aria-label', 'Stop recording')
+    } else if (newState === 'processing') {
+      recordBtn.setAttribute('aria-label', 'Processing, please wait')
+    }
+  }
+
+  // --- Simple markdown rendering (bold, italic, code, code blocks, lists) ---
+  function renderMarkdown(text) {
+    var escaped = escapeHtml(text)
+    // Code blocks: ```...```
+    escaped = escaped.replace(/```(\w*)\n?([\s\S]*?)```/g, '<pre><code>$2</code></pre>')
+    // Inline code: `...`
+    escaped = escaped.replace(/`([^`]+)`/g, '<code>$1</code>')
+    // Bold: **...**
+    escaped = escaped.replace(/\*\*([^*]+)\*\*/g, '<strong>$1</strong>')
+    // Italic: *...*
+    escaped = escaped.replace(/(?<!\*)\*([^*]+)\*(?!\*)/g, '<em>$1</em>')
+    // Line breaks
+    escaped = escaped.replace(/\n/g, '<br>')
+    return escaped
+  }
+
+  function addLog(level, message) {
+    var entry = document.createElement('div')
+    entry.className = 'log-entry'
+    entry.setAttribute('data-level', level)
+    var rendered = (level === 'AI') ? renderMarkdown(message) : escapeHtml(message)
+    entry.innerHTML = '<span class="log-label">' + escapeHtml(level) + '</span>' + rendered
+    log.appendChild(entry)
+    log.scrollTop = log.scrollHeight
+  }
+
+  // --- Wake Lock ---
+  async function acquireWakeLock() {
+    if (!getSetting('wakelock') || !('wakeLock' in navigator)) return
+    try {
+      wakeLock = await navigator.wakeLock.request('screen')
+    } catch (_) {
+      // Wake lock not available
+    }
+  }
+
+  function releaseWakeLock() {
+    if (wakeLock) {
+      wakeLock.release().catch(function () {})
+      wakeLock = null
+    }
+  }
+
+  // --- Audio Playback ---
+  function playBase64Audio(base64) {
+    return new Promise(function (resolve, reject) {
+      try {
+        var binary = atob(base64)
+        var bytes = new Uint8Array(binary.length)
+        for (var i = 0; i < binary.length; i++) {
+          bytes[i] = binary.charCodeAt(i)
+        }
+        if (!audioCtx) {
+          audioCtx = new (window.AudioContext || window.webkitAudioContext)()
+        }
+        audioCtx.decodeAudioData(bytes.buffer, function (buffer) {
+          var source = audioCtx.createBufferSource()
+          source.buffer = buffer
+          source.connect(audioCtx.destination)
+          source.onended = resolve
+          source.start(0)
+        }, function (err) {
+          reject(err)
+        })
+      } catch (err) {
+        reject(err)
+      }
+    })
+  }
+
+  // --- Strip markdown for TTS ---
+  function stripMarkdownForSpeech(text) {
+    return text
+      .replace(/```[\s\S]*?```/g, '')
+      .replace(/`([^`]+)`/g, '$1')
+      .replace(/\*\*([^*]+)\*\*/g, '$1')
+      .replace(/\*([^*]+)\*/g, '$1')
+      .replace(/^#{1,6}\s+/gm, '')
+      .replace(/^\s*[-*+]\s+/gm, '')
+      .replace(/^\s*\d+\.\s+/gm, '')
+      .replace(/\[([^\]]+)\]\([^)]+\)/g, '$1')
+      .replace(/\n{3,}/g, '\n\n')
+      .trim()
+  }
+
+  // --- Browser TTS fallback ---
+  function speakWithBrowser(text) {
+    return new Promise(function (resolve) {
+      if (!caps.browserTts) { resolve(); return }
+      var utterance = new SpeechSynthesisUtterance(stripMarkdownForSpeech(text))
+      var voice = getSetting('voice')
+      if (voice) {
+        var voices = speechSynthesis.getVoices()
+        var match = voices.find(function (v) {
+          return v.name.toLowerCase().indexOf(voice.toLowerCase()) !== -1
+        })
+        if (match) utterance.voice = match
+      }
+      utterance.onend = resolve
+      utterance.onerror = resolve
+      speechSynthesis.speak(utterance)
+    })
+  }
+
+  // --- Browser STT ---
+  function transcribeWithBrowser() {
+    return new Promise(function (resolve, reject) {
+      var SR = window.SpeechRecognition || window.webkitSpeechRecognition
+      if (!SR) { reject(new Error('Browser speech recognition not supported')); return }
+      var recognition = new SR()
+      recognition.lang = navigator.language || 'en-US'
+      recognition.interimResults = false
+      recognition.maxAlternatives = 1
+      var gotResult = false
+      recognition.onresult = function (event) {
+        gotResult = true
+        var text = event.results[0][0].transcript
+        resolve(text)
+      }
+      recognition.onerror = function (event) {
+        // no-speech and aborted are normal in continuous mode — treat as empty
+        if (event.error === 'no-speech' || event.error === 'aborted') {
+          resolve('')
+        } else {
+          reject(new Error('Speech recognition error: ' + event.error))
+        }
+      }
+      recognition.onend = function () {
+        if (!gotResult) resolve('')
+      }
+      recognition.start()
+    })
+  }
+
+  // --- Recording (server STT path) ---
+  async function startRecordingAudio() {
+    try {
+      var stream = await navigator.mediaDevices.getUserMedia({ audio: true })
+      chunks = []
+      var mimeType = pickMimeType()
+      recorder = new MediaRecorder(stream, mimeType ? { mimeType: mimeType } : undefined)
+
+      recorder.ondataavailable = function (e) {
+        if (e.data.size > 0) chunks.push(e.data)
+      }
+
+      recorder.start()
+      setState('recording', 'recording')
+      haptic(50)
+      await acquireWakeLock()
+    } catch (err) {
+      addLog('ERR', 'Microphone access denied: ' + err.message)
+      setState('idle', 'ready')
+    }
+  }
+
+  async function stopRecordingAndSendAudio() {
+    setState('processing', 'transcribing')
+    haptic([30, 50, 30])
+    releaseWakeLock()
+
+    await new Promise(function (resolve) {
+      recorder.onstop = function () {
+        recorder.stream.getTracks().forEach(function (t) { t.stop() })
+        resolve()
+      }
+      recorder.stop()
+    })
+
+    if (chunks.length === 0) {
+      addLog('ERR', 'No audio recorded')
+      setState('idle', 'ready')
+      return
+    }
+
+    var detectedMime = pickMimeType()
+    var blob = new Blob(chunks, { type: detectedMime || 'audio/webm' })
+    chunks = []
+    recorder = null
+
+    var ext = detectedMime.indexOf('mp4') !== -1 ? 'm4a' : 'webm'
+    var form = new FormData()
+    form.append('audio', blob, 'recording.' + ext)
+    await sendToServer(form)
+  }
+
+  // --- Recording (browser STT path) ---
+  async function startBrowserSTT() {
+    setState('recording', 'listening')
+    haptic(50)
+    await acquireWakeLock()
+
+    try {
+      var text = await transcribeWithBrowser()
+      releaseWakeLock()
+
+      if (!text || !text.trim()) {
+        if (continuous) {
+          setState('idle', 'listening...')
+          setTimeout(function () { startRecording() }, 300)
+        } else {
+          addLog('SYS', 'No speech detected')
+          setState('idle', 'ready')
+        }
+        return
+      }
+
+      setState('processing', 'processing')
+      haptic([30, 50, 30])
+
+      var form = new FormData()
+      form.append('text', text.trim())
+      await sendToServer(form)
+    } catch (err) {
+      releaseWakeLock()
+      addLog('ERR', err.message)
+      setState('idle', 'ready')
+    }
+  }
+
+  // --- Send to server and handle response ---
+  async function sendToServer(form) {
+    try {
+      addLog('TX', 'sending...')
+      var response = await fetch('/api/pipeline', {
+        method: 'POST',
+        body: form
+      })
+
+      if (!response.ok) {
+        var errBody = null
+        try { errBody = await response.json() } catch (_) {}
+        var errMsg = (errBody && errBody.error) || ('Server error ' + response.status)
+
+        // If server STT failed for any reason, switch to browser STT for future recordings
+        if (errBody && (errBody.code === 'stt_not_configured' || errBody.code === 'stt_error')) {
+          caps.serverStt = false
+          if (caps.browserStt) {
+            addLog('SYS', 'Server STT unavailable, switching to browser speech recognition')
+            addLog('SYS', 'Tap the microphone again to retry')
+          } else {
+            addLog('ERR', 'Server STT failed and browser speech recognition not available')
+          }
+          setState('idle', 'ready')
+          return
+        }
+
+        addLog('ERR', errMsg)
+        setState('idle', 'error')
+        return
+      }
+
+      var data = await response.json()
+
+      if (data.transcript) {
+        addLog('YOU', data.transcript)
+      }
+      if (data.response) {
+        addLog('AI', data.response)
+      }
+
+      // Play audio: server TTS if available, otherwise browser TTS
+      if (data.audio) {
+        try {
+          await playBase64Audio(data.audio)
+        } catch (err) {
+          addLog('SYS', 'Audio decode failed, using browser voice')
+          if (data.response) await speakWithBrowser(data.response)
+        }
+      } else if (data.response && caps.browserTts) {
+        await speakWithBrowser(data.response)
+      }
+
+      setState('idle', 'ready')
+      haptic(30)
+
+      // Auto-restart if continuous listening is on
+      if (continuous) {
+        setTimeout(function () { startRecording() }, 300)
+      }
+    } catch (err) {
+      addLog('ERR', 'Request failed: ' + err.message)
+      setState('idle', 'offline')
+    }
+  }
+
+  // --- Toggle recording ---
+  function startRecording() {
+    if (state !== 'idle') return
+    if (caps.serverStt) {
+      startRecordingAudio()
+    } else if (caps.browserStt) {
+      startBrowserSTT()
+    } else {
+      addLog('ERR', 'No speech recognition available (server STT not configured, browser API not supported)')
+    }
+  }
+
+  function stopRecording() {
+    if (state !== 'recording') return
+    // If user manually stops, also turn off continuous
+    if (continuous) setContinuous(false)
+    if (recorder) {
+      stopRecordingAndSendAudio()
+    }
+    // Browser STT stops on its own (no manual stop needed)
+  }
+
+  function toggleRecording() {
+    if (state === 'idle') {
+      startRecording()
+    } else if (state === 'recording') {
+      stopRecording()
+    }
+  }
+
+  // --- Event Handlers ---
+  recordBtn.addEventListener('click', toggleRecording)
+
+  document.addEventListener('keydown', function (e) {
+    if (e.code === 'Space' && e.target === document.body) {
+      e.preventDefault()
+      toggleRecording()
+    }
+  })
+
+  continuousBtn.addEventListener('click', function () {
+    setContinuous(!continuous)
+    // Persist to settings
+    try {
+      var s = JSON.parse(localStorage.getItem('voice-settings') || '{}')
+      s.continuous = continuous
+      localStorage.setItem('voice-settings', JSON.stringify(s))
+    } catch (_) {}
+  })
+
+  settingsBtn.addEventListener('click', function () {
+    loadSettings()
+    settingsDialog.showModal()
+  })
+
+  settingsForm.addEventListener('submit', function () {
+    saveSettings()
+  })
+
+  // --- Online / Offline ---
+  window.addEventListener('online', function () {
+    if (state === 'idle') setState('idle', 'ready')
+    addLog('SYS', 'Connection restored')
+    checkCapabilities()
+  })
+
+  window.addEventListener('offline', function () {
+    setState('idle', 'offline')
+    addLog('SYS', 'Connection lost')
+  })
+
+  // --- Check server capabilities ---
+  function checkCapabilities() {
+    fetch('/api/health').then(function (res) {
+      return res.json()
+    }).then(function (data) {
+      caps.serverStt = !!(data.stt && data.stt.configured)
+      caps.serverTts = !!(data.tts && data.tts.configured)
+
+      var sttSource = caps.serverStt ? 'server (' + data.stt.model + ')' : (caps.browserStt ? 'browser' : 'none')
+      var ttsSource = caps.serverTts ? 'server (' + data.tts.model + ')' : (caps.browserTts ? 'browser' : 'none')
+      addLog('SYS', 'STT: ' + sttSource + ' | TTS: ' + ttsSource)
+
+      if (!caps.serverStt && !caps.browserStt) {
+        addLog('ERR', 'No speech recognition available')
+      }
+    }).catch(function () {
+      addLog('SYS', 'Server unreachable, using browser APIs')
+      caps.serverStt = false
+      caps.serverTts = false
+    })
+  }
+
+  // --- Service Worker ---
+  if ('serviceWorker' in navigator) {
+    navigator.serviceWorker.register('/sw.js').catch(function () {})
+  }
+
+  // --- Init ---
+  loadSettings()
+  continuous = getSetting('continuous')
+  continuousBtn.setAttribute('aria-pressed', String(continuous))
+  setState('idle', navigator.onLine ? 'ready' : 'offline')
+  addLog('SYS', 'Voice channel ready. Tap the microphone or press Space to begin.')
+  checkCapabilities()
+})()

package/web/index.html

@@ -0,0 +1,85 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
+  <meta name="theme-color" content="#ff9d00">
+  <meta name="apple-mobile-web-app-capable" content="yes">
+  <meta name="apple-mobile-web-app-status-bar-style" content="default">
+  <meta name="description" content="Voice-driven AI assistant">
+  <title>OpenPalm Voice</title>
+  <link rel="stylesheet" href="/styles.css">
+  <link rel="manifest" href="/manifest.webmanifest">
+</head>
+<body>
+  <div class="app">
+    <header class="header">
+      <div class="header-brand">
+        <span class="brand-slash">/</span><span class="brand-name">voice</span>
+      </div>
+      <div class="header-right">
+        <span id="status" class="status-indicator" aria-label="Status: ready">ready</span>
+        <button id="settings-btn" class="icon-btn" aria-label="Open settings">
+          <svg width="20" height="20" viewBox="0 0 20 20" fill="none" aria-hidden="true">
+            <path d="M10 12.5a2.5 2.5 0 100-5 2.5 2.5 0 000 5z" stroke="currentColor" stroke-width="1.5"/>
+            <path d="M16.2 12.2a1.4 1.4 0 00.28 1.54l.05.05a1.7 1.7 0 11-2.4 2.4l-.05-.05a1.4 1.4 0 00-1.54-.28 1.4 1.4 0 00-.85 1.28v.15a1.7 1.7 0 11-3.4 0v-.08a1.4 1.4 0 00-.91-1.28 1.4 1.4 0 00-1.54.28l-.05.05a1.7 1.7 0 11-2.4-2.4l.05-.05a1.4 1.4 0 00.28-1.54 1.4 1.4 0 00-1.28-.85H2.3a1.7 1.7 0 110-3.4h.08a1.4 1.4 0 001.28-.91 1.4 1.4 0 00-.28-1.54l-.05-.05a1.7 1.7 0 112.4-2.4l.05.05a1.4 1.4 0 001.54.28h.07a1.4 1.4 0 00.85-1.28V2.3a1.7 1.7 0 113.4 0v.08a1.4 1.4 0 00.85 1.28 1.4 1.4 0 001.54-.28l.05-.05a1.7 1.7 0 112.4 2.4l-.05.05a1.4 1.4 0 00-.28 1.54v.07a1.4 1.4 0 001.28.85h.15a1.7 1.7 0 110 3.4h-.08a1.4 1.4 0 00-1.28.85z" stroke="currentColor" stroke-width="1.5"/>
+          </svg>
+        </button>
+      </div>
+    </header>
+
+    <main id="log" class="log" role="log" aria-label="Conversation log"></main>
+
+    <div class="controls">
+      <button id="record-btn" class="record-btn" data-state="idle" aria-label="Start recording">
+        <svg class="mic-icon" width="28" height="28" viewBox="0 0 24 24" fill="none" aria-hidden="true">
+          <path d="M12 1a3 3 0 00-3 3v8a3 3 0 006 0V4a3 3 0 00-3-3z" fill="currentColor"/>
+          <path d="M19 10v2a7 7 0 01-14 0v-2" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
+          <line x1="12" y1="19" x2="12" y2="23" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
+          <line x1="8" y1="23" x2="16" y2="23" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
+        </svg>
+        <span class="spinner" aria-hidden="true"></span>
+      </button>
+      <button id="continuous-btn" class="continuous-btn" aria-label="Enable continuous listening" aria-pressed="false">
+        <svg width="18" height="18" viewBox="0 0 24 24" fill="none" aria-hidden="true">
+          <path d="M1 4v6h6" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+          <path d="M3.51 15a9 9 0 1 0 2.13-9.36L1 10" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+        </svg>
+      </button>
+    </div>
+
+    <footer class="footer">
+      <p>mic &rarr; STT &rarr; LLM &rarr; TTS &rarr; speaker</p>
+    </footer>
+  </div>
+
+  <dialog id="settings-dialog" class="settings-dialog" aria-label="Settings">
+    <h2>Settings</h2>
+    <form method="dialog" id="settings-form">
+      <label class="field">
+        <span class="field-label">TTS voice</span>
+        <input type="text" id="setting-voice" class="field-input" placeholder="default">
+      </label>
+      <label class="field checkbox-field">
+        <input type="checkbox" id="setting-haptic">
+        <span class="field-label">Haptic feedback</span>
+      </label>
+      <label class="field checkbox-field">
+        <input type="checkbox" id="setting-wakelock">
+        <span class="field-label">Keep screen on while recording</span>
+      </label>
+      <label class="field checkbox-field">
+        <input type="checkbox" id="setting-continuous">
+        <span class="field-label">Continuous listening (auto-restart after response)</span>
+      </label>
+      <div class="dialog-actions">
+        <button type="submit" class="btn btn-primary">Done</button>
+      </div>
+    </form>
+  </dialog>
+
+  <div id="announcer" class="sr-only" aria-live="polite" aria-atomic="true"></div>
+
+  <script src="/app.js"></script>
+</body>
+</html>

package/web/manifest.webmanifest

@@ -0,0 +1,9 @@
+{
+  "name": "OpenPalm Voice",
+  "short_name": "Voice",
+  "start_url": "/",
+  "display": "standalone",
+  "background_color": "#ffffff",
+  "theme_color": "#ff9d00",
+  "description": "Voice-driven AI assistant"
+}