v20240129

components.d.ts

@@ -8,14 +8,20 @@ export {}
 declare module 'vue' {
   export interface GlobalComponents {
     ElButton: typeof import('element-plus/es')['ElButton']
+    ElDescriptions: typeof import('element-plus/es')['ElDescriptions']
+    ElDescriptionsItem: typeof import('element-plus/es')['ElDescriptionsItem']
     ElDivider: typeof import('element-plus/es')['ElDivider']
     ElElFormItem: typeof import('element-plus/es')['ElElFormItem']
     ElForm: typeof import('element-plus/es')['ElForm']
     ElFormItem: typeof import('element-plus/es')['ElFormItem']
     ElIcon: typeof import('element-plus/es')['ElIcon']
+    ElImage: typeof import('element-plus/es')['ElImage']
     ElInput: typeof import('element-plus/es')['ElInput']
     ElOption: typeof import('element-plus/es')['ElOption']
     ElSelect: typeof import('element-plus/es')['ElSelect']
+    ElTable: typeof import('element-plus/es')['ElTable']
+    ElTableColumn: typeof import('element-plus/es')['ElTableColumn']
+    ElTag: typeof import('element-plus/es')['ElTag']
     ElUpload: typeof import('element-plus/es')['ElUpload']
     HelloWorld: typeof import('./src/components/HelloWorld.vue')['default']
     IconCommunity: typeof import('./src/components/icons/IconCommunity.vue')['default']
@@ -28,4 +34,7 @@ declare module 'vue' {
     TheWelcome: typeof import('./src/components/TheWelcome.vue')['default']
     WelcomeItem: typeof import('./src/components/WelcomeItem.vue')['default']
   }
+  export interface ComponentCustomProperties {
+    vLoading: typeof import('element-plus/es')['ElLoadingDirective']
+  }
 }

src/api/service/text2videoService.ts

@@ -4,7 +4,67 @@
 import request from '@/api/request'
 
 export default {
-  genScriptsByGpt(postData: any) {
-    return request.post('/text2video/gen_scripts_by_gpt', postData)
+  submitGpt(prompt: string): Promise<string> {
+    if (!prompt) {
+      return Promise.reject("输入不能为空");
+    }
+    const post_data = { source_text: prompt }
+    return request.post('/text2video/text2gpt', post_data)
+      .then((res: any) => {
+        // console.log(res);
+        if (res && res.code === 0) {
+          return res.data.result.answer;
+        } else {
+          const errorMessage = res ? res.message : "未知错误";
+          return Promise.reject(errorMessage);
+        }
+      })
+      .catch((err: any) => {
+        console.log(err);
+        return Promise.reject("chatgpt通讯失败");
+      });
+  },
+
+  submitSD(
+    task_id: string = "",
+    img_idx: string = "",
+    prompt: string = "",
+    negative_prompt: string = "",
+    sampler_index: string = "DPM++ SDE",
+    seed: string = "-1",
+    steps: string = "20",
+    width: string = "960",
+    height: string = "512",
+    cfg_scale: string = "9"
+  ): Promise<string> {
+    if (!prompt) {
+      return Promise.reject("SD提示词不能为空");
+    }
+    const post_data = {
+      task_id: task_id,
+      img_idx: img_idx,
+      prompt: prompt,
+      negative_prompt: negative_prompt,
+      sampler_index: sampler_index,
+      seed: seed,
+      steps: steps,
+      width: width,
+      height: height,
+      cfg_scale: cfg_scale,
+    }
+    return request.post('/text2video/text2img', post_data)
+      .then((res: any) => {
+        // console.log(res);
+        if (res && res.code === 0) {
+          return res.data.result;
+        } else {
+          const errorMessage = res ? res.message : "未知错误";
+          return Promise.reject(errorMessage);
+        }
+      })
+      .catch((err: any) => {
+        console.log(err);
+        return Promise.reject("stable-diffusion-webui Api 通讯失败");
+      });
   }
 }

src/assets/main.css

 @import './base.css';
 
 #app {
-  max-width: 1280px;
+  /* max-width: 1280px; */
   margin: 0 auto;
   padding: 2rem;
   display: flex;
@@ -21,4 +21,3 @@ a,
     background-color: hsla(160, 100%, 37%, 0.2);
   }
 }
-

src/utils/utils.ts

+export default class utils {
+  // 格式化为json字符串
+  static formatJson(jsonString: string) {
+    try {
+      return JSON.stringify(JSON.parse(jsonString), null, 2); // 对JSON字符串进行格式化处理
+    } catch (error) {
+      return 'Invalid JSON'
+    }
+  }
+
+  // 格式化为json
+  static formatJsonObj(jsonString: string) {
+    try {
+      return JSON.parse(jsonString) // 对JSON字符串进行格式化处理
+    } catch (error) {
+      return JSON.parse('{"error": "Invalid JSON"}')
+    }
+  }
+
+  // 生成年月日时分秒毫秒字符串
+  static genDateTimeStr() {
+    const now = new Date();
+    const year = now.getFullYear();
+    const month = (now.getMonth() + 1).toString().padStart(2, '0');
+    const day = now.getDate().toString().padStart(2, '0');
+    const hours = now.getHours().toString().padStart(2, '0');
+    const minutes = now.getMinutes().toString().padStart(2, '0');
+    const seconds = now.getSeconds().toString().padStart(2, '0');
+    const milliseconds = now.getMilliseconds().toString().padStart(3, '0');
+    const formattedDateTime = `${year}${month}${day}${hours}${minutes}${seconds}${milliseconds}`;
+    // console.log(formattedDateTime); // 输出类似：20221231120530123
+    return formattedDateTime
+  }
+
+}

src/views/home/index.vue

 <script setup lang="ts">
 import { onMounted, reactive, ref } from "vue";
 import { Sunny, UploadFilled } from "@element-plus/icons-vue";
-import { ElMessage } from "element-plus";
+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: "",
-  chatgpt_response_prompt: "",
-  chatgpt_response_scripts: <Wm.ScriptsItem[]>[],
+  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","场景描述":"王强和李明成为好朋友，守护村庄的和平与安宁。","场景关键词":"好朋友,守护和平,安宁","角色":"王强,李明","角色关键词":"男性,中年,普通,白大褂,干练,自信,坚定,专注;男性,青年,普通,农民服装,干净,精明,忧伤"}],
+  adapt_result_json: [
+    {"编号":"1","场景描述":"王强穿越回古代，来到一片战乱的村庄。","场景关键词":"古代,村庄,战乱,医生,王强","角色":"王强","角色关键词":"男性,中年,普通,白大褂,干练,自信,坚定,专注"},
+    {"编号":"2","场景描述":"王强在村庄遇见年轻的农民李明。","场景关键词":"村庄,农民,相遇","角色":"王强,李明","角色关键词":"男性,中年,普通,白大褂,干练,自信,坚定,专注;男性,青年,普通,农民服装,干净,精明,忧伤"}
+  ],
+  // ai_draw_json: <Wm.AiDrawItem[]>[],
+  ai_draw_json: [
+    {"编号":"1","场景描述":"王强穿越回古代，来到一片战乱的村庄。","画面描述词":"Ancient, village, warfare, doctor, Wang Qiang, male, middle-aged, ordinary, white coat, capable, confident, determined, focused","本镜配图":"http://192.168.31.128:5001/assets/outputs/20240129175223829/1.png","task_id":"20240129175223829"},
+    {"编号":"2","场景描述":"王强在村庄遇见年轻的农民李明。","画面描述词":"Village, farmer, encounter, middle-aged, ordinary, white coat, capable, confident, determined, focused; male, young, ordinary, farmer's clothing, clean, astute, sad","本镜配图":"http://192.168.31.128:5001/assets/outputs/20240129175223829/2.png","task_id":"20240129175223829"},
+  ],
+
+
 });
 
+const sd_prompt_prefix = `best quality,masterpiece,realistic,HDR,UHD,8K,best quality,highres,absurdres,realistic,masterpiece,
+Highly detailed,extreme detail description,Professional,lens_flare,cinematic_lighting,ultra-fine painting,
+full body,Vivid Colors,physically-based rendering,sharp focus,wide shot,cinematic,lens_flare,reality_ray_tracing,`
+
+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 onSubmit = () => {
-  if (step.value === 1) {
-    if (!form.chatgpt_prompt) {
+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: "prompt不能为空",
+      message: "内容不能为空",
       type: "error",
     });
-      return;
+    return
   }
   text2videoService
-      .genScriptsByGpt({source_text: form.chatgpt_prompt})
-      .then((res: any) => {
-        console.log(res);
+    .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: "操作成功",
-          type: "success",
+        message: error,
+        type: "error",
       });
-        if (res) {
-          if (res.code === 0) {
-            const chatgpt_res = res.data.result
-            form.chatgpt_response_prompt = chatgpt_res.prompt
-            form.chatgpt_response_scripts = chatgpt_res.scripts
-            step.value = 2
-          }
-          else {
+    });
+};
+
+// const drawOne = async (task_id: string, item_idx: string, sd_prompt: string, sd_negative_prompt: string) => {
+//   try {
+//     const sd_result = await text2videoService.submitSD(task_id, item_idx, sd_prompt, sd_negative_prompt);
+//     return sd_result
+//   } catch (error) {
+//     return ""
+//   }
+// };
+
+const onDraw = async () => {
+  form.ai_draw_json = []
+  loading.value = true;
+  const task_id = utils.genDateTimeStr();
+  const taskPromises = form.adapt_result_json.map(async (item) => {
+    try {
+      const result = await text2videoService.submitGpt(`请将这些内容“${item.场景关键词},${item.角色关键词}”翻译为英文`);
+      const newResult = result.replaceAll('.', '').replaceAll('"', '');
+      try {
+        const sd_prompt = sd_prompt_prefix + newResult;
+        const sd_result = await text2videoService.submitSD(task_id, item.编号, sd_prompt, sd_negative_prompt_prefix);
+        return { 
+          编号: item.编号,
+          场景描述: item.场景描述,
+          画面描述词: newResult,
+          本镜配图: sd_result,
+          task_id: task_id
+        };
+      } catch (error) {
         ElMessage({
-              message: res.message,
+          message: String(error),
           type: "error",
         });
+        return { 
+          编号: item.编号,
+          场景描述: item.场景描述,
+          画面描述词: newResult,
+          本镜配图: "",
+          task_id: task_id
+        };
       }
-        }
-      })
-      .catch((err: any) => {
-        console.log(err);
+    } catch (error) {
+      // console.error(error);
       ElMessage({
-          message: "chatgpt通讯失败。" + err,
+        message: String(error),
         type: "error",
       });
+      return { 
+        编号: item.编号,
+        场景描述: item.场景描述,
+        画面描述词: "",
+        本镜配图: "",
+        task_id: task_id
+      };
+    }
   });
-  } else {
+  // 所有请求都返回后，重新排序
+  try {
+    const results = await Promise.all(taskPromises);
+    form.ai_draw_json = results.sort((a, b) => parseInt(a.编号) - parseInt(b.编号));
+  } catch (error) {
+    // 处理错误
     ElMessage({
-      message: "敬请期待",
-      type: "info",
+      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].画面描述词;
+  text2videoService
+    .submitSD(task_id, idxStr, newResult, sd_negative_prompt_prefix)
+    .then((result: string) => {
+      // console.log(result);
+      form.ai_draw_json[idx].本镜配图 = 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="chatgpt prompt" v-if="step === 1">
-        <div style="color: blue;">【示例】请以末日求生为主题，写一段2分钟左右的短视频脚本，有10个分镜头，每个分镜头有场景、人物、镜头内容、中文旁白。人物要有明确的姓名。</div>
+      <!-- 小说到文案 -->
+      <el-form-item label="小说">
         <el-input
           v-model="form.chatgpt_prompt"
-          :autosize="{ minRows: 10, maxRows: 20 }"
+          :autosize=true
           type="textarea"
-          placeholder="Please Input ..."
+          placeholder="输入小说"
         />
       </el-form-item>
-
-      <el-form-item label="chatgpt 提问：" v-if="step === 2">
-        <div>{{ form.chatgpt_response_prompt }}</div>
+      <el-form-item>
+        <el-button type="primary" @click="onSubmitGpt">提交chatgpt，生成文案</el-button>
       </el-form-item>
-      <el-form-item label="chatgpt 返回：" v-if="step === 2">
-        <div v-for="(srt, index) in form.chatgpt_response_scripts">
-          <div style="color:red">==== {{ srt.序号 }} ====</div>
-          <div>
-            <span class="chatgpt_response_script_label">场景：</span>
-            <el-input class="chatgpt_response_script"
-              v-model="srt.场景"
-              :autosize="{ minRows: 1, maxRows: 3 }"
+      <el-form-item label="文案">
+        <el-input
+          v-model="form.chatgpt_answer"
+          :autosize=true
           type="textarea"
         />
-          </div>
-          <div>
-            <span class="chatgpt_response_script_label">人物：</span>
-            <el-input class="chatgpt_response_script"
-              label = "人物"
-              v-model="srt.人物"
-              :autosize="{ minRows: 1, maxRows: 3 }"
+      </el-form-item>
+      <!-- 文案到分镜 -->
+      <el-form-item label="分镜要求">
+        <el-input
+          v-model="form.adapt_restrict"
+          :autosize=true
           type="textarea"
+          placeholder=""
         />
-          </div>
-          <div>
-            <span class="chatgpt_response_script_label">分镜：</span>
-            <el-input class="chatgpt_response_script"
-              label = "分镜内容"
-              v-model="srt.分镜内容"
-              style=""
-              :autosize="{ minRows: 1, maxRows: 3 }"
+      </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"
         />
-          </div>
+      </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 width="100">
+            <template #header>
+              <el-button type="primary" size="small" @click="">一键推理</el-button>
+            </template>
+            <template #default="scope">
+              <el-button type="primary" size="small" @click="">推理</el-button>
+            </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 width="100">
+            <template #header>
+              <el-button type="primary" size="small" @click="">一键推理</el-button>
+            </template>
+            <template #default="scope">
+              <el-button type="primary" size="small" @click="">推理</el-button>
+            </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>
-            <span class="chatgpt_response_script_label">旁白：</span>
-            <el-input class="chatgpt_response_script"
-              label = "旁白"
-              v-model="srt.旁白"
-              :autosize="{ minRows: 1, maxRows: 3 }"
-              type="textarea"
+                <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>
-        </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="onSubmit">确定</el-button>
-      </el-form-item>
+
+      
     </el-form>
+    
   </main>
 </template>
 
 <style lang="scss" scoped>
   .home-container {
-    width: 1000px;
-  }
-  .chatgpt_response_script{
-    width: 800px;
-    margin: 2px 0
-  }
-  .chatgpt_response_script_label{
-    margin: 0 2px
+    width: 100%;
   }
+  
 </style>

typings/types/wm/lib.wm.api.d.ts

 declare namespace Wm {
-  // api回复 
-  interface ApiResult {
-    result: ApiResultItem
-  }
-  interface ApiResultItem {
-    code: int
-    data: any
-    message: string
-  }
-
   interface ScriptsItem {
-    序号: string
-    场景: string
-    人物: string
-    分镜内容: string
-    旁白: string
+    编号: string
+    场景描述: string
+    场景关键词: string
+    角色: string
+    角色关键词: string
   }
 
+  interface AiDrawItem {
+    编号: string
+    场景描述: string
+    画面描述词: string
+    本镜配图: string
+    task_id: string
+  }
 }