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

pages/aigc/drawing/index.vue

@@ -1,25 +1,30 @@
 <script setup lang="ts">
-import image1 from '~/assets/example/1.jpg';
-import image2 from '~/assets/example/2.jpg';
-import image3 from '~/assets/example/3.jpg';
-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";
+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';
+import {useFetchWrapped} from '~/composables/useFetchWrapped';
+import type {ResultBlockMeta} from '~/components/aigc/drawing';
+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: '横向',
-    value: '1920:1080',
+    label: '通用写实风格',
+    value: 401,
   },
   {
-    ratio: '9:16',
-    label: '竖向',
-    value: '1080:1920',
+    label: '日系动漫',
+    value: 201,
   },
   {
-    ratio: '1:1',
-    label: '方形',
-    value: '1024:1024',
+    label: '科幻风格',
+    value: 114,
   },
   {
-    ratio: '3:2',
-    label: '横向',
-    value: '960:640',
+    label: '怪兽风格',
+    value: 202,
   },
   {
-    ratio: '2:3',
-    label: '竖向',
-    value: '640:960',
+    label: '唯美古风',
+    value: 203,
   },
   {
-    ratio: '16:10',
-    label: '横向',
-    value: '1920:1200',
+    label: '复古动漫',
+    value: 204,
   },
   {
-    ratio: '10:16',
-    label: '竖向',
-    value: '1200:1920',
+    label: '游戏卡通手绘',
+    value: 301,
   },
   {
-    ratio: '21:9',
-    label: '横向',
-    value: '2560:1080',
+    label: '水墨画',
+    value: 101,
   },
   {
-    ratio: '9:21',
-    label: '竖向',
-    value: '1080:2560',
+    label: '概念艺术',
+    value: 102,
+  },
+  {
+    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('请输入提示词'),
-  negative_prompts: string().required('请输入负面提示词'),
+  prompt: 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: '',
-  negative_prompts: '',
+  prompt: '',
+  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,32 +270,35 @@ 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>
-                <!--                <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
+              <UFormGroup name="prompt">
+                <UTextarea v-model="defaultFormState.prompt" :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
+              <UFormGroup name="negative_prompt">
+                <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" />
+                <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>
+            <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,30 +307,51 @@ const images = [
         </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">
-      <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">登录
-        </UButton>
+    <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">
+            登录
+          </UButton>
+        </div>
+        <div v-else-if="history.text2img.length === 0"
+             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-photo-hexagon" class="text-7xl text-neutral-300 dark:text-neutral-700"/>
+          <p class="text-sm text-neutral-500 dark:text-neutral-400">没有记录</p>
+        </div>
+        <ResultBlock v-else v-for="(result, k) in history.text2img"
+                     title="文生图" :images="result.images" :meta="result.meta"
+                     :prompt="result.prompt">
+          <template #header-right>
+            <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>
-      <ResultBlock v-else :images="images" v-for="i in 1" :key="i"
-                   title="XX大模型 · 文生图" :meta="{
-                          id: 'd166429411dfc6722e54c032cdba97a2',
-                          aspect: '9:16',
-                          cost: '1500',
-                          modal: '混元大模型',
-                          ratio: '16:9',
-                          datetime: 1709106270
-                       }"
-                   prompt="这是, 一组, 测试用的, 提示词, 很长, 很长很长, 很长, 很长, 很长, 很长, 很长, 很长, 很长, 很长, 很长, 很长, 很长, 很长, 很长, 很长, 很长, 很长, 很长, 很长, 很长, 很长">
-        <template #header-right>
-          <UButton color="gray" size="xs" icon="i-tabler-trash" variant="ghost"></UButton>
-        </template>
-      </ResultBlock>
-    </div>
+    </ClientOnly>
   </div>
 </template>