说明

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