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-10 02:02:25 +08:00
parent fabccbaf7d
commit d0e7db4bce
4 changed files with 503 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files

81
pages/index.vue
View File

@@ -1,17 +1,29 @@
<template lang="pug">
div(class="mt-[60px] grid grid-cols-1 lg:grid-cols-4 xl:grid-cols-5 text-white bg-[#05020E] h-[calc(100vh-62px)] border-t border-white/10 2xl:border-t-0 mx-auto 2xl:border-x")
// 左侧信息
aside(class="flex flex-col divide-y divide-white/10 pt-6 space-y-6 lg:overflow-y-auto scrollbar-hide")
aside.p-4(class="flex flex-col divide-y divide-white/10 pt-6 space-y-6 lg:overflow-y-auto scrollbar-hide")
div
p.font-bold 迅速に開発できる
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
p.font-bold Prompt
p.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-500(value="Search" type="text" class="focus:outline-none")
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-500(
v-model="imageCreate.prompt" type="text" class="focus:outline-none"
)
div
div.flex.items-center.justify-between
span.font-bold 从图像中删除特征
label.switch
input(type="checkbox" checked)
input(type="checkbox" :checked="imageCreate.exclude_on" @change="imageCreate.exclude_on=!imageCreate.exclude_on")
div.slider.round
div(v-show="imageCreate.exclude_on")
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 筛选
@@ -29,12 +41,13 @@ div(class="mt-[60px] grid grid-cols-1 lg:grid-cols-4 xl:grid-cols-5 text-white b
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 18" :key="item")
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="https://storage.googleapis.com/pai-marketing/filters/elizaport_style.png" 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") Colorpop
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 通过图像生成图像
p.text-gray-400 上传或绘制图像以用作灵感
@@ -79,28 +92,14 @@ div(class="mt-[60px] grid grid-cols-1 lg:grid-cols-4 xl:grid-cols-5 text-white b
</div>
</fieldset>
div(class="flex flex-col gap-y-8 py-8")
// 选择生成尺寸
fieldset(class="create-fieldset")
label 图像尺寸
p 完成图像的宽度×高度.
div(class="flex flex-row flex-wrap gap-x-2 gap-y-2")
div(class="flex flex-row flex-wrap")
input.hidden(type="radio" class="radio-input" id="image-dim-1" checked="")
label.border.border-2.border-gray-500.rounded-md.px-4.py-1(for="image-dim-1" class="!text-[11px]" style="width:98px") 512 × 512
div(class="flex flex-row flex-wrap")
input.hidden(type="radio" class="radio-input" id="image-dim-2")
label.border.border-2.border-gray-500.rounded-md.px-4.py-1(for="image-dim-2" class="!text-[11px]" style="width:98px") 1024 × 1024
div(class="flex flex-row flex-wrap")
input.hidden(type="radio" class="radio-input" id="image-dim-3")
label.border.border-2.border-gray-500.rounded-md.px-4.py-1(for="image-dim-3" class="!text-[11px]" style="width:98px") 640 × 384
div(class="flex flex-row flex-wrap")
input.hidden(type="radio" class="radio-input" id="image-dim-4")
label.border.border-2.border-gray-500.rounded-md.px-4.py-1(for="image-dim-4" class="!text-[11px]" style="width:98px") 384 × 640
div(class="flex flex-row flex-wrap")
input.hidden(type="radio" class="radio-input" id="image-dim-5")
label.border.border-2.border-gray-500.rounded-md.px-4.py-1(for="image-dim-5" class="!text-[11px]" style="width:98px") 768 × 512
div(class="flex flex-row flex-wrap")
input.hidden(type="radio" class="radio-input" id="image-dim-6")
label.border.border-2.border-gray-500.rounded-md.px-4.py-1(for="image-dim-6" class="!text-[11px]" style="width:98px") 512 × 768
div(class="flex flex-row flex-wrap" v-for="item in sizes" :key="item.id")
input.hidden.radio-input(type="radio" :id="item.id" checked="")
label.border.border-2.border-gray-500.rounded-md.px-4.py-1.whitespace-nowrap.text-center(:for="item.id" class="!text-[11px]" style="width:98px") {{ item.width }} x {{ item.height }}
div(class="text-sm grey-100 mt-1")
p Buy a <a target="_blank" style="color:rgb(118 173 255)" href="/pricing">paid plan</a> for any width or height up to 1536px
fieldset(class="create-fieldset")
@@ -202,6 +201,9 @@ const views = ref({
})
const imageCreate = ref({
prompt: '渲染提示', // 渲染提示
exclude: '排除', // 排除词汇
exclude_on: false, // 排除开关
// 输入:
// 输入关键词
// 排除关键词
@@ -220,6 +222,35 @@ 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 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' },
])
const tasks = ref([
// 以图生成图, 正面描述词, 反面描述词, 生成数量, 生成质量, 生成尺寸, 生成模型, 生成图片, 随机种子, 生成指导
{ tid:'sjaksjka0', model:'Colorpop0', image:'', width:768, height:768, number:1, seed:1, quality:1, prompt:'prompt0' },
{ tid:'sjaksjka1', model:'Colorpop1', image:'', width:768, height:768, number:1, seed:1, quality:1, prompt:'prompt1' },
{ tid:'sjaksjka2', model:'Colorpop2', image:'', width:768, height:768, number:1, seed:1, quality:1, prompt:'prompt2' },
{ tid:'sjaksjka3', model:'Colorpop3', image:'', width:768, height:768, number:1, seed:1, quality:1, prompt:'prompt3' },
])
</script>
<style>