预设

pages/index.vue

@@ -54,13 +54,21 @@ div.text-white.w-full.flex.bg-dark-900
       p.font-bold Image Dimensions
       p.text-gray-400 width x height of the finished image.
       div.flex.flex-wrap.gap-2
-        button.border.border-2.border-gray-500.rounded-md 512 x 512
-        button.border.border-2.border-gray-500.rounded-md 1024 x 1024
-        button.border.border-2.border-gray-500.rounded-md 640 x 384
-        button.border.border-2.border-gray-500.rounded-md 384 x 640
-        button.border.border-2.border-gray-500.rounded-md 768 x 512
-        button.border.border-2.border-gray-500.rounded-md 512 x 768
+        button.border.border-2.border-gray-500.rounded-md.px-4.py-1(:class="{'border-light-blue-500':views.active, 'text-light-blue-500':views.active}") 512 x 512
+        button.border.border-2.border-gray-500.rounded-md.px-4.py-1(:class="{'border-light-blue-500':!views.active}") 1024 x 1024
+        button.border.border-2.border-gray-500.rounded-md.px-4.py-1(:class="{'border-light-blue-500':!views.active}") 640 x 384
+        button.border.border-2.border-gray-500.rounded-md.px-4.py-1(:class="{'border-light-blue-500':!views.active}") 384 x 640
+        button.border.border-2.border-gray-500.rounded-md.px-4.py-1(:class="{'border-light-blue-500':!views.active}") 768 x 512
+        button.border.border-2.border-gray-500.rounded-md.px-4.py-1(:class="{'border-light-blue-500':!views.active}") 512 x 768
       p Buy a paid plan for any width or height up to 1536px
+    div
+      p.font-bold Prompt Guidnce
+      p.text-gray-400 Higher guidance will make your image closer to your prompt.
+      div ---------------------------
+    div
+      p.font-bold 质量与细节
+      p.text-gray-400 Higher guidance will make your image closer to your prompt.
+      div ---------------------------
 </template>
 
 <script setup>
@@ -70,7 +78,27 @@ import IconStack from 'assets/icon/stack.svg'
 import ImageDemo from 'assets/image/demo.png'
 
 const views = ref({
-  cardMode: true
+  cardMode: true,
+  active: true,
+})
+
+const imageCreate = ref({
+  // 输入:
+  // 输入关键词
+  // 排除关键词
+  // 预训练风格
+  // 图片生成图片
+  // 图像强度
+
+  // 输出:
+  // model
+  // 图片尺寸
+  // 图像指导
+  // 质量与细节
+  // 随机数种子
+  // 采样器
+  // 图片数量
+  // 私有会话
 })
 
 </script>