2023/10/30 10:34 UI优化更新

src/Window.vue

@@ -44,7 +44,6 @@
 import {ref} from 'vue';
 import {defineComponent} from "vue";
 import infer from "@/infer.vue";
-import {SettingFilled} from "@ant-design/icons-vue";
 
 
 const selectedKeys = ref(['1']);

src/components/model_card.vue

@@ -1,5 +1,6 @@
 <script>
 import axios from "axios";
+import { DownloadOutlined } from '@ant-design/icons-vue';
 
 export default {
   name: "model_card",
@@ -8,6 +9,9 @@ export default {
   mounted() {
     this.speaker_name = this.speakers[0]
   },
+  components:{
+    DownloadOutlined
+  },
 
   methods: {
     async delete_model() {
@@ -136,7 +140,11 @@ export default {
       <a-space v-show="model.audio.valid" size="large">
         <audio :src="model.audio.data.src" controls></audio>
         <a-button :href="model.audio.data.src"
-                  :download="getName(model.audio.data.texts, model.name)">下载音频
+                  :download="getName(model.audio.data.texts, model.name)">
+          <template #icon>
+            <DownloadOutlined/>
+          </template>
+          下载音频
         </a-button>
       </a-space>
 

src/components/select_model.vue

@@ -4,11 +4,13 @@ import {ref, watch} from 'vue';
 import {TreeSelect} from 'ant-design-vue';
 
 const SHOW_PARENT = TreeSelect.SHOW_PARENT;
-let treeData = ref([])
-let selected_models = ref([])
-let language = ref("ZH")
-let devices = ref([])
-let device = ref("")
+const model_loading = ref(false)
+const treeData = ref([])
+const selected_models = ref([])
+const language = ref("ZH")
+const devices = ref([])
+const device = ref("")
+const rootDir = ref("Data")
 watch(selected_models, () => {
   console.log(selected_models.value);
 });
@@ -17,11 +19,13 @@ watch(selected_models, () => {
 export default {
   data() {
     return {
+      model_loading: model_loading,
       treeData: treeData,
       selected_models: selected_models,
       language: language,
       device: device,
-      devices: devices
+      devices: devices,
+      rootDir: rootDir
     }
   },
   name: "Select_Model",
@@ -32,9 +36,11 @@ export default {
   methods: {
     async get_local_models() {
       let url = `/models/get_local`
+      let params = {"root_dir": rootDir.value}
       try {
         const response = await axios.get(url, {
-          timeout: 3000
+          timeout: 3000,
+          params: params
         })
         console.log(response)
         if (response.status === 200) {
@@ -52,7 +58,7 @@ export default {
             for (let i = 0; i < data[dataset_name].length; i++) {
               dataset_node.children.push({
                 label: `${dataset_name}/${data[dataset_name][i]}`,
-                value: `Data/${dataset_name}/${data[dataset_name][i]}`
+                value: `${rootDir.value}/${dataset_name}/${data[dataset_name][i]}`
               })
             }
             result.push(dataset_node)
@@ -106,18 +112,29 @@ export default {
     },
 
     async load_all_models() {
+      model_loading.value = true
+      let models = selected_models.value
+      selected_models.value = []
       // 加载所有选中的模型
-      for (let index in selected_models.value) {
-        await this.load_model(selected_models.value[index], device.value, language.value)
+      for (let index in models) {
+        await this.load_model(models[index], device.value, language.value)
       }
+      model_loading.value = false
     }
   }
 }
 </script>
 
 <template>
   <a-card title="模型加载" :bordered="false">
-    <a-row :gutter="10">
+    <a-row :gutter="[10,10]">
+      <a-col :span="24">
+        <a-space-compact block>
+          <a-radio-button :style="{ width: '35%' }" disabled>搜索根目录</a-radio-button>
+          <a-input v-model:value="rootDir" placeholder="不建议自设根目录，最好使用默认配置"/>
+        </a-space-compact>
+
+      </a-col>
       <a-col :span="18">
         <a-tree-select
             v-model:value="selected_models"
@@ -155,7 +172,7 @@ export default {
         </a-select>
       </a-col>
       <a-col :span="2">
-        <a-button type="primary" @click="load_all_models">加载模型</a-button>
+        <a-button type="primary" @click="load_all_models" :loading="model_loading">加载模型</a-button>
       </a-col>
     </a-row>
   </a-card>

src/infer.vue

@@ -5,37 +5,42 @@ import model_card from "@/components/model_card.vue";
 import colorTable from "@/color";
 import {ref} from "vue";
 import axios from "axios";
+import {CheckOutlined, CloseOutlined} from "@ant-design/icons-vue";
 
-let registered_model = ref(new Set())
-let models = ref({})
-let global_sdp_ratio = ref(0.2)
-let global_sdp_ratio_selected = ref(false)
-let global_noise = ref(0.2)
-let global_noise_selected = ref(false)
-let global_noisew = ref(0.9)
-let global_noisew_selected = ref(false)
-let global_length = ref(1.0)
-let global_length_selected = ref(false)
-let global_speaker = ref("")
-let global_speaker_selected = ref(false)
-let global_language = ref("")
-let global_language_selected = ref(false)
-let select_all_choices = ref({
+const generate_audio_loading = ref(false)
+const delete_model_loading = ref(false)
+const registered_model = ref(new Set())
+const models = ref({})
+const global_sdp_ratio = ref(0.2)
+const global_sdp_ratio_selected = ref(false)
+const global_noise = ref(0.2)
+const global_noise_selected = ref(false)
+const global_noisew = ref(0.9)
+const global_noisew_selected = ref(false)
+const global_length = ref(1.0)
+const global_length_selected = ref(false)
+const global_speaker = ref("")
+const global_speaker_selected = ref(false)
+const global_language = ref("")
+const global_language_selected = ref(false)
+const select_all_choices = ref({
   status: false,
   type: "primary",
   text: "选项全选"
 })
-let select_all_models = ref({
+const select_all_models = ref({
   status: false,
   type: "primary",
   text: "模型全选"
 })
 const texts = ref("")
 export default {
   name: "infer",
-  components: {model_card, status_card, select_model},
+  components: {model_card, status_card, select_model, CheckOutlined, CloseOutlined},
   data() {
     return {
+      generate_audio_loading: generate_audio_loading,
+      delete_model_loading:delete_model_loading,
       colorTable: colorTable,
       models: models,
       texts: texts,
@@ -158,13 +163,15 @@ export default {
     async infers() {
       // 推理所有选中模型
       console.info(texts.value)
+      generate_audio_loading.value = true
       for (let id in models.value) {
         // 消除上次的音频
         models.value[id].audio.valid = false
         if (models.value[id].selected) {
           await this.infer_audio(texts.value, models.value[id])
         }
       }
+      generate_audio_loading.value = false
     },
 
     async translate(to_language) {
@@ -230,6 +237,7 @@ export default {
     async delete_selected_models() {
       // 卸载所有选中模型
       let url = `/models/delete`
+      delete_model_loading.value = true
       for (let model_id in models.value) {
         if (models.value[model_id].selected === true) {
           let params = {
@@ -242,29 +250,30 @@ export default {
           }
         }
       }
+      delete_model_loading.value = false
     },
 
     apply_global_setting() {
       for (let model_id in models.value) {
         if (models.value[model_id].selected === true) {
-          if(global_sdp_ratio_selected.value === true){
+          if (global_sdp_ratio_selected.value === true) {
             models.value[model_id].sdp_ratio = global_sdp_ratio.value
           }
-          if(global_noise_selected.value === true){
+          if (global_noise_selected.value === true) {
             models.value[model_id].noise = global_noise.value
           }
-          if(global_noisew_selected.value === true){
+          if (global_noisew_selected.value === true) {
             models.value[model_id].noisew = global_noisew.value
           }
-          if(global_length_selected.value === true){
+          if (global_length_selected.value === true) {
             models.value[model_id].length = global_length.value
           }
-          if(global_speaker_selected.value === true){
-            if(models.value[model_id].speakers.includes(global_speaker.value)){
+          if (global_speaker_selected.value === true) {
+            if (models.value[model_id].speakers.includes(global_speaker.value)) {
               models.value[model_id].speaker_name = global_speaker.value
             }
           }
-          if(global_language_selected.value === true){
+          if (global_language_selected.value === true) {
             models.value[model_id].language = global_language.value
           }
         }
@@ -304,9 +313,9 @@ export default {
               <a-space>
                 <a-button @click="translate('jp')"> 翻译日语</a-button>
                 <a-button @click="translate('en')"> 翻译英语</a-button>
-                <a-button> 快速切分</a-button>
-                <a-button type="primary" @click="infers"> 生成音频</a-button>
-                <a-button type="primary"> 切分生成音频</a-button>
+                <a-button v-show="false"> 快速切分</a-button>
+                <a-button type="primary" @click="infers" :loading="generate_audio_loading"> 生成音频</a-button>
+                <a-button v-show="false" type="primary"> 切分生成音频</a-button>
               </a-space>
             </a-row>
           </a-card>
@@ -436,7 +445,7 @@ export default {
                 </a-button>
               </a-col>
               <a-col :offset="1">
-                <a-button @click="delete_selected_models">卸载选中模型</a-button>
+                <a-button @click="delete_selected_models" :loading="delete_model_loading">卸载选中模型</a-button>
               </a-col>
               <a-col :offset="1">
                 <a-button @click="apply_global_setting">应用全局设置</a-button>