From d50341711e51451185a6581ad47bb67caf265cde Mon Sep 17 00:00:00 2001
From: shengchanzhe <179998674@qq.com>
Date: Sat, 14 Oct 2023 12:00:10 +0800
Subject: [PATCH] =?UTF-8?q?=E6=9B=B4=E6=96=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/animation/playing.vue        |  57 +++++++++
 src/views/chat/components/Message/index.vue | 121 ++++++++++++--------
 src/views/chat/index.vue                    |  41 +++----
 3 files changed, 149 insertions(+), 70 deletions(-)
 create mode 100644 src/components/animation/playing.vue

diff --git a/src/components/animation/playing.vue b/src/components/animation/playing.vue
new file mode 100644
index 0000000..493e93a
--- /dev/null
+++ b/src/components/animation/playing.vue
@@ -0,0 +1,57 @@
+<template>
+  <div style="position: relative;">
+    <div class="div" />
+    <p class="text">
+      AI播放中
+    </p>
+  </div>
+</template>
+
+<style scoped>
+.text{
+  display: block;
+  width: 100%;
+  font-size: 1.5em;
+  text-align: center;
+  position: absolute;
+  left: 0;
+  bottom: -6em;
+}
+
+.div {
+  display: flex;
+  width: 3.5em;
+  height: 3.5em;
+  border: 3px solid transparent;
+  border-top-color: #3cefff;
+  border-bottom-color: #3cefff;
+  border-radius: 50%;
+  animation: spin 1.5s linear infinite;
+}
+
+div:before {
+  content: '';
+  display: block;
+  margin: auto;
+  width: 0.75em;
+  height: 0.75em;
+  border: 3px solid #3cefff;
+  border-radius: 50%;
+  animation: pulse 1s alternate ease-in-out infinite;
+}
+
+@keyframes spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+@keyframes pulse {
+  from {
+    transform: scale(0.5);
+  }
+  to {
+    transform: scale(1);
+  }
+}
+</style>
diff --git a/src/views/chat/components/Message/index.vue b/src/views/chat/components/Message/index.vue
index 7187d68..efc6793 100644
--- a/src/views/chat/components/Message/index.vue
+++ b/src/views/chat/components/Message/index.vue
@@ -1,6 +1,7 @@
 <script setup lang='ts'>
-import { computed, reactive, ref, watch, toRef, nextTick } from 'vue'
+import { computed, reactive, ref, watch } from 'vue'
 import { NDropdown, useMessage } from 'naive-ui'
+import axios from 'axios'
 import AvatarComponent from './Avatar.vue'
 import TextComponent from './Text.vue'
 import { SvgIcon } from '@/components/common'
@@ -12,7 +13,7 @@ import { copyToClip } from '@/utils/copy'
 interface Props {
   dateTime?: string
   text?: string
-	tts?: string
+  tts?: string
   inversion?: boolean
   error?: boolean
   loading?: boolean
@@ -93,47 +94,70 @@ async function handleCopy() {
   }
 }
 
-import axios from "axios"
-
-const http = (text: any)=>{
-	return new Promise((resolve, reject)=>{
-		axios.post('https://chat.lihaink.cn/index/tts',{data: text})
-      .then(response => {
+const http = (text: any) => {
+  return new Promise((resolve, reject) => {
+    axios.post('https://chat.lihaink.cn/index/tts', { data: text })
+      .then((response) => {
         // 请求成功处理逻辑
         // console.log('请求成功',response.data);
-				resolve(response.data)
-				})
-      .catch(error => {
+        resolve(response.data)
+      })
+      .catch((error) => {
         // 请求失败处理逻辑
-        console.error('请求失败',error);
-				reject(error)
-      });
-	})
+        console.error('请求失败', error)
+        reject(error)
+      })
+  })
 }
-let ttsList = [];
-async function loadTTS(){
-	let tts = props.tts?JSON.parse(props.tts):[]
-	if(tts.length>ttsList.length){
-		for(let i=ttsList.length;i<tts.length;i++){
-			let res = await http(tts[i])
-			const a = new Audio(res.data.mp3)
-			a.addEventListener('ended', () => {
-				onAudioEnd()
-			})
-			audioElements.push(a)
-			if (ttsList.length == 0)
-				playAudio()
-		}
-		ttsList = JSON.parse(JSON.stringify(tts));
-	}
+
+// 创建音频对象的数组
+const audioElements = reactive([])
+
+let ttslength = 0
+let ttsLoadFlag = 0
+let lengthFlag = 0
+let tts = props.tts ? JSON.parse(props.tts) : []
+async function loadTTS() {
+  lengthFlag = tts.length
+  if (tts.length > ttslength && audioElements.length == ttslength && ttsLoadFlag == 0) {
+    for (let i = ttslength; i < lengthFlag; i++) {
+      console.log(`加载了${i}次`, tts[i])
+      ttsLoadFlag = 1
+      if (tts[i] == '')
+        break
+      try {
+        const res = await http(tts[i])
+        const a = new Audio(res.data.mp3)
+        a.addEventListener('ended', () => {
+          onAudioEnd()
+        })
+        audioElements.push(a)
+        if (ttslength == 0)
+          playAudio()
+        if (i == tts.length - 1) {
+          ttslength = tts.length
+          ttsLoadFlag = 0
+        }
+      }
+      catch (error) {
+        console.log(error)
+      }
+    }
+  }
 }
 
 // 监听到文本数据改变
-watch(()=>props.tts, async (n:any, o:any)=>{
-	loadTTS();
-},{immediate:true,deep:true})
+watch(() => props.tts, async (n: any, o: any) => {
+  if (props.tts == '') {
+    for (let i = 0; i < audioElements.length; i++)
+      audioElements[i].pause()
+    audioElements.length = 0
+  }
+  tts = props.tts ? JSON.parse(props.tts) : []
+  loadTTS()
+}, { immediate: true, deep: true })
 
-console.log( '组件渲染 ', props.text, props.tts);
+console.log('组件渲染 ', props.text, props.tts)
 
 const playStatus = ref('end')
 let playing = 0
@@ -141,7 +165,7 @@ let sok = false
 async function radioPlay() {
   return console.log('播放', props.tts[0])
   audioElements.length = 0
-	emit('changeNowStatus', 'loding')
+  emit('changeNowStatus', 'loding')
   const socket = new WebSocket('wss://chat.lihaink.cn/zhanti/tts')
   sok = true
 
@@ -158,12 +182,11 @@ async function radioPlay() {
 
   await promise()
 
-
   // 监听WebSocket关闭事件
   socket.onclose = (event: any) => {
     sok = false
     console.log('连接已关闭: ', event, sok)
-    console.log('sok状态', sok);
+    console.log('sok状态', sok)
   }
 
   // socket.send(JSON.stringify({
@@ -178,9 +201,9 @@ async function radioPlay() {
 	 socket.onmessage = (event: any) => {
     const msg = JSON.parse(event.data)
     console.log(i, msg.mp3)
-		if(msg.key=='false'){
-			return socket.close();
-		}
+    if (msg.key == 'false')
+      return socket.close()
+
     const a = new Audio(msg.mp3)
 			  a.addEventListener('ended', () => {
 			    onAudioEnd()
@@ -210,20 +233,18 @@ const onAudioEnd = (index: any) => {
   if (playing < audioElements.length) {
     playFlag = true
     audioElements[playing].play()
-		emit('changeNowStatus', 'playing')
+    emit('changeNowStatus', 'playing')
   }
   else {
-		playStatus.value = 'end';
-		emit('changeNowStatus', 'input')
-	}
+    playStatus.value = 'end'
+    emit('changeNowStatus', 'input')
+  }
 }
-// 创建音频对象的数组
-const audioElements = reactive([])
 // 播放音频
 const playAudio = (playIndex: any) => {
   // for (let i = 0; i < audioElements.length; i++)
   audioElements[0].play()
-	emit('changeNowStatus', 'playing')
+  emit('changeNowStatus', 'playing')
 }
 
 watch(() => audioElements.length, (newVal, oldVal) => {
@@ -240,13 +261,13 @@ let pauseIndex = -1
 const pauseAudio = () => {
   pauseIndex = playing + 0
   playStatus.value = 'pause'
-	emit('changeNowStatus', 'input')
+  emit('changeNowStatus', 'input')
   for (let i = 0; i < audioElements.length; i++)
     audioElements[i].pause()
 }
 const noPauseAudio = () => {
   playStatus.value = 'playing'
-	emit('changeNowStatus', 'playing')
+  emit('changeNowStatus', 'playing')
   audioElements[pauseIndex].play()
   pauseIndex = -1
 }
diff --git a/src/views/chat/index.vue b/src/views/chat/index.vue
index 0df7f19..fa09ad6 100644
--- a/src/views/chat/index.vue
+++ b/src/views/chat/index.vue
@@ -25,6 +25,7 @@ import indexBG from '@/components/animation/indexBG.vue'
 import recording from '@/components/animation/recording.vue'
 import inputing from '@/components/animation/inputing.vue'
 import lodingSpin from '@/components/animation/lodingSpin.vue'
+import playing from '@/components/animation/playing.vue'
 
 // import IatRecorder from '@/utils/larRcorder.js'
 
@@ -108,7 +109,7 @@ const conversationList = computed(() =>
 const prompt = ref<string>('')
 const loading = ref<boolean>(false)
 const inputRef = ref<Ref | null>(null)
-const nowStatus = ref('input') // 当前系统状态, input等待, loding加载, record录音,
+const nowStatus = ref('playing') // 当前系统状态, input等待, loding加载, record录音,playing播放
 const nowStart = ref(true) // 当前是否有消息, 有才显示聊天记录
 
 // 添加PromptStore
@@ -166,7 +167,7 @@ async function onConversation() {
   addChat(+uuid, {
     dateTime: new Date().toLocaleString(),
     text: message,
-		tts: '',
+    tts: '',
     inversion: true,
     error: false,
     conversationOptions: null,
@@ -188,7 +189,7 @@ async function onConversation() {
   addChat(+uuid, {
     dateTime: new Date().toLocaleString(),
     text: '思考中',
-		tts: '',
+    tts: '',
     loading: true,
     inversion: false,
     error: false,
@@ -197,27 +198,26 @@ async function onConversation() {
   })
   scrollToBottom()
 
-	let infoList = JSON.parse(JSON.stringify(dataSources.value));
-	infoList = infoList.map((item:any, index:any)=>{
-		return {
-			role: index%2==0?'user':'assistant',
-			content: item.text
-		}
-	})
-
-	console.log(dataSources.value);
+  let infoList = JSON.parse(JSON.stringify(dataSources.value))
+  infoList = infoList.map((item: any, index: any) => {
+    return {
+      role: index % 2 == 0 ? 'user' : 'assistant',
+      content: item.text,
+    }
+  })
 
+  console.log(dataSources.value)
 
   try {
     let lastText = ''
-		const tts:any = [];
+    const tts: any = []
     console.log('发送消息', message)
 
     const fetchChatAPIOnce = async () => {
       socket.send(JSON.stringify({
         tts: 1,
         data: [
-					...infoList,
+          ...infoList,
           {
             role: 'user',
             content: message,
@@ -234,8 +234,8 @@ async function onConversation() {
           // console.log(`收到消息: `, msg.payload.choices.text[0].content);
           // console.log(`当前消息: `, dataSources.value[dataSources.value.length - 1].text);
           lastText += msg.payload.choices.text[0].content
-					console.log('返回的tts:', msg.payload.choices.tts_text);
-					msg.payload.choices.tts_text != '' ? tts.push(msg.payload.choices.tts_text): null;
+          console.log('返回的tts:', msg.payload.choices.tts_text)
+          msg.payload.choices.tts_text != '' ? tts.push(msg.payload.choices.tts_text) : null
           const loading = false
           nowStart.value = false
           updateChat(
@@ -245,14 +245,14 @@ async function onConversation() {
               dateTime: new Date().toLocaleString(),
               text: lastText,
               inversion: false,
-							tts: JSON.stringify(tts),
+              tts: JSON.stringify(tts),
               error: false,
               loading,
               conversationOptions: { conversationId: msg.header.sid, parentMessageId: msg.header.sid },
               requestOptions: { prompt: message, options: { ...options } },
             },
           )
-					scrollToBottomIfAtBottom()
+          scrollToBottomIfAtBottom()
           // 关闭连接
           if (msg.header.code != 0 || (event.data && msg.header.status == 2)) {
             nowStatus.value = 'input'
@@ -613,7 +613,7 @@ const changeNowStatus = (e: any) => {
   console.log('收到数据', e)
   if (e != nowStatus.value) {
     switch (e) {
-      case 'playing': nowStatus.value = 'record'; break
+      case 'playing': nowStatus.value = 'playing'; break
       case 'loding': nowStatus.value = 'loding'; break
       default: nowStatus.value = 'input'; break
     }
@@ -651,6 +651,7 @@ setTimeout(() => {
         <recording v-else-if="nowStatus == 'record'" key="record" />
         <!-- <loding v-else-if="nowStatus=='loding'" key="loding"></loding> -->
         <lodingSpin v-else-if="nowStatus == 'loding'" key="loding" />
+        <playing v-else-if="nowStatus == 'playing'" key="playing" />
         <!-- <lodingCir v-else-if="nowStatus=='loding'" key="loding"></lodingCir> -->
       </transition>
     </indexBG>
@@ -698,7 +699,7 @@ setTimeout(() => {
                     :key="index"
                     :date-time="item.dateTime"
                     :text="item.text"
-										:tts="item.tts"
+                    :tts="item.tts"
                     :inversion="item.inversion"
                     :error="item.error"
                     :loading="item.loading"