From 4758dcf20ccdf87a64019ba2fd7fb90e649823ee Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=A1=9C=E8=8F=AF?= <huan0016@gmail.com>
Date: Sun, 1 Jan 2023 16:39:31 +0800
Subject: [PATCH] =?UTF-8?q?=E9=A2=84=E8=AE=BE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 pages/index.vue | 44 ++++++++++++++++++++++++++++++++++++--------
 1 file changed, 36 insertions(+), 8 deletions(-)

diff --git a/pages/index.vue b/pages/index.vue
index fe048cf..a13e6cf 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -39,7 +39,7 @@ div.text-white.w-full.flex.bg-dark-900
         @click="views.cardMode = !views.cardMode"
       )
         img(:src="IconStack")
-    div.flex(:class="{'justify-center': !views.cardMode, 'flex-col': views.cardMode}")
+    div.flex(:class="{'justify-center': !views.cardMode, 'flex-col':views.cardMode }")
       div.bg-red-500.relative(style="max-width: min(512px, 100%);")
         img(:src="ImageDemo" class="rounded-md object-contain")
         div.rounded-md.absolute.inset-0.flex.flex-col.items-center.justify-center.transition-opacity.bg-gradient-to-t.to-transparent.opacity-0(
@@ -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>