fix: image edit invert mask

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

@@ -263,7 +263,7 @@ const GroundImages: React.FC<MessageProps> = forwardRef((props, ref) => {
   );
 
   const handleUpdateImageList = useCallback(
-    (base64List: any) => {
+    (base64List: any[]) => {
       const currentImg = _.get(base64List, '[0]', {});
       const img = _.get(currentImg, 'dataUrl', '');
       handleOnScaleImageSize(currentImg);
@@ -281,13 +281,11 @@ const GroundImages: React.FC<MessageProps> = forwardRef((props, ref) => {
     [handleOnScaleImageSize]
   );
 
-  const handleUpdateMaskList = useCallback(async (base64List: any) => {
-    // setMaskUpload(base64List);
+  const handleUpdateMaskList = useCallback(async (base64List: any[]) => {
     const mask = _.get(base64List, '[0].dataUrl', '');
     const maskColors = await processImage(mask);
     console.log('maskColors:', maskColors);
     imageEditorRef.current?.loadMaskPixs(maskColors || []);
-    // setMask(mask);
   }, []);
 
   const handleClearUploadMask = useCallback(() => {
@@ -322,27 +320,9 @@ const GroundImages: React.FC<MessageProps> = forwardRef((props, ref) => {
           disabled={loading || !imageStatus.isOriginal}
           onSave={handleOnSave}
           clearUploadMask={handleClearUploadMask}
+          handleUpdateImageList={handleUpdateImageList}
+          handleUpdateMaskList={handleUpdateMaskList}
           maskUpload={maskUpload}
-          uploadButton={
-            <>
-              <UploadImg
-                disabled={loading}
-                handleUpdateImgList={handleUpdateImageList}
-                size="middle"
-                accept="image/*"
-              ></UploadImg>
-              <UploadImg
-                title={intl.formatMessage({
-                  id: 'playground.image.mask.upload'
-                })}
-                icon={<IconFont type="icon-mosaic-2"></IconFont>}
-                disabled={loading}
-                handleUpdateImgList={handleUpdateMaskList}
-                size="middle"
-                accept="image/*"
-              ></UploadImg>
-            </>
-          }
         ></CanvasImageEditor>
       );
     }

src/pages/playground/components/model-parameters.tsx

@@ -0,0 +1,106 @@
+import FieldComponent from '@/components/seal-form/field-component';
+import { useIntl } from '@umijs/max';
+import { Form } from 'antd';
+import _ from 'lodash';
+import React, {
+  forwardRef,
+  memo,
+  useCallback,
+  useEffect,
+  useId,
+  useImperativeHandle,
+  useMemo
+} from 'react';
+import { ParamsSchema } from '../config/types';
+
+type ParamsSettingsProps = {
+  ref?: any;
+  style?: React.CSSProperties;
+  onValuesChange?: (changeValues: any, value: Record<string, any>) => void;
+  paramsConfig?: ParamsSchema[];
+  initialValues?: Record<string, any>;
+  extra?: React.ReactNode;
+};
+
+const ParamsSettings: React.FC<ParamsSettingsProps> = forwardRef(
+  ({ onValuesChange, style, paramsConfig, initialValues, extra }, ref) => {
+    const intl = useIntl();
+    const [form] = Form.useForm();
+    const formId = useId();
+
+    useImperativeHandle(ref, () => ({
+      form
+    }));
+
+    useEffect(() => {
+      form.setFieldsValue({
+        ...initialValues
+      });
+    }, [initialValues]);
+
+    const handleOnFinish = (values: any) => {
+      console.log('handleOnFinish', values);
+    };
+
+    const handleOnFinishFailed = (errorInfo: any) => {
+      console.log('handleOnFinishFailed', errorInfo);
+    };
+
+    const handleValuesChange = useCallback(
+      (changedValues: any, allValues: any) => {
+        onValuesChange?.(changedValues, allValues);
+      },
+      [onValuesChange]
+    );
+
+    const renderFields = useMemo(() => {
+      if (!paramsConfig) {
+        return null;
+      }
+      const formValues = form?.getFieldsValue();
+      return paramsConfig?.map((item: ParamsSchema) => {
+        return (
+          <Form.Item name={item.name} rules={item.rules} key={item.name}>
+            <FieldComponent
+              disabled={
+                item.disabledConfig
+                  ? item.disabledConfig?.when?.(formValues)
+                  : item.disabled
+              }
+              description={
+                item.description?.isLocalized
+                  ? intl.formatMessage({ id: item.description.text })
+                  : item.description?.text
+              }
+              onChange={null}
+              {..._.omit(item, [
+                'name',
+                'rules',
+                'disabledConfig',
+                'description'
+              ])}
+            ></FieldComponent>
+          </Form.Item>
+        );
+      });
+    }, [paramsConfig, intl]);
+
+    return (
+      <Form
+        style={{ ...style }}
+        name={formId}
+        form={form}
+        onValuesChange={handleValuesChange}
+        onFinish={handleOnFinish}
+        onFinishFailed={handleOnFinishFailed}
+      >
+        <div>
+          {renderFields}
+          {extra}
+        </div>
+      </Form>
+    );
+  }
+);
+
+export default memo(ParamsSettings);