添加字幕的参数

components.d.ts

@@ -8,15 +8,19 @@ export {}
 declare module 'vue' {
   export interface GlobalComponents {
     ElButton: typeof import('element-plus/es')['ElButton']
+    ElCol: typeof import('element-plus/es')['ElCol']
+    ElColorPicker: typeof import('element-plus/es')['ElColorPicker']
     ElDialog: typeof import('element-plus/es')['ElDialog']
     ElDivider: typeof import('element-plus/es')['ElDivider']
     ElForm: typeof import('element-plus/es')['ElForm']
     ElFormItem: typeof import('element-plus/es')['ElFormItem']
     ElImage: typeof import('element-plus/es')['ElImage']
     ElInput: typeof import('element-plus/es')['ElInput']
+    ElInputNumber: typeof import('element-plus/es')['ElInputNumber']
     ElOption: typeof import('element-plus/es')['ElOption']
     ElRadio: typeof import('element-plus/es')['ElRadio']
     ElRadioGroup: typeof import('element-plus/es')['ElRadioGroup']
+    ElRow: typeof import('element-plus/es')['ElRow']
     ElSelect: typeof import('element-plus/es')['ElSelect']
     ElSlider: typeof import('element-plus/es')['ElSlider']
     ElSwitch: typeof import('element-plus/es')['ElSwitch']

src/views/home/compositions/useManyValues.ts

@@ -50,7 +50,7 @@ export const useManyValues = () => {
 
   const horizontal_data = {
     task_id: "20240209114425596",
-    chatgpt_prompt: `生成一个100字的小故事`,
+    chatgpt_prompt: `生成一个50字的小故事`,
     chatgpt_answer: ``,
     chatgpt_answer_roles: [],
     adapt_result_json: [],
@@ -59,7 +59,7 @@ export const useManyValues = () => {
 
   const vertical_data = {
     task_id: "20240220181602687",
-    chatgpt_prompt: `生成一个100字的科幻小故事，阿凡达系列`,
+    chatgpt_prompt: `生成一个50字的科幻小故事，阿凡达系列`,
     chatgpt_answer: ``,
     chatgpt_answer_roles: [],
     adapt_result_json: [],
@@ -68,7 +68,7 @@ export const useManyValues = () => {
 
   const en_vertical_data = {
     task_id: "20240225222232784",
-    chatgpt_prompt: `Generate a 100 word science fiction short story, Avatar series`,
+    chatgpt_prompt: `Generate a 50 words science fiction short story, Avatar series`,
     chatgpt_answer: ``,
     chatgpt_answer_roles: [],
     adapt_result_json: [],

src/views/home/index.vue

@@ -51,6 +51,9 @@ const bgm = ref("解忧曲")
 const bgm_volume = ref(0.3)
 const pwdCheckDialogVisible = ref(false);
 const pwdCheckValue = ref("")
+const sub_font_color = ref("#FFFF00")
+const sub_font_size = ref(30)
+const sub_position = ref(0.2)
 
 
 onMounted(() => {
@@ -361,6 +364,9 @@ const onGenVideo = () => {
     voice: voice.value,
     bgm: bgm.value,
     bgm_volume: bgm_volume.value,
+    sub_font_size: String(sub_font_size.value),
+    sub_font_color: sub_font_color.value,
+    sub_position: String(1 - sub_position.value),
   }
   text2videoService
     .submitGenVideo(video_param)
@@ -649,8 +655,16 @@ const onPwdCheckDialog = () => {
         <el-slider v-model="bgm_volume" show-input step="0.1" :min="0" :max="2" :marks="default_data.bgm_volume_marks" style="width: 600px" />
       </el-form-item>
       <el-form-item>
-        <span style="margin: 10px 20px">字幕：</span>
+        <span style="margin: 20px 20px">字幕：</span>
         <el-switch v-model="form.if_need_subtitle" active-value="true" inactive-value="false"/>
+        <div v-if="JSON.parse(form.if_need_subtitle.toLowerCase())">
+          <span style="margin-left:30px;">字体颜色：</span>
+          <el-color-picker v-model="sub_font_color"/>
+          <span style="margin-left:30px;">字体大小：</span>
+          <el-input-number v-model="sub_font_size" :min="1" :max="50" controls-position="right" />
+          <span style="margin-left:30px;">在屏幕上的位置：</span>
+          <el-slider v-model="sub_position" step="0.1" :min="0" :max="1" show-input vertical height="100px" />
+        </div>
       </el-form-item>
       <el-form-item>
         <el-button type="primary" @click="onGenVideo">生成视频</el-button>

src/views/home/index_en.vue

@@ -51,6 +51,9 @@ const bgm = ref("解忧曲")
 const bgm_volume = ref(0.3)
 const pwdCheckDialogVisible = ref(false);
 const pwdCheckValue = ref("")
+const sub_font_color = ref("#FFFF00")
+const sub_font_size = ref(30)
+const sub_position = ref(0.2)
 
 
 onMounted(() => {
@@ -361,6 +364,9 @@ const onGenVideo = () => {
     voice: voice.value,
     bgm: bgm.value,
     bgm_volume: bgm_volume.value,
+    sub_font_size: String(sub_font_size.value),
+    sub_font_color: sub_font_color.value,
+    sub_position: String(1 - sub_position.value),
   }
   text2videoService
     .submitGenVideo(video_param)
@@ -642,8 +648,16 @@ const onPwdCheckDialog = () => {
         <el-slider v-model="bgm_volume" show-input step="0.1" :min="0" :max="2" :marks="default_data.bgm_volume_marks" style="width: 600px" />
       </el-form-item>
       <el-form-item>
-        <span style="margin: 0 20px">字幕：</span>
+        <span style="margin: 20px 20px">字幕：</span>
         <el-switch v-model="form.if_need_subtitle" active-value="true" inactive-value="false"/>
+        <div v-if="JSON.parse(form.if_need_subtitle.toLowerCase())">
+          <span style="margin-left:30px;">字体颜色：</span>
+          <el-color-picker v-model="sub_font_color"/>
+          <span style="margin-left:30px;">字体大小：</span>
+          <el-input-number v-model="sub_font_size" :min="1" :max="50" controls-position="right" />
+          <span style="margin-left:30px;">在屏幕上的位置：</span>
+          <el-slider v-model="sub_position" step="0.1" :min="0" :max="1" show-input vertical height="100px" />
+        </div>
       </el-form-item>
       <el-form-item>
         <el-button type="primary" @click="onGenVideo">生成视频</el-button>