feat: 绘画页面对接腾讯混元文生图

components/aigc/RatioSelector.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import type {PropType} from "vue";
+import type {PropType} from 'vue';
 
 const props = defineProps({
   ratios: {
@@ -8,13 +8,25 @@ const props = defineProps({
       label?: string,
       value: string | number
     }[]>,
-    required: true
+    required: true,
-  }
+  },
+  modelValue: {
+    type: [String, Number],
+    default: '',
+  },
 })
 const emit = defineEmits(['update:modelValue'])
 
 const selected = ref<string | number>('')
 
+onMounted(() => {
+  if (props.modelValue) {
+    handle_select(props.modelValue)
+  } else {
+    handle_select(props.ratios[0].value)
+  }
+})
+
 const handle_select = (value: string | number) => {
   selected.value = value
   emit('update:modelValue', value)
@@ -24,7 +36,7 @@ const getRatio = (ratio: string) => {
   const [w, h] = ratio.split(/[:\/]/).map(Number)
   return {
     w: w,
-    h: h
+    h: h,
   }
 }
 
@@ -33,12 +45,12 @@ const getShapeSize = (r: { w: number, h: number }, size: number) => {
   if (r.w > r.h) {
     return {
       w: size,
-      h: size / ratio
+      h: size / ratio,
     }
   } else {
     return {
       w: size * ratio,
-      h: size
+      h: size,
     }
   }
 }
@@ -47,17 +59,19 @@ const getShapeSize = (r: { w: number, h: number }, size: number) => {
 <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="w-full aspect-square bg-neutral-200/50 dark:bg-neutral-700/50 rounded-lg py-1.5 flex flex-col justify-between items-center cursor-pointer select-none"
-         :class="[ratio.value === selected && 'bg-sky-200/50']">
+         :class="[ratio.value === selected && 'bg-sky-200/50 dark:bg-sky-700/50']">
-      <div class="bg-neutral-300/50 text-neutral-900 rounded flex justify-center items-center"
+      <div class="bg-neutral-300/50 dark:bg-neutral-600/50 text-neutral-600 dark:text-neutral-300 rounded flex justify-center items-center"
-           :class="[ratio.value === selected && 'bg-sky-300/50']" :style="{
+           :class="[ratio.value === selected && 'bg-sky-300/50 dark:bg-sky-600/50']" :style="{
-        width: getShapeSize(getRatio(ratio.ratio), 30).w * 2 + '%',
+        width: getShapeSize(getRatio(ratio.ratio), 30).w * 1.1 + 'px',
-        height: getShapeSize(getRatio(ratio.ratio), 30).h * 2 + '%'
+        height: getShapeSize(getRatio(ratio.ratio), 30).h * 1.1 + 'px'
       }">
-        <span class="text-xs font-thin">{{ ratio.ratio }}</span>
+        <span class="text-xs font-thin font-mono">{{ ratio.ratio }}</span>
       </div>
       <span class="text-[10px]">
-        {{ ratio?.label || getRatio(ratio.ratio).w > getRatio(ratio.ratio).h ? '横向' : '纵向' }}
+        {{
+          ratio?.label || getRatio(ratio.ratio).w === getRatio(ratio.ratio).h ? '正方形' : (getRatio(ratio.ratio).w > getRatio(ratio.ratio).h ? '横向' : '纵向')
+        }}
       </span>
     </div>
   </div>

components/aigc/drawing/ResultBlock.vue

@@ -1,26 +1,26 @@
 <script setup lang="ts">
-import type {ResultBlockMeta} from "~/components/aigc/drawing/index";
+import type {ResultBlockMeta} from '~/components/aigc/drawing/index';
-import type {PropType} from "vue";
+import type {PropType} from 'vue';
-import dayjs from "dayjs";
+import dayjs from 'dayjs';
 
 const props = defineProps({
   icon: {
     type: String,
-    default: 'i-tabler-photo-filled'
+    default: 'i-tabler-photo-filled',
   },
   title: {
-    type: String
+    type: String,
   },
   prompt: {
-    type: String
+    type: String,
   },
   images: {
     type: Array,
-    default: (): Array<string> => []
+    default: (): Array<string> => [],
   },
   meta: {
-    type: Object as PropType<ResultBlockMeta>
+    type: Object as PropType<ResultBlockMeta>,
-  }
+  },
 })
 
 const expand_prompt = ref(false)
@@ -50,7 +50,10 @@ const show_meta = ref(true)
       <UButton color="gray" size="xs" icon="i-tabler-copy" variant="ghost" class="-mt-1"></UButton>
     </div>
     <div v-if="images.length > 0" class="flex items-center overflow-x-auto h-64 gap-2 pb-2 snap-x">
-      <img v-for="(url, i) in images" class="result-image" :src="url" alt="" :key="i">
+      <img v-for="(url, i) in images" class="result-image" :src="useBlobUrlFromB64(url)" alt="AI Generated" :key="i"/>
+    </div>
+    <div v-else class="h-64 aspect-[3/4] mb-4 rounded-lg placeholder-gradient flex justify-center items-center">
+      <UIcon name="i-svg-spinners-tadpole" class="text-3xl" />
     </div>
     <Transition v-if="meta" name="meta">
       <div v-if="show_meta" class="w-full flex items-center gap-2 flex-wrap whitespace-nowrap pb-2 mt-2">
@@ -94,4 +97,8 @@ const show_meta = ref(true)
   @apply snap-start;
   @apply h-full aspect-auto object-cover rounded-lg shadow-md;
 }
+
+.placeholder-gradient {
+  @apply animate-pulse bg-gradient-to-br from-neutral-200 to-neutral-300 dark:from-neutral-700 dark:to-neutral-800;
+}
 </style>

composables/useBlobUrlFromB64.ts

@@ -0,0 +1,20 @@
+export const useBlobUrlFromB64 = (dataurl: string): string => {
+  // data:image/jpeg;base64,/9j/...
+  const arr = dataurl.split(',')
+  if (arr.length < 2) {
+    throw new Error('dataurl is not a valid base64 image')
+  }
+  const mimeMatches = arr[0].match(/:(.*?);/)
+  if (mimeMatches === null) {
+    throw new Error('dataurl is not a valid base64 image')
+  }
+  const mime = mimeMatches[1]  //image/png
+  const b64data = atob(arr[1])
+  let length = b64data.length
+  const u8arr = new Uint8Array(length)
+  while (length--) {
+    u8arr[length] = b64data.charCodeAt(length)
+  }
+  const blob = new Blob([u8arr], {type: mime})
+  return URL.createObjectURL(blob)
+}

composables/useHistory.ts

@@ -0,0 +1,22 @@
+import {string} from 'yup';
+import type {ResultBlockMeta} from '~/components/aigc/drawing';
+
+export interface HistoryItem {
+  fid: string
+  data_id?: string
+  prompt: string
+  meta: ResultBlockMeta
+  images: string[]
+}
+
+export const useHistory = defineStore('aigc_history', () => {
+  const text2img = ref<HistoryItem[]>([])
+
+  return {
+    text2img
+  }
+}, {
+  persist: {
+    storage: persistedState.localStorage
+  }
+})

composables/useLoginState.ts

@@ -59,6 +59,6 @@ export const useLoginState = defineStore('loginState', () => {
     persist: {
         key: 'xsh_assistant_persisted_state',
         storage: persistedState.localStorage,
-        paths: ['token', 'user']
+        paths: ['is_logged_in', 'token', 'user']
     }
 })

layouts/default.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import ModalAuthentication from "~/components/ModalAuthentication.vue";
+import ModalAuthentication from '~/components/ModalAuthentication.vue';
 
 const colorMode = useColorMode()
 const dayjs = useDayjs()
@@ -13,33 +13,33 @@ const isDark = computed({
   },
   set() {
     colorMode.preference = colorMode.value === 'dark' ? 'light' : 'dark'
-  }
+  },
 })
 
 const links = [
   {
     label: '绘画',
     icon: 'i-tabler-brush',
-    to: '/aigc/drawing'
+    to: '/aigc/drawing',
   }, {
     label: '聊天',
     icon: 'i-tabler-message-2',
-    to: '/aigc/chat'
+    to: '/aigc/chat',
   }, {
     label: 'PPT',
     icon: 'i-tabler-file-type-ppt',
-    to: '/aigc/ppt-course-gen'
+    to: '/aigc/ppt-course-gen',
-  }
+  },
 ]
 
 const items = [
   [{
     label: 'support@fenshenzhike.com',
     slot: 'account',
-    disabled: true
+    disabled: true,
   }], [{
     label: '账号资料',
-    icon: 'i-tabler-user-circle'
+    icon: 'i-tabler-user-circle',
   }], [{
     label: '注销登录',
     icon: 'i-tabler-logout',
@@ -47,9 +47,9 @@ const items = [
       title: '退出登录',
       description: `您已成功退出登录账号`,
       color: 'indigo',
-      icon: 'i-tabler-logout-2'
+      icon: 'i-tabler-logout-2',
-    }))
+    })),
-  }]
+  }],
 ]
 
 const open_login_modal = () => {
@@ -78,11 +78,9 @@ const open_login_modal = () => {
           />
           <UButton v-if="!loginState.is_logged_in" label="登录或注册" size="xs" class="font-bold" color="indigo"
                    @click="open_login_modal"/>
-        </ClientOnly>
           <UDropdown v-if="loginState.is_logged_in" :items="items" :popper="{ placement: 'bottom-start' }"
                      :ui="{ item: { disabled: 'cursor-text select-text' } }">
             <UAvatar :src="void 0" icon="i-tabler-user" size="md"/>
-
             <template #account="{ item }">
               <div class="text-left">
                 <p class="flex items-center gap-1">
@@ -96,12 +94,12 @@ const open_login_modal = () => {
                 </p>
               </div>
             </template>
-
             <template #item="{ item }">
               <span class="truncate">{{ item.label }}</span>
               <UIcon :name="item.icon" class="flex-shrink-0 h-4 w-4 text-gray-400 dark:text-gray-500 ms-auto"/>
             </template>
           </UDropdown>
+        </ClientOnly>
       </div>
     </header>
 

pages/aigc/drawing/index.vue

@@ -1,25 +1,30 @@
 <script setup lang="ts">
-import image1 from '~/assets/example/1.jpg';
+import OptionBlock from '~/components/aigc/drawing/OptionBlock.vue';
-import image2 from '~/assets/example/2.jpg';
+import ResultBlock from '~/components/aigc/drawing/ResultBlock.vue';
-import image3 from '~/assets/example/3.jpg';
+import {useLoginState} from '~/composables/useLoginState';
-import OptionBlock from "~/components/aigc/drawing/OptionBlock.vue";
+import ModalAuthentication from '~/components/ModalAuthentication.vue';
-import ResultBlock from "~/components/aigc/drawing/ResultBlock.vue";
+import {type InferType, number, object, string} from 'yup';
-import {useLoginState} from "~/composables/useLoginState";
+import type {FormSubmitEvent} from '#ui/types';
-import ModalAuthentication from "~/components/ModalAuthentication.vue";
+import RatioSelector from '~/components/aigc/RatioSelector.vue';
-import {type InferType, number, object, string} from "yup";
+import {useFetchWrapped} from '~/composables/useFetchWrapped';
-import type {FormSubmitEvent} from "#ui/types";
+import type {ResultBlockMeta} from '~/components/aigc/drawing';
-import RatioSelector from "~/components/aigc/RatioSelector.vue";
+import {useHistory} from '~/composables/useHistory';
 
 useHead({
-  title: '绘画 | XSH AI'
+  title: '绘画 | XSH AI',
 })
 
+const toast = useToast()
 const modal = useModal()
+const dayjs = useDayjs()
+const history = useHistory()
 const loginState = useLoginState()
 
 const leftSection = ref<HTMLElement | null>(null)
 const leftHandler = ref<HTMLElement | null>(null)
 
+const generating = ref(false)
+
 const handle_stick_mousedown = (e: MouseEvent, min: number = 240, max: number = 400) => {
   const handler = leftHandler.value
   if (handler) {
@@ -45,91 +50,208 @@ const handle_stick_mousedown = (e: MouseEvent, min: number = 240, max: number =
   }
 }
 
+// const histories = ref<HistoryItem[]>([])
+
 const defaultRatios = [
+  {
+    ratio: '1:1',
+    value: '768:768',
+  },
   {
     ratio: '4:3',
-    label: '横向',
     value: '1024:768',
   },
   {
     ratio: '3:4',
-    label: '竖向',
     value: '768:1024',
   },
+]
+
+interface StyleItem {
+  label: string
+  value: number
+  avatar?: { src: string }
+}
+
+const defaultStyles: StyleItem[] = [
   {
-    ratio: '16:9',
+    label: '通用写实风格',
-    label: '横向',
+    value: 401,
-    value: '1920:1080',
   },
   {
-    ratio: '9:16',
+    label: '日系动漫',
-    label: '竖向',
+    value: 201,
-    value: '1080:1920',
   },
   {
-    ratio: '1:1',
+    label: '科幻风格',
-    label: '方形',
+    value: 114,
-    value: '1024:1024',
   },
   {
-    ratio: '3:2',
+    label: '怪兽风格',
-    label: '横向',
+    value: 202,
-    value: '960:640',
   },
   {
-    ratio: '2:3',
+    label: '唯美古风',
-    label: '竖向',
+    value: 203,
-    value: '640:960',
   },
   {
-    ratio: '16:10',
+    label: '复古动漫',
-    label: '横向',
+    value: 204,
-    value: '1920:1200',
   },
   {
-    ratio: '10:16',
+    label: '游戏卡通手绘',
-    label: '竖向',
+    value: 301,
-    value: '1200:1920',
   },
   {
-    ratio: '21:9',
+    label: '水墨画',
-    label: '横向',
+    value: 101,
-    value: '2560:1080',
   },
   {
-    ratio: '9:21',
+    label: '概念艺术',
-    label: '竖向',
+    value: 102,
-    value: '1080:2560',
+  },
+  {
+    label: '水彩画',
+    value: 104,
+  },
+  {
+    label: '像素画',
+    value: 105,
+  },
+  {
+    label: '厚涂风格',
+    value: 106,
+  },
+  {
+    label: '插图',
+    value: 107,
+  },
+  {
+    label: '剪纸风格',
+    value: 108,
+  },
+  {
+    label: '印象派',
+    value: 119,
+  },
+  {
+    label: '印象派（莫奈）',
+    value: 109,
+  },
+  {
+    label: '油画',
+    value: 103,
+  },
+  {
+    label: '油画（梵高）',
+    value: 118,
+  },
+  {
+    label: '古典肖像画',
+    value: 111,
+  },
+  {
+    label: '黑白素描画',
+    value: 112,
+  },
+  {
+    label: '赛博朋克',
+    value: 113,
+  },
+  {
+    label: '暗黑风格',
+    value: 115,
+  },
+  {
+    label: '蒸汽波',
+    value: 117,
+  },
+  {
+    label: '2.5D',
+    value: 110,
+  },
+  {
+    label: '3D',
+    value: 116,
   },
 ]
 
 const defaultFormSchema = object({
-  prompts: string().required('请输入提示词'),
+  prompt: string().required('请输入提示词'),
-  negative_prompts: string().required('请输入负面提示词'),
+  negative_prompt: string(),
   resolution: string().required('请选择分辨率'),
-  style: number().required('请选择风格')
+  styles: object<StyleItem>({
+    label: string(),
+    value: number(),
+  }).required('请选择风格'),
 })
 
 type DefaultFormSchema = InferType<typeof defaultFormSchema>
 
 const defaultFormState = reactive({
-  prompts: '',
+  prompt: '',
-  negative_prompts: '',
+  negative_prompt: '',
   resolution: '1024:768',
-  style: 100
+  styles: defaultStyles.find(item => item.value === 401),
 })
 
 const onDefaultFormSubmit = (event: FormSubmitEvent<DefaultFormSchema>) => {
-  console.log(event)
+  if (!loginState.is_logged_in) {
+    modal.open(ModalAuthentication)
+    return
+  }
+  generating.value = true
+  // generate a uuid
+  const fid = Math.random().toString(36).substring(2)
+  const meta: ResultBlockMeta = {
+    cost: '1000',
+    modal: '混元大模型',
+    ratio: event.data.resolution,
+    datetime: dayjs().unix(),
+  }
+  history.text2img.unshift({
+    fid,
+    meta,
+    prompt: event.data.prompt,
+    images: [],
+  })
+  const styleItem = event.data.styles as StyleItem
+  useFetchWrapped<
+    HunYuan.Text2Img.req & AuthedRequest,
+    BaseResponse<HunYuan.Text2Img.resp>
+  >('App.Assistant_HunYuan.TenTextToImg', {
+    token: loginState.token as string,
+    user_id: loginState.user.id,
+    device_id: 'web',
+    ...event.data,
+    styles: styleItem.value,
+  }).then(res => {
+    if (res.ret !== 200) {
+      toast.add({
+        title: '生成失败',
+        description: res.msg || '未知错误',
+        color: 'red',
+        icon: 'i-tabler-circle-x',
+      })
+      return
+    }
+    const record = history.text2img.find(item => item.fid === fid)
+    record!.images = [`data:image/png;base64,${res.data.request_image}`]
+    record!.meta = {
+      ...record!.meta,
+      id: res.data.data_id as string,
+    }
+  }).catch(err => {
+    toast.add({
+      title: '生成失败',
+      description: err.msg || '网络错误',
+      color: 'red',
+      icon: 'i-tabler-circle-x',
+    })
+  }).finally(() => {
+    generating.value = false
+  })
 }
-
-const images = [
-  image1,
-  image2,
-  image3,
-  'https://w.wallhaven.cc/full/jx/wallhaven-jxl31y.png',
-  'https://w.wallhaven.cc/full/6d/wallhaven-6d7xmx.jpg',
-]
 </script>
 
 <template>
@@ -148,22 +270,23 @@ const images = [
         <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>
+              <UFormGroup name="prompt">
-                <!--                <UBadge color="sky" size="xs">按钮A</UBadge>-->
+                <UTextarea v-model="defaultFormState.prompt" :rows="2" autoresize
-                <!--                <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">
+              <UFormGroup name="negative_prompt">
-                <UTextarea v-model="defaultFormState.negative_prompts" :rows="2" autoresize
+                <UTextarea v-model="defaultFormState.negative_prompt" :rows="2" autoresize
                            placeholder="请输入作品中不要出现的提示词，每个提示词之间用英文逗号隔开"
                            resize/>
               </UFormGroup>
             </OptionBlock>
+            <OptionBlock icon="i-tabler-photo-hexagon" label="图片风格">
+              <UFormGroup name="styles">
+                <USelectMenu v-model="defaultFormState.styles" :options="defaultStyles"></USelectMenu>
+              </UFormGroup>
+            </OptionBlock>
             <OptionBlock icon="i-tabler-article-off" label="图片比例">
               <UFormGroup name="resolution">
                 <RatioSelector v-model="defaultFormState.resolution" :ratios="defaultRatios"/>
@@ -173,7 +296,9 @@ const images = [
           <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>
+            <UButton type="submit" color="indigo" size="lg" class="font-bold" :loading="generating" block>
+              {{ generating ? '生成中' : '生成' }}
+            </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>
@@ -182,31 +307,52 @@ const images = [
         </UForm>
       </div>
     </div>
+    <ClientOnly>
       <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">
         <div v-if="!loginState.is_logged_in"
              class="w-full h-full flex flex-col justify-center items-center gap-2 bg-neutral-100 dark:bg-neutral-900">
           <Icon name="i-tabler-user-circle" class="text-7xl text-neutral-300 dark:text-neutral-700"/>
           <p class="text-sm text-neutral-500 dark:text-neutral-400">请登录后使用</p>
           <UButton class="mt-2 font-bold" @click="modal.open(ModalAuthentication)" color="black" variant="solid"
-                 size="xs">登录
+                   size="xs">
+            登录
           </UButton>
         </div>
-      <ResultBlock v-else :images="images" v-for="i in 1" :key="i"
+        <div v-else-if="history.text2img.length === 0"
-                   title="XX大模型 · 文生图" :meta="{
+             class="w-full h-full flex flex-col justify-center items-center gap-2 bg-neutral-100 dark:bg-neutral-900">
-                          id: 'd166429411dfc6722e54c032cdba97a2',
+          <Icon name="i-tabler-photo-hexagon" class="text-7xl text-neutral-300 dark:text-neutral-700"/>
-                          aspect: '9:16',
+          <p class="text-sm text-neutral-500 dark:text-neutral-400">没有记录</p>
-                          cost: '1500',
+        </div>
-                          modal: '混元大模型',
+        <ResultBlock v-else v-for="(result, k) in history.text2img"
-                          ratio: '16:9',
+                     title="文生图" :images="result.images" :meta="result.meta"
-                          datetime: 1709106270
+                     :prompt="result.prompt">
-                       }"
-                   prompt="这是, 一组, 测试用的, 提示词, 很长, 很长很长, 很长, 很长, 很长, 很长, 很长, 很长, 很长, 很长, 很长, 很长, 很长, 很长, 很长, 很长, 很长, 很长, 很长, 很长, 很长, 很长">
           <template #header-right>
-          <UButton color="gray" size="xs" icon="i-tabler-trash" variant="ghost"></UButton>
+            <UPopover overlay>
+              <UButton color="black" size="xs" icon="i-tabler-trash" variant="ghost"></UButton>
+              <template #panel="{close}">
+                <div class="p-4 flex flex-col gap-4">
+                  <h2 class="text-sm">删除后无法恢复，确定删除？</h2>
+                  <div class="flex items-center justify-end gap-2">
+                    <UButton color="gray" size="xs" class="font-bold" @click="close">
+                      取消
+                    </UButton>
+                    <UButton color="red" size="xs" class="font-bold"
+                             @click="() => {history.text2img.splice(k, 1); close();}">
+                      仍然删除
+                    </UButton>
+                  </div>
+                </div>
+              </template>
+            </UPopover>
           </template>
         </ResultBlock>
+        <div class="flex justify-center items-center gap-1 text-neutral-400 dark:text-neutral-600">
+          <UIcon name="i-tabler-info-triangle" />
+          <p class="text-xs font-bold">所有图片均为 AI 生成，服务器不会保存任何图像，数据仅保存在浏览器本地</p>
         </div>
       </div>
+    </ClientOnly>
+  </div>
 </template>
 
 <style scoped>

typings/schema.d.ts

@@ -84,7 +84,7 @@ namespace HunYuan {
     interface req {
       device_id: string
       prompt: string
-      negative_prompt: string
+      negative_prompt?: string
       styles: number
       resolution: string
     }