fix: loading 时机调整

liou666 · Apr 13, 2023 · 386af51 · 386af51
1 parent 47f5b09
commit 386af51
Show file tree

Hide file tree

Showing 5 changed files with 73 additions and 66 deletions.
diff --git a/src/components/Content.vue b/src/components/Content.vue
@@ -29,6 +29,8 @@ const message = ref('') // input message
 const text = ref('') // current select message
 const translates = ref<Translates>({}) // translate result
 const isTranslating = ref(false) // translate loading
+const speakIndex = ref(0) // record speak
+const translateIndex = ref(0) // record translate
 
 const messageLength = computed(() => store.getConversationsByCurrentProps('chatMessages').length)
 const chatMessages = computed(() => store.getConversationsByCurrentProps('chatMessages').slice(1))
@@ -82,7 +84,7 @@ const onSubmit = async () => {
         content, role: 'assistant',
       },
     ])
-    speak(content)
+    speak(content, chatMessages.value.length - 1)
   }
   else {
     store.changeConversations(currentChatMessages.value.slice(0, -1))
@@ -91,7 +93,8 @@ const onSubmit = async () => {
   store.changeLoading(false)
 }
 
-function speak(content: string) {
+function speak(content: string, index: number) {
+  speakIndex.value = index
   text.value = content
   textToSpeak(content)
 }
@@ -114,6 +117,7 @@ const recognize = async () => {
 }
 
 const translate = async (text: string, i: number) => {
+  translateIndex.value = i
   const key = text + i
   if (translates.value[key])
     return translates.value[key].isShow = !translates.value[key].isShow
@@ -150,15 +154,18 @@ const translate = async (text: string, i: number) => {
             </p>
 
             <p v-if="item.role === 'assistant'" mt-2 flex>
-              <span class="chat-btn">
-                <i v-if="!isSynthesizing" icon-btn rotate-90 i-ic:sharp-wifi @click="speak(item.content)" />
-                <i v-else icon-btn i-eos-icons:bubble-loading />
+              <span v-if="!isSynthesizing || speakIndex !== i" class="chat-btn" @click="speak(item.content, i)">
+                <i icon-btn rotate-90 i-ic:sharp-wifi />
               </span>
-              <span
-                class="chat-btn ml-1"
-              >
-                <i v-if="!isTranslating" icon-btn i-carbon:ibm-watson-language-translator @click="translate(item.content, i)" />
-                <i v-else icon-btn i-eos-icons:bubble-loading />
+              <span v-else class="chat-btn">
+                <i icon-btn i-eos-icons:bubble-loading />
+              </span>
+
+              <span v-if="!isTranslating || translateIndex !== i" ml-1 class="chat-btn" @click="translate(item.content, i)">
+                <i icon-btn i-carbon:ibm-watson-language-translator />
+              </span>
+              <span v-else ml-1 class="chat-btn">
+                <i icon-btn i-eos-icons:bubble-loading />
               </span>
             </p>
           </div>

diff --git a/src/components/Nav.vue b/src/components/Nav.vue
@@ -12,6 +12,8 @@ const handleCardClick = (key: Key) => {
 }
 
 const handleDelete = (key: Key) => {
+  if (store.loading)
+    return alert('Please wait for the current operation to complete')
   store.deleteConversation(key)
 }
 </script>

diff --git a/src/components/NewChat.vue b/src/components/NewChat.vue
@@ -1,21 +1,19 @@
 <script setup lang="ts">
 import { v4 as uuid } from 'uuid'
 import type { VoiceInfo } from 'microsoft-cognitiveservices-speech-sdk'
-import { getAvatarUrl, getOpenAzureKey, getOpenAzureRegion } from '@/utils'
+import { getAvatarUrl } from '@/utils'
 import { useConversationStore } from '@/stores'
 import { supportLanguageMap } from '@/config'
+const { allVoices } = defineProps<{ allVoices: VoiceInfo[] }>()
 const emits = defineEmits(['close'])
-// const avatarPath = '../assets/avatars/'
+
 const modules = import.meta.glob(['../assets/avatars/*', '!../assets/avatars/self.png'])
 const avatarList = ref<string[]>(Object.keys(modules).map(path => path.replace('../assets/avatars/', '')))
 const currentAvatarIndex = ref(Math.random() * avatarList.value.length | 0)
 
-const { allVoices, isFetchAllVoices } = useSpeechService(getOpenAzureKey(), getOpenAzureRegion())
-
 const store = useConversationStore()
 
-const allLanguages = computed(() => [...new Set(allVoices.value.map(v => v.locale))].filter(l => Object.keys(supportLanguageMap).includes(l)))
-
+const allLanguages = computed(() => [...new Set(allVoices.map(v => v.locale))].filter(l => Object.keys(supportLanguageMap).includes(l)))
 const selectLanguage = ref('')
 const filterVoices = ref<VoiceInfo[]>([])
 const selectVoiceName = ref('')
@@ -24,14 +22,17 @@ const name = ref('')
 
 const canAdd = computed(() => !!(selectLanguage.value && selectVoiceName.value && desc.value && name.value))
 
-watch([selectLanguage, allLanguages], ([newSelectLanguage]) => {
-  filterVoices.value = allVoices.value.filter(v => v.locale === newSelectLanguage)
-  selectVoiceName.value = filterVoices.value[0]?.shortName
+onBeforeMount(() => {
+  selectLanguage.value = allLanguages.value[0]
+  changeSelectLanguage(selectLanguage.value)
 })
 
-watch(allLanguages, (newAllLanguages) => {
-  selectLanguage.value = newAllLanguages[0]
-})
+watch(selectLanguage, changeSelectLanguage)
+
+function changeSelectLanguage(newSelectLanguage: string) {
+  filterVoices.value = allVoices.filter(v => v.locale === newSelectLanguage)
+  selectVoiceName.value = filterVoices.value[0]?.shortName
+}
 
 const addChat = (event: any) => {
   event.preventDefault()
@@ -56,52 +57,46 @@ const changeAvatar = () => {
     <!-- <div text-lg font-bold>
       自定义对话
     </div> -->
-    <div v-if="isFetchAllVoices" h-56 flex="~" items-center>
-      <!-- <span>loading</span>  -->
-      <i text-6 icon-btn i-eos-icons:three-dots-loading />
+    <div flex>
+      <img w-14 h-14 rounded-full :src="getAvatarUrl(avatarList[currentAvatarIndex])" alt="" @click="changeAvatar()">
+    </div>
+    <div flex>
+      <label center-y justify-end mr-2 for="">姓名</label>
+      <input v-model="name" w-50 p-2 type="text">
+    </div>
+    <div flex>
+      <label center-y justify-end mr-2 for="">备注</label>
+      <input v-model="desc" w-50 p-2 type="text">
     </div>
-    <template v-else>
-      <div flex>
-        <img w-14 h-14 rounded-full :src="getAvatarUrl(avatarList[currentAvatarIndex])" alt="" @click="changeAvatar()">
-      </div>
-      <div flex>
-        <label center-y justify-end mr-2 for="">姓名</label>
-        <input v-model="name" w-50 p-2 type="text">
-      </div>
-      <div flex>
-        <label center-y justify-end mr-2 for="">备注</label>
-        <input v-model="desc" w-50 p-2 type="text">
-      </div>
-      <div flex>
-        <label center-y justify-end mr-2 for="">语言</label>
-        <select v-model="selectLanguage" w-55 select-settings>
-          <option v-for="item in allLanguages" :key="item" :value="item">
-            {{ supportLanguageMap[item] }}
-          </option>
-        </select>
-      </div>
-      <div flex>
-        <label center-y justify-end mr-2 for="">音色</label>
-        <select v-model="selectVoiceName" w-55 select-settings>
-          <option v-for="item in filterVoices" :key="item.shortName" :value="item.shortName">
-            {{ `${item.locale} / ${item.gender === 1 ? 'Female' : 'Male'} / ${item.localName}` }}
-          </option>
-        </select>
-      </div>
-      <!-- todo -->
-      <!-- <div flex>
+    <div flex>
+      <label center-y justify-end mr-2 for="">语言</label>
+      <select v-model="selectLanguage" w-55 select-settings>
+        <option v-for="item in allLanguages" :key="item" :value="item">
+          {{ supportLanguageMap[item] }}
+        </option>
+      </select>
+    </div>
+    <div flex>
+      <label center-y justify-end mr-2 for="">音色</label>
+      <select v-model="selectVoiceName" w-55 select-settings>
+        <option v-for="item in filterVoices" :key="item.shortName" :value="item.shortName">
+          {{ `${item.locale} / ${item.gender === 1 ? 'Female' : 'Male'} / ${item.localName}` }}
+        </option>
+      </select>
+    </div>
+    <!-- todo -->
+    <!-- <div flex>
         <label center-y justify-end mr-2 for="">预设</label>
         <textarea id="message" resize-none w-50 block p-2 text-sm placeholder="Write your thoughts here..." />
       </div> -->
-      <div center-y text-sm text-gray-500>
-        <i inline-block w-4 h-4 m-1 cursor-auto i-ic:baseline-lightbulb />
-        点击头像可更换头像
-      </div>
-      <button w-20 btn center p-2 mt2 :disabled="!canAdd" @click="addChat($event)">
-        <i mr-1 i-ic:outline-add-circle />
-        submit
-      </button>
-    </template>
+    <div center-y text-sm text-gray-500>
+      <i inline-block w-4 h-4 m-1 cursor-auto i-ic:baseline-lightbulb />
+      点击头像可更换头像
+    </div>
+    <button w-20 btn center p-2 mt2 :disabled="!canAdd" @click="addChat($event)">
+      <i mr-1 i-ic:outline-add-circle />
+      submit
+    </button>
   </div>
 </template>
 
diff --git a/src/components/Tool.vue b/src/components/Tool.vue
@@ -2,10 +2,13 @@
 import Modal from './widgets/Modal.vue'
 import NewChat from './NewChat.vue'
 import Setting from './Setting.vue'
+import { getOpenAzureKey, getOpenAzureRegion } from '@/utils'
 const isDark = useDark()
 const toggleDark = useToggle(isDark)
 const addVisible = ref(false)
 const settingVisible = ref(false)
+
+const { allVoices } = useSpeechService(getOpenAzureKey(), getOpenAzureRegion())
 </script>
 
 <template>
@@ -32,7 +35,7 @@ const settingVisible = ref(false)
   </div>
 
   <Modal v-model:visible="addVisible" class="dark:bg-[#111111] bg-white" center max-w-120 p6>
-    <NewChat @close="addVisible = false" />
+    <NewChat :all-voices="allVoices as any" @close="addVisible = false" />
   </Modal>
 
   <Modal v-model:visible="settingVisible" h20 class="dark:bg-[#111111] bg-white" center max-w-80 p6>

diff --git a/src/server/api.ts b/src/server/api.ts
@@ -5,7 +5,7 @@ export const generateText = async (messages: ChatMessage[], apiKey: string, prox
   const openai = new OpenAi(apiKey, proxy)
 
   const { url, initOptions } = openai.generateTurboPayload({ messages })
-  const response = await fetchWithTimeout(url, 20000, initOptions)
+  const response = await fetchWithTimeout(url, 30000, initOptions)
   const data = await response.json()
   return data
 }