Skip to content

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

简化预览

parent aa560232
Hide whitespace changes
Inline Side-by-side
Showing with 42 additions and 45 deletions
src/utils/utils.ts
View file @ 98eb9985
......@@ -36,9 +36,11 @@ export default class utils {
static splitText(str: string) {
str = str.replaceAll('“','').replaceAll('”','')
// 使用正则表达式拆分文本
let sentences = str.split(/[！|？|。|"|!]/);
let sentences = str.split(/[！|？|。|!|?]/);
// 过滤掉长度为 0 的句子
sentences = sentences.filter(s => s.length > 0);
// 过滤掉只包含标点符号的句子
sentences = sentences.filter(s => !utils.containsOnlyPunctuation(s));
// console.log(sentences)
return sentences
}
......@@ -61,4 +63,10 @@ export default class utils {
.replace(/\s+/g, ' '); // 连续多个空格替换为一个空格
}
// 检查该字符串是否只包含中文标点符号和英文标点符号
static containsOnlyPunctuation(str: string) {
// 使用正则表达式匹配是否只包含标点符号（包括中文标点）
return /^[!-\/:-@\[-`{-~\p{P}\p{S}\s]*$/u.test(str);
}
}
src/views/home/compositions/useManyValues.ts
View file @ 98eb9985
......@@ -307,14 +307,14 @@ export const useManyValues = () => {
position: 0.12,
},
],
product_pic_speech: "我们的产品正在促销热卖中，点点关注吧~",
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: "猪猪们的冒险之旅",
text: "猪猪的奇妙冒险",
color: "#000000",
bg_color: "#FFFFFF",
font_size: 60,
......
src/views/home/index.vue
View file @ 98eb9985
......@@ -12,7 +12,8 @@ import text2videoService from "@/api/service/text2videoService";
import utils from "@/utils/utils";
import { useManyValues } from './compositions/useManyValues'
const debug = ref(import.meta.env.MODE === 'production' ? false : true);
// const debug = ref(import.meta.env.MODE === 'production' ? false : true);
const debug = ref(false);
const loading = ref(false);
const dialogVisible = ref(false);
const dialogData = ref("");
......@@ -80,9 +81,6 @@ const marketing_template = reactive({
cover_pic_with_text_local: "",
cover_pic_titles: <Wm.PicText[]>[],
});
const previewMarketingTemplateProductPicTextVisible = ref(false);
const previewMarketingTemplateCoverPicTextVisible = ref(false);
onMounted(() => {
// 初始化示例数据
......@@ -680,18 +678,9 @@ const onChangeScreen = (val: string) => {
form.adapt_result_json = default_data.vertical_data.adapt_result_json;
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_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;
......@@ -708,6 +697,17 @@ const onChangeScreen = (val: string) => {
marketing_template.cover_pic_titles = default_data.marketing_template.cover_pic_titles;
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.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;
// 宽高
if (val == "横屏") {
form.img_size = default_data.horizontal_img_size;
......@@ -896,10 +896,14 @@ const onClearMarketingTemplatePic = (type: string) => {
if (type == 'product') {
marketing_template.product_pic = 'src/assets/waiting.png';
marketing_template.product_pic_local = '';
marketing_template.product_pic_with_text = 'src/assets/waiting.png';
marketing_template.product_pic_with_text_local = '';
};
if (type == 'cover') {
marketing_template.cover_pic = 'src/assets/waiting.png';
marketing_template.cover_pic_local = '';
marketing_template.cover_pic_with_text = 'src/assets/waiting.png';
marketing_template.cover_pic_with_text_local = '';
};
};
......@@ -1000,18 +1004,6 @@ const onMarketingTemplateAddTextToPic = async (type: string) => {
}
};
const onPreviewMarketingTemplatePicText = async (type: string) => {
let res = await onMarketingTemplateAddTextToPic(type);
if (!res) {return;}
if (type == 'product') {
previewMarketingTemplateProductPicTextVisible.value = true;
}
if (type == 'cover') {
previewMarketingTemplateCoverPicTextVisible.value = true;
}
};
const onMarketingTemplateSubmitGpt = async () => {
marketing_template.prompt1 = `
商品名称：{${marketing_template.product_name}}
......@@ -1216,8 +1208,8 @@ const onMarketingTemplateSubmitGpt = async () => {
<div :style="{ width: String(parseInt(form.img_size.width) / 2)+'px' } " class="dashed-div">
<el-image :src="marketing_template.product_pic_with_text" />
</div>
<span style="margin: 0 20px 0 20px">镜头旁白：</span>
<el-input v-model="marketing_template.product_pic_speech" :autosize="true" type="textarea" style="width: 400px;"></el-input>
<span style="margin-left: 20px;">镜头旁白：</span>
<el-text class="mx-1">{{ marketing_template.product_pic_speech }}</el-text>
</el-form-item>
<!-- 生成视频 -->
<el-form-item label="设置">
......@@ -1348,6 +1340,9 @@ const onMarketingTemplateSubmitGpt = async () => {
<div :style="{ width: String(parseInt(form.img_size.width) / 3)+'px' }" class="dashed-div">
<el-image :src="marketing_template.cover_pic" />
</div>
<div :style="{ width: String(parseInt(form.img_size.width) / 3)+'px' }" class="dashed-div" style="margin-left: 20px;">
<el-image :src="marketing_template.cover_pic_with_text" />
</div>
</el-form-item>
<el-form-item style="margin-left: 60px;">
<el-upload ref="upload_cover" :show-file-list="false" :limit="1"
......@@ -1357,8 +1352,9 @@ const onMarketingTemplateSubmitGpt = async () => {
<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-button type="success" size="small" @click="onMarketingTemplateAddTextToPic('cover')" style="margin-left: 30px;">预览</el-button>
</el-form-item>
<el-form-item label="图片文字">
<el-form-item label="封面文字">
<div style="width: 100%;">
<el-button type="primary" size="small" @click="onAddMarketingTemplatePicText('cover')">增加</el-button>
</div>
......@@ -1374,12 +1370,6 @@ 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.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="封底图片">
......@@ -1391,6 +1381,9 @@ const onMarketingTemplateSubmitGpt = async () => {
<div :style="{ width: String(parseInt(form.img_size.width) / 3)+'px' }" class="dashed-div">
<el-image :src="marketing_template.product_pic" />
</div>
<div :style="{ width: String(parseInt(form.img_size.width) / 3)+'px' }" class="dashed-div" style="margin-left: 20px;">
<el-image :src="marketing_template.product_pic_with_text" />
</div>
</el-form-item>
<el-form-item style="margin-left: 60px;">
<el-upload ref="upload_product" :show-file-list="false" :limit="1"
......@@ -1400,8 +1393,10 @@ const onMarketingTemplateSubmitGpt = async () => {
<el-button type="primary" size="small" style="margin: 10px;">上传图片</el-button>
</el-upload>
<el-button type="danger" size="small" @click="onClearMarketingTemplatePic('product')" style="margin-left: 15px;">清除图片</el-button>
<el-button type="success" size="small" @click="onMarketingTemplateAddTextToPic('product')" style="margin-left: 30px;">预览</el-button>
</el-form-item>
<el-form-item label="图片文字">
<el-form-item label="封底文字">
<div style="width: 100%;">
<el-button type="primary" size="small" @click="onAddMarketingTemplatePicText('product')">增加</el-button>
</div>
......@@ -1417,12 +1412,6 @@ 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('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>
</el-dialog>
</el-form-item>
<el-form-item label="镜头旁白">
<el-input v-model="marketing_template.product_pic_speech" :autosize="true" type="textarea"></el-input>
......
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