Commit 67318350 authored by 周成波's avatar 周成波

增加密码框、背景音量控制

parent 411b1346
...@@ -88,4 +88,25 @@ export default { ...@@ -88,4 +88,25 @@ export default {
return Promise.reject("gen_video接口通讯失败"); return Promise.reject("gen_video接口通讯失败");
}); });
}, },
submitPwdCheck(pwd: string): Promise<string> {
if (!pwd) {
return Promise.reject("密码不能为空");
}
const post_data = { pwd: pwd }
return request.post('/text2video/pwd_check', 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);
return Promise.reject("与pwd_check接口通讯失败");
});
},
} }
...@@ -102,7 +102,20 @@ export const useManyValues = () => { ...@@ -102,7 +102,20 @@ export const useManyValues = () => {
80: '+80%', 80: '+80%',
90: '+90%', 90: '+90%',
100: '+100%', 100: '+100%',
}) });
const bgm_volume_marks = reactive<MyMarkType>({
0: '-100%',
0.5: '-50%',
1.0: {
style: {
color: '#1989FA',
},
label: '标准音量',
},
1.5: '+50%',
2.0: '+100%',
});
const voices = [ const voices = [
{ {
...@@ -225,5 +238,6 @@ export const useManyValues = () => { ...@@ -225,5 +238,6 @@ export const useManyValues = () => {
voices: voices, voices: voices,
voices_en: voices_en, voices_en: voices_en,
bgm: bgm, bgm: bgm,
bgm_volume_marks: bgm_volume_marks,
} }
} }
...@@ -48,11 +48,20 @@ const voice_rate = ref(-15) ...@@ -48,11 +48,20 @@ const voice_rate = ref(-15)
const voice_volume = ref(0) const voice_volume = ref(0)
const voice = ref("zh-CN-YunjianNeural") const voice = ref("zh-CN-YunjianNeural")
const bgm = ref("解忧曲") const bgm = ref("解忧曲")
const bgm_volume = ref(0.3)
const pwdCheckDialogVisible = ref(false);
const pwdCheckValue = ref("")
onMounted(() => { onMounted(() => {
// 初始化示例数据 // 初始化示例数据
onChangeScreen(form.screen); onChangeScreen(form.screen);
// 初始化密码框
if (debug.value == true) {
pwdCheckDialogVisible.value = false;
} else {
pwdCheckDialogVisible.value = true;
}
}); });
const delay = (ms: any) => new Promise(res => setTimeout(res, ms)); const delay = (ms: any) => new Promise(res => setTimeout(res, ms));
...@@ -351,6 +360,7 @@ const onGenVideo = () => { ...@@ -351,6 +360,7 @@ const onGenVideo = () => {
volume: para_volume, volume: para_volume,
voice: voice.value, voice: voice.value,
bgm: bgm.value, bgm: bgm.value,
bgm_volume: bgm_volume.value,
} }
text2videoService text2videoService
.submitGenVideo(video_param) .submitGenVideo(video_param)
...@@ -440,6 +450,28 @@ const handleExceed: UploadProps['onExceed'] = (files) => { ...@@ -440,6 +450,28 @@ const handleExceed: UploadProps['onExceed'] = (files) => {
upload.value!.handleStart(file) upload.value!.handleStart(file)
upload.value!.submit() upload.value!.submit()
} }
const onPwdCheckDialog = () => {
text2videoService
.submitPwdCheck(pwdCheckValue.value)
.then((result: string) => {
if (result == "success") {
pwdCheckDialogVisible.value = false;
} else {
ElMessage({
message: result,
type: "error",
});
}
})
.catch((error: any) => {
ElMessage({
message: error,
type: "error",
});
});
}
</script> </script>
<template> <template>
...@@ -563,15 +595,15 @@ const handleExceed: UploadProps['onExceed'] = (files) => { ...@@ -563,15 +595,15 @@ const handleExceed: UploadProps['onExceed'] = (files) => {
</el-form-item> </el-form-item>
<!-- 生成视频 --> <!-- 生成视频 -->
<el-form-item label="设置"> <el-form-item label="设置">
<span style="margin: 0 20px">语速:</span> <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>
<el-form-item> <el-form-item>
<span style="margin: 0 20px">音量:</span> <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>
<el-form-item> <el-form-item>
<span style="margin: 20px 20px 0 20px">语音:</span> <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 <el-option
v-for="item in default_data.voices" v-for="item in default_data.voices"
...@@ -592,7 +624,7 @@ const handleExceed: UploadProps['onExceed'] = (files) => { ...@@ -592,7 +624,7 @@ const handleExceed: UploadProps['onExceed'] = (files) => {
<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>
<el-form-item> <el-form-item>
<span style="margin: 0 20px">背景:</span> <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 <el-option
v-for="item in default_data.bgm" v-for="item in default_data.bgm"
...@@ -613,7 +645,11 @@ const handleExceed: UploadProps['onExceed'] = (files) => { ...@@ -613,7 +645,11 @@ const handleExceed: UploadProps['onExceed'] = (files) => {
<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>
<el-form-item> <el-form-item>
<span style="margin: 0 20px">字幕:</span> <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-form-item>
<el-form-item>
<span style="margin: 10px 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"/>
</el-form-item> </el-form-item>
<el-form-item> <el-form-item>
...@@ -623,6 +659,26 @@ const handleExceed: UploadProps['onExceed'] = (files) => { ...@@ -623,6 +659,26 @@ const handleExceed: UploadProps['onExceed'] = (files) => {
<video :src="form.final_video" controls></video> <video :src="form.final_video" controls></video>
</el-form-item> </el-form-item>
</el-form> </el-form>
<!-- 授权密码框 -->
<el-dialog
v-model=pwdCheckDialogVisible
title="请输入密码"
width="20%"
:close-on-click-modal="false"
:close-on-press-escape="false"
:show-close="false"
>
<el-form :model="form">
<el-form-item label="密码">
<el-input v-model="pwdCheckValue" autocomplete="off" type="password" show-password />
</el-form-item>
</el-form>
<template #footer>
<div class="dialog-footer">
<el-button type="primary" @click="onPwdCheckDialog()">ok</el-button>
</div>
</template>
</el-dialog>
</main> </main>
</template> </template>
......
...@@ -48,10 +48,20 @@ const voice_rate = ref(-10) ...@@ -48,10 +48,20 @@ const voice_rate = ref(-10)
const voice_volume = ref(0) const voice_volume = ref(0)
const voice = ref("en-US-BrianNeural") const voice = ref("en-US-BrianNeural")
const bgm = ref("解忧曲") const bgm = ref("解忧曲")
const bgm_volume = ref(0.3)
const pwdCheckDialogVisible = ref(false);
const pwdCheckValue = ref("")
onMounted(() => { onMounted(() => {
// 初始化示例数据 // 初始化示例数据
onChangeScreen(form.screen); onChangeScreen(form.screen);
// 初始化密码框
if (debug.value == true) {
pwdCheckDialogVisible.value = false;
} else {
pwdCheckDialogVisible.value = true;
}
}); });
const delay = (ms: any) => new Promise(res => setTimeout(res, ms)); const delay = (ms: any) => new Promise(res => setTimeout(res, ms));
...@@ -350,6 +360,7 @@ const onGenVideo = () => { ...@@ -350,6 +360,7 @@ const onGenVideo = () => {
volume: para_volume, volume: para_volume,
voice: voice.value, voice: voice.value,
bgm: bgm.value, bgm: bgm.value,
bgm_volume: bgm_volume.value,
} }
text2videoService text2videoService
.submitGenVideo(video_param) .submitGenVideo(video_param)
...@@ -432,6 +443,28 @@ const handleExceed: UploadProps['onExceed'] = (files) => { ...@@ -432,6 +443,28 @@ const handleExceed: UploadProps['onExceed'] = (files) => {
upload.value!.handleStart(file) upload.value!.handleStart(file)
upload.value!.submit() upload.value!.submit()
} }
const onPwdCheckDialog = () => {
text2videoService
.submitPwdCheck(pwdCheckValue.value)
.then((result: string) => {
if (result == "success") {
pwdCheckDialogVisible.value = false;
} else {
ElMessage({
message: result,
type: "error",
});
}
})
.catch((error: any) => {
ElMessage({
message: error,
type: "error",
});
});
}
</script> </script>
<template> <template>
...@@ -555,15 +588,15 @@ const handleExceed: UploadProps['onExceed'] = (files) => { ...@@ -555,15 +588,15 @@ const handleExceed: UploadProps['onExceed'] = (files) => {
</el-form-item> </el-form-item>
<!-- 生成视频 --> <!-- 生成视频 -->
<el-form-item label="设置"> <el-form-item label="设置">
<span style="margin: 0 20px">语速:</span> <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>
<el-form-item> <el-form-item>
<span style="margin: 0 20px">音量:</span> <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>
<el-form-item> <el-form-item>
<span style="margin: 20px 20px 0 20px">语音:</span> <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 <el-option
v-for="item in default_data.voices_en" v-for="item in default_data.voices_en"
...@@ -584,7 +617,7 @@ const handleExceed: UploadProps['onExceed'] = (files) => { ...@@ -584,7 +617,7 @@ const handleExceed: UploadProps['onExceed'] = (files) => {
<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>
<el-form-item> <el-form-item>
<span style="margin: 0 20px">背景:</span> <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 <el-option
v-for="item in default_data.bgm" v-for="item in default_data.bgm"
...@@ -604,6 +637,10 @@ const handleExceed: UploadProps['onExceed'] = (files) => { ...@@ -604,6 +637,10 @@ const handleExceed: UploadProps['onExceed'] = (files) => {
</el-select> </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>
<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-form-item>
<el-form-item> <el-form-item>
<span style="margin: 0 20px">字幕:</span> <span style="margin: 0 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"/>
...@@ -615,6 +652,26 @@ const handleExceed: UploadProps['onExceed'] = (files) => { ...@@ -615,6 +652,26 @@ const handleExceed: UploadProps['onExceed'] = (files) => {
<video :src="form.final_video" controls></video> <video :src="form.final_video" controls></video>
</el-form-item> </el-form-item>
</el-form> </el-form>
<!-- 授权密码框 -->
<el-dialog
v-model=pwdCheckDialogVisible
title="请输入密码"
width="20%"
:close-on-click-modal="false"
:close-on-press-escape="false"
:show-close="false"
>
<el-form :model="form">
<el-form-item label="密码">
<el-input v-model="pwdCheckValue" autocomplete="off" type="password" show-password />
</el-form-item>
</el-form>
<template #footer>
<div class="dialog-footer">
<el-button type="primary" @click="onPwdCheckDialog()">ok</el-button>
</div>
</template>
</el-dialog>
</main> </main>
</template> </template>
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment