fix: download image size is incorrect

Author: hibig

overrides.less

@@ -1 +1,28 @@
 // only for third party libraries styles
+
+.simplebar-scrollbar.simplebar-visible::before {
+  opacity: 1;
+}
+
+.simplebar-scrollbar::before {
+  background: var(--scrollbar-handle-bg);
+  width: var(--scrollbar-size);
+}
+
+.simplebar-scrollbar.simplebar-visible.simplebar-hover {
+  &::before {
+    background: var(--scrollbar-handle-hover-bg);
+  }
+}
+
+.simplebar-scrollbar.scrollbar-handle-light {
+  &::before {
+    background-color: var(--scrollbar-handle-light-bg);
+  }
+}
+
+.simplebar-scrollbar.simplebar-visible.simplebar-hover.scrollbar-handle-light {
+  &::before {
+    background: var(--scrollbar-handle-light-bg);
+  }
+}

src/components/image-editor/index.tsx

@@ -7,6 +7,7 @@ import {
 } from '@ant-design/icons';
 import { useIntl } from '@umijs/max';
 import { Button, Slider, Tooltip } from 'antd';
+import dayjs from 'dayjs';
 import _ from 'lodash';
 import React, { useCallback, useEffect, useRef, useState } from 'react';
 import IconFont from '../icon-font';
@@ -25,6 +26,8 @@ type CanvasImageEditorProps = {
   imageStatus: {
     isOriginal: boolean;
     isResetNeeded: boolean;
+    width: number;
+    height: number;
   };
 };
 
@@ -244,7 +247,7 @@ const CanvasImageEditor: React.FC<CanvasImageEditorProps> = ({
     const mask = generateMask();
 
     const link = document.createElement('a');
-    link.download = 'mask.png';
+    link.download = `mask_${dayjs().format('YYYYMMDDHHmmss')}.png`;
     link.href = mask || '';
     link.click();
   }, [generateMask]);
@@ -494,15 +497,37 @@ const CanvasImageEditor: React.FC<CanvasImageEditorProps> = ({
     redrawStrokes(newStrokes);
   };
 
-  const download = () => {
+  const downloadOriginImage = () => {
+    console.log('Downloading original image', imageStatus);
     const canvas = canvasRef.current!;
     const link = document.createElement('a');
-    link.download = 'image.png';
+    link.download = `image_${dayjs().format('YYYYMMDDHHmmss')}.png`;
     link.href = canvas.toDataURL('image/png');
     link.click();
     link.remove();
   };
 
+  const downloadNewImage = () => {
+    const url = imageSrc || '';
+    const filename = `${imageStatus.width}x${imageStatus.height}_${dayjs().format('YYYYMMDDHHmmss')}.png`;
+
+    const link = document.createElement('a');
+    link.href = url;
+    link.download = filename;
+    document.body.appendChild(link);
+    link.click();
+    link.remove();
+  };
+
+  const download = () => {
+    console.log('Downloading image:', imageStatus);
+    if (imageStatus.isOriginal) {
+      downloadOriginImage();
+    } else {
+      downloadNewImage();
+    }
+  };
+
   const drawImage = useCallback(async () => {
     if (!containerRef.current || !canvasRef.current) return;
     return new Promise<void>((resolve) => {

src/global.less

@@ -1,6 +1,7 @@
 @import url('src/assets/styles/common.less');
 @import url('src/assets/styles/menu.less');
 @import url('src/assets/styles/driver.less');
+@import url('./overrides.less');
 
 html {
   --font-family: 'noto sans', sans-serif;
@@ -604,21 +605,6 @@ body {
   }
 }
 
-.simplebar-scrollbar.simplebar-visible::before {
-  opacity: 1;
-}
-
-.simplebar-scrollbar::before {
-  background: var(--scrollbar-handle-bg);
-  width: var(--scrollbar-size);
-}
-
-.simplebar-scrollbar.simplebar-visible.simplebar-hover {
-  &::before {
-    background: var(--scrollbar-handle-hover-bg);
-  }
-}
-
 .rc-virtual-list-scrollbar {
   width: var(--scrollbar-size) !important;
 }

src/pages/llmodels/components/file-parts.tsx

@@ -7,7 +7,10 @@ const FileParts: React.FC<{
   fileList: any[];
 }> = ({ fileList }) => {
   return (
-    <SimpleBar style={{ maxHeight: 200 }}>
+    <SimpleBar
+      style={{ maxHeight: 200 }}
+      classNames={{ scrollbar: 'scrollbar-handle-light simplebar-scrollbar' }}
+    >
       <div style={{ padding: 10 }}>
         {fileList.map((file, index) => {
           return (

src/pages/llmodels/components/instance-item.tsx

@@ -183,7 +183,11 @@ const InstanceItem: React.FC<InstanceItemProps> = ({
                 </Col>
                 <Col span={6}>
                   <span
-                    style={{ paddingLeft: '58px' }}
+                    style={{
+                      paddingLeft: '58px',
+                      flexWrap: 'wrap',
+                      gap: '5px'
+                    }}
                     className="flex align-center"
                   >
                     {item.computed_resource_claim?.total_layers !==
@@ -221,6 +225,11 @@ const InstanceItem: React.FC<InstanceItemProps> = ({
                         <Tag
                           color="cyan"
                           style={{
+                            maxWidth: '100%',
+                            minWidth: 50,
+                            textOverflow: 'ellipsis',
+                            whiteSpace: 'nowrap',
+                            overflow: 'hidden',
                             opacity: 0.75,
                             borderRadius: 12
                           }}
@@ -242,6 +251,11 @@ const InstanceItem: React.FC<InstanceItemProps> = ({
                         <Tag
                           color="processing"
                           style={{
+                            maxWidth: '100%',
+                            minWidth: 50,
+                            textOverflow: 'ellipsis',
+                            whiteSpace: 'nowrap',
+                            overflow: 'hidden',
                             opacity: 0.75,
                             borderRadius: 12
                           }}

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

@@ -129,9 +129,13 @@ const GroundImages: React.FC<MessageProps> = forwardRef((props, ref) => {
   const [imageStatus, setImageStatus] = useState<{
     isOriginal: boolean;
     isResetNeeded: boolean;
+    width: number;
+    height: number;
   }>({
     isOriginal: false,
-    isResetNeeded: false
+    isResetNeeded: false,
+    width: 512,
+    height: 512
   });
   const doneImage = useRef<boolean>(false);
   const cacheFormData = useRef<any>({});
@@ -661,16 +665,20 @@ const GroundImages: React.FC<MessageProps> = forwardRef((props, ref) => {
     setActiveImgUid(_.get(base64List, '[0].uid', ''));
     setImageStatus({
       isOriginal: false,
-      isResetNeeded: true
+      isResetNeeded: true,
+      width: _.get(currentImg, 'width', 512),
+      height: _.get(currentImg, 'height', 512)
     });
     setImageList([]);
   }, []);
 
   const handleOnSave = useCallback(
     (data: { img: string; mask: string | null }) => {
-      setImageStatus({
-        isOriginal: true,
-        isResetNeeded: false
+      setImageStatus((pre) => {
+        return {
+          ...pre,
+          isResetNeeded: false
+        };
       });
       setMask(data.mask || null);
       setImage(data.img);
@@ -731,7 +739,9 @@ const GroundImages: React.FC<MessageProps> = forwardRef((props, ref) => {
     setImage(item.dataUrl);
     setImageStatus({
       isOriginal: isOrigin,
-      isResetNeeded: false
+      isResetNeeded: false,
+      width: item.width,
+      height: item.height
     });
   }, []);