fix: 处理 vosk_asr 打包后无法加载模型问题

src/main/IPCs.ts

@@ -55,9 +55,9 @@ export default class IPCs {
         })
 
         win.webContents.on('did-frame-finish-load', (): void => {
-          if (Constants.IS_DEV_ENV) {
-            win.webContents.openDevTools()
-          }
+          // if (Constants.IS_DEV_ENV) {
+          win.webContents.openDevTools()
+          // }
         })
 
         await win.loadURL(url)

src/renderer/components/layout/HeaderLayout.vue

@@ -51,6 +51,15 @@ async function changeSource() {
 
   console.log(res)
 }
+
+const voskModelLoading = ref(false);
+async function changeVoskModel(){
+  voskModelLoading.value = true;
+  await settings.downLoadVoskModel();
+  voskModelLoading.value = false;
+}
+changeVoskModel();
+
 </script>
 <template>
   <v-app-bar color="#d71b1b" density="compact" class="header">
@@ -98,6 +107,9 @@ async function changeSource() {
                     :items="setting.voskModels.value"
                     label="vosk_asr 模型"
                     required
+                    :loading="voskModelLoading"
+                    :disabled="voskModelLoading"
+                    @update:model-value="changeVoskModel"
                   ></v-select>
                 </template>
 

src/renderer/public/vosk/models/NOTICE

-The Developer of the ASR models is Alpha Cephei Inc (https://alphacephei.com/e).
-Copyright 2019 Alpha Cephei Inc. All Rights Reserved.
\ No newline at end of file

src/renderer/screens/PhotoScreen.vue

@@ -7,16 +7,19 @@ import { storeToRefs } from 'pinia'
 const { photo: usePhoto, settings } = useStore()
 const photo = storeToRefs(usePhoto)
 
-onMounted((): void => {
-})
+onMounted((): void => {})
 
 async function handleOpen(event: Event, url: string) {
-  const img = event.target as HTMLImageElement;
-  await window.mainApi.send('openWindow', `${location.origin + location.pathname}#show?url=${url}`, {
-    width: img.naturalWidth / 2,
-    height: img.naturalHeight / 2,
-    fullscreen: settings.isFullscreen === 'yes'
-  })
+  const img = event.target as HTMLImageElement
+  await window.mainApi.send(
+    'openWindow',
+    `${location.origin + location.pathname}#show?url=${url}`,
+    {
+      width: img.naturalWidth / 2,
+      height: img.naturalHeight / 2,
+      fullscreen: settings.isFullscreen === 'yes'
+    }
+  )
 }
 
 const validateURL = (url: string) => {

src/renderer/screens/ShowPhoto.vue

 <script setup lang="ts">
 import { ref } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
-import { Vosk } from '@/renderer/plugins/asr/index'
 import type {
   ServerMessagePartialResult,
   ServerMessageResult,
@@ -16,7 +15,7 @@ const { settings } = useStore()
 const sampleRate = 48000
 
 const recordVolume = ref(0)
-const url = route.query.url as string;
+const url = route.query.url as string
 
 router.beforeEach((g) => {
   if (!g.query.url) return router.push('/error')
@@ -34,7 +33,7 @@ async function initVosk({
   partialResult?: (string) => void
 }) {
   const channel = new MessageChannel()
-  const model = await Vosk.createModel(modelPath)
+  const model = await settings.downLoadVoskModel();
   const recognizer = new model.KaldiRecognizer(sampleRate)
 
   model.registerPort(channel.port1)
@@ -103,7 +102,7 @@ async function startAudioInput() {
   microphoneState.value = 'loading'
 
   const { recognizer, channel } = await initVosk({
-    modelPath: new URL('/vosk/models/' + settings.voskSelectModel, import.meta.url).href,
+    modelPath: `https://resources.laihua.com/2023-11-29/${settings.voskSelectModel}`,
     result: async (text) => {
       console.log('----------------> text:', text)
       const tone = settings.source.find(({ sourceId }) => settings.selectSource === sourceId)
@@ -167,12 +166,12 @@ function endAudioInput() {
 </script>
 
 <template>
-  <div style="width: 100%; height: 100%" class="d-flex justify-center align-center" :style="{ background: '#000' }">
-    <v-img
-      v-if="url"
-      aspect-ratio="9/16"
-      :src="url"
-    ></v-img>
+  <div
+    style="width: 100%; height: 100%"
+    class="d-flex justify-center align-center"
+    :style="{ background: '#000' }"
+  >
+    <v-img v-if="url" aspect-ratio="9/16" :src="url"></v-img>
   </div>
 
   <div class="voice">

src/renderer/store/settings.ts

 import { defineStore } from 'pinia'
+import { Vosk } from '@/renderer/plugins/asr/index'
+import type {
+  Model
+} from '@/renderer/plugins/asr/index'
+
+const voskModelMap: Map<string, Model | null> = new Map();
 
 export type ISettings = {
   asr: 'vosk_asr' | 'xf_asr'
@@ -13,7 +19,7 @@ export type ISettings = {
     description: string
     sex: 1 | 0
   }[]
-  selectSource: string,
+  selectSource: string
   isFullscreen: 'yes' | 'no'
 }
 
@@ -55,6 +61,16 @@ const useSettingsStore = defineStore('settings', {
 
       if (res.code !== 200) return
       this.source = res.data
+    },
+    async downLoadVoskModel() {
+      if (voskModelMap.has(this.$state.voskSelectModel)){
+        return voskModelMap.get(this.$state.voskSelectModel) as Model
+      }
+
+      const model = await Vosk.createModel(`https://resources.laihua.com/2023-11-29/${this.$state.voskSelectModel}`);
+      voskModelMap.set(this.$state.voskSelectModel, model);
+
+      return model;
     }
   }
 })