Skip to content

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

增加上传自定义图片

parent a81f407c
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 514 additions and 34 deletions
components.d.ts
View file @ 43d56a46
...@@ -8,6 +8,7 @@ export {} ...@@ -8,6 +8,7 @@ export {}
declare module 'vue' { declare module 'vue' {
export interface GlobalComponents { export interface GlobalComponents {
ElButton: typeof import('element-plus/es')['ElButton'] ElButton: typeof import('element-plus/es')['ElButton']
ElDialog: typeof import('element-plus/es')['ElDialog']
ElDivider: typeof import('element-plus/es')['ElDivider'] ElDivider: typeof import('element-plus/es')['ElDivider']
ElForm: typeof import('element-plus/es')['ElForm'] ElForm: typeof import('element-plus/es')['ElForm']
ElFormItem: typeof import('element-plus/es')['ElFormItem'] ElFormItem: typeof import('element-plus/es')['ElFormItem']
...@@ -17,6 +18,7 @@ declare module 'vue' { ...@@ -17,6 +18,7 @@ declare module 'vue' {
ElRadioGroup: typeof import('element-plus/es')['ElRadioGroup'] ElRadioGroup: typeof import('element-plus/es')['ElRadioGroup']
ElTable: typeof import('element-plus/es')['ElTable'] ElTable: typeof import('element-plus/es')['ElTable']
ElTableColumn: typeof import('element-plus/es')['ElTableColumn'] ElTableColumn: typeof import('element-plus/es')['ElTableColumn']
ElUpload: typeof import('element-plus/es')['ElUpload']
HelloWorld: typeof import('./src/components/HelloWorld.vue')['default'] HelloWorld: typeof import('./src/components/HelloWorld.vue')['default']
IconCommunity: typeof import('./src/components/icons/IconCommunity.vue')['default'] IconCommunity: typeof import('./src/components/icons/IconCommunity.vue')['default']
IconDocumentation: typeof import('./src/components/icons/IconDocumentation.vue')['default'] IconDocumentation: typeof import('./src/components/icons/IconDocumentation.vue')['default']
......
src/views/home/index.vue
View file @ 43d56a46
<script setup lang="ts"> <script setup lang="ts">
import { onMounted, reactive, ref } from "vue"; import { onMounted, reactive, ref } from "vue";
import { Sunny, UploadFilled } from "@element-plus/icons-vue"; import { Sunny, UploadFilled } from "@element-plus/icons-vue";
import { ElMessage, ElLoading } from "element-plus"; import { ElMessage, genFileId,
type UploadInstance,
type UploadProps,
type UploadRawFile } from "element-plus";
import text2videoService from "@/api/service/text2videoService"; import text2videoService from "@/api/service/text2videoService";
import utils from "@/utils/utils"; import utils from "@/utils/utils";
import { useManyValues } from './compositions/useManyValues' import { useManyValues } from './compositions/useManyValues'
const debug = ref(true); const debug = ref(import.meta.env.MODE === 'production' ? false : true);
const loading = ref(false); const loading = ref(false);
const dialogVisible = ref(false);
const dialogData = ref("");
const default_data = useManyValues(); const default_data = useManyValues();
const form = reactive({ const form = reactive({
screen: default_data.screen, screen: default_data.screen,
...@@ -23,6 +28,7 @@ const sd_prompt_prefix = default_data.sd_prompt_prefix; ...@@ -23,6 +28,7 @@ const sd_prompt_prefix = default_data.sd_prompt_prefix;
const sd_negative_prompt_prefix = default_data.sd_negative_prompt_prefix; const sd_negative_prompt_prefix = default_data.sd_negative_prompt_prefix;
onMounted(() => { onMounted(() => {
// 初始化示例数据
onChangeScreen(form.screen); onChangeScreen(form.screen);
}); });
...@@ -168,8 +174,15 @@ const onAdaptOne = async (item: any) => { ...@@ -168,8 +174,15 @@ const onAdaptOne = async (item: any) => {
const keywords_obj = utils.formatJsonObj(keywords.replace(/```json/g, '').replace(/```/g, '')) const keywords_obj = utils.formatJsonObj(keywords.replace(/```json/g, '').replace(/```/g, ''))
// console.log(keywords_obj) // console.log(keywords_obj)
item.场景关键词 = JSON.stringify(keywords_obj[0].场景关键词).replace(/"/g, ''); item.场景关键词 = JSON.stringify(keywords_obj[0].场景关键词).replace(/"/g, '');
item.角色 = JSON.stringify(keywords_obj[0].角色).replace(/"/g, ''); if (form.chatgpt_answer_roles.length === 0) {
item.角色关键词 = JSON.stringify(keywords_obj[0].角色关键词).replace(/"/g, ''); // 总角色为空
item.角色 = '';
item.角色关键词 = '';
} else {
// 总角色不为空
item.角色 = JSON.stringify(keywords_obj[0].角色).replace(/"/g, '');
item.角色关键词 = JSON.stringify(keywords_obj[0].角色关键词).replace(/"/g, '');
}
} catch (error) { } catch (error) {
ElMessage({ ElMessage({
message: String(error), message: String(error),
...@@ -179,9 +192,9 @@ const onAdaptOne = async (item: any) => { ...@@ -179,9 +192,9 @@ const onAdaptOne = async (item: any) => {
}; };
const onDrawOne = async (item: any) => { const onDrawOne = async (item: any) => {
if (!item.编号 || !item.场景描述 || !item.场景关键词 || !item.角色 || !item.角色关键词) { if (!item.场景描述 && !item.场景关键词) {
ElMessage({ ElMessage({
message: "分镜参数不能为空", message: "场景描述和场景关键词不能都为空",
type: "error", type: "error",
}); });
return; return;
...@@ -192,10 +205,15 @@ const onDrawOne = async (item: any) => { ...@@ -192,10 +205,15 @@ const onDrawOne = async (item: any) => {
console.log(form.task_id) console.log(form.task_id)
} }
try { try {
let temp_prompt = ""
if (item.场景描述) {temp_prompt = temp_prompt + `场景描述为：${item.场景描述}\n`};
if (item.场景关键词) {temp_prompt = temp_prompt + `场景关键词为：${item.场景关键词}\n`};
if (item.角色) {temp_prompt = temp_prompt + `场景中的角色有：${item.角色}\n`};
if (item.角色关键词) {temp_prompt = temp_prompt + `角色关键词为：${item.角色关键词}\n`};
const sd_describe = await text2videoService.submitGpt( const sd_describe = await text2videoService.submitGpt(
`场景描述为：${item.场景描述}\n场景关键词为：${item.场景关键词}\n场景中的角色有：${item.角色}\n角色关键词为：${item.角色关键词}\n `${temp_prompt}
指令： 指令：
请理解以上内容，并返回一段英文的镜头描述。` 请理解以上内容，并返回一段英文的描述。`
); );
item.画面描述词 = sd_describe; item.画面描述词 = sd_describe;
const sd_prompt = item.画面描述词 + "," + sd_prompt_prefix; const sd_prompt = item.画面描述词 + "," + sd_prompt_prefix;
...@@ -205,8 +223,8 @@ const onDrawOne = async (item: any) => { ...@@ -205,8 +223,8 @@ const onDrawOne = async (item: any) => {
width = "540"; width = "540";
height = "960"; height = "960";
} }
console.log(sd_prompt); // console.log(sd_prompt);
console.log(sd_negative_prompt_prefix); // console.log(sd_negative_prompt_prefix);
const sd_img = await text2videoService.submitSD(form.task_id, item.编号, sd_prompt, sd_negative_prompt_prefix, width, height); const sd_img = await text2videoService.submitSD(form.task_id, item.编号, sd_prompt, sd_negative_prompt_prefix, width, height);
item.本镜配图 = sd_img.domain_image_path+"?v="+utils.genDateTimeStr(); item.本镜配图 = sd_img.domain_image_path+"?v="+utils.genDateTimeStr();
item.local_image_path = sd_img.local_image_path; item.local_image_path = sd_img.local_image_path;
...@@ -275,6 +293,10 @@ const clean_demo = () => { ...@@ -275,6 +293,10 @@ const clean_demo = () => {
form.final_video = ""; form.final_video = "";
} }
const clean_roles = () => {
form.chatgpt_answer_roles = <Wm.RolesItem[]>[];
}
const onChangeScreen = (val: string) => { const onChangeScreen = (val: string) => {
if (debug.value == true) { if (debug.value == true) {
if (val == "横屏") { if (val == "横屏") {
...@@ -295,8 +317,44 @@ const onChangeScreen = (val: string) => { ...@@ -295,8 +317,44 @@ const onChangeScreen = (val: string) => {
} }
} }
const showsdpromt = (item: any) => { const showsdprompt = (item: any) => {
alert(item.画面描述词) // alert(item.画面描述词)
dialogData.value = item.画面描述词+ "," +sd_prompt_prefix+'===== negative ====='+sd_negative_prompt_prefix;
dialogVisible.value = true; // 打开对话框
}
const upload = ref<UploadInstance>()
const actionUrl = ref(
import.meta.env.MODE === 'production'
? '/file'
: import.meta.env.VITE_APP_BASE_API + '/file'
)
const handleUploadSuccess = (val: Wm.UploadResult) => {
if (val.code == 0){
// console.log(val)
const id = parseInt(val.message) - 1;
form.adapt_result_json[id].本镜配图 = val.data[0].url+"?v="+utils.genDateTimeStr();
form.adapt_result_json[id].local_image_path = val.data[0].path+"?v="+utils.genDateTimeStr();
ElMessage({
message: '上传成功',
type: 'success'
})
} else {
ElMessage({
message: '上传失败',
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()
} }
</script> </script>
...@@ -329,6 +387,7 @@ const showsdpromt = (item: any) => { ...@@ -329,6 +387,7 @@ const showsdpromt = (item: any) => {
<!-- 角色 --> <!-- 角色 -->
<el-form-item> <el-form-item>
<el-button type="primary" @click="onAdaptRoles">推理所有角色</el-button> <el-button type="primary" @click="onAdaptRoles">推理所有角色</el-button>
<el-button type="primary" @click="clean_roles">清除所有角色</el-button>
</el-form-item> </el-form-item>
<el-form-item label="角色"> <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)">
...@@ -389,7 +448,31 @@ const showsdpromt = (item: any) => { ...@@ -389,7 +448,31 @@ const showsdpromt = (item: any) => {
<template v-slot="scope"> <template v-slot="scope">
<div style="margin: 10px 0"><el-button type="primary" size="default" @click="onAdaptOne(scope.row)">重新推理<br />关键字</el-button></div> <div style="margin: 10px 0"><el-button type="primary" size="default" @click="onAdaptOne(scope.row)">重新推理<br />关键字</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="onDrawOne(scope.row)">重绘本镜</el-button></div>
<div style="margin: 10px 0"><el-button type="primary" size="small" @click="showsdpromt(scope.row)">show sd promt</el-button></div> <el-upload
class="upload-demo"
ref="upload"
list-type="picture"
:show-file-list="false"
:limit="1"
:action="actionUrl"
:on-success="handleUploadSuccess"
:on-exceed="handleExceed"
:data="{item_id: scope.row.编号}"
>
<el-button type="primary">上传图片</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%"
>
<p>{{ dialogData }}</p>
<template #footer>
<div class="dialog-footer">
<el-button type="primary" @click="dialogVisible = false">ok</el-button>
</div>
</template>
</el-dialog>
</template> </template>
</el-table-column> </el-table-column>
</el-table> </el-table>
......
src/views/home/index_en.vue
View file @ 43d56a46
<script setup lang="ts"> <script setup lang="ts">
import { onMounted, reactive, ref } from "vue"; import { onMounted, reactive, ref } from "vue";
import { Sunny, UploadFilled } from "@element-plus/icons-vue"; import { Sunny, UploadFilled } from "@element-plus/icons-vue";
import { ElMessage, ElLoading } from "element-plus"; import { ElMessage, genFileId,
type UploadInstance,
type UploadProps,
type UploadRawFile } from "element-plus";
import text2videoService from "@/api/service/text2videoService"; import text2videoService from "@/api/service/text2videoService";
import utils from "@/utils/utils"; import utils from "@/utils/utils";
import { useManyValues } from './compositions/useManyValues' import { useManyValues } from './compositions/useManyValues'
const debug = ref(true); const debug = ref(import.meta.env.MODE === 'production' ? false : true);
const loading = ref(false); const loading = ref(false);
const dialogVisible = ref(false);
const dialogData = ref("");
const default_data = useManyValues(); const default_data = useManyValues();
const form = reactive({ const form = reactive({
screen: default_data.screen, screen: default_data.screen,
...@@ -23,6 +28,7 @@ const sd_prompt_prefix = default_data.sd_prompt_prefix; ...@@ -23,6 +28,7 @@ const sd_prompt_prefix = default_data.sd_prompt_prefix;
const sd_negative_prompt_prefix = default_data.sd_negative_prompt_prefix; const sd_negative_prompt_prefix = default_data.sd_negative_prompt_prefix;
onMounted(() => { onMounted(() => {
// 初始化示例数据
onChangeScreen(form.screen); onChangeScreen(form.screen);
}); });
...@@ -169,8 +175,15 @@ const onAdaptOne = async (item: any) => { ...@@ -169,8 +175,15 @@ const onAdaptOne = async (item: any) => {
const keywords_obj = utils.formatJsonObj(keywords.replace(/```json/g, '').replace(/```/g, '')) const keywords_obj = utils.formatJsonObj(keywords.replace(/```json/g, '').replace(/```/g, ''))
// console.log(keywords_obj) // console.log(keywords_obj)
item.场景关键词 = JSON.stringify(keywords_obj[0]["Scene Keywords"]).replace(/"/g, ''); item.场景关键词 = JSON.stringify(keywords_obj[0]["Scene Keywords"]).replace(/"/g, '');
item.角色 = JSON.stringify(keywords_obj[0]["Role"]).replace(/"/g, ''); if (form.chatgpt_answer_roles.length === 0) {
item.角色关键词 = JSON.stringify(keywords_obj[0]["Role Keywords"]).replace(/"/g, ''); // 总角色为空
item.角色 = '';
item.角色关键词 = '';
} else {
// 总角色不为空
item.角色 = JSON.stringify(keywords_obj[0]["Role"]).replace(/"/g, '');
item.角色关键词 = JSON.stringify(keywords_obj[0]["Role Keywords"]).replace(/"/g, '');
}
} catch (error) { } catch (error) {
ElMessage({ ElMessage({
message: String(error), message: String(error),
...@@ -180,9 +193,9 @@ const onAdaptOne = async (item: any) => { ...@@ -180,9 +193,9 @@ const onAdaptOne = async (item: any) => {
}; };
const onDrawOne = async (item: any) => { const onDrawOne = async (item: any) => {
if (!item.编号 || !item.场景描述 || !item.场景关键词 || !item.角色 || !item.角色关键词) { if (!item.场景描述 && !item.场景关键词) {
ElMessage({ ElMessage({
message: "分镜参数不能为空", message: "场景描述和场景关键词不能都为空",
type: "error", type: "error",
}); });
return; return;
...@@ -193,10 +206,15 @@ const onDrawOne = async (item: any) => { ...@@ -193,10 +206,15 @@ const onDrawOne = async (item: any) => {
console.log(form.task_id) console.log(form.task_id)
} }
try { try {
let temp_prompt = ""
if (item.场景描述) {temp_prompt = temp_prompt + `Scene description is: ${item.场景描述}\n`};
if (item.场景关键词) {temp_prompt = temp_prompt + `Scene keywords are: ${item.场景关键词}\n`};
if (item.角色) {temp_prompt = temp_prompt + `Characters in the scene are: ${item.角色}\n`};
if (item.角色关键词) {temp_prompt = temp_prompt + `Character keywords are: ${item.角色关键词}\n`};
const sd_describe = await text2videoService.submitGpt( const sd_describe = await text2videoService.submitGpt(
`Scene description is: ${item.场景描述} \n Scene keywords are: ${item.场景关键词} \n Characters in the scene are: ${item.角色} \n Character keywords are: ${item.角色关键词} \n `${temp_prompt}
Instructions: Instructions:
Please understand the above content and return an English shot description.` Please understand the above content and return an English description.`
); );
item.画面描述词 = sd_describe; item.画面描述词 = sd_describe;
const sd_prompt = item.画面描述词 + "," + sd_prompt_prefix; const sd_prompt = item.画面描述词 + "," + sd_prompt_prefix;
...@@ -277,6 +295,10 @@ const clean_demo = () => { ...@@ -277,6 +295,10 @@ const clean_demo = () => {
form.final_video = ""; form.final_video = "";
} }
const clean_roles = () => {
form.chatgpt_answer_roles = <Wm.RolesItem[]>[];
}
const onChangeScreen = (val: string) => { const onChangeScreen = (val: string) => {
if (debug.value == true) { if (debug.value == true) {
if (val == "竖屏") { if (val == "竖屏") {
...@@ -291,9 +313,43 @@ const onChangeScreen = (val: string) => { ...@@ -291,9 +313,43 @@ const onChangeScreen = (val: string) => {
} }
const showsdprompt = (item: any) => { const showsdprompt = (item: any) => {
alert(item.画面描述词) // alert(item.画面描述词)
alert(sd_prompt_prefix) dialogData.value = item.画面描述词+ "," +sd_prompt_prefix+'===== negative ====='+sd_negative_prompt_prefix;
// alert(sd_negative_prompt_prefix) dialogVisible.value = true; // 打开对话框
}
const upload = ref<UploadInstance>()
const actionUrl = ref(
import.meta.env.MODE === 'production'
? '/file'
: import.meta.env.VITE_APP_BASE_API + '/file'
)
const handleUploadSuccess = (val: Wm.UploadResult) => {
if (val.code == 0){
// console.log(val)
const id = parseInt(val.message) - 1;
form.adapt_result_json[id].本镜配图 = val.data[0].url+"?v="+utils.genDateTimeStr();
form.adapt_result_json[id].local_image_path = val.data[0].path+"?v="+utils.genDateTimeStr();
ElMessage({
message: '上传成功',
type: 'success'
})
} else {
ElMessage({
message: '上传失败',
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()
} }
</script> </script>
...@@ -326,6 +382,7 @@ const showsdprompt = (item: any) => { ...@@ -326,6 +382,7 @@ const showsdprompt = (item: any) => {
<!-- 角色 --> <!-- 角色 -->
<el-form-item> <el-form-item>
<el-button type="primary" @click="onAdaptRoles">推理所有角色</el-button> <el-button type="primary" @click="onAdaptRoles">推理所有角色</el-button>
<el-button type="primary" @click="clean_roles">清除所有角色</el-button>
</el-form-item> </el-form-item>
<el-form-item label="角色"> <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)">
...@@ -386,7 +443,31 @@ const showsdprompt = (item: any) => { ...@@ -386,7 +443,31 @@ const showsdprompt = (item: any) => {
<template v-slot="scope"> <template v-slot="scope">
<div style="margin: 10px 0"><el-button type="primary" size="default" @click="onAdaptOne(scope.row)">重新推理<br />关键字</el-button></div> <div style="margin: 10px 0"><el-button type="primary" size="default" @click="onAdaptOne(scope.row)">重新推理<br />关键字</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="onDrawOne(scope.row)">重绘本镜</el-button></div>
<div style="margin: 10px 0"><el-button type="primary" size="small" @click="showsdprompt(scope.row)">show<br />sd prompt</el-button></div> <el-upload
class="upload-demo"
ref="upload"
list-type="picture"
:show-file-list="false"
:limit="1"
:action="actionUrl"
:on-success="handleUploadSuccess"
:on-exceed="handleExceed"
:data="{item_id: scope.row.编号}"
>
<el-button type="primary">上传图片</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%"
>
<p>{{ dialogData }}</p>
<template #footer>
<div class="dialog-footer">
<el-button type="primary" @click="dialogVisible = false">ok</el-button>
</div>
</template>
</el-dialog>
</template> </template>
</el-table-column> </el-table-column>
</el-table> </el-table>
......
typings/types/wm/lib.wm.api.d.ts
View file @ 43d56a46
...@@ -26,4 +26,16 @@ declare namespace Wm { ...@@ -26,4 +26,16 @@ declare namespace Wm {
"角色关键词": string, "角色关键词": string,
} }
interface UploadResult {
"code": int,
"data": [
{
"id": int,
"key": string,
"path": string,
"url": string
}
],
"message": 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