340 lines
9.0 KiB
Vue
340 lines
9.0 KiB
Vue
<template>
|
|
<div class="dressfor-container flex">
|
|
<div class="content flex-1 flex flex-column">
|
|
<div class="loading-container flex flex-center">
|
|
<Icon class="icon-element" title="" />
|
|
</div>
|
|
<div class="text">
|
|
What are you <br />
|
|
dressing for?
|
|
</div>
|
|
<!-- <div class="start-btn" @click="handleStart">Start</div> -->
|
|
<div class="chatbox flex flex-center">
|
|
<div class="input-box flex">
|
|
<div class="input-wrapper flex-1 flex">
|
|
<input
|
|
type="text"
|
|
class="input-item flex-1"
|
|
v-model="inputValue"
|
|
placeholder="Ask sth!"
|
|
v-show="!isRecording"
|
|
/>
|
|
<div class="recording-visualizer flex-1" v-show="isRecording">
|
|
<AudioVisualizer ref="audioVisualizerRef" />
|
|
</div>
|
|
</div>
|
|
<SvgIcon
|
|
class="audio-icon"
|
|
:name="isRecording ? 'pause' : 'audio'"
|
|
size="35"
|
|
color="#6D6868"
|
|
@click="handleClickAudio"
|
|
/>
|
|
</div>
|
|
<div class="send flex flex-center" @click="handleSendMessage">
|
|
<SvgIcon class="send-icon" name="send" size="26" color="#000000" />
|
|
</div>
|
|
</div>
|
|
<div class="tag-container flex flex-column flex-center">
|
|
<div class="tag-list short flex flex-justify-center">
|
|
<div
|
|
class="tag-item"
|
|
:class="{ active: item === inputValue }"
|
|
v-for="item in tagListShort"
|
|
:key="item"
|
|
@click="handleClickTag(item)"
|
|
>
|
|
{{ item }}
|
|
</div>
|
|
</div>
|
|
<div class="tag-list long flex flex-justify-center">
|
|
<div
|
|
class="tag-item"
|
|
v-for="item in tagListLong"
|
|
:class="{ active: item === inputValue }"
|
|
:key="item"
|
|
@click="handleClickTag(item)"
|
|
>
|
|
{{ item }}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
<script setup lang="ts">
|
|
import { ref, onUnmounted, nextTick, watch } from 'vue'
|
|
import { showToast, closeToast } from 'vant'
|
|
import HeaderTitle from '@/components/HeaderTitle.vue'
|
|
import FooterNavigation from '@/components/FooterNavigation.vue'
|
|
import { useRouter } from 'vue-router'
|
|
import AudioVisualizer from '@/views/asistant/components/AudioVisualizer.vue'
|
|
import Icon from '../asistant/components/GenerateLoading.vue'
|
|
|
|
const router = useRouter()
|
|
|
|
const tagListShort = ['Silk Slip Dress', 'Business Casual', 'Suggest Shoe Styles']
|
|
const tagListLong = ['Linen Suit For Summer Gaka', 'Recomment Evening Bags']
|
|
|
|
const inputValue = ref('')
|
|
const isRecording = ref(false)
|
|
const audioVisualizerRef = ref<InstanceType<typeof AudioVisualizer> | null>(null)
|
|
let speechRecognition: any = null
|
|
let lastTranscript = ''
|
|
let isSpeechRecognitionActive = false
|
|
|
|
const refreshAudioVisualizer = () => {
|
|
audioVisualizerRef.value?.updateLines?.()
|
|
}
|
|
|
|
watch(isRecording, async (newVal) => {
|
|
if (newVal) {
|
|
await nextTick()
|
|
refreshAudioVisualizer()
|
|
setTimeout(() => {
|
|
refreshAudioVisualizer()
|
|
}, 50)
|
|
}
|
|
})
|
|
|
|
const handleSendMessage = () => {
|
|
const message = inputValue.value.trim()
|
|
if (!message) {
|
|
showToast('Please enter a message')
|
|
return
|
|
}
|
|
|
|
router.push({
|
|
path: '/asistant',
|
|
query: message ? { message } : undefined
|
|
})
|
|
}
|
|
|
|
const handleClickAudio = () => {
|
|
if (isRecording.value) {
|
|
stopRecording()
|
|
} else {
|
|
startRecording()
|
|
}
|
|
}
|
|
|
|
const startRecording = () => {
|
|
if (isSpeechRecognitionActive) {
|
|
console.warn('Speech recognition already running')
|
|
return
|
|
}
|
|
if (!speechRecognition) {
|
|
if (!('webkitSpeechRecognition' in window) && !('SpeechRecognition' in window)) {
|
|
showToast(
|
|
'Your browser does not support speech recognition, please try again with another browser'
|
|
)
|
|
return
|
|
}
|
|
const SpeechRecognition =
|
|
(window as any).SpeechRecognition || (window as any).webkitSpeechRecognition
|
|
speechRecognition = new SpeechRecognition()
|
|
speechRecognition.continuous = true
|
|
speechRecognition.interimResults = true
|
|
speechRecognition.lang = 'en-US'
|
|
}
|
|
|
|
speechRecognition.onstart = () => {
|
|
showToast({
|
|
message: 'Listening...',
|
|
duration: 0
|
|
})
|
|
isRecording.value = true
|
|
}
|
|
|
|
speechRecognition.onresult = (event: any) => {
|
|
let finalTranscript = ''
|
|
let interimTranscript = ''
|
|
|
|
for (let i = event.resultIndex; i < event.results.length; i++) {
|
|
const transcript = event.results[i][0].transcript
|
|
if (event.results[i].isFinal) {
|
|
finalTranscript += transcript
|
|
} else {
|
|
interimTranscript += transcript
|
|
}
|
|
}
|
|
|
|
if (finalTranscript && finalTranscript !== lastTranscript) {
|
|
lastTranscript = finalTranscript
|
|
inputValue.value = finalTranscript
|
|
}
|
|
|
|
if (interimTranscript) {
|
|
console.log('Speech recognition interim result:', interimTranscript)
|
|
}
|
|
}
|
|
|
|
speechRecognition.onend = () => {
|
|
closeToast()
|
|
isRecording.value = false
|
|
lastTranscript = ''
|
|
isSpeechRecognitionActive = false
|
|
}
|
|
|
|
speechRecognition.onerror = (event: any) => {
|
|
console.error('Speech recognition error:', event.error)
|
|
closeToast()
|
|
isRecording.value = false
|
|
isSpeechRecognitionActive = false
|
|
showToast('Speech recognition failed, please try again')
|
|
}
|
|
|
|
speechRecognition.start()
|
|
isSpeechRecognitionActive = true
|
|
}
|
|
|
|
const stopRecording = () => {
|
|
if (speechRecognition && isSpeechRecognitionActive) {
|
|
speechRecognition.stop()
|
|
isSpeechRecognitionActive = false
|
|
}
|
|
}
|
|
|
|
const handleClickTag = (tag: string) => {
|
|
inputValue.value = tag
|
|
}
|
|
|
|
onUnmounted(() => {
|
|
if (speechRecognition && isRecording.value) {
|
|
speechRecognition.stop()
|
|
}
|
|
speechRecognition = null
|
|
})
|
|
</script>
|
|
<style lang="less" scoped>
|
|
.c-svg {
|
|
width: initial;
|
|
height: initial;
|
|
}
|
|
.dressfor-container {
|
|
height: calc(100vh - 12rem - 14.9rem);
|
|
// overflow: hidden;
|
|
color: #fff;
|
|
position: relative;
|
|
// background: url('@/assets/images/dress_for_bg.png') no-repeat center center;
|
|
background-size: cover;
|
|
background-position: center;
|
|
background-repeat: no-repeat;
|
|
padding: 15.9rem 0 0 0;
|
|
.content {
|
|
.loading-container {
|
|
:deep(.loading-image) {
|
|
width: 17rem;
|
|
height: 17rem;
|
|
animation: none;
|
|
}
|
|
:deep(.loading-shadow) {
|
|
background-color: #000;
|
|
width: 9.2rem;
|
|
height: 2.4rem;
|
|
filter: blur(6px);
|
|
opacity: 0.2;
|
|
margin: 2.4rem 0 0;
|
|
// background-color: #d9d9d9;
|
|
}
|
|
}
|
|
.text {
|
|
font-family: 'satoshiBold';
|
|
font-size: 9.6rem;
|
|
text-align: center;
|
|
padding-top: 9rem;
|
|
padding-bottom: 14rem;
|
|
|
|
font-weight: 700;
|
|
line-height: 1.12;
|
|
background: #b3b3b3;
|
|
background: radial-gradient(80.79% 50% at 50% 50%, #d1c7c2 0%, rgba(255, 255, 255, 0) 100%),
|
|
radial-gradient(99.56% 93.08% at 99.56% 93.08%, #e6e6e6 0%, #000000 100%)
|
|
/* warning: gradient uses a rotation that is not supported by CSS and may not behave as expected */,
|
|
linear-gradient(120.09deg, #b3b3b3 0%, rgba(255, 255, 255, 0) 35.41%);
|
|
-webkit-background-clip: text;
|
|
-webkit-text-fill-color: transparent;
|
|
background-clip: text;
|
|
}
|
|
.chatbox {
|
|
height: 9.3rem;
|
|
// background-color: #fff;
|
|
column-gap: 2.29rem;
|
|
.input-box {
|
|
width: 59.8rem;
|
|
height: 100%;
|
|
background-color: #efefef;
|
|
// border: 2px solid #5f5f5f;
|
|
border-radius: 1rem;
|
|
color: #222222;
|
|
font-size: 3.2rem;
|
|
font-family: 'satoshiRegular';
|
|
padding: 0 2.6rem;
|
|
column-gap: 2.6rem;
|
|
overflow: hidden;
|
|
.input-wrapper {
|
|
overflow: hidden;
|
|
}
|
|
.recording-visualizer {
|
|
display: flex;
|
|
align-items: center;
|
|
height: 100%;
|
|
:deep(.audio-visualizer) {
|
|
width: 100%;
|
|
padding: 0;
|
|
}
|
|
:deep(.visualizer-container) {
|
|
height: 100%;
|
|
}
|
|
}
|
|
.input-item {
|
|
// width: 100%;
|
|
height: 100%;
|
|
outline: none;
|
|
border: none;
|
|
background-color: #efefef;
|
|
}
|
|
.audio-icon {
|
|
width: initial;
|
|
}
|
|
}
|
|
.send {
|
|
width: 7.6rem;
|
|
height: 7.6rem;
|
|
background-color: #efefef;
|
|
border-radius: 1rem;
|
|
}
|
|
}
|
|
.tag-container {
|
|
row-gap: 3.1rem;
|
|
padding-top: 5.7rem;
|
|
.tag-list {
|
|
color: #000;
|
|
flex-wrap: wrap;
|
|
&.short {
|
|
column-gap: 1.91rem;
|
|
}
|
|
&.long {
|
|
column-gap: 3.1rem;
|
|
padding-left: 2.1rem;
|
|
}
|
|
.tag-item {
|
|
height: 6.8rem;
|
|
line-height: 6.8rem;
|
|
box-sizing: border-box;
|
|
font-family: 'satoshiRegular';
|
|
font-size: 2.8rem;
|
|
border: 0.15rem solid #cdcdcd;
|
|
text-align: center;
|
|
border-radius: 4.6rem;
|
|
padding: 0 2.15rem;
|
|
&.active {
|
|
background-color: #f5f5f5;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|