diff --git a/pages/index.vue b/pages/index.vue index 55e32cd..4c6a6ea 100644 --- a/pages/index.vue +++ b/pages/index.vue @@ -5,9 +5,31 @@ div(class="mt-[60px] grid grid-cols-1 lg:grid-cols-4 xl:grid-cols-5 text-white b div p.font-bold Filter p.text-gray-400 尝试可以应用于您的图像的不同风格样式 - div.flex.flex-wrap.items-center.justify-between.pt-2 - div(v-for="item in models.filter(x=>x.use)" class="w-5/16 h-20 bg-gray-500 rounded-lg flex flex-col-reverse") - p.p-1 {{item.name}} + div.flex.flex-wrap.gap-2.items-center.pt-2 + div(v-for="item in filters" class="w-5/16 h-20 bg-gray-500 rounded-lg") + div.flex.justify-center.items-center.h-full(v-if="!item.name" :click="imageCreate.models_show = !imageCreate.models_show") + img.w-6.h-6(:src="IconPlusCircle" alt="PlusCircle") + div.flex.items-end.h-full(v-else :style="`background-image: url(${item.image}); background-size: cover; background-position: center;`") + p(class="p-1") {{item.name}} + // 风格滤镜列表(弹出/悬浮) + div(v-if="imageCreate.models_show" class="absolute w-screen lg:w-[400px] bottom-2 flex flex-col" style="max-height: 80vh; left: 394px; top: 6vh;") + div(class="overflow-auto scrollbar-hide transition-[transform,opacity] duration-[50ms] z-50 pai-border rounded-lg bg-gray-900 shadow-2xl opacity-100") + div(class="space-y-2 items-center absolute overflow-hidden w-[calc(100%-2px)] px-4 pb-2 pt-4 lg:pt-2 z-50 bg-inherit rounded-t-lg border-b border-low border-white border-opacity-10") + div(class="flex justify-between") + h3(class="text-white font-bold") Filter + button(class="text-gray-600 pb-1 lg:hidden") + + div(class="relative") + input(type="text" placeholder="Search" class="input pai-border bg-gray-900 rounded-md mb-2 outline-none w-full p-2 pl-8" value="") + span(class="absolute left-2 top-2.5 text-gray-500") + + div(class="h-32 lg:h-28") + div(class="grid grid-cols-3 sm:grid-cols-4 lg:grid-cols-3 gap-2 p-2 pt-0") + template(v-for="item in models" :key="item.name") + button.h-24(class="transition-[transform,opacity] origin-center filter-button relative aspect-[6/5] duration-200 border-2 rounded-lg overflow-hidden active:border-blue-300/50 border-transparent hover:border-high" aria-label="Select filter style: Colorpop" style="transition-delay: 10ms;") + span( style="box-sizing: border-box; display: block; overflow: hidden; width: initial; height: initial; background: none; opacity: 1; border: 0px; margin: 0px; padding: 0px; position: absolute; inset: 0px;") + img( alt="Colorpop" :src="item.image" decoding="async" data-nimg="fill" style="position: absolute; inset: 0px; box-sizing: border-box; padding: 0px; border: none; margin: auto; display: block; width: 0px; height: 0px; min-width: 100%; max-width: 100%; min-height: 100%; max-height: 100%; object-fit: cover;" sizes="100vw" srcset="https://storage.googleapis.com/pai-marketing/filters/elizaport_style.png 640w, https://storage.googleapis.com/pai-marketing/filters/elizaport_style.png 750w, https://storage.googleapis.com/pai-marketing/filters/elizaport_style.png 828w, https://storage.googleapis.com/pai-marketing/filters/elizaport_style.png 1080w, https://storage.googleapis.com/pai-marketing/filters/elizaport_style.png 1200w, https://storage.googleapis.com/pai-marketing/filters/elizaport_style.png 1920w, https://storage.googleapis.com/pai-marketing/filters/elizaport_style.png 2048w, https://storage.googleapis.com/pai-marketing/filters/elizaport_style.png 3840w") + div( class="absolute inset-0 bg-gradient-to-t from-black/90 via-black/40 flex flex-col justify-end text-gray-100 text-left text-sm p-1") {{ item.name }} div p.font-bold Prompt p.text-gray-400 あなたのアイデアを素早く実現するためのフレームワークです。 @@ -24,30 +46,7 @@ div(class="mt-[60px] grid grid-cols-1 lg:grid-cols-4 xl:grid-cols-5 text-white b textarea.mt-4.rounded-lg.h-32.w-full.px-4.py-2.bg-gray-500.bg-opacity-5.border.border-gray-500.border-opacity-20.text-gray-400( v-model="imageCreate.exclude" type="text" class="focus:outline-none" ) - p.text-gray-400 描述您不希望出现在图像中的细节, 例如颜色, 物体或是风景 - div - p.font-bold 筛选 - p.text-gray-400 尝试可以应用于您的图像的不同风格样式 - input.mt-4.rounded-lg.h-9.w-full.px-4.py-2.bg-gray-500.bg-opacity-5.border.border-gray-500.border-opacity-20.text-gray-500(value="Search" type="text" class="focus:outline-none") - div(class="absolute w-screen lg:w-[400px] bottom-2 flex flex-col" style="max-height: 80vh; left: 418.797px; top: min(747px - min(1326.22px, 80vh), 582.656px);") - div(class="overflow-auto scrollbar-hide transition-[transform,opacity] duration-[50ms] z-50 pai-border rounded-lg bg-gray-900 shadow-2xl opacity-100") - div(class="space-y-2 items-center absolute overflow-hidden w-[calc(100%-2px)] px-4 pb-2 pt-4 lg:pt-2 z-50 bg-inherit rounded-t-lg border-b border-low border-white border-opacity-10") - div(class="flex justify-between") - h3(class="text-white font-bold") Filter - button(class="text-gray-600 pb-1 lg:hidden") - - div(class="relative") - input(type="text" placeholder="Search" class="input pai-border bg-gray-900 rounded-md mb-2 outline-none w-full p-2 pl-8" value="") - span(class="absolute left-2 top-2.5 text-gray-500") - - div(class="h-32 lg:h-28") - // 风格滤镜列表(弹出/悬浮) - div(class="grid grid-cols-3 sm:grid-cols-4 lg:grid-cols-3 gap-2 p-2 pt-0") - template(v-for="item in models" :key="item.name") - button.h-24(class="transition-[transform,opacity] origin-center filter-button relative aspect-[6/5] duration-200 border-2 rounded-lg overflow-hidden active:border-blue-300/50 border-transparent hover:border-high" aria-label="Select filter style: Colorpop" style="transition-delay: 10ms;") - span( style="box-sizing: border-box; display: block; overflow: hidden; width: initial; height: initial; background: none; opacity: 1; border: 0px; margin: 0px; padding: 0px; position: absolute; inset: 0px;") - img( alt="Colorpop" :src="item.image" decoding="async" data-nimg="fill" style="position: absolute; inset: 0px; box-sizing: border-box; padding: 0px; border: none; margin: auto; display: block; width: 0px; height: 0px; min-width: 100%; max-width: 100%; min-height: 100%; max-height: 100%; object-fit: cover;" sizes="100vw" srcset="https://storage.googleapis.com/pai-marketing/filters/elizaport_style.png 640w, https://storage.googleapis.com/pai-marketing/filters/elizaport_style.png 750w, https://storage.googleapis.com/pai-marketing/filters/elizaport_style.png 828w, https://storage.googleapis.com/pai-marketing/filters/elizaport_style.png 1080w, https://storage.googleapis.com/pai-marketing/filters/elizaport_style.png 1200w, https://storage.googleapis.com/pai-marketing/filters/elizaport_style.png 1920w, https://storage.googleapis.com/pai-marketing/filters/elizaport_style.png 2048w, https://storage.googleapis.com/pai-marketing/filters/elizaport_style.png 3840w") - div( class="absolute inset-0 bg-gradient-to-t from-black/90 via-black/40 flex flex-col justify-end text-gray-100 text-left text-sm p-1") {{ item.name }} + p.pt-2.text-gray-400 描述您不希望出现在图像中的细节, 例如颜色, 物体或是风景 div p.font-bold 通过图像生成图像 p.text-gray-400 上传或绘制图像以用作灵感 @@ -194,6 +193,7 @@ import IconEdit from 'assets/icon/edit-2.svg' import IconGrid from 'assets/icon/grid.svg' import IconStack from 'assets/icon/stack.svg' import ImageDemo from 'assets/image/demo.png' +import IconPlusCircle from 'assets/icon/plus-circle.svg' const views = ref({ cardMode: true, @@ -201,9 +201,12 @@ const views = ref({ }) const imageCreate = ref({ + filter_ctive: 0, + filter_list: [0, 1, 2, 3, 4, 5, 6], prompt: '渲染提示', // 渲染提示 exclude: '排除', // 排除词汇 exclude_on: false, // 排除开关 + models_show: false, // 模型列表开关 // 输入: // 输入关键词 // 排除关键词 @@ -222,24 +225,25 @@ const imageCreate = ref({ // 私有会话 }) -const sizes = ref([ - { id:'image-dim-1', width:512, height:512 }, - { id:'image-dim-2', width:768, height:768 }, - { id:'image-dim-3', width:1024, height:1024 }, - { id:'image-dim-4', width:640, height:384 }, - { id:'image-dim-5', width:384, height:640 }, - { id:'image-dim-6', width:768, height:512 }, + +const filters = ref([ + { name:'None', image:'https://storage.googleapis.com/pai-marketing/filters/elizaport_style.png' }, + { name:'Colorpop1', image:'https://storage.googleapis.com/pai-marketing/filters/elizaport_style.png' }, + { name:'Colorpop2', image:'https://storage.googleapis.com/pai-marketing/filters/elizaport_style.png' }, + { name:'Colorpop3', image:'https://storage.googleapis.com/pai-marketing/filters/elizaport_style.png' }, + { name:'Colorpop3', image:'https://storage.googleapis.com/pai-marketing/filters/elizaport_style.png' }, + { name:'', image:'https://storage.googleapis.com/pai-marketing/filters/elizaport_style.png' }, ]) const models = ref([ - { name:'None', use: 1, image:'https://storage.googleapis.com/pai-marketing/filters/elizaport_style.png' }, - { name:'Colorpop1', use: 2, image:'https://storage.googleapis.com/pai-marketing/filters/elizaport_style.png' }, - { name:'Colorpop2', use: 3, image:'https://storage.googleapis.com/pai-marketing/filters/elizaport_style.png' }, - { name:'Colorpop3', use: 4, image:'https://storage.googleapis.com/pai-marketing/filters/elizaport_style.png' }, - { name:'Colorpop3', use: 5, image:'https://storage.googleapis.com/pai-marketing/filters/elizaport_style.png' }, - { name:'Colorpop3', use: 0, image:'https://storage.googleapis.com/pai-marketing/filters/elizaport_style.png' }, - { name:'Colorpop3', use: 0, image:'https://storage.googleapis.com/pai-marketing/filters/elizaport_style.png' }, - { name:'Colorpop3', use: 0, image:'https://storage.googleapis.com/pai-marketing/filters/elizaport_style.png' }, + { name:'None', image:'https://storage.googleapis.com/pai-marketing/filters/elizaport_style.png' }, + { name:'Colorpop1', image:'https://storage.googleapis.com/pai-marketing/filters/elizaport_style.png' }, + { name:'Colorpop2', image:'https://storage.googleapis.com/pai-marketing/filters/elizaport_style.png' }, + { name:'Colorpop3', image:'https://storage.googleapis.com/pai-marketing/filters/elizaport_style.png' }, + { name:'Colorpop3', image:'https://storage.googleapis.com/pai-marketing/filters/elizaport_style.png' }, + { name:'Colorpop3', image:'https://storage.googleapis.com/pai-marketing/filters/elizaport_style.png' }, + { name:'Colorpop3', image:'https://storage.googleapis.com/pai-marketing/filters/elizaport_style.png' }, + { name:'Colorpop3', image:'https://storage.googleapis.com/pai-marketing/filters/elizaport_style.png' }, ]) const tasks = ref([ @@ -250,6 +254,15 @@ const tasks = ref([ { tid:'sjaksjka3', model:'Colorpop3', image:'', width:768, height:768, number:1, seed:1, quality:1, prompt:'prompt3' }, ]) +const sizes = ref([ + { id:'image-dim-1', width:512, height:512 }, + { id:'image-dim-2', width:768, height:768 }, + { id:'image-dim-3', width:1024, height:1024 }, + { id:'image-dim-4', width:640, height:384 }, + { id:'image-dim-5', width:384, height:640 }, + { id:'image-dim-6', width:768, height:512 }, +]) +