简化预览

src/utils/utils.ts

@@ -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

@@ -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

@@ -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>