Skip to content

T
text2video-frontend
Commit 553daf5b authored by 周成波's avatar 周成波
Browse files
Options

step1

parent 6f0cbe91
Show whitespace changes
Inline Side-by-side
Showing with 112 additions and 303 deletions
components.d.ts
View file @ 553daf5b
......@@ -9,6 +9,7 @@ declare module 'vue' {
export interface GlobalComponents {
ElButton: typeof import('element-plus/es')['ElButton']
ElDivider: typeof import('element-plus/es')['ElDivider']
ElElFormItem: typeof import('element-plus/es')['ElElFormItem']
ElForm: typeof import('element-plus/es')['ElForm']
ElFormItem: typeof import('element-plus/es')['ElFormItem']
ElIcon: typeof import('element-plus/es')['ElIcon']
......
src/views/home/index copy.vue deleted 100644 → 0
View file @ 6f0cbe91
<script setup lang="ts">
import { onMounted, reactive, ref } from 'vue'
import { Sunny, UploadFilled } from '@element-plus/icons-vue'
import {
ElMessage,
genFileId,
type UploadInstance,
type UploadProps,
type UploadRawFile
} from 'element-plus'
import { useLanguage } from './compositions/index'
import videoService from '@/api/service/videoService'
import exportFile from '@/utils/exportFile'
import { whenMouse } from 'element-plus/es/utils/index.mjs'
const { languages } = useLanguage()
const step = ref(1)
const form = reactive({
language: 'en',
video: '',
timeline: <Wm.TimelineItem[]>[],
withSub: true
})
const upload = ref<UploadInstance>()
const actionUrl = ref(
import.meta.env.MODE === 'production'
? '/upload_file'
: import.meta.env.VITE_APP_BASE_API + '/upload_file'
)
onMounted(() => {})
const onSubmit = () => {
if (!form.video) {
ElMessage({
message: '请先上传视频',
type: 'error'
})
return
}
let postData: Wm.VideoCutOptions = {
instances: [
{
video: form.video,
lang: form.language,
steps: ['step'+step.value]
}
]
}
if (step.value === 2) {
let srt_json_in = form.timeline
postData.instances[0] = {
...postData.instances[0],
with_sub: form.withSub,
srt_json_in: srt_json_in
}
}
videoService
.wmVideoCut(postData)
.then((res: any) => {
console.log(res)
ElMessage({
message: '操作成功',
type: 'success'
})
const ishttps = document.location.protocol === 'https:'
// console.log(document.location)
if (res) {
if (step.value === 1) {
form.timeline = res.result
step.value = 2
} else {
let url = ''
const final_video_url = res.result
if (ishttps) {
url = final_video_url.replace('http://', 'https://')
} else {
url = final_video_url.replace('https://', 'http://')
}
url = '/download' + url.substring(1, url.length)
console.log(url)
const arr_name = final_video_url.split('/')
const file_name = arr_name[arr_name.length - 1] // 获取文件名
fetch(url)
.then((url) => url.blob())
.then((blob: any) => {
exportFile.getVideoFile(blob, file_name)
})
step.value = 1
}
}
})
.catch((err: any) => {
console.log(err)
ElMessage({
message: '操作失败' + err,
type: 'error'
})
})
}
const handleExceed: UploadProps['onExceed'] = (files) => {
upload.value!.clearFiles()
const file = files[0] as UploadRawFile
file.uid = genFileId()
upload.value!.handleStart(file)
upload.value!.submit()
}
const handleUploadSuccess = (val: Wm.UploadResult) => {
form.video = val.result.file_url
ElMessage({
message: '上传成功',
type: 'success'
})
}
const handleBeforeUpload = (file: any) => {
const isLt100M = file.size / 1024 / 1024 < 100
const fileName = file.name
const fileType = fileName.substring(fileName.lastIndexOf('.'))
console.log(fileType)
const isMp4 =
(file.type.indexOf('video') > -1 && file.type === 'video/mp4') || fileType === '.mp4'
if (!isLt100M) {
ElMessage.error('上传文件大小不能超过 100MB!')
return false
}
if (!isMp4) {
ElMessage.error('视频仅支持MP4格式!')
return false
}
return isMp4 && isLt100M
}
const handleRemove = () => {
form.video = ''
}
</script>
<template>
<main class="home-container">
<el-divider content-position="left"
>视频转换（先根据视频生成翻译，再转换视频）</el-divider
>
<el-form :model="form" label-width="114px">
<el-form-item label="选择语言">
<el-select v-model="form.language" placeholder="请选择要转换的语言">
<el-option
v-for="item in languages"
:key="item.value"
:label="item.label"
:value="item.value"
/>
</el-select>
</el-form-item>
<el-form-item label="上传视频">
<el-upload
class="upload-demo"
drag
ref="upload"
accept=".mp4"
:limit="1"
:action="actionUrl"
:on-success="handleUploadSuccess"
:on-exceed="handleExceed"
:on-remove="handleRemove"
:before-upload="handleBeforeUpload"
>
<el-icon class="el-icon--upload"><upload-filled /></el-icon>
<div class="el-upload__text">
将需要转换的视频文件拖到此处或 <em>点击上传</em>
</div>
<template #tip>
<div class="el-upload__tip">
<span>1、视频请上传mp4格式;</span>
<span>2、视频大小控制在100M以内</span>
</div>
</template>
</el-upload>
</el-form-item>
<el-form-item label="校对翻译" v-if="step === 2">
<!-- <el-timeline>
<el-timeline-item placement="top"
v-for="(srt, index) in form.timeline"
:key="index"
:timestamp="srt.start + ' --- ' + srt.end">
<el-input v-model="srt.content"
style="width: 500px"
:autosize="{ minRows: 1, maxRows: 3 }"
type="textarea"
/>
</el-timeline-item>
</el-timeline> -->
<div v-for="(srt, index) in form.timeline">
<el-icon v-if="srt.content != '< No Speech >'" color="#409EFC" size="10px">
<BellFilled />
</el-icon>
<span v-if="srt.content != '< No Speech >'">
{{ srt.start + " --- " + srt.end }}
</span>
<el-input
v-if="srt.content != '< No Speech >'"
v-model="srt.content"
style="width: 600px; margin: 5px 0"
:autosize="{ minRows: 1, maxRows: 3 }"
type="textarea"
/>
</div>
</el-form-item>
<el-form-item label="是否需要字幕" v-if="step === 2">
<el-select v-model="form.withSub" placeholder="是否需要字幕">
<el-option label="是" :value="true" />
<el-option label="否" :value="false" />
</el-select>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="onSubmit"
>{{ step === 1 ? "翻译" : "转换" }}
</el-button>
</el-form-item>
</el-form>
</main>
</template>
<style lang="scss" scoped>
.home-container {
.upload-demo {
width: 600px;
}
.el-upload__tip {
> span {
display: flex;
line-height: 20px;
}
}
}
</style>
@/api/service/myService
\ No newline at end of file
src/views/home/index.vue
View file @ 553daf5b
......@@ -7,11 +7,14 @@ import text2videoService from "@/api/service/text2videoService";
const step = ref(1);
const form = reactive({
chatgpt_prompt: "",
chatgpt_response_prompt: "",
chatgpt_response_scripts: <Wm.ScriptsItem[]>[],
});
onMounted(() => {});
const onSubmit = () => {
if (step.value === 1) {
if (!form.chatgpt_prompt) {
ElMessage({
message: "prompt不能为空",
......@@ -19,22 +22,28 @@ const onSubmit = () => {
});
return;
}
let postData = {
source_text: form.chatgpt_prompt,
};
text2videoService
.genScriptsByGpt(postData)
.genScriptsByGpt({source_text: form.chatgpt_prompt})
.then((res: any) => {
console.log(res);
ElMessage({
message: "操作成功",
type: "success",
});
// if (res) {
// }
if (res) {
if (res.code === 0) {
const chatgpt_res = res.data.result
form.chatgpt_response_prompt = chatgpt_res.prompt
form.chatgpt_response_scripts = chatgpt_res.scripts
step.value = 2
}
else {
ElMessage({
message: res.message,
type: "error",
});
}
}
})
.catch((err: any) => {
console.log(err);
......@@ -43,6 +52,12 @@ const onSubmit = () => {
type: "error",
});
});
} else {
ElMessage({
message: "step2",
type: "success",
});
}
};
</script>
......@@ -50,32 +65,60 @@ const onSubmit = () => {
<main class="home-container">
<el-divider content-position="left">text2video</el-divider>
<el-form :model="form" label-width="114px">
<el-form-item label="chatgpt prompt">
<el-form-item label="chatgpt prompt" v-if="step === 1">
<div style="color: red;">示例：请以末日求生为主题，写一段2分钟左右的短视频脚本，有10个分镜头，每个分镜头有场景、人物、镜头内容、中文旁白。人物要有明确的名字。</div>
<el-input
v-model="form.chatgpt_prompt"
:autosize="{ minRows: 4, maxRows: 10 }"
:autosize="{ minRows: 10, maxRows: 20 }"
type="textarea"
placeholder="Please input"
placeholder="Please Input ..."
/>
</el-form-item>
<!-- <el-form-item label="校对" v-if="step === 2">
<div v-for="(srt, index) in form.timeline">
<el-icon v-if="srt.content != '< No Speech >'" color="#409EFC" size="10px">
<BellFilled />
</el-icon>
<span v-if="srt.content != '< No Speech >'">
{{ srt.start + " --- " + srt.end }}
</span>
<el-input
v-if="srt.content != '< No Speech >'"
v-model="srt.content"
style="width: 600px; margin: 5px 0"
<el-form-item label="chatgpt 提问：" v-if="step === 2">
<div>{{ form.chatgpt_response_prompt }}</div>
</el-form-item>
<el-form-item label="chatgpt 返回：" v-if="step === 2">
<div v-for="(srt, index) in form.chatgpt_response_scripts">
<div style="color:red">==== {{ srt.序号 }} ====</div>
<div>
<span class="chatgpt_response_script_label">场景：</span>
<el-input class="chatgpt_response_script"
v-model="srt.场景"
:autosize="{ minRows: 1, maxRows: 3 }"
type="textarea"
/>
</div>
<div>
<span class="chatgpt_response_script_label">人物：</span>
<el-input class="chatgpt_response_script"
label = "人物"
v-model="srt.人物"
:autosize="{ minRows: 1, maxRows: 3 }"
type="textarea"
/>
</div>
<div>
<span class="chatgpt_response_script_label">分镜：</span>
<el-input class="chatgpt_response_script"
label = "分镜内容"
v-model="srt.分镜内容"
style=""
:autosize="{ minRows: 1, maxRows: 3 }"
type="textarea"
/>
</div>
<div>
<span class="chatgpt_response_script_label">旁白：</span>
<el-input class="chatgpt_response_script"
label = "旁白"
v-model="srt.旁白"
:autosize="{ minRows: 1, maxRows: 3 }"
type="textarea"
/>
</div>
</el-form-item> -->
</div>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="onSubmit">确定</el-button>
......@@ -85,7 +128,14 @@ const onSubmit = () => {
</template>
<style lang="scss" scoped>
.home-container {
.home-container {
width: 1000px;
}
}
.chatgpt_response_script{
width: 800px;
margin: 2px 0
}
.chatgpt_response_script_label{
margin: 0 2px
}
</style>
typings/types/wm/lib.wm.api.d.ts
View file @ 553daf5b
import type internal from "stream"
declare namespace Wm {
// chatgpt请求
interface GenScriptsByGptOptions {
prompt: string
}
// chatgpt回复
interface GenScriptsByGptResult {
result: GenScriptsByGptResultItem
// api回复
interface ApiResult {
result: ApiResultItem
}
interface GenScriptsByGptResultItem {
interface ApiResultItem {
code: int
data: any
message: string
}
interface ScriptsItem {
序号: string
场景: string
人物: string
分镜内容: string
旁白: string
}
}
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