index.vue

<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 text2videoService from "@/api/service/text2videoService";
import utils from "@/utils/utils";

const loading = ref(false);
const step = ref(1);
const is_adapt_result_json = ref(1);
const form = reactive({
  chatgpt_prompt: "帮我生成一个关于医生穿越到古代行侠仗义的故事，约200字左右",
  chatgpt_answer:
    "曾经的医生王强穿越回了古代，发现这个时代正值战乱时期。他觉得自己是时候行侠仗义，保护那些无辜受苦的人们了。王强在一个村庄里遇到了一个年轻的农民，叫李明。李明父母在战乱中被杀，他成了孤儿，并且被恶势力欺压。王强决定帮助李明。他教授李明一些基本的医术，并且帮助他恢复村庄的秩序。为了支援农民，王强到处奔走，为那些受伤的人们进行治疗。他在古代用现代医学知识，快速治愈了一些以前无法治愈的疾病。他趁机收集了一群志同道合的人，组建了一个抗击恶势力的义勇军。由于他的医术悉心教导，王强手下的队伍战斗力大增，并且开始挑战恶势力的统治。在战斗中，王强发现一支正义的侠盗团队正在保护受苦的人们。他决定与他们合作，将农民们和侠盗团队联合起来，共同对抗恶势力。最终，王强和他的队伍，还有侠盗团队成功地将恶势力赶出了村庄，恢复了和平。他们在古代留下了无穷的传奇，为人们带来了新的希望和幸福。医生王强也与李明成了好朋友，他们一起守护着村庄的和平与安宁。",
  adapt_restrict:
    '将上述文案改编为10个短视频分镜，给出每个分镜的场景描述、场景关键词（年代,空间,时间段,地理环境,天气,物品,人物,镜头角度）、角色、角色关键词（性别,年龄,肤色,衣服,发型,发色,脸色,五官特点,体态,情绪,肢体动作）。以如下json字符串的格式返回：{"分镜":[{"编号":"","场景描述":"","场景关键词":"","角色":"","角色关键词":""},...]}',
  adapt_result: "",
  // adapt_result_json: <Wm.ScriptsItem[]>[],
  adapt_result_json: [
    {
        "编号": "1",
        "场景描述": "王强穿越回古代",
        "场景关键词": "古代,时空穿越,未知时间段,室内",
        "角色": "王强",
        "角色关键词": "男性,中年,普通人装扮,短发,黑色,平静,站立"
    },
    {
        "编号": "2",
        "场景描述": "战乱的村庄",
        "场景关键词": "古代,战乱时期,白天,村庄",
        "角色": "王强,李明",
        "角色关键词": "男性,中年,普通人装扮,短发,黑色,平静,站立 - 男性,年轻,农民装扮,短发,黑色,悲伤,跪地"
    },
    {
        "编号": "3",
        "场景描述": "王强教授李明医术",
        "场景关键词": "古代,村庄内部,白天,室内",
        "角色": "王强,李明",
        "角色关键词": "男性,中年,普通人装扮,短发,黑色,自信,坐下 - 男性,年轻,农民装扮,短发,黑色,专注,坐下"
    },
    {
        "编号": "4",
        "场景描述": "恢复村庄秩序",
        "场景关键词": "古代,村庄外部,白天,室外",
        "角色": "王强,李明,村民",
        "角色关键词": "男性,中年,普通人装扮,短发,黑色,自信,站立 - 男性,年轻,农民装扮,短发,黑色,专注,站立 - 男性,女性,各年龄段,普通人装扮,长发/短发,不同颜色,平静,站立/坐下"
    },
    {
        "编号": "5",
        "场景描述": "王强为受伤的人治疗",
        "场景关键词": "古代,村庄内部,白天,室内",
        "角色": "王强,伤者",
        "角色关键词": "男性,中年,普通人装扮,短发,黑色,专业,坐下 - 男性/女性,各年龄段,普通人装扮,长发/短发,不同颜色,疼痛,躺下/坐下"
    },
    {
        "编号": "6",
        "场景描述": "王强组建抗击恶势力的义勇军",
        "场景关键词": "古代,村庄内部,白天,室内",
        "角色": "王强,义勇军成员",
        "角色关键词": "男性,中年,普通人装扮,短发,黑色,决心,坐下/站立"
    },
    {
        "编号": "7",
        "场景描述": "侠盗团队保护受苦的人",
        "场景关键词": "古代,村庄内外,白天/夜晚,室内/室外",
        "角色": "王强,侠盗团队成员",
        "角色关键词": "男性,中年,黑色侠盗装,短发,黑色/金色,坚定,站立/跑动"
    },
    {
        "编号": "8",
        "场景描述": "王强与侠盗团队合作",
        "场景关键词": "古代,村庄内外,白天/夜晚,室内/室外",
        "角色": "王强,侠盗团队成员,村民",
        "角色关键词": "男性,中年,普通人装扮,短发,黑色,决心,站立/坐下,侠盗装扮 - 男性,中年,黑色侠盗装,短发,黑色/金色,坚定,站立/跑动 - 男性,女性,各年龄段,普通人装扮,长发/短发,不同颜色,平静,站立/坐下"
    },
    {
        "编号": "9",
        "场景描述": "战斗驱逐恶势力",
        "场景关键词": "古代,村庄内外,白天/夜晚,室内/室外",
        "角色": "王强,义勇军成员,侠盗团队成员,村民",
        "角色关键词": "男性,中年,普通人装扮,短发,黑色,威武,站立/跑动 - 男性,中年,黑色侠盗装,短发,黑色/金色,坚定,站立/跑动 - 男性,女性,各年龄段,普通人装扮,长发/短发,不同颜色,平静,站立/坐下"
    },
    {
        "编号": "10",
        "场景描述": "恢复村庄和平",
        "场景关键词": "古代,村庄内外,白天/夜晚,室内/室外",
        "角色": "王强,农民,侠盗团队成员",
        "角色关键词": "男性,中年,普通人装扮,短发,黑色,喜悦,站立/坐下 - 男性,年轻,农民装扮,短发,黑色,平静,站立/坐下 - 男性,中年,黑色侠盗装,短发,黑色/金色,坚定,站立/跑动"
    }
  ],
  // ai_draw_json: <Wm.AiDrawItem[]>[],
  ai_draw_json: [
    {
      "编号": "1",
      "场景描述": "王强穿越回古代",
      "画面描述词":
        "Wang Qiang found himself standing in an unfamiliar room. The dimly lit interior had an ancient feel to it, with wooden beams and ornate decorations adorning the room. Wang Qiang, a middle-aged man dressed in ordinary clothes, was startled by his sudden transportation through time and space. Although a bit confused, he remained calm and composed. Standing in the room, he observed his surroundings, trying to figure out which era he had arrived in.",
      "本镜配图":
        "http://wm_tools_backend.frp.wmdigit.com:8888/assets/outputs/20240131095112500/img/1.png",
      "task_id": "20240131095112500",
    },
    {
      "编号": "2",
      "场景描述": "战乱的村庄",
      "画面描述词":
        "Scene: War-torn VillageCharacters:Wang Qiang - Male, Middle-aged, Commoner attire, Short hair, Black, Calm, StandingLi Ming - Male, Young, Peasant attire, Short hair, Black, Sad, KneelingWang Qiang stands in the ruins of the war-torn village, observing the destruction surrounding him. The once peaceful village now lies in ruins, with burnt houses and debris scattered everywhere. It is daytime, and the sun casts a gloomy light on the desolate scene.Nearby, Li Ming is seen kneeling on the ground, his head bowed in sorrow. His worn-out farmer's clothes reflect the hardships he has endured. His face, covered in dirt and tears, reveals the deep sadness in his heart. His farm tools lie abandoned next to him, useless in the chaos of war.Wang Qiang remains calm, his eyes filled with determination as he surveys the devastation. Despite the turmoil and despair, he stands tall, his resilience evident. As a middle-aged man, he carries the weight of the village's hopes and dreams on his shoulders, fighting bravely to protect what is left.Meanwhile, Li Ming's youthful innocence and optimism have been shattered by the brutality of war. Kneeling on the ground, he clings onto the fading memories of the peaceful past. The loss and grief he feels are evident in his posture, his trembling hands clasped in prayer, as he seeks solace in a higher power.In this war-torn village, Wang Qiang and Li Ming represent the contrast between the resilience of experience and the vulnerability of youth. They stand as symbols of the collective struggle and resilience of the villagers, amidst the chaos and destruction brought upon by the ancient era of war.",
      "本镜配图":
        "http://wm_tools_backend.frp.wmdigit.com:8888/assets/outputs/20240131095112500/img/2.png",
      "task_id": "20240131095112500",
    },
    {
      "编号": "3",
      "场景描述": "王强教授李明医术",
      "画面描述词":
        "Professor Wang Qiang is teaching Doctor Li Ming traditional medical skills. They are in a village, inside a room, during the daytime. Wang Qiang, a middle-aged man with short black hair, wearing ordinary clothes, exudes confidence as he sits down. Li Ming, a young man in farmer's attire, with short black hair, sits down attentively, fully focused on the professor's teachings.",
      "本镜配图":
        "http://wm_tools_backend.frp.wmdigit.com:8888/assets/outputs/20240131095112500/img/3.png",
      "task_id": "20240131095112500",
  },
  {
      "编号": "4",
      "场景描述": "恢复村庄秩序",
      "画面描述词":
        "Scene: Restoring Order in the VillageCharacters:- Wang Qiang: Male, middle-aged, dressed as an ordinary person, short black hair, confident, standing.- Li Ming: Male, young, dressed as a farmer, short black hair, focused, standing.- Villagers: Male and female, of various ages, dressed as ordinary people, with either long or short hair, different colors, calm, standing or sitting.Translation:Scene description: In ancient times, outside the village during the day, in an outdoor setting.Wang Qiang and Li Ming, both dressed in their ordinary attires, are standing together outside the village. They observe the chaotic situation with determination and a sense of duty, ready to restore order.The villagers, comprising men and women of different ages, are also present. They are calmly standing or sitting, waiting for Wang Qiang and Li Ming to take charge and bring harmony back to their village.",
      "本镜配图":
        "http://wm_tools_backend.frp.wmdigit.com:8888/assets/outputs/20240131095112500/img/4.png",
      "task_id": "20240131095112500",
  },
  {
      "编号": "5",
      "场景描述": "王强为受伤的人治疗",
      "画面描述词":
        "Translation:Scene: Wang Qiang treating the injured personPeriod: Ancient timesLocation: Inside a villageTime of day: DaytimeSetting: IndoorsCharacters:1. Wang Qiang - Male, middle-aged, dressed in ordinary attire, short hair, black hair color, professional, seated.2. Injured person - Male/female, various age groups, dressed in ordinary attire, long hair/short hair, different colors, in pain, lying down/sitting.Please note that the Chinese names respectively, and the character descriptions have been directly translated into English.",
      "本镜配图":
        "http://wm_tools_backend.frp.wmdigit.com:8888/assets/outputs/20240131095112500/img/5.png",
      "task_id": "20240131095112500",
  },
  {
      "编号": "6",
      "场景描述": "王强组建抗击恶势力的义勇军",
      "画面描述词":
        "Wang Qiang, a middle-aged man with short black hair, dressed as an ordinary person, is sitting in a room inside a village in ancient times. He is filled with determination and is busy assembling a group of volunteers to fight against the evil forces.Wang Qiang: (sitting down, speaking with conviction) Brothers, our village is under attack from these evil forces. We cannot sit back and watch them terrorize our people any longer. It's time to take action and form a militia to protect our loved ones!义勇军成员 (义勇军成员 may refer to members of the militia or volunteers):(nodding in agreement, standing up) You're right, Wang Qiang. We must stand up for justice and defend our village. Count me in!Wang Qiang: (smiling confidently) I knew I could count on you all. Together, we will train and prepare ourselves to face these enemies head-on. Let's gather every able-bodied man in the village and discuss our strategy. We cannot afford to let fear paralyze us.义勇军成员: (determinedly) We will fight with all our might, Wang Qiang. No matter the odds, we will not back down. Our village deserves peace and safety.Wang Qiang: (standing up, clenching his fist) That's the spirit! We will show these evil forces what we're made of. Let's reclaim our village and restore justice to these lands!The group of volunteers joins Wang Qiang in his fight against the evil forces, uniting with a shared resolve and determination to protect their village. The stage is set for their heroic adventure.",
      "本镜配图":
        "http://wm_tools_backend.frp.wmdigit.com:8888/assets/outputs/20240131095112500/img/6.png",
      "task_id": "20240131095112500",
  },
  {
      "编号": "7",
      "场景描述": "侠盗团队保护受苦的人",
      "画面描述词":
        "In ancient times, in a village day or night, both indoors and outdoors, there is a man named Wang Qiang, who is in his middle age and always wears a black thieves' outfit. He has short hair, and his eyes are firm, shining either black or golden. Wang Qiang is a member of a band of thieves who are known for their noble cause. This group of skilled individuals protects the suffering people by using their discreet talents and abilities. Whether standing or running, they are dedicated to their mission.",
      "本镜配图":
        "http://wm_tools_backend.frp.wmdigit.com:8888/assets/outputs/20240131095112500/img/7.png",
      "task_id": "20240131095112500",
  },
  {
      "编号": "8",
      "场景描述": "王强与侠盗团队合作",
      "画面描述词":
        "Wang Qiang collaborated with the gang of thieves in an ancient village. The scene was set both inside and outside the village during the day and night.Inside the village, Wang Qiang, a determined man in his middle age, dressed in ordinary clothes with short black hair, stood with the members of the gang, who were dressed in black thief outfits. The gang members also had short black or golden hair and stood with a resolute expression. They discussed their plan while sitting.Outside the village, during the day, Wang Qiang stood with confidence alongside the gang members in their thief outfits. They were all middle-aged men with short black hair, dressed in black thief outfits. They discussed how to execute their plan and were ready to carry it out.At night, inside a house in the village, Wang Qiang and the gang members sat together with a serene expression. They disguised themselves as ordinary villagers, with both men and women of various ages, dressed casually, with either long or short hair in different colors. They calmly discussed their next move.",
      "本镜配图":
        "http://wm_tools_backend.frp.wmdigit.com:8888/assets/outputs/20240131095112500/img/8.png",
      "task_id": "20240131095112500",
  },
  {
      "编号": "9",
      "场景描述": "战斗驱逐恶势力",
      "画面描述词":
        "Scene: Battle to Expel Evil ForcesThe scene is set in an ancient village, both inside and outside. It can take place during the day or night, and can occur indoors or outdoors.Characters:1. Wang Qiang: a middle-aged man dressed in ordinary clothing. He has short black hair, a strong and imposing presence. He can be either standing or running.2. Members of the Volunteer Army: middle-aged men dressed in black thief outfits. They have short black or golden hair and a determined look on their faces. They can be either standing or running.3. Villagers: both males and females of various age groups dressed as ordinary people. They have different hair colors (long or short) and exhibit a calm demeanor. They can be either standing or sitting.Translation:Scene: The Battle to Expel Evil ForcesInside an ancient village, the brave Wang Qiang leads a team of members from the Volunteer Army. With their black thief outfits and determined expressions, they stand ready to confront the impending danger. Wang Qiang, a middle-aged man with short black hair, exudes strength and commands his fellow soldiers.As the battle takes place, the sun shines down on the village, illuminating their valiant efforts. Wang Qiang and his team swiftly maneuver through the village streets, their footsteps echoing as they run to defend their home.Amidst the chaos, the villagers watch with calm composure. Men, women, and children of all ages, dressed in ordinary clothing, stand united in support. Some sit indoors, seeking refuge from the turmoil, while others stand outside their homes, observing the fight unfold.Although outnumbered, Wang Qiang and his team fight valiantly, dispatching the evil forces with unwavering resolve. With every swing of their swords and the clash of weapons, they protect their beloved village from harm.As night falls, the battle continues under the pale moonlight. Wang Qiang's leadership inspires his team to keep fighting, as they refuse to let darkness cloud their determination. They stand tall, their silhouettes blending with the night, a symbol of unity and bravery.Throughout the epic clash, the villagers offer their silent prayers, hoping for the safety and triumph of their defenders. They hold onto the belief that their collective strength will overcome the evil forces threatening their ancient village.In this battle to expel the evil forces, Wang Qiang and his team, along with the unwavering support of the villagers, stand as beacons of hope, determined to restore peace and reclaim their homeland.",
      "本镜配图":
        "http://wm_tools_backend.frp.wmdigit.com:8888/assets/outputs/20240131095112500/img/9.png",
      "task_id": "20240131095112500",
  },
  {
      "编号": "10",
      "场景描述": "恢复村庄和平",
      "画面描述词":
        "Scene: Restoring Peace to the VillageSetting: A village in ancient times, both inside and outside the village.Characters:1. Wang Qiang - Male, middle-aged, dressed as an ordinary person, short hair, black, joyful, standing/sitting.2. Farmer - Male, young, dressed as a farmer, short hair, black, calm, standing/sitting.3. Member of the Thief Team - Male, middle-aged, dressed in black thief attire, short hair, black/gold, determined, standing/running.(Scene begins with the village in chaos. Buildings are burning, villagers are running around in panic.)Wang Qiang: (standing outside a burning house, looking distressed)Oh no, our peaceful village is under attack! We need to do something!(Farmer approaches Wang Qiang, standing beside him)Farmer: (calmly)Wang Qiang, we can't let them destroy our village. We must gather the villagers and defend ourselves.(Wang Qiang and the Farmer start rallying the villagers and organizing them into groups to fight back.)(Scene transitions to a nighttime scene. The village is now fortified, with the villagers and the Thief Team members working together.)Wang Qiang: (standing in front of the villagers, addressing them)We must stay strong and united! Together, we can restore peace to our village!(Member of the Thief Team approaches Wang Qiang, standing beside him)Thief Team Member: (determined)Wang Qiang, we are here to assist you in driving out the invaders. Our skills can be put to good use.(Wang Qiang and the Thief Team Member exchange a nod, signaling their agreement.)(Scene transitions to inside a house, where Wang Qiang and the Farmer are taking a break.)Wang Qiang: (sitting down, catching his breath)I'm grateful for your help, my friend. Together, we can rebuild our village and make it prosperous once again.Farmer: (sitting beside Wang Qiang)Indeed, Wang Qiang. Our unity will not only restore peace but also strengthen our bonds as a community.(Scene ends with Wang Qiang and the Farmer leaving the house, ready to continue their mission of restoring peace to the village, with the Thief Team members by their side.)",
      "本镜配图":
        "http://wm_tools_backend.frp.wmdigit.com:8888/assets/outputs/20240131095112500/img/10.png",
      "task_id": "20240131095112500",
  }
  ],
  final_video: "",
});

const sd_prompt_prefix = `best quality,masterpiece,realistic,HDR,UHD,8K,best quality,highres,absurdres,realistic,masterpiece,
Highly detailed,extreme detail description,Professional,cinematic_lighting,ultra-fine painting,full body,
Vivid Colors,physically-based rendering,cinematic,`;

const sd_negative_prompt_prefix = `multiple breasts, (mutated hands and fingers:1.5 ), (long body :1.3), 
(mutation, poorly drawn :1.2) , black-white, bad anatomy, liquid body, liquid tongue, disfigured, 
malformed, mutated, anatomical nonsense, malformed hands, long neck, blurred, 
lowers, bad proportions, bad shadow, uncoordinated body, unnatural body, fused breasts, 
bad breasts, huge breasts, poorly drawn breasts, extra breasts, liquid breasts, heavy breasts, missing breasts, 
huge haunch, huge thighs, huge calf, bad hands, fused hand, missing hand, disappearing arms, disappearing thigh, 
disappearing calf, disappearing legs, fused ears, bad ears, poorly drawn ears, extra ears, liquid ears, heavy ears, 
missing ears, fused animal ears, bad animal ears, poorly drawn animal ears, extra animal ears, liquid animal ears, 
heavy animal ears, missing animal ears, text, ui, error, missing fingers, missing limb, fused fingers, 
one hand with more than 5 fingers, one hand with less than 5 fingers, one hand with more than 5 digit, 
one hand with less than 5 digit, extra digit, fewer digits, fused digit, missing digit, bad digit, liquid digit, 
colorful tongue, black tongue, cropped, watermark, username, blurry, JPEG artifacts, signature, 3D, 3D game, 
3D game scene, 3D character, malformed feet, extra feet, bad feet, poorly drawn feet, fused feet, missing feet, 
extra shoes, bad shoes, fused shoes, more than two shoes, poorly drawn shoes, bad gloves, poorly drawn gloves, 
fused gloves, bad cum, poorly drawn cum, fused cum, bad hairs, poorly drawn hairs, fused hairs, big muscles, ugly, 
bad face, fused face, poorly drawn face, cloned face, big face, long face, bad eyes, fused eyes poorly drawn eyes, 
extra eyes, malformed limbs, more than 2 nipples, missing nipples, different nipples, fused nipples, bad nipples, 
poorly drawn nipples, black nipples, colorful nipples, gross proportions. short arm, (((missing arms))), missing thighs, 
missing calf, missing legs, mutation, duplicate, morbid, mutilated, poorly drawn hands, more than 1 left hand, 
more than 1 right hand, deformed, (blurry), disfigured, missing legs, extra arms, extra thighs, more than 2 thighs, 
extra calf, fused calf, nsfw,logo,text,extra legs, bad knee, extra knee, more than 2 legs, bad tails, bad mouth, 
fused mouth, poorly drawn mouth, bad tongue, tongue within mouth, too long tongue, black tongue, big mouth, cracked mouth, 
bad mouth, dirty face, dirty teeth, dirty pantie, fused pantie, poorly drawn pantie, fused cloth, poorly drawn cloth, bad pantie, 
yellow teeth, thick lips, bad cameltoe, colorful cameltoe, bad asshole, poorly drawn asshole, fused asshole, missing asshole, 
bad anus, bad pussy, bad crotch, bad crotch seam, fused anus, fused pussy, fused anus, fused crotch, poorly drawn crotch, 
fused seam, poorly drawn anus, poorly drawn pussy, poorly drawn crotch, poorly drawn crotch seam, bad thigh gap, missing thigh gap, 
fused thigh gap, liquid thigh gap, poorly drawn thigh gap, poorly drawn anus, bad collarbone, fused collarbone, missing collarbone, 
liquid collarbone, obesity, worst quality, low quality, normal quality, liquid tentacles, bad tentacles, poorly drawn tentacles, 
split tentacles, fused tentacles, missing clit, bad clit, fused clit, colorful clit, black clit, liquid clit, QR code, bar code, censored, 
safety panties, safety knickers, beard, furry ,pony, pubic hair, mosaic, excrement, faeces, shit, futa, testis,mutated hands and fingers,
deformed,bad anatomy,disfigured,poorly drawn face,lowres,mutated,extra limb,ugly,poorly drawn hands,missing limb,floating limbs,
disconnected limbs,malformed hands,out of focus,long neck,long body,gape,`;

onMounted(() => { });

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

const onAdapt = () => {
  if (!form.chatgpt_answer) {
    ElMessage({
      message: "内容不能为空",
      type: "error",
    });
    return;
  }
  text2videoService
    .submitGpt(form.chatgpt_answer + "\n" + form.adapt_restrict)
    .then((result: string) => {
      console.log(result);
      try {
        form.adapt_result_json = utils.formatJsonObj(result).分镜;
      } catch (error) {
        form.adapt_result = result;
        is_adapt_result_json.value = 0;
      }
    })
    .catch((error: any) => {
      console.error(error);
      ElMessage({
        message: error,
        type: "error",
      });
    });
};

const onDraw = async () => {
  loading.value = true;
  const task_id = utils.genDateTimeStr();
  const taskPromises = form.adapt_result_json.map(async (item) => {
    try {
      const result = await text2videoService.submitGpt(
        // `场景描述为：${item.场景描述}\n场景关键词为：${item.场景关键词}\n场景中的角色有：${item.角色}\n角色关键词为：${item.角色关键词}\n请理解以上内容，并翻译为相应的英文场景，保留人物和场景的特征和描写。以如下格式返回：Scene:... \nCharacters:...\n`
        `场景描述为：${item.场景描述}\n场景关键词为：${item.场景关键词}\n场景中的角色有：${item.角色}\n角色关键词为：${item.角色关键词}\n请理解以上内容，并翻译为相应的英文。`
      );
      // const newResult = result.replaceAll(".", "").replaceAll('"', "");
      const newResult = result
      try {
        const sd_prompt = newResult + "," + sd_prompt_prefix;
        const sd_result = await text2videoService.submitSD(
          task_id,
          item.编号,
          sd_prompt,
          sd_negative_prompt_prefix
        );
        return {
          编号: item.编号,
          场景描述: item.场景描述,
          画面描述词: newResult,
          本镜配图: sd_result.domain_image_path,
          task_id: task_id,
        };
      } catch (error) {
        ElMessage({
          message: String(error),
          type: "error",
        });
        return {
          编号: item.编号,
          场景描述: item.场景描述,
          画面描述词: newResult,
          本镜配图: "",
          task_id: task_id,
        };
      }
    } catch (error) {
      // console.error(error);
      ElMessage({
        message: String(error),
        type: "error",
      });
      return {
        编号: item.编号,
        场景描述: item.场景描述,
        画面描述词: "",
        本镜配图: "",
        task_id: task_id,
      };
    }
  });
  // 所有请求都返回后，重新排序
  try {
    const results = await Promise.all(taskPromises);
    form.ai_draw_json = [];
    form.ai_draw_json = results.sort((a, b) => parseInt(a.编号) - parseInt(b.编号));
    console.log(form.ai_draw_json);
  } catch (error) {
    // 处理错误
    ElMessage({
      message: String(error),
      type: "error",
    });
  } finally {
    // 最终关闭loading（无论成功或失败）
    loading.value = false;
  }
};

const onDrawOne = (idxStr: string) => {
  const idx = parseInt(idxStr) - 1;
  const task_id = form.ai_draw_json[idx].task_id;
  // console.log(task_id)
  const newResult = form.ai_draw_json[idx].画面描述词;
  const sd_prompt = newResult + "," + sd_prompt_prefix;
  text2videoService
    .submitSD(task_id, idxStr, sd_prompt, sd_negative_prompt_prefix)
    .then((sd_result: any) => {
      // console.log(result);
      form.ai_draw_json[idx].本镜配图 = "";
      form.ai_draw_json[idx].本镜配图 = sd_result.domain_image_path;
    })
    .catch((error: any) => {
      // console.error(error);
      ElMessage({
        message: error,
        type: "error",
      });
    });
};

const onGenVideo = () => {
  ElMessage({
    message: "开发中",
    type: "error",
  });
  return;
  const video_param = form.ai_draw_json.map(item => {
    return {
      task_id: item.task_id,
      idx: item.编号,
      text: item.场景描述,
      img_path: item.本镜配图
    };
  });
  text2videoService
    .submitGenVideo(video_param)
    .then((result: string) => {
      // console.log(result);
      form.final_video = result;
    })
    .catch((error: any) => {
      // console.error(error);
      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">
      <!-- 小说到文案 -->
      <el-form-item label="小说">
        <el-input v-model="form.chatgpt_prompt" :autosize="true" type="textarea" placeholder="输入小说" />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmitGpt">提交chatgpt，生成文案</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 label="分镜要求">
        <el-input v-model="form.adapt_restrict" :autosize="true" type="textarea" placeholder="" />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onAdapt">填写或修改分镜要求，提交chatgpt，生成分镜</el-button>
      </el-form-item>
      <el-form-item label="分镜结果" v-if="is_adapt_result_json === 0">
        <el-input v-model="form.adapt_result" :autosize="true" type="textarea" />
      </el-form-item>
      <el-form-item label="分镜结果" v-if="is_adapt_result_json === 1">
        <el-table :data="form.adapt_result_json" border style="width: 100%">
          <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>
      </el-form-item>
      <!-- 画图 -->
      <el-form-item>
        <el-button type="primary" @click="onDraw">组合SD提示词并绘图</el-button>
      </el-form-item>
      <el-form-item label="绘图">
        <el-table :data="form.ai_draw_json" border style="width: 100%; z-index: calc(var(--el-table-index) -1)"
          v-loading="loading">
          <el-table-column prop="编号" label="编号" width="60" />
          <el-table-column prop="场景描述" label="场景描述" />
          <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">
              <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="100" label="操作">
            <template v-slot="scope">
              <el-button type="primary" size="small" @click="onDrawOne(scope.row.编号)">重绘本镜</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-form-item>
      <!-- 生成视频 -->
      <el-form-item>
        <el-button type="primary" @click="onGenVideo">生成视频</el-button>
      </el-form-item>
    </el-form>
  </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>