chore: update antd

package.json

@@ -10,9 +10,12 @@
     "setup": "max setup",
     "start": "npm run dev"
   },
+  "resolutions": {
+    "immer": "^9.0.6"
+  },
   "dependencies": {
-    "@ant-design/icons": "^5.3.7",
+    "@ant-design/icons": "^5.5.1",
-    "@ant-design/pro-components": "^2.7.1",
+    "@ant-design/pro-components": "^2.7.18",
     "@huggingface/gguf": "^0.1.7",
     "@huggingface/hub": "^0.15.1",
     "@huggingface/tasks": "^0.11.6",
@@ -23,7 +26,7 @@
     "@xterm/addon-fit": "^0.10.0",
     "@xterm/xterm": "^5.5.0",
     "ansi-to-html": "^0.7.2",
-    "antd": "^5.18.3",
+    "antd": "^5.20.6",
     "antd-style": "^3.6.2",
     "axios": "^1.7.2",
     "classnames": "^2.5.1",

src/pages/llmodels/components/hf-model-item.tsx

@@ -64,27 +64,16 @@ const HFModelItem: React.FC<HFModelItemProps> = (props) => {
       <div className="info">
         {SUPPORTEDSOURCE.includes(props.source || '') ? (
           <div className="info-item">
-            {/* {props.task && (
-              <Tag
-                className="tag-item"
-                color="gold"
-                style={{
-                  marginRight: 0
-                }}
-              >
-                <span style={{ opacity: 0.65 }}>{props.task}</span>
-              </Tag>
-            )} */}
             <span>
               {dayjs().to(
                 dayjs(dayjs(props.updatedAt).format('YYYY-MM-DD HH:mm:ss'))
               )}
             </span>
-            <span>
+            <span className="flex-center">
               <HeartOutlined className="m-r-5" />
               {props.likes}
             </span>
-            <span>
+            <span className="flex-center">
               <DownloadOutlined className="m-r-5" />
               {formatNumber(props.downloads)}
             </span>

src/pages/playground/components/multiple-chat/model-item.tsx

@@ -14,6 +14,7 @@ import _ from 'lodash';
 import 'overlayscrollbars/overlayscrollbars.css';
 import React, {
   forwardRef,
+  useCallback,
   useContext,
   useEffect,
   useImperativeHandle,
@@ -222,25 +223,25 @@ const ModelItem: React.FC<ModelItemProps> = forwardRef(
       }
     };
 
-    const handleOnValuesChange = (
+    const handleOnValuesChange = useCallback(
-      changeValues: any,
+      (changeValues: any, allValues: Record<string, any>) => {
-      allValues: Record<string, any>
+        if (isApplyToAllModels.current) {
-    ) => {
+          setParams({
-      if (isApplyToAllModels.current) {
+            ...params,
-        setParams({
+            ...allValues
-          ...params,
+          });
-          ...allValues
+          setGlobalParams({
-        });
+            ...allValues
-        setGlobalParams({
+          });
-          ...allValues
+        } else {
-        });
+          setParams({
-      } else {
+            ...params,
-        setParams({
+            ...changeValues
-          ...params,
+          });
-          ...changeValues
+        }
-        });
+      },
-      }
+      [params, isApplyToAllModels.current]
-    };
+    );
 
     const handleClearMessage = () => {
       setMessageList([]);

src/pages/playground/components/params-settings.tsx

@@ -6,7 +6,7 @@ import { InfoCircleOutlined } from '@ant-design/icons';
 import { useIntl } from '@umijs/max';
 import { Form, InputNumber, Slider, Tooltip } from 'antd';
 import _ from 'lodash';
-import { useEffect, useId, useState } from 'react';
+import { memo, useCallback, useEffect, useId } from 'react';
 import CustomLabelStyles from '../style/custom-label.less';
 
 type ParamsSettingsFormProps = {
@@ -39,7 +39,6 @@ const ParamsSettings: React.FC<ParamsSettingsProps> = ({
   showModelSelector = true
 }) => {
   const intl = useIntl();
-  const [ModelList, setModelList] = useState([]);
   const initialValues = {
     seed: null,
     stop: null,
@@ -86,7 +85,7 @@ const ParamsSettings: React.FC<ParamsSettingsProps> = ({
     setParams?.(allValues);
     onValuesChange?.(changedValues, allValues);
   };
-  const handleFieldValueChange = (val: any, field: string) => {
+  const handleFieldValueChange = useCallback((val: any, field: string) => {
     const values = form.getFieldsValue();
     form.setFieldsValue({
       ...values,
@@ -103,7 +102,7 @@ const ParamsSettings: React.FC<ParamsSettingsProps> = ({
         [field]: val
       }
     );
-  };
+  }, []);
 
   const handleResetParams = () => {
     form.setFieldsValue(initialValues);
@@ -177,7 +176,7 @@ const ParamsSettings: React.FC<ParamsSettingsProps> = ({
                 }
               ]}
             >
-              <SealSelect showSearch options={modelList}></SealSelect>
+              <SealSelect showSearch={true} options={modelList}></SealSelect>
             </Form.Item>
           </>
         )}
@@ -296,4 +295,4 @@ const ParamsSettings: React.FC<ParamsSettingsProps> = ({
   );
 };
 
-export default ParamsSettings;
+export default memo(ParamsSettings);

src/pages/playground/components/upload-img.tsx

@@ -16,14 +16,14 @@ const UploadImg: React.FC<UploadImgProps> = ({ handleUpdateImgList }) => {
   const intl = useIntl();
   const uploadRef = useRef<any>(null);
 
-  const getBase64 = (file: RcFile): Promise<string> => {
+  const getBase64 = useCallback((file: RcFile): Promise<string> => {
     return new Promise((resolve, reject) => {
       const reader = new FileReader();
       reader.readAsDataURL(file);
       reader.onload = () => resolve(reader.result as string);
       reader.onerror = (error) => reject(error);
     });
-  };
+  }, []);
 
   const debouncedUpdate = useCallback(
     debounce((base64List: { dataUrl: string; uid: number | string }[]) => {
@@ -32,32 +32,35 @@ const UploadImg: React.FC<UploadImgProps> = ({ handleUpdateImgList }) => {
     [handleUpdateImgList, intl]
   );
 
-  const handleChange = async (info: any) => {
+  const handleChange = useCallback(
-    const { fileList } = info;
+    async (info: any) => {
+      const { fileList } = info;
 
-    const newFileList = await Promise.all(
+      const newFileList = await Promise.all(
-      fileList.map(async (item: UploadFile) => {
+        fileList.map(async (item: UploadFile) => {
-        if (item.originFileObj && !item.url) {
+          if (item.originFileObj && !item.url) {
-          const base64 = await getBase64(item.originFileObj as RcFile);
+            const base64 = await getBase64(item.originFileObj as RcFile);
-          item.url = base64;
+            item.url = base64;
-        }
+          }
-        return item;
+          return item;
-      })
+        })
-    );
+      );
 
-    if (newFileList.length > 0) {
+      if (newFileList.length > 0) {
-      const base64List = newFileList
+        const base64List = newFileList
-        .filter((sitem) => sitem.url)
+          .filter((sitem) => sitem.url)
-        .map((item: UploadFile) => {
+          .map((item: UploadFile) => {
-          return {
+            return {
-            dataUrl: item.url as string,
+              dataUrl: item.url as string,
-            uid: item.uid
+              uid: item.uid
-          };
+            };
-        });
+          });
 
-      debouncedUpdate(base64List);
+        debouncedUpdate(base64List);
-    }
+      }
-  };
+    },
+    [debouncedUpdate, getBase64]
+  );
 
   return (
     <>