fix: add cancel for generate text

src/components/auto-image/single-image.tsx

@@ -44,15 +44,52 @@ const SingleImage: React.FC<SingleImageProps> = (props) => {
     width: width,
     height: height
   });
+  const [originSize, setOriginSize] = React.useState({
+    width: width,
+    height: height
+  });
 
   const thumImgWrapStyle = React.useMemo(() => {
     return loading ? { width: '100%', height: '100%' } : {};
   }, [loading, imgSize]);
 
+  const handleResize = React.useCallback(
+    async (size: { width: number; height: number }) => {
+      if (!autoSize || !dataUrl) return;
+
+      const { width: containerWidth, height: containerHeight } = size;
+      const { width: originalWidth, height: originalHeight } = props;
+
+      console.log('size:', size, originalWidth, originalHeight);
+
+      if (!originalWidth || !originalHeight) return;
+
+      const imageAspectRatio = originalWidth / originalHeight;
+      const containerAspectRatio = containerWidth / containerHeight;
+
+      let newWidth, newHeight;
+
+      if (containerAspectRatio > imageAspectRatio) {
+        newHeight = containerHeight;
+        newWidth = containerHeight * imageAspectRatio;
+      } else {
+        newWidth = containerWidth;
+        newHeight = containerWidth / imageAspectRatio;
+      }
+
+      setImgSize({
+        width: newWidth,
+        height: newHeight
+      });
+    },
+    [autoSize, dataUrl, props]
+  );
+
   const handleOnLoad = React.useCallback(async () => {
     if (!autoBgColor) {
       return;
     }
+
     const img = imgWrapper.current?.querySelector('img');
     if (!img) {
       return;
@@ -76,37 +113,22 @@ const SingleImage: React.FC<SingleImageProps> = (props) => {
         backgroundImage: `linear-gradient(135deg, ${startColor}, ${stopColor})`
       });
     });
-  }, []);
+  }, [autoBgColor]);
 
-  const handleResize = React.useCallback(
-    (size: { width: number; height: number }) => {
-      if (!autoSize) return;
-
-      const { width: containerWidth, height: containerHeight } = size;
-      const { width: originalWidth, height: originalHeight } = props;
-
-      if (!originalWidth || !originalHeight) return;
-
-      const imageAspectRatio = originalWidth / originalHeight;
-      const containerAspectRatio = containerWidth / containerHeight;
-
-      let newWidth, newHeight;
-
-      if (containerAspectRatio > imageAspectRatio) {
-        newHeight = containerHeight;
-        newWidth = containerHeight * imageAspectRatio;
-      } else {
-        newWidth = containerWidth;
-        newHeight = containerWidth / imageAspectRatio;
-      }
-
-      setImgSize({
-        width: newWidth,
-        height: newHeight
-      });
-    },
-    [autoSize, props]
-  );
+  const getImgSize = (
+    url: string
+  ): Promise<{ width: number; height: number }> => {
+    return new Promise((resolve) => {
+      const img = new Image();
+      img.onload = () => {
+        resolve({ width: img.width, height: img.height });
+      };
+      img.onerror = () => {
+        resolve({ width: 0, height: 0 });
+      };
+      img.src = url;
+    });
+  };
 
   return (
     <ResizeObserver onResize={handleResize}>

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

@@ -133,28 +133,18 @@ const GroundImages: React.FC<MessageProps> = forwardRef((props, ref) => {
 
   const setImageSize = useCallback(() => {
     let size: Record<string, string | number> = {
-      with: 256,
-      height: 256,
       span: 12
     };
     if (parameters.n === 1) {
-      size.width = '100%';
-      size.height = '100%';
       size.span = 24;
     }
     if (parameters.n === 2) {
-      size.width = '50%';
-      size.height = 256;
       size.span = 12;
     }
     if (parameters.n === 3) {
-      size.width = '33%';
-      size.height = 256;
       size.span = 12;
     }
     if (parameters.n === 4) {
-      size.width = '25%';
-      size.height = 256;
       size.span = 12;
     }
     return size;
@@ -194,6 +184,7 @@ const GroundImages: React.FC<MessageProps> = forwardRef((props, ref) => {
       setMessageId();
       setTokenResult(null);
       setCurrentPrompt(current?.content || '');
+      const imgSize = _.split(finalParameters.size, 'x');
 
       let newImageList = Array(parameters.n)
         .fill({})
@@ -202,8 +193,8 @@ const GroundImages: React.FC<MessageProps> = forwardRef((props, ref) => {
             dataUrl: 'data:image/png;base64,',
             ...size,
             progress: 0,
-            height: '100%',
-            width: '100%',
+            height: imgSize[1],
+            width: imgSize[0],
             loading: true,
             uid: index
           };
@@ -245,7 +236,6 @@ const GroundImages: React.FC<MessageProps> = forwardRef((props, ref) => {
       }
 
       const { reader, decoder } = result;
-      const imgSize = _.split(finalParameters.size, 'x');
 
       await readStreamData(reader, decoder, (chunk: any) => {
         if (chunk?.error) {

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

@@ -319,13 +319,28 @@ const GroundLeft: React.FC<MessageProps> = forwardRef((props, ref) => {
                       id: 'playground.audio.button.generate'
                     })}
                   >
-                    <Button
-                      disabled={!audioData}
-                      type="primary"
-                      shape="circle"
-                      onClick={handleOnGenerate}
-                      icon={<SendOutlined></SendOutlined>}
-                    ></Button>
+                    {loading ? (
+                      <Button
+                        disabled={!audioData}
+                        type="primary"
+                        shape="circle"
+                        onClick={handleStopConversation}
+                        icon={
+                          <IconFont
+                            type="icon-stop1"
+                            className="font-size-14"
+                          ></IconFont>
+                        }
+                      ></Button>
+                    ) : (
+                      <Button
+                        disabled={!audioData}
+                        type="primary"
+                        shape="circle"
+                        onClick={handleOnGenerate}
+                        icon={<SendOutlined></SendOutlined>}
+                      ></Button>
+                    )}
                   </Tooltip>
                 </div>
               </div>