Skip to content

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

封面，并解决了多个upload引起的bug

parent 7a420fbc
Show whitespace changes
Inline Side-by-side
Showing with 253 additions and 50 deletions
src/views/home/compositions/useManyValues.ts
View file @ aa560232
......@@ -308,6 +308,19 @@ export const useManyValues = () => {
},
],
product_pic_speech: "我们的产品正在促销热卖中，点点关注吧~",
cover_pic: "http://wm-tools-backend.frp.wmdigit.com:8888/assets/2024/03/12/10170c9e-e035-11ee-a7de-9be5c7a16c02_resized.jpg",
cover_pic_local: "assets/2024/03/12/10170c9e-e035-11ee-a7de-9be5c7a16c02_resized.jpg",
cover_pic_with_text: "http://wm-tools-backend.frp.wmdigit.com:8888/assets/2024/03/12/10170c9e-e035-11ee-a7de-9be5c7a16c02_resized_with_text.jpg",
cover_pic_with_text_local: "assets/2024/03/12/10170c9e-e035-11ee-a7de-9be5c7a16c02_resized_with_text.jpg",
cover_pic_titles: [
{
text: "猪猪们的冒险之旅",
color: "#000000",
bg_color: "#FFFFFF",
font_size: 60,
position: 0.37,
},
],
};
return {
......
src/views/home/index.vue
View file @ aa560232
......@@ -73,8 +73,15 @@ const marketing_template = reactive({
product_pic_with_text_local: "",
product_pic_titles: <Wm.PicText[]>[],
product_pic_speech: "",
if_need_cover_pic: "false",
cover_pic: "src/assets/waiting.png",
cover_pic_local: "",
cover_pic_with_text: "",
cover_pic_with_text_local: "",
cover_pic_titles: <Wm.PicText[]>[],
});
const previewMarketingTemplatePicTextVisible = ref(false);
const previewMarketingTemplateProductPicTextVisible = ref(false);
const previewMarketingTemplateCoverPicTextVisible = ref(false);
onMounted(() => {
......@@ -560,7 +567,7 @@ const onDrawOne = async (item: any) => {
const onGenVideo = () => {
if (!form.adapt_result_json || form.adapt_result_json.length == 0) {
ElMessage({
message: "必要信息不能为空，请重新执行",
message: "分镜必要信息不能为空，请重新执行",
type: "error",
});
return;
......@@ -577,20 +584,31 @@ const onGenVideo = () => {
});
if (!is_all_ok) return;
console.log(form.adapt_result_json);
const video_param_detail = form.adapt_result_json.map(item => {
return {
let video_param_detail = [];
// 封面
if (marketing_template.if_need_cover_pic == 'true' && marketing_template.cover_pic_with_text_local) {
video_param_detail.push({
idx: "0",
text: "",
img_path: marketing_template.cover_pic_with_text_local
})
};
// 分镜
form.adapt_result_json.map(item => {
video_param_detail.push({
idx: item.编号,
text: item.场景描述,
img_path: item.local_image_path
};
})
});
// 封底
if (marketing_template.if_need_product_pic == 'true' && marketing_template.product_pic_with_text_local && marketing_template.product_pic_speech) {
video_param_detail.push({
idx: String(form.adapt_result_json.length + 1),
text: marketing_template.product_pic_speech,
img_path: marketing_template.product_pic_with_text_local
})
}
};
let para_rate = `${voice_rate.value}%`;
let para_volume = `${voice_volume.value}%`;
if (voice_rate.value >= 0) { para_rate = `+${para_rate}` }
......@@ -663,11 +681,17 @@ const onChangeScreen = (val: string) => {
form.final_video = default_data.vertical_data.final_video;
}
marketing_template.if_need_product_pic = 'true';
marketing_template.product_pic = default_data.marketing_template.product_pic;
marketing_template.product_pic_local = default_data.marketing_template.product_pic_local;
marketing_template.product_pic_with_text = default_data.marketing_template.product_pic_with_text;
marketing_template.product_pic_with_text_local = default_data.marketing_template.product_pic_with_text_local;
marketing_template.if_need_product_pic = 'true';
marketing_template.if_need_cover_pic = 'true';
marketing_template.cover_pic = default_data.marketing_template.cover_pic;
marketing_template.cover_pic_local = default_data.marketing_template.cover_pic_local;
marketing_template.cover_pic_with_text = default_data.marketing_template.cover_pic_with_text;
marketing_template.cover_pic_with_text_local = default_data.marketing_template.cover_pic_with_text_local;
}
marketing_template.product_name = default_data.marketing_template.product_name;
......@@ -678,9 +702,12 @@ const onChangeScreen = (val: string) => {
marketing_template.story_type = default_data.marketing_template.story_type;
marketing_template.reference = default_data.marketing_template.reference;
marketing_template.words_num = default_data.marketing_template.words_num;
marketing_template.product_pic_titles = default_data.marketing_template.product_pic_titles;
marketing_template.product_pic_speech = default_data.marketing_template.product_pic_speech;
marketing_template.cover_pic_titles = default_data.marketing_template.cover_pic_titles;
// 宽高
if (val == "横屏") {
form.img_size = default_data.horizontal_img_size;
......@@ -713,6 +740,7 @@ const actionUrl = ref(
// 在分镜自定义上传图片时发现个bug
// 第一次上传没问题，但重复进行上传，会更新到最后一行上去。
// 奇怪，没找到原因。暂时先通过迂回的方法来处理。
// 终于找到原因了，是handleUploadExceed的问题，它在超出limit后，清空已上传，并将新文件上传，但用的都是upload实例
let uploadItemId = 0
const onClickUpload=(val:any)=>{
uploadItemId = val.编号 - 1
......@@ -734,17 +762,16 @@ const handleUploadSuccess = (val: Wm.UploadResult) => {
})
}
}
const onClearOnePic = (item: any) => {
item.本镜配图 = "";
item.local_image_path = "";
};
const handleUploadExceed: UploadProps['onExceed'] = (files) => {
// 清除已上传的文件
upload.value!.clearFiles()
// 获取超出限制的第一个文件
const file = files[0] as UploadRawFile
// 给文件分配一个新的唯一标识
file.uid = genFileId()
// 手动触发文件上传
upload.value!.handleStart(file)
// 提交上传
upload.value!.submit()
}
......@@ -755,6 +782,11 @@ const handleUploadError = (error: Error) => {
});
}
const onClearOnePic = (item: any) => {
item.本镜配图 = "";
item.local_image_path = "";
};
const onPwdCheckDialog = () => {
text2videoService
.submitPwdCheck(pwdCheckValue.value)
......@@ -800,8 +832,11 @@ const onDeleteOne = (item: any) => {
// activeTab.value = "second";
// };
const MarketingTemplateUploadSuccess = (val: Wm.UploadResult) => {
console.log(val)
const upload_cover = ref<UploadInstance>()
const upload_product = ref<UploadInstance>()
const MarketingTemplateUploadProductPicSuccess = (val: Wm.UploadResult) => {
// console.log(val)
if (val.code == 0) {
marketing_template.product_pic = val.data[0].url + "?v=" + utils.genDateTimeStr();
marketing_template.product_pic_local = val.data[0].path;
......@@ -816,8 +851,59 @@ const MarketingTemplateUploadSuccess = (val: Wm.UploadResult) => {
})
}
}
const handleMarketingTemplateUploadProductPicExceed: UploadProps['onExceed'] = (files) => {
// 清除已上传的文件
upload_product.value!.clearFiles()
// 获取超出限制的第一个文件
const file = files[0] as UploadRawFile
// 给文件分配一个新的唯一标识
file.uid = genFileId()
// 手动触发文件上传
upload_product.value!.handleStart(file)
// 提交上传
upload_product.value!.submit()
}
const onAddMarketingTemplatePicText = () => {
const MarketingTemplateUploadCoverPicSuccess = (val: Wm.UploadResult) => {
if (val.code == 0) {
marketing_template.cover_pic = val.data[0].url + "?v=" + utils.genDateTimeStr();
marketing_template.cover_pic_local = val.data[0].path;
ElMessage({
message: '上传成功',
type: 'success'
})
} else {
ElMessage({
message: '上传失败：'+val.message,
type: 'error'
})
}
}
const handleMarketingTemplateUploadCoverPicExceed: UploadProps['onExceed'] = (files) => {
// 清除已上传的文件
upload_cover.value!.clearFiles()
// 获取超出限制的第一个文件
const file = files[0] as UploadRawFile
// 给文件分配一个新的唯一标识
file.uid = genFileId()
// 手动触发文件上传
upload_cover.value!.handleStart(file)
// 提交上传
upload_cover.value!.submit()
}
const onClearMarketingTemplatePic = (type: string) => {
if (type == 'product') {
marketing_template.product_pic = 'src/assets/waiting.png';
marketing_template.product_pic_local = '';
};
if (type == 'cover') {
marketing_template.cover_pic = 'src/assets/waiting.png';
marketing_template.cover_pic_local = '';
};
};
const onAddMarketingTemplatePicText = (type: string) => {
const newElement = {
text: "新的文本",
color: "#000000",
......@@ -825,18 +911,35 @@ const onAddMarketingTemplatePicText = () => {
font_size: 50,
position: 0.5
};
if (type == 'product') {
marketing_template.product_pic_titles.push(newElement);
};
if (type == 'cover') {
marketing_template.cover_pic_titles.push(newElement);
};
};
const onMarketingTemplateAddTextToPic = async () => {
if (!marketing_template.product_pic_local) {
const onMarketingTemplateAddTextToPic = async (type: string) => {
if ((type == 'product' && !marketing_template.product_pic_local)
|| (type == 'cover' && !marketing_template.cover_pic_local)) {
ElMessage({
message: '请上传图片',
type: 'error'
})
return false;
}
};
if (type == 'product' && marketing_template.product_pic_titles.length==0) {
marketing_template.product_pic_with_text = marketing_template.product_pic;
marketing_template.product_pic_with_text_local = marketing_template.product_pic_local;
return true;
};
if (type == 'cover' && marketing_template.cover_pic_titles.length==0) {
marketing_template.cover_pic_with_text = marketing_template.cover_pic;
marketing_template.cover_pic_with_text_local = marketing_template.cover_pic_local;
return true;
};
let params = {};
if (type == 'product') {
const texts = marketing_template.product_pic_titles.map(item => {
return {
text: item.text,
......@@ -847,32 +950,66 @@ const onMarketingTemplateAddTextToPic = async () => {
lang: 'zh',
};
});
const params = {
params = {
image_path: marketing_template.product_pic_local,
image_texts: texts,
};
};
if (type == 'cover') {
const texts = marketing_template.cover_pic_titles.map(item => {
return {
text: item.text,
text_color: item.color ? item.color : '',
text_bg_color: item.bg_color ? item.bg_color : '',
font_size: String(item.font_size),
position: String(1 - item.position),
lang: 'zh',
};
});
params = {
image_path: marketing_template.cover_pic_local,
image_texts: texts,
};
};
try {
const result = await text2videoService.submitAddTextToImg(params);
console.log(result);
// console.log(result);
if (type == 'product') {
marketing_template.product_pic_with_text = result.domain_image_path + "?v=" + utils.genDateTimeStr();
marketing_template.product_pic_with_text_local = result.local_image_path;
}
if (type == 'cover') {
marketing_template.cover_pic_with_text = result.domain_image_path + "?v=" + utils.genDateTimeStr();
marketing_template.cover_pic_with_text_local = result.local_image_path;
}
return true;
} catch (error) {
ElMessage({
message: String(error),
type: "error",
});
if (type == 'product') {
marketing_template.product_pic_with_text = "";
marketing_template.product_pic_with_text_local = "";
}
if (type == 'cover') {
marketing_template.cover_pic_with_text = "";
marketing_template.cover_pic_with_text_local = "";
}
return false;
}
};
const onPreviewMarketingTemplatePicText = async () => {
let res = await onMarketingTemplateAddTextToPic();
const onPreviewMarketingTemplatePicText = async (type: string) => {
let res = await onMarketingTemplateAddTextToPic(type);
if (!res) {return;}
previewMarketingTemplatePicTextVisible.value = true;
if (type == 'product') {
previewMarketingTemplateProductPicTextVisible.value = true;
}
if (type == 'cover') {
previewMarketingTemplateCoverPicTextVisible.value = true;
}
};
const onMarketingTemplateSubmitGpt = async () => {
......@@ -894,7 +1031,12 @@ const onMarketingTemplateSubmitGpt = async () => {
try {
if (marketing_template.if_need_product_pic == 'true') {
console.log("添加文字到图片")
let res = await onMarketingTemplateAddTextToPic();
let res = await onMarketingTemplateAddTextToPic('product');
if (!res) {return;}
}
if (marketing_template.if_need_cover_pic == 'true') {
console.log("添加文字到图片")
let res = await onMarketingTemplateAddTextToPic('cover');
if (!res) {return;}
}
console.log("第一次提问")
......@@ -1044,10 +1186,10 @@ const onMarketingTemplateSubmitGpt = async () => {
<div style="margin: 5px 0"><el-button type="primary" size="small" @click="onAdaptOneScene(scope.row)">推理场景</el-button></div>
<div style="margin: 5px 0"><el-button type="primary" size="small" @click="onAdaptOneSceneRoles(scope.row)">推理角色</el-button></div>
<div style="margin: 5px 0"><el-button type="primary" size="small" @click="onDrawOne(scope.row)">绘图</el-button></div>
<el-upload class="upload-demo" ref="upload" list-type="picture" :show-file-list="false" :limit="1"
<el-upload ref="upload" :show-file-list="false" :limit="1"
accept=".png,.PNG,.jpg,.JPG,.jpeg,.JPEG,.gif,.GIF,.bmp,.BMP"
:action="actionUrl" :on-success="handleUploadSuccess" :on-exceed="handleUploadExceed"
:on-error="handleUploadError" :data="{ item_id: scope.row.编号, width: form.img_size.width, height: form.img_size.height }">
:on-error="handleUploadError" :data="{ width: form.img_size.width, height: form.img_size.height }">
<el-button type="primary" size="small" @click="onClickUpload(scope.row)">上传图片</el-button>
</el-upload>
<!-- <div style="margin: 5px 0"><el-button plain size="small" @click="onClearOnePic(scope.row)">清除图片</el-button></div> -->
......@@ -1065,6 +1207,11 @@ const onMarketingTemplateSubmitGpt = async () => {
</el-table-column>
</el-table>
</el-form-item>
<el-form-item label="封面" v-if="JSON.parse(marketing_template.if_need_cover_pic.toLowerCase()) && marketing_template.cover_pic_with_text_local">
<div :style="{ width: String(parseInt(form.img_size.width) / 2)+'px' } " class="dashed-div">
<el-image :src="marketing_template.cover_pic_with_text" />
</div>
</el-form-item>
<el-form-item label="封底" v-if="JSON.parse(marketing_template.if_need_product_pic.toLowerCase()) && marketing_template.product_pic_with_text_local">
<div :style="{ width: String(parseInt(form.img_size.width) / 2)+'px' } " class="dashed-div">
<el-image :src="marketing_template.product_pic_with_text" />
......@@ -1192,6 +1339,49 @@ const onMarketingTemplateSubmitGpt = async () => {
<el-form-item label="文案字数">
<el-input-number v-model="marketing_template.words_num" :min="10" :max="500" controls-position="right"/>
</el-form-item>
<el-form-item label="封面图片">
<el-switch v-model="marketing_template.if_need_cover_pic" active-value="true" inactive-value="false" />
</el-form-item>
<div v-if="JSON.parse(marketing_template.if_need_cover_pic.toLowerCase())">
<el-form-item style="margin-left: 68px;">
<!-- :style="{ width: String(parseInt(form.img_size.width) / 3)+'px', height: String(parseInt(form.img_size.height) / 3)+'px' }" -->
<div :style="{ width: String(parseInt(form.img_size.width) / 3)+'px' }" class="dashed-div">
<el-image :src="marketing_template.cover_pic" />
</div>
</el-form-item>
<el-form-item style="margin-left: 60px;">
<el-upload ref="upload_cover" :show-file-list="false" :limit="1"
accept=".png,.PNG,.jpg,.JPG,.jpeg,.JPEG,.gif,.GIF,.bmp,.BMP"
:action="actionUrl" :on-success="MarketingTemplateUploadCoverPicSuccess" :on-exceed="handleMarketingTemplateUploadCoverPicExceed"
:on-error="handleUploadError" :data="{ width: form.img_size.width, height: form.img_size.height }">
<el-button type="primary" size="small" style="margin: 10px;">上传图片</el-button>
</el-upload>
<el-button type="danger" size="small" @click="onClearMarketingTemplatePic('cover')" style="margin-left: 15px;">清除图片</el-button>
</el-form-item>
<el-form-item label="图片文字">
<div style="width: 100%;">
<el-button type="primary" size="small" @click="onAddMarketingTemplatePicText('cover')">增加</el-button>
</div>
<div v-for="(pic_title, index) in marketing_template.cover_pic_titles" :key="index" class="dashed-div">
<el-input v-model="pic_title.text" :autosize="true" type="textarea"></el-input>
<span style="margin-left:10px;">字体颜色：</span>
<el-color-picker v-model="pic_title.color" />
<span style="margin-left:30px;">字体背景：</span>
<el-color-picker v-model="pic_title.bg_color" />
<span style="margin-left:30px;">字体大小：</span>
<el-input-number v-model="pic_title.font_size" :min="1" :max="100" controls-position="right" />
<span style="margin-left:30px;">在图片上的位置：</span>
<el-slider v-model="pic_title.position" :step="0.01" :min="0" :max="1" show-input vertical height="100px" style="margin-top: 10px;"/>
<el-button type="danger" size="small" @click="marketing_template.cover_pic_titles.splice(index, 1);" style="margin-left: 80px;">删除</el-button>
</div>
<el-button type="success" size="small" @click="onPreviewMarketingTemplatePicText('cover')">预览</el-button>
<el-dialog title="预览" v-model="previewMarketingTemplateCoverPicTextVisible" append-to-body :width="parseInt(form.img_size.width) / 2 + 40">
<div :style="{ width: String(parseInt(form.img_size.width) / 2)+'px' } " class="dashed-div">
<el-image :src="marketing_template.cover_pic_with_text" />
</div>
</el-dialog>
</el-form-item>
</div>
<el-form-item label="封底图片">
<el-switch v-model="marketing_template.if_need_product_pic" active-value="true" inactive-value="false" />
</el-form-item>
......@@ -1203,17 +1393,17 @@ const onMarketingTemplateSubmitGpt = async () => {
</div>
</el-form-item>
<el-form-item style="margin-left: 60px;">
<el-upload class="upload-demo" ref="upload" list-type="picture" :show-file-list="false" :limit="1"
<el-upload ref="upload_product" :show-file-list="false" :limit="1"
accept=".png,.PNG,.jpg,.JPG,.jpeg,.JPEG,.gif,.GIF,.bmp,.BMP"
:action="actionUrl" :on-success="MarketingTemplateUploadSuccess" :on-exceed="handleUploadExceed"
:action="actionUrl" :on-success="MarketingTemplateUploadProductPicSuccess" :on-exceed="handleMarketingTemplateUploadProductPicExceed"
:on-error="handleUploadError" :data="{ width: form.img_size.width, height: form.img_size.height }">
<el-button type="primary" size="small" style="margin: 10px;">上传图片</el-button>
</el-upload>
<el-button type="danger" size="small" @click="marketing_template.product_pic = 'src/assets/waiting.png';" style="margin-left: 15px;">清除图片</el-button>
<el-button type="danger" size="small" @click="onClearMarketingTemplatePic('product')" style="margin-left: 15px;">清除图片</el-button>
</el-form-item>
<el-form-item label="图片文字">
<div style="width: 100%;">
<el-button type="primary" size="small" @click="onAddMarketingTemplatePicText">增加</el-button>
<el-button type="primary" size="small" @click="onAddMarketingTemplatePicText('product')">增加</el-button>
</div>
<div v-for="(pic_title, index) in marketing_template.product_pic_titles" :key="index" class="dashed-div">
<el-input v-model="pic_title.text" :autosize="true" type="textarea"></el-input>
......@@ -1227,8 +1417,8 @@ const onMarketingTemplateSubmitGpt = async () => {
<el-slider v-model="pic_title.position" :step="0.01" :min="0" :max="1" show-input vertical height="100px" style="margin-top: 10px;"/>
<el-button type="danger" size="small" @click="marketing_template.product_pic_titles.splice(index, 1);" style="margin-left: 80px;">删除</el-button>
</div>
<el-button type="success" size="small" @click="onPreviewMarketingTemplatePicText">预览</el-button>
<el-dialog title="预览" v-model="previewMarketingTemplatePicTextVisible" append-to-body :width="parseInt(form.img_size.width) / 2 + 40">
<el-button type="success" size="small" @click="onPreviewMarketingTemplatePicText('product')">预览</el-button>
<el-dialog title="预览" v-model="previewMarketingTemplateProductPicTextVisible" append-to-body :width="parseInt(form.img_size.width) / 2 + 40">
<div :style="{ width: String(parseInt(form.img_size.width) / 2)+'px' } " class="dashed-div">
<el-image :src="marketing_template.product_pic_with_text" />
</div>
......
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