ui: wip: ratio selector

2024-03-13 18:07:15 +08:00
parent c80e7a2111
commit 350a7ec626
6 changed files with 308 additions and 78 deletions
--- a/components/aigc/RatioSelector.vue
+++ b/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>
--- a/components/aigc/drawing/OptionBlock.vue
+++ b/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>
--- a/package.json
+++ b/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",
--- a/pages/aigc/drawing/index.vue
+++ b/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">
-        <OptionBlock comment="Prompts" icon="i-tabler-article" label="提示词">
-          <template #actions>
-            <UBadge color="sky" size="xs">按钮A</UBadge>
-            <UBadge color="indigo" size="xs">按钮B</UBadge>
-          </template>
-          <UTextarea :rows="2" autoresize placeholder="请输入英文提示词，每个提示词之间用英文逗号隔开" resize/>
-        </OptionBlock>
-        <OptionBlock comment="Negative Prompts" icon="i-tabler-article-off" label="负面提示词">
-          <UTextarea :rows="2" autoresize placeholder="请输入作品中不要出现的提示词，每个提示词之间用英文逗号隔开"
-                     resize/>
-        </OptionBlock>
+      <div class="h-full flex flex-col overflow-y-auto">
+        <UForm :schema="defaultFormSchema" :state="defaultFormState" @submit="onDefaultFormSubmit">
+          <div class="flex flex-col gap-2 p-4 pb-28">
+            <OptionBlock comment="Prompts" icon="i-tabler-article" label="提示词">
+              <template #actions>
+                <!--                <UBadge color="sky" size="xs">按钮A</UBadge>-->
+                <!--                <UBadge color="indigo" size="xs">按钮B</UBadge>-->
+              </template>
+              <UFormGroup name="prompts">
+                <UTextarea v-model="defaultFormState.prompts" :rows="2" autoresize
+                           placeholder="请输入英文提示词，每个提示词之间用英文逗号隔开" resize/>
+              </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',
--- a/typings/schema.d.ts
+++ b/typings/schema.d.ts
@@ -1,70 +1,101 @@
 interface AuthedRequest {
-    token?: string
-    user_id?: number
+  token?: string
+  user_id?: number
 }

 interface BaseResponse<T> {
-    ret: number
-    msg: string
-    data: T
+  ret: number
+  msg: string
+  data: T
+}
+
+// TODO: PagedData schema
+interface PagedData<T> {
+
 }

 interface UserSchema {
-    id: number
-    username: string
-    nickname: string
-    avatar: string
-    sex: 0 | 1 | 2 // 0: 未知, 1: 男, 2: 女
-    email: string
-    mobile: string
-    auth_code: 0 | 1 | 2 // 0: Banned, 1: User, 2: Operator
+  id: number
+  username: string
+  nickname: string
+  avatar: string
+  sex: 0 | 1 | 2 // 0: 未知, 1: 男, 2: 女
+  email: string
+  mobile: string
+  auth_code: 0 | 1 | 2 // 0: Banned, 1: User, 2: Operator
 }

+// Common request and response schemas
 namespace req {
-    namespace user {
-        /**
-         * @description 用户登录
-         * @param username 用户名或手机号
-         * @param password 密码
-         */
-        interface Login {
-            username: string
-            password: string
-        }
-
-        interface SmsLogin {
-            mobile: string
-        }
-
-        interface SmsLoginVerify {
-            mobile: string
-            sms_code: string
-        }
+  namespace user {
+    /**
+     * @description 用户登录
+     * @param username 用户名或手机号
+     * @param password 密码
+     */
+    interface Login {
+      username: string
+      password: string
    }
+
+    interface SmsLogin {
+      mobile: string
+    }
+
+    interface SmsLoginVerify {
+      mobile: string
+      sms_code: string
+    }
+  }
 }

 namespace resp {
-    namespace user {
-        interface CheckSession {
-            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
-        }
+  namespace user {
+    interface CheckSession {
+      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
+    }
+  }
+}
+
+// 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 {
+  }
+}
--- a/yarn.lock
+++ b/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"