diff --git a/pages/index.vue b/pages/index.vue index e1f0d15..c3ef8da 100644 --- a/pages/index.vue +++ b/pages/index.vue @@ -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") -
- -

Different numbers result in new variations of your image.

- + 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")
-
@@ -185,13 +187,17 @@ div(class="mt-[60px] grid grid-cols-1 lg:grid-cols-4 xl:grid-cols-5 text-white b

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") 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, // 质量和细节(步数) })