byt-lingxiao-ai 0.2.5 → 0.2.7

package/components/ChatWindowDialog.vue

@@ -0,0 +1,82 @@
+<template>
+  <div class="chat-overlay" v-show="value" @click="$emit('overlay-click')">
+    <div class="chat-window" @click.stop>
+      <!-- 头部 -->
+      <ChatWindowHeader @close="$emit('input', false)" />
+      
+      <!-- 消息列表 -->
+      <ChatMessageList 
+        ref="messageList"
+        :messages="messages"
+        :think-status="thinkStatus"
+        @thinking-click="$emit('thinking-click')"
+      />
+      
+      <!-- 输入框 -->
+      <ChatInputBox
+        :value="inputMessage"
+        @input="$emit('update:inputMessage', $event)"
+        @send="$emit('send')"
+      />
+    </div>
+  </div>
+</template>
+
+<script>
+import ChatWindowHeader from './ChatWindowHeader.vue'
+import ChatMessageList from './ChatMessageList.vue'
+import ChatInputBox from './ChatInputBox.vue'
+
+export default {
+  name: 'ChatWindowDialog',
+  components: {
+    ChatWindowHeader,
+    ChatMessageList,
+    ChatInputBox
+  },
+  props: {
+    value: {
+      type: Boolean,
+      required: true
+    },
+    messages: {
+      type: Array,
+      required: true
+    },
+    inputMessage: {
+      type: String,
+      default: ''
+    },
+    thinkStatus: {
+      type: Boolean,
+      default: true
+    }
+  }
+}
+</script>
+
+<style scoped>
+.chat-overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background: transparent;
+  z-index: 10000;
+}
+
+.chat-window {
+  width: 480px;
+  height: 740px;
+  border-radius: 14px;
+  background: #fff;
+  box-shadow: 0 2px 20px 0 rgba(0, 0, 0, 0.16);
+  position: absolute;
+  bottom: 20px;
+  right: 60px;
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+}
+</style>

package/components/ChatWindowHeader.vue

@@ -0,0 +1,95 @@
+<template>
+  <div class="chat-window-header">
+    <div class="chat-window-header-title">凌霄大模型AI123对话</div>
+    <div class="chat-window-header-open" @click="handleOpen">
+      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
+        <path d="M14.5 4.5H19.5V9.5" stroke="#4E5969" stroke-width="1.66667" stroke-linecap="round" stroke-linejoin="round"/>
+        <path d="M9.5 19.5H4.5V14.5" stroke="#4E5969" stroke-width="1.66667" stroke-linecap="round" stroke-linejoin="round"/>
+        <path d="M19.5 4.5L14.0833 9.91667" stroke="#4E5969" stroke-width="1.66667" stroke-linecap="round" stroke-linejoin="round"/>
+        <path d="M9.91667 14.083L4.5 19.4997" stroke="#4E5969" stroke-width="1.66667" stroke-linecap="round" stroke-linejoin="round"/>
+      </svg>
+    </div>
+    <div class="chat-window-header-close" @click="$emit('close')">
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        width="24"
+        height="24"
+        viewBox="0 0 24 24"
+        fill="none"
+      >
+        <path
+          d="M5.50002 5.5L18.5 18.5"
+          stroke="#4E5969"
+          stroke-width="1.89404"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+        />
+        <path
+          d="M5.50002 18.5L18.5 5.5"
+          stroke="#4E5969"
+          stroke-width="1.89404"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+        />
+      </svg>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'ChatWindowHeader',
+  methods: {
+    handleOpen() {
+      window.open('http://192.168.8.87:8090/', '_blank')
+    }
+  }
+}
+</script>
+
+<style scoped>
+.chat-window-header {
+  display: flex;
+  align-items: center;
+  border-bottom: 1px solid #eaeaea;
+  background: #fff;
+  padding: 16px;
+  flex-shrink: 0;
+}
+
+.chat-window-header-title {
+  color: #29414e;
+  font-size: 18px;
+  font-weight: 900;
+  position: relative;
+  padding-left: 36px;
+}
+
+.chat-window-header-open {
+  width: 24px;
+  height: 24px;
+  overflow: hidden;
+  margin-left: auto;
+  margin-right: 20px;
+  cursor: pointer;
+}
+
+.chat-window-header-title::before {
+  content: '';
+  position: absolute;
+  left: 0;
+  top: 50%;
+  transform: translateY(-50%);
+  width: 32px;
+  height: 32px;
+  background-image: url('./assets/logo.png');
+  background-size: cover;
+}
+
+.chat-window-header-close {
+  width: 24px;
+  height: 24px;
+  overflow: hidden;
+  cursor: pointer;
+}
+</style>

package/components/UserMessage.vue

@@ -0,0 +1,35 @@
+<template>
+  <div class="chat-window-message-user">
+    <div class="user-message">{{ content }}</div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'UserMessage',
+  props: {
+    content: {
+      type: String,
+      required: true
+    }
+  }
+}
+</script>
+
+<style scoped>
+.chat-window-message-user {
+  display: flex;
+  justify-content: flex-end;
+}
+
+.user-message {
+  max-width: 80%;
+  display: flex;
+  padding: 8px 12px;
+  justify-content: center;
+  align-items: center;
+  gap: 10px;
+  border-radius: 12px;
+  background: #e3ecff;
+}
+</style>

package/components/mixins/audioMixin.js

@@ -0,0 +1,122 @@
+export default {
+  data() {
+    return {
+      isRecording: false,
+      isMicAvailable: false,
+      audioContext: null,
+      microphone: null,
+      processor: null,
+      audioBuffer: new Float32Array(0)
+    }
+  },
+  methods: {
+    async initAudio() {
+      if (this.isRecording) return;
+      try {
+        this.isMicAvailable = true;
+        const stream = await navigator.mediaDevices.getUserMedia({
+          audio: {
+            sampleRate: this.SAMPLE_RATE,
+            channelCount: 1,
+            noiseSuppression: true,
+            echoCancellation: true
+          }
+        });
+
+        this.audioContext = new AudioContext({ sampleRate: this.SAMPLE_RATE });
+        this.microphone = this.audioContext.createMediaStreamSource(stream);
+        this.processor = this.audioContext.createScriptProcessor(this.FRAME_SIZE, 1, 1);
+        this.processor.onaudioprocess = this.processAudio;
+        
+        this.microphone.connect(this.processor);
+        this.processor.connect(this.audioContext.destination);
+
+        this.isRecording = true;
+        console.log(`录音中 (采样率: ${this.audioContext.sampleRate}Hz)`);
+      } catch (error) {
+        console.error("音频初始化失败:", error);
+        this.isRecording = false;
+        this.isMicAvailable = false;
+      }
+    },
+
+    processAudio(event) {
+      if (!this.isRecording) return;
+      const inputData = event.inputBuffer.getChannelData(0);
+
+      const tempBuffer = new Float32Array(this.audioBuffer.length + inputData.length);
+      tempBuffer.set(this.audioBuffer, 0);
+      tempBuffer.set(inputData, this.audioBuffer.length);
+      this.audioBuffer = tempBuffer;
+
+      while (this.audioBuffer.length >= this.FRAME_SIZE) {
+        const frame = this.audioBuffer.slice(0, this.FRAME_SIZE);
+        this.audioBuffer = this.audioBuffer.slice(this.FRAME_SIZE);
+        const pcmData = this.floatTo16BitPCM(frame);
+
+        if (this.ws && this.ws.readyState === this.ws.OPEN) {
+          this.ws.send(pcmData);
+        }
+      }
+    },
+
+    floatTo16BitPCM(input) {
+      const output = new Int16Array(input.length);
+      for (let i = 0; i < input.length; i++) {
+        const s = Math.max(-1, Math.min(1, input[i]));
+        output[i] = s < 0 ? s * 0x8000 : s * 0x7FFF;
+      }
+      return output.buffer;
+    },
+
+    stopRecording() {
+      if (!this.isRecording) return;
+      if (this.microphone) this.microphone.disconnect();
+      if (this.processor) this.processor.disconnect();
+      if (this.analyser) this.analyser.disconnect();
+      if (this.audioContext) {
+        this.audioContext.close().catch(e => {
+          console.error("关闭音频上下文失败:", e);
+        });
+      }
+      this.isRecording = false;
+    },
+
+    play() {
+      this.robotStatus = 'speaking';
+      this.$refs.audioPlayer.play();
+    },
+
+    pause() {
+      this.robotStatus = 'waiting';
+      this.$refs.audioPlayer.pause();
+    },
+
+    stop() {
+      this.robotStatus = 'leaving';
+      this.$refs.audioPlayer.pause();
+      this.$refs.audioPlayer.currentTime = 0;
+      this.jumpedTimePoints.clear();
+    },
+
+    analyzeAudioCommand(command) {
+      console.log('分析音频命令:', command);
+      if (command === 'C5') {
+        this.robotStatus = 'entering';
+        setTimeout(() => {
+          this.robotStatus = 'speaking';
+          this.play();
+        }, 3000);
+      } else if (command === 'C8') {
+        this.robotStatus = 'speaking';
+        this.play();
+      } else if (command === 'C7') {
+        this.robotStatus = 'waiting';
+        this.pause();
+      } else if (command === 'C6') {
+        this.robotStatus = 'leaving';
+        this.stop();
+      }
+    }
+  }
+}

package/components/mixins/messageMixin.js

@@ -0,0 +1,158 @@
+import { StreamParser } from '../utils/StreamParser'
+
+export default {
+  data() {
+    return {
+      streamParser: null
+    }
+  },
+
+  created() {
+    // 初始化流解析器
+    this.streamParser = new StreamParser({
+      updateInterval: 16, // 约60fps
+      debug: process.env.NODE_ENV === 'development'
+    });
+  },
+
+  methods: {
+    createAiMessage() {
+      const message = {
+        id: this.messages.length + 1,
+        type: 'ai',
+        sender: 'AI',
+        time: '',
+        thinking: '',
+        charts: [],
+        content: '',
+      };
+      this.messages.push(message);
+      this.currentMessage = message;
+      return message;
+    },
+
+    createUserMessage(content) {
+      const message = {
+        id: this.messages.length + 1,
+        type: 'user',
+        sender: '用户',
+        time: '',
+        content,
+      };
+      this.messages.push(message);
+      this.inputMessage = '';
+      return message;
+    },
+
+    async handleSend() {
+      if (!this.inputMessage.trim()) {
+        return;
+      }
+      
+      const message = this.inputMessage.trim();
+      this.createUserMessage(message);
+      this.createAiMessage();
+      
+      // 重置解析器
+      this.streamParser.reset();
+
+      try {
+        const startTime = Date.now();
+        const controller = new AbortController();
+        const token = `Bearer ac627d0a-8346-4ae9-b93a-f37ff6210adc`;
+        
+        const response = await fetch('/bytserver/api-model/chat/stream', {
+          method: 'POST',
+          signal: controller.signal,
+          headers: {
+            'Content-Type': 'application/json',
+            'Authorization': token,
+          },
+          body: JSON.stringify({ content: message })
+        });
+
+        if (!response.ok) {
+          throw new Error(`HTTP ${response.status}: ${response.statusText}`);
+        }
+
+        // 使用优化的流处理
+        await this.consumeStream(response.body);
+        
+        // 完成解析
+        this.streamParser.finish(this.handleStreamUpdate);
+        
+        // 记录耗时
+        const duration = Date.now() - startTime;
+        if (this.currentMessage) {
+          this.currentMessage.time = (duration / 1000).toFixed(2);
+        }
+        
+        console.log(`流处理完成，总耗时: ${duration}ms`);
+        
+      } catch (error) {
+        console.error('发送消息失败:', error);
+        if (this.currentMessage) {
+          this.currentMessage.content = '抱歉，发生了错误，请重试。';
+          this.$forceUpdate();
+        }
+      }
+    },
+
+    /**
+     * 消费流数据
+     */
+    async consumeStream(readableStream) {
+      const reader = readableStream.getReader();
+      const decoder = new TextDecoder('utf-8');
+
+      try {
+        // eslint-disable-next-line no-constant-condition
+        while (true) {
+          const { done, value } = await reader.read();
+          if (done) break;
+          
+          const chunk = decoder.decode(value, { stream: true });
+          
+          // 使用解析器处理数据块
+          this.streamParser.processChunk(chunk, this.handleStreamUpdate);
+        }
+      } finally {
+        reader.releaseLock();
+      }
+    },
+
+    /**
+     * 处理流更新回调
+     */
+    handleStreamUpdate(result) {
+      if (!this.currentMessage) return;
+
+      // 更新思考内容
+      if (result.thinking) {
+        this.currentMessage.thinking += result.thinking;
+      }
+
+      // 更新回复内容
+      if (result.content) {
+        this.currentMessage.content += result.content;
+      }
+
+      // 更新状态
+      if (result.status === 'thinking') {
+        this.avaterStatus = 'thinking';
+      } else {
+        this.avaterStatus = 'output';
+      }
+
+      // 触发视图更新
+      this.$forceUpdate();
+    }
+  },
+
+  beforeDestroy() {
+    // 清理解析器
+    if (this.streamParser) {
+      this.streamParser.destroy();
+    }
+  }
+}

package/components/mixins/webSocketMixin.js

@@ -0,0 +1,94 @@
+export default {
+  data() {
+    return {
+      ws: null,
+      wsUrl: 'ws://192.168.8.9:9999/ai_model/ws/voice-stream',
+      isConnected: false,
+      reconnectCount: 0, // 重连尝试次数
+      maxReconnectAttempts: 3 // 最大重连尝试次数
+    }
+  },
+  methods: {
+    initWebSocket() {
+      try {
+        this.ws = new WebSocket(this.wsUrl);
+        this.ws.binaryType = 'arraybuffer';
+
+        this.ws.onopen = async () => {
+          console.log('WebSocket 连接成功');
+          this.isConnected = true;
+          this.initAudio();
+        };
+
+        this.ws.onmessage = (event) => {
+          try {
+            console.log("收到原始消息:", event.data);
+            
+            if (event.data instanceof ArrayBuffer) {
+              console.log("收到二进制音频数据");
+              return;
+            }
+
+            const data = JSON.parse(event.data);
+            console.log("解析后的数据:", data);
+
+            if (data.type === 'config') {
+              console.log('配置信息:', data);
+            } else if (data.code === 0) {
+              this.handleWebSocketMessage(data.data);
+            } else {
+              console.error("服务器返回错误:", data.msg);
+            }
+          } catch (error) {
+            console.error("消息解析错误:", error);
+          }
+        };
+
+        this.ws.onclose = () => {
+          console.log('WebSocket 连接关闭');
+          this.isConnected = false;
+          if (this.isRecording) {
+            this.stopRecording();
+          }
+          this.reconnectCount++;
+          console.log(`已尝试重连 ${this.reconnectCount} 次`);
+          if (this.reconnectCount <= this.maxReconnectAttempts) {
+            setTimeout(() => {
+              console.log('尝试重新建立连接');
+              if (!this.isConnected) {
+                this.initWebSocket();
+              }
+            }, 3000);
+          }
+        };
+
+        this.ws.onerror = (error) => {
+          console.error('WebSocket 错误:', error);
+        };
+      } catch (error) {
+        console.error('WebSocket连接失败:', error);
+      }
+    },
+
+    handleWebSocketMessage(data) {
+      if (data.type === 'detection') {
+        console.log('检测到唤醒词');
+        this.avaterStatus = 'normal';
+      } else if (data.type === 'Collecting') {
+        console.log('状态: 采集中');
+        this.avaterStatus = 'thinking';
+      } else if (data.type === 'command') {
+        console.log('状态: 处理中');
+        this.analyzeAudioCommand(data.category);
+      } else {
+        console.log('状态: 其他');
+      }
+    },
+
+    closeWebSocket() {
+      if (this.ws) {
+        this.ws.close();
+      }
+    }
+  }
+}