fix: do not init meta data when switch tab

src/components/icon-font/index.tsx

@@ -2,7 +2,7 @@ import { createFromIconfontCN } from '@ant-design/icons';
 // import './iconfont/iconfont.js';
 
 const IconFont = createFromIconfontCN({
-  scriptUrl: '//at.alicdn.com/t/c/font_4613488_pr3u3llgke.js'
+  scriptUrl: '//at.alicdn.com/t/c/font_4613488_y6wf3nguxjl.js'
 });
 
 export default IconFont;

src/components/image-editor/index.tsx

@@ -78,8 +78,8 @@ const CanvasImageEditor: React.FC<CanvasImageEditorProps> = ({
   const mouseDownState = useRef<boolean>(false);
 
   const disabled = useMemo(() => {
-    return isDisabled || invertMask;
+    return isDisabled || invertMask || !!maskUpload?.length;
-  }, [isDisabled, invertMask]);
+  }, [isDisabled, invertMask, maskUpload]);
 
   const getTransformedPoint = useCallback(
     (offsetX: number, offsetY: number) => {
@@ -465,6 +465,7 @@ const CanvasImageEditor: React.FC<CanvasImageEditorProps> = ({
     clearOverlayCanvas();
     setStrokes([]);
     currentStroke.current = [];
+    saveImage();
     console.log('Resetting strokes', currentStroke.current);
   }, []);
 
@@ -577,8 +578,9 @@ const CanvasImageEditor: React.FC<CanvasImageEditorProps> = ({
           1
         );
 
-        canvas!.width = img.width * baseScale.current;
+        // if need to fit the image to the container, show * baseScale.current
-        canvas!.height = img.height * baseScale.current;
+        canvas!.width = img.width;
+        canvas!.height = img.height;
 
         // fit the image to the container
         autoScale.current = autoScale.current || 1;
@@ -721,6 +723,7 @@ const CanvasImageEditor: React.FC<CanvasImageEditorProps> = ({
   };
 
   const handleOnWheel = (event: any) => {
+    // stop
     handleZoom(event);
     updateCursorSize();
     updateCursorPosOnZoom(event);
@@ -874,7 +877,7 @@ const CanvasImageEditor: React.FC<CanvasImageEditorProps> = ({
                   <Checkbox
                     onChange={handleOnChangeMask}
                     className="flex-center"
-                    value={negativeMaskRef.current}
+                    value={invertMask}
                   >
                     <span className="font-size-12">
                       {intl.formatMessage({

src/components/progress-bar/index.tsx

@@ -7,8 +7,17 @@ const RenderProgress = memo(
     steps?: number;
     download?: boolean;
     label?: React.ReactNode;
+    successPercent?: number;
+    successColor?: string;
   }) => {
-    const { percent, steps = 5, download, label } = props;
+    const {
+      percent,
+      steps = 5,
+      download,
+      label,
+      successPercent,
+      successColor
+    } = props;
 
     const strokeColor = useMemo(() => {
       if (download) {
@@ -24,47 +33,38 @@ const RenderProgress = memo(
       return 'var(--ant-color-error)';
     }, [percent]);
 
+    const renderProgress = useMemo(() => {
+      return (
+        <Progress
+          percentPosition={{ align: 'center', type: 'inner' }}
+          size={[undefined, 16]}
+          format={() => {
+            return (
+              <span
+                style={{
+                  color: '#fff'
+                }}
+              >
+                {percent}%
+              </span>
+            );
+          }}
+          percent={percent}
+          success={{
+            percent: successPercent,
+            strokeColor: 'var(--ant-geekblue-3)'
+          }}
+          strokeColor={strokeColor}
+        ></Progress>
+      );
+    }, [percent, successPercent, strokeColor]);
+
     return (
       <>
         {label ? (
-          <Tooltip title={label}>
+          <Tooltip title={label}>{renderProgress}</Tooltip>
-            <Progress
-              percentPosition={{ align: 'center', type: 'inner' }}
-              size={[undefined, 16]}
-              format={() => {
-                return (
-                  <span
-                    style={{
-                      color: '#fff'
-                    }}
-                  >
-                    {percent}%
-                  </span>
-                );
-              }}
-              percent={percent}
-              strokeColor={strokeColor}
-            ></Progress>
-          </Tooltip>
         ) : (
-          <Progress
+          renderProgress
-            type="line"
-            percentPosition={{ align: 'center', type: 'inner' }}
-            size={[undefined, 16]}
-            format={() => {
-              return (
-                <span
-                  style={{
-                    color: '#fff'
-                  }}
-                >
-                  {percent}%
-                </span>
-              );
-            }}
-            percent={percent}
-            strokeColor={strokeColor}
-          ></Progress>
         )}
       </>
     );

src/components/seal-table/components/header-prefix.tsx

@@ -1,4 +1,5 @@
-import { DownOutlined, RightOutlined } from '@ant-design/icons';
+import IconFont from '@/components/icon-font';
+import { RightOutlined } from '@ant-design/icons';
 import { Button, Checkbox } from 'antd';
 import _ from 'lodash';
 import React from 'react';
@@ -39,7 +40,17 @@ const HeaderPrefix: React.FC<HeaderPrefixProps> = (props) => {
         <span style={{ marginRight: 5 }}>
           {_.isBoolean(expandable) ? (
             <Button type="text" size="small" onClick={handleToggleExpand}>
-              {expandAll ? <DownOutlined /> : <RightOutlined />}
+              {expandAll ? (
+                <IconFont
+                  type="icon-collapse_all"
+                  className="font-size-16"
+                ></IconFont>
+              ) : (
+                <IconFont
+                  type="icon-uncollapse_all"
+                  className="font-size-16"
+                ></IconFont>
+              )}
             </Button>
           ) : (
             expandable

src/components/seal-table/index.tsx

@@ -53,6 +53,9 @@ const SealTable: React.FC<SealTableProps & { pagination: PaginationProps }> = (
   }, [columns, children]);
 
   const expandAll = useMemo(() => {
+    if (expandedRowKeys?.length === 0) {
+      return false;
+    }
     const allKeys = new Set(expandedRowKeys);
     const currentDataKeys = props.dataSource.map((record) => record[rowKey]);
     return currentDataKeys.every((key) => allKeys.has(key));

src/pages/llmodels/config/llama-config.ts

@@ -348,7 +348,7 @@ const options = [
   {
     label: '--rope-scaling',
     value: '--rope-scaling',
-    options: ['none', 'linear', 'yarn']
+    options: ['linear', 'yarn']
   },
   {
     label: '--rope-scale',

src/pages/playground/components/image-edit.tsx

@@ -289,8 +289,8 @@ const GroundImages: React.FC<MessageProps> = forwardRef((props, ref) => {
           isResetNeeded: false
         };
       });
-      setMask(data.mask || null);
+      setMask(data.mask || maskUpload[0]?.dataUrl || null);
-      setImage(data.img || maskUpload[0]?.dataUrl || null);
+      setImage(data.img);
     },
     []
   );
@@ -332,7 +332,7 @@ const GroundImages: React.FC<MessageProps> = forwardRef((props, ref) => {
     return (
       <>
         <UploadImg
-          accept="image/png"
+          accept="image/*"
           drag={true}
           multiple={false}
           handleUpdateImgList={handleUpdateImageList}

src/pages/playground/config/params-config.ts

@@ -689,11 +689,12 @@ export const ChatParamsConfig: ParamsSchema[] = [
       html: false,
       isLocalized: true
     },
-    attrs: {
+    formItemAttrs: {
       normalize(value: string) {
         return value || null;
       }
     },
+    attrs: {},
     rules: [
       {
         required: false

src/pages/playground/hooks/config.ts

@@ -10,6 +10,13 @@ export const LLM_METAKEYS: Record<string, any> = {
   presence_penalty: 'presence_penalty'
 };
 
+export const precisionTwoKeys = [
+  'temperature',
+  'top_p',
+  'frequency_penalty',
+  'presence_penalty'
+];
+
 export const IMG_METAKEYS = [
   'sample_method',
   'sampling_steps',

src/pages/playground/hooks/use-init-meta.ts

@@ -23,7 +23,8 @@ import {
   IMG_METAKEYS,
   advancedFieldsDefaultValus,
   imgInitialValues,
-  openaiCompatibleFieldsDefaultValus
+  openaiCompatibleFieldsDefaultValus,
+  precisionTwoKeys
 } from './config';
 
 interface MessageProps {
@@ -53,16 +54,13 @@ export const useInitLLmMeta = (
   } = options;
   const formRef = useRef<any>(null);
   const [searchParams] = useSearchParams();
-  const defaultModel =
-    searchParams.get('model') ||
-    (isChat ? model ?? modelList?.[0]?.value : model);
   const [modelMeta, setModelMeta] = useState<any>({});
   const [initialValues, setInitialValues] = useState<any>({
     ...defaultValues,
-    model: defaultModel
+    model: ''
   });
   const [parameters, setParams] = useState<any>({
-    model: defaultModel
+    model: ''
   });
   const [paramsConfig, setParamsConfig] =
     useState<ParamsSchema[]>(defaultParamsConfig);
@@ -70,13 +68,20 @@ export const useInitLLmMeta = (
 
   const { initialize: innitializeParams } = useOverlayScroller();
 
+  const defaultModel = useMemo(() => {
+    return (
+      searchParams.get('model') ||
+      (isChat ? model ?? modelList?.[0]?.value : model)
+    );
+  }, [model, modelList, isChat]);
   const extractLLMMeta = (meta: any) => {
+    const towKeys = new Set(precisionTwoKeys);
     const modelMeta = meta || {};
     const modelMetaValue = _.pick(modelMeta, _.keys(metaKeys));
     const obj = Object.entries(metaKeys).reduce((acc: any, [key, value]) => {
       const val = modelMetaValue[key];
-      if (val && _.hasIn(modelMetaValue, key)) {
+      if (_.hasIn(modelMetaValue, key)) {
-        acc[value] = val;
+        acc[value] = towKeys.has(key) ? _.round(val, 2) : val;
       }
       return acc;
     }, {});
@@ -109,10 +114,9 @@ export const useInitLLmMeta = (
 
   const handleOnModelChange = useCallback(
     (val: string) => {
-      if (!val || val === parameters.model) return;
+      if (!val) return;
       const model = modelList.find((item) => item.value === val);
       const { form: initialData, meta } = extractLLMMeta(model?.meta);
-
       setModelMeta(meta || {});
       setInitialValues({
         ...initialData,
@@ -135,7 +139,7 @@ export const useInitLLmMeta = (
       });
       setParamsConfig(config);
     },
-    [modelList, parameters, defaultParamsConfig]
+    [modelList, defaultParamsConfig]
   );
 
   const handleOnValuesChange = useCallback(
@@ -152,10 +156,10 @@ export const useInitLLmMeta = (
   );
 
   useEffect(() => {
-    if (defaultModel) {
+    if (defaultModel && modelList.length) {
       handleOnModelChange(defaultModel);
     }
-  }, [defaultModel, handleOnModelChange]);
+  }, [defaultModel, modelList.length]);
 
   useEffect(() => {
     if (paramsRef.current) {
@@ -185,7 +189,6 @@ export const useInitImageMeta = (props: MessageProps) => {
   const { modelList } = props;
   const form = useRef<any>(null);
   const [searchParams] = useSearchParams();
-  const defaultModel = searchParams.get('model') || modelList?.[0]?.value || '';
   const [modelMeta, setModelMeta] = useState<any>({});
   const [isOpenaiCompatible, setIsOpenaiCompatible] = useState<boolean>(false);
   const [imageSizeOptions, setImageSizeOptions] = React.useState<
@@ -198,7 +201,7 @@ export const useInitImageMeta = (props: MessageProps) => {
   const [initialValues, setInitialValues] = useState<any>({
     ...imgInitialValues,
     ...advancedFieldsDefaultValus,
-    model: defaultModel
+    model: ''
   });
   const [paramsConfig, setParamsConfig] = useState<ParamsSchema[]>([
     ...ImageCountConfig,
@@ -209,9 +212,13 @@ export const useInitImageMeta = (props: MessageProps) => {
   const [parameters, setParams] = useState<any>({
     ...imgInitialValues,
     ...advancedFieldsDefaultValus,
-    model: defaultModel
+    model: ''
   });
 
+  const defaultModel = useMemo(() => {
+    return searchParams.get('model') || modelList?.[0]?.value || '';
+  }, [modelList]);
+
   const cacheFormData = React.useRef<Record<string, any>>({
     ...imgInitialValues,
     ...openaiCompatibleFieldsDefaultValus,
@@ -373,7 +380,7 @@ export const useInitImageMeta = (props: MessageProps) => {
 
   const handleOnModelChange = useCallback(
     (val: string) => {
-      if (!val || val === parameters.model) return;
+      if (!val) return;
       const model = modelList.find((item) => item.value === val);
       const { form: initialData, sizeOptions } = extractIMGMeta(model?.meta);
       const newParamsConfig = generateImageParamsConfig(model, sizeOptions);
@@ -396,7 +403,7 @@ export const useInitImageMeta = (props: MessageProps) => {
       });
       updateCacheFormData(initialData);
     },
-    [modelList, isOpenaiCompatible, parameters.model]
+    [modelList, isOpenaiCompatible]
   );
 
   const handleOnValuesChange = useCallback(
@@ -448,10 +455,10 @@ export const useInitImageMeta = (props: MessageProps) => {
   );
 
   useEffect(() => {
-    if (defaultModel) {
+    if (defaultModel && modelList.length) {
       handleOnModelChange(defaultModel);
     }
-  }, [defaultModel, handleOnModelChange]);
+  }, [defaultModel, modelList.length]);
 
   return {
     extractIMGMeta,

src/pages/resources/components/workers.tsx

@@ -264,6 +264,30 @@ const Workers: React.FC = () => {
     return <div></div>;
   };
 
+  const renderProgressLabels = (data: {
+    total: number;
+    used: number;
+    allocated: number;
+  }) => {
+    const { total, used, allocated } = data;
+    return (
+      <span className="flex-column">
+        <span>
+          {intl.formatMessage({ id: 'resources.table.total' })}:{' '}
+          {convertFileSize(total, 0)}
+        </span>
+        <span>
+          {intl.formatMessage({ id: 'resources.table.used' })}:{' '}
+          {convertFileSize(used, 0)}
+        </span>
+        <span>
+          {intl.formatMessage({ id: 'resources.table.allocated' })}:{' '}
+          {convertFileSize(allocated, 0)}
+        </span>
+      </span>
+    );
+  };
+
   useEffect(() => {
     fetchData();
   }, [queryParams]);
@@ -425,22 +449,11 @@ const Workers: React.FC = () => {
                     record?.status?.memory?.used,
                     record?.status?.memory?.total
                   )}
-                  label={
+                  successPercent={formateUtilazation(
-                    <span className="flex-column">
+                    record?.status?.memory?.allocated,
-                      <span>
+                    record?.status?.memory?.total
-                        {intl.formatMessage({ id: 'resources.table.total' })}:{' '}
+                  )}
-                        {convertFileSize(record?.status?.memory?.total, 0)}
+                  label={renderProgressLabels(record?.status?.memory)}
-                      </span>
-                      <span>
-                        {intl.formatMessage({ id: 'resources.table.used' })}:{' '}
-                        {convertFileSize(
-                          record?.status?.memory?.used ||
-                            record?.status.memory?.allocated,
-                          0
-                        )}
-                      </span>
-                    </span>
-                  }
                 ></ProgressBar>
               );
             }}
@@ -511,27 +524,7 @@ const Workers: React.FC = () => {
                                       0
                                     )
                               }
-                              label={
+                              label={renderProgressLabels(item.memory)}
-                                <span className="flex-column">
-                                  <span>
-                                    {intl.formatMessage({
-                                      id: 'resources.table.total'
-                                    })}
-                                    : {convertFileSize(item.memory?.total, 0)}
-                                  </span>
-                                  <span>
-                                    {intl.formatMessage({
-                                      id: 'resources.table.used'
-                                    })}
-                                    :{' '}
-                                    {convertFileSize(
-                                      item.memory?.used ||
-                                        item.memory?.allocated,
-                                      0
-                                    )}
-                                  </span>
-                                </span>
-                              }
                             ></ProgressBar>
                             {item.memory.is_unified_memory && (
                               <Tooltip