fix: do not edit a image in loading

src/pages/playground/components/ground-images.tsx

@@ -135,10 +135,10 @@ const GroundImages: React.FC<MessageProps> = forwardRef((props, ref) => {
     };
   });
 
-  const paramsConfig = useMemo(() => {
-    const { max_height, max_width } = modelMeta;
+  const getNewImageSizeOptions = useCallback((metaData: any) => {
+    const { max_height, max_width } = metaData || {};
     if (!max_height || !max_width) {
-      return ImageParamsConfig;
+      return imageSizeOptions;
     }
     const newImageSizeOptions = imageSizeOptions.filter((item) => {
       return item.width <= max_width && item.height <= max_height;
@@ -155,6 +155,11 @@ const GroundImages: React.FC<MessageProps> = forwardRef((props, ref) => {
         value: `${max_width}x${max_height}`
       });
     }
+    return newImageSizeOptions;
+  }, []);
+
+  const paramsConfig = useMemo(() => {
+    const newImageSizeOptions = getNewImageSizeOptions(modelMeta);
     let result: ParamsSchema[] = ImageParamsConfig.map((item: ParamsSchema) => {
       if (item.name === 'size') {
         return {

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

@@ -155,10 +155,10 @@ const GroundImages: React.FC<MessageProps> = forwardRef((props, ref) => {
     };
   };
 
-  const paramsConfig = useMemo(() => {
-    const { max_height, max_width } = modelMeta;
+  const getNewImageSizeOptions = useCallback((metaData: any) => {
+    const { max_height, max_width } = metaData || {};
     if (!max_height || !max_width) {
-      return ImageParamsConfig;
+      return imageSizeOptions;
     }
     const newImageSizeOptions = imageSizeOptions.filter((item) => {
       return item.width <= max_width && item.height <= max_height;
@@ -175,6 +175,11 @@ const GroundImages: React.FC<MessageProps> = forwardRef((props, ref) => {
         value: `${max_width}x${max_height}`
       });
     }
+    return newImageSizeOptions;
+  }, []);
+
+  const paramsConfig = useMemo(() => {
+    const newImageSizeOptions = getNewImageSizeOptions(modelMeta);
     let result = ImageParamsConfig.map((item) => {
       if (item.name === 'size') {
         return {
@@ -188,7 +193,7 @@ const GroundImages: React.FC<MessageProps> = forwardRef((props, ref) => {
       result = result.filter((item) => item.name !== 'size');
     }
     return result;
-  }, [modelMeta]);
+  }, [modelMeta, getNewImageSizeOptions]);
 
   const setImageSize = useCallback(() => {
     let size: Record<string, string | number> = {
@@ -680,6 +685,10 @@ const GroundImages: React.FC<MessageProps> = forwardRef((props, ref) => {
   }, [image, loading, imageStatus, handleOnSave, handleUpdateImageList]);
 
   const handleOnImgClick = useCallback((item: any, isOrigin: boolean) => {
+    console.log('item:', item);
+    if (item.progress < 100) {
+      return;
+    }
     setImage(item.dataUrl);
     setImageStatus({
       isOriginal: isOrigin,

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

@@ -19,7 +19,7 @@ export const imageSizeOptions: {
   { label: '768x1024(3:4)', value: '768x1024', width: 768, height: 1024 },
   { label: '1024x768(4:3)', value: '1024x768', width: 1024, height: 768 },
   { label: '1024x576(16:9)', value: '1024x576', width: 1024, height: 576 },
-  { label: '576x1024(9:16)', value: '576xx1024', width: 576, height: 1024 },
+  { label: '576x1024(9:16)', value: '576x1024', width: 576, height: 1024 },
   { label: '1024x1024(1:1)', value: '1024x1024', width: 1024, height: 1024 }
 ];