From 91b02bbfd9b8281c165b8a77a06fd3a32873e419 Mon Sep 17 00:00:00 2001
From: archer <545436317@qq.com>
Date: Wed, 3 May 2023 21:42:23 +0800
Subject: [PATCH] feat: img compress;perf: color.prompt response

---
 src/components/Layout/navbarPhone.tsx         |  2 +-
 src/pages/api/chat/chat.ts                    |  1 -
 src/pages/chat/components/SlideBar.tsx        |  2 +-
 src/pages/chat/index.tsx                      |  2 +-
 .../model/detail/components/ModelEditForm.tsx | 19 +++---
 src/service/utils/chat/index.ts               | 16 +++--
 src/utils/file.ts                             | 64 +++++++++++++++++++
 7 files changed, 87 insertions(+), 19 deletions(-)

diff --git a/src/components/Layout/navbarPhone.tsx b/src/components/Layout/navbarPhone.tsx
index 0e8091874..0f7e6806c 100644
--- a/src/components/Layout/navbarPhone.tsx
+++ b/src/components/Layout/navbarPhone.tsx
@@ -39,7 +39,7 @@ const NavbarPhone = ({
         px={7}
       >
         <Box onClick={onOpen}>
-          <MyIcon name="menu" width={'20px'} height={'20px'} color={'blackAlpha.600'}></MyIcon>
+          <MyIcon name="menu" width={'20px'} height={'20px'} color={'blackAlpha.700'}></MyIcon>
         </Box>
       </Flex>
       <Drawer isOpen={isOpen} placement="left" size={'xs'} onClose={onClose}>
diff --git a/src/pages/api/chat/chat.ts b/src/pages/api/chat/chat.ts
index 66bf6a32e..64f8d3f99 100644
--- a/src/pages/api/chat/chat.ts
+++ b/src/pages/api/chat/chat.ts
@@ -83,7 +83,6 @@ export default async function handler(req: NextApiRequest, res: NextApiResponse)
     const temperature = (modelConstantsData.maxTemperature * (model.chat.temperature / 10)).toFixed(
       2
     );
-    // console.log(filterPrompts);
 
     // 发出请求
     const { streamResponse } = await modelServiceToolMap[model.chat.chatModel].chatCompletion({
diff --git a/src/pages/chat/components/SlideBar.tsx b/src/pages/chat/components/SlideBar.tsx
index 470ed339f..495a76e0d 100644
--- a/src/pages/chat/components/SlideBar.tsx
+++ b/src/pages/chat/components/SlideBar.tsx
@@ -99,7 +99,7 @@ const SlideBar = ({
       fetchMyModels();
       fetchCollectionModels();
       loadChatHistory();
-    }, 1500);
+    }, 1000);
   }, [fetchCollectionModels, fetchMyModels, loadChatHistory]);
 
   /**
diff --git a/src/pages/chat/index.tsx b/src/pages/chat/index.tsx
index cdf7b14e1..5d73e2e32 100644
--- a/src/pages/chat/index.tsx
+++ b/src/pages/chat/index.tsx
@@ -432,7 +432,7 @@ const Chat = ({ modelId, chatId }: { modelId: string; chatId: string }) => {
                 name={'menu'}
                 w={'20px'}
                 h={'20px'}
-                fill={useColorModeValue('blackAlpha.700', 'white')}
+                color={useColorModeValue('blackAlpha.700', 'white')}
               />
             </Box>
             <Box>{chatData?.name}</Box>
diff --git a/src/pages/model/detail/components/ModelEditForm.tsx b/src/pages/model/detail/components/ModelEditForm.tsx
index d694fa7e9..bb620dfa3 100644
--- a/src/pages/model/detail/components/ModelEditForm.tsx
+++ b/src/pages/model/detail/components/ModelEditForm.tsx
@@ -26,7 +26,7 @@ import { formatPrice } from '@/utils/user';
 import { useConfirm } from '@/hooks/useConfirm';
 import { useSelectFile } from '@/hooks/useSelectFile';
 import { useToast } from '@/hooks/useToast';
-import { fileToBase64 } from '@/utils/file';
+import { fileToBase64, compressImg } from '@/utils/file';
 
 const ModelEditForm = ({
   formHooks,
@@ -52,17 +52,19 @@ const ModelEditForm = ({
     async (e: File[]) => {
       const file = e[0];
       if (!file) return;
+      try {
+        const base64 = await compressImg({
+          file
+        });
 
-      if (file.size > 100 * 1024) {
-        return toast({
-          title: '头像需小于 100kb',
+        setValue('avatar', base64);
+        setRefresh((state) => !state);
+      } catch (err: any) {
+        toast({
+          title: typeof err === 'string' ? err : '头像选择异常',
           status: 'warning'
         });
       }
-
-      const base64 = (await fileToBase64(file)) as string;
-      setValue('avatar', base64);
-      setRefresh((state) => !state);
     },
     [setValue, toast]
   );
@@ -195,6 +197,7 @@ const ModelEditForm = ({
         <Flex mt={4} alignItems={'center'}>
           <Box mr={4}>知识库搜索</Box>
           <Switch
+            isDisabled={!isOwner}
             isChecked={getValues('chat.useKb')}
             onChange={() => {
               setValue('chat.useKb', !getValues('chat.useKb'));
diff --git a/src/service/utils/chat/index.ts b/src/service/utils/chat/index.ts
index f4020c2fb..96c34ab1f 100644
--- a/src/service/utils/chat/index.ts
+++ b/src/service/utils/chat/index.ts
@@ -142,14 +142,16 @@ export const resStreamResponse = async ({
     prompts
   });
 
-  // push system prompt
-  !stream.destroyed &&
-    systemPrompt &&
-    stream.push(`${SYSTEM_PROMPT_PREFIX}${systemPrompt.replace(/\n/g, '<br/>')}`);
+  setTimeout(() => {
+    // push system prompt
+    !stream.destroyed &&
+      systemPrompt &&
+      stream.push(`${SYSTEM_PROMPT_PREFIX}${systemPrompt.replace(/\n/g, '<br/>')}`);
 
-  // close stream
-  !stream.destroyed && stream.push(null);
-  stream.destroy();
+    // close stream
+    !stream.destroyed && stream.push(null);
+    stream.destroy();
+  }, 100);
 
   return { responseContent, totalTokens, finishMessages };
 };
diff --git a/src/utils/file.ts b/src/utils/file.ts
index a1b61854e..e18e7b887 100644
--- a/src/utils/file.ts
+++ b/src/utils/file.ts
@@ -190,3 +190,67 @@ export const fileToBase64 = (file: File) => {
     reader.onerror = (error) => reject(error);
   });
 };
+
+/**
+ * compress image. response base64
+ * @param maxSize The max size of the compressed image
+ */
+export const compressImg = ({
+  file,
+  maxW = 200,
+  maxH = 200,
+  maxSize = 1024 * 100
+}: {
+  file: File;
+  maxW?: number;
+  maxH?: number;
+  maxSize?: number;
+}) =>
+  new Promise<string>((resolve, reject) => {
+    const reader = new FileReader();
+    reader.readAsDataURL(file);
+    reader.onload = () => {
+      const img = new Image();
+      // @ts-ignore
+      img.src = reader.result;
+      img.onload = () => {
+        let width = img.width;
+        let height = img.height;
+
+        if (width > height) {
+          if (width > maxW) {
+            height *= maxW / width;
+            width = maxW;
+          }
+        } else {
+          if (height > maxH) {
+            width *= maxH / height;
+            height = maxH;
+          }
+        }
+
+        const canvas = document.createElement('canvas');
+        canvas.width = width;
+        canvas.height = height;
+        const ctx = canvas.getContext('2d');
+
+        if (!ctx) {
+          return reject('压缩图片异常');
+        }
+
+        ctx.drawImage(img, 0, 0, width, height);
+        const compressedDataUrl = canvas.toDataURL(file.type, 1);
+        // 移除 canvas 元素
+        canvas.remove();
+
+        if (compressedDataUrl.length > maxSize) {
+          return reject('图片太大了');
+        }
+        resolve(compressedDataUrl);
+      };
+    };
+    reader.onerror = (err) => {
+      console.log(err);
+      reject('压缩图片异常');
+    };
+  });