说明
This commit is contained in:
@@ -3,8 +3,8 @@ div(class="mt-[60px] grid grid-cols-1 lg:grid-cols-4 xl:grid-cols-5 text-white b
|
||||
// 左侧信息
|
||||
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 Filter
|
||||
p.text-gray-400 尝试可以应用于您的图像的不同风格样式 {{ imageCreate.models_show }}
|
||||
p.font-bold 风格滤镜
|
||||
p.text-gray-400 尝试可以应用于您的图像的不同风格样式
|
||||
div.flex.flex-wrap.gap-2.items-center.pt-2
|
||||
div.cursor-pointer.select-none(v-for="(item, index) in filters" :key="item.name" class="w-5/16 h-20 bg-gray-500 rounded-lg")
|
||||
div.flex.justify-center.items-center.h-full(v-if="!item.name" @click="ModelsShow(index, item)")
|
||||
@@ -41,14 +41,14 @@ div(class="mt-[60px] grid grid-cols-1 lg:grid-cols-4 xl:grid-cols-5 text-white b
|
||||
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 あなたのアイデアを素早く実現するためのフレームワークです。
|
||||
p.font-bold 提示词
|
||||
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(
|
||||
v-model="new_task.prompt" type="text" class="focus:outline-none"
|
||||
)
|
||||
div
|
||||
div.flex.items-center.justify-between
|
||||
span.font-bold 从图像中删除特征
|
||||
span.font-bold 排除特征
|
||||
label.switch
|
||||
input(type="checkbox" :checked="imageCreate.exclude_on" @change="imageCreate.exclude_on=!imageCreate.exclude_on")
|
||||
div.slider.round
|
||||
@@ -57,7 +57,7 @@ div(class="mt-[60px] grid grid-cols-1 lg:grid-cols-4 xl:grid-cols-5 text-white b
|
||||
v-model="new_task.exclude" type="text" class="focus:outline-none"
|
||||
)
|
||||
p.pt-2.text-gray-400 描述您不希望出现在图像中的细节, 例如颜色, 物体或是风景
|
||||
div
|
||||
div.opacity-20
|
||||
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")
|
||||
@@ -65,7 +65,10 @@ div(class="mt-[60px] grid grid-cols-1 lg:grid-cols-4 xl:grid-cols-5 text-white b
|
||||
img.relative.right-6.w-4(:src="IconEdit" style="filter: drop-shadow(#ffffff 24px 0);")
|
||||
span 画点什么
|
||||
div
|
||||
button.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" @click="TaskSubmit()") 开始绘制
|
||||
button.mt-4.rounded-lg.h-9.w-full.bg-gray-500.bg-opacity-5.border.border-gray-500.border-opacity-20.text-gray-500.transition-all.duration-250(
|
||||
class="focus:outline-none hover:border-indigo-600 hover:bg-indigo-600 hover:bg-opacity-20 hover:text-indigo-300"
|
||||
@click="TaskSubmit()"
|
||||
) 开始绘制
|
||||
// 中间输出
|
||||
main(class="xl:col-span-3 lg:col-span-2 lg:overflow-y-auto lg:overflow-x-hidden border-x border-white/10 relative scrollbar-hide")
|
||||
div.flex.gap-2.pb-8
|
||||
@@ -134,20 +137,20 @@ div(class="mt-[60px] grid grid-cols-1 lg:grid-cols-4 xl:grid-cols-5 text-white b
|
||||
// input(type="text" class="w-12 rounded-full bg-gray-900 text-xs text-center py-1 text-gray-200" value="6")
|
||||
fieldset(class="create-fieldset")
|
||||
label Quality & Details
|
||||
p More steps will result in a high quality image but will take longer.
|
||||
p 更高的指导权重将使您的图像更接近您的提示.
|
||||
div(id="slider-undefined" class="flex items-center gap-x-4 slider-container")
|
||||
div(tabindex="-1" style="position: relative; touch-action: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); user-select: none; outline: 0px; padding-top: 8px; padding-bottom: 8px;" class="chakra-slider css-1t1xvy7")
|
||||
div(id="slider-track-:R9onqmqulm:" style="position:absolute;top:50%;transform:translateY(-50%);width:100%" class="chakra-slider__track css-8v2r68")
|
||||
div(class="css-11z5obk")
|
||||
div(aria-valuenow="50" class="chakra-slider__filled-track css-19vmo6h" style="position: absolute; top: 50%; transform: translateY(-50%); width: 28.5714%; left: 0%;")
|
||||
div(role="slider" tabindex="0" id="slider-thumb-:R9onqmqulm:" aria-valuemin="10" aria-valuemax="150" aria-valuenow="25" aria-orientation="horizontal" style="position: absolute; user-select: none; touch-action: none; left: calc(28.5714% - 8px);" class="chakra-slider__thumb css-12qisgv")
|
||||
input(type="hidden" value="50")
|
||||
input(type="text" class="w-12 rounded-full bg-gray-900 text-xs text-center py-1 text-gray-200" value="50")
|
||||
input(type="hidden" v-model="new_task.quality_details")
|
||||
input(type="text" class="w-12 rounded-full bg-gray-900 text-xs text-center py-1 text-gray-200" v-model="new_task.quality_details")
|
||||
div(class="flex flex-col gap-y-4 py-8")
|
||||
<fieldset class="create-fieldset">
|
||||
<label for="seed-input">Seed</label>
|
||||
<p>Different numbers result in new variations of your image.</p>
|
||||
<input id="seed-input" class="text-input" type="number" value="" disabled="">
|
||||
fieldset(class="create-fieldset")
|
||||
label(for="seed-input") 随机数种子(Seed)
|
||||
p 不同的数字会导致图像产生新变体
|
||||
input.bg-light-50.bg-opacity-20.px-2(v-model="new_task.seed" class="text-input" type="number")
|
||||
<div class="flex items-center gap-x-2">
|
||||
<label class="chakra-checkbox css-192puf7" data-checked="">
|
||||
<input class="chakra-checkbox__input" type="checkbox" id="randomize-seed" style="border:0px;clip:rect(0px, 0px, 0px, 0px);height:1px;width:1px;margin:-1px;padding:0px;overflow:hidden;white-space:nowrap;position:absolute" checked="" value="">
|
||||
@@ -159,7 +162,6 @@ div(class="mt-[60px] grid grid-cols-1 lg:grid-cols-4 xl:grid-cols-5 text-white b
|
||||
</label>
|
||||
<label for="randomize-seed" class="text-sm text-gray-300 mt-1">Randomize each number to get new variations</label>
|
||||
</div>
|
||||
</fieldset>
|
||||
<div class="flex flex-col gap-y-4" style="border-color:transparent">
|
||||
<fieldset class="create-fieldset">
|
||||
<button aria-label="Toggle advanced options" id="advanced-options-toggle"><div class="flex flex-row justify-center"><p class="advanced-options-toggle">Hide <!-- -->Advanced Options</p></div></button>
|
||||
@@ -185,13 +187,17 @@ div(class="mt-[60px] grid grid-cols-1 lg:grid-cols-4 xl:grid-cols-5 text-white b
|
||||
<fieldset class="create-fieldset py-8">
|
||||
<label>Number of Images</label>
|
||||
<p>Select the number of images you would like to generate.</p>
|
||||
<div class="flex gap-x-2">
|
||||
<input type="radio" class="radio-input" id="num-images-1" checked="">
|
||||
<label for="num-images-1">1</label><input type="radio" class="radio-input" id="num-images-2">
|
||||
<label for="num-images-2">2</label><input type="radio" class="radio-input" id="num-images-3">
|
||||
<label for="num-images-3">3</label><input type="radio" class="radio-input" id="num-images-4">
|
||||
<label for="num-images-4">4</label>
|
||||
</div>
|
||||
div.flex.gap-x-2
|
||||
input.bg-gray-700.border-none.outline-none(v-model="new_task.number" type="number")
|
||||
//input(v-model="new_task.number" type="radio" class="radio-input" id="num-images-1" checked="")
|
||||
//label(for="num-images-1") 1
|
||||
// input(type="radio" class="radio-input" id="num-images-2")
|
||||
//label(for="num-images-2") 2
|
||||
// input(type="radio" class="radio-input" id="num-images-3")
|
||||
//label(for="num-images-3") 3
|
||||
// input(type="radio" class="radio-input" id="num-images-4")
|
||||
//label(for="num-images-4") 4
|
||||
|
||||
</fieldset>
|
||||
div(class="flex flex-col gap-y-4 py-8")
|
||||
fieldset(class="create-fieldset")
|
||||
@@ -228,9 +234,16 @@ const imageCreate = ref({
|
||||
|
||||
// 新任务表单
|
||||
const new_task = ref({
|
||||
ckpt: '768-v-ema', // 选择的模型
|
||||
model: 'SD2', // 模型
|
||||
ckpt: '768-v-ema', // 风格参数
|
||||
prompt: 'A tabby cat, with a fluffy tail, basking in the sun, bright, warm, very cute!', // 渲染提示词
|
||||
exclude: 'puppets, death, decay, mess', // 排除词汇
|
||||
number: 1, // 生成图片数量
|
||||
w: 512, // 图片宽度
|
||||
h: 512, // 图片高度
|
||||
seed: 0, // 随机种子
|
||||
sampler: 'pndm', // 扩散采样器
|
||||
quality_details: 50, // 质量和细节(步数)
|
||||
})
|
||||
|
||||
|
||||
|
||||
Reference in New Issue
Block a user