添加帮助页面

package.json

@@ -9,8 +9,11 @@
   },
   "dependencies": {
     "@ant-design/icons-vue": "^7.0.1",
+    "@highlightjs/vue-plugin": "^2.1.0",
     "ant-design-vue": "^4.0.6",
     "axios": "^1.5.1",
+    "highlight.js": "^11.9.0",
+    "unplugin-vue-markdown": "^0.24.3",
     "vue": "^3.3.4"
   },
   "devDependencies": {

src/Window.vue

@@ -22,9 +22,6 @@
         <a-menu-item key="2">
           <span>帮助</span>
         </a-menu-item>
-        <a-menu-item key="3">
-          <span>设置</span>
-        </a-menu-item>
       </a-menu>
     </a-layout-sider>
     <a-layout>

src/components/helps/infer.md

@@ -0,0 +1,13 @@
+---
+title: ""
+date: 2023-11-05
+description: ""
+---
+### 1. 模型激活
+模型只有在激活选中后才能进行推理或者应用全局设置。
++ 单个模型激活：点击模型卡片右上角滑块
++ 全部模型激活：全局设置-模型全选
+### 2. 全局设置
+在全局设置面板可以对已选中的模型进行批量参数修改
+### 3. 随机音频示例
+通过搜索指定根目录下的`train.list`与`var.list`文件，随机抽取一条训练使用的语音与文本用于推理与对比。需要指定抽取的根目录与语言，默认为`/Data`

src/components/helps/infer.vue

@@ -0,0 +1,19 @@
+<script>
+// 帮助/推理
+
+import infer from "@/components/helps/infer.md"
+export default {
+  name: "train",
+  components: {infer}
+}
+</script>
+
+<template>
+<a-card>
+  <infer/>
+</a-card>
+</template>
+
+<style scoped>
+
+</style>

src/components/helps/load_models.vue

@@ -1,12 +1,103 @@
 <script>
 // 帮助/模型加载
+import 'highlight.js/lib/common';
+import hljsVuePlugin from "@highlightjs/vue-plugin";
+
 export default {
-  name: "load_models"
+  name: "load_models",
+  components: {
+    highlightjs: hljsVuePlugin.component,
+  },
+  data() {
+    return {
+      yml: `
+      # config.yml文件
+
+      # server api配置
+      # 注意， “:” 后需要加空格
+      # 注意，本配置下的所有配置均为相对于根目录的路径
+      server:
+        # 端口号
+        port: 10086
+        # 模型默认使用设备
+        device: "cuda"
+        # 需要加载的所有模型的配置
+        models:
+          - # 模型的路径
+            model: "Data/9nine/models/G_390000.pth"
+            # 模型config.json的路径
+            config: "Data/9nine/config.json"
+            # 模型使用设备，若填写则会覆盖默认配置
+            device: "cuda"
+            # 模型默认使用的语言
+            language: "JP"
+            # 模型人物默认参数
+            # 不必填写所有人物，不填的使用默认值
+            # speakers配置暂时不生效
+            speakers: [ ]
+          - # 模型的路径
+            # hamidashi原
+            model: "Data/hamidashi/models/G_1070000.pth"
+            # 模型config.json的路径
+            config: "Data/hamidashi/config.json"
+            # 模型使用设备，若填写则会覆盖默认配置
+            device: "cuda"
+            # 模型默认使用的语言
+            language: "JP"
+            # 模型人物默认参数
+            # 不必填写所有人物，不填的使用默认值
+            speakers: [ ] # 也可以不填
+      `,
+      yml2: `
+      server:
+          # 端口号
+          port: 10086
+          # 模型默认使用设备
+          device: "cuda"
+          # 需要加载的所有模型的配置
+          models: [ ]
+      `
+    }
+  }
 }
 </script>
 
 <template>
+  <a-card>
+    <a-typography>
+      <a-typography-title :level="3">1. 初始化模型加载</a-typography-title>
+      <a-typography-paragraph>
+        通过配置<a-typography-text code>config.yml</a-typography-text>中的
+        <a-typography-text code>server.models</a-typography-text>属性，可以设定初始化时加载的模型，以及模型推理使用设备、模型默认使用语言。<br>
+        <highlightjs language="yaml" :code="yml"/>
+      </a-typography-paragraph>
+
+
+      <a-typography-paragraph>
+        若无需加载模型，只需将
+        <a-typography-text code>server.models</a-typography-text>的值改为<a-typography-text code>[ ]</a-typography-text>即可。
+        <highlightjs language="yaml" :code="yml2"/>
+      </a-typography-paragraph>
+      <br>
+
+      <a-typography-title :level="3">2. 模型动态加载</a-typography-title>
+      <a-typography-paragraph>
+        1. 网页允许动态加载任意模型。模型默认从<a-typography-text code>/Data</a-typography-text>目录下搜索加载。搜索目录可以自行指定，既允许使用相对于项目根路径的相对路径，也允许使用绝对路径。示例如下所示：<br>
+        使用相对路径：
+        <img src="/img/helps1.png" alt="" style="height: 10em">
+        <br>
+        <br>
+        使用绝对路径：
+        <img src="/img/helps2.png" alt="" style="height: 10em">
+        <br>
+        2. 每次加载均会查询相应搜索目录、搜索目录的子目录以及子目录的models文件夹中的所有<a-typography-text code>G_xxx.pth</a-typography-text>模型文件。出于搜索时间的考虑，不递归遍历整个目录。<br><br>
+        3. 在加载模型时会使用模型文件所在目录/模型文件所在上级目录的<a-typography-text code>config.json</a-typography-text>文件作为配置文件，优先使用所在目录的<a-typography-text code>config.json</a-typography-text>文件。<br><br>
+        4. 在加载模型前，可以设置模型加载设备，若希望使用cpu推理，则请将设备选项设为cpu，否则设为cuda。同时也可以指定模型的默认语言，如上图所示。<br><br>
+        5. 重复加载相同路径的模型不会消耗额外的内存
+      </a-typography-paragraph>
+    </a-typography>
 
+  </a-card>
 </template>
 
 <style scoped>

src/components/helps/safety.vue

@@ -6,7 +6,11 @@ export default {
 </script>
 
 <template>
-安全性说明
+  <a-typography>
+    <a-typography-title :level="2">请勿将本项目的网页对外网开放。
+    </a-typography-title>
+  </a-typography>
+
 </template>
 
 <style scoped>

src/components/infer/select_model.vue

@@ -103,7 +103,7 @@ export default {
     async load_all_models() {
       this.model_loading = true
       let models = this.selected_models
-      this.selected_models = []
+      // this.selected_models = []
       // 加载所有选中的模型
       for (let index in models) {
         await this.load_model(models[index], this.device, this.language)

src/help.vue

@@ -2,7 +2,7 @@
 // 帮助页面
 import load_models from "@/components/helps/load_models.vue";
 import safety from "@/components/helps/safety.vue";
-import train from "@/components/helps/train.vue";
+import infer from "@/components/helps/infer.vue";
 
 export default {
   name: "help",
@@ -11,7 +11,7 @@ export default {
       activeKey: "1"
     }
   },
-  components: {load_models, safety, train}
+  components: {load_models, safety, infer}
 }
 </script>
 
@@ -20,12 +20,12 @@ export default {
       title="帮助"
       style="border: 1px solid rgb(235, 237, 240)"
   />
-  <a-tabs v-model:activeKey="activeKey" type="card">
+  <a-tabs v-model:activeKey="activeKey" type="card" size="large">
     <a-tab-pane key="1" tab="模型加载">
       <load_models/>
     </a-tab-pane>
-    <a-tab-pane key="2" tab="训练">
-      <train/>
+    <a-tab-pane key="2" tab="推理">
+      <infer/>
     </a-tab-pane>
     <a-tab-pane key="3" tab="安全性说明">
       <safety/>

src/infer.vue

@@ -472,14 +472,15 @@ export default {
         <a-col :span="24">
           <a-card title="输入文本内容">
             <a-row justify="start" :gutter="[16,16]">
-              <a-textarea v-model:value="texts" placeholder="请输入文本" :rows="8"/>
+              <a-textarea v-model:value="texts" placeholder="请输入文本" :rows="7"/>
               <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-divider/>
               <a-col :span="24">
                 <a-space :size="24">
                   <a-button @click="get_random_audio"> 随机音频示例</a-button>

src/main.js

@@ -1,18 +1,25 @@
 import Antd from 'ant-design-vue';
 import 'ant-design-vue/dist/reset.css';
+import 'highlight.js/styles/stackoverflow-light.css'
+import hljs from 'highlight.js/lib/core';
+import javascript from 'highlight.js/lib/languages/javascript';
+import hljsVuePlugin from "@highlightjs/vue-plugin";
+
 import {createApp} from 'vue'
 import Window from './Window.vue'
 
 
+hljs.registerLanguage('javascript', javascript);
+
+
 const viewportWidth = window.innerWidth;
-if (2560 < viewportWidth && viewportWidth < 3840) {
-    document.body.style.zoom = "85%";
-} else if (viewportWidth < 2560) {
+console.log(window.innerWidth)
+if (viewportWidth < 2060) {
     document.body.style.zoom = "75%";
 }
 
 
 const app = createApp(Window)
 
-app.use(Antd).mount('#app')
+app.use(Antd).use(hljsVuePlugin).mount('#app')
 

vite.config.js

@@ -2,11 +2,16 @@ import { fileURLToPath, URL } from 'node:url'
 
 import { defineConfig } from 'vite'
 import vue from '@vitejs/plugin-vue'
+import Markdown from 'unplugin-vue-markdown/vite'
+
 
 // https://vitejs.dev/config/
 export default defineConfig({
   plugins: [
-    vue(),
+    vue({
+      include: [/\.vue$/, /\.md$/], // <-- allows Vue to compile Markdown files
+    }),
+    Markdown({ /* options */ }),
   ],
   resolve: {
     alias: {