This commit is contained in:
shengchanzhe
parent
8ab770305c
commit
d50341711e
|
|
@ -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>
|
||||
|
|
@ -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
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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"
|
||||
|
|
|
|||
Loading…
Reference in New Issue