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

2024-03-15 18:01:32 +08:00
parent 350a7ec626
commit e69774679a
8 changed files with 360 additions and 153 deletions
--- a/components/aigc/RatioSelector.vue
+++ b/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="[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 + '%'
+         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 dark:bg-sky-700/50']">
+      <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 dark:bg-sky-600/50']" :style="{
+        width: getShapeSize(getRatio(ratio.ratio), 30).w * 1.1 + 'px',
+        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>
--- a/components/aigc/drawing/ResultBlock.vue
+++ b/components/aigc/drawing/ResultBlock.vue
@@ -1,26 +1,26 @@
 <script setup lang="ts">
-import type {ResultBlockMeta} from "~/components/aigc/drawing/index";
-import type {PropType} from "vue";
-import dayjs from "dayjs";
+import type {ResultBlockMeta} from '~/components/aigc/drawing/index';
+import type {PropType} from 'vue';
+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>
--- a/composables/useBlobUrlFromB64.ts
+++ b/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)
+}
--- a/composables/useHistory.ts
+++ b/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
+  }
+})
--- a/composables/useLoginState.ts
+++ b/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']
    }
 })
--- a/layouts/default.vue
+++ b/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 = () => {
@@ -70,38 +70,36 @@ const open_login_modal = () => {
      <div class="flex flex-row items-center gap-4">
        <ClientOnly>
          <UButton
-              :icon="isDark ? 'i-line-md-sunny-outline-to-moon-alt-loop-transition' : 'i-line-md-moon-alt-to-sunny-outline-loop-transition'"
-              color="gray"
-              variant="ghost"
-              aria-label="Theme"
-              @click="isDark = !isDark"
+            :icon="isDark ? 'i-line-md-sunny-outline-to-moon-alt-loop-transition' : 'i-line-md-moon-alt-to-sunny-outline-loop-transition'"
+            color="gray"
+            variant="ghost"
+            aria-label="Theme"
+            @click="isDark = !isDark"
          />
          <UButton v-if="!loginState.is_logged_in" label="登录或注册" size="xs" class="font-bold" color="indigo"
                   @click="open_login_modal"/>
+          <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">
+                  已登录为
+                  <UBadge v-if="loginState.user.auth_code === 2" color="amber" size="xs" variant="subtle">
+                    OP
+                  </UBadge>
+                </p>
+                <p class="truncate whitespace-nowrap max-w-40 font-medium text-gray-900 dark:text-white">
+                  {{ loginState.user?.username }}
+                </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>
-        <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">
-                已登录为
-                <UBadge v-if="loginState.user.auth_code === 2" color="amber" size="xs" variant="subtle">
-                  OP
-                </UBadge>
-              </p>
-              <p class="truncate whitespace-nowrap max-w-40 font-medium text-gray-900 dark:text-white">
-                {{ loginState.user?.username }}
-              </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>
      </div>
    </header>

--- a/pages/aigc/drawing/index.vue
+++ b/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>

--- a/typings/schema.d.ts
+++ b/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
    }