Skip to content

T
text2video-frontend
Commit a62e2dc9 authored by 朱国瑞's avatar 朱国瑞
Browse files
Options

首页修改

parent ed74b28d
Hide whitespace changes
Inline Side-by-side
Showing with 130 additions and 100 deletions
src/views/home/index.vue
View file @ a62e2dc9
<script setup lang="ts"> <script setup lang="ts">
import { onMounted, reactive, ref } from "vue"; import { onMounted, reactive, ref } from 'vue'
import { Sunny, UploadFilled } from "@element-plus/icons-vue"; import { Sunny, UploadFilled } from '@element-plus/icons-vue'
import { ElMessage, ElLoading } from "element-plus"; import { ElMessage, ElLoading } from 'element-plus'
import text2videoService from "@/api/service/text2videoService"; import text2videoService from '@/api/service/text2videoService'
import utils from '@/utils/utils' import utils from '@/utils/utils'
const loading = ref(false) const loading = ref(false)
const step = ref(1); const step = ref(1)
const is_adapt_result_json = ref(1) const is_adapt_result_json = ref(1)
const form = reactive({ const form = reactive({
chatgpt_prompt: "帮我生成一个关于医生穿越到古代行侠仗义的故事，约200字左右", chatgpt_prompt: '帮我生成一个关于医生穿越到古代行侠仗义的故事，约200字左右',
chatgpt_answer: "曾经的医生王强穿越回了古代，发现这个时代正值战乱时期。他觉得自己是时候行侠仗义，保护那些无辜受苦的人们了。王强在一个村庄里遇到了一个年轻的农民，叫李明。李明父母在战乱中被杀，他成了孤儿，并且被恶势力欺压。王强决定帮助李明。他教授李明一些基本的医术，并且帮助他恢复村庄的秩序。为了支援农民，王强到处奔走，为那些受伤的人们进行治疗。他在古代用现代医学知识，快速治愈了一些以前无法治愈的疾病。他趁机收集了一群志同道合的人，组建了一个抗击恶势力的义勇军。由于他的医术悉心教导，王强手下的队伍战斗力大增，并且开始挑战恶势力的统治。在战斗中，王强发现一支正义的侠盗团队正在保护受苦的人们。他决定与他们合作，将农民们和侠盗团队联合起来，共同对抗恶势力。最终，王强和他的队伍，还有侠盗团队成功地将恶势力赶出了村庄，恢复了和平。他们在古代留下了无穷的传奇，为人们带来了新的希望和幸福。医生王强也与李明成了好朋友，他们一起守护着村庄的和平与安宁。", chatgpt_answer:
adapt_restrict: '将上述文案改编为10个短视频分镜，给出每个分镜的场景描述、场景关键词（年代,空间,时间段,地理环境,天气,物品,人物,镜头角度）、角色、角色关键词（性别,年龄,肤色,衣服,发型,发色,脸色,五官特点,体态,情绪,肢体动作）。以如下json字符串的格式返回：{"分镜":[{"编号":"","场景描述":"","场景关键词":"","角色":"","角色关键词":""},...]}', '曾经的医生王强穿越回了古代，发现这个时代正值战乱时期。他觉得自己是时候行侠仗义，保护那些无辜受苦的人们了。王强在一个村庄里遇到了一个年轻的农民，叫李明。李明父母在战乱中被杀，他成了孤儿，并且被恶势力欺压。王强决定帮助李明。他教授李明一些基本的医术，并且帮助他恢复村庄的秩序。为了支援农民，王强到处奔走，为那些受伤的人们进行治疗。他在古代用现代医学知识，快速治愈了一些以前无法治愈的疾病。他趁机收集了一群志同道合的人，组建了一个抗击恶势力的义勇军。由于他的医术悉心教导，王强手下的队伍战斗力大增，并且开始挑战恶势力的统治。在战斗中，王强发现一支正义的侠盗团队正在保护受苦的人们。他决定与他们合作，将农民们和侠盗团队联合起来，共同对抗恶势力。最终，王强和他的队伍，还有侠盗团队成功地将恶势力赶出了村庄，恢复了和平。他们在古代留下了无穷的传奇，为人们带来了新的希望和幸福。医生王强也与李明成了好朋友，他们一起守护着村庄的和平与安宁。',
adapt_result: "", adapt_restrict:
'将上述文案改编为10个短视频分镜，给出每个分镜的场景描述、场景关键词（年代,空间,时间段,地理环境,天气,物品,人物,镜头角度）、角色、角色关键词（性别,年龄,肤色,衣服,发型,发色,脸色,五官特点,体态,情绪,肢体动作）。以如下json字符串的格式返回：{"分镜":[{"编号":"","场景描述":"","场景关键词":"","角色":"","角色关键词":""},...]}',
adapt_result: '',
// adapt_result_json: <Wm.ScriptsItem[]>[], // adapt_result_json: <Wm.ScriptsItem[]>[],
// adapt_result_json: [{"编号":"1","场景描述":"王强穿越回古代，来到一片战乱的村庄。","场景关键词":"古代,村庄,战乱,医生,王强","角色":"王强","角色关键词":"男性,中年,普通,白大褂,干练,自信,坚定,专注"},{"编号":"2","场景描述":"王强在村庄遇见年轻的农民李明。","场景关键词":"村庄,农民,相遇","角色":"王强,李明","角色关键词":"男性,中年,普通,白大褂,干练,自信,坚定,专注;男性,青年,普通,农民服装,干净,精明,忧伤"},{"编号":"3","场景描述":"王强教授李明基本的医术。","场景关键词":"教学,医术,基本","角色":"王强,李明","角色关键词":"男性,中年,普通,白大褂,干练,自信,坚定,专注;男性,青年,普通,农民服装,干净,精明,忧伤"},{"编号":"4","场景描述":"王强帮助李明恢复村庄秩序。","场景关键词":"村庄,恢复秩序","角色":"王强,李明","角色关键词":"男性,中年,普通,白大褂,干练,自信,坚定,专注;男性,青年,普通,农民服装,干净,精明,忧伤"},{"编号":"5","场景描述":"王强在古代使用现代医学知识治愈疾病。","场景关键词":"古代,医学知识,治愈疾病","角色":"王强","角色关键词":"男性,中年,普通,白大褂,干练,自信,坚定,专注"},{"编号":"6","场景描述":"王强组建抗击恶势力的义勇军。","场景关键词":"抗击恶势力,义勇军","角色":"王强","角色关键词":"男性,中年,普通,白大褂,干练,自信,坚定,专注"},{"编号":"7","场景描述":"王强与正义的侠盗团队合作。","场景关键词":"侠盗团队,合作","角色":"王强","角色关键词":"男性,中年,普通,白大褂,干练,自信,坚定,专注"},{"编号":"8","场景描述":"王强、李明和侠盗团队共同对抗恶势力。","场景关键词":"共同对抗,恶势力","角色":"王强,李明","角色关键词":"男性,中年,普通,白大褂,干练,自信,坚定,专注;男性,青年,普通,农民服装,干净,精明,忧伤"},{"编号":"9","场景描述":"王强和他的队伍驱逐恶势力，村庄恢复和平。","场景关键词":"驱逐恶势力,村庄和平","角色":"王强,李明","角色关键词":"男性,中年,普通,白大褂,干练,自信,坚定,专注;男性,青年,普通,农民服装,干净,精明,忧伤"},{"编号":"10","场景描述":"王强和李明成为好朋友，守护村庄的和平与安宁。","场景关键词":"好朋友,守护和平,安宁","角色":"王强,李明","角色关键词":"男性,中年,普通,白大褂,干练,自信,坚定,专注;男性,青年,普通,农民服装,干净,精明,忧伤"}], // adapt_result_json: [{"编号":"1","场景描述":"王强穿越回古代，来到一片战乱的村庄。","场景关键词":"古代,村庄,战乱,医生,王强","角色":"王强","角色关键词":"男性,中年,普通,白大褂,干练,自信,坚定,专注"},{"编号":"2","场景描述":"王强在村庄遇见年轻的农民李明。","场景关键词":"村庄,农民,相遇","角色":"王强,李明","角色关键词":"男性,中年,普通,白大褂,干练,自信,坚定,专注;男性,青年,普通,农民服装,干净,精明,忧伤"},{"编号":"3","场景描述":"王强教授李明基本的医术。","场景关键词":"教学,医术,基本","角色":"王强,李明","角色关键词":"男性,中年,普通,白大褂,干练,自信,坚定,专注;男性,青年,普通,农民服装,干净,精明,忧伤"},{"编号":"4","场景描述":"王强帮助李明恢复村庄秩序。","场景关键词":"村庄,恢复秩序","角色":"王强,李明","角色关键词":"男性,中年,普通,白大褂,干练,自信,坚定,专注;男性,青年,普通,农民服装,干净,精明,忧伤"},{"编号":"5","场景描述":"王强在古代使用现代医学知识治愈疾病。","场景关键词":"古代,医学知识,治愈疾病","角色":"王强","角色关键词":"男性,中年,普通,白大褂,干练,自信,坚定,专注"},{"编号":"6","场景描述":"王强组建抗击恶势力的义勇军。","场景关键词":"抗击恶势力,义勇军","角色":"王强","角色关键词":"男性,中年,普通,白大褂,干练,自信,坚定,专注"},{"编号":"7","场景描述":"王强与正义的侠盗团队合作。","场景关键词":"侠盗团队,合作","角色":"王强","角色关键词":"男性,中年,普通,白大褂,干练,自信,坚定,专注"},{"编号":"8","场景描述":"王强、李明和侠盗团队共同对抗恶势力。","场景关键词":"共同对抗,恶势力","角色":"王强,李明","角色关键词":"男性,中年,普通,白大褂,干练,自信,坚定,专注;男性,青年,普通,农民服装,干净,精明,忧伤"},{"编号":"9","场景描述":"王强和他的队伍驱逐恶势力，村庄恢复和平。","场景关键词":"驱逐恶势力,村庄和平","角色":"王强,李明","角色关键词":"男性,中年,普通,白大褂,干练,自信,坚定,专注;男性,青年,普通,农民服装,干净,精明,忧伤"},{"编号":"10","场景描述":"王强和李明成为好朋友，守护村庄的和平与安宁。","场景关键词":"好朋友,守护和平,安宁","角色":"王强,李明","角色关键词":"男性,中年,普通,白大褂,干练,自信,坚定,专注;男性,青年,普通,农民服装,干净,精明,忧伤"}],
adapt_result_json: [ adapt_result_json: [
{"编号":"1","场景描述":"王强穿越回古代，来到一片战乱的村庄。","场景关键词":"古代,村庄,战乱,医生,王强","角色":"王强","角色关键词":"男性,中年,普通,白大褂,干练,自信,坚定,专注"}, {
{"编号":"2","场景描述":"王强在村庄遇见年轻的农民李明。","场景关键词":"村庄,农民,相遇","角色":"王强,李明","角色关键词":"男性,中年,普通,白大褂,干练,自信,坚定,专注;男性,青年,普通,农民服装,干净,精明,忧伤"} 编号: '1',
场景描述: '王强穿越回古代，来到一片战乱的村庄。',
场景关键词: '古代,村庄,战乱,医生,王强',
角色: '王强',
角色关键词: '男性,中年,普通,白大褂,干练,自信,坚定,专注'
},
{
编号: '2',
场景描述: '王强在村庄遇见年轻的农民李明。',
场景关键词: '村庄,农民,相遇',
角色: '王强,李明',
角色关键词: '男性,中年,普通,白大褂,干练,自信,坚定,专注;男性,青年,普通,农民服装,干净,精明,忧伤'
}
], ],
// ai_draw_json: <Wm.AiDrawItem[]>[], // ai_draw_json: <Wm.AiDrawItem[]>[],
ai_draw_json: [ 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"}, 编号: '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, 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, Highly detailed,extreme detail description,Professional,lens_flare,cinematic_lighting,ultra-fine painting,
...@@ -65,9 +91,7 @@ safety panties, safety knickers, beard, furry ,pony, pubic hair, mosaic, excreme ...@@ -65,9 +91,7 @@ safety panties, safety knickers, beard, furry ,pony, pubic hair, mosaic, excreme
deformed,bad anatomy,disfigured,poorly drawn face,lowres,mutated,extra limb,ugly,poorly drawn hands,missing limb,floating limbs, 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,` disconnected limbs,malformed hands,out of focus,long neck,long body,gape,`
onMounted(() => {})
onMounted(() => {});
const onSubmitGpt = () => { const onSubmitGpt = () => {
text2videoService text2videoService
...@@ -80,23 +104,23 @@ const onSubmitGpt = () => { ...@@ -80,23 +104,23 @@ const onSubmitGpt = () => {
// console.error(error); // console.error(error);
ElMessage({ ElMessage({
message: error, message: error,
type: "error", type: 'error'
}); })
}); })
}; }
const onAdapt = () => { const onAdapt = () => {
if (!form.chatgpt_answer) { if (!form.chatgpt_answer) {
ElMessage({ ElMessage({
message: "内容不能为空", message: '内容不能为空',
type: "error", type: 'error'
}); })
return return
} }
text2videoService text2videoService
.submitGpt(form.chatgpt_answer + '\n' + form.adapt_restrict) .submitGpt(form.chatgpt_answer + '\n' + form.adapt_restrict)
.then((result: string) => { .then((result: string) => {
console.log(result); console.log(result)
try { try {
form.adapt_result_json = utils.formatJsonObj(result).分镜 form.adapt_result_json = utils.formatJsonObj(result).分镜
} catch (error) { } catch (error) {
...@@ -105,13 +129,13 @@ const onAdapt = () => { ...@@ -105,13 +129,13 @@ const onAdapt = () => {
} }
}) })
.catch((error: any) => { .catch((error: any) => {
console.error(error); console.error(error)
ElMessage({ ElMessage({
message: error, message: error,
type: "error", type: 'error'
}); })
}); })
}; }
// const drawOne = async (task_id: string, item_idx: string, sd_prompt: string, sd_negative_prompt: string) => { // const drawOne = async (task_id: string, item_idx: string, sd_prompt: string, sd_negative_prompt: string) => {
// try { // try {
...@@ -124,86 +148,93 @@ const onAdapt = () => { ...@@ -124,86 +148,93 @@ const onAdapt = () => {
const onDraw = async () => { const onDraw = async () => {
form.ai_draw_json = [] form.ai_draw_json = []
loading.value = true; loading.value = true
const task_id = utils.genDateTimeStr(); const task_id = utils.genDateTimeStr()
const taskPromises = form.adapt_result_json.map(async (item) => { const taskPromises = form.adapt_result_json.map(async (item) => {
try { try {
const result = await text2videoService.submitGpt(`请将这些内容“${item.场景关键词},${item.角色关键词}”翻译为英文`); const result = await text2videoService.submitGpt(
const newResult = result.replaceAll('.', '').replaceAll('"', ''); `请将这些内容“${item.场景关键词},${item.角色关键词}”翻译为英文`
)
const newResult = result.replaceAll('.', '').replaceAll('"', '')
try { try {
const sd_prompt = sd_prompt_prefix + newResult; const sd_prompt = sd_prompt_prefix + newResult
const sd_result = await text2videoService.submitSD(task_id, item.编号, sd_prompt, sd_negative_prompt_prefix); const sd_result = await text2videoService.submitSD(
return { task_id,
item.编号,
sd_prompt,
sd_negative_prompt_prefix
)
return {
编号: item.编号, 编号: item.编号,
场景描述: item.场景描述, 场景描述: item.场景描述,
画面描述词: newResult, 画面描述词: newResult,
本镜配图: sd_result, 本镜配图: sd_result,
task_id: task_id task_id: task_id
}; }
} catch (error) { } catch (error) {
ElMessage({ ElMessage({
message: String(error), message: String(error),
type: "error", type: 'error'
}); })
return { return {
编号: item.编号, 编号: item.编号,
场景描述: item.场景描述, 场景描述: item.场景描述,
画面描述词: newResult, 画面描述词: newResult,
本镜配图: "", 本镜配图: '',
task_id: task_id task_id: task_id
}; }
} }
} catch (error) { } catch (error) {
// console.error(error); // console.error(error);
ElMessage({ ElMessage({
message: String(error), message: String(error),
type: "error", type: 'error'
}); })
return { return {
编号: item.编号, 编号: item.编号,
场景描述: item.场景描述, 场景描述: item.场景描述,
画面描述词: "", 画面描述词: '',
本镜配图: "", 本镜配图: '',
task_id: task_id task_id: task_id
}; }
} }
}); })
// 所有请求都返回后，重新排序 // 所有请求都返回后，重新排序
try { try {
const results = await Promise.all(taskPromises); const results = await Promise.all(taskPromises)
form.ai_draw_json = results.sort((a, b) => parseInt(a.编号) - parseInt(b.编号)); form.ai_draw_json = results.sort((a, b) => parseInt(a.编号) - parseInt(b.编号))
} catch (error) { } catch (error) {
// 处理错误 // 处理错误
ElMessage({ ElMessage({
message: String(error), message: String(error),
type: "error", type: 'error'
}); })
} finally { } finally {
// 最终关闭loading（无论成功或失败） // 最终关闭loading（无论成功或失败）
loading.value = false; loading.value = false
} }
}; }
const onDrawOne = (idxStr: string) => { const onDrawOne = (idxStr: string) => {
const idx = parseInt(idxStr) - 1 const idx = parseInt(idxStr) - 1
const task_id = form.ai_draw_json[idx].task_id; const task_id = form.ai_draw_json[idx].task_id
// console.log(task_id) // console.log(task_id)
const newResult = form.ai_draw_json[idx].画面描述词; const newResult = form.ai_draw_json[idx].画面描述词
text2videoService text2videoService
.submitSD(task_id, idxStr, newResult, sd_negative_prompt_prefix) .submitSD(task_id, idxStr, newResult, sd_negative_prompt_prefix)
.then((result: string) => { .then((result: string) => {
// console.log(result); // console.log(result);
form.ai_draw_json[idx].本镜配图 = ''
form.ai_draw_json[idx].本镜配图 = result form.ai_draw_json[idx].本镜配图 = result
}) })
.catch((error: any) => { .catch((error: any) => {
// console.error(error); // console.error(error);
ElMessage({ ElMessage({
message: error, message: error,
type: "error", type: 'error'
}); })
}); })
}; }
</script> </script>
<template> <template>
...@@ -215,7 +246,7 @@ const onDrawOne = (idxStr: string) => { ...@@ -215,7 +246,7 @@ const onDrawOne = (idxStr: string) => {
<el-form-item label="小说"> <el-form-item label="小说">
<el-input <el-input
v-model="form.chatgpt_prompt" v-model="form.chatgpt_prompt"
:autosize=true :autosize="true"
type="textarea" type="textarea"
placeholder="输入小说" placeholder="输入小说"
/> />
...@@ -224,37 +255,26 @@ const onDrawOne = (idxStr: string) => { ...@@ -224,37 +255,26 @@ const onDrawOne = (idxStr: string) => {
<el-button type="primary" @click="onSubmitGpt">提交chatgpt，生成文案</el-button> <el-button type="primary" @click="onSubmitGpt">提交chatgpt，生成文案</el-button>
</el-form-item> </el-form-item>
<el-form-item label="文案"> <el-form-item label="文案">
<el-input <el-input v-model="form.chatgpt_answer" :autosize="true" type="textarea" />
v-model="form.chatgpt_answer"
:autosize=true
type="textarea"
/>
</el-form-item> </el-form-item>
<!-- 文案到分镜 --> <!-- 文案到分镜 -->
<el-form-item label="分镜要求"> <el-form-item label="分镜要求">
<el-input <el-input v-model="form.adapt_restrict" :autosize="true" type="textarea" placeholder="" />
v-model="form.adapt_restrict"
:autosize=true
type="textarea"
placeholder=""
/>
</el-form-item> </el-form-item>
<el-form-item> <el-form-item>
<el-button type="primary" @click="onAdapt">填写或修改分镜要求，提交chatgpt，生成分镜</el-button> <el-button type="primary" @click="onAdapt"
>填写或修改分镜要求，提交chatgpt，生成分镜</el-button
>
</el-form-item> </el-form-item>
<el-form-item label="分镜结果" v-if="is_adapt_result_json === 0"> <el-form-item label="分镜结果" v-if="is_adapt_result_json === 0">
<el-input <el-input v-model="form.adapt_result" :autosize="true" type="textarea" />
v-model="form.adapt_result"
:autosize=true
type="textarea"
/>
</el-form-item> </el-form-item>
<el-form-item label="分镜结果" v-if="is_adapt_result_json === 1"> <el-form-item label="分镜结果" v-if="is_adapt_result_json === 1">
<el-table :data="form.adapt_result_json" border style="width: 100%"> <el-table :data="form.adapt_result_json" border style="width: 100%">
<el-table-column prop="编号" label="编号" width="60"/> <el-table-column prop="编号" label="编号" width="60" />
<el-table-column prop="场景描述" label="场景描述"> <el-table-column prop="场景描述" label="场景描述">
<template v-slot="scope"> <template v-slot="scope">
<el-input v-model="scope.row.场景描述" :autosize=true type="textarea"></el-input> <el-input v-model="scope.row.场景描述" :autosize="true" type="textarea"></el-input>
</template> </template>
</el-table-column> </el-table-column>
<!-- <el-table-column width="100"> <!-- <el-table-column width="100">
...@@ -267,12 +287,12 @@ const onDrawOne = (idxStr: string) => { ...@@ -267,12 +287,12 @@ const onDrawOne = (idxStr: string) => {
</el-table-column> --> </el-table-column> -->
<el-table-column prop="场景关键词" label="场景关键词"> <el-table-column prop="场景关键词" label="场景关键词">
<template v-slot="scope"> <template v-slot="scope">
<el-input v-model="scope.row.场景关键词" :autosize=true type="textarea"></el-input> <el-input v-model="scope.row.场景关键词" :autosize="true" type="textarea"></el-input>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column prop="角色" label="角色"> <el-table-column prop="角色" label="角色">
<template v-slot="scope"> <template v-slot="scope">
<el-input v-model="scope.row.角色" :autosize=true type="textarea"></el-input> <el-input v-model="scope.row.角色" :autosize="true" type="textarea"></el-input>
</template> </template>
</el-table-column> </el-table-column>
<!-- <el-table-column width="100"> <!-- <el-table-column width="100">
...@@ -285,7 +305,7 @@ const onDrawOne = (idxStr: string) => { ...@@ -285,7 +305,7 @@ const onDrawOne = (idxStr: string) => {
</el-table-column> --> </el-table-column> -->
<el-table-column prop="角色关键词" label="角色关键词"> <el-table-column prop="角色关键词" label="角色关键词">
<template v-slot="scope"> <template v-slot="scope">
<el-input v-model="scope.row.角色关键词" :autosize=true type="textarea"></el-input> <el-input v-model="scope.row.角色关键词" :autosize="true" type="textarea"></el-input>
</template> </template>
</el-table-column> </el-table-column>
</el-table> </el-table>
...@@ -295,12 +315,17 @@ const onDrawOne = (idxStr: string) => { ...@@ -295,12 +315,17 @@ const onDrawOne = (idxStr: string) => {
<el-button type="primary" @click="onDraw">组合SD提示词并绘图</el-button> <el-button type="primary" @click="onDraw">组合SD提示词并绘图</el-button>
</el-form-item> </el-form-item>
<el-form-item label="绘图"> <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
<el-table-column prop="编号" label="编号" width="60"/> :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="场景描述" />
<el-table-column prop="画面描述词" label="画面描述词"> <el-table-column prop="画面描述词" label="画面描述词">
<template v-slot="scope"> <template v-slot="scope">
<el-input v-model="scope.row.画面描述词" :autosize=true type="textarea"></el-input> <el-input v-model="scope.row.画面描述词" :autosize="true" type="textarea"></el-input>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column prop="本镜配图" label="本镜配图"> <el-table-column prop="本镜配图" label="本镜配图">
...@@ -320,22 +345,27 @@ const onDrawOne = (idxStr: string) => { ...@@ -320,22 +345,27 @@ const onDrawOne = (idxStr: string) => {
</el-table-column> </el-table-column>
<el-table-column width="100" label="操作"> <el-table-column width="100" label="操作">
<template v-slot="scope"> <template v-slot="scope">
<el-button type="primary" size="small" @click="onDrawOne(scope.row.编号)">重绘本镜</el-button> <el-button type="primary" size="small" @click="onDrawOne(scope.row.编号)"
>重绘本镜</el-button
>
</template> </template>
</el-table-column> </el-table-column>
</el-table> </el-table>
</el-form-item> </el-form-item>
</el-form> </el-form>
</main> </main>
</template> </template>
<style lang="scss" scoped> <style lang="scss" scoped>
.home-container { .home-container {
width: 100%; width: 100%;
}
</style>
<style lang="scss">
.home-container {
.el-table .el-table__cell {
z-index: calc(var(--el-table-index) -1);
} }
}
</style> </style>
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