gameui/drawing
2
0
Fork 0
Code Issues 1 Pull Requests Packages Projects Releases Wiki Activity

提交累积

Browse Source
This commit is contained in:
桜華
2023-02-13 23:10:18 +08:00
parent d0e7db4bce
commit c5ec54ece6
1 changed files with 55 additions and 42 deletions
Download Patch File Download Diff File Expand all files Collapse all files

97
pages/index.vue
View File

@@ -5,9 +5,31 @@ div(class="mt-[60px] grid grid-cols-1 lg:grid-cols-4 xl:grid-cols-5 text-white b
div div
p.font-bold Filter p.font-bold Filter
p.text-gray-400 尝试可以应用于您的图像的不同风格样式 p.text-gray-400 尝试可以应用于您的图像的不同风格样式
div.flex.flex-wrap.items-center.justify-between.pt-2 div.flex.flex-wrap.gap-2.items-center.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") div(v-for="item in filters" class="w-5/16 h-20 bg-gray-500 rounded-lg")
p.p-1 {{item.name}} 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")
<svg viewBox="0 0 24 24" focusable="false" class="chakra-icon css-onkibi"><path fill="currentColor" d="M.439,21.44a1.5,1.5,0,0,0,2.122,2.121L11.823,14.3a.25.25,0,0,1,.354,0l9.262,9.263a1.5,1.5,0,1,0,2.122-2.121L14.3,12.177a.25.25,0,0,1,0-.354l9.263-9.262A1.5,1.5,0,0,0,21.439.44L12.177,9.7a.25.25,0,0,1-.354,0L2.561.44A1.5,1.5,0,0,0,.439,2.561L9.7,11.823a.25.25,0,0,1,0,.354Z"></path></svg>
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")
<svg fill="none" height="20" shape-rendering="geometricPrecision" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" viewBox="0 0 24 24" width="20"><path d="M11 17.25a6.25 6.25 0 110-12.5 6.25 6.25 0 010 12.5z"></path><path d="M16 16l4.5 4.5"></path></svg>
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 div
p.font-bold Prompt p.font-bold Prompt
p.text-gray-400 あなたのアイデアを素早く実現するためのフレームワークです。 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( 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" v-model="imageCreate.exclude" type="text" class="focus:outline-none"
) )
p.text-gray-400 描述您不希望出现在图像中的细节, 例如颜色, 物体或是风景 p.pt-2.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")
<svg viewBox="0 0 24 24" focusable="false" class="chakra-icon css-onkibi"><path fill="currentColor" d="M.439,21.44a1.5,1.5,0,0,0,2.122,2.121L11.823,14.3a.25.25,0,0,1,.354,0l9.262,9.263a1.5,1.5,0,1,0,2.122-2.121L14.3,12.177a.25.25,0,0,1,0-.354l9.263-9.262A1.5,1.5,0,0,0,21.439.44L12.177,9.7a.25.25,0,0,1-.354,0L2.561.44A1.5,1.5,0,0,0,.439,2.561L9.7,11.823a.25.25,0,0,1,0,.354Z"></path></svg>
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")
<svg fill="none" height="20" shape-rendering="geometricPrecision" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" viewBox="0 0 24 24" width="20"><path d="M11 17.25a6.25 6.25 0 110-12.5 6.25 6.25 0 010 12.5z"></path><path d="M16 16l4.5 4.5"></path></svg>
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 div
p.font-bold 通过图像生成图像 p.font-bold 通过图像生成图像
p.text-gray-400 上传或绘制图像以用作灵感 p.text-gray-400 上传或绘制图像以用作灵感
@@ -194,6 +193,7 @@ import IconEdit from 'assets/icon/edit-2.svg'
import IconGrid from 'assets/icon/grid.svg' import IconGrid from 'assets/icon/grid.svg'
import IconStack from 'assets/icon/stack.svg' import IconStack from 'assets/icon/stack.svg'
import ImageDemo from 'assets/image/demo.png' import ImageDemo from 'assets/image/demo.png'
import IconPlusCircle from 'assets/icon/plus-circle.svg'
const views = ref({ const views = ref({
cardMode: true, cardMode: true,
@@ -201,9 +201,12 @@ const views = ref({
}) })
const imageCreate = ref({ const imageCreate = ref({
filter_ctive: 0,
filter_list: [0, 1, 2, 3, 4, 5, 6],
prompt: '渲染提示', // 渲染提示 prompt: '渲染提示', // 渲染提示
exclude: '排除', // 排除词汇 exclude: '排除', // 排除词汇
exclude_on: false, // 排除开关 exclude_on: false, // 排除开关
models_show: false, // 模型列表开关
// 输入: // 输入:
// 输入关键词 // 输入关键词
// 排除关键词 // 排除关键词
@@ -222,24 +225,25 @@ const imageCreate = ref({
// 私有会话 // 私有会话
}) })
const sizes = ref([
{ id:'image-dim-1', width:512, height:512 }, const filters = ref([
{ id:'image-dim-2', width:768, height:768 }, { name:'None', image:'https://storage.googleapis.com/pai-marketing/filters/elizaport_style.png' },
{ id:'image-dim-3', width:1024, height:1024 }, { name:'Colorpop1', image:'https://storage.googleapis.com/pai-marketing/filters/elizaport_style.png' },
{ id:'image-dim-4', width:640, height:384 }, { name:'Colorpop2', image:'https://storage.googleapis.com/pai-marketing/filters/elizaport_style.png' },
{ id:'image-dim-5', width:384, height:640 }, { name:'Colorpop3', image:'https://storage.googleapis.com/pai-marketing/filters/elizaport_style.png' },
{ id:'image-dim-6', width:768, height:512 }, { 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([ const models = ref([
{ name:'None', use: 1, 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', use: 2, 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', use: 3, 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', use: 4, 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', use: 5, 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', use: 0, 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', use: 0, 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', use: 0, 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([ 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' }, { 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 },
])
</script> </script>