This commit is contained in:
parent
d0b2815367
commit
d081e0957c
|
|
@ -0,0 +1,24 @@
|
|||
<script>
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="box">
|
||||
<slot></slot>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.box {
|
||||
width: 400px;
|
||||
height: 300px;
|
||||
border-radius: 20px;
|
||||
/* background-color: rgba(97, 161, 140, 0.3); */
|
||||
/* position: fixed;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%); */
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -14,8 +14,8 @@
|
|||
|
||||
<style scoped>
|
||||
.dots {
|
||||
width: 3em;
|
||||
height: 3em;
|
||||
width: 20em;
|
||||
height: 20em;
|
||||
display: grid;
|
||||
grid-template-rows: repeat(3, 1fr);
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
|
|
@ -24,8 +24,8 @@
|
|||
}
|
||||
|
||||
.dots > div {
|
||||
width: 0.5em;
|
||||
height: 0.5em;
|
||||
width: 4em;
|
||||
height: 4em;
|
||||
background-color: #3cefff;
|
||||
border-radius: 50%;
|
||||
animation: fade 1.5s alternate ease-in-out infinite;
|
||||
|
|
|
|||
|
|
@ -5,9 +5,9 @@
|
|||
<style scoped>
|
||||
div {
|
||||
position: relative;
|
||||
width: 2em;
|
||||
height: 2em;
|
||||
border: 3px solid #3cefff;
|
||||
width: 20em;
|
||||
height: 20em;
|
||||
border: 2em solid #3cefff;
|
||||
overflow: hidden;
|
||||
animation: spin 3s ease infinite;
|
||||
}
|
||||
|
|
@ -17,8 +17,8 @@ div::before {
|
|||
position: absolute;
|
||||
top: -3px;
|
||||
left: -3px;
|
||||
width: 2em;
|
||||
height: 2em;
|
||||
width: 20em;
|
||||
height: 20em;
|
||||
background-color: hsla(185, 100%, 62%, 0.75);
|
||||
transform-origin: center bottom;
|
||||
transform: scaleY(1);
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
<template>
|
||||
<div>
|
||||
<div class="div">
|
||||
<span />
|
||||
<span />
|
||||
<span />
|
||||
|
|
@ -8,17 +8,17 @@
|
|||
</template>
|
||||
|
||||
<style scoped>
|
||||
div {
|
||||
.div {
|
||||
display: flex;
|
||||
flex-flow: row nowrap;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
width: 2em;
|
||||
width: 20em;
|
||||
}
|
||||
|
||||
span {
|
||||
width: 0.3em;
|
||||
height: 1em;
|
||||
width: 3em;
|
||||
height: 6em;
|
||||
background-color: #3cefff;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -21,6 +21,10 @@ import { useBasicLayout } from '@/hooks/useBasicLayout'
|
|||
import { useChatStore, usePromptStore } from '@/store'
|
||||
import { fetchChatAPIProcess } from '@/api'
|
||||
import { t } from '@/locales'
|
||||
import indexBG from "@/components/animation/indexBG.vue"
|
||||
import recording from "@/components/animation/recording.vue"
|
||||
import inputing from "@/components/animation/inputing.vue"
|
||||
import loding from "@/components/animation/loding.vue"
|
||||
|
||||
import IatRecorder from '@/utils/test.js'
|
||||
// import IatRecorder from '@/utils/larRcorder.js'
|
||||
|
|
@ -53,10 +57,13 @@ user_channel.on('message', (data: any) => {
|
|||
if (recordFalg.value == 0) {
|
||||
RecordXunfei()
|
||||
recordFalg.value = 1
|
||||
nowStauts.value = 'record'
|
||||
}
|
||||
else {
|
||||
RecordXunfei()
|
||||
recordFalg.value = 0
|
||||
nowStauts.value = 'loding'
|
||||
handleSubmit()
|
||||
}
|
||||
})
|
||||
|
||||
|
|
@ -64,10 +71,12 @@ const changeRecord = ()=>{
|
|||
if (recordFalg.value == 0) {
|
||||
RecordXunfei()
|
||||
recordFalg.value = 1
|
||||
nowStauts.value = 'record'
|
||||
}
|
||||
else {
|
||||
RecordXunfei()
|
||||
recordFalg.value = 0
|
||||
nowStauts.value = 'loding'
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -99,6 +108,7 @@ const conversationList = computed(() =>
|
|||
const prompt = ref<string>('')
|
||||
const loading = ref<boolean>(false)
|
||||
const inputRef = ref<Ref | null>(null)
|
||||
const nowStauts = ref('input') // 当前系统状态, input等待, loding加载, record录音
|
||||
|
||||
// 添加PromptStore
|
||||
const promptStore = usePromptStore()
|
||||
|
|
@ -194,6 +204,7 @@ async function onConversation() {
|
|||
},
|
||||
],
|
||||
}))
|
||||
nowStauts = 'loding'
|
||||
|
||||
// 监听WebSocket接收消息事件
|
||||
socket.onmessage = (event: any) => {
|
||||
|
|
@ -203,6 +214,7 @@ async function onConversation() {
|
|||
lastText += msg.payload.choices.text[0].content
|
||||
mp3.push(msg.payload.choices.mp3)
|
||||
const loading = true
|
||||
nowStauts = 'input'
|
||||
updateChat(
|
||||
+uuid,
|
||||
dataSources.value.length - 1,
|
||||
|
|
@ -606,135 +618,149 @@ const click = () => {
|
|||
</script>
|
||||
|
||||
<template>
|
||||
<div class="flex flex-col w-full h-full">
|
||||
<HeaderComponent
|
||||
v-if="isMobile"
|
||||
:using-context="usingContext"
|
||||
@export="handleExport"
|
||||
@handle-clear="handleClear"
|
||||
/>
|
||||
<main class="flex-1 overflow-hidden">
|
||||
<div
|
||||
id="scrollRef"
|
||||
ref="scrollRef"
|
||||
class="h-full overflow-hidden overflow-y-auto"
|
||||
>
|
||||
<div
|
||||
id="image-wrapper"
|
||||
class="w-full max-w-screen-xl m-auto dark:bg-[#101014]"
|
||||
:class="[isMobile ? 'p-2' : 'p-4']"
|
||||
:style="{'max-width': maxWeight + 'px'}"
|
||||
>
|
||||
<!-- <div @click="click">录音开始</div> -->
|
||||
<!-- <div>
|
||||
浏览器录音听写：<button id="btn_control" @click="click">
|
||||
开始录音
|
||||
</button>
|
||||
</div>
|
||||
<br>
|
||||
<div id="result" ref="resultRef" /> -->
|
||||
<div class="flex w-full h-full my-layout">
|
||||
<indexBG v-if="!isMobile">
|
||||
<recording v-if="nowStauts=='record'"></recording>
|
||||
<loding v-else-if="nowStauts=='loding'"></loding>
|
||||
<inputing v-else></inputing>
|
||||
</indexBG>
|
||||
<div class="flex flex-col w-full h-full" :style="{'max-width': maxWeight + 'px'}">
|
||||
<HeaderComponent
|
||||
v-if="isMobile"
|
||||
:using-context="usingContext"
|
||||
@export="handleExport"
|
||||
@handle-clear="handleClear"
|
||||
/>
|
||||
<main class="flex-1 overflow-hidden">
|
||||
<div
|
||||
id="scrollRef"
|
||||
ref="scrollRef"
|
||||
class="h-full overflow-hidden overflow-y-auto"
|
||||
>
|
||||
<div
|
||||
id="image-wrapper"
|
||||
class="w-full max-w-screen-xl m-auto dark:bg-[#101014]"
|
||||
:class="[isMobile ? 'p-2' : 'p-4']"
|
||||
:style="{'max-width': maxWeight + 'px'}"
|
||||
>
|
||||
<!-- <div @click="click">录音开始</div> -->
|
||||
<!-- <div>
|
||||
浏览器录音听写：<button id="btn_control" @click="click">
|
||||
开始录音
|
||||
</button>
|
||||
</div>
|
||||
<br>
|
||||
<div id="result" ref="resultRef" /> -->
|
||||
|
||||
<template v-if="!dataSources.length">
|
||||
<div
|
||||
class="flex items-center justify-center mt-4 text-center text-neutral-300"
|
||||
>
|
||||
<SvgIcon icon="ri:bubble-chart-fill" class="mr-2 text-3xl" />
|
||||
<span>欢迎来到里海AI~</span>
|
||||
</div>
|
||||
</template>
|
||||
<template v-else>
|
||||
<div>
|
||||
<Message
|
||||
v-for="(item, index) of dataSources"
|
||||
:key="index"
|
||||
:date-time="item.dateTime"
|
||||
:text="item.text"
|
||||
:mp3="item.mp3"
|
||||
:inversion="item.inversion"
|
||||
:error="item.error"
|
||||
:loading="item.loading"
|
||||
@regenerate="onRegenerate(index)"
|
||||
@delete="handleDelete(index)"
|
||||
/>
|
||||
<div class="sticky bottom-0 left-0 flex justify-center">
|
||||
<NButton v-if="loading" type="warning" @click="handleStop">
|
||||
<template #icon>
|
||||
<SvgIcon icon="ri:stop-circle-line" />
|
||||
</template>
|
||||
{{ t("common.stopResponding") }}
|
||||
</NButton>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
<footer :class="footerClass">
|
||||
<div class="w-full max-w-screen-xl m-auto"
|
||||
:style="{'max-width': maxWeight + 'px'}">
|
||||
<div class="flex items-center justify-between space-x-2">
|
||||
<HoverButton v-if="recordFalg==0" @click="changeRecord">
|
||||
<span class="text-xl text-[#4f555e] dark:text-white">
|
||||
录音
|
||||
</span>
|
||||
</HoverButton>
|
||||
<HoverButton v-else-if="recordFalg==1" @click="changeRecord">
|
||||
<span class="text-xl text-[#4f555e] dark:text-white">
|
||||
完成
|
||||
</span>
|
||||
</HoverButton>
|
||||
<HoverButton v-if="!isMobile" @click="handleClear">
|
||||
<span class="text-xl text-[#4f555e] dark:text-white">
|
||||
<SvgIcon icon="ri:delete-bin-line" />
|
||||
</span>
|
||||
</HoverButton>
|
||||
<!-- <HoverButton v-if="!isMobile" @click="handleExport">
|
||||
<span class="text-xl text-[#4f555e] dark:text-white">
|
||||
<SvgIcon icon="ri:download-2-line" />
|
||||
</span>
|
||||
</HoverButton> -->
|
||||
<!-- <HoverButton @click="toggleUsingContext">
|
||||
<span
|
||||
class="text-xl"
|
||||
:class="{
|
||||
'text-[#4b9e5f]': usingContext,
|
||||
'text-[#a8071a]': !usingContext,
|
||||
}"
|
||||
>
|
||||
<SvgIcon icon="ri:chat-history-line" />
|
||||
</span>
|
||||
</HoverButton> -->
|
||||
<NAutoComplete
|
||||
v-model:value="prompt"
|
||||
:options="searchOptions"
|
||||
:render-label="renderOption"
|
||||
>
|
||||
<template #default="{ handleInput, handleBlur, handleFocus }">
|
||||
<NInput
|
||||
v-model:value="prompt"
|
||||
type="textarea"
|
||||
:placeholder="placeholder"
|
||||
:autosize="{ minRows: 1, maxRows: isMobile ? 4 : 8 }"
|
||||
@input="handleInput"
|
||||
@focus="handleFocus"
|
||||
@blur="handleBlur"
|
||||
@keypress="handleEnter"
|
||||
/>
|
||||
</template>
|
||||
</NAutoComplete>
|
||||
<NButton
|
||||
type="primary"
|
||||
:disabled="buttonDisabled"
|
||||
@click="handleSubmit"
|
||||
>
|
||||
<template #icon>
|
||||
<span class="dark:text-black">
|
||||
<SvgIcon icon="ri:send-plane-fill" />
|
||||
</span>
|
||||
</template>
|
||||
</NButton>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
</div>
|
||||
<template v-if="!dataSources.length">
|
||||
<div
|
||||
class="flex items-center justify-center mt-4 text-center text-neutral-300"
|
||||
>
|
||||
<SvgIcon icon="ri:bubble-chart-fill" class="mr-2 text-3xl" />
|
||||
<span>欢迎来到里海AI~</span>
|
||||
</div>
|
||||
</template>
|
||||
<template v-else>
|
||||
<div>
|
||||
<Message
|
||||
v-for="(item, index) of dataSources"
|
||||
:key="index"
|
||||
:date-time="item.dateTime"
|
||||
:text="item.text"
|
||||
:mp3="item.mp3"
|
||||
:inversion="item.inversion"
|
||||
:error="item.error"
|
||||
:loading="item.loading"
|
||||
@regenerate="onRegenerate(index)"
|
||||
@delete="handleDelete(index)"
|
||||
/>
|
||||
<div class="sticky bottom-0 left-0 flex justify-center">
|
||||
<NButton v-if="loading" type="warning" @click="handleStop">
|
||||
<template #icon>
|
||||
<SvgIcon icon="ri:stop-circle-line" />
|
||||
</template>
|
||||
{{ t("common.stopResponding") }}
|
||||
</NButton>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
<footer :class="footerClass">
|
||||
<div class="w-full max-w-screen-xl m-auto"
|
||||
:style="{'max-width': maxWeight + 'px'}">
|
||||
<div class="flex items-center justify-between space-x-2">
|
||||
<HoverButton v-if="recordFalg==0" @click="changeRecord">
|
||||
<span class="text-xl text-[#4f555e] dark:text-white">
|
||||
录音
|
||||
</span>
|
||||
</HoverButton>
|
||||
<HoverButton v-else-if="recordFalg==1" @click="changeRecord">
|
||||
<span class="text-xl text-[#4f555e] dark:text-white">
|
||||
完成
|
||||
</span>
|
||||
</HoverButton>
|
||||
<HoverButton v-if="!isMobile" @click="handleClear">
|
||||
<span class="text-xl text-[#4f555e] dark:text-white">
|
||||
<SvgIcon icon="ri:delete-bin-line" />
|
||||
</span>
|
||||
</HoverButton>
|
||||
<!-- <HoverButton v-if="!isMobile" @click="handleExport">
|
||||
<span class="text-xl text-[#4f555e] dark:text-white">
|
||||
<SvgIcon icon="ri:download-2-line" />
|
||||
</span>
|
||||
</HoverButton> -->
|
||||
<!-- <HoverButton @click="toggleUsingContext">
|
||||
<span
|
||||
class="text-xl"
|
||||
:class="{
|
||||
'text-[#4b9e5f]': usingContext,
|
||||
'text-[#a8071a]': !usingContext,
|
||||
}"
|
||||
>
|
||||
<SvgIcon icon="ri:chat-history-line" />
|
||||
</span>
|
||||
</HoverButton> -->
|
||||
<NAutoComplete
|
||||
v-model:value="prompt"
|
||||
:options="searchOptions"
|
||||
:render-label="renderOption"
|
||||
>
|
||||
<template #default="{ handleInput, handleBlur, handleFocus }">
|
||||
<NInput
|
||||
v-model:value="prompt"
|
||||
type="textarea"
|
||||
:placeholder="placeholder"
|
||||
:autosize="{ minRows: 1, maxRows: isMobile ? 4 : 8 }"
|
||||
@input="handleInput"
|
||||
@focus="handleFocus"
|
||||
@blur="handleBlur"
|
||||
@keypress="handleEnter"
|
||||
/>
|
||||
</template>
|
||||
</NAutoComplete>
|
||||
<NButton
|
||||
type="primary"
|
||||
:disabled="buttonDisabled"
|
||||
@click="handleSubmit"
|
||||
>
|
||||
<template #icon>
|
||||
<span class="dark:text-black">
|
||||
<SvgIcon icon="ri:send-plane-fill" />
|
||||
</span>
|
||||
</template>
|
||||
</NButton>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.my-layout{
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
Loading…
Reference in New Issue