chore: improve image edit

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

@@ -125,6 +125,7 @@ const GroundImages: React.FC<MessageProps> = forwardRef((props, ref) => {
   const [image, setImage] = useState<string>('');
   const [mask, setMask] = useState<string | null>(null);
   const [uploadList, setUploadList] = useState<any[]>([]);
+  const [maskUpload, setMaskUpload] = useState<any[]>([]);
   const [modelMeta, setModelMeta] = useState<any>({});
   const [imageStatus, setImageStatus] = useState<{
     isOriginal: boolean;
@@ -299,15 +300,14 @@ const GroundImages: React.FC<MessageProps> = forwardRef((props, ref) => {
       setMessageId();
       setTokenResult(null);
       setCurrentPrompt(current?.content || '');
-      setUploadList((pre) => {
-        return pre.map((item) => {
-          return {
-            ...item,
-            uid: activeImgUid,
-            dataUrl: image
-          };
-        });
-      });
+      // setUploadList((pre) => {
+      //   return pre.map((item) => {
+      //     return {
+      //       ...item,
+      //       uid: activeImgUid
+      //     };
+      //   });
+      // });
       setRouteCache(routeCachekey['/playground/text-to-image'], true);
 
       const imgSize = _.split(finalParameters.size, 'x').map((item: string) =>
@@ -659,11 +659,12 @@ const GroundImages: React.FC<MessageProps> = forwardRef((props, ref) => {
   const handleUpdateImageList = useCallback((base64List: any) => {
     const currentImg = _.get(base64List, '[0]', {});
     const img = _.get(currentImg, 'dataUrl', '');
+    handleOnScaleImageSize(currentImg);
     setUploadList(base64List);
     setImage(img);
     setActiveImgUid(_.get(base64List, '[0].uid', ''));
     setImageStatus({
-      isOriginal: false,
+      isOriginal: true,
       isResetNeeded: true,
       width: _.get(currentImg, 'width', 512),
       height: _.get(currentImg, 'height', 512)
@@ -671,6 +672,17 @@ const GroundImages: React.FC<MessageProps> = forwardRef((props, ref) => {
     setImageList([]);
   }, []);
 
+  const handleUpdateMaskList = useCallback((base64List: any) => {
+    setMaskUpload(base64List);
+    const mask = _.get(base64List, '[0].dataUrl', '');
+    setMask(mask);
+  }, []);
+
+  const handleClearUploadMask = useCallback(() => {
+    setMaskUpload([]);
+    setMask(null);
+  }, []);
+
   const handleOnSave = useCallback(
     (data: { img: string; mask: string | null }) => {
       setImageStatus((pre) => {
@@ -680,7 +692,7 @@ const GroundImages: React.FC<MessageProps> = forwardRef((props, ref) => {
         };
       });
       setMask(data.mask || null);
-      setImage(data.img);
+      setImage(data.img || maskUpload[0]?.dataUrl || null);
     },
     []
   );
@@ -692,17 +704,29 @@ const GroundImages: React.FC<MessageProps> = forwardRef((props, ref) => {
           imguid={activeImgUid}
           imageStatus={imageStatus}
           imageSrc={image}
-          disabled={loading}
+          disabled={loading || !imageStatus.isOriginal}
           onSave={handleOnSave}
+          clearUploadMask={handleClearUploadMask}
+          maskUpload={maskUpload}
           uploadButton={
-            <Tooltip title="Upload Image">
+            <>
               <UploadImg
                 disabled={loading}
                 handleUpdateImgList={handleUpdateImageList}
                 size="middle"
-                accept="image/png"
+                accept="image/*"
               ></UploadImg>
-            </Tooltip>
+              <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>
       );
@@ -728,7 +752,14 @@ const GroundImages: React.FC<MessageProps> = forwardRef((props, ref) => {
         </UploadImg>
       </>
     );
-  }, [image, loading, imageStatus, handleOnSave, handleUpdateImageList]);
+  }, [
+    image,
+    loading,
+    maskUpload,
+    imageStatus,
+    handleOnSave,
+    handleUpdateImageList
+  ]);
 
   const handleOnImgClick = useCallback((item: any, isOrigin: boolean) => {
     if (item.progress < 100) {
@@ -909,7 +940,11 @@ const GroundImages: React.FC<MessageProps> = forwardRef((props, ref) => {
           overflow: 'hidden'
         }}
       >
-        <div style={{ flex: 1, overflow: 'auto' }} ref={paramsRef}>
+        <div
+          style={{ flex: 1, overflow: 'auto' }}
+          ref={paramsRef}
+          data-overlayscrollbars-initialize
+        >
           <div className="box">
             <DynamicParams
               ref={form}
@@ -961,7 +996,7 @@ const GroundImages: React.FC<MessageProps> = forwardRef((props, ref) => {
             placeholer={intl.formatMessage({
               id: 'playground.input.prompt.holder'
             })}
-            actions={['clear']}
+            actions={[]}
             title={
               <span className="font-600">
                 {intl.formatMessage({ id: 'playground.image.prompt' })}

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

@@ -14,6 +14,8 @@ interface UploadImgProps {
   disabled?: boolean;
   children?: React.ReactNode;
   accept?: string;
+  icon?: React.ReactNode;
+  title?: React.ReactNode;
   handleUpdateImgList: (
     imgList: {
       dataUrl: string;
@@ -30,6 +32,8 @@ const UploadImg: React.FC<UploadImgProps> = ({
   drag = false,
   disabled = false,
   children,
+  icon,
+  title,
   accept = 'image/*',
   size = 'small'
 }) => {
@@ -135,13 +139,15 @@ const UploadImg: React.FC<UploadImgProps> = ({
         >
           {children ?? (
             <Tooltip
-              title={intl.formatMessage({ id: 'playground.img.upload' })}
+              title={
+                title ?? intl.formatMessage({ id: 'playground.img.upload' })
+              }
             >
               <Button
                 disabled={disabled}
                 size={size}
                 type="text"
-                icon={<PictureOutlined />}
+                icon={icon ?? <PictureOutlined />}
               ></Button>
             </Tooltip>
           )}
@@ -158,13 +164,15 @@ const UploadImg: React.FC<UploadImgProps> = ({
         >
           {children ?? (
             <Tooltip
-              title={intl.formatMessage({ id: 'playground.img.upload' })}
+              title={
+                title ?? intl.formatMessage({ id: 'playground.img.upload' })
+              }
             >
               <Button
                 disabled={disabled}
                 size={size}
                 type="text"
-                icon={<PictureOutlined />}
+                icon={icon ?? <PictureOutlined />}
               ></Button>
             </Tooltip>
           )}

src/pages/playground/config/index.ts

@@ -166,3 +166,11 @@ export const extractErrorMessage = (result: any) => {
     ''
   );
 };
+
+export const scaleImageSize = (size: { width: number; height: number }) => {
+  const { width, height } = size;
+  const scale = 64;
+  const newWidth = Math.floor(width / scale) * scale;
+  const newHeight = Math.floor(height / scale) * scale;
+  return { width: newWidth, height: newHeight };
+};