增加字幕配置，修改英文版

components.d.ts

@@ -20,6 +20,7 @@ declare module 'vue' {
     ElRadioGroup: typeof import('element-plus/es')['ElRadioGroup']
     ElSelect: typeof import('element-plus/es')['ElSelect']
     ElSlider: typeof import('element-plus/es')['ElSlider']
+    ElSwitch: typeof import('element-plus/es')['ElSwitch']
     ElTable: typeof import('element-plus/es')['ElTable']
     ElTableColumn: typeof import('element-plus/es')['ElTableColumn']
     ElUpload: typeof import('element-plus/es')['ElUpload']

src/views/home/compositions/useManyValues.ts

@@ -81,8 +81,25 @@ export const useManyValues = () => {
   const vertical_data = {
     task_id: "20240220181602687",
     chatgpt_prompt: `生成一个100字的科幻小故事，阿凡达系列`,
-    chatgpt_answer: ``,
-    chatgpt_answer_roles: [],
+    chatgpt_answer: `在一个遥远的星球上，人类为了开采稀有资源，与当地的纳美族发生冲突。为了保护家园，纳美族少女娜娜带领族人与人类进行抗争。为了与纳美族更好地交流，人类科学家利用阿凡达技术，将人类意识输入到阿凡达身体中。娜娜在阿凡达身体中看到了人类的丑陋，也看到了纳美族的美好。最终，娜娜和人类科学家一起，成功阻止了人类的侵略，并传达了和平的信息。`,
+    chatgpt_answer_roles: [
+      {
+          "角色": "娜娜",
+          "角色关键词": "娜娜, 女性, 18岁, 白色皮肤, 穿着蓝色长裙, 长发, 浅金色发色, 红色脸庞, 五官端正,穿着衣服"
+      },
+      {
+          "角色": "纳美族",
+          "角色关键词": "纳美族: 女性, 年轻, 深蓝皮肤, 短发, 黑发, 红色脸颊, 眼睛明亮, 鼻子高挺,穿着衣服"
+      },
+      {
+          "角色": "人类",
+          "角色关键词": "人类: 男性, 年龄: 45岁, 肤色: 白色, 衣服: 军装, 发型: 短发, 发色: 黄色, 脸色: 苍白, 五官特点: 眼睛深邃, 鼻子挺直, 嘴巴紧闭,穿着衣服"
+      },
+      {
+          "角色": "人类科学家",
+          "角色关键词": "人类科学家：男性, 40岁, 白色皮肤, 穿着西装, 头发整齐的短发, 灰色的眼睛, 脸色苍白, 五官端正.,穿着衣服"
+      }
+  ],
     adapt_result_json: [],
     final_video: ``,
   };
@@ -119,6 +136,7 @@ export const useManyValues = () => {
     90: '+90%',
     100: '+100%',
   })
+
   const voices = [
     {
       value: 'zh-CN-liaoning-XiaobeiNeural',
@@ -185,6 +203,14 @@ export const useManyValues = () => {
     },
   ]
 
+  const voices_en = [
+    {
+      value: 'en-US-BrianNeural',
+      gender: 'Male',
+      label: '男，美式磁性',
+    },
+  ]
+
   const bgm = [
     {
       value: '',
@@ -210,6 +236,14 @@ export const useManyValues = () => {
       value: 'WindyHill',
       label: 'WindyHill',
     },
+    {
+      value: '雨声',
+      label: '雨声',
+    },
+    {
+      value: '大自然',
+      label: '大自然',
+    },
   ]
   
   return {
@@ -222,6 +256,7 @@ export const useManyValues = () => {
     en_vertical_data: en_vertical_data,
     marks: marks,
     voices: voices,
+    voices_en: voices_en,
     bgm: bgm,
   }
 }

src/views/home/index.vue

@@ -227,14 +227,28 @@ const onAdaptOne = async (item: any) => {
       // console.log(role_keywords)
       item.角色 = item_roles;
       let role_kws = ""
-      const item_roles_arr = item_roles.split(/[，,]/);
+      const item_roles_arr = item_roles.split(/[，,、]/);
       item_roles_arr.forEach( one_item_role => {
-        // 人工指定角色关键词，包含则取
-        form.chatgpt_answer_roles.forEach(i => {
+        let temp_role_kws = ""
+        // 人工匹配角色关键词，先找想同的
+        for (const i of form.chatgpt_answer_roles) {
+          if (i["角色"].trim() == one_item_role.trim()) {
+            temp_role_kws = `【${i["角色"]}：${i["角色关键词"]}】`;
+            // 找到就ok
+            break;
+          }
+        }
+        // 如果找不到相同的，则模糊匹配
+        if (! temp_role_kws) {
+          for (const i of form.chatgpt_answer_roles) {
             if (i["角色"].includes(one_item_role.trim()) || one_item_role.includes(i["角色"].trim())) {
-            role_kws = `${role_kws} 【${i["角色"]}：${i["角色关键词"]}】`
+              temp_role_kws = `【${i["角色"]}：${i["角色关键词"]}】`;
+              // 匹配到一个就ok
+              break;
             }
-        })
+          }
+        }
+        role_kws = `${role_kws}${temp_role_kws}`;
       })
       item.角色关键词 = role_kws;
     }
@@ -598,6 +612,10 @@ const handleExceed: UploadProps['onExceed'] = (files) => {
         </el-select>
         <audio :src="'src/assets/bgm/' + bgm + '.mp3'" controls style="height: 30px; margin-left:10px;"></audio>
       </el-form-item>
+      <el-form-item>
+        <span style="margin: 0 20px">字幕：</span>
+        <el-switch v-model="form.if_need_subtitle" active-value="true" inactive-value="false"/>
+      </el-form-item>
       <el-form-item>
         <el-button type="primary" @click="onGenVideo">生成视频</el-button>
       </el-form-item>

src/views/home/index_en.vue

@@ -44,6 +44,10 @@ const tuili_llm_name = gpt.name
 const fanyi_llm = gpt.api
 const fanyi_llm_name = gpt.name
 
+const voice_rate = ref(-15)
+const voice_volume = ref(0)
+const voice = ref("en-US-BrianNeural")
+const bgm = ref("")
 
 onMounted(() => {
   // 初始化示例数据
@@ -222,14 +226,28 @@ const onAdaptOne = async (item: any) => {
       // console.log(role_keywords)
       item.角色 = item_roles;
       let role_kws = ""
-      const item_roles_arr = item_roles.split(/[，,]/);
+      const item_roles_arr = item_roles.split(/[，,、]/);
       item_roles_arr.forEach( one_item_role => {
-        // 人工指定角色关键词，包含则取
-        form.chatgpt_answer_roles.forEach(i => {
+        let temp_role_kws = ""
+        // 人工匹配角色关键词，先找想同的
+        for (const i of form.chatgpt_answer_roles) {
+          if (i["角色"].trim() == one_item_role.trim()) {
+            temp_role_kws = `[${i["角色"]}: ${i["角色关键词"]}]`;
+            // 找到就ok
+            break;
+          }
+        }
+        // 如果找不到相同的，则模糊匹配
+        if (! temp_role_kws) {
+          for (const i of form.chatgpt_answer_roles) {
             if (i["角色"].includes(one_item_role.trim()) || one_item_role.includes(i["角色"].trim())) {
-            role_kws = `${role_kws} 【${i["角色"]}：${i["角色关键词"]}】`
+              temp_role_kws = `[${i["角色"]}: ${i["角色关键词"]}]`;
+              // 匹配到一个就ok
+              break;
             }
-        })
+          }
+        }
+        role_kws = `${role_kws}${temp_role_kws}`;
       })
       item.角色关键词 = role_kws;
     }
@@ -319,11 +337,19 @@ const onGenVideo = () => {
       img_path: item.local_image_path
     };
   });
+  let para_rate = `${voice_rate.value}%`;
+  let para_volume = `${voice_volume.value}%`;
+  if(voice_rate.value >= 0){para_rate = `+${para_rate}`}
+  if(voice_volume.value >= 0){para_volume = `+${para_volume}`}
   const video_param = {
     task_id: form.task_id,
     if_need_subtitle: form.if_need_subtitle,
     lang: 'en',
     task_info: video_param_detail,
+    rate: para_rate,
+    volume: para_volume,
+    voice: voice.value,
+    bgm: bgm.value,
   }
   text2videoService
     .submitGenVideo(video_param)
@@ -528,6 +554,60 @@ const handleExceed: UploadProps['onExceed'] = (files) => {
         </el-table>
       </el-form-item>
       <!-- 生成视频 -->
+      <el-form-item label="设置">
+        <span style="margin: 0 20px">语速：</span>
+        <el-slider v-model="voice_rate" show-input :min="-50" :max="50" :marks="default_data.marks" style="width: 900px" />
+      </el-form-item>
+      <el-form-item>
+        <span style="margin: 0 20px">音量：</span>
+        <el-slider v-model="voice_volume" show-input :min="-80" :max="80" :marks="default_data.marks" style="width: 900px" />
+      </el-form-item>
+      <el-form-item>
+        <span style="margin: 20px 20px 0 20px">语音：</span>
+        <el-select v-model="voice" placeholder="Select" style="width: 400px; margin-top: 20px;">
+          <el-option
+            v-for="item in default_data.voices_en"
+            :key="item.value"
+            :label="item.value"
+            :value="item.value"
+          >
+            <span style="float: left">{{ item.value }}</span>
+            <span
+              style="
+                float: right;
+                color: var(--el-text-color-secondary);
+                font-size: 13px;
+              "
+              >{{ item.label }}</span>
+          </el-option>
+        </el-select>
+        <audio :src="'src/assets/edge-tts-voices/' + voice + '.mp3'" controls style="height: 30px; margin: 20px 0 0 10px;"></audio>
+      </el-form-item>
+      <el-form-item>
+        <span style="margin: 0 20px">背景：</span>
+        <el-select v-model="bgm" placeholder="无" style="width: 400px;">
+          <el-option
+            v-for="item in default_data.bgm"
+            :key="item.value"
+            :label="item.value"
+            :value="item.value"
+          >
+            <span style="float: left">{{ item.label }}</span>
+            <span
+              style="
+                float: right;
+                color: var(--el-text-color-secondary);
+                font-size: 13px;
+              "
+              >{{ item.value }}</span>
+          </el-option>
+        </el-select>
+        <audio :src="'src/assets/bgm/' + bgm + '.mp3'" controls style="height: 30px; margin-left:10px;"></audio>
+      </el-form-item>
+      <el-form-item>
+        <span style="margin: 0 20px">字幕：</span>
+        <el-switch v-model="form.if_need_subtitle" active-value="true" inactive-value="false"/>
+      </el-form-item>
       <el-form-item>
         <el-button type="primary" @click="onGenVideo">生成视频</el-button>
       </el-form-item>