Commit fc8e8456 authored by 周成波's avatar 周成波

增加英文界面

parent aac7852c
...@@ -14,6 +14,7 @@ dist-ssr ...@@ -14,6 +14,7 @@ dist-ssr
coverage coverage
*.local *.local
dist.* dist.*
dist-bak*
/cypress/videos/ /cypress/videos/
/cypress/screenshots/ /cypress/screenshots/
......
...@@ -8,24 +8,15 @@ export {} ...@@ -8,24 +8,15 @@ export {}
declare module 'vue' { declare module 'vue' {
export interface GlobalComponents { export interface GlobalComponents {
ElButton: typeof import('element-plus/es')['ElButton'] 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'] ElDivider: typeof import('element-plus/es')['ElDivider']
ElElFormItem: typeof import('element-plus/es')['ElElFormItem']
ElForm: typeof import('element-plus/es')['ElForm'] ElForm: typeof import('element-plus/es')['ElForm']
ElFormItem: typeof import('element-plus/es')['ElFormItem'] ElFormItem: typeof import('element-plus/es')['ElFormItem']
ElIcon: typeof import('element-plus/es')['ElIcon']
ElImage: typeof import('element-plus/es')['ElImage'] ElImage: typeof import('element-plus/es')['ElImage']
ElInput: typeof import('element-plus/es')['ElInput'] ElInput: typeof import('element-plus/es')['ElInput']
ElOption: typeof import('element-plus/es')['ElOption']
ElRadio: typeof import('element-plus/es')['ElRadio'] ElRadio: typeof import('element-plus/es')['ElRadio']
ElRadioButton: typeof import('element-plus/es')['ElRadioButton']
ElRadioGroup: typeof import('element-plus/es')['ElRadioGroup'] ElRadioGroup: typeof import('element-plus/es')['ElRadioGroup']
ElSelect: typeof import('element-plus/es')['ElSelect']
ElTable: typeof import('element-plus/es')['ElTable'] ElTable: typeof import('element-plus/es')['ElTable']
ElTableColumn: typeof import('element-plus/es')['ElTableColumn'] 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'] HelloWorld: typeof import('./src/components/HelloWorld.vue')['default']
IconCommunity: typeof import('./src/components/icons/IconCommunity.vue')['default'] IconCommunity: typeof import('./src/components/icons/IconCommunity.vue')['default']
IconDocumentation: typeof import('./src/components/icons/IconDocumentation.vue')['default'] IconDocumentation: typeof import('./src/components/icons/IconDocumentation.vue')['default']
......
import { createRouter, createWebHashHistory } from 'vue-router' import { createRouter, createWebHashHistory } from 'vue-router'
import HomeView from '../views/home/index.vue' import HomeView from '../views/home/index.vue'
import HomeViewEn from '../views/home/index_en.vue'
const router = createRouter({ const router = createRouter({
history: createWebHashHistory(import.meta.env.BASE_URL), history: createWebHashHistory(import.meta.env.BASE_URL),
...@@ -8,6 +9,11 @@ const router = createRouter({ ...@@ -8,6 +9,11 @@ const router = createRouter({
path: '/', path: '/',
name: 'home', name: 'home',
component: HomeView component: HomeView
},
{
path: '/en',
name: 'home_en',
component: HomeViewEn
} }
] ]
}) })
......
...@@ -43,4 +43,15 @@ export default class utils { ...@@ -43,4 +43,15 @@ export default class utils {
return sentences return sentences
} }
// 拆分英文文本
static splitTextEn(str: string) {
str = str.replaceAll('"','').replaceAll('"','')
// 使用正则表达式拆分文本
let sentences = str.split(/[!|?|.]/);
// 过滤掉长度为 0 的句子
sentences = sentences.filter(s => s.length > 0);
// console.log(sentences)
return sentences
}
} }
...@@ -173,55 +173,88 @@ export const useManyValues = () => { ...@@ -173,55 +173,88 @@ export const useManyValues = () => {
const vertical_data = { const vertical_data = {
task_id: "20240218223401728", task_id: "20240218223401728",
chatgpt_prompt: `我叫干净哥,一名有志男青年,职业程序员,有一个可爱的女朋友,请根据我的人设,发挥想象力,创作一个日常生活小故事,100字左右`, chatgpt_prompt: ``,
chatgpt_answer: `干净哥,身为程序员的他严谨又细致,下班后总会把温馨的小窝打理得一尘不染。这天,他正专注地敲击着代码,女友捧着刚烘焙出的曲奇闯入他的视线,笑盈盈地说:“亲爱的干净哥,来尝尝我新学的甜点。”他欣然接过,甜蜜的味道在舌尖绽放,就像他们的爱情一样,平淡却温暖人心。在充满代码与爱的世界里,干净哥的生活因这份日常小确幸而更加美好。`, chatgpt_answer: `亲爱的朋友们,干净哥我又来分享高效整理的小秘诀啦!今天要揭秘的是“10分钟快速归位法”,特别适合我们这些忙碌的上班族,在紧凑的工作日里也能轻松让家回归温馨整洁。
chatgpt_answer_roles: [{"角色": "干净哥(程序员)", "角色关键词": "男性, 30岁, 中等肤色, 穿着休闲格子衬衫和牛仔裤, 短发, 发色为深棕色, 脸色健康红润, 眼神专注且略带笑意, 鼻梁高挺, 嘴唇薄而抿紧,显得严谨认真"}, {"角色": "女友", "角色关键词": "女性, 28岁, 白皙肤色, 穿着粉色围裙, 长卷发, 发色为浅金色, 脸色红润透亮, 明亮的眼睛笑起来像弯月, 瓜子脸, 高鼻梁, 唇形饱满, 笑容温暖而甜美"}],
首先,【衣物快速归置】:一进门,将外套、包、鞋子等按照固定的位置迅速挂放或摆放,养成随手整理的习惯。这样不仅能节省寻找物品的时间,更能避免家居环境显得杂乱无章。
其次,【分区清理原则】:在10分钟内集中火力处理一个区域,如客厅茶几、餐桌或卧室床头柜等高频活动区。迅速归类杂物,不需精细分类,只需大致归入相应收纳盒或抽屉中,留待闲暇时再详细整理。
然后,【顺手清洁法则】:利用空隙时间,如烧水等待时,顺手擦拭台面;看电视广告间隙,迅速扫除地面可见的碎屑垃圾。高效利用碎片时间,达到事半功倍的效果。
最后,【可视化管理】:尽量使常用物品保持可见且易于取用,如书籍、遥控器等,这样既方便日常使用,又能减少不必要的翻找与混乱。
通过这种“10分钟快速归位法”,即使工作繁忙,也能保证家庭环境的基本整洁。记住,整理不仅仅是家务活,更是一种生活的态度和效率的体现。让我们一起享受这份整洁带来的舒适与愉悦,也别忘了,真诚对待每一处生活细节,耐心面对每一次整理挑战,你会发现高品质的生活其实就在身边!`,
chatgpt_answer_roles: [],
adapt_result_json: [],
final_video: ``,
};
const en_vertical_data = {
task_id: "20240219222232784",
chatgpt_prompt: ``,
chatgpt_answer: `Clean Brother, as a programmer, he is rigorous and meticulous. After work, he always manages his cozy little nest spotlessly. On that day, he was focused on typing on the code when his girlfriend burst into his sight holding a freshly baked cookie and said with a smile, "Dear Clean Brother, come and taste my newly learned dessert." He gladly took it, and the sweet taste bloomed on his tongue, just like their love, plain yet heartwarming. In a world full of code and love, Clean Brother's life is even better because of this daily pleasure.`,
chatgpt_answer_roles: [
{
"角色": "Clean Brother",
"角色关键词": "Programmer, Male, Mid-20s to early 30s, Asian, Olive skin tone, Casual programmer's outfit (t-shirt and jeans), Short and tidy haircut, Black hair, Clean-shaven, Sharp facial features"
},
{
"角色": "Girlfriend",
"角色关键词": "Female, Late 20s, Caucasian, Fair skin, Apron over a casual dress, Shoulder-length wavy hair, Blonde, Bright smile, Sparkling blue eyes"
}
],
adapt_result_json: [ adapt_result_json: [
{ {
"编号": "1", "编号": "1",
"场景描述": "干净哥,身为程序员的他严谨又细致,下班后总会把温馨的小窝打理得一尘不染", "场景描述": "Clean Brother, as a programmer, he is rigorous and meticulous",
"场景关键词": "现代,室内,下班后,温馨小窝,干净整洁", "场景关键词": "Modern era, Home setting, Late evening/after work hours, Indoors, Living room with a workspace, Warm lighting, Laptop, Keyboard, Coding interface, Freshly baked cookies, Plate",
"角色": "干净哥(程序员)", "角色": "Clean Brother",
"角色关键词": "男性, 30岁, 中等肤色, 穿着休闲格子衬衫和牛仔裤, 短发, 发色为深棕色, 脸色健康红润, 眼神专注且略带笑意, 鼻梁高挺, 嘴唇薄而抿紧,显得严谨认真", "角色关键词": "Programmer, Male, Mid-20s to early 30s, Asian, Olive skin tone, Casual programmer's outfit (t-shirt and jeans), Short and tidy haircut, Black hair, Clean-shaven, Sharp facial features",
"画面描述词": "In a contemporary urban setting, the scene unfolds indoors during the tranquil hours after work. Our protagonist, Clean-Cut Guy, is a 30-year-old programmer with an intermediate complexion. Dressed in a casual plaid shirt and well-worn jeans, his short, deep brown hair frames a face that exudes health and vitality. His gaze is focused yet carries a subtle hint of a smile, reflecting both his dedication to his craft and his contentment off the clock. With a strong, straight nose and lips pressed firmly together in a display of meticulousness and seriousness, he diligently transforms his cozy apartment into a spotless haven. Every corner, every surface speaks volumes about his disciplined nature, as the space brims with warmth and orderliness under his attentive care.", "画面描述词": "In the dimly lit, warm embrace of his modern home's living room during late evening hours, Clean Brother sits diligently at his well-organized workspace. The atmosphere is a blend of comfort and productivity as the soft glow from his open laptop illuminates his face, accentuating his sharp Asian features and clean-shaven jawline. Dressed in a casual programmer's ensemble - a simple t-shirt and jeans - he exudes an air of focused determination. His olive skin tone contrasts against the stark black keys of his keyboard which he taps rhythmically, deeply engrossed in coding on the interface before him. Beside his workspace rests a plate filled with freshly baked cookies, their aroma wafting through the air, offering a homely touch to this indoor scene where work and leisure seamlessly intertwine.",
"本镜配图": "http://wm_tools_backend.frp.wmdigit.com:8888/assets/outputs/20240218223401728/img/1.png?v=20240218223435661", "本镜配图": "http://wm_tools_backend.frp.wmdigit.com:8888/assets/outputs/20240219232316324/img/1.png?v=20240219232347552",
"local_image_path": "assets/outputs/20240218223401728/img/1.png" "local_image_path": "assets/outputs/20240219232316324/img/1.png"
}, },
{ {
"编号": "2", "编号": "2",
"场景描述": "这天,他正专注地敲击着代码,女友捧着刚烘焙出的曲奇闯入他的视线,笑盈盈地说:亲爱的干净哥,来尝尝我新学的甜点", "场景描述": "After work, he always manages his cozy little nest spotlessly",
"场景关键词": "现代,室内,下班后,温馨小窝,电脑桌前,明亮灯光,代码编辑器,新鲜曲奇饼干", "场景关键词": "Modern era, Urban environment, Late evening, Indoor, Cozy apartment, Clean and tidy living space, Computer setup, Spotless surfaces, Warm lighting, Freshly baked cookies",
"角色": "干净哥(程序员),女友", "角色": "Clean Brother",
"角色关键词": "男性,30岁,中等肤色,休闲格子衬衫和牛仔裤,短发,深棕色发色,专注且略带笑意的眼神,严谨认真,女性,28岁,白皙肤色,粉色围裙,长卷发,浅金色发色,笑盈盈,温暖甜美", "角色关键词": "Programmer, Male, Mid-20s to early 30s, Asian, Olive skin tone, Casual programmer's outfit (t-shirt and jeans), Short and tidy haircut, Black hair, Clean-shaven, Sharp facial features",
"画面描述词": "Under the bright lights of their cozy apartment after work, at a computer desk in modern, indoor settings, sits \"Clean Cut Guy,\" a 30-year-old male programmer dressed in a casual plaid shirt and denim jeans. His short, deep brown hair frames his focused yet slightly amused gaze as he meticulously taps away at the code editor. Suddenly, his girlfriend, a radiant 28-year-old woman with fair skin and long, wavy golden locks tied back in a pink apron, breezes into his line of sight. She carries a tray of freshly baked chocolate chip cookies, her eyes sparkling with warmth and sweetness as she grins and says, \"Hey there, Clean Cut Guy, why don't you take a break and try my latest baking adventure?\" Her presence infuses the room with an added layer of homely comfort, interrupting the digital world momentarily with the aroma of fresh-baked goodness.", "画面描述词": "Shot Description: In the modern urban environment, as the late evening sets in, our focus is on a clean and tidy living space within a cozy apartment. The main character, Clean Brother, is a mid-20s to early 30s Asian male programmer with olive skin tone. He's dressed casually in a t-shirt and jeans combo, topped with a short, well-groomed black haircut and a clean-shaven face that accentuates his sharp facial features. The interior scene bathes in warm lighting, casting a soft glow over the spotless surfaces of the room. A meticulously organized computer setup takes center stage, showcasing Clean Brother's dedication to orderliness. Freshly baked cookies sit temptingly on a plate nearby, adding a homely touch to the contemporary ambiance. As the camera lingers, we observe Clean Brother methodically going about his after-work ritual, maintaining his nest in impeccable condition – a sanctuary of cleanliness amidst the bustling cityscape outside.",
"本镜配图": "http://wm_tools_backend.frp.wmdigit.com:8888/assets/outputs/20240218223401728/img/2.png?v=20240218223514940", "本镜配图": "http://wm_tools_backend.frp.wmdigit.com:8888/assets/outputs/20240219232316324/img/2.png?v=20240219232420833",
"local_image_path": "assets/outputs/20240218223401728/img/2.png" "local_image_path": "assets/outputs/20240219232316324/img/2.png"
}, },
{ {
"编号": "3", "编号": "3",
"场景描述": "他欣然接过,甜蜜的味道在舌尖绽放,就像他们的爱情一样,平淡却温暖人心", "场景描述": "On that day, he was focused on typing on the code when his girlfriend burst into his sight holding a freshly baked cookie and said with a smile, Dear Clean Brother, come and taste my newly learned dessert",
"场景关键词": "现代,室内,下班后,客厅,温馨小窝,傍晚,曲奇饼干,甜点", "场景关键词": "Modern era, Home office, Late evening, Indoors, Warm and cozy atmosphere, Computer setup with code displayed on the screen, Freshly baked cookies, Kitchen aroma",
"角色": "干净哥(程序员),女友", "角色": "Clean Brother, Girlfriend",
"角色关键词": "男性,30岁,中等肤色,休闲格子衬衫,牛仔裤,深棕色短发,专注且略带笑意的眼神,女性,28岁,白皙肤色,粉色围裙,浅金色长卷发,笑起来像弯月的眼睛", "角色关键词": "Programmer, Male, Mid-20s to early 30s, Asian, Olive skin tone, Casual programmer's outfit (t-shirt and jeans), Short and tidy haircut, Black hair, Clean-shaven, Sharp facial features, Female, Late 20s, Caucasian, Fair skin, Apron over a casual dress, Shoulder-length wavy hair, Blonde, Bright smile, Sparkling blue eyes",
"画面描述词": "In the cozy living room of their modern, intimate apartment on a dusky evening after work, Clean-Cut Guy (a 30-year-old programmer with a medium skin tone, clad in a casual plaid shirt and denim jeans, his deep brown hair cut short and eyes focused yet twinkling with a subtle smile) sits comfortably. Across from him, his girlfriend, a radiant 28-year-old woman with fair skin and luscious, light golden curly locks cascading down her shoulders, dons a pink apron that contrasts beautifully against her beaming smile, her eyes curved like a crescent moon when she laughs. She presents him with a plate of freshly baked cookies. He accepts them eagerly, the sweetness exploding on his taste buds – an allegory for their relationship, unassuming yet profoundly heartwarming. As he savors the buttery crunch of the homemade chocolate chip cookies, the atmosphere fills with warmth and affection, encapsulating the essence of their shared life together in this温馨 haven.", "画面描述词": "Shot Description: In the modern era, a warm and cozy home office is illuminated by the soft glow of computer screens as our protagonist, Clean Brother, sits intently at his desk. The late evening hour casts a comfortable ambiance over the room, where the hum of technology meets the alluring aroma of freshly baked cookies wafting in from the nearby kitchen. The scene captures a programmer's haven - a clutter-free workspace adorned with a state-of-the-art computer setup displaying lines of code on its screen. Clean Brother, a mid-20s to early 30s Asian male, dons a casual programmer's outfit of a t-shirt and jeans, topped off with a short, tidy haircut that frames his olive skin-toned face. His sharp facial features are clean-shaven, and his black hair complements the intensity he exudes while typing away. Suddenly, the tranquility of the indoor setting is interrupted delightfully as Clean Brother's girlfriend bursts into view, her bright smile beaming through the dimly lit room. Clad in an apron over a casual dress, she embodies domestic charm. With her late 20s Caucasian beauty, fair skin, and shoulder-length wavy blonde hair, she carries a plate of steaming hot cookies. Her sparkling blue eyes twinkle mischievously as she playfully addresses him, \"Dear Clean Brother, come and taste my newly learned dessert.\" The shot encapsulates this tender moment between the two characters, merging the worlds of digital creation and homely affection.",
"本镜配图": "http://wm_tools_backend.frp.wmdigit.com:8888/assets/outputs/20240218223401728/img/3.png?v=20240218223555504", "本镜配图": "http://wm_tools_backend.frp.wmdigit.com:8888/assets/outputs/20240219222232784/img/3.png",
"local_image_path": "assets/outputs/20240218223401728/img/3.png" "local_image_path": "assets/outputs/20240219222232784/img/3.png"
}, },
{ {
"编号": "4", "编号": "4",
"场景描述": "在充满代码与爱的世界里,干净哥的生活因这份日常小确幸而更加美好", "场景描述": "He gladly took it, and the sweet taste bloomed on his tongue, just like their love, plain yet heartwarming",
"场景关键词": "现代,室内,下班后,温馨小窝,电脑桌前,曲奇饼干,代码屏幕", "场景关键词": "Modern era, Home setting, Late evening, Indoors, Warm and cozy atmosphere, Freshly baked cookies, Keyboard, Computer screen",
"角色": "干净哥(程序员),女友", "角色": "Clean Brother, Girlfriend",
"角色关键词": "男性,30岁,中等肤色,休闲格子衬衫和牛仔裤,深棕色短发,专注且略带笑意,严谨认真,女性,28岁,白皙肤色,粉色围裙,浅金色长卷发,笑容温暖甜美", "角色关键词": "Programmer, Male, Mid-20s to early 30s, Asian, Olive skin tone, Casual programmer's outfit, Short tidy haircut, Black hair, Clean-shaven, Sharp facial features, Female, Late 20s, Caucasian, Fair skin, Apron over casual dress, Shoulder-length wavy hair, Blonde, Bright smile, Sparkling blue eyes",
"画面描述词": "In a modern indoor setting, post-work hours have descended upon a cozy little nest where the atmosphere is infused with love and lines of code. At the heart of this scene sits Clean-Guy, a 30-year-old programmer dressed in his casual plaid shirt and denim jeans, his deep brown hair trimmed short. His focused gaze dances across the illuminated screen filled with code, yet there's a subtle smile playing at the corners of his lips - an expression that reflects both his dedication and contentment. Beside him, his girlfriend stands as a vision of warmth and comfort. She's a 28-year-old woman with a fair complexion, donning a pink apron over her attire, her golden locks cascading in soft curls down to her shoulders. Her presence radiates a tender sweetness as she watches him work, a warm and affectionate smile lighting up her features. On the desk, nestled between the keyboard and the glowing monitor, rests a plate of freshly baked cookies – a small but significant daily delight that adds to the richness of Clean-Guy's life. The mingling aromas of computer circuits and homemade chocolate chip cookies create a unique symphony of their shared world, encapsulating the blend of technology and tenderness that defines their evenings together.", "画面描述词": "Shot Description: In the modern home setting, late in the evening with a warm and cozy atmosphere pervading indoors, we find our male protagonist, Clean Brother, sitting at his computer desk. He's a programmer in his mid-20s to early 30s, of Asian descent with an olive skin tone. Clad in a casual programmer's outfit and sporting a short, tidy haircut, his black hair complements his sharp facial features and clean-shaven look. His eyes are fixated on the glowing computer screen as he types away at the keyboard. Next to him stands his girlfriend, a vibrant Late 20s Caucasian woman with fair skin, wearing an apron over her casual dress. Her shoulder-length wavy blonde hair frames her bright smile and sparkling blue eyes, radiating affection and warmth. She holds out a plate filled with freshly baked cookies, their scent wafting through the air. With a tender expression, Clean Brother takes one of the warm cookies from the plate, and as he savors the sweet taste on his tongue, it mirrors the simple yet profound love they share - plain yet heartwarming. The intimate moment between them encapsulates the essence of their relationship within this contemporary domestic scene.",
"本镜配图": "http://wm_tools_backend.frp.wmdigit.com:8888/assets/outputs/20240218223401728/img/4.png?v=20240218223640906", "本镜配图": "http://wm_tools_backend.frp.wmdigit.com:8888/assets/outputs/20240219232316324/img/4.png?v=20240219232932841",
"local_image_path": "assets/outputs/20240218223401728/img/4.png" "local_image_path": "assets/outputs/20240219232316324/img/4.png"
},
{
"编号": "5",
"场景描述": "In a world full of code and love, Clean Brother's life is even better because of this daily pleasure",
"场景关键词": "Modern era, Home environment, Late evening/after work hours, Indoors, Warm and cozy atmosphere, Computer setup with code displayed, Freshly baked cookies, Plate, Table, Chair",
"角色": "Clean Brother, Girlfriend",
"角色关键词": "Programmer, Male, Mid-20s to early 30s, Asian, Olive skin tone, Casual programmer's outfit, Short and tidy haircut, Black hair, Clean-shaven, Sharp facial features, Female, Late 20s, Caucasian, Fair skin, Apron over casual dress, Shoulder-length wavy hair, Blonde, Bright smile, Sparkling blue eyes",
"画面描述词": "Shot Description: In the modern era, we find Clean Brother in his home environment during late evening/after work hours. The indoors is bathed in a warm and cozy atmosphere, with soft lighting emanating from a desk lamp illuminating his well-organized computer setup. On the screen, lines of code dance in an intricate ballet of 1s and 0s, symbolizing his passion for programming. Seated on a comfortable chair, Clean Brother is a male programmer in his mid-20s to early 30s, of Asian descent with olive skin tone. He sports a casual programmer's outfit and a short, tidy haircut that frames his sharp facial features. His black hair contrasts against his clean-shaven face as he intently studies the code. Beside him, on a wooden table, rests a plate piled high with freshly baked cookies, their aroma wafting through the air, adding a homely touch to the tech-filled room. The plate is lovingly placed there by his girlfriend, a late 20s Caucasian woman with fair skin and an infectious smile that lights up her sparkling blue eyes. She stands nearby, wearing an apron over her casual dress, her shoulder-length wavy blonde hair cascading down as she watches him work, enjoying this intimate moment shared amidst the digital world they both inhabit.",
"本镜配图": "http://wm_tools_backend.frp.wmdigit.com:8888/assets/outputs/20240219232316324/img/5.png?v=20240219233012776",
"local_image_path": "assets/outputs/20240219232316324/img/5.png"
} }
], ],
final_video: `http://wm_tools_backend.frp.wmdigit.com:8888/assets/outputs/20240218223401728/final_video.mp4`, final_video: `http://wm_tools_backend.frp.wmdigit.com:8888/assets/outputs/20240219222232784/final_video.mp4`,
}; };
return { return {
screen: screen, screen: screen,
sd_prompt_prefix: sd_prompt_prefix, sd_prompt_prefix: sd_prompt_prefix,
...@@ -229,5 +262,6 @@ export const useManyValues = () => { ...@@ -229,5 +262,6 @@ export const useManyValues = () => {
horizontal_data: horizontal_data, horizontal_data: horizontal_data,
vertical_data: vertical_data, vertical_data: vertical_data,
if_need_subtitle: if_need_subtitle, if_need_subtitle: if_need_subtitle,
en_vertical_data: en_vertical_data,
} }
} }
...@@ -64,7 +64,7 @@ const onAdaptRoles = async () => { ...@@ -64,7 +64,7 @@ const onAdaptRoles = async () => {
严格以如下格式返回:[{"角色":"","角色关键词":""}]`; 严格以如下格式返回:[{"角色":"","角色关键词":""}]`;
const keywords = await text2videoService.submitGpt(form.chatgpt_answer + "\n" + adapt_restrict); const keywords = await text2videoService.submitGpt(form.chatgpt_answer + "\n" + adapt_restrict);
console.log(keywords) console.log(keywords)
const keywords_obj = utils.formatJsonObj(keywords) const keywords_obj = utils.formatJsonObj(keywords.replace(/```json/g, '').replace(/```/g, ''))
console.log(keywords_obj) console.log(keywords_obj)
form.chatgpt_answer_roles = [] form.chatgpt_answer_roles = []
for (let item of keywords_obj) { for (let item of keywords_obj) {
...@@ -121,8 +121,8 @@ const onAdapt = async () => { ...@@ -121,8 +121,8 @@ const onAdapt = async () => {
async function processScenes() { async function processScenes() {
for (const item of form.adapt_result_json) { for (const item of form.adapt_result_json) {
await onAdaptOne(item); await onAdaptOne(item);
await onDrawOne(item);
await delay(1000); await delay(1000);
await onDrawOne(item);
} }
} }
...@@ -165,7 +165,7 @@ const onAdaptOne = async (item: any) => { ...@@ -165,7 +165,7 @@ const onAdaptOne = async (item: any) => {
严格以如下格式返回:[{"场景关键词":"(多个词以逗号分隔)","角色":"(角色以逗号分隔)","角色关键词":"(分别给予对应角色的关键词,多个词以逗号分隔)"}]`; 严格以如下格式返回:[{"场景关键词":"(多个词以逗号分隔)","角色":"(角色以逗号分隔)","角色关键词":"(分别给予对应角色的关键词,多个词以逗号分隔)"}]`;
const keywords = await text2videoService.submitGpt("故事:\n" + form.chatgpt_answer + "\n所有角色:\n"+ JSON.stringify(form.chatgpt_answer_roles)+"\n" + adapt_restrict); const keywords = await text2videoService.submitGpt("故事:\n" + form.chatgpt_answer + "\n所有角色:\n"+ JSON.stringify(form.chatgpt_answer_roles)+"\n" + adapt_restrict);
// console.log(keywords) // console.log(keywords)
const keywords_obj = utils.formatJsonObj(keywords) const keywords_obj = utils.formatJsonObj(keywords.replace(/```json/g, '').replace(/```/g, ''))
// console.log(keywords_obj) // console.log(keywords_obj)
item.场景关键词 = JSON.stringify(keywords_obj[0].场景关键词).replace(/"/g, ''); item.场景关键词 = JSON.stringify(keywords_obj[0].场景关键词).replace(/"/g, '');
item.角色 = JSON.stringify(keywords_obj[0].角色).replace(/"/g, ''); item.角色 = JSON.stringify(keywords_obj[0].角色).replace(/"/g, '');
......
<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";
import { useManyValues } from './compositions/useManyValues'
const debug = ref(true);
const loading = ref(false);
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[]>[],
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;
onMounted(() => {
onChangeScreen(form.screen);
});
const onSubmitGpt = () => {
text2videoService
.submitGpt(form.chatgpt_prompt)
.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;
// 推理角色
try {
const adapt_restrict = `
Instructions:
Please understand this story and provide all the characters and key words (gender (can be supplemented with imagination, but must be clear), age (can be supplemented with imagination, but must be clear), race (can be supplemented with imagination, but must be clear),
skin color (can be supplemented with imagination, but must be clear), clothing (can be supplemented with imagination, but must be clear), hairstyle (can be supplemented with imagination, but must be clear), hair color (can be supplemented with imagination, but must be clear),
facial features (can be supplemented with imagination, but must be clear). \n
Requirement:
The roles and keywords should correspond.
Strictly return in the following format: [{"Role": "", "Role Keywords": ""}]`;
const keywords = await text2videoService.submitGpt(form.chatgpt_answer + "\n" + adapt_restrict);
// console.log(keywords)
const keywords_obj = utils.formatJsonObj(keywords.replace(/```json/g, '').replace(/```/g, ''))
// console.log(keywords_obj)
form.chatgpt_answer_roles = []
for (let item of keywords_obj) {
let newObjItem = {
"角色": JSON.stringify(item["Role"]).replace(/"/g, ''),
"角色关键词": JSON.stringify(item["Role Keywords"]).replace(/"/g, '')
};
form.chatgpt_answer_roles.push(newObjItem);
}
console.log(form.chatgpt_answer_roles)
} 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(),
"场景关键词": "",
"角色": "",
"角色关键词": "",
"画面描述词": "",
"本镜配图": "",
"local_image_path": "",
});
}
console.log(form.adapt_result_json)
const delay = (ms: any) => new Promise(res => setTimeout(res, ms));
async function processScenes() {
for (const item of form.adapt_result_json) {
await onAdaptOne(item);
await delay(1000);
await 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 following description for the scene: "${item.场景描述}":
scene keywords (era, space, time period, geographical environment, weather, objects, characters, camera angle)
characters (select the character in this scene from all characters)
character keywords (select the character keywords for this scene from all characters and copy them as they are).
Requirement:
The roles and keywords should correspond.
Strictly return in the following format: [{"Scene Keywords": "(Multiple words separated by commas)", "Role": "(Characters separated by commas)", "Role Keywords": "(Give corresponding character keywords separately, multiple words separated by commas)"}]
`;
const keywords = await text2videoService.submitGpt("story:\n" + form.chatgpt_answer + "\nall characters:\n"+ JSON.stringify(form.chatgpt_answer_roles)+"\n" + adapt_restrict);
// console.log(keywords)
const keywords_obj = utils.formatJsonObj(keywords.replace(/```json/g, '').replace(/```/g, ''))
// console.log(keywords_obj)
item.场景关键词 = JSON.stringify(keywords_obj[0]["Scene Keywords"]).replace(/"/g, '');
item.角色 = JSON.stringify(keywords_obj[0]["Role"]).replace(/"/g, '');
item.角色关键词 = JSON.stringify(keywords_obj[0]["Role Keywords"]).replace(/"/g, '');
} catch (error) {
ElMessage({
message: String(error),
type: "error",
});
}
};
const onDrawOne = async (item: any) => {
if (!item.编号 || !item.场景描述 || !item.场景关键词 || !item.角色 || !item.角色关键词) {
ElMessage({
message: "分镜参数不能为空",
type: "error",
});
return;
}
// 翻译+画图
if (!form.task_id) {
form.task_id = utils.genDateTimeStr();
console.log(form.task_id)
}
try {
const sd_describe = await text2videoService.submitGpt(
`Scene description is: ${item.场景描述} \n Scene keywords are: ${item.场景关键词} \n Characters in the scene are: ${item.角色} \n Character keywords are: ${item.角色关键词} \n
Instructions:
Please understand the above content and return an English shot description.`
);
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 sd_img = await text2videoService.submitSD(form.task_id, item.编号, sd_prompt, sd_negative_prompt_prefix, width, height);
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",
});
}
};
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
};
});
const video_param = {
task_id: form.task_id,
if_need_subtitle: form.if_need_subtitle,
lang: 'en',
task_info: video_param_detail,
}
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 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.画面描述词)
alert(sd_prompt_prefix)
// alert(sd_negative_prompt_prefix)
}
</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">生成文案</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">推理所有角色</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">分镜、推理关键词、绘图</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)">重新推理<br />关键字</el-button></div>
<div style="margin: 10px 0"><el-button type="primary" size="default" @click="onDrawOne(scope.row)">重绘本镜</el-button></div>
<div style="margin: 10px 0"><el-button type="primary" size="small" @click="showsdprompt(scope.row)">show<br />sd prompt</el-button></div>
</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-item>
<video :src="form.final_video" controls></video>
</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>
...@@ -32,7 +32,7 @@ export default defineConfig({ ...@@ -32,7 +32,7 @@ export default defineConfig({
} }
}, },
host: '0.0.0.0', host: '0.0.0.0',
port: 9528, port: 9529,
https: false, https: false,
} }
}) })
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