Эх сурвалжийг харах

优化语音输入组件,每次输入实时更新,但不影响历史文字

liyanbo 3 сар өмнө
parent
commit
52f7172533

+ 51 - 7
src/components/ai/text/TextToText.vue

@@ -37,16 +37,17 @@
             <div class="input-section">
               <input
                 type="text"
-                v-model="prompt"
+                v-model="displayedPrompt"
                 placeholder="问我任何问题..."
                 @keyup.enter="handleSendByKeydown"
               />
                 <!-- 语音输入按钮 -->
-                <VoiceInput
-                    @voiceRecognized="handleVoiceRecognized"
-                    lang="zh-CN"
-                    maxDuration="10"
-                />
+              <VoiceInput
+                  @voiceRecognized="handleVoiceRecognized"
+                  @recordingStatusChanged="handleRecordingStatusChanged"
+                  lang="zh-CN"
+                  maxDuration="10"
+              />
 
               <!-- 终止问答按钮 -->
               <div
@@ -198,6 +199,26 @@ const receiveMessageFullText = ref("");
 const receiveMessageDisplayedText = ref("");
 const messageListRef = ref(null);
 const userScrolled = ref(false)//是否用户手动滚动
+// 语音输入状态跟踪
+const isVoiceRecording = ref(false); // 当前是否正在录音
+const voiceRecognizedText = ref(""); // 实时语音识别结果
+// 用于控制输入框显示的内容
+const displayedPrompt = computed({
+  get() {
+    // 录音时,显示prompt.value + 实时语音识别结果
+    if (isVoiceRecording.value) {
+      return prompt.value ? `${prompt.value} ${voiceRecognizedText.value}` : voiceRecognizedText.value;
+    }
+    // 不录音时,只显示prompt.value
+    return prompt.value;
+  },
+  set(newValue) {
+    // 只在用户手动输入时更新prompt.value
+    if (!isVoiceRecording.value) {
+      prompt.value = newValue;
+    }
+  }
+});
 
 // =========== 【聊天对话】相关 ===========
 
@@ -236,7 +257,30 @@ const getConversation = async (id) => {
 
 // 语音输入识别结果处理
 const handleVoiceRecognized = (text) => {
-  prompt.value = text;
+  if (isVoiceRecording.value) {
+    // 在同一次录音过程中,只更新临时变量,不修改prompt.value
+    voiceRecognizedText.value = text;
+  } else {
+    // 在录音结束时,将最终的语音内容追加到prompt.value
+    prompt.value = prompt.value ? `${prompt.value} ${text}` : text;
+    // 清空临时变量
+    voiceRecognizedText.value = "";
+  }
+};
+
+// 处理录音状态变化
+const handleRecordingStatusChanged = (isRecording) => {
+  const wasRecording = isVoiceRecording.value;
+  isVoiceRecording.value = isRecording;
+
+  // 如果是从录音状态切换到非录音状态,需要将临时的语音识别结果追加到prompt.value
+  if (wasRecording && !isRecording) {
+    if (voiceRecognizedText.value) {
+      prompt.value = prompt.value ? `${prompt.value} ${voiceRecognizedText.value}` : voiceRecognizedText.value;
+      // 清空临时变量
+      voiceRecognizedText.value = "";
+    }
+  }
 };
 
 // =========== 【聊天对话】相关 ===========

+ 1 - 0
src/components/ai/voice/VoiceInput.vue

@@ -65,6 +65,7 @@ const initSpeechRecognition = () => {
   const instance = new SpeechRecognition()
   instance.lang = props.lang
   instance.interimResults = true
+  // instance.continuous = true
 
   instance.onresult = (event) => {
     // 遍历所有结果,包括临时结果