index_en.vue

<script setup lang="ts">
import { onMounted, reactive, ref } from "vue";
import { Sunny, UploadFilled } from "@element-plus/icons-vue";
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(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,
  if_need_subtitle: default_data.if_need_subtitle,
  chatgpt_prompt: "",
  chatgpt_answer: "",
  chatgpt_answer_roles: <Wm.RolesItem[]>[],
  all_roles: "",
  adapt_result_json: <Wm.ScriptsItem[]>[],
  task_id: "",
  final_video: "",
});
const sd_prompt_prefix = default_data.sd_prompt_prefix;
const sd_negative_prompt_prefix = default_data.sd_negative_prompt_prefix;

const tyqw = {'api': 'tyqw', 'name':'通义千问线上'};
const baichuan = {'api': 'langchain', 'name':'baichuan2-7b'};
const qwen = {'api': 'langchain', 'name':'Qwen-7B-Chat'};
const gpt = {'api': 'gpt', 'name':'chatgpt'};

const wenan_llm = gpt.api
const wenan_llm_name = gpt.name
const role_llm = gpt.api
const role_llm_name = gpt.name
const role_keywords_llm = gpt.api
const role_keywords_llm_name = gpt.name
const tuili_llm = gpt.api
const tuili_llm_name = gpt.name
const fanyi_llm = gpt.api
const fanyi_llm_name = gpt.name

const voice_rate = ref(-10)
const voice_volume = ref(0)
const voice = ref("en-US-BrianNeural")
const bgm = ref("解忧曲")
const bgm_volume = ref(0.3)
const pwdCheckDialogVisible = ref(false);
const pwdCheckValue = ref("")
const sub_font_color = ref("#FFFF00")
const sub_font_size = ref(25)
const sub_position = ref(0.4)


onMounted(() => {
  // 初始化示例数据
  onChangeScreen(form.screen);
  // 初始化密码框
  if (debug.value == true) {
    pwdCheckDialogVisible.value = false;
  } else {
    pwdCheckDialogVisible.value = true;
  }
});

const delay = (ms: any) => new Promise(res => setTimeout(res, ms));

const onSubmitGpt = () => {
  text2videoService
    .submitLLM(form.chatgpt_prompt, wenan_llm)
    .then((result: string) => {
      console.log(form.chatgpt_prompt);
      console.log(result);
      form.chatgpt_answer = result;
    })
    .catch((error: any) => {
      // console.error(error);
      ElMessage({
        message: error,
        type: "error",
      });
    });
};

const onAdaptRoles = async () => {
  if (!form.chatgpt_answer || form.chatgpt_answer.length == 0) {
    ElMessage({
      message: "文案不能为空",
      type: "error",
    });
    return;
  }
  loading.value = true;
  // 推理角色
  form.chatgpt_answer_roles = [];
  try {
    const adapt_restrict = `
    Instructions:
    Please understand this story and provide all the characters in it, with multiple characters separated by commas`;
    const roles = await text2videoService.submitLLM("story:\n" + form.chatgpt_answer + "\n" + adapt_restrict, role_llm);
    form.all_roles = roles.replace(/。/g, '').replace(/、/g, ',')
    console.log(form.all_roles)
    const roles_arr = form.all_roles.split(/[，,]/);
    console.log(roles_arr)

    async function processRoles() {
      for (const one_role of roles_arr) {
        await delay(100);
        const adapt_keyword_restrict = `
        Instructions:
        Please understand this story and provide the keywords for the character "${one_role.trim()}" (gender (can be supplemented with imagination, but must have it), age (can be supplemented with imagination, but must have it),
        Skin color (can be supplemented with imagination, but must have it), clothing (can be supplemented with imagination, but must have it), hairstyle (can be supplemented with imagination, but must have it),
        Hair color (can be supplemented with imagination, but must have it), facial color (can be supplemented with imagination, but must have it), facial features (can be supplemented with imagination, but must have it).
        Requirement:
        Keywords are separated by commas.
        As long as the keyword is returned, no additional explanatory text is required.`;
        let keywords = await text2videoService.submitLLM("story:\n" + form.chatgpt_answer + "\n" + adapt_keyword_restrict, role_keywords_llm);
        keywords = keywords.replace(/。/g, '').replace(/、/g, ',')
        form.chatgpt_answer_roles.push({
          "角色": one_role.trim(),
          "角色关键词": keywords.trim()+",dressed",
          "角色英文关键词": "",
          "属性": "",
        });
      }
    }
    try {
      await processRoles();
      console.log(form.chatgpt_answer_roles)
    } catch (error) {
      ElMessage({
        message: String(error),
        type: "error"
      });
    } finally {
      loading.value = false; // 最终关闭loading（无论成功或失败）
    }
  } catch (error) {
    ElMessage({
      message: String(error),
      type: "error",
    });
  } finally {
    // 最终关闭loading（无论成功或失败）
    loading.value = false;
  }
};

const onAdapt = async () => {
  if (!form.chatgpt_answer || form.chatgpt_answer.length == 0) {
    ElMessage({
      message: "文案不能为空",
      type: "error",
    });
    return;
  }
  loading.value = true;
  form.task_id = utils.genDateTimeStr();
  console.log(form.task_id)
  // 按标点拆分成分镜
  const sentences = utils.splitTextEn(form.chatgpt_answer);
  console.log(sentences.length)
  // 分镜
  form.adapt_result_json = []
  for (let i = 0; i < sentences.length; i++) {
    form.adapt_result_json.push({
      "编号": (i + 1).toString(),
      "场景描述": sentences[i].trim(),
      "场景关键词": "",
      "角色": "",
      "角色关键词": "",
      "画面描述词": "",
      "本镜配图": "src/assets/loading.gif",
      "local_image_path": "",
    });
  }
  console.log(form.adapt_result_json)

  async function processScenes() {
    for (const item of form.adapt_result_json) {
      await onAdaptOne(item);
      // await delay(100);
      // await onDrawOne(item);
      onDrawOne(item);
    }
  }

  try {
    await processScenes();
    ElMessage({
      message: "all scene ok",
      type: "success"
    });
    console.log(form.adapt_result_json);
  } catch (error) {
    ElMessage({
      message: String(error),
      type: "error"
    });
  } finally {
    loading.value = false; // 最终关闭loading（无论成功或失败）
  }

};

const onAdaptOne = async (item: any) => {
  if (!item.场景描述) {
    ElMessage({
      message: "分镜场景描述不能为空",
      type: "error",
    });
    return;
  }
  // 推理关键词
  try {
    const adapt_restrict = `
    Instructions:
    Please understand this story and provide the keywords for the scene "${item.场景描述}" (era (can be supplemented with imagination, but must be present), space (can be supplemented with imagination, but must be present),
    Time period (imagination can be used to supplement, but it must be present), geographical environment (imagination can be used to supplement, but it must be present), weather (imagination can be used to supplement, but it must be present),
    Items (can be supplemented with imagination, but must be present), characters (can be supplemented with imagination, but must be present), camera angles (can be supplemented with imagination, but must be present).
    Requirement:
    Keywords are separated by commas.
    As long as the keyword is returned, no additional explanatory text is required.`;
    const keywords = await text2videoService.submitLLM("story:\n" + form.chatgpt_answer +  "\n" + adapt_restrict, tuili_llm);
    // console.log(keywords)
    item.场景关键词 = keywords;
    if (form.chatgpt_answer_roles.length === 0) {
      // 总角色为空
      item.角色 = '';
      item.角色关键词 = '';
    } else {
      // 总角色不为空
      const adapt_role_restrict = `
      Instructions:
      Please understand this story and for the scene: "${item.场景描述}", select the character in this scene from characters, with multiple characters separated by commas.`;
      const item_roles = await text2videoService.submitLLM("story:\n" + form.chatgpt_answer + "\ncharacters:\n"+ form.all_roles +"\n" + adapt_role_restrict, tuili_llm);
      // console.log(role_keywords)
      item.角色 = item_roles;
      let role_kws = ""
      const item_roles_arr = item_roles.split(/[，,、]/);
      item_roles_arr.forEach( one_item_role => {
        let temp_role_kws = ""
        // 人工匹配角色关键词，先找想同的
        for (const i of form.chatgpt_answer_roles) {
          if (i["角色"].trim() == one_item_role.trim()) {
            temp_role_kws = `[${i["角色"]}: ${i["角色关键词"]}]`;
            // 找到就ok
            break;
          }
        }
        // 如果找不到相同的，则模糊匹配
        if (! temp_role_kws) {
          for (const i of form.chatgpt_answer_roles) {
            if (i["角色"].includes(one_item_role.trim()) || one_item_role.includes(i["角色"].trim())) {
              temp_role_kws = `[${i["角色"]}: ${i["角色关键词"]}]`;
              // 匹配到一个就ok
              break;
            }
          }
        }
        role_kws = `${role_kws}${temp_role_kws}`;
      })
      item.角色关键词 = role_kws;
    }
  } catch (error) {
    ElMessage({
      message: String(error),
      type: "error",
    });
  }
};

const onDrawOne = async (item: any) => {
  if (!item.场景描述 && !item.场景关键词) {
    ElMessage({
      message: "场景描述和场景关键词不能都为空",
      type: "error",
    });
    return;
  }
  // 翻译+画图
  if (!form.task_id) {
    form.task_id = utils.genDateTimeStr();
    console.log(form.task_id)
  }
  try {
    item.本镜配图 = "src/assets/loading.gif";
    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.submitLLM(
      `${temp_prompt}
      Instructions:
      Please understand the above content and return an English description.`, fanyi_llm
    );
    item.画面描述词 = sd_describe;
    const sd_prompt = item.画面描述词 + "," + sd_prompt_prefix;
    let width = "960";
    let height = "540";
    if (form.screen == "竖屏") {
      width = "540";
      height = "960";
    }
    // console.log(sd_prompt);
    // console.log(sd_negative_prompt_prefix);
    const sampler_index = "DPM++ SDE Karras";
    const seed = "-1";
    const steps = "6";
    const cfg_scale = "2";
    const sd_img = await text2videoService.submitSD(form.task_id, item.编号, sd_prompt, sd_negative_prompt_prefix, width, height, sampler_index, seed, steps, cfg_scale);
    item.本镜配图 = sd_img.domain_image_path+"?v="+utils.genDateTimeStr();
    item.local_image_path = sd_img.local_image_path;
  } catch (error) {
    ElMessage({
      message: String(error),
      type: "error",
    });
    item.本镜配图 = ""
  }
};

const onGenVideo = () => {
  if (!form.adapt_result_json || form.adapt_result_json.length == 0 ) {
    ElMessage({
      message: "必要信息不能为空，请重新执行",
      type: "error",
    });
    return;
  }
  let is_all_ok = true;
  form.adapt_result_json.map(item => {
    if (item.编号 == "" || item.场景描述 == "" || item.local_image_path == "") {
      ElMessage({
        message: `分镜 ${item.编号} 的必要信息为空，请重新执行`,
        type: "error",
      });
      is_all_ok = false;
    }
  });
  if (!is_all_ok) return;
  console.log(form.adapt_result_json);
  const video_param_detail = form.adapt_result_json.map(item => {
    return {
      idx: item.编号,
      text: item.场景描述,
      img_path: item.local_image_path
    };
  });
  let para_rate = `${voice_rate.value}%`;
  let para_volume = `${voice_volume.value}%`;
  if(voice_rate.value >= 0){para_rate = `+${para_rate}`}
  if(voice_volume.value >= 0){para_volume = `+${para_volume}`}
  const video_param = {
    task_id: form.task_id,
    if_need_subtitle: form.if_need_subtitle,
    lang: 'en',
    task_info: video_param_detail,
    rate: para_rate,
    volume: para_volume,
    voice: voice.value,
    bgm: bgm.value,
    bgm_volume: bgm_volume.value,
    sub_font_size: String(sub_font_size.value),
    sub_font_color: sub_font_color.value,
    sub_position: String(1 - sub_position.value),
  }
  text2videoService
    .submitGenVideo(video_param)
    .then((result: string) => {
      console.log(result);
      form.final_video = "";
      form.final_video = result+"?v="+utils.genDateTimeStr();
    })
    .catch((error: any) => {
      // console.error(error);
      ElMessage({
        message: error,
        type: "error",
      });
    });
};

const clean_demo = () => {
  form.chatgpt_prompt = "";
  form.chatgpt_answer = "";
  form.chatgpt_answer_roles = <Wm.RolesItem[]>[];
  form.adapt_result_json = <Wm.ScriptsItem[]>[];
  form.task_id = "";
  form.final_video = "";
}

const clean_roles = () => {
  form.chatgpt_answer_roles = <Wm.RolesItem[]>[];
}

const onChangeScreen = (val: string) => {
  if (debug.value == true) {
    if (val == "竖屏") {
      form.task_id = default_data.en_vertical_data.task_id;
      form.chatgpt_prompt = default_data.en_vertical_data.chatgpt_prompt;
      form.chatgpt_answer = default_data.en_vertical_data.chatgpt_answer;
      form.chatgpt_answer_roles = default_data.en_vertical_data.chatgpt_answer_roles;
      form.adapt_result_json = default_data.en_vertical_data.adapt_result_json;
      form.final_video = default_data.en_vertical_data.final_video;
    }
  }
}

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;
    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()
}

const onPwdCheckDialog = () => {
  text2videoService
    .submitPwdCheck(pwdCheckValue.value)
    .then((result: string) => {
      if (result == "success") {
        pwdCheckDialogVisible.value = false;
      } else {
        ElMessage({
          message: result,
          type: "error",
        });
      }
    })
    .catch((error: any) => {
      ElMessage({
        message: error,
        type: "error",
      });
    });

}
</script>

<template>
  <main class="home-container">
    <!-- 标题 -->
    <el-divider content-position="left">text2video</el-divider>
    <el-form :model="form" label-width="114px" v-loading="loading">
      <el-form-item>
        <div>
          <el-radio-group v-model="form.screen" @change="onChangeScreen">
            <el-radio label="横屏" size="large" border/>
            <el-radio label="竖屏" size="large" border/>
          </el-radio-group>
        </div>
      </el-form-item>
      <el-form-item>
        <el-button type="success" @click="clean_demo">清除所有数据</el-button>
      </el-form-item>
      <!-- Prompt到文案 -->
      <el-form-item label="Prompt">
        <el-input v-model="form.chatgpt_prompt" :autosize="true" type="textarea" />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmitGpt">生成文案（{{wenan_llm_name}}）</el-button>
      </el-form-item>
      <el-form-item label="文案">
        <el-input v-model="form.chatgpt_answer" :autosize="true" type="textarea" />
      </el-form-item>
      <!-- 角色 -->
      <el-form-item>
        <el-button type="primary" @click="onAdaptRoles">推理角色（{{role_llm_name}}）、推理角色关键词（{{role_keywords_llm_name}}）</el-button>
        <el-button plain @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)">
          <el-table-column prop="角色" label="角色">
            <template v-slot="scope">
              <el-input v-model="scope.row.角色" :autosize="true" type="textarea"></el-input>
            </template>
          </el-table-column>
          <el-table-column prop="角色关键词" label="角色关键词">
            <template v-slot="scope">
              <el-input v-model="scope.row.角色关键词" :autosize="true" type="textarea"></el-input>
            </template>
          </el-table-column>
        </el-table>
      </el-form-item>
      <!-- 分镜 -->
      <el-form-item>
        <el-button type="primary" @click="onAdapt">分镜、推理场景关键词（{{tuili_llm_name}}）、英文描述（{{fanyi_llm_name}}）、绘图</el-button>
      </el-form-item>
      <el-form-item label="分镜">
        <el-table :data="form.adapt_result_json" border style="width: 100%; z-index: calc(var(--el-table-index) -1)">
          <el-table-column prop="编号" label="编号" width="60" />
          <el-table-column prop="场景描述" label="场景描述">
            <template v-slot="scope">
              <el-input v-model="scope.row.场景描述" :autosize="true" type="textarea"></el-input>
            </template>
          </el-table-column>
          <el-table-column prop="场景关键词" label="场景关键词">
            <template v-slot="scope">
              <el-input v-model="scope.row.场景关键词" :autosize="true" type="textarea"></el-input>
            </template>
          </el-table-column>
          <el-table-column prop="角色" label="角色">
            <template v-slot="scope">
              <el-input v-model="scope.row.角色" :autosize="true" type="textarea"></el-input>
            </template>
          </el-table-column>
          <el-table-column prop="角色关键词" label="角色关键词">
            <template v-slot="scope">
              <el-input v-model="scope.row.角色关键词" :autosize="true" type="textarea"></el-input>
            </template>
          </el-table-column>
          <el-table-column prop="本镜配图" label="本镜配图" width="300">
            <template v-slot="scope">
              <div>
                <el-image :src="scope.row.本镜配图" :zoom-rate="1.2" :max-scale="1.5" :min-scale="0.5"
                  :preview-src-list="[scope.row.本镜配图]" fit="cover" :hide-on-click-modal="true"
                />
              </div>
            </template>
          </el-table-column>
          <el-table-column width="120" label="操作" align="center">
            <!-- 
            <template v-slot:header>
              <el-button type="danger" size="default" @click="">批量绘制所有图片</el-button>
            </template> 
            -->
            <template v-slot="scope">
              <div style="margin: 10px 0"><el-button type="primary" size="default" @click="onAdaptOne(scope.row)">推理关键词</el-button></div>
              <div style="margin: 10px 0"><el-button type="primary" size="default" @click="onDrawOne(scope.row)">翻译、绘图</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>
      </el-form-item>
      <!-- 生成视频 -->
      <el-form-item label="设置">
        <span style="margin: 0 20px">TTS语速：</span>
        <el-slider v-model="voice_rate" show-input :min="-50" :max="50" :marks="default_data.marks" style="width: 900px" />
      </el-form-item>
      <el-form-item>
        <span style="margin: 0 20px">TTS音量：</span>
        <el-slider v-model="voice_volume" show-input :min="-80" :max="80" :marks="default_data.marks" style="width: 900px" />
      </el-form-item>
      <el-form-item>
        <span style="margin: 20px 20px 0 20px">TTS语音：</span>
        <el-select v-model="voice" placeholder="Select" style="width: 400px; margin-top: 20px;">
          <el-option
            v-for="item in default_data.voices_en"
            :key="item.value"
            :label="item.value"
            :value="item.value"
          >
            <span style="float: left">{{ item.value }}</span>
            <span
              style="
                float: right;
                color: var(--el-text-color-secondary);
                font-size: 13px;
              "
              >{{ item.label }}</span>
          </el-option>
        </el-select>
        <audio :src="'src/assets/edge-tts-voices/' + voice + '.mp3'" controls style="height: 30px; margin: 20px 0 0 10px;"></audio>
      </el-form-item>
      <el-form-item>
        <span style="margin: 0 20px">背景音乐：</span>
        <el-select v-model="bgm" placeholder="无" style="width: 400px;">
          <el-option
            v-for="item in default_data.bgm"
            :key="item.value"
            :label="item.value"
            :value="item.value"
          >
            <span style="float: left">{{ item.label }}</span>
            <span
              style="
                float: right;
                color: var(--el-text-color-secondary);
                font-size: 13px;
              "
              >{{ item.value }}</span>
          </el-option>
        </el-select>
        <audio :src="'src/assets/bgm/' + bgm + '.mp3'" controls style="height: 30px; margin-left:10px;"></audio>
      </el-form-item>
      <el-form-item>
        <span style="margin: 0 20px">背景音量：</span>
        <el-slider v-model="bgm_volume" show-input :step="0.1" :min="0" :max="2" :marks="default_data.bgm_volume_marks" style="width: 600px" />
      </el-form-item>
      <el-form-item>
        <span style="margin: 20px 20px">字幕：</span>
        <el-switch v-model="form.if_need_subtitle" active-value="true" inactive-value="false"/>
        <div v-if="JSON.parse(form.if_need_subtitle.toLowerCase())">
          <span style="margin-left:30px;">字体颜色：</span>
          <el-color-picker v-model="sub_font_color"/>
          <span style="margin-left:30px;">字体大小：</span>
          <el-input-number v-model="sub_font_size" :min="1" :max="50" controls-position="right" />
          <span style="margin-left:30px;">在屏幕上的位置：</span>
          <el-slider v-model="sub_position" :step="0.1" :min="0" :max="1" show-input vertical height="100px" />
        </div>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onGenVideo">生成视频</el-button>
      </el-form-item>
      <el-form-item>
        <video :src="form.final_video" controls></video>
      </el-form-item>
    </el-form>
    <!-- 授权密码框 -->
    <el-dialog
      v-model=pwdCheckDialogVisible
      title="请输入密码"
      width="20%"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      :show-close="false"
    >
      <el-form :model="form">
        <el-form-item label="密码">
          <el-input v-model="pwdCheckValue" autocomplete="off" type="password" show-password @keyup.enter="onPwdCheckDialog()" />
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button type="primary" @click="onPwdCheckDialog()">ok</el-button>
        </div>
      </template>
    </el-dialog>
  </main>
</template>

<style lang="scss" scoped>
.home-container {
  width: 100%;
}
</style>

<style lang="scss">
.home-container {
  .el-table .el-table__cell {
    z-index: calc(var(--el-table-index) -1);
  }
}
</style>