gengx

src/components/animation/inputing.vue

@@ -12,7 +12,7 @@
       <div />
     </div>
     <p class="text">
-      等待中
+      AI等待指令中
     </p>
   </div>
 </template>

src/components/animation/lodingSpin.vue

@@ -1,14 +1,28 @@
 <template>
-  <div class="spin">
+ <div style="position: relative;">
-		<div class="loader">
+	  <div class="spin">
-    <div class="outer" />
+			<div class="loader">
-    <div class="middle" />
+				<div class="outer" />
-    <div class="inner" />
+				<div class="middle" />
-  </div>
+				<div class="inner" />
-	</div>
+			</div>
+		</div>
+		<p class="text">
+				思考中
+		</p>
+ </div>
 </template>
 
 <style scoped>
+.text{
+  display: block;
+  width: 100%;
+  font-size: 1.5em;
+  text-align: center;
+  position: absolute;
+  left: 0;
+  bottom: -2em;
+}
 .spin{
 	display: flex;
 	justify-content: center;

src/components/animation/recording.vue

@@ -20,7 +20,7 @@
   text-align: center;
   position: absolute;
   left: 0;
-  bottom: -2em;
+  bottom: -6em;
 }
 .div {
   display: flex;

src/typings/chat.d.ts

@@ -3,6 +3,7 @@ declare namespace Chat {
 	interface Chat {
 		dateTime: string
 		text: string
+		tts?: string
 		inversion?: boolean
 		error?: boolean
 		loading?: boolean

src/views/chat/components/Message/index.vue

@@ -1,5 +1,5 @@
 <script setup lang='ts'>
-import { computed, reactive, ref, watch } from 'vue'
+import { computed, reactive, ref, watch, toRef, nextTick } from 'vue'
 import { NDropdown, useMessage } from 'naive-ui'
 import AvatarComponent from './Avatar.vue'
 import TextComponent from './Text.vue'
@@ -12,7 +12,7 @@ import { copyToClip } from '@/utils/copy'
 interface Props {
   dateTime?: string
   text?: string
-  mp3?: Array<any>
+	tts?: string
   inversion?: boolean
   error?: boolean
   loading?: boolean
@@ -92,11 +92,43 @@ async function handleCopy() {
     message.error('复制失败')
   }
 }
+
+import axios from "axios"
+
+function loadTTS(){
+	let tts = props.tts?JSON.parse(props.tts):[]
+	for(let i=0;i<tts.length;i++){
+		axios.post('https://chat.lihaink.cn/index/tts',{data: '你好'})
+      .then(response => {
+        // 请求成功处理逻辑
+        console.log('请求成功',response.data);
+				const a = new Audio(response.data.mp3)
+			  a.addEventListener('ended', () => {
+			    onAudioEnd()
+			  })
+			  audioElements.push(a)
+				if (i == 0)
+					playAudio(i)
+				})
+      .catch(error => {
+        // 请求失败处理逻辑
+        console.error('请求失败',error);
+      });
+	}
+}
+
+// 监听到文本数据改变
+watch(()=>props.tts, async (n:any, o:any)=>{
+	loadTTS();
+},{immediate:true,deep:true})
+
+console.log( '组件渲染 ', props.text, props.tts);
+
 const playStatus = ref('end')
 let playing = 0
 let sok = false
 async function radioPlay() {
-  console.log('播放', props.mp3)
+  return console.log('播放', props.tts[0])
   audioElements.length = 0
 	emit('changeNowStatus', 'loding')
   const socket = new WebSocket('wss://chat.lihaink.cn/zhanti/tts')
@@ -128,7 +160,6 @@ async function radioPlay() {
   // }))
   socket.send(JSON.stringify({
     data: props.text,
-    data: props.text,
   }))
   playStatus.value = 'playing'
   let i = 0

src/views/chat/index.vue

@@ -108,7 +108,7 @@ const conversationList = computed(() =>
 const prompt = ref<string>('')
 const loading = ref<boolean>(false)
 const inputRef = ref<Ref | null>(null)
-const nowStatus = ref('record') // 当前系统状态, input等待, loding加载, record录音, start开始
+const nowStatus = ref('input') // 当前系统状态, input等待, loding加载, record录音,
 const nowStart = ref(true) // 当前是否有消息, 有才显示聊天记录
 
 // 添加PromptStore
@@ -166,6 +166,7 @@ async function onConversation() {
   addChat(+uuid, {
     dateTime: new Date().toLocaleString(),
     text: message,
+		tts: '',
     inversion: true,
     error: false,
     conversationOptions: null,
@@ -187,6 +188,7 @@ async function onConversation() {
   addChat(+uuid, {
     dateTime: new Date().toLocaleString(),
     text: '思考中',
+		tts: '',
     loading: true,
     inversion: false,
     error: false,
@@ -197,6 +199,7 @@ async function onConversation() {
 
   try {
     let lastText = ''
+		const tts:any = [];
     console.log('发送消息', message)
 
     const fetchChatAPIOnce = async () => {
@@ -218,6 +221,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;
           const loading = false
           nowStart.value = false
           updateChat(
@@ -227,6 +232,7 @@ async function onConversation() {
               dateTime: new Date().toLocaleString(),
               text: lastText,
               inversion: false,
+							tts: JSON.stringify(tts),
               error: false,
               loading,
               conversationOptions: { conversationId: msg.header.sid, parentMessageId: msg.header.sid },
@@ -618,9 +624,9 @@ window.addEventListener('test', (e) => {
     prompt.value = window.winText
 })
 
-// setTimeout(() => {
+setTimeout(() => {
-//   nowStart.value = false
+  nowStart.value = false
-// }, 800)
+}, 800)
 </script>
 
 <template>
@@ -678,6 +684,7 @@ window.addEventListener('test', (e) => {
                     :key="index"
                     :date-time="item.dateTime"
                     :text="item.text"
+										:tts="item.tts"
                     :inversion="item.inversion"
                     :error="item.error"
                     :loading="item.loading"

vite.config.ts

@@ -41,6 +41,11 @@ export default defineConfig((env) => {
           changeOrigin: true, // 允许跨域
           rewrite: path => path.replace('/api/', '/'),
         },
+				// 'http://chat.lihaink.cn/zhanti/tts': {
+        //   target: 'http://chat.lihaink.cn/zhanti/tts',
+        //   changeOrigin: true, // 允许跨域
+        //   rewrite: path => path.replace('http://chat.lihaink.cn/zhanti/tts', '/'),
+        // },
       },
     },
     build: {