From e02b0ffcc62b154c30fd1ab4f147c3b5498fd4a8 Mon Sep 17 00:00:00 2001
From: HoshinoSuzumi <master@uniiem.com>
Date: Wed, 3 Apr 2024 15:51:51 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E5=AF=B9=E6=8E=A5=E6=98=9F=E7=81=AB?=
 =?UTF-8?q?=E5=A4=A7=E6=A8=A1=E5=9E=8B=20feat:=20=E5=A4=A7=E6=A8=A1?=
 =?UTF-8?q?=E5=9E=8B=E9=80=89=E6=8B=A9=E5=99=A8=20feat:=20=E8=81=8A?=
 =?UTF-8?q?=E5=A4=A9=E9=A1=B5=E9=9D=A2=E9=80=82=E9=85=8D=E6=89=8B=E6=9C=BA?=
 =?UTF-8?q?=E7=AB=AF?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components/aigc/chat/ChatItem.vue |   4 +-
 layouts/default.vue               |   2 +-
 pages/aigc/chat/index.vue         |  90 ++++++-
 pages/aigc/drawing/index.vue      | 416 ------------------------------
 pages/index.vue                   | 407 ++++++++++++++++++++++++++++-
 typings/llm.ts                    |  23 +-
 6 files changed, 497 insertions(+), 445 deletions(-)
 delete mode 100644 pages/aigc/drawing/index.vue

diff --git a/components/aigc/chat/ChatItem.vue b/components/aigc/chat/ChatItem.vue
index a0325dc..58de73a 100644
--- a/components/aigc/chat/ChatItem.vue
+++ b/components/aigc/chat/ChatItem.vue
@@ -34,7 +34,7 @@ const dayjs = useDayjs()
     </div>
     <div
         @click.stop="emit('remove', chatSession)"
-        class="chat-card-remove-btn text-neutral-400 group-hover:opacity-100 group-hover:-translate-x-0.5"
+        class="chat-card-remove-btn text-neutral-400 group-hover:opacity-100 md:group-hover:-translate-x-0.5"
     >
       <UIcon name="i-tabler-trash"/>
     </div>
@@ -60,7 +60,7 @@ const dayjs = useDayjs()
   }
 
   &-remove-btn {
-    @apply absolute top-0.5 right-0 opacity-0;
+    @apply absolute top-0.5 right-0 md:opacity-0;
     @apply transition duration-300 hover:text-red-400;
     @apply cursor-pointer;
   }
diff --git a/layouts/default.vue b/layouts/default.vue
index fc905cf..309c22f 100644
--- a/layouts/default.vue
+++ b/layouts/default.vue
@@ -20,7 +20,7 @@ const links = [
   {
     label: '绘画',
     icon: 'i-tabler-brush',
-    to: '/aigc/drawing',
+    to: '/',
   }, {
     label: '聊天',
     icon: 'i-tabler-message-2',
diff --git a/pages/aigc/chat/index.vue b/pages/aigc/chat/index.vue
index cf4023d..e5593dd 100644
--- a/pages/aigc/chat/index.vue
+++ b/pages/aigc/chat/index.vue
@@ -1,7 +1,14 @@
 <script lang="ts" setup>
 import ChatItem from "~/components/aigc/chat/ChatItem.vue";
 import Message from "~/components/aigc/chat/Message.vue";
-import type {ChatMessage, ChatMessageId, ChatSessionId} from "~/typings/llm";
+import {
+  type ChatMessage,
+  type ChatMessageId,
+  type ChatSession,
+  type ChatSessionId,
+  llmModels,
+  type ModelTag
+} from "~/typings/llm";
 import {useHistory} from "~/composables/useHistory";
 import {uuidv4} from "@uniiem/uuid";
 import {useLLM} from "~/composables/useLLM";
@@ -17,18 +24,22 @@ const historyStore = useHistory()
 const {chatSessions} = storeToRefs(historyStore)
 const {setChatSessions} = historyStore
 
-// const chatSessions = ref<ChatSession[]>([])
 const currentSessionId = ref<ChatSessionId | null>(null)
 const messagesWrapperRef = ref<HTMLDivElement | null>(null)
 
+const showSidebar = ref(false)
 const user_input = ref('')
 const responding = ref(false)
+const currentModel = ref<ModelTag>('spark3_5')
+const modals = reactive({
+  modelSelect: false
+})
 
 /**
  * 获取指定 ID 的会话数据
  * @param chatSessionId
  */
-const getSessionCopyById = (chatSessionId: ChatSessionId) => chatSessions.value.find(s => s.id === chatSessionId);
+const getSessionCopyById = (chatSessionId: ChatSessionId): ChatSession | undefined => chatSessions.value.find(s => s.id === chatSessionId);
 /**
  * 切换当前会话
  * @param chatSessionId 指定会话 ID，不传则切换到列表中第一个会话
@@ -58,6 +69,7 @@ const selectCurrentSessionId = (chatSessionId?: ChatSessionId) => {
     handleClickCreateSession()
   }
   nextTick(() => {
+    showSidebar.value = false
     scrollToMessageListBottom()
   })
 }
@@ -80,6 +92,7 @@ const handleClickCreateSession = () => {
   ])
   // 切换到新的会话
   selectCurrentSessionId(sessionId)
+  modals.modelSelect = true
   nextTick(() => {
     insetMessage({
       id: uuidv4(),
@@ -129,7 +142,7 @@ const handleClickSend = (event: any) => {
     keys: ['content']
   })
   useLLM(trimmedMessages, {
-    modelTag: 'spark3_5'
+    modelTag: currentModel.value
   }).then(reply => {
     modifyMessageContent(assistantReplyId, reply)
   }).catch(err => {
@@ -188,8 +201,11 @@ onMounted(() => {
 
 <template>
   <div class="w-full flex relative">
-    <div class="h-[calc(100vh-4rem)] bg-neutral-100 dark:bg-neutral-900 p-4 flex flex-col w-[300px]
-                shadow-sidebar border-r border-transparent dark:border-neutral-700">
+    <div
+        class="absolute -translate-x-full md:sticky md:translate-x-0 z-10 flex flex-col h-[calc(100vh-4rem)] bg-neutral-100 dark:bg-neutral-900 p-4 w-full md:w-[300px]
+               shadow-sidebar border-r border-transparent dark:border-neutral-700 transition-all duration-300 ease-out"
+        :class="{'translate-x-0': showSidebar}"
+    >
       <div class="flex-1 flex flex-col overflow-auto overflow-x-hidden">
         <!-- list -->
         <div class="flex flex-col gap-3 relative">
@@ -225,8 +241,16 @@ onMounted(() => {
       </div>
     </div>
     <div class="h-[calc(100vh-4rem)] bg-white dark:bg-neutral-900 flex-1 flex flex-col">
-      <div class="w-full p-4 bg-neutral-50 dark:bg-neutral-800/50 border-b dark:border-neutral-700/50">
-        {{ getSessionCopyById(currentSessionId!)?.subject || '新对话' }}
+      <div class="w-full p-4 bg-neutral-50 dark:bg-neutral-800/50 border-b dark:border-neutral-700/50 flex items-center gap-2">
+        <UButton
+            class="md:hidden"
+            color="black"
+            variant="ghost"
+            icon="i-tabler-menu-2"
+            @click="showSidebar = !showSidebar"
+        >
+        </UButton>
+        <h1 class="font-medium">{{ getSessionCopyById(currentSessionId!)?.subject || '新对话' }}</h1>
       </div>
       <div ref="messagesWrapperRef" class="flex-1 flex flex-col overflow-auto overflow-x-hidden">
         <div class="flex flex-col gap-8 px-4 py-8">
@@ -241,7 +265,14 @@ onMounted(() => {
       </div>
       <div
           class="w-full p-4 pt-2 flex flex-col gap-2 bg-neutral-50 dark:bg-neutral-800/50 border-t dark:border-neutral-700/50">
-        <div>action bar</div>
+        <div class="flex items-center gap-2 overflow-auto overflow-y-hidden">
+          <button class="chat-option-btn" @click="modals.modelSelect = true">
+            <Icon name="tabler:robot-face"/>
+            <span class="text-xs">
+              {{ llmModels.find(m => m.tag === currentModel)?.name.toUpperCase() || '模型' }}
+            </span>
+          </button>
+        </div>
         <div class="relative">
           <UTextarea
               v-model="user_input"
@@ -266,6 +297,41 @@ onMounted(() => {
         </div>
       </div>
     </div>
+
+    <!-- Modals -->
+    <UModal v-model="modals.modelSelect">
+      <UCard>
+        <template #header>
+          <h3 class="text-base font-semibold leading-6 text-gray-900 dark:text-white">
+            选择大语言模型
+          </h3>
+        </template>
+
+        <div class="grid grid-cols-3 gap-4">
+          <div
+              v-for="(llm, index) in llmModels"
+              :key="index"
+              @click="currentModel = llm.tag"
+              class="flex flex-col gap-2 justify-center items-center w-full aspect-[1/1] border-2 rounded-xl cursor-pointer transition duration-150 select-none"
+              :class="llm.tag === currentModel ? 'border-primary shadow-xl bg-primary text-white' : 'dark:border-neutral-800 bg-white dark:bg-black shadow-card'"
+          >
+            <Icon :name="llm?.icon" class="text-4xl opacity-80"/>
+            <div class="flex flex-col gap-0.5 items-center">
+              <h1 class="font-bold drop-shadow opacity-90">{{ llm.name || 'unknown' }}</h1>
+              <p class="text-xs opacity-60">{{ llm.description }}</p>
+            </div>
+          </div>
+        </div>
+
+        <template #footer>
+          <div class="flex justify-end items-center" @click="modals.modelSelect = false">
+            <UButton>
+              确定
+            </UButton>
+          </div>
+        </template>
+      </UCard>
+    </UModal>
   </div>
 </template>
 
@@ -293,4 +359,10 @@ onMounted(() => {
 .chat-item-leave-active {
   @apply absolute inset-x-0;
 }
+
+.chat-option-btn {
+  @apply text-lg px-2 py-1.5 flex gap-1 justify-center items-center rounded-lg;
+  @apply bg-white border border-neutral-300 shadow-sm hover:shadow-card;
+  @apply dark:bg-neutral-800 dark:border-neutral-600;
+}
 </style>
\ No newline at end of file
diff --git a/pages/aigc/drawing/index.vue b/pages/aigc/drawing/index.vue
deleted file mode 100644
index d1bf262..0000000
--- a/pages/aigc/drawing/index.vue
+++ /dev/null
@@ -1,416 +0,0 @@
-<script setup lang="ts">
-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';
-import {del, set} from 'idb-keyval';
-import ReferenceFigureSelector from '~/components/aigc/ReferenceFigureSelector.vue';
-
-useHead({
-  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 showSidebar = ref(false)
-
-const generating = ref(false)
-
-const handle_stick_mousedown = (e: MouseEvent, min: number = 240, max: number = 400) => {
-  const handler = leftHandler.value
-  if (handler) {
-    const startX = e.clientX
-    const startWidth = handler.parentElement?.offsetWidth || 0
-    const handle_mousemove = (e: MouseEvent) => {
-      let newWidth = startWidth + e.clientX - startX
-      if (newWidth < min || newWidth > max) {
-        newWidth = Math.min(Math.max(newWidth, min), max)
-      }
-      handler.parentElement!.style.width = `${newWidth}px`
-    }
-    const handle_mouseup = () => {
-      leftSection.value?.classList.add('transition-all')
-      leftHandler.value?.lastElementChild?.classList.remove('bg-indigo-300', 'dark:bg-indigo-700', 'w-[3px]')
-      window.removeEventListener('mousemove', handle_mousemove)
-      window.removeEventListener('mouseup', handle_mouseup)
-    }
-    leftSection.value?.classList.remove('transition-all')
-    leftHandler.value?.lastElementChild?.classList.add('bg-indigo-300', 'dark:bg-indigo-700', 'w-[3px]')
-    window.addEventListener('mousemove', handle_mousemove)
-    window.addEventListener('mouseup', handle_mouseup)
-  }
-}
-
-const defaultRatios = [
-  {
-    ratio: '1:1',
-    value: '768:768',
-  },
-  {
-    ratio: '4:3',
-    value: '1024:768',
-  },
-  {
-    ratio: '3:4',
-    value: '768:1024',
-  },
-]
-
-interface StyleItem {
-  label: string
-  value: number
-  avatar?: { src: string }
-}
-
-const defaultStyles: StyleItem[] = [
-  {
-    label: '通用写实风格',
-    value: 401,
-  },
-  {
-    label: '日系动漫',
-    value: 201,
-  },
-  {
-    label: '科幻风格',
-    value: 114,
-  },
-  {
-    label: '怪兽风格',
-    value: 202,
-  },
-  {
-    label: '唯美古风',
-    value: 203,
-  },
-  {
-    label: '复古动漫',
-    value: 204,
-  },
-  {
-    label: '游戏卡通手绘',
-    value: 301,
-  },
-  {
-    label: '水墨画',
-    value: 101,
-  },
-  {
-    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 img2imgStyles: StyleItem[] = [
-  {
-    label: '水彩画',
-    value: 106,
-  },
-  {
-    label: '2.5D',
-    value: 110,
-  },
-  {
-    label: '日系动漫',
-    value: 201,
-  },
-  {
-    label: '美系动漫',
-    value: 202,
-  },
-  {
-    label: '唯美古风',
-    value: 203,
-  },
-]
-
-const defaultFormSchema = object({
-  prompt: string().required('请输入提示词'),
-  negative_prompt: string(),
-  resolution: string().required('请选择分辨率'),
-  styles: object<StyleItem>({
-    label: string(),
-    value: number(),
-  }).required('请选择风格'),
-  file: string().nullable(),
-})
-
-type DefaultFormSchema = InferType<typeof defaultFormSchema>
-
-const defaultFormState = reactive({
-  prompt: '',
-  negative_prompt: '',
-  resolution: '1024:768',
-  styles: defaultStyles.find(item => item.value === 401),
-  file: null,
-})
-watch(() => defaultFormState.file, (newVal) => {
-  if (newVal) {
-    defaultFormState.styles = img2imgStyles[0]
-  } else {
-    defaultFormState.styles = defaultStyles.find(item => item.value === 401)
-  }
-})
-
-const onDefaultFormSubmit = (event: FormSubmitEvent<DefaultFormSchema>) => {
-  if (!loginState.is_logged_in) {
-    modal.open(ModalAuthentication)
-    return
-  }
-  generating.value = true
-  const styleItem = event.data.styles as StyleItem
-  if (!event.data.file) delete event.data.file
-  // generate a uuid
-  const fid = Math.random().toString(36).substring(2)
-  const meta: ResultBlockMeta = {
-    cost: '1000',
-    modal: '混元大模型',
-    style: styleItem.label,
-    ratio: event.data.resolution,
-    datetime: dayjs().unix(),
-    type: event.data.file ? '智能图生图' : '智能文生图',
-  }
-  history.text2img.unshift({
-    fid,
-    meta,
-    prompt: event.data.prompt,
-  })
-  useFetchWrapped<
-    (HunYuan.Text2Img.req | HunYuan.Img2Img.req) & AuthedRequest,
-    BaseResponse<HunYuan.resp>
-  >(event.data.file ? 'App.Assistant_HunYuan.TenImgToImg' : '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',
-      })
-      history.text2img = history.text2img.filter(item => item.fid !== fid)
-      return
-    }
-    history.text2img = history.text2img.map(item => {
-      if (item.fid === fid) {
-        set(`${item.fid}`, [`data:image/png;base64,${res.data.request_image}`])
-        item.meta = {
-          ...item.meta,
-          id: res.data.data_id as string,
-        }
-      }
-      return item
-    })
-  }).catch(err => {
-    toast.add({
-      title: '生成失败',
-      description: err.msg || '网络错误',
-      color: 'red',
-      icon: 'i-tabler-circle-x',
-    })
-  }).finally(() => {
-    generating.value = false
-  })
-}
-</script>
-
-<template>
-  <div class="w-full flex relative">
-    <div ref="leftSection"
-         class="absolute -translate-x-full md:sticky md:translate-x-0 z-10 md:block h-[calc(100vh-4rem)] bg-neutral-200 dark:bg-neutral-800 transition-all"
-         style="width: 320px" :class="{'translate-x-0': showSidebar}">
-      <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_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>
-      </div>
-      <div
-        class="absolute bottom-28 -right-12 w-12 h-12 z-10 bg-neutral-100 dark:bg-neutral-900 rounded-r-lg shadow-lg flex md:hidden justify-center items-center">
-        <UButton color="black" icon="i-tabler-brush" size="lg" square @click="showSidebar = !showSidebar"></UButton>
-      </div>
-      <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="提示词">
-              <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_prompt">
-                <UTextarea v-model="defaultFormState.negative_prompt" :rows="2" autoresize
-                           placeholder="请输入作品中不要出现的提示词，每个提示词之间用英文逗号隔开"
-                           resize/>
-              </UFormGroup>
-            </OptionBlock>
-            <OptionBlock icon="i-tabler-library-photo" label="参考图片">
-              <UFormGroup name="input_image">
-                <ReferenceFigureSelector
-                  :value="defaultFormState.file"
-                  @update="file => {defaultFormState.file = file}"
-                  text="选择参考图片" text-on-select="已选择参考图"/>
-              </UFormGroup>
-            </OptionBlock>
-            <OptionBlock icon="i-tabler-photo-hexagon" label="图片风格">
-              <UFormGroup name="styles">
-                <USelectMenu v-model="defaultFormState.styles"
-                             :options="defaultFormState.file ? img2imgStyles : defaultStyles"></USelectMenu>
-              </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" :loading="generating" block>
-              {{ generating ? '生成中' : '生成' }}
-            </UButton>
-            <p class="text-xs text-neutral-400 dark:text-neutral-500 font-bold">
-              生成即代表您同意<a href="#" target="_blank"
-                                 class="underline underline-offset-2">用户许可协议</a>
-            </p>
-          </div>
-        </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">
-            登录
-          </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" :fid="result.fid" :meta="result.meta"
-                     :prompt="result.prompt" :key="result.fid"
-                     @use-reference="file => {defaultFormState.file = file}">
-          <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)
-                               del(result.fid)
-                               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>
-
-</style>
\ No newline at end of file
diff --git a/pages/index.vue b/pages/index.vue
index 75a1c2e..d1bf262 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -1,9 +1,414 @@
 <script setup lang="ts">
+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';
+import {del, set} from 'idb-keyval';
+import ReferenceFigureSelector from '~/components/aigc/ReferenceFigureSelector.vue';
 
+useHead({
+  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 showSidebar = ref(false)
+
+const generating = ref(false)
+
+const handle_stick_mousedown = (e: MouseEvent, min: number = 240, max: number = 400) => {
+  const handler = leftHandler.value
+  if (handler) {
+    const startX = e.clientX
+    const startWidth = handler.parentElement?.offsetWidth || 0
+    const handle_mousemove = (e: MouseEvent) => {
+      let newWidth = startWidth + e.clientX - startX
+      if (newWidth < min || newWidth > max) {
+        newWidth = Math.min(Math.max(newWidth, min), max)
+      }
+      handler.parentElement!.style.width = `${newWidth}px`
+    }
+    const handle_mouseup = () => {
+      leftSection.value?.classList.add('transition-all')
+      leftHandler.value?.lastElementChild?.classList.remove('bg-indigo-300', 'dark:bg-indigo-700', 'w-[3px]')
+      window.removeEventListener('mousemove', handle_mousemove)
+      window.removeEventListener('mouseup', handle_mouseup)
+    }
+    leftSection.value?.classList.remove('transition-all')
+    leftHandler.value?.lastElementChild?.classList.add('bg-indigo-300', 'dark:bg-indigo-700', 'w-[3px]')
+    window.addEventListener('mousemove', handle_mousemove)
+    window.addEventListener('mouseup', handle_mouseup)
+  }
+}
+
+const defaultRatios = [
+  {
+    ratio: '1:1',
+    value: '768:768',
+  },
+  {
+    ratio: '4:3',
+    value: '1024:768',
+  },
+  {
+    ratio: '3:4',
+    value: '768:1024',
+  },
+]
+
+interface StyleItem {
+  label: string
+  value: number
+  avatar?: { src: string }
+}
+
+const defaultStyles: StyleItem[] = [
+  {
+    label: '通用写实风格',
+    value: 401,
+  },
+  {
+    label: '日系动漫',
+    value: 201,
+  },
+  {
+    label: '科幻风格',
+    value: 114,
+  },
+  {
+    label: '怪兽风格',
+    value: 202,
+  },
+  {
+    label: '唯美古风',
+    value: 203,
+  },
+  {
+    label: '复古动漫',
+    value: 204,
+  },
+  {
+    label: '游戏卡通手绘',
+    value: 301,
+  },
+  {
+    label: '水墨画',
+    value: 101,
+  },
+  {
+    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 img2imgStyles: StyleItem[] = [
+  {
+    label: '水彩画',
+    value: 106,
+  },
+  {
+    label: '2.5D',
+    value: 110,
+  },
+  {
+    label: '日系动漫',
+    value: 201,
+  },
+  {
+    label: '美系动漫',
+    value: 202,
+  },
+  {
+    label: '唯美古风',
+    value: 203,
+  },
+]
+
+const defaultFormSchema = object({
+  prompt: string().required('请输入提示词'),
+  negative_prompt: string(),
+  resolution: string().required('请选择分辨率'),
+  styles: object<StyleItem>({
+    label: string(),
+    value: number(),
+  }).required('请选择风格'),
+  file: string().nullable(),
+})
+
+type DefaultFormSchema = InferType<typeof defaultFormSchema>
+
+const defaultFormState = reactive({
+  prompt: '',
+  negative_prompt: '',
+  resolution: '1024:768',
+  styles: defaultStyles.find(item => item.value === 401),
+  file: null,
+})
+watch(() => defaultFormState.file, (newVal) => {
+  if (newVal) {
+    defaultFormState.styles = img2imgStyles[0]
+  } else {
+    defaultFormState.styles = defaultStyles.find(item => item.value === 401)
+  }
+})
+
+const onDefaultFormSubmit = (event: FormSubmitEvent<DefaultFormSchema>) => {
+  if (!loginState.is_logged_in) {
+    modal.open(ModalAuthentication)
+    return
+  }
+  generating.value = true
+  const styleItem = event.data.styles as StyleItem
+  if (!event.data.file) delete event.data.file
+  // generate a uuid
+  const fid = Math.random().toString(36).substring(2)
+  const meta: ResultBlockMeta = {
+    cost: '1000',
+    modal: '混元大模型',
+    style: styleItem.label,
+    ratio: event.data.resolution,
+    datetime: dayjs().unix(),
+    type: event.data.file ? '智能图生图' : '智能文生图',
+  }
+  history.text2img.unshift({
+    fid,
+    meta,
+    prompt: event.data.prompt,
+  })
+  useFetchWrapped<
+    (HunYuan.Text2Img.req | HunYuan.Img2Img.req) & AuthedRequest,
+    BaseResponse<HunYuan.resp>
+  >(event.data.file ? 'App.Assistant_HunYuan.TenImgToImg' : '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',
+      })
+      history.text2img = history.text2img.filter(item => item.fid !== fid)
+      return
+    }
+    history.text2img = history.text2img.map(item => {
+      if (item.fid === fid) {
+        set(`${item.fid}`, [`data:image/png;base64,${res.data.request_image}`])
+        item.meta = {
+          ...item.meta,
+          id: res.data.data_id as string,
+        }
+      }
+      return item
+    })
+  }).catch(err => {
+    toast.add({
+      title: '生成失败',
+      description: err.msg || '网络错误',
+      color: 'red',
+      icon: 'i-tabler-circle-x',
+    })
+  }).finally(() => {
+    generating.value = false
+  })
+}
 </script>
 
 <template>
-index
+  <div class="w-full flex relative">
+    <div ref="leftSection"
+         class="absolute -translate-x-full md:sticky md:translate-x-0 z-10 md:block h-[calc(100vh-4rem)] bg-neutral-200 dark:bg-neutral-800 transition-all"
+         style="width: 320px" :class="{'translate-x-0': showSidebar}">
+      <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_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>
+      </div>
+      <div
+        class="absolute bottom-28 -right-12 w-12 h-12 z-10 bg-neutral-100 dark:bg-neutral-900 rounded-r-lg shadow-lg flex md:hidden justify-center items-center">
+        <UButton color="black" icon="i-tabler-brush" size="lg" square @click="showSidebar = !showSidebar"></UButton>
+      </div>
+      <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="提示词">
+              <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_prompt">
+                <UTextarea v-model="defaultFormState.negative_prompt" :rows="2" autoresize
+                           placeholder="请输入作品中不要出现的提示词，每个提示词之间用英文逗号隔开"
+                           resize/>
+              </UFormGroup>
+            </OptionBlock>
+            <OptionBlock icon="i-tabler-library-photo" label="参考图片">
+              <UFormGroup name="input_image">
+                <ReferenceFigureSelector
+                  :value="defaultFormState.file"
+                  @update="file => {defaultFormState.file = file}"
+                  text="选择参考图片" text-on-select="已选择参考图"/>
+              </UFormGroup>
+            </OptionBlock>
+            <OptionBlock icon="i-tabler-photo-hexagon" label="图片风格">
+              <UFormGroup name="styles">
+                <USelectMenu v-model="defaultFormState.styles"
+                             :options="defaultFormState.file ? img2imgStyles : defaultStyles"></USelectMenu>
+              </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" :loading="generating" block>
+              {{ generating ? '生成中' : '生成' }}
+            </UButton>
+            <p class="text-xs text-neutral-400 dark:text-neutral-500 font-bold">
+              生成即代表您同意<a href="#" target="_blank"
+                                 class="underline underline-offset-2">用户许可协议</a>
+            </p>
+          </div>
+        </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">
+            登录
+          </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" :fid="result.fid" :meta="result.meta"
+                     :prompt="result.prompt" :key="result.fid"
+                     @use-reference="file => {defaultFormState.file = file}">
+          <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)
+                               del(result.fid)
+                               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>
diff --git a/typings/llm.ts b/typings/llm.ts
index bb1ac92..b313916 100644
--- a/typings/llm.ts
+++ b/typings/llm.ts
@@ -10,6 +10,7 @@ export interface LLMModal {
   tag: ModelTag
   name: string
   description: string
+  icon?: string
   endpoint: string
 }
 
@@ -27,19 +28,6 @@ export namespace LLMSpark {
         status: number
       }
     }
-    // answer: string
-    // last_data: {
-    //   payload: {
-    //     usage: {
-    //       text: {
-    //         completion_tokens: number
-    //         prompt_tokens: number
-    //         question_tokens: number
-    //         total_tokens: number
-    //       }
-    //     }
-    //   }
-    // }
   }
 }
 
@@ -47,19 +35,22 @@ export const llmModels: Readonly<LLMModal[]> = Object.freeze([
   {
     tag: 'spark1_5',
     name: 'Spark 1.5',
-    description: 'Spark 1.5',
+    description: '科大讯飞星火 1.5',
+    icon: 'tabler:car',
     endpoint: 'App.Assistant_Spark.Chat_1_5'
   },
   {
     tag: 'spark3_0',
     name: 'Spark 3.0',
-    description: 'Spark 3.0',
+    description: '科大讯飞星火 3.0',
+    icon: 'tabler:plane-departure',
     endpoint: 'App.Assistant_Spark.Chat_3_0'
   },
   {
     tag: 'spark3_5',
     name: 'Spark 3.5',
-    description: 'Spark 3.5',
+    description: '科大讯飞星火 3.5',
+    icon: 'tabler:rocket',
     endpoint: 'App.Assistant_Spark.Chat_3_5'
   },
 ])