From 794b38813061c0642275f975a8e79ded52ddf60f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E6=A1=9C=E8=8F=AF?= Date: Thu, 2 Mar 2023 01:39:02 +0800 Subject: [PATCH] UI --- pages/index.vue | 84 +++++++++++++++++++------------------------------ 1 file changed, 32 insertions(+), 52 deletions(-) diff --git a/pages/index.vue b/pages/index.vue index c3ef8da..091254b 100644 --- a/pages/index.vue +++ b/pages/index.vue @@ -100,11 +100,11 @@ div(class="mt-[60px] grid grid-cols-1 lg:grid-cols-4 xl:grid-cols-5 text-white b // 右侧参数 aside(class="lg:overflow-y-auto relative z-20 transition-all scrollbar-hide") div(class="px-6 divide-y divide-white/10") -
+

Different AI models can produce different or better results so feel free to experiment.

- @@ -119,25 +119,19 @@ div(class="mt-[60px] grid grid-cols-1 lg:grid-cols-4 xl:grid-cols-5 text-white b p 完成图像的宽度×高度. div(class="flex flex-row flex-wrap gap-x-2 gap-y-2") 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 }} + button.border-2.rounded-md.px-2( + :class="{'border-purple-600': item.width==new_task.w && new_task.h==item.height}" + @click="new_task.w=item.width;new_task.h=item.height" + ) {{ item.width }} x {{ item.height }} div(class="text-sm grey-100 mt-1") p Buy a paid plan for any width or height up to 1536px fieldset(class="create-fieldset") - label Prompt Guidance - p Higher guidance will make your image closer to your prompt. - SliderUndefined - //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-:R5mnqmqulm:" style="position:absolute;top:50%;transform:translateY(-50%);width:100%" class="chakra-slider__track css-8v2r68") - // div(class="css-11z5obk") - // div(aria-valuenow="6" class="chakra-slider__filled-track css-19vmo6h" style="position: absolute; top: 50%; transform: translateY(-50%); width: 20%; left: 0%;") - // div(role="slider" tabindex="0" id="slider-thumb-:R5mnqmqulm:" aria-valuemin="0" aria-valuemax="30" aria-valuenow="6" aria-orientation="horizontal" style="position: absolute; user-select: none; touch-action: none; left: calc(20% - 8px);" class="chakra-slider__thumb css-12qisgv") - // input(type="hidden" value="6") - // input(type="text" class="w-12 rounded-full bg-gray-900 text-xs text-center py-1 text-gray-200" value="6") + label 提示词权重(Prompt Guidance) + p 更高的指导将使您的图像更接近您的提示. + input(type="text" class="w-12 rounded-full bg-gray-900 text-xs text-center py-1 text-gray-200" v-model="new_task.prompt_guidance") fieldset(class="create-fieldset") - label Quality & Details - p 更高的指导权重将使您的图像更接近您的提示. + label 质量和细节(Quality & Details) + 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") @@ -162,47 +156,32 @@ div(class="mt-[60px] grid grid-cols-1 lg:grid-cols-4 xl:grid-cols-5 text-white b
-
-
- -
- -

The diffusion sampling method.

-
- + div(class="flex flex-col gap-y-4" style="border-color:transparent") + fieldset(class="create-fieldset") + div(class="advanced-options-container transition-all overflow-hidden opacity-100 max-h-[99rem] pb-8") + label 采样(Sampler) + p 扩散采样方法. + div(class="select") + select.bg-light-100.bg-opacity-10.px-2(name="advanced-options" id="advanced-options") + option.bg-dark-200(value="1" selected="") pndm (plms) + option.bg-dark-200(value="0") ddim + option.bg-dark-200(value="2") k_euler + option.bg-dark-200(value="3") k_euler_ancestral + option.bg-dark-200(value="4") k_heun + option.bg-dark-200(value="5") k_dpm_2 + option.bg-dark-200(value="6") k_dpm_2_ancestral + option.bg-dark-200(value="7") k_lms -
-
-
-
- -

Select the number of images you would like to generate.

+ +

选择要生成的图像数量.

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 -
- div(class="flex flex-col gap-y-4 py-8") + div(class="flex flex-col gap-y-4 py-8 opacity-20") fieldset(class="create-fieldset") - -

Images will only be visible to you until you're ready to share them. Buy a paid plan to persist this setting across sessions.

+ +

只有在您共享图像之后，别人才能看到这些图像 Buy a paid plan to persist this setting across sessions.