@huyooo/ai-chat-frontend-vue 0.2.11 → 0.2.13

package/src/composables/useVoiceInput.ts

@@ -0,0 +1,531 @@
+/**
+ * 语音输入 Composable
+ * 
+ * 处理浏览器端录音和与后端 ASR 服务的通信
+ * 
+ * @example
+ * ```vue
+ * <script setup>
+ * import { useVoiceInput } from '../composables/useVoiceInput';
+ * 
+ * const adapter = inject('chatAdapter');
+ * const { isRecording, currentText, start, stop, cancel } = useVoiceInput(adapter);
+ * </script>
+ * 
+ * <template>
+ *   <button @mousedown="start" @mouseup="stop">
+ *     {{ isRecording ? '松开发送' : '按住说话' }}
+ *   </button>
+ *   <div v-if="currentText">{{ currentText }}</div>
+ * </template>
+ * ```
+ */
+
+import { ref, onUnmounted, computed, onMounted, type Ref } from 'vue';
+import type { ChatAdapter, AsrResultData } from '@huyooo/ai-chat-bridge-electron/renderer';
+
+// ============ 类型定义 ============
+
+/** 语音输入状态 */
+export type VoiceInputStatus = 'idle' | 'connecting' | 'recording' | 'processing' | 'error';
+
+/** 语音输入配置 */
+export interface VoiceInputConfig {
+  /** 采样率（默认 16000） */
+  sampleRate?: number;
+  /** 发送间隔（毫秒，默认 200） */
+  sendInterval?: number;
+  /** 启用标点 */
+  enablePunc?: boolean;
+  /** 启用 ITN */
+  enableItn?: boolean;
+}
+
+/** useVoiceInput 返回值 */
+export interface UseVoiceInputReturn {
+  /** 当前状态 */
+  status: Ref<VoiceInputStatus>;
+  /** 是否正在录音 */
+  isRecording: Ref<boolean>;
+  /** 当前识别文本 */
+  currentText: Ref<string>;
+  /** 最终识别文本 */
+  finalText: Ref<string>;
+  /** 错误信息 */
+  error: Ref<string | null>;
+  /** 开始录音 */
+  start: () => Promise<void>;
+  /** 停止录音并获取结果 */
+  stop: () => Promise<string>;
+  /** 取消录音 */
+  cancel: () => void;
+}
+
+// ============ 音频处理工具 ============
+
+/**
+ * 将 Float32Array 转换为 Int16Array（PCM 16bit）
+ */
+function float32ToInt16(float32Array: Float32Array): Int16Array {
+  const int16Array = new Int16Array(float32Array.length);
+  for (let i = 0; i < float32Array.length; i++) {
+    // 限制范围 [-1, 1]
+    const s = Math.max(-1, Math.min(1, float32Array[i]));
+    // 转换为 16bit
+    int16Array[i] = s < 0 ? s * 0x8000 : s * 0x7fff;
+  }
+  return int16Array;
+}
+
+/**
+ * 重采样音频（从浏览器采样率到目标采样率）
+ */
+function resample(
+  audioData: Float32Array,
+  fromSampleRate: number,
+  toSampleRate: number
+): Float32Array {
+  if (fromSampleRate === toSampleRate) {
+    return audioData;
+  }
+
+  const ratio = fromSampleRate / toSampleRate;
+  const newLength = Math.round(audioData.length / ratio);
+  const result = new Float32Array(newLength);
+
+  for (let i = 0; i < newLength; i++) {
+    const srcIndex = i * ratio;
+    const srcIndexFloor = Math.floor(srcIndex);
+    const srcIndexCeil = Math.min(srcIndexFloor + 1, audioData.length - 1);
+    const t = srcIndex - srcIndexFloor;
+    
+    // 线性插值
+    result[i] = audioData[srcIndexFloor] * (1 - t) + audioData[srcIndexCeil] * t;
+  }
+
+  return result;
+}
+
+/**
+ * 创建 AudioWorklet 采集节点（避免使用已弃用的 ScriptProcessorNode）
+ * - source -> worklet -> gain(0) -> destination（静音，避免回放）
+ * - worklet 内部按 chunkSize 聚合后通过 port 发给主线程
+ */
+async function setupAudioWorkletCapture(opts: {
+  audioContext: AudioContext;
+  source: MediaStreamAudioSourceNode;
+  chunkSize: number;
+  onChunk: (chunk: Float32Array) => void;
+}): Promise<{
+  cleanup: () => void;
+}> {
+  const { audioContext, source, chunkSize, onChunk } = opts;
+
+  // 运行时注入 worklet（无需额外打包配置）
+  const workletCode = `
+class PcmCaptureProcessor extends AudioWorkletProcessor {
+  constructor(options) {
+    super();
+    const size = (options && options.processorOptions && options.processorOptions.chunkSize) || 4096;
+    this._chunkSize = size;
+    this._buf = new Float32Array(size);
+    this._offset = 0;
+  }
+  process(inputs, outputs) {
+    const input = inputs && inputs[0] && inputs[0][0];
+    const output = outputs && outputs[0] && outputs[0][0];
+    if (!input) return true;
+    // 可选直通到输出（由 gain=0 静音）
+    if (output) output.set(input);
+
+    let i = 0;
+    while (i < input.length) {
+      const remain = this._chunkSize - this._offset;
+      const take = Math.min(remain, input.length - i);
+      this._buf.set(input.subarray(i, i + take), this._offset);
+      this._offset += take;
+      i += take;
+      if (this._offset >= this._chunkSize) {
+        const out = this._buf;
+        this.port.postMessage(out, [out.buffer]);
+        this._buf = new Float32Array(this._chunkSize);
+        this._offset = 0;
+      }
+    }
+    return true;
+  }
+}
+registerProcessor('pcm-capture', PcmCaptureProcessor);
+`;
+
+  const blob = new Blob([workletCode], { type: 'text/javascript' });
+  const url = URL.createObjectURL(blob);
+
+  await audioContext.audioWorklet.addModule(url);
+  URL.revokeObjectURL(url);
+
+  const workletNode = new AudioWorkletNode(audioContext, 'pcm-capture', {
+    numberOfInputs: 1,
+    numberOfOutputs: 1,
+    channelCount: 1,
+    processorOptions: { chunkSize },
+  });
+
+  const silentGain = audioContext.createGain();
+  silentGain.gain.value = 0;
+
+  const onMessage = (event: MessageEvent) => {
+    const data = event.data;
+    if (data instanceof Float32Array) {
+      onChunk(data);
+      return;
+    }
+    // 兼容：可能仅传了 ArrayBuffer
+    if (data instanceof ArrayBuffer) {
+      onChunk(new Float32Array(data));
+    }
+  };
+
+  workletNode.port.addEventListener('message', onMessage);
+  workletNode.port.start();
+
+  source.connect(workletNode);
+  workletNode.connect(silentGain);
+  silentGain.connect(audioContext.destination);
+
+  return {
+    cleanup: () => {
+      try {
+        workletNode.port.removeEventListener('message', onMessage);
+      } catch {
+        // ignore
+      }
+      try {
+        workletNode.disconnect();
+      } catch {
+        // ignore
+      }
+      try {
+        silentGain.disconnect();
+      } catch {
+        // ignore
+      }
+    },
+  };
+}
+
+// ============ Composable ============
+
+// 全局预热标志：确保只预热一次（避免多个组件实例重复预热）
+let asrWarmupDone = false;
+
+/**
+ * 语音输入 Composable
+ */
+export function useVoiceInput(
+  adapter: ChatAdapter | undefined,
+  config: VoiceInputConfig = {}
+): UseVoiceInputReturn {
+  const {
+    sampleRate = 16000,
+    sendInterval = 200,
+    enablePunc = true,
+    enableItn = true,
+  } = config;
+
+  // 自动预热 ASR 连接（仅首次调用，延迟执行，避免阻塞初始化）
+  if (adapter && !asrWarmupDone && typeof adapter.asrWarmup === 'function') {
+    asrWarmupDone = true;
+    // 延迟 800ms 预热，避免与首屏渲染竞争资源
+    setTimeout(() => {
+      adapter.asrWarmup?.().catch(() => {
+        // 静默失败，不影响功能
+      });
+    }, 800);
+  }
+
+  // 状态
+  const status = ref<VoiceInputStatus>('idle');
+  const currentText = ref('');
+  const finalText = ref('');
+  const error = ref<string | null>(null);
+
+  // 内部状态
+  let mediaStream: MediaStream | null = null;
+  let audioContext: AudioContext | null = null;
+  let workletCleanup: (() => void) | null = null;
+  let source: MediaStreamAudioSourceNode | null = null;
+  let audioBuffer: Float32Array[] = [];
+  let sendTimer: ReturnType<typeof setInterval> | null = null;
+  let cleanupFns: Array<() => void> = [];
+
+  // 计算属性：UI 维度的“正在录音”，包含 connecting，避免用户误以为没点到
+  const isRecording = computed(() => status.value === 'connecting' || status.value === 'recording');
+
+  /**
+   * 清理资源
+   */
+  function cleanup() {
+    // 清理定时器
+    if (sendTimer) {
+      clearInterval(sendTimer);
+      sendTimer = null;
+    }
+
+    // 清理音频处理
+    if (workletCleanup) {
+      workletCleanup();
+      workletCleanup = null;
+    }
+    if (source) {
+      source.disconnect();
+      source = null;
+    }
+    if (audioContext) {
+      audioContext.close().catch(() => {});
+      audioContext = null;
+    }
+
+    // 停止媒体流
+    if (mediaStream) {
+      mediaStream.getTracks().forEach(track => track.stop());
+      mediaStream = null;
+    }
+
+    // 清理事件监听
+    cleanupFns.forEach(fn => fn());
+    cleanupFns = [];
+
+    // 清空缓冲区
+    audioBuffer = [];
+  }
+
+  /**
+   * 发送累积的音频数据
+   */
+  async function sendAudioChunk() {
+    if (!adapter?.asrSendAudio || audioBuffer.length === 0) return;
+
+    // 合并所有缓冲的音频数据
+    const totalLength = audioBuffer.reduce((sum, arr) => sum + arr.length, 0);
+    const merged = new Float32Array(totalLength);
+    let offset = 0;
+    for (const chunk of audioBuffer) {
+      merged.set(chunk, offset);
+      offset += chunk.length;
+    }
+    audioBuffer = [];
+
+    // 转换为 PCM 16bit
+    const pcmData = float32ToInt16(merged);
+    
+    // 发送到后端
+    // 直接发送底层 buffer（IPC 会进行序列化/拷贝；这里不做额外拷贝）
+    const result = await adapter.asrSendAudio(pcmData.buffer);
+    if (!result.success) {
+      console.error('[VoiceInput] 发送音频失败:', result.error);
+    }
+  }
+
+  /**
+   * 开始录音
+   */
+  async function start(): Promise<void> {
+    // 防抖：连接中/录音中不重复 start，避免多次点击造成状态错乱
+    if (status.value === 'connecting' || status.value === 'recording') {
+      return;
+    }
+    if (!adapter) {
+      error.value = 'Adapter 未初始化';
+      status.value = 'error';
+      return;
+    }
+
+    if (!adapter.asrStart) {
+      error.value = '语音识别功能不可用';
+      status.value = 'error';
+      return;
+    }
+
+    // 重置状态
+    error.value = null;
+    currentText.value = '';
+    finalText.value = '';
+    status.value = 'connecting';
+
+    try {
+      // 请求麦克风权限
+      mediaStream = await navigator.mediaDevices.getUserMedia({
+        audio: {
+          channelCount: 1,
+          sampleRate: { ideal: sampleRate },
+          echoCancellation: true,
+          noiseSuppression: true,
+        },
+      });
+
+      // 创建音频上下文
+      audioContext = new AudioContext({ sampleRate });
+      const actualSampleRate = audioContext.sampleRate;
+
+      // 注册 ASR 事件监听
+      if (adapter.onAsrResult) {
+        const cleanup = adapter.onAsrResult((data: { result: AsrResultData; isLast: boolean }) => {
+          const text = data.result.result?.text || '';
+          currentText.value = text;
+          
+          if (data.isLast) {
+            finalText.value = text;
+          }
+        });
+        cleanupFns.push(cleanup);
+      }
+
+      if (adapter.onAsrError) {
+        const cleanup = adapter.onAsrError((err: { message: string }) => {
+          console.error('[VoiceInput] ASR 错误:', err.message);
+          error.value = err.message;
+          status.value = 'error';
+        });
+        cleanupFns.push(cleanup);
+      }
+
+      if (adapter.onAsrClosed) {
+        const cleanup = adapter.onAsrClosed(() => {
+          console.log('[VoiceInput] ASR 连接关闭');
+          if (status.value === 'recording') {
+            status.value = 'idle';
+          }
+        });
+        cleanupFns.push(cleanup);
+      }
+
+      // 启动 ASR 会话
+      const startResult = await adapter.asrStart({
+        format: 'pcm',
+        sampleRate,
+        enablePunc,
+        enableItn,
+        showUtterances: true,
+      });
+
+      if (!startResult.success) {
+        throw new Error(startResult.error || 'ASR 启动失败');
+      }
+
+      // 创建音频处理节点（连接成功后再开始接收语音，降低复杂度）
+      source = audioContext.createMediaStreamSource(mediaStream);
+      if (typeof AudioWorkletNode === 'undefined' || !audioContext.audioWorklet) {
+        throw new Error('当前环境不支持 AudioWorkletNode（无法启动语音录制）');
+      }
+      const { cleanup: off } = await setupAudioWorkletCapture({
+        audioContext,
+        source,
+        chunkSize: 4096,
+        onChunk: (chunk) => {
+          if (status.value !== 'recording') return;
+          const resampled = resample(chunk, actualSampleRate, sampleRate);
+          audioBuffer.push(new Float32Array(resampled));
+        },
+      });
+      workletCleanup = off;
+
+      // 启动定时发送
+      sendTimer = setInterval(sendAudioChunk, sendInterval);
+
+      status.value = 'recording';
+
+    } catch (err) {
+      console.error('[VoiceInput] 启动失败:', err);
+      error.value = err instanceof Error ? err.message : String(err);
+      status.value = 'error';
+      cleanup();
+    }
+  }
+
+  /**
+   * 停止录音并获取结果
+   */
+  async function stop(): Promise<string> {
+    // 连接中点击停止：按取消处理，保证状态立刻回到 idle
+    if (status.value === 'connecting') {
+      cancel();
+      return '';
+    }
+    if (status.value !== 'recording') {
+      return finalText.value || currentText.value;
+    }
+
+    status.value = 'processing';
+
+    try {
+      // 发送剩余的音频数据
+      await sendAudioChunk();
+
+      // 发送结束信号
+      if (adapter?.asrFinish) {
+        await adapter.asrFinish();
+      }
+
+      // 等待最终结果（最多等待 3 秒）
+      await new Promise<void>((resolve) => {
+        let timeout: ReturnType<typeof setTimeout>;
+        
+        const checkResult = () => {
+          if (finalText.value) {
+            clearTimeout(timeout);
+            resolve();
+          }
+        };
+
+        // 监听最终结果
+        const interval = setInterval(checkResult, 100);
+        
+        timeout = setTimeout(() => {
+          clearInterval(interval);
+          resolve();
+        }, 3000);
+      });
+
+    } catch (err) {
+      console.error('[VoiceInput] 停止失败:', err);
+      error.value = err instanceof Error ? err.message : String(err);
+    } finally {
+      cleanup();
+      status.value = 'idle';
+    }
+
+    return finalText.value || currentText.value;
+  }
+
+  /**
+   * 取消录音
+   */
+  function cancel() {
+    if (adapter?.asrStop) {
+      adapter.asrStop().catch(() => {});
+    }
+    cleanup();
+    currentText.value = '';
+    finalText.value = '';
+    error.value = null;
+    status.value = 'idle';
+  }
+
+  // 组件卸载时清理
+  onUnmounted(() => {
+    cancel();
+  });
+
+  return {
+    status,
+    isRecording,
+    currentText,
+    finalText,
+    error,
+    start,
+    stop,
+    cancel,
+  };
+}
+

package/src/composables/useVoiceToTextInput.ts

@@ -0,0 +1,94 @@
+/**
+ * 将语音识别（useVoiceInput）封装成“写入输入框”的高内聚控制层
+ * - 处理 prefix（追加模式）
+ * - 处理实时同步到 inputText
+ * - 处理 Enter：录音中 Enter 停止/取消语音（不发送）
+ * - 输出按钮状态/禁用逻辑（ChatInput 只负责渲染）
+ */
+
+import { computed, nextTick, ref, type Ref, watch } from 'vue';
+import type { ChatAdapter } from '../adapter';
+import { useVoiceInput } from './useVoiceInput';
+
+export function useVoiceToTextInput(opts: {
+  adapter: ChatAdapter | undefined;
+  inputText: Ref<string>;
+  hasImages: Ref<boolean>;
+  isLoading: Ref<boolean>;
+  focusInput?: () => void;
+  adjustTextareaHeight?: () => void;
+}) {
+  const { adapter, inputText, hasImages, isLoading, focusInput, adjustTextareaHeight } = opts;
+
+  const voiceInput = useVoiceInput(adapter);
+  const voiceInputPrefix = ref('');
+
+  const voiceStatus = voiceInput.status;
+  const isVoiceActive = computed(() => voiceStatus.value === 'connecting' || voiceStatus.value === 'recording');
+
+  // 实时同步语音识别文本到输入框（追加模式）
+  watch(voiceInput.currentText, (text) => {
+    if (!isVoiceActive.value) return;
+    const prefix = voiceInputPrefix.value;
+    inputText.value = prefix ? `${prefix} ${text}` : text;
+    nextTick(() => adjustTextareaHeight?.());
+  });
+
+  async function toggleVoice() {
+    if (isLoading.value) return;
+
+    // connecting 再点一次：取消并恢复录音前内容
+    if (voiceStatus.value === 'connecting') {
+      voiceInput.cancel();
+      inputText.value = voiceInputPrefix.value;
+      voiceInputPrefix.value = '';
+      nextTick(() => {
+        adjustTextareaHeight?.();
+        focusInput?.();
+      });
+      return;
+    }
+
+    if (voiceStatus.value === 'recording') {
+      await voiceInput.stop();
+      voiceInputPrefix.value = '';
+      nextTick(() => {
+        adjustTextareaHeight?.();
+        focusInput?.();
+      });
+      return;
+    }
+
+    // idle -> start
+    voiceInputPrefix.value = inputText.value?.trim() || '';
+    await voiceInput.start();
+  }
+
+  // 语音中：禁用发送（避免与停止录音冲突）
+  const sendDisabled = computed(() => {
+    if (isLoading.value) return false; // 允许停止生成
+    if (isVoiceActive.value) return true;
+    return !inputText.value.trim() && !hasImages.value;
+  });
+
+  function handleKeydownForVoice(e: KeyboardEvent): boolean {
+    if (!isVoiceActive.value) return false;
+    if (e.key === 'Enter' && !e.shiftKey) {
+      e.preventDefault();
+      void toggleVoice();
+      return true;
+    }
+    return false;
+  }
+
+  return {
+    voiceInput,
+    voiceStatus,
+    isVoiceActive,
+    toggleVoice,
+    sendDisabled,
+    handleKeydownForVoice,
+  };
+}
+
+