diff --git a/src/api/service/text2videoService.ts b/src/api/service/text2videoService.ts index d35db84b50d21a48d736f0bcdb96bb0610c5749b..1e19636b94ddf0f1c5d7d801f8cab672ce4f63fc 100644 --- a/src/api/service/text2videoService.ts +++ b/src/api/service/text2videoService.ts @@ -222,4 +222,40 @@ export default { return Promise.reject(`与Test Api通讯失败`); }); }, + + submitImgToText(param: any): Promise<string> { + const post_data = param; + return request.post('/text2video/img2text', post_data) + .then((res: any) => { + // console.log(res); + if (res && res.code === 0) { + return res.data.result; + } else { + const errorMessage = res ? res.message : "未知错误"; + return Promise.reject(errorMessage); + } + }) + .catch((err: any) => { + console.log(`err = ${JSON.stringify(err)}`); + return Promise.reject(`与Img2Text Api通讯失败`); + }); + }, + + submitImgTextMatch(param: any): Promise<any[]> { + const post_data = param; + return request.post('/text2video/img_text_match', post_data) + .then((res: any) => { + // console.log(res); + if (res && res.code === 0) { + return res.data.result; + } else { + const errorMessage = res ? res.message : "未知错误"; + return Promise.reject(errorMessage); + } + }) + .catch((err: any) => { + console.log(`err = ${JSON.stringify(err)}`); + return Promise.reject(`与ImgTextMatch Api通讯失败`); + }); + }, } diff --git a/src/views/home/compositions/useManyValues.ts b/src/views/home/compositions/useManyValues.ts index e4e173fb2a2f7b759766fb0e93149a92bd892358..5a8b5b2396be0cf3af9ddaabd6e8195926bd925c 100644 --- a/src/views/home/compositions/useManyValues.ts +++ b/src/views/home/compositions/useManyValues.ts @@ -64,7 +64,7 @@ export const useManyValues = () => { const horizontal_data = { task_id: "20240209114425596", chatgpt_prompt: `生æˆä¸€ä¸ª50å—çš„å°æ•…事`, - chatgpt_answer: ``, + chatgpt_answer: `在一个充满神秘色彩的森林里,活泼的绿衣少年,身ç€é»„色é…饰,眼神明亮如è“å®çŸ³ï¼Œæ‰‹æ¡å°æœ¨æ£’ï¼Œè„¸ä¸Šæ´‹æº¢ç€æŽ¢ç´¢çš„å–œæ‚¦ã€‚ä»–çš„ç¬‘å®¹æ¸©æš–å¦‚é˜³å…‰ï¼Œèº«åŽæ˜¯éƒéƒè‘±è‘±çš„æ ‘木,仿佛在邀请勇敢者è¸è¶³æœªçŸ¥ã€‚一个å°çƒŸç°ç¼¸é™é™åœ°èººåœ¨ä¸€æ—,è§è¯ç€ä»–çš„æ¯ä¸€æ¬¡å†’险。`, chatgpt_answer_roles: [], all_roles: "", adapt_result_json: [ @@ -80,7 +80,8 @@ export const useManyValues = () => { "本镜é…图": "http://wm-tools-backend.frp.wmdigit.com:8888/assets/outputs/20240209114425596/img/1_resized.png?v=20240321152031224", "local_image_path": "assets/outputs/20240209114425596/img/1_resized.png", "info": "", - "roles": [] + "roles": [], + "info2": "", }, { "ç¼–å·": "2", @@ -94,7 +95,8 @@ export const useManyValues = () => { "本镜é…图": "http://wm-tools-backend.frp.wmdigit.com:8888/assets/outputs/20240209114425596/img/2_resized.png?v=20240321152034264", "local_image_path": "assets/outputs/20240209114425596/img/2_resized.png", "info": "", - "roles": [] + "roles": [], + "info2": "", } ], final_video: ``, @@ -137,7 +139,8 @@ export const useManyValues = () => { "本镜é…图": "http://wm-tools-backend.frp.wmdigit.com:8888/assets/outputs/20240320160758713/img/1_resized.png?v=20240320160811071", "local_image_path": "assets/outputs/20240320160758713/img/1_resized.png", "info": "", - "roles": [] + "roles": [], + "info2": "", } ], all_roles: "å°æ¾é¼ , 大熊, ç‹ç‹¸", diff --git a/src/views/home/index.vue b/src/views/home/index.vue index 101c0cff5ace04eb01457f399ea1715aeb4c3fa7..cf621a1061abc7612506c333e17bcfbc12489192 100644 --- a/src/views/home/index.vue +++ b/src/views/home/index.vue @@ -94,6 +94,14 @@ const inPaintType = ref(""); const inPaintItem = ref(); const inPaintPrompt = ref(""); +const update_and_modify_product = reactive({ + if_need: "false", + pic: "src/assets/waiting.png", + pic_local: "", + pic_preview: "src/assets/waiting.png", + pic_preview_local: "", +}); + onMounted(() => { // åˆå§‹åŒ–task_id @@ -267,7 +275,8 @@ const onAdapt = async (type: string) => { const sentences = utils.splitText(form.chatgpt_answer, type); // console.log(sentences.length) // 分镜 - form.adapt_result_json = [] + form.adapt_result_json = []; + let texts = []; for (let i = 0; i < sentences.length; i++) { form.adapt_result_json.push({ "ç¼–å·": (i + 1).toString(), @@ -282,9 +291,47 @@ const onAdapt = async (type: string) => { "local_image_path": "", "info": "", "roles": [], + "info2": "", }); + texts.push({ + idx: (i + 1).toString(), + text: sentences[i].trim(), + }) + }; + // 匹é…产å“图到最åˆé€‚的场景 + if (update_and_modify_product.pic_local && update_and_modify_product.pic_local != ''){ + let para = { + task_id: form.task_id, + image_path: update_and_modify_product.pic_local, + texts: texts, + }; + try { + const result = await text2videoService.submitImgTextMatch(para); + // 找到最高的分数 + const highestScoreObject = result.reduce((maxObj, currObj) => { + return currObj.score > maxObj.score ? currObj : maxObj; + }, { score: -Infinity }); + // 将最高的分数匹é…åˆ°åœºæ™¯ä¸ + for (const item of form.adapt_result_json) { + if (item.ç¼–å· == highestScoreObject.idx) { + item.本镜é…图 = update_and_modify_product.pic; + item.local_image_path = update_and_modify_product.pic_local; + item.info2 = '产å“图与场景匹é…度:'+highestScoreObject.score; + } + // 顺便将返回结果的分数都匹é…åˆ°åœºæ™¯ä¸ + const matchInResult = result.find((r) => item.ç¼–å· == r.idx); + if (matchInResult) { + item.info2 = '产å“图与场景匹é…度:'+matchInResult.score; + } + } + } catch (error) { + ElMessage({ + message: String(error), + type: "error", + }); + } } - console.log(form.adapt_result_json) + console.log(form.adapt_result_json); } @@ -299,7 +346,9 @@ const onAdaptScene = async () => { loading.value = true; async function processScenes() { for (const item of form.adapt_result_json) { - await onAdaptOneScene(item); + if (item.local_image_path == '') { + await onAdaptOneScene(item); + } } } try { @@ -562,7 +611,7 @@ const onDraw = async () => { } let is_all_ok = true; for (const item of form.adapt_result_json) { - if (!item.åœºæ™¯å…³é”®è¯ && !item.角色关键è¯) { + if (!item.åœºæ™¯å…³é”®è¯ && !item.è§’è‰²å…³é”®è¯ && item.local_image_path == '') { ElMessage({ message: `分镜 ${item.ç¼–å·} 关键è¯ä¸ºç©ºï¼Œè¯·é‡æ–°æŽ¨ç†æœ¬é•œ`, type: "error", @@ -573,9 +622,11 @@ const onDraw = async () => { }; if (is_all_ok) { for (const item of form.adapt_result_json) { - // onDrawOne(item); - // å› 3090显å˜ä¸å¤Ÿï¼Œæš‚时改æˆä¸²è¡Œç”»å›¾ - await onDrawOne(item); + if (item.local_image_path == '') { + // onDrawOne(item); + // å› 3090显å˜ä¸å¤Ÿï¼Œæš‚时改æˆä¸²è¡Œç”»å›¾ + await onDrawOne(item); + } } } }; @@ -767,6 +818,9 @@ const clean_data = () => { cover_backcover.product_pic_titles = <Wm.PicText[]>[]; cover_backcover.product_pic_speech = ""; + update_and_modify_product.pic = ""; + update_and_modify_product.pic_local = ""; + } const clean_roles = () => { @@ -829,6 +883,8 @@ const onChangeScreen = (val: string) => { // cover_backcover.cover_pic_with_text = default_data.cover_backcover.cover_pic_with_text; // cover_backcover.cover_pic_with_text_local = default_data.cover_backcover.cover_pic_with_text_local; + update_and_modify_product.pic = "http://127.0.0.1:5001/assets/2024/04/18/b7f41e18-fd2f-11ee-980d-76e065928c9e_resized.png?v=20240418112349682"; + update_and_modify_product.pic_local = "assets/2024/04/18/b7f41e18-fd2f-11ee-980d-76e065928c9e_resized.png"; } // 宽高 @@ -1415,7 +1471,6 @@ const showInPaintDialog = (type: string, item: any) => { } - const onSubmitInPaint = async () => { if (!form.task_id) { ElMessage({ @@ -1424,11 +1479,6 @@ const onSubmitInPaint = async () => { }); return; } - - // console.log('333', inPaintBaseImgData.value) - // console.log('333', inPaintMaskData.value) - // return; - if (!inPaintBaseImgData.value || !inPaintMaskData.value) { ElMessage({ message: "请在图片上涂抹需è¦ä¿ç•™çš„部分ï¼", @@ -1436,7 +1486,6 @@ const onSubmitInPaint = async () => { }); return; } - if (!inPaintPrompt.value || inPaintPrompt.value.length==0) { ElMessage({ message: "è¯·å¡«å†™ç”»é¢æè¿°ï¼", @@ -1444,7 +1493,6 @@ const onSubmitInPaint = async () => { }); return; } - const sampler_index = sd_model.sampler_index; const seed = sd_model.seed; const steps = sd_model.steps; @@ -1527,6 +1575,63 @@ const onSubmitInPaint = async () => { inPaintVisible.value = false; // å…³é—å¯¹è¯æ¡† } } + + +// ä¸Šä¼ è‡ªå®šä¹‰çš„äº§å“图 +const upload_update_and_modify_product = ref<UploadInstance>(); + +const UploadAndModifyProductPicSuccess = (val: Wm.UploadResult) => { + if (val.code == 0) { + update_and_modify_product.pic = val.data[0].url + "?v=" + utils.genDateTimeStr(); + update_and_modify_product.pic_local = val.data[0].path; + // è§£æžå†…容 + const param = { + task_id: form.task_id, + image_path: update_and_modify_product.pic_local, + prompt: "找到图片ä¸çš„æ‰€æœ‰æ–‡å—,ç†è§£å›¾ç‰‡ä¸çš„商å“ä¿¡æ¯å’ŒèƒŒæ™¯ä¿¡æ¯", + } + text2videoService + .submitImgToText(param) + .then((result: string) => { + ElMessage({ + message: 'ä¸Šä¼ æˆåŠŸ', + type: 'success' + }) + if(form.chatgpt_prompt == ''){ + form.chatgpt_prompt = result + ' æ ¹æ®ä»¥ä¸Šä¿¡æ¯ï¼Œç¼–写一段50å—çš„å°æ•…事。'; + } else { + form.chatgpt_prompt = result + ' æ ¹æ®ä»¥ä¸Šä¿¡æ¯ï¼Œ' + form.chatgpt_prompt; + } + }) + .catch((error: any) => { + ElMessage({ + message: 'è§£æžå¤±è´¥ï¼š'+error, + type: "error", + }); + }); + } else { + ElMessage({ + message: 'ä¸Šä¼ å¤±è´¥ï¼š'+val.message, + type: 'error' + }) + } +} +const handleUploadAndModifyProductPicExceed: UploadProps['onExceed'] = (files) => { + // æ¸…é™¤å·²ä¸Šä¼ çš„æ–‡ä»¶ + upload_update_and_modify_product.value!.clearFiles() + // 获å–超出é™åˆ¶çš„第一个文件 + const file = files[0] as UploadRawFile + // 给文件分é…ä¸€ä¸ªæ–°çš„å”¯ä¸€æ ‡è¯† + file.uid = genFileId() + // æ‰‹åŠ¨è§¦å‘æ–‡ä»¶ä¸Šä¼ + upload_update_and_modify_product.value!.handleStart(file) + // æäº¤ä¸Šä¼ + upload_update_and_modify_product.value!.submit() +} +const onClearUploadAndModifyProductPic = () => { + update_and_modify_product.pic = 'src/assets/waiting.png'; + update_and_modify_product.pic_local = ''; +}; </script> <template> @@ -1546,6 +1651,61 @@ const onSubmitInPaint = async () => { <el-button type="success" @click="clean_data">清除所有数æ®</el-button> <!-- <el-button type="danger" @click="onTest">测试</el-button> --> </el-form-item> + <!-- 产å“图 --> + <el-form-item label="产å“图"> + <el-switch + v-model="update_and_modify_product.if_need" + active-value="true" + inactive-value="false" + /> + </el-form-item> + <div v-if="JSON.parse(update_and_modify_product.if_need.toLowerCase())"> + <el-form-item> + <div + :style="{ width: String(parseInt(form.img_size.width) / 3) + 'px' }" + class="dashed-div" + > + <el-image :src="update_and_modify_product.pic" /> + </div> + <!-- <div + :style="{ width: String(parseInt(form.img_size.width) / 3) + 'px' }" + class="dashed-div" + style="margin-left: 20px" + > + <el-image :src="update_and_modify_product.pic_preview" /> + </div> --> + </el-form-item> + <el-form-item> + <el-upload + ref="upload_update_and_modify_product" + :show-file-list="false" + :limit="1" + accept=".png,.PNG,.jpg,.JPG,.jpeg,.JPEG,.gif,.GIF,.bmp,.BMP" + :action="actionUrl" + :on-success="UploadAndModifyProductPicSuccess" + :on-exceed="handleUploadAndModifyProductPicExceed" + :on-error="handleUploadError" + :data="{ width: form.img_size.width, height: form.img_size.height }" + :before-upload="handleBeforeUpload" + > + <el-button type="primary" size="small">ä¸Šä¼ å›¾ç‰‡å¹¶è§£æžå†…容</el-button> + </el-upload> + <el-button + plain + size="small" + @click="onClearUploadAndModifyProductPic" + style="margin-left: 12px" + >清除图片</el-button + > + <!-- <el-button + type="primary" + size="small" + @click="showInPaintDialog('product', '')" + style="margin-left: 12px" + >局部é‡ç»˜</el-button + > --> + </el-form-item> + </div> <!-- Prompt到文案 --> <el-form-item label="Prompt"> <el-input v-model="form.chatgpt_prompt" :autosize="true" type="textarea" /> @@ -1634,8 +1794,8 @@ const onSubmitInPaint = async () => { <!-- 分镜 --> <el-form-item> <el-button type="primary" @click="onAdapt('default')">åˆ†é•œï¼šæ ‡å‡†æ¨¡å¼</el-button> - <el-button type="primary" @click="onAdapt('more_scene')" - >分镜:更多场景模å¼</el-button + <el-button type="success" @click="onAdapt('more_scene')" + >分镜:丰富场景模å¼</el-button > <el-button type="primary" @click="onAdaptScene" >推ç†åœºæ™¯ï¼ˆ{{ tuili_llm.name }})</el-button @@ -1660,6 +1820,7 @@ const onSubmitInPaint = async () => { :autosize="true" type="textarea" ></el-input> + <el-text class="mx-1" size="small">{{ scope.row.info2 }}</el-text> </template> </el-table-column> <el-table-column prop="场景关键è¯" label="场景关键è¯"> @@ -1852,7 +2013,7 @@ const onSubmitInPaint = async () => { </el-select> <span>帧åšå°é¢</span> <el-button - type="danger" + plain size="small" @click="onClearMarketingTemplatePic('cover')" style="margin-left: 12px" @@ -1968,7 +2129,7 @@ const onSubmitInPaint = async () => { <el-button type="primary" size="small">ä¸Šä¼ å›¾ç‰‡</el-button> </el-upload> <el-button - type="danger" + plain size="small" @click="onClearMarketingTemplatePic('product')" style="margin-left: 12px" diff --git a/src/views/home/index_en.vue b/src/views/home/index_en.vue index 60219db135a35207257de9f8af2d8215068c4b5c..135b4db975951c40b1ddd6a268136c68ba9e5485 100644 --- a/src/views/home/index_en.vue +++ b/src/views/home/index_en.vue @@ -181,6 +181,7 @@ const onAdapt = async () => { "local_image_path": "", "info": "", "roles": [], + "info2": "", }); } console.log(form.adapt_result_json) @@ -500,8 +501,8 @@ const onPwdCheckDialog = () => { <el-form-item> <div> <el-radio-group v-model="form.screen" @change="onChangeScreen"> - <el-radio label="横å±" size="large" border/> - <el-radio label="ç«–å±" size="large" border/> + <el-radio label="横å±" size="large" border /> + <el-radio label="ç«–å±" size="large" border /> </el-radio-group> </div> </el-form-item> @@ -513,62 +514,110 @@ const onPwdCheckDialog = () => { <el-input v-model="form.chatgpt_prompt" :autosize="true" type="textarea" /> </el-form-item> <el-form-item> - <el-button type="primary" @click="onSubmitGpt">ç”Ÿæˆæ–‡æ¡ˆï¼ˆ{{wenan_llm_name}})</el-button> + <el-button type="primary" @click="onSubmitGpt" + >ç”Ÿæˆæ–‡æ¡ˆï¼ˆ{{ wenan_llm_name }})</el-button + > </el-form-item> <el-form-item label="文案"> <el-input v-model="form.chatgpt_answer" :autosize="true" type="textarea" /> </el-form-item> <!-- 角色 --> <el-form-item> - <el-button type="primary" @click="onAdaptRoles">推ç†è§’色({{role_llm_name}}ï¼‰ã€æŽ¨ç†è§’色关键è¯ï¼ˆ{{role_keywords_llm_name}})</el-button> + <el-button type="primary" @click="onAdaptRoles" + >推ç†è§’色({{ role_llm_name }}ï¼‰ã€æŽ¨ç†è§’色关键è¯ï¼ˆ{{ + role_keywords_llm_name + }})</el-button + > <el-button plain @click="clean_roles">清空总角色列表</el-button> </el-form-item> <el-form-item label="角色"> - <el-table :data="form.chatgpt_answer_roles" border style="width: 100%; z-index: calc(var(--el-table-index) -1)"> + <el-table + :data="form.chatgpt_answer_roles" + border + style="width: 100%; z-index: calc(var(--el-table-index) -1)" + > <el-table-column prop="角色" label="角色"> <template v-slot="scope"> - <el-input v-model="scope.row.角色" :autosize="true" type="textarea"></el-input> + <el-input + v-model="scope.row.角色" + :autosize="true" + type="textarea" + ></el-input> </template> </el-table-column> <el-table-column prop="角色关键è¯" label="角色关键è¯"> <template v-slot="scope"> - <el-input v-model="scope.row.角色关键è¯" :autosize="true" type="textarea"></el-input> + <el-input + v-model="scope.row.角色关键è¯" + :autosize="true" + type="textarea" + ></el-input> </template> </el-table-column> </el-table> </el-form-item> <!-- 分镜 --> <el-form-item> - <el-button type="primary" @click="onAdapt">åˆ†é•œã€æŽ¨ç†åœºæ™¯å…³é”®è¯ï¼ˆ{{tuili_llm_name}})ã€è‹±æ–‡æè¿°ï¼ˆ{{fanyi_llm_name}})ã€ç»˜å›¾</el-button> + <el-button type="primary" @click="onAdapt" + >åˆ†é•œã€æŽ¨ç†åœºæ™¯å…³é”®è¯ï¼ˆ{{ tuili_llm_name }})ã€è‹±æ–‡æè¿°ï¼ˆ{{ + fanyi_llm_name + }})ã€ç»˜å›¾</el-button + > </el-form-item> <el-form-item label="分镜"> - <el-table :data="form.adapt_result_json" border style="width: 100%; z-index: calc(var(--el-table-index) -1)"> + <el-table + :data="form.adapt_result_json" + border + style="width: 100%; z-index: calc(var(--el-table-index) -1)" + > <el-table-column prop="ç¼–å·" label="ç¼–å·" width="60" /> <el-table-column prop="场景æè¿°" label="场景æè¿°"> <template v-slot="scope"> - <el-input v-model="scope.row.场景æè¿°" :autosize="true" type="textarea"></el-input> + <el-input + v-model="scope.row.场景æè¿°" + :autosize="true" + type="textarea" + ></el-input> </template> </el-table-column> <el-table-column prop="场景关键è¯" label="场景关键è¯"> <template v-slot="scope"> - <el-input v-model="scope.row.场景关键è¯" :autosize="true" type="textarea"></el-input> + <el-input + v-model="scope.row.场景关键è¯" + :autosize="true" + type="textarea" + ></el-input> </template> </el-table-column> <el-table-column prop="角色" label="角色"> <template v-slot="scope"> - <el-input v-model="scope.row.角色" :autosize="true" type="textarea"></el-input> + <el-input + v-model="scope.row.角色" + :autosize="true" + type="textarea" + ></el-input> </template> </el-table-column> <el-table-column prop="角色关键è¯" label="角色关键è¯"> <template v-slot="scope"> - <el-input v-model="scope.row.角色关键è¯" :autosize="true" type="textarea"></el-input> + <el-input + v-model="scope.row.角色关键è¯" + :autosize="true" + type="textarea" + ></el-input> </template> </el-table-column> <el-table-column prop="本镜é…图" label="本镜é…图" width="300"> <template v-slot="scope"> <div> - <el-image :src="scope.row.本镜é…图" :zoom-rate="1.2" :max-scale="1.5" :min-scale="0.5" - :preview-src-list="[scope.row.本镜é…图]" fit="cover" :hide-on-click-modal="true" + <el-image + :src="scope.row.本镜é…图" + :zoom-rate="1.2" + :max-scale="1.5" + :min-scale="0.5" + :preview-src-list="[scope.row.本镜é…图]" + fit="cover" + :hide-on-click-modal="true" /> </div> </template> @@ -580,8 +629,16 @@ const onPwdCheckDialog = () => { </template> --> <template v-slot="scope"> - <div style="margin: 10px 0"><el-button type="primary" size="default" @click="onAdaptOne(scope.row)">推ç†å…³é”®è¯</el-button></div> - <div style="margin: 10px 0"><el-button type="primary" size="default" @click="onDrawOne(scope.row)">翻译ã€ç»˜å›¾</el-button></div> + <div style="margin: 10px 0"> + <el-button type="primary" size="default" @click="onAdaptOne(scope.row)" + >推ç†å…³é”®è¯</el-button + > + </div> + <div style="margin: 10px 0"> + <el-button type="primary" size="default" @click="onDrawOne(scope.row)" + >翻译ã€ç»˜å›¾</el-button + > + </div> <el-upload class="upload-demo" ref="upload" @@ -591,19 +648,22 @@ const onPwdCheckDialog = () => { :action="actionUrl" :on-success="handleUploadSuccess" :on-exceed="handleExceed" - :data="{item_id: scope.row.ç¼–å·}" + :data="{ item_id: scope.row.ç¼–å· }" > - <el-button type="primary" @click="onClickUpload(scope.row)">ä¸Šä¼ å›¾ç‰‡</el-button> + <el-button type="primary" @click="onClickUpload(scope.row)" + >ä¸Šä¼ å›¾ç‰‡</el-button + > </el-upload> - <div style="margin: 10px 0"><el-button plain @click="showsdprompt(scope.row)">debug</el-button></div> - <el-dialog - v-model=dialogVisible - width="80%" - > + <div style="margin: 10px 0"> + <el-button plain @click="showsdprompt(scope.row)">debug</el-button> + </div> + <el-dialog v-model="dialogVisible" width="80%"> <p>{{ dialogData }}</p> <template #footer> <div class="dialog-footer"> - <el-button type="primary" @click="dialogVisible = false">ok</el-button> + <el-button type="primary" @click="dialogVisible = false" + >ok</el-button + > </div> </template> </el-dialog> @@ -614,15 +674,33 @@ const onPwdCheckDialog = () => { <!-- 生æˆè§†é¢‘ --> <el-form-item label="设置"> <span style="margin: 0 20px">TTSè¯é€Ÿï¼š</span> - <el-slider v-model="voice_rate" show-input :min="-50" :max="50" :marks="default_data.marks" style="width: 900px" /> + <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">TTS音é‡ï¼š</span> - <el-slider v-model="voice_volume" show-input :min="-80" :max="80" :marks="default_data.marks" style="width: 900px" /> + <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">TTSè¯éŸ³ï¼š</span> - <el-select v-model="voice" placeholder="Select" style="width: 400px; margin-top: 20px;"> + <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" @@ -631,19 +709,20 @@ const onPwdCheckDialog = () => { > <span style="float: left">{{ item.value }}</span> <span - style=" - float: right; - color: var(--el-text-color-secondary); - font-size: 13px; - " - >{{ item.label }}</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> + <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-select v-model="bgm" placeholder="æ— " style="width: 400px"> <el-option v-for="item in default_data.bgm" :key="item.value" @@ -652,32 +731,58 @@ const onPwdCheckDialog = () => { > <span style="float: left">{{ item.label }}</span> <span - style=" - float: right; - color: var(--el-text-color-secondary); - font-size: 13px; - " - >{{ item.value }}</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> + <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-slider v-model="bgm_volume" show-input :step="0.1" :min="0" :max="2" :marks="default_data.bgm_volume_marks" style="width: 600px" /> + <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: 20px 20px">å—幕:</span> - <el-switch v-model="form.if_need_subtitle" active-value="true" inactive-value="false"/> + <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> + <span style="margin-left: 30px">å—体颜色:</span> + <el-color-picker v-model="sub_font_color" /> + <span style="margin-left: 30px">å—体背景:</span> <el-color-picker v-model="sub_bg_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" /> + <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> @@ -689,7 +794,7 @@ const onPwdCheckDialog = () => { </el-form> <!-- 授æƒå¯†ç 框 --> <el-dialog - v-model=pwdCheckDialogVisible + v-model="pwdCheckDialogVisible" title="请输入密ç " width="20%" :close-on-click-modal="false" @@ -698,7 +803,13 @@ const onPwdCheckDialog = () => { > <el-form :model="form"> <el-form-item label="密ç "> - <el-input v-model="pwdCheckValue" autocomplete="off" type="password" show-password @keyup.enter="onPwdCheckDialog()" /> + <el-input + v-model="pwdCheckValue" + autocomplete="off" + type="password" + show-password + @keyup.enter="onPwdCheckDialog()" + /> </el-form-item> </el-form> <template #footer> diff --git a/typings/types/wm/lib.wm.api.d.ts b/typings/types/wm/lib.wm.api.d.ts index 4590f9fcc1693f3a42c3764a8f0c96ae3eedbe97..cf8dfd126e19c2ed61210276a530030279a61e45 100644 --- a/typings/types/wm/lib.wm.api.d.ts +++ b/typings/types/wm/lib.wm.api.d.ts @@ -30,6 +30,7 @@ declare namespace Wm { "local_image_path": string, "info": string, "roles": String[], + "info2": string, } interface GenVideo {