ui: wip: ratio selector

components/aigc/RatioSelector.vue

@@ -0,0 +1,68 @@
+<script setup lang="ts">
+import type {PropType} from "vue";
+
+const props = defineProps({
+  ratios: {
+    type: Array as PropType<{
+      ratio: string,
+      label?: string,
+      value: string | number
+    }[]>,
+    required: true
+  }
+})
+const emit = defineEmits(['update:modelValue'])
+
+const selected = ref<string | number>('')
+
+const handle_select = (value: string | number) => {
+  selected.value = value
+  emit('update:modelValue', value)
+}
+
+const getRatio = (ratio: string) => {
+  const [w, h] = ratio.split(/[:\/]/).map(Number)
+  return {
+    w: w,
+    h: h
+  }
+}
+
+const getShapeSize = (r: { w: number, h: number }, size: number) => {
+  const ratio = r.w / r.h
+  if (r.w > r.h) {
+    return {
+      w: size,
+      h: size / ratio
+    }
+  } else {
+    return {
+      w: size * ratio,
+      h: size
+    }
+  }
+}
+</script>
+
+<template>
+  <div class="grid grid-cols-4 gap-2">
+    <div v-for="(ratio, k) in ratios" :key="ratio.value" @click="handle_select(ratio.value)"
+         class="w-full aspect-square bg-neutral-200/50 rounded-lg flex flex-col justify-around items-center cursor-pointer"
+         :class="[ratio.value === selected && 'bg-sky-200/50']">
+      <div class="bg-neutral-300/50 text-neutral-900 rounded flex justify-center items-center"
+           :class="[ratio.value === selected && 'bg-sky-300/50']" :style="{
+        width: getShapeSize(getRatio(ratio.ratio), 30).w * 2 + '%',
+        height: getShapeSize(getRatio(ratio.ratio), 30).h * 2 + '%'
+      }">
+        <span class="text-xs font-thin">{{ ratio.ratio }}</span>
+      </div>
+      <span class="text-[10px]">
+        {{ ratio?.label || getRatio(ratio.ratio).w > getRatio(ratio.ratio).h ? '横向' : '纵向' }}
+      </span>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+
+</style>

components/aigc/drawing/OptionBlock.vue

@@ -22,7 +22,7 @@ const props = defineProps({
       <UIcon v-if="icon" :name="icon" class="text-base inline-block"/>
       <div class="flex-1 flex items-center truncate whitespace-nowrap overflow-hidden">
         <span>{{ label }}</span>
-        <UTooltip v-if="comment" :popper="{ arrow: true, placement: 'top' }" :text="comment">
+        <UTooltip v-if="comment" :popper="{ arrow: true, placement: 'right' }" :text="comment">
           <UIcon class="text-base" name="i-tabler-help"/>
         </UTooltip>
       </div>

package.json

@@ -18,7 +18,8 @@
     "nuxt": "^3.10.3",
     "radix-vue": "^1.4.9",
     "vue": "^3.4.19",
-    "vue-router": "^4.3.0"
+    "vue-router": "^4.3.0",
+    "yup": "^1.4.0"
   },
   "devDependencies": {
     "@pinia-plugin-persistedstate/nuxt": "^1.2.0",

pages/aigc/drawing/index.vue

@@ -6,6 +6,9 @@ import OptionBlock from "~/components/aigc/drawing/OptionBlock.vue";
 import ResultBlock from "~/components/aigc/drawing/ResultBlock.vue";
 import {useLoginState} from "~/composables/useLoginState";
 import ModalAuthentication from "~/components/ModalAuthentication.vue";
+import {type InferType, number, object, string} from "yup";
+import type {FormSubmitEvent} from "#ui/types";
+import RatioSelector from "~/components/aigc/RatioSelector.vue";
 
 useHead({
   title: '绘画 | XSH AI'
@@ -17,7 +20,7 @@ const loginState = useLoginState()
 const leftSection = ref<HTMLElement | null>(null)
 const leftHandler = ref<HTMLElement | null>(null)
 
-const handle_mousedown = (e: MouseEvent, min: number = 240, max: number = 400) => {
+const handle_stick_mousedown = (e: MouseEvent, min: number = 240, max: number = 400) => {
   const handler = leftHandler.value
   if (handler) {
     const startX = e.clientX
@@ -42,6 +45,84 @@ const handle_mousedown = (e: MouseEvent, min: number = 240, max: number = 400) =
   }
 }
 
+const defaultRatios = [
+  {
+    ratio: '4:3',
+    label: '横向',
+    value: '1024:768',
+  },
+  {
+    ratio: '3:4',
+    label: '竖向',
+    value: '768:1024',
+  },
+  {
+    ratio: '16:9',
+    label: '横向',
+    value: '1920:1080',
+  },
+  {
+    ratio: '9:16',
+    label: '竖向',
+    value: '1080:1920',
+  },
+  {
+    ratio: '1:1',
+    label: '方形',
+    value: '1024:1024',
+  },
+  {
+    ratio: '3:2',
+    label: '横向',
+    value: '960:640',
+  },
+  {
+    ratio: '2:3',
+    label: '竖向',
+    value: '640:960',
+  },
+  {
+    ratio: '16:10',
+    label: '横向',
+    value: '1920:1200',
+  },
+  {
+    ratio: '10:16',
+    label: '竖向',
+    value: '1200:1920',
+  },
+  {
+    ratio: '21:9',
+    label: '横向',
+    value: '2560:1080',
+  },
+  {
+    ratio: '9:21',
+    label: '竖向',
+    value: '1080:2560',
+  },
+]
+
+const defaultFormSchema = object({
+  prompts: string().required('请输入提示词'),
+  negative_prompts: string().required('请输入负面提示词'),
+  resolution: string().required('请选择分辨率'),
+  style: number().required('请选择风格')
+})
+
+type DefaultFormSchema = InferType<typeof defaultFormSchema>
+
+const defaultFormState = reactive({
+  prompts: '',
+  negative_prompts: '',
+  resolution: '1024:768',
+  style: 100
+})
+
+const onDefaultFormSubmit = (event: FormSubmitEvent<DefaultFormSchema>) => {
+  console.log(event)
+}
+
 const images = [
   image1,
   image2,
@@ -49,11 +130,6 @@ const images = [
   'https://w.wallhaven.cc/full/jx/wallhaven-jxl31y.png',
   'https://w.wallhaven.cc/full/6d/wallhaven-6d7xmx.jpg',
 ]
-const images2 = [
-  image1,
-  image2,
-  image3,
-]
 </script>
 
 <template>
@@ -64,22 +140,46 @@ const images2 = [
       <div ref="leftHandler"
            class="absolute inset-0 left-auto hidden xl:flex flex-col justify-center items-center cursor-ew-resize px-1 group"
            @dblclick="leftSection?.style.setProperty('width', '320px')"
-           @mousedown.prevent="handle_mousedown">
+           @mousedown.prevent="handle_stick_mousedown">
         <span
-            class="w-[1px] h-full bg-neutral-300 dark:bg-neutral-700 group-hover:bg-indigo-300 dark:group-hover:bg-indigo-700 group-hover:w-[3px] transition-all group-hover:delay-500 translate-x-1"></span>
+          class="w-[1px] h-full bg-neutral-300 dark:bg-neutral-700 group-hover:bg-indigo-300 dark:group-hover:bg-indigo-700 group-hover:w-[3px] transition-all group-hover:delay-500 translate-x-1"></span>
       </div>
-      <div class="h-full p-4 flex flex-col gap-2 overflow-y-auto">
+      <div class="h-full flex flex-col overflow-y-auto">
-        <OptionBlock comment="Prompts" icon="i-tabler-article" label="提示词">
+        <UForm :schema="defaultFormSchema" :state="defaultFormState" @submit="onDefaultFormSubmit">
-          <template #actions>
+          <div class="flex flex-col gap-2 p-4 pb-28">
-            <UBadge color="sky" size="xs">按钮A</UBadge>
+            <OptionBlock comment="Prompts" icon="i-tabler-article" label="提示词">
-            <UBadge color="indigo" size="xs">按钮B</UBadge>
+              <template #actions>
-          </template>
+                <!--                <UBadge color="sky" size="xs">按钮A</UBadge>-->
-          <UTextarea :rows="2" autoresize placeholder="请输入英文提示词，每个提示词之间用英文逗号隔开" resize/>
+                <!--                <UBadge color="indigo" size="xs">按钮B</UBadge>-->
-        </OptionBlock>
+              </template>
-        <OptionBlock comment="Negative Prompts" icon="i-tabler-article-off" label="负面提示词">
+              <UFormGroup name="prompts">
-          <UTextarea :rows="2" autoresize placeholder="请输入作品中不要出现的提示词，每个提示词之间用英文逗号隔开"
+                <UTextarea v-model="defaultFormState.prompts" :rows="2" autoresize
-                     resize/>
+                           placeholder="请输入英文提示词，每个提示词之间用英文逗号隔开" resize/>
-        </OptionBlock>
+              </UFormGroup>
+            </OptionBlock>
+            <OptionBlock comment="Negative Prompts" icon="i-tabler-article-off" label="负面提示词">
+              <UFormGroup name="negative_prompts">
+                <UTextarea v-model="defaultFormState.negative_prompts" :rows="2" autoresize
+                           placeholder="请输入作品中不要出现的提示词，每个提示词之间用英文逗号隔开"
+                           resize/>
+              </UFormGroup>
+            </OptionBlock>
+            <OptionBlock icon="i-tabler-article-off" label="图片比例">
+              <UFormGroup name="resolution">
+                <RatioSelector v-model="defaultFormState.resolution" :ratios="defaultRatios" />
+              </UFormGroup>
+            </OptionBlock>
+          </div>
+          <div class="absolute bottom-0 inset-x-0 flex flex-col items-center gap-2
+                      bg-neutral-200 dark:bg-neutral-800 p-4 border-t border-neutral-400
+                      dark:border-neutral-700">
+            <UButton type="submit" color="indigo" size="lg" class="font-bold" block>生成</UButton>
+            <p class="text-xs text-neutral-400 dark:text-neutral-500 font-bold">
+              生成即代表您同意<a href="https://baidu.com" target="_blank"
+                                 class="underline underline-offset-2">用户许可协议</a>
+            </p>
+          </div>
+        </UForm>
       </div>
     </div>
     <div class="flex-1 h-screen flex flex-col gap-4 bg-neutral-100 dark:bg-neutral-900 p-4 pb-20 overflow-y-auto">
@@ -91,7 +191,7 @@ const images2 = [
                  size="xs">登录
         </UButton>
       </div>
-      <ResultBlock v-else :images="images" v-for="i in 12" :key="i"
+      <ResultBlock v-else :images="images" v-for="i in 1" :key="i"
                    title="XX大模型 · 文生图" :meta="{
                           id: 'd166429411dfc6722e54c032cdba97a2',
                           aspect: '9:16',

typings/schema.d.ts

@@ -1,70 +1,101 @@
 interface AuthedRequest {
-    token?: string
+  token?: string
-    user_id?: number
+  user_id?: number
 }
 
 interface BaseResponse<T> {
-    ret: number
+  ret: number
-    msg: string
+  msg: string
-    data: T
+  data: T
+}
+
+// TODO: PagedData schema
+interface PagedData<T> {
+
 }
 
 interface UserSchema {
-    id: number
+  id: number
-    username: string
+  username: string
-    nickname: string
+  nickname: string
-    avatar: string
+  avatar: string
-    sex: 0 | 1 | 2 // 0: 未知, 1: 男, 2: 女
+  sex: 0 | 1 | 2 // 0: 未知, 1: 男, 2: 女
-    email: string
+  email: string
-    mobile: string
+  mobile: string
-    auth_code: 0 | 1 | 2 // 0: Banned, 1: User, 2: Operator
+  auth_code: 0 | 1 | 2 // 0: Banned, 1: User, 2: Operator
 }
 
+// Common request and response schemas
 namespace req {
-    namespace user {
+  namespace user {
-        /**
+    /**
-         * @description 用户登录
+     * @description 用户登录
-         * @param username 用户名或手机号
+     * @param username 用户名或手机号
-         * @param password 密码
+     * @param password 密码
-         */
+     */
-        interface Login {
+    interface Login {
-            username: string
+      username: string
-            password: string
+      password: string
-        }
-
-        interface SmsLogin {
-            mobile: string
-        }
-
-        interface SmsLoginVerify {
-            mobile: string
-            sms_code: string
-        }
     }
+
+    interface SmsLogin {
+      mobile: string
+    }
+
+    interface SmsLoginVerify {
+      mobile: string
+      sms_code: string
+    }
+  }
 }
 
 namespace resp {
-    namespace user {
+  namespace user {
-        interface CheckSession {
+    interface CheckSession {
-            is_login: boolean
+      is_login: boolean
-        }
-
-        interface Login {
-            is_login: boolean
-            token?: string
-            user_id?: number
-        }
-
-        interface Profile {
-            profile: UserSchema
-        }
-        interface SmsLogin {
-            message: string
-        }
-
-        interface SmsLoginVerify {
-            token: string
-            person_id: number
-        }
     }
+
+    interface Login {
+      is_login: boolean
+      token?: string
+      user_id?: number
+    }
+
+    interface Profile {
+      profile: UserSchema
+    }
+
+    interface SmsLogin {
+      message: string
+    }
+
+    interface SmsLoginVerify {
+      token: string
+      person_id: number
+    }
+  }
+}
+
+// Specific modals
+namespace HunYuan {
+  type Resolution = '768:768' | '768:1024' | '1024:768'
+
+  namespace Text2Img {
+    interface req {
+      device_id: string
+      prompt: string
+      negative_prompt: string
+      styles: number
+      resolution: string
+    }
+
+    interface resp {
+      data_id: string | number
+      request_id: string
+      request_image: string
+    }
+  }
+
+  namespace Img2Text {
+  }
 }

yarn.lock

@@ -6445,6 +6445,11 @@ prompts@^2.4.2:
     kleur "^3.0.3"
     sisteransi "^1.0.5"
 
+property-expr@^2.0.5:
+  version "2.0.6"
+  resolved "https://registry.npmmirror.com/property-expr/-/property-expr-2.0.6.tgz#f77bc00d5928a6c748414ad12882e83f24aec1e8"
+  integrity sha512-SVtmxhRE/CGkn3eZY1T6pC8Nln6Fr/lu1mKSgRud0eC73whjGfoAogbn78LkD8aFL0zz3bAFerKSnOl7NlErBA==
+
 protocols@^2.0.0, protocols@^2.0.1:
   version "2.0.1"
   resolved "https://registry.npmmirror.com/protocols/-/protocols-2.0.1.tgz#8f155da3fc0f32644e83c5782c8e8212ccf70a86"
@@ -7403,6 +7408,11 @@ thenify-all@^1.0.0:
   dependencies:
     any-promise "^1.0.0"
 
+tiny-case@^1.0.3:
+  version "1.0.3"
+  resolved "https://registry.npmmirror.com/tiny-case/-/tiny-case-1.0.3.tgz#d980d66bc72b5d5a9ca86fb7c9ffdb9c898ddd03"
+  integrity sha512-Eet/eeMhkO6TX8mnUteS9zgPbUMQa4I6Kkp5ORiBD5476/m+PIRiumP5tmh5ioJpH7k51Kehawy2UDfsnxxY8Q==
+
 tiny-invariant@^1.1.0:
   version "1.3.3"
   resolved "https://registry.npmmirror.com/tiny-invariant/-/tiny-invariant-1.3.3.tgz#46680b7a873a0d5d10005995eb90a70d74d60127"
@@ -7425,6 +7435,11 @@ toidentifier@1.0.1:
   resolved "https://registry.npmmirror.com/toidentifier/-/toidentifier-1.0.1.tgz#3be34321a88a820ed1bd80dfaa33e479fbb8dd35"
   integrity sha512-o5sSPKEkg/DIQNmH43V0/uerLrpzVedkUh8tGNvaeXpfpuwjKenlSox/2O/BTlZUtEe+JG7s5YhEz608PlAHRA==
 
+toposort@^2.0.2:
+  version "2.0.2"
+  resolved "https://registry.npmmirror.com/toposort/-/toposort-2.0.2.tgz#ae21768175d1559d48bef35420b2f4962f09c330"
+  integrity sha512-0a5EOkAUp8D4moMi2W8ZF8jcga7BgZd91O/yabJCFY8az+XSzeGyTKs0Aoo897iV1Nj6guFq8orWDS96z91oGg==
+
 totalist@^3.0.0:
   version "3.0.1"
   resolved "https://registry.npmmirror.com/totalist/-/totalist-3.0.1.tgz#ba3a3d600c915b1a97872348f79c127475f6acf8"
@@ -7471,6 +7486,11 @@ type-fest@^0.21.3:
   resolved "https://registry.npmmirror.com/type-fest/-/type-fest-0.21.3.tgz#d260a24b0198436e133fa26a524a6d65fa3b2e37"
   integrity sha512-t0rzBq87m3fVcduHDUFhKmyyX+9eo6WQjZvf51Ea/M0Q7+T374Jp1aUiyUl0GKxp8M/OETVHSDvmkyPgvX+X2w==
 
+type-fest@^2.19.0:
+  version "2.19.0"
+  resolved "https://registry.npmmirror.com/type-fest/-/type-fest-2.19.0.tgz#88068015bb33036a598b952e55e9311a60fd3a9b"
+  integrity sha512-RAH822pAdBgcNMAfWnCBU3CFZcfZ/i1eZjwFU/dsLKumyuuP3niueg2UAukXYF0E2AAoc82ZSSf9J0WQBinzHA==
+
 type-fest@^3.8.0:
   version "3.13.1"
   resolved "https://registry.npmmirror.com/type-fest/-/type-fest-3.13.1.tgz#bb744c1f0678bea7543a2d1ec24e83e68e8c8706"
@@ -8276,6 +8296,16 @@ yocto-queue@^0.1.0:
   resolved "https://registry.npmmirror.com/yocto-queue/-/yocto-queue-0.1.0.tgz#0294eb3dee05028d31ee1a5fa2c556a6aaf10a1b"
   integrity sha512-rVksvsnNCdJ/ohGc6xgPwyN8eheCxsiLM8mxuE/t/mOVqJewPuO1miLpTHQiRgTKCLexL4MeAFVagts7HmNZ2Q==
 
+yup@^1.4.0:
+  version "1.4.0"
+  resolved "https://registry.npmmirror.com/yup/-/yup-1.4.0.tgz#898dcd660f9fb97c41f181839d3d65c3ee15a43e"
+  integrity sha512-wPbgkJRCqIf+OHyiTBQoJiP5PFuAXaWiJK6AmYkzQAh5/c2K9hzSApBZG5wV9KoKSePF7sAxmNSvh/13YHkFDg==
+  dependencies:
+    property-expr "^2.0.5"
+    tiny-case "^1.0.3"
+    toposort "^2.0.2"
+    type-fest "^2.19.0"
+
 zhead@^2.2.4:
   version "2.2.4"
   resolved "https://registry.npmmirror.com/zhead/-/zhead-2.2.4.tgz#87cd1e2c3d2f465fa9f43b8db23f9716dfe6bed7"