Skip to content

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

增加上传自定义图片

parent a81f407c
Expand all Show whitespace changes
Inline Side-by-side
Showing with 514 additions and 34 deletions
components.d.ts
View file @ 43d56a46
......@@ -8,6 +8,7 @@ export {}
declare module 'vue' {
export interface GlobalComponents {
ElButton: typeof import('element-plus/es')['ElButton']
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']
......@@ -17,6 +18,7 @@ declare module 'vue' {
ElRadioGroup: typeof import('element-plus/es')['ElRadioGroup']
ElTable: typeof import('element-plus/es')['ElTable']
ElTableColumn: typeof import('element-plus/es')['ElTableColumn']
ElUpload: typeof import('element-plus/es')['ElUpload']
HelloWorld: typeof import('./src/components/HelloWorld.vue')['default']
IconCommunity: typeof import('./src/components/icons/IconCommunity.vue')['default']
IconDocumentation: typeof import('./src/components/icons/IconDocumentation.vue')['default']
......
src/views/home/index.vue
View file @ 43d56a46
<script setup lang="ts">
import { onMounted, reactive, ref } from "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 utils from "@/utils/utils";
import { useManyValues } from './compositions/useManyValues'
const debug = ref(true);
const debug = ref(import.meta.env.MODE === 'production' ? false : true);
const loading = ref(false);
const dialogVisible = ref(false);
const dialogData = ref("");
const default_data = useManyValues();
const form = reactive({
screen: default_data.screen,
......@@ -23,6 +28,7 @@ const sd_prompt_prefix = default_data.sd_prompt_prefix;
const sd_negative_prompt_prefix = default_data.sd_negative_prompt_prefix;
onMounted(() => {
// 初始化示例数据
onChangeScreen(form.screen);
});
......@@ -168,8 +174,15 @@ const onAdaptOne = async (item: any) => {
const keywords_obj = utils.formatJsonObj(keywords.replace(/```json/g, '').replace(/```/g, ''))
// console.log(keywords_obj)
item.场景关键词 = JSON.stringify(keywords_obj[0].场景关键词).replace(/"/g, '');
if (form.chatgpt_answer_roles.length === 0) {
// 总角色为空
item.角色 = '';
item.角色关键词 = '';
} else {
// 总角色不为空
item.角色 = JSON.stringify(keywords_obj[0].角色).replace(/"/g, '');
item.角色关键词 = JSON.stringify(keywords_obj[0].角色关键词).replace(/"/g, '');
}
} catch (error) {
ElMessage({
message: String(error),
......@@ -179,9 +192,9 @@ const onAdaptOne = async (item: any) => {
};
const onDrawOne = async (item: any) => {
if (!item.编号 || !item.场景描述 || !item.场景关键词 || !item.角色 || !item.角色关键词) {
if (!item.场景描述 && !item.场景关键词) {
ElMessage({
message: "分镜参数不能为空",
message: "场景描述和场景关键词不能都为空",
type: "error",
});
return;
......@@ -192,10 +205,15 @@ const onDrawOne = async (item: any) => {
console.log(form.task_id)
}
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(
`场景描述为：${item.场景描述}\n场景关键词为：${item.场景关键词}\n场景中的角色有：${item.角色}\n角色关键词为：${item.角色关键词}\n
`${temp_prompt}
指令：
请理解以上内容，并返回一段英文的镜头描述。`
请理解以上内容，并返回一段英文的描述。`
);
item.画面描述词 = sd_describe;
const sd_prompt = item.画面描述词 + "," + sd_prompt_prefix;
......@@ -205,8 +223,8 @@ const onDrawOne = async (item: any) => {
width = "540";
height = "960";
}
console.log(sd_prompt);
console.log(sd_negative_prompt_prefix);
// console.log(sd_prompt);
// console.log(sd_negative_prompt_prefix);
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.local_image_path = sd_img.local_image_path;
......@@ -275,6 +293,10 @@ const clean_demo = () => {
form.final_video = "";
}
const clean_roles = () => {
form.chatgpt_answer_roles = <Wm.RolesItem[]>[];
}
const onChangeScreen = (val: string) => {
if (debug.value == true) {
if (val == "横屏") {
......@@ -295,8 +317,44 @@ const onChangeScreen = (val: string) => {
}
}
const showsdpromt = (item: any) => {
alert(item.画面描述词)
const showsdprompt = (item: any) => {
// 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>
......@@ -329,6 +387,7 @@ const showsdpromt = (item: any) => {
<!-- 角色 -->
<el-form-item>
<el-button type="primary" @click="onAdaptRoles">推理所有角色</el-button>
<el-button type="primary" @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)">
......@@ -389,7 +448,31 @@ const showsdpromt = (item: any) => {
<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="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>
</el-table-column>
</el-table>
......
src/views/home/index_en.vue
View file @ 43d56a46
<script setup lang="ts">
import { onMounted, reactive, ref } from "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 utils from "@/utils/utils";
import { useManyValues } from './compositions/useManyValues'
const debug = ref(true);
const debug = ref(import.meta.env.MODE === 'production' ? false : true);
const loading = ref(false);
const dialogVisible = ref(false);
const dialogData = ref("");
const default_data = useManyValues();
const form = reactive({
screen: default_data.screen,
......@@ -23,6 +28,7 @@ const sd_prompt_prefix = default_data.sd_prompt_prefix;
const sd_negative_prompt_prefix = default_data.sd_negative_prompt_prefix;
onMounted(() => {
// 初始化示例数据
onChangeScreen(form.screen);
});
......@@ -169,8 +175,15 @@ const onAdaptOne = async (item: any) => {
const keywords_obj = utils.formatJsonObj(keywords.replace(/```json/g, '').replace(/```/g, ''))
// console.log(keywords_obj)
item.场景关键词 = JSON.stringify(keywords_obj[0]["Scene Keywords"]).replace(/"/g, '');
if (form.chatgpt_answer_roles.length === 0) {
// 总角色为空
item.角色 = '';
item.角色关键词 = '';
} else {
// 总角色不为空
item.角色 = JSON.stringify(keywords_obj[0]["Role"]).replace(/"/g, '');
item.角色关键词 = JSON.stringify(keywords_obj[0]["Role Keywords"]).replace(/"/g, '');
}
} catch (error) {
ElMessage({
message: String(error),
......@@ -180,9 +193,9 @@ const onAdaptOne = async (item: any) => {
};
const onDrawOne = async (item: any) => {
if (!item.编号 || !item.场景描述 || !item.场景关键词 || !item.角色 || !item.角色关键词) {
if (!item.场景描述 && !item.场景关键词) {
ElMessage({
message: "分镜参数不能为空",
message: "场景描述和场景关键词不能都为空",
type: "error",
});
return;
......@@ -193,10 +206,15 @@ const onDrawOne = async (item: any) => {
console.log(form.task_id)
}
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(
`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:
Please understand the above content and return an English shot description.`
Please understand the above content and return an English description.`
);
item.画面描述词 = sd_describe;
const sd_prompt = item.画面描述词 + "," + sd_prompt_prefix;
......@@ -277,6 +295,10 @@ const clean_demo = () => {
form.final_video = "";
}
const clean_roles = () => {
form.chatgpt_answer_roles = <Wm.RolesItem[]>[];
}
const onChangeScreen = (val: string) => {
if (debug.value == true) {
if (val == "竖屏") {
......@@ -291,9 +313,43 @@ const onChangeScreen = (val: string) => {
}
const showsdprompt = (item: any) => {
alert(item.画面描述词)
alert(sd_prompt_prefix)
// alert(sd_negative_prompt_prefix)
// 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>
......@@ -326,6 +382,7 @@ const showsdprompt = (item: any) => {
<!-- 角色 -->
<el-form-item>
<el-button type="primary" @click="onAdaptRoles">推理所有角色</el-button>
<el-button type="primary" @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)">
......@@ -386,7 +443,31 @@ const showsdprompt = (item: any) => {
<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="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>
</el-table-column>
</el-table>
......
typings/types/wm/lib.wm.api.d.ts
View file @ 43d56a46
......@@ -26,4 +26,16 @@ declare namespace Wm {
"角色关键词": 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