byt-lingxiao-ai 0.3.28 → 0.3.30

package/components/AudioSubtitle.vue

@@ -0,0 +1,60 @@
+<template>
+  <div v-if="currentSubtitle" class="subtitle-container">
+    <div class="subtitle-text">
+      <div class="subtitle-left"></div>
+      {{ currentSubtitle }}
+      <div class="subtitle-right"></div>
+    </div>
+  </div>
+</template>
+<script>
+export default {
+  props: {
+    currentSubtitle: {
+      type: String,
+      default: ''
+    }
+  }
+}
+</script>
+<style scoped>
+.subtitle-container {
+  position: fixed;
+  left: 0;
+  bottom: 10px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+}
+.subtitle-left,
+.subtitle-right {
+  width: 25px;
+  height: 16px;
+  background-size: cover;
+  background-position: center;
+  background-repeat: no-repeat;
+}
+.subtitle-left {
+  background-image: url('./assets/right.png');
+}
+.subtitle-right {
+  background-image: url('./assets/left.png');
+}
+.subtitle-text {
+  color: #FFF;
+  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.40);
+  font-family: "Alibaba PuHuiTi";
+  font-size: 24px;
+  font-style: normal;
+  font-weight: 700;
+  line-height: 20px;
+  border-radius: 8px;
+  border: 1px solid #FFF;
+  background: rgba(1, 51, 120, 0.40);
+  padding: 15px 20px;
+  display: flex;
+  align-items: center;
+  gap: 40px;
+}
+</style>

package/components/ChatWindow.vue

@@ -6,13 +6,13 @@
     <!-- 隐藏的音频播放器 -->
     <audio 
       ref="audioPlayer"
+      :src="audioSrc"
       class="hidden-audio"
+      controls
+      preload="auto"
       @timeupdate="onTimeUpdate"
       @ended="onAudioEnded"
-    >
-      <source :src="audioSrc" type="audio/mpeg">
-      您的浏览器不支持音频元素。
-    </audio>
+    />
 
     <!-- 机器人动画 -->
     <ChatRobot 
@@ -24,7 +24,7 @@
     <ChatAvatar 
       v-else
       :status="avaterStatus"
-      @mousedown="startDrag"
+      @mousedown="startDrag($event)"
     />
 
     <!-- 聊天窗口 -->
@@ -40,6 +40,11 @@
       @thinking-click="handleThinkingClick"
       @overlay-click="handleOverlayClick"
     />
+    <!-- 字幕显示区域 -->
+    <AudioSubtitle
+      ref="audioSubtitle"
+      :current-subtitle="currentSubtitle"
+    />
   </div>
 </template>
 
@@ -47,22 +52,35 @@
 import ChatRobot from './ChatRobot.vue'
 import ChatAvatar from './ChatAvatar.vue'
 import ChatWindowDialog from './ChatWindowDialog.vue'
+import AudioSubtitle from './AudioSubtitle.vue'
 import audioMixin from './mixins/audioMixin'
 import webSocketMixin from './mixins/webSocketMixin'
 import messageMixin from './mixins/messageMixin'
-import { AUDIO_URL, TIME_JUMP_POINTS_URL } from './config/index.js'
+import { AUDIO_URL, COLLECTION, AREA_BOARD, ENTERPRISE_APPLICATION, REGIONAL_APPLICATION, TIME_JUMP_POINTS_URL, SUBTITLE_POINTS_URL } from './config/index.js'
 import generateUuid from './utils/Uuid.js'
+import { getCookie } from './utils/Cookie'
+import { BLACKLIST } from './config/blacklist.js'
 
 const SAMPLE_RATE = 16000;
 const FRAME_SIZE = 512;
-const startTime = null
+const ROBOT_STATUS = {
+  ENTERING: 'entering', // 进入中
+  SPEAKING: 'speaking', // 说话中
+  WAITING: 'waiting', // 等待中
+  LEAVING: 'leaving' // 离开中
+}
+const AVATAR_STATUS = {
+  NORMAL: 'normal', // 正常
+  THINKING: 'thinking' // 思考中
+}
 
 export default {
   name: 'ChatWindow',
   components: {
     ChatRobot,
     ChatAvatar,
-    ChatWindowDialog
+    ChatWindowDialog,
+    AudioSubtitle
   },
   mixins: [audioMixin, webSocketMixin, messageMixin],
   props: {
@@ -73,30 +91,37 @@ export default {
   },
   data() {
     return {
-      chatId: generateUuid(),
-      audioSrc: AUDIO_URL,
-      inputMessage: '',
-      visible: false,
-      messages: [],
-      messageLoading: true,
-      robotStatus: 'leaving',
-      avaterStatus: 'normal',
-      currentMessage: null,
-      thinkStatus: true,
-      jumpedTimePoints: new Set(),
-      SAMPLE_RATE,
-      FRAME_SIZE,
-      startTime,  // 检查性能使用
+      lastTimeUpdate: null, // 上次更新时间
+      chatId: generateUuid(), // 唯一标识当前聊天会话
+      audioSrc: AUDIO_URL, // 音频文件URL
+      inputMessage: '', // 当前输入的消息
+      visible: false, // 是否显示聊天窗口
+      messages: [], // 聊天消息数组
+      messageLoading: true, // 是否正在加载消息
+      robotStatus: 'leaving', // 机器人状态  entering: 进入中, waiting: 等待中, speaking: 说话中, leaving: 离开中
+      avaterStatus: 'normal', // 头像状态  normal: 正常, thinking: 思考中
+      currentMessage: null, // 当前正在处理的消息
+      thinkStatus: true, // 是否思考中
+      jumpedTimePoints: new Set(), // 已跳转的时间点集合
+      SAMPLE_RATE, // 采样率 16000Hz
+      FRAME_SIZE, // 帧大小 512
       dragThreshold: 5, // 拖拽阈值
-      isDragging: false,
-      dragStartX: 0,
-      dragStartY: 0,
-      currentX: 10, 
-      currentY: 20, 
-      initialX: 10, 
-      initialY: 20,
-      hasMoved: false,
-      timeJumpPoints: []
+      isDragging: false, // 是否正在拖拽
+      dragStartX: 0, // 拖拽开始时的X坐标
+      dragStartY: 0, // 拖拽开始时的Y坐标
+      currentX: 10, // 当前X坐标
+      currentY: 20, // 当前Y坐标
+      initialX: 10, // 初始X坐标
+      initialY: 20, // 初始Y坐标
+      hasMoved: false, // 是否已移动
+      timeJumpPoints: null, // 跳转
+      subTitlePoints: null, // 字幕
+      currentJumpPoints: [], // 当前跳转点数组
+      currentSubtitles: [], // 当前字幕数组
+      currentSubtitle: '', // 当前字幕,
+      jumpIndex: 0, // 当前跳转索引
+      subtitleIndex: 0, // 当前字幕索引
+      isTourRunning: false, // 是否正在导览
     }
   },
   computed: {
@@ -114,13 +139,16 @@ export default {
       };
     }
   },
-  mounted() {
+  async mounted() {
     this.initWebSocket()
     if (this.appendToBody) {
       this.appendToBodyHandler()
     }
 
-    this.fetchTimeJumpPoints()
+    await Promise.all([
+      this.fetchTimeJumpPoints(),
+      this.fetchSubTitlePoints()
+    ])
 
     this.$nextTick(() => {
       const chatEl = this.$el;
@@ -141,17 +169,30 @@ export default {
     document.removeEventListener('mouseup', this.stopDrag)
   },
   methods: {
+    initGuide() {
+      this.jumpIndex = 0
+      this.subtitleIndex = 0
+
+      this.jumpedTimePoints.clear()
+
+      this.setRobotStatus(ROBOT_STATUS.LEAVING)
+      this.setAvatarStatus(AVATAR_STATUS.NORMAL)
+    },
+    setRobotStatus(status) {
+      this.robotStatus = status || ROBOT_STATUS.LEAVING
+    },
+    setAvatarStatus(status) {
+      this.avaterStatus = status || AVATAR_STATUS.NORMAL
+    },
     toggleWindow() {
-      if (this.avaterStatus === 'thinking') return;
       this.visible = !this.visible
       
       if (this.visible) {
         this.currentX = this.initialX
         this.currentY = this.initialY
       }
-   },
-    startDrag() {
-      console.log('startDrag')
+    },
+    startDrag(event) {
       if (this.robotStatus !== 'leaving' && this.visible) return;
 
       this.isDragging = true;
@@ -208,9 +249,18 @@ export default {
       document.removeEventListener('mousemove', this.onDrag);
       document.removeEventListener('mouseup', this.stopDrag);
       if (!this.hasMoved) {
-        this.toggleWindow()
+        this.handleClick()
       }
     },
+    handleClick() {
+      if (this.avaterStatus === 'thinking') return
+      if (this.isInBlacklist()) return
+      this.toggleWindow()
+    },
+    isInBlacklist() {
+      const tenantId = getCookie('bonyear-tenantId')
+      return tenantId && BLACKLIST.includes(tenantId)
+    },
     handleThinkingClick() {
       this.thinkStatus = !this.thinkStatus
     },
@@ -226,49 +276,292 @@ export default {
     },
     async fetchTimeJumpPoints() {
       try {
-        const res = await fetch(TIME_JUMP_POINTS_URL)
+        const res = await fetch(TIME_JUMP_POINTS_URL + '?timestamp=' + Date.now())
         const data = await res.json()
-        this.timeJumpPoints = Array.isArray(data) ? data : []
-        console.log('时间跳转点加载完成:', this.timeJumpPoints)
+        this.timeJumpPoints = data
       } catch (err) {
         console.error('获取时间跳转点失败:', err)
-        this.timeJumpPoints = []
+        this.timeJumpPoints = null
+      }
+    },
+    async fetchSubTitlePoints() {
+      try {
+        const res = await fetch(SUBTITLE_POINTS_URL + '?timestamp=' + Date.now())
+        const data = await res.json()
+        this.subTitlePoints = data
+      } catch (err) {
+        console.error('获取字幕跳转点失败')
+        this.subTitlePoints = null
+      }
+    },
+    normalizeCommand(cmd = '') {
+      return cmd
+        .trim() // 去掉 \n \r 空格
+        .replace(/[\u200B-\u200D]/g,'') // 去零宽字符
+        .replace(/[。！？，、,.!?]/g, '') // 去标点
+    },
+    // 分析音频语音指令
+    analyzeVoiceCommand(name) {
+      console.log('===== analyzeVoiceCommand =====')
+
+      console.log('typeof name:', typeof name)
+      console.log('name === "结束导览":', name === '结束导览')
+      console.log('Object.prototype.toString:', Object.prototype.toString.call(name))
+
+      const normalized = this.normalizeCommand(name)
+      const commandMap = {
+        '开始导览': this.startTheTour,
+        '开始区域看板导览': this.startAreaBoardTour,
+        '开始企业应用导览': this.startEnterpriseApplicationTour,
+        '开始区域应用导览': this.startRegionalApplicationTour,
+        '暂停导览': this.pauseTheTour,
+        '继续导览': this.resumeTheTour,
+        '结束导览': this.offTheTour,
+        '返回首页': this.returnToHome,
+        '未知指令': this.offTheTour,
+      }
+
+      const handler = commandMap[normalized]
+
+      if (!handler) {
+        console.warn('未定义的指令:', name)
+        return
+      }
+
+      handler()
+    },
+    // 启动导览
+    async onTheTour() {
+      if (this.isTourRunning) return
+
+      this.isTourRunning = true
+
+      const audio = this.$refs.audioPlayer
+      if (!audio) return
+
+      this.setRobotStatus(ROBOT_STATUS.ENTERING)
+      await new Promise(resolve => setTimeout(resolve, 3000))
+
+      this.setRobotStatus(ROBOT_STATUS.SPEAKING)
+      try {
+        await audio.play()
+      } catch (e) {
+        console.error('播放音频失败:', e)
+      } finally {
+        this.isTourRunning = false
+      }
+    },
+    // 暂停导览
+    pauseTheTour() {
+      this.pause()
+      this.setRobotStatus(ROBOT_STATUS.WAITING)
+    },
+    // 继续导览
+    resumeTheTour() {
+      this.play()
+      this.setRobotStatus(ROBOT_STATUS.SPEAKING)
+    },
+    // 结束导览
+    offTheTour() {
+      this.stop()
+      this.currentSubtitle = ''
+      this.setRobotStatus(ROBOT_STATUS.LEAVING)
+      this.setAvatarStatus(AVATAR_STATUS.NORMAL)
+    },
+    // 返回首页
+    returnToHome() {
+      this.setRobotStatus(ROBOT_STATUS.LEAVING)
+      this.setAvatarStatus(AVATAR_STATUS.NORMAL)
+      this.$appOptions.router.push({ path: '/' })
+    },
+    initJumpPoints(name) {
+      // 初始化跳转点
+      if (name) {
+        this.currentJumpPoints = this.timeJumpPoints[name] || []
+        console.log('currentJumpPoints:', this.currentJumpPoints)
+      } else {
+        this.currentJumpPoints = this.timeJumpPoints
+      }
+    },
+    initSubtitles(name) {
+      console.log('name:', name)
+      if (name) {
+        this.currentSubtitles = this.subTitlePoints[name] || []
+      } else {
+        this.currentSubtitles = this.subTitlePoints
+      }
+    },
+    // 开始导览
+    async startTheTour() {
+      await this.setAudio(COLLECTION) // 重置音频源
+
+      // 重置指针
+      this.initGuide()
+      // 重置跳转点指针
+      this.initJumpPoints('开始导览')
+      // 重置字幕指针
+      this.initSubtitles('开始导览')
+
+      
+      await this.onTheTour()
+    },
+    // 开始区域看板导览
+    async startAreaBoardTour() {
+      // 重置audio
+      await this.setAudio(AREA_BOARD)
+      
+      // 重置指针
+      this.initGuide()
+      // 重置跳转点指针
+      this.initJumpPoints('开始区域看板导览')
+      // 重置字幕指针
+      this.initSubtitles('开始区域看板导览')
+
+      await this.onTheTour()
+    },
+    // 开始企业应用导览
+    async startEnterpriseApplicationTour() {
+      await this.setAudio(ENTERPRISE_APPLICATION)
+
+      // 重置指针
+      this.initGuide()
+      // 重置跳转点指针
+      this.initJumpPoints('开始企业应用导览')
+      // 重置字幕指针
+      this.initSubtitles('开始企业应用导览')
+      
+      await this.onTheTour()
+    },
+    // 开始区域应用导览
+    async startRegionalApplicationTour() {
+      await this.setAudio(REGIONAL_APPLICATION)
+
+      // 重置指针
+      this.initGuide()
+      // 重置跳转点指针
+      this.initJumpPoints('开始区域应用导览')
+      // 重置字幕指针
+      this.initSubtitles('开始区域应用导览')
+      
+      await this.onTheTour()
+    },
+    // 分析音频命令
+    analyzeAudioCommand(command) {
+      console.log('分析音频命令:', command);
+
+      if (command === 'C5') {
+        this.setRobotStatus(ROBOT_STATUS.ENTERING);
+        setTimeout(() => {
+          this.setRobotStatus(ROBOT_STATUS.SPEAKING);
+          this.play();
+        }, 3000);
+      }
+
+      if (command === 'C8') {
+        this.setRobotStatus(ROBOT_STATUS.SPEAKING);
+        this.play();
+      }
+
+      if (command === 'C7') {
+        this.setRobotStatus(ROBOT_STATUS.WAITING);
+        this.pause();
+      }
+
+      if (command === 'C6') {
+        this.setRobotStatus(ROBOT_STATUS.LEAVING);
+        this.stop();
+      }
+    },
+    // 处理点击跳转时间
+    handleJumpPoint(currentTime) {
+      console.log('jumpIndex:', this.jumpIndex)
+      const point = this.currentJumpPoints[this.jumpIndex]
+
+      if (!point) return
+      console.log('currentTime:', currentTime)
+      console.log('point.time:', point.time)
+
+      if (currentTime >= point.time && !this.jumpedTimePoints.has(point.time)) {
+
+        this.jumpedTimePoints.add(point.time)
+        this.jumpIndex++
+        
+        this.$appOptions.store.dispatch('tags/addTagview', {
+          path: point.url,
+          fullPath: point.url,
+          label: point.title,
+          name: point.title,
+          meta: { title: point.title },
+          query: {},
+          params: {}
+        })
+
+        this.$appOptions.router.push({ path: point.url })
+      }
+    },
+    // 处理播放字幕
+    handlePlaySubtitles(currentTime){
+      const subtitle = this.currentSubtitles[this.subtitleIndex]
+      
+      if (!subtitle) return
+
+      if (currentTime < subtitle.start) return
+
+      // 正在播放当前字幕
+      if (currentTime >= subtitle.start && currentTime <= subtitle.end) {
+        if (this.currentSubtitle !== subtitle.text) {
+          this.currentSubtitle = subtitle.text
+        }
+        return
+      }
+
+      // 超过当前字幕，推进游标
+      if (currentTime > subtitle.end) {
+        this.subtitleIndex++
+        this.currentSubtitle = ''
       }
     },
+    async setAudio(src) {
+      return new Promise((resolve, reject) => {
+        const audio = this.$refs.audioPlayer
+
+        if (!audio) return reject('未找到音频元素')
+
+        audio.pause()
+        audio.currentTime = 0
+
+        // ✅ 用响应式数据
+        this.audioSrc = src
+
+        this.$nextTick(() => {
+          audio.load()
+
+          const onCanPlay = () => {
+            audio.removeEventListener('canplay', onCanPlay)
+            resolve()
+          }
+
+          audio.addEventListener('canplay', onCanPlay)
+        })
+      })
+    },
     // 音频时间更新处理
     onTimeUpdate() {
+      const now = performance.now()
+
+      if (this.lastTimeUpdate && now - this.lastTimeUpdate < 200) return
+      this.lastTimeUpdate = now
+
       const audio = this.$refs.audioPlayer
       const currentTime = audio.currentTime
 
-      if (!this.timeJumpPoints.length) return
-
-      this.timeJumpPoints.forEach(point => {
-        if (
-          currentTime >= point.time &&
-          currentTime < point.time + 1 &&
-          !this.jumpedTimePoints.has(point.time)
-        ) {
-          console.log('触发跳转:', point.url)
-
-          this.jumpedTimePoints.add(point.time)
-
-          this.$appOptions.store.dispatch('tags/addTagview', {
-            path: point.url,
-            fullPath: point.url,
-            label: point.title,
-            name: point.title,
-            meta: { title: point.title },
-            query: {},
-            params: {}
-          })
-
-          this.$appOptions.router.push({ path: point.url })
-        }
-      })
+      this.handleJumpPoint(currentTime)
+      this.handlePlaySubtitles(currentTime)
     },
     onAudioEnded() {
-      this.robotStatus = 'leaving'
-      this.avaterStatus = 'normal'
+      this.currentSubtitle = ''
+      this.setRobotStatus(ROBOT_STATUS.LEAVING)
+      this.setAvatarStatus(AVATAR_STATUS.NORMAL)
       this.jumpedTimePoints.clear()
     }
   }
@@ -282,7 +575,6 @@ export default {
   opacity: 0;
   pointer-events: none;
 }
-
 .chat {
   position: fixed;
   bottom: 20px;

package/components/config/blacklist.js

@@ -0,0 +1,3 @@
+export const BLACKLIST = [
+  '81010400', // 南方水泥
+]

package/components/config/index.js

@@ -1,6 +1,15 @@
-const baseUrl = window.location.host;
+// const baseUrl = window.location.host;
 
 export const API_URL = `/lingxiao-byt/api/v1/mcp/ask`; // 对话
-export const WS_URL = `ws://${baseUrl}/audio/ws/`;  // 语音
-export const AUDIO_URL = '/minio/lingxiaoai/byt.mp3'; // 导览
+// export const WS_URL = `ws://${baseUrl}/audio/ws/`;  // 语音
+export const WS_URL = `ws://220.189.237.146:8312/audio/ws/`;  // 测试语音
+
+export const AUDIO_URL = '/minio/lingxiaoai/byt.mp3'; // 导览 铜梁
+
+export const COLLECTION = '/minio/lingxiaoai/collection.mp3'
+export const AREA_BOARD = '/minio/lingxiaoai/area_board.mp3'; // 区域看板
+export const ENTERPRISE_APPLICATION = '/minio/lingxiaoai/enterprise_application.mp3'; // 企业应用
+export const REGIONAL_APPLICATION = '/minio/lingxiaoai/regional_application.mp3'; // 区域应用
+
 export const TIME_JUMP_POINTS_URL = '/minio/lingxiaoai/timeJumpPoints.json'; // 语音url跳转节点
+export const SUBTITLE_POINTS_URL = '/minio/lingxiaoai/subTitlePoints.json'; // 字幕跳转节点