@goodandready/dsh-voice 0.8.11 → 0.8.13

package/README.md

@@ -76,6 +76,7 @@ graph LR
 * 🖥️ **Offline Local Whisper Server**: Automatically boots and manages [whisper.cpp](https://github.com/ggerganov/whisper.cpp) (`whisper-server`) with on-the-fly `ffmpeg` transcode.
 * ⚡ **SenseVoice-ONNX / Sherpa-ONNX** *(0.8.11)*: Ultra-fast (~50–100ms) non-autoregressive local STT engine with automatic emotion/event tag stripping. Supports both Sherpa-ONNX HTTP and OpenAI-compatible endpoints.
 * 🌐 **Realtime Audio Streaming** *(0.8.11)*: Low-latency WebSocket bridge (`/dsh-voice/realtime`) for OpenAI Realtime API or local Sherpa-ONNX streaming. API keys stay securely on the host.
+* 🌊 **Liquid Wave & Dynamic Orb Visualizer** *(0.8.12)*: Smooth animated audio visualization in the recording pill with real-time mic volume reactivity. Switch between organic multi-layer liquid waves, pulsating radiant orb, classic bars, or off.
 
 ---
 

package/README.ru.md

@@ -76,6 +76,7 @@ graph LR
 * 🖥️ **Автозапуск локального whisper.cpp**: управление жизненным циклом `whisper-server` с авто-конвертацией через `ffmpeg`.
 * ⚡ **SenseVoice-ONNX / Sherpa-ONNX** *(0.8.11)*: сверхбыстрый (~50–100мс) неавторегрессивный локальный STT с автоматической очисткой тегов эмоций/событий. Поддержка Sherpa-ONNX HTTP и OpenAI-совместимых эндпоинтов.
 * 🌐 **Потоковое аудио в реальном времени** *(0.8.11)*: низколатентный WebSocket-мост (`/dsh-voice/realtime`) для OpenAI Realtime API или локального Sherpa-ONNX. API-ключи остаются на хосте.
+* 🌊 **Анимированные визуализаторы Liquid Wave и Dynamic Orb** *(0.8.12)*: живая интерактивная анимация звуковой волны в полоске записи с откликом на громкость микрофона. Выбор стиля: текучая волна, пульсирующая сфера, классические столбики или выключен.
 
 ---
 

package/README.zh.md

@@ -76,6 +76,7 @@ graph LR
 * 🖥️ **本地 whisper.cpp 服务端直连**：自动管理 `whisper-server` 进程，结合 `ffmpeg` 实现实时音频转码。
 * ⚡ **SenseVoice-ONNX / Sherpa-ONNX** *(0.8.11)*：超快速（~50–100ms）非自回归本地语音识别引擎，自动清除情绪/事件标签。支持 Sherpa-ONNX HTTP 和 OpenAI 兼容端点。
 * 🌐 **实时音频流** *(0.8.11)*：低延迟 WebSocket 桥接（`/dsh-voice/realtime`），支持 OpenAI Realtime API 或本地 Sherpa-ONNX 流式传输。API 密钥安全保留在服务端。
+* 🌊 **Liquid Wave 与 Dynamic Orb 动态可视化** *(0.8.12)*：录音面板内的生动波形动态可视化，实时响应麦克风音量。可选平滑流动波浪、发光脉冲球体、经典频条或关闭。
 
 ---
 

package/lib/client.js

@@ -160,6 +160,12 @@ window.__ModuleLoader__.load({
       'realtimeActive': 'Streaming live…',
       'realtimeConnect': 'Start streaming',
       'realtimeDisconnect': 'Stop streaming',
+      'visualizerStyle': 'Audio visualizer style',
+      'visualizerStyleHint': 'Waveform animation inside the recording pill',
+      'visLiquidWave': 'Liquid Wave',
+      'visDynamicOrb': 'Dynamic Orb',
+      'visBars': 'Classic Bars',
+      'visOff': 'Off',
     }
     const ru = {
       'saveFailed': 'Часть полей не сохранилась —',
@@ -299,6 +305,12 @@ window.__ModuleLoader__.load({
       'realtimeActive': 'Стриминг идёт…',
       'realtimeConnect': 'Начать стриминг',
       'realtimeDisconnect': 'Остановить стриминг',
+      'visualizerStyle': 'Стиль визуализатора звука',
+      'visualizerStyleHint': 'Анимация волны внутри полоски записи',
+      'visLiquidWave': 'Жидкая волна (Liquid Wave)',
+      'visDynamicOrb': 'Динамическая сфера (Dynamic Orb)',
+      'visBars': 'Классические столбики',
+      'visOff': 'Выключен',
     }
 
     // Строки нужны и вне компонентов — в обработчиках записи, в подписях
@@ -1026,6 +1038,108 @@ window.__ModuleLoader__.load({
       )
     }
 
+    // ----------------------------------------------------------- visualizers
+    // 1. Liquid Wave: органическая текучая многослойная волна
+    function drawLiquidWave(g, w, h, levels, color, time) {
+      const midY = h / 2
+      const curLevel = levels.length ? levels[levels.length - 1] : 0
+      const smoothLevel = Math.max(0.04, Math.min(1, curLevel * 1.6))
+
+      const layers = [
+        { amp: smoothLevel * (h * 0.42), freq: 0.024, speed: 0.08, alpha: 0.45 },
+        { amp: smoothLevel * (h * 0.36), freq: 0.038, speed: -0.06, alpha: 0.75 },
+        { amp: smoothLevel * (h * 0.28), freq: 0.052, speed: 0.11, alpha: 0.95 },
+      ]
+
+      for (let layerIdx = 0; layerIdx < layers.length; layerIdx++) {
+        const lyr = layers[layerIdx]
+        g.beginPath()
+        g.globalAlpha = lyr.alpha
+
+        const grad = g.createLinearGradient(0, 0, w, 0)
+        grad.addColorStop(0, color)
+        grad.addColorStop(0.5, '#38bdf8')
+        grad.addColorStop(1, color)
+        g.strokeStyle = grad
+        g.lineWidth = layerIdx === 2 ? 2.5 : 1.5
+
+        g.moveTo(0, midY)
+        const step = 6
+        for (let x = 0; x <= w; x += step) {
+          const edgeDist = Math.min(x, w - x) / (w * 0.25)
+          const envelope = Math.min(1, Math.max(0, edgeDist))
+          const phase = time * lyr.speed + x * lyr.freq
+          const dy = Math.sin(phase) * lyr.amp * envelope + Math.cos(phase * 0.5) * (lyr.amp * 0.35) * envelope
+          g.lineTo(x, midY + dy)
+        }
+        g.stroke()
+      }
+      g.globalAlpha = 1
+    }
+
+    // 2. Dynamic Orb: интерактивная пульсирующая сфера по центру
+    function drawDynamicOrb(g, w, h, levels, color, time) {
+      const cx = w / 2
+      const cy = h / 2
+      const curLevel = levels.length ? levels[levels.length - 1] : 0
+      const smoothLevel = Math.max(0.05, Math.min(1, curLevel * 2.0))
+
+      g.beginPath()
+      g.globalAlpha = 0.25
+      g.strokeStyle = color
+      g.lineWidth = 1
+      g.moveTo(10, cy)
+      g.lineTo(cx - 35, cy)
+      g.moveTo(cx + 35, cy)
+      g.lineTo(w - 10, cy)
+      g.stroke()
+
+      const rRing = 14 + smoothLevel * 14 + Math.sin(time * 0.08) * 3
+      g.beginPath()
+      g.arc(cx, cy, rRing, 0, Math.PI * 2)
+      g.strokeStyle = '#38bdf8'
+      g.globalAlpha = 0.35 + smoothLevel * 0.4
+      g.lineWidth = 1.5
+      g.stroke()
+
+      if (smoothLevel > 0.25) {
+        g.beginPath()
+        g.arc(cx, cy, rRing + 7 + Math.cos(time * 0.06) * 4, 0, Math.PI * 2)
+        g.strokeStyle = color
+        g.globalAlpha = 0.2 + smoothLevel * 0.3
+        g.lineWidth = 1
+        g.stroke()
+      }
+
+      const rCore = 6 + smoothLevel * 8 + Math.sin(time * 0.12) * 1.5
+      const radial = g.createRadialGradient(cx, cy, 1, cx, cy, rCore + 4)
+      radial.addColorStop(0, '#ffffff')
+      radial.addColorStop(0.4, '#38bdf8')
+      radial.addColorStop(1, color)
+      g.beginPath()
+      g.arc(cx, cy, rCore, 0, Math.PI * 2)
+      g.fillStyle = radial
+      g.globalAlpha = 0.95
+      g.fill()
+
+      g.globalAlpha = 1
+    }
+
+    // 3. Classic Bars: классические вертикальные столбики
+    function drawClassicBars(g, w, h, levels, color) {
+      const midY = h / 2
+      for (let i = 0; i < levels.length && i * 7 < w; i++) {
+        const level = levels[levels.length - 1 - i]
+        const age = i / levels.length
+        const x = w - 10 - i * 7
+        const hh = Math.max(2.5, level * (h - 6) * 0.5 * (1 - age * 0.35))
+        g.globalAlpha = 1 - age * 0.75
+        g.fillStyle = color
+        g.fillRect(x, midY - hh, 3.5, hh * 2)
+      }
+      g.globalAlpha = 1
+    }
+
     function RecordPill(props) {
       const v = useVoice()
       const canvasRef = React.useRef(null)
@@ -1078,9 +1192,10 @@ window.__ModuleLoader__.load({
         return () => dispose()
       }, [v.phase])
 
-      // Осциллограмма.
+      // Анимация осциллограммы / визуализатора.
       React.useEffect(() => {
         if (v.phase !== 'recording') return
+        let frame = 0
         const dispose = ctx.interval(() => {
           const canvas = canvasRef.current
           if (!canvas) return
@@ -1091,18 +1206,30 @@ window.__ModuleLoader__.load({
             try { voice.waveColor = getComputedStyle(canvas).color || '#fff' } catch (e) { voice.waveColor = '#fff' }
           }
           const levels = voice.levels
-          const midY = h / 2
-          for (let i = 0; i < levels.length && i * 7 < w; i++) {
-            const level = levels[levels.length - 1 - i]
-            const age = i / levels.length
-            const x = w - 10 - i * 7
-            const hh = Math.max(2.5, level * (h - 6) * 0.5 * (1 - age * 0.35))
-            g.globalAlpha = 1 - age * 0.75
-            g.fillStyle = voice.waveColor
-            g.fillRect(x, midY - hh, 3.5, hh * 2)
+          const style = (voice.settings && voice.settings.visualizerStyle) || 'liquid-wave'
+          frame++
+
+          if (style === 'off') {
+            g.beginPath()
+            g.globalAlpha = 0.25
+            g.strokeStyle = voice.waveColor
+            g.lineWidth = 1
+            g.moveTo(10, h / 2)
+            g.lineTo(w - 10, h / 2)
+            g.stroke()
+            g.globalAlpha = 1
+            return
           }
-          g.globalAlpha = 1
-        }, 50)
+
+          if (style === 'dynamic-orb') {
+            drawDynamicOrb(g, w, h, levels, voice.waveColor, frame)
+          } else if (style === 'bars') {
+            drawClassicBars(g, w, h, levels, voice.waveColor)
+          } else {
+            // default: liquid-wave
+            drawLiquidWave(g, w, h, levels, voice.waveColor, frame)
+          }
+        }, 33)
         return () => dispose()
       }, [v.phase])
 
@@ -1273,6 +1400,7 @@ window.__ModuleLoader__.load({
                 sessionCommands: !!(data && data.modes && data.modes.message && data.modes.message.sessionCommands),
                 noiseSuppression: data && data.noiseSuppression !== false,
                 contextGlossary: data && data.contextGlossary !== false,
+                visualizerStyle: (data && data.visualizerStyle) || 'liquid-wave',
               })
             })
             .catch(() => { /* без подсказки хоста клавиши просто не будет */ })
@@ -1612,6 +1740,7 @@ window.__ModuleLoader__.load({
           vadAdapt: Number(draft.dictation && draft.dictation.vadAdapt) || 0,
           noiseSuppression: draft.noiseSuppression !== false,
           contextGlossary: draft.contextGlossary !== false,
+          visualizerStyle: draft.visualizerStyle || 'liquid-wave',
         })
         // Композер держит обработчик клавиши: пусть перечитает настройку,
         // иначе новая клавиша заработает только после перезагрузки страницы.
@@ -1792,6 +1921,16 @@ window.__ModuleLoader__.load({
               type: 'checkbox', checked: draft ? draft.contextGlossary !== false : true, disabled: !writable,
               onChange: (e) => setTop('contextGlossary', e.target.checked),
             })),
+          React.createElement('label', { className: 'dvs-field', title: t('visualizerStyleHint') }, t('visualizerStyle'),
+            React.createElement('select', {
+              value: String((draft && draft.visualizerStyle) || 'liquid-wave'), disabled: !writable,
+              onChange: (e) => setTop('visualizerStyle', e.target.value),
+            },
+              React.createElement('option', { value: 'liquid-wave' }, t('visLiquidWave')),
+              React.createElement('option', { value: 'dynamic-orb' }, t('visDynamicOrb')),
+              React.createElement('option', { value: 'bars' }, t('visBars')),
+              React.createElement('option', { value: 'off' }, t('visOff')),
+            )),
           React.createElement('label', { className: 'dvs-field' }, t('vocabulary'),
             React.createElement('textarea', {
               rows: 3, disabled: !writable,

package/lib/index.js

@@ -158,6 +158,8 @@ export const Config = z.object({
     .description('Realtime streaming provider: "openai" (OpenAI Realtime API) or "sherpa-onnx" (local streaming).'),
   realtimeModel: z.string().default('gpt-4o-realtime-preview')
     .description('Realtime model identifier.'),
+  visualizerStyle: z.union(['liquid-wave', 'dynamic-orb', 'bars', 'off']).default('liquid-wave')
+    .description('Audio visualizer animation style in the recording pill: "liquid-wave", "dynamic-orb", "bars", or "off".'),
 })
 
 const MIME_BY_EXT = {
@@ -439,6 +441,7 @@ export function apply(ctx, baseConfig) {
         realtimeStreaming: !!cfg.realtimeStreaming,
         realtimeProvider: cfg.realtimeProvider || 'openai',
         realtimeModel: cfg.realtimeModel || 'gpt-4o-realtime-preview',
+        visualizerStyle: cfg.visualizerStyle || 'liquid-wave',
         providerStats: getProviderStats(),
       })
     },

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@goodandready/dsh-voice",
-  "version": "0.8.11",
+  "version": "0.8.13",
   "description": "Voice input for DeepSeek Harness: dictation chunked by pauses and voice messages, each with its own provider fallback chain (Deepgram, Groq, HuggingFace, local whisper.cpp, plus any OpenAI-compatible API of your own).",
   "license": "MIT",
   "type": "module",