From bf461f59de552845a8905c353a13e4ed27a0d13a Mon Sep 17 00:00:00 2001
From: jialin <jialinkuang@126.com>
Date: Mon, 13 Jan 2025 19:24:37 +0800
Subject: [PATCH] fix: do not edit a image in loading

---
 .../playground/components/ground-images.tsx     | 11 ++++++++---
 src/pages/playground/components/image-edit.tsx  | 17 +++++++++++++----
 src/pages/playground/config/params-config.ts    |  2 +-
 3 files changed, 22 insertions(+), 8 deletions(-)

diff --git a/src/pages/playground/components/ground-images.tsx b/src/pages/playground/components/ground-images.tsx
index e627d7b9..59007b28 100644
--- a/src/pages/playground/components/ground-images.tsx
+++ b/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 {
diff --git a/src/pages/playground/components/image-edit.tsx b/src/pages/playground/components/image-edit.tsx
index 9aec441c..48ec4d0d 100644
--- a/src/pages/playground/components/image-edit.tsx
+++ b/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,
diff --git a/src/pages/playground/config/params-config.ts b/src/pages/playground/config/params-config.ts
index f64d9edb..c524c98e 100644
--- a/src/pages/playground/config/params-config.ts
+++ b/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 }
 ];