perf: optimize the style of image params (#129)

Synaptrix · Mar 29, 2023 · fefa556 · fefa556
1 parent c73ec6b
commit fefa556
Show file tree

Hide file tree

Showing 7 changed files with 47 additions and 31 deletions.
diff --git a/src/components/Function/components/AddSession.vue b/src/components/Function/components/AddSession.vue
@@ -3,7 +3,7 @@ import type { MessageType } from '@/types'
 
 const sessionStore = useSessionStore()
 const { switchSession } = sessionStore
-const { isThinking, currentSession } = storeToRefs(sessionStore)
+const { isThinking, currentSession, imageParams } = storeToRefs(sessionStore)
 
 const handleSelect = async (value: MessageType | any) => {
   await switchSession()
@@ -12,11 +12,42 @@ const handleSelect = async (value: MessageType | any) => {
 </script>
 
 <template>
+  <a-tooltip content="图像参数" v-if="currentSession?.type === 'image'">
+    <a-popover trigger="click">
+      <a-button type="text" :disabled="isThinking">
+        <template #icon>
+          <icon-tool />
+        </template>
+      </a-button>
+      <template #content>
+        <div class="flex flex-col gap-2">
+          <div class="flex items-center gap-2">
+            <span>尺寸：</span>
+            <a-radio-group v-model="imageParams.size" type="button">
+              <a-radio value="256x256">256</a-radio>
+              <a-radio value="512x512">512</a-radio>
+              <a-radio value="1024x1024">1024</a-radio>
+            </a-radio-group>
+          </div>
+          <div class="flex items-center gap-2">
+            <span>数量：</span>
+            <a-radio-group v-model="imageParams.number" type="button">
+              <a-radio :value="1">1</a-radio>
+              <a-radio :value="2">2</a-radio>
+              <a-radio :value="3">3</a-radio>
+              <a-radio :value="4">4</a-radio>
+            </a-radio-group>
+          </div>
+        </div>
+      </template>
+    </a-popover>
+  </a-tooltip>
+
   <a-tooltip content="新增对话">
     <a-dropdown @select="handleSelect">
       <a-button type="text" :disabled="isThinking">
         <template #icon>
-          <icon-plus-circle></icon-plus-circle>
+          <icon-plus-circle />
         </template>
       </a-button>
       <template #content>

diff --git a/src/components/Input/index.vue b/src/components/Input/index.vue
@@ -5,7 +5,7 @@ const recordStore = useSessionStore()
 const { isThinking, currentSession } = storeToRefs(recordStore)
 
 const roleStore = useRoleStore()
-const { currentRole, isEdit, textAreaValue, imageValue, popoverVisible } =
+const { currentRole, isEdit, textAreaValue, popoverVisible } =
   storeToRefs(roleStore)
 
 const textAreaElement = ref<HTMLTextAreaElement | null>(null)
@@ -74,16 +74,6 @@ onMounted(() => {
         clearable
         @keydown="onKeydown"
       ></a-textarea>
-      <div class="flex w-full" v-if="currentSession?.type === 'image'">
-        <a-select placeholder="选择生成的尺寸" v-model="imageValue.size">
-          <a-option>256x256</a-option>
-          <a-option>512x512</a-option>
-          <a-option>1024x1024</a-option>
-        </a-select>
-        <a-select placeholder="选择生成的数量" v-model="imageValue.number">
-          <a-option v-for="i in 10" :key="i + ''">{{ i }}</a-option>
-        </a-select>
-      </div>
     </div>
   </div>
 </template>

diff --git a/src/components/Session/components/SessionContent.vue b/src/components/Session/components/SessionContent.vue
@@ -83,7 +83,7 @@ const position = computed(() => (props.data.is_ask ? 'left' : 'right'))
         v-for="(img, index) in data.message.content"
         :key="index"
       >
-        <div class="group/image relative w-full">
+        <div class="group/image text-0 relative w-full">
           <img :src="`data:image/png;base64,${img.b64_json}`" class="w-full" />
           <div
             class="transition-300 absolute top-0 grid h-full w-full place-items-center bg-black/50 opacity-0 group-hover/image:opacity-100"

diff --git a/src/components/Session/index.vue b/src/components/Session/index.vue
@@ -19,19 +19,14 @@ const autoScroll = (isSmooth = false) => {
   })
 }
 
-/**
- * 滚轮事件
- * @param event 滚轮事件参数
- */
+// 滚轮事件
 const handleWheel = (event: WheelEvent) => {
   if (event.deltaY > 0) return
 
   isAutoScroll.value = false
 }
 
-/**
- * 滚动事件
- */
+// 滚动事件
 const handleScroll = () => {
   if (!sessionElement.value) return
 

diff --git a/src/stores/role.ts b/src/stores/role.ts
@@ -13,11 +13,6 @@ export const useRoleStore = defineStore(
     const popoverVisible = ref(false)
     // 检索角色列表的输入框值
     const textAreaValue = ref('')
-    // 图片的参数
-    const imageValue = reactive({
-      number: '1',
-      size: '256x256'
-    })
     // 是否有角色正在编辑
     const isEdit = computed(() => roleList.value.some((item) => item.isEdit))
 
@@ -123,7 +118,6 @@ export const useRoleStore = defineStore(
       filterRoleList,
       popoverVisible,
       textAreaValue,
-      imageValue,
       isEdit,
       getRoleList,
       getFilterRoleList,

diff --git a/src/stores/session.ts b/src/stores/session.ts
@@ -18,6 +18,11 @@ export const useSessionStore = defineStore(
     const isThinking = ref(false)
     // 停止请求
     const chatController = ref<AbortController>()
+    // 图片的参数
+    const imageParams = reactive({
+      number: 1,
+      size: '256x256'
+    })
 
     // 获取会话列表
     const getSessionList = async () => {
@@ -188,6 +193,7 @@ export const useSessionStore = defineStore(
       isThinking,
       sessionList,
       chatController,
+      imageParams,
       addSessionData,
       updateSessionData,
       switchSession,
@@ -199,7 +205,7 @@ export const useSessionStore = defineStore(
   },
   {
     persist: {
-      paths: ['currentSession', 'sessionType']
+      paths: ['currentSession']
     }
   }
 )
diff --git a/src/utils/openai.ts b/src/utils/openai.ts
@@ -148,11 +148,11 @@ export const getAiIamge = async (value?: string) => {
       imageData = lastQuestion?.message.content
     } else {
       // 添加正常提问
-      const { imageValue } = useRoleStore()
+      const { imageParams } = useSessionStore()
 
       imageData = {
-        n: parseInt(imageValue.number),
-        size: imageValue.size,
+        n: imageParams.number,
+        size: imageParams.size,
         prompt: value,
         response_format: 'b64_json'
       }