新增随机音频示例功能。

src/Window.vue

@@ -25,15 +25,15 @@
         <a-menu-item key="3">
           <span>设置</span>
         </a-menu-item>
-        <a-menu-item key="4">
-          <span>训练</span>
-        </a-menu-item>
       </a-menu>
     </a-layout-sider>
     <a-layout>
       <a-layout-content style="margin: 0 16px" v-show="selectedKeys[0] === '1'">
         <infer></infer>
       </a-layout-content>
+      <a-layout-content style="margin: 0 16px" v-show="selectedKeys[0] === '2'">
+        <help></help>
+      </a-layout-content>
       <a-layout-footer style="text-align: center">
         Designed By Sora
       </a-layout-footer>
@@ -43,6 +43,7 @@
 <script>
 import {defineComponent} from "vue";
 import infer from "@/infer.vue";
+import help from "@/help.vue";
 
 
 export default defineComponent({
@@ -52,7 +53,7 @@ export default defineComponent({
       collapsed: true
     }
   },
-  components: {infer}
+  components: {infer, help}
 })
 </script>
 <style scoped>

src/components/helps/load_models.vue

@@ -0,0 +1,14 @@
+<script>
+// 帮助/模型加载
+export default {
+  name: "load_models"
+}
+</script>
+
+<template>
+
+</template>
+
+<style scoped>
+
+</style>

src/components/helps/safety.vue

@@ -0,0 +1,14 @@
+<script>
+// 帮助/安全性说明页面
+export default {
+  name: "safety"
+}
+</script>
+
+<template>
+安全性说明
+</template>
+
+<style scoped>
+
+</style>

src/components/helps/train.vue

@@ -0,0 +1,14 @@
+<script>
+// 帮助/训练
+export default {
+  name: "train"
+}
+</script>
+
+<template>
+
+</template>
+
+<style scoped>
+
+</style>

src/components/model_card.vue → src/components/infer/model_card.vue

@@ -28,8 +28,7 @@ export default {
 
     getName(text, name) {
       let name2 = name.replace(/^Data\\|^Data\//, '').replace(/models\\|models\//, '')
-      let text2 = text.substring(0,10)
-      return text2 + "@" + name2 + ".wav"
+      return text + "@" + name2 + ".wav"
     }
   }
 }

src/help.vue

@@ -0,0 +1,38 @@
+<script>
+// 帮助页面
+import load_models from "@/components/helps/load_models.vue";
+import safety from "@/components/helps/safety.vue";
+import train from "@/components/helps/train.vue";
+
+export default {
+  name: "help",
+  data() {
+    return {
+      activeKey: "1"
+    }
+  },
+  components: {load_models, safety, train}
+}
+</script>
+
+<template>
+  <a-page-header
+      title="帮助"
+      style="border: 1px solid rgb(235, 237, 240)"
+  />
+  <a-tabs v-model:activeKey="activeKey" type="card">
+    <a-tab-pane key="1" tab="模型加载">
+      <load_models/>
+    </a-tab-pane>
+    <a-tab-pane key="2" tab="训练">
+      <train/>
+    </a-tab-pane>
+    <a-tab-pane key="3" tab="安全性说明">
+      <safety/>
+    </a-tab-pane>
+  </a-tabs>
+</template>
+
+<style scoped>
+
+</style>

src/infer.vue

@@ -1,14 +1,16 @@
 <script>
-import select_model from "@/components/select_model.vue";
-import status_card from "@/components/status_card.vue";
-import model_card from "@/components/model_card.vue";
+// 推理页面
+
+import select_model from "@/components/infer/select_model.vue";
+import status_card from "@/components/infer/status_card.vue";
+import model_card from "@/components/infer/model_card.vue";
 import colorTable from "@/color";
 import axios from "axios";
-import {CheckOutlined, CloseOutlined} from "@ant-design/icons-vue";
+import {CheckOutlined, CloseOutlined, DownloadOutlined} from "@ant-design/icons-vue";
 
 export default {
   name: "infer",
-  components: {model_card, status_card, select_model, CheckOutlined, CloseOutlined},
+  components: {DownloadOutlined, model_card, status_card, select_model, CheckOutlined, CloseOutlined},
   data() {
     return {
       generate_audio_loading: false,
@@ -38,7 +40,17 @@ export default {
         status: false,
         type: "primary",
         text: "选项全选"
-      }
+      },
+      audio_dir: "Data",
+      random_audio: {
+        valid: false,
+        data: {
+          text: "",
+          src: "",
+          speaker: ""
+        }
+      },
+      random_language: "ZH"
     }
   },
   mounted() {
@@ -258,6 +270,41 @@ export default {
           }
         }
       }
+    },
+
+
+    async get_random_audio() {
+      // 获取随机音频
+      this.random_audio.valid = false
+      let url = `/tools/random_example`
+      let params = {
+        "language": this.random_language,
+        "root_dir": this.audio_dir
+      }
+      if (this.random_language === "随机"){
+        params = {
+          "root_dir": this.audio_dir
+        }
+      }
+      try {
+        let response = await axios.get(url, {params: params})
+        if (response.status === 200) {
+          let data = response.data
+          console.log(data)
+          if(data["status"] !== 0){
+            this.texts = data["detail"]
+            return
+          }
+          data = data["Data"]
+          this.random_audio.data.speaker = data["speaker"]
+          this.random_audio.data.text = data["text"]
+          this.texts = data["text"]
+          this.random_audio.valid = true
+          this.random_audio.data.src = `tools/get_audio?path=${data["audio"]}`
+        }
+      } catch (error) {
+        console.error(`音频获取失败`, error)
+      }
     }
   },
   computed: {
@@ -284,34 +331,7 @@ export default {
         <a-col :span="24">
           <status_card></status_card>
         </a-col>
-
-        <!-- 文本栏 -->
-        <a-col :span="24">
-          <a-card title="输入文本内容">
-            <a-row justify="start" :gutter="[16,16]">
-              <a-textarea v-model:value="texts" placeholder="请输入文本" :rows="7"/>
-              <a-space>
-                <a-button @click="translate('jp')"> 翻译日语</a-button>
-                <a-button @click="translate('en')"> 翻译英语</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>
-
-        </a-col>
-      </a-row>
-    </a-col>
-
-    <!--
-    <a-divider :style="{'background-color':colorTable[5], 'height':'2px'} "/>
-    -->
-    <a-col :span="12">
-      <a-row justify="start" :gutter="[16,16]" align="bottom">
-        <a-col :span="24">
-          <select_model></select_model>
-        </a-col>
+        <!-- 全局设置 -->
         <a-col :span="24">
           <a-card title="全局设置">
             <a-row align="middle" justify="start" wrap="true">
@@ -437,7 +457,67 @@ export default {
           </a-card>
         </a-col>
 
+      </a-row>
+    </a-col>
+
+    <!--
+    <a-divider :style="{'background-color':colorTable[5], 'height':'2px'} "/>
+    -->
+    <a-col :span="12">
+      <a-row justify="start" :gutter="[16,16]" align="bottom">
+        <a-col :span="24">
+          <select_model></select_model>
+        </a-col>
+        <!-- 文本栏 -->
+        <a-col :span="24">
+          <a-card title="输入文本内容">
+            <a-row justify="start" :gutter="[16,16]">
+              <a-textarea v-model:value="texts" placeholder="请输入文本" :rows="8"/>
+              <a-col :span="24">
+                <a-space :size="24">
+                  <a-button @click="translate('jp')"> 翻译日语</a-button>
+                  <a-button @click="translate('en')"> 翻译英语</a-button>
+                  <a-button type="primary" @click="infers" :loading="generate_audio_loading"> 生成音频</a-button>
+                </a-space>
+              </a-col>
+              <a-col :span="24">
+                <a-space :size="24">
+                  <a-button @click="get_random_audio"> 随机音频示例</a-button>
+                  <a-tooltip title="随机音频搜索目录">
+                    <a-input v-model:value="audio_dir" placeholder="随机音频目录"/>
+                  </a-tooltip>
+                  <a-tooltip title="随机音频搜索语言">
+                    <a-select
+                        ref="select"
+                        v-model:value="random_language"
+                        style="width: 100%"
+                        @focus="focus"
+                    >
+                      <a-select-option value="ZH"></a-select-option>
+                      <a-select-option value="JP"></a-select-option>
+                      <a-select-option value="EN"></a-select-option>
+                      <a-select-option value="随机"></a-select-option>
+                    </a-select>
+                  </a-tooltip>
+                </a-space>
+              </a-col>
+              <a-col :span="24">
+                <a-space v-show="random_audio.valid" size="large">
+                  <audio :src="random_audio.data.src" controls></audio>
+                  <a-button :href="random_audio.data.src"
+                            :download=" random_audio.data.speaker + ': ' + texts + '.wav'">
+                    <template #icon>
+                      <DownloadOutlined/>
+                    </template>
+                    下载音频
+                  </a-button>
+                </a-space>
+              </a-col>
+
+            </a-row>
+          </a-card>
 
+        </a-col>
       </a-row>
     </a-col>
 

src/main.js

@@ -7,8 +7,7 @@ import Window from './Window.vue'
 const viewportWidth = window.innerWidth;
 if (2560 < viewportWidth && viewportWidth < 3840) {
     document.body.style.zoom = "85%";
-}
-else if(viewportWidth<2560){
+} else if (viewportWidth < 2560) {
     document.body.style.zoom = "75%";
 }