chore: painting cache

2024-12-27 14:56:06 +08:00
parent 542f048a67
commit bca56bfaad
17 changed files with 1411 additions and 1047 deletions
@@ -16,7 +16,7 @@
  },
  "dependencies": {
    "@ant-design/icons": "^5.5.1",
-    "@ant-design/pro-components": "^2.7.18",
+    "@ant-design/pro-components": "^2.7.19",
    "@huggingface/gguf": "^0.1.7",
    "@huggingface/hub": "^0.15.1",
    "@huggingface/tasks": "^0.11.6",
@@ -90,7 +90,8 @@ const AutoImage: React.FC<
      fallback={fallbackImg}
      crossOrigin="anonymous"
      preview={
-        preview ?? {
+        preview &&
+        !isError && {
          mask: <EyeOutlined />,
          toolbarRender: (
            _,
@@ -15,6 +15,22 @@
    right: 20px;
  }

+  .small-progress-wrap {
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    background-color: var(--ant-color-fill-secondary);
+
+    .ant-progress-text {
+      color: var(--color-white-secondary);
+    }
+  }
+
  .img {
    display: flex;
    width: auto;
@@ -1,5 +1,5 @@
 import { CloseCircleOutlined } from '@ant-design/icons';
-import { Progress, Tooltip } from 'antd';
+import { Progress } from 'antd';
 import classNames from 'classnames';
 import ResizeObserver from 'rc-resize-observer';
 import React, { useCallback } from 'react';
@@ -64,7 +64,7 @@ const SingleImage: React.FC<SingleImageProps> = (props) => {

  const handleResize = useCallback(
    (size: { width: number; height: number }) => {
-      if (!autoSize) return;
+      if (!autoSize || !size.width || !size.height) return;

      const { width: containerWidth, height: containerHeight } = size;
      const { width: originalWidth, height: originalHeight } = props;
@@ -79,6 +79,9 @@ const SingleImage: React.FC<SingleImageProps> = (props) => {
      const newWidth = originalWidth * scale;
      const newHeight = originalHeight * scale;

+      if (newWidth === imgSize.width && newHeight === imgSize.height) {
+        return;
+      }
      setImgSize({
        width: newWidth,
        height: newHeight
@@ -131,43 +134,15 @@ const SingleImage: React.FC<SingleImageProps> = (props) => {
                  overflow: 'hidden'
                }}
              >
-                {progressType === 'dashboard' ? (
-                  <Progress
-                    percent={progress}
-                    type="dashboard"
-                    steps={{ count: 50, gap: 2 }}
-                    format={() => (
-                      <span className="font-size-20">{progress}%</span>
-                    )}
-                    trailColor="var(--ant-color-fill-secondary)"
-                  />
-                ) : (
-                  <span
-                    className="progress-wrapper"
-                    style={{ bottom: 'unset' }}
-                  >
-                    <Tooltip title={`${progress}%`} open={true}>
-                      <Progress
-                        style={{
-                          paddingInline: 0,
-                          borderRadius: 12,
-                          display: 'flex',
-                          alignItems: 'center',
-                          backgroundColor: 'rgba(0,0,0,0.5)'
-                        }}
-                        percent={progress}
-                        percentPosition={{
-                          align: 'center',
-                          type: 'inner'
-                        }}
-                        type="line"
-                        size={[undefined, 6]}
-                        strokeLinecap="round"
-                        strokeColor="var(--color-white-1)"
-                      />
-                    </Tooltip>
-                  </span>
-                )}
+                <Progress
+                  percent={progress}
+                  type="dashboard"
+                  steps={{ count: 50, gap: 2 }}
+                  format={() => (
+                    <span className="font-size-20">{progress}%</span>
+                  )}
+                  trailColor="var(--ant-color-fill-secondary)"
+                />
              </span>
            ) : (
              <span
@@ -187,27 +162,18 @@ const SingleImage: React.FC<SingleImageProps> = (props) => {
                  onLoad={handleOnLoad}
                />
                {progress && progress < 100 && (
-                  <span className="progress-wrapper">
-                    <Tooltip title={`${progress}%`} open={true}>
-                      <Progress
-                        style={{
-                          paddingInline: 0,
-                          borderRadius: 12,
-                          display: 'flex',
-                          alignItems: 'center',
-                          backgroundColor: 'rgba(0,0,0,0.5)'
-                        }}
-                        percent={progress}
-                        percentPosition={{
-                          align: 'center',
-                          type: 'inner'
-                        }}
-                        type="line"
-                        size={[undefined, 6]}
-                        strokeLinecap="round"
-                        strokeColor="var(--color-white-1)"
-                      />
-                    </Tooltip>
+                  <span className="small-progress-wrap">
+                    <Progress
+                      percent={progress}
+                      type="dashboard"
+                      size="small"
+                      steps={{ count: 25, gap: 3 }}
+                      format={() => (
+                        <span className="font-size-12">{progress}%</span>
+                      )}
+                      strokeColor="var(--color-white-secondary)"
+                      trailColor="var(--ant-color-fill-secondary)"
+                    />
                  </span>
                )}
              </span>
@@ -1,308 +1,374 @@
 import {
  DownloadOutlined,
  FormatPainterOutlined,
-  SaveOutlined,
  SyncOutlined,
  UndoOutlined
 } from '@ant-design/icons';
 import { Button, Slider, Tooltip } from 'antd';
+import _ from 'lodash';
 import React, { useCallback, useEffect, useRef, useState } from 'react';
+import IconFont from '../icon-font';
 import './index.less';

 type Point = { x: number; y: number };
-type Stroke = { start: Point; end: Point };
+type Stroke = Point[];

 type CanvasImageEditorProps = {
  imageSrc: string;
  disabled?: boolean;
  onSave: (imageData: string) => void;
  uploadButton: React.ReactNode;
+  imageStatus: {
+    isOriginal: boolean;
+    isResetNeeded: boolean;
+  };
 };

+const COLOR = 'rgba(0, 0, 255, 0.3)';
+
 const CanvasImageEditor: React.FC<CanvasImageEditorProps> = ({
  imageSrc,
  disabled,
+  imageStatus,
  onSave,
  uploadButton
 }) => {
-  const COLOR = 'rgba(0, 0, 255, 0.3)';
  const canvasRef = useRef<HTMLCanvasElement>(null);
  const overlayCanvasRef = useRef<HTMLCanvasElement>(null);
  const containerRef = useRef<HTMLDivElement>(null);
  const [lineWidth, setLineWidth] = useState<number>(30);
-  const [strokes, setStrokes] = useState<Stroke[]>([]);
  const isDrawing = useRef<boolean>(false);
-  const lastPoint = useRef<Point | null>(null);
-  const imgLoaded = useRef<boolean>(false);
-  const currentPoint = useRef<Point | null>(null);
-  const [cursorVisible, setCursorVisible] = useState(false);
-  const [cursorPosition, setCursorPosition] = useState<Point | null>(null);
+  const currentStroke = useRef<Point[]>([]);
+  const resizeObserver = useRef<ResizeObserver | null>(null);
+  const strokesRef = useRef<Stroke[]>([]);
+  const offscreenCanvasRef = useRef<HTMLCanvasElement | null>(null);
+  const autoScale = useRef<number>(1);
+  const cursorRef = useRef<HTMLDivElement>(null);
+  const [imgLoaded, setImgLoaded] = useState(false);

-  useEffect(() => {
-    console.log('Image src:', imageSrc);
-    if (!containerRef.current || !canvasRef.current) return;
-    imgLoaded.current = false;
-    const canvas = canvasRef.current;
-    const overlayCanvas = overlayCanvasRef.current;
-    const ctx = canvas!.getContext('2d');
+  const getTransformedPoint = (event: React.MouseEvent<HTMLCanvasElement>) => {
+    const overlayCanvas = overlayCanvasRef.current!;
+    const rect = overlayCanvas.getBoundingClientRect();

-    const img = new Image();
-    img.src = imageSrc;
-    img.onload = () => {
-      const container = containerRef.current;
-      const scale = Math.min(
-        container!.offsetWidth / img.width,
-        container!.offsetHeight / img.height,
-        1
-      );
-      canvas!.width = img.width * scale;
-      canvas!.height = img.height * scale;
-      overlayCanvas!.width = canvas!.width;
-      overlayCanvas!.height = canvas!.height;
+    const x = event.clientX - rect.left;
+    const y = event.clientY - rect.top;

-      ctx!.clearRect(0, 0, canvas.width, canvas.height);
-      ctx!.drawImage(img, 0, 0, canvas!.width, canvas!.height);
-      imgLoaded.current = true;
-    };
-  }, [imageSrc, containerRef.current, canvasRef.current]);
+    const transformedX = x - overlayCanvas.width / 2;
+    const transformedY = y - overlayCanvas.height / 2;

-  const handleResize = useCallback(() => {
-    const container = containerRef.current;
-    const canvas = canvasRef.current;
-    const overlayCanvas = overlayCanvasRef.current;
+    console.log('Mouse Coordinates (Transformed):', transformedX, transformedY);

-    if (
-      !container ||
-      !canvas ||
-      !overlayCanvas ||
-      !overlayCanvas.width ||
-      !overlayCanvas.height
-    )
-      return;
-    console.log(
-      'disconnect:',
-      container,
-      canvas,
-      overlayCanvas,
-      overlayCanvas.width,
-      overlayCanvas.height
-    );
-
-    // Save current overlay content
-    const imgData = overlayCanvas
-      .getContext('2d')!
-      .getImageData(0, 0, overlayCanvas.width, overlayCanvas.height);
-
-    const img = new Image();
-    img.src = imageSrc;
-
-    img.onload = () => {
-      // Recalculate scale
-      const scale = Math.min(
-        container.offsetWidth / img.width,
-        container.offsetHeight / img.height,
-        1
-      );
-
-      // Update canvas dimensions
-      canvas.width = img.width * scale;
-      canvas.height = img.height * scale;
-      overlayCanvas.width = canvas.width;
-      overlayCanvas.height = canvas.height;
-
-      // Redraw background image
-      const ctx = canvas.getContext('2d');
-      ctx!.clearRect(0, 0, canvas.width, canvas.height);
-      ctx!.drawImage(img, 0, 0, canvas.width, canvas.height);
-
-      // Restore overlay content
-      overlayCanvas.getContext('2d')!.putImageData(imgData, 0, 0);
-    };
-  }, [imageSrc, containerRef.current, canvasRef.current]);
-
-  const handleMouseEnter = () => {
-    setCursorVisible(true);
+    return { x: transformedX, y: transformedY };
  };

-  const mapMousePosition = (
-    e: React.MouseEvent<HTMLCanvasElement>,
-    canvas: HTMLCanvasElement
-  ) => {
-    const rect = canvas.getBoundingClientRect();
-    const scaleX = canvas.width / rect.width;
-    const scaleY = canvas.height / rect.height;
-
-    return {
-      x: (e.clientX - rect.left) * scaleX,
-      y: (e.clientY - rect.top) * scaleY
-    };
+  const handleMouseEnter = (e: React.MouseEvent<HTMLCanvasElement>) => {
+    overlayCanvasRef.current!.style.cursor = 'none';
+    cursorRef.current!.style.display = 'block';
+    cursorRef.current!.style.top = `${e.clientY - lineWidth / 2}px`;
+    cursorRef.current!.style.left = `${e.clientX - lineWidth / 2}px`;
  };

  const handleMouseMove = (e: React.MouseEvent<HTMLCanvasElement>) => {
-    const { offsetX, offsetY } = e.nativeEvent;
-    setCursorPosition({ x: offsetX, y: offsetY });
+    overlayCanvasRef.current!.style.cursor = 'none';
+    cursorRef.current!.style.display = 'block';
+    cursorRef.current!.style.top = `${e.clientY - lineWidth / 2}px`;
+    cursorRef.current!.style.left = `${e.clientX - lineWidth / 2}px`;
  };

  const handleMouseLeave = () => {
-    setCursorVisible(false);
-    setCursorPosition(null);
+    overlayCanvasRef.current!.style.cursor = 'default';
+    cursorRef.current!.style.display = 'none';
  };

-  useEffect(() => {
-    const resizeObserver = new ResizeObserver(() => {
-      handleResize();
-    });
+  const createOffscreenCanvas = () => {
+    if (offscreenCanvasRef.current === null) {
+      offscreenCanvasRef.current = document.createElement('canvas');
+      offscreenCanvasRef.current.width = overlayCanvasRef.current!.width;
+      offscreenCanvasRef.current.height = overlayCanvasRef.current!.height;
+      const offscreenCtx = offscreenCanvasRef.current.getContext('2d')!;
+      offscreenCtx.translate(
+        overlayCanvasRef.current!.width / 2,
+        overlayCanvasRef.current!.height / 2
+      );
+    }
+  };

-    const container = containerRef.current;
-    if (container) resizeObserver.observe(container);
+  const setCanvasCenter = useCallback(() => {
+    if (!canvasRef.current || !overlayCanvasRef.current) return;

-    return () => {
-      resizeObserver.disconnect();
-    };
-  }, [handleResize, strokes, containerRef.current]);
+    const overlayCtx = overlayCanvasRef.current!.getContext('2d');
+    const ctx = canvasRef.current!.getContext('2d');
+    const offscreenCtx = offscreenCanvasRef.current!.getContext('2d');
+
+    // Set the origin to the center
+    overlayCtx!.translate(ctx!.canvas.width / 2, ctx!.canvas.height / 2);
+    ctx!.translate(ctx!.canvas.width / 2, ctx!.canvas.height / 2);
+    offscreenCtx!.translate(ctx!.canvas.width / 2, ctx!.canvas.height / 2);
+  }, [canvasRef.current, overlayCanvasRef.current]);
+
+  const scaleCanvasSize = useCallback(() => {
+    const canvas = canvasRef.current!;
+    const offscreenCanvas = offscreenCanvasRef.current!;
+    const overlayCanvas = overlayCanvasRef.current!;
+
+    overlayCanvas.width = canvas.width;
+    overlayCanvas.height = canvas.height;
+
+    offscreenCanvas.width = canvas.width;
+    offscreenCanvas.height = canvas.height;
+  }, [canvasRef.current, overlayCanvasRef.current, offscreenCanvasRef.current]);
+
+  const setStrokes = (strokes: Stroke[]) => {
+    strokesRef.current = strokes;
+  };
+
+  const scaleLineWidth = useCallback(() => {
+    // setLineWidth(lineWidth * autoScale.current);
+  }, [lineWidth]);

  const generateMask = useCallback(() => {
-    const canvas = overlayCanvasRef.current!;
-    const finalImage = document.createElement('canvas');
-    finalImage.width = canvas.width;
-    finalImage.height = canvas.height;
-    const finalCtx = finalImage.getContext('2d');
-
-    // Create the transparent overlay
-    finalCtx!.fillStyle = 'black';
-    finalCtx!.fillRect(0, 0, finalImage.width, finalImage.height);
-    finalCtx!.globalCompositeOperation = 'destination-out';
-    finalCtx!.drawImage(canvas, 0, 0);
-
-    onSave(finalImage.toDataURL('image/png'));
-  }, [onSave]);
-
-  const downloadMask = useCallback(() => {
-    const canvas = overlayCanvasRef.current!;
+    const overlayCanvas = overlayCanvasRef.current!;
    const maskCanvas = document.createElement('canvas');
-    maskCanvas.width = canvas.width;
-    maskCanvas.height = canvas.height;
+    maskCanvas.width = overlayCanvas.width;
+    maskCanvas.height = overlayCanvas.height;
    const maskCtx = maskCanvas.getContext('2d');

-    // set the background to black
+    // Create the transparent overlay
    maskCtx!.fillStyle = 'black';
    maskCtx!.fillRect(0, 0, maskCanvas.width, maskCanvas.height);
-
    maskCtx!.globalCompositeOperation = 'destination-out';
-    maskCtx!.drawImage(canvas, 0, 0);
+    maskCtx!.drawImage(overlayCanvas, 0, 0);
+
+    return maskCanvas.toDataURL('image/png');
+  }, []);
+
+  const saveMask = useCallback(() => {
+    const mask = generateMask();
+    onSave(mask);
+  }, [onSave, generateMask]);
+
+  const downloadMask = useCallback(() => {
+    const mask = generateMask();

    const link = document.createElement('a');
    link.download = 'mask.png';
-    link.href = maskCanvas.toDataURL('image/png');
+    link.href = mask;
    link.click();
-  }, []);
+  }, [generateMask]);
+
+  const drawStroke = useCallback(
+    (
+      ctx: CanvasRenderingContext2D,
+      stroke: Stroke | Point[],
+      options: {
+        lineWidth: number;
+        color: string;
+        compositeOperation: 'source-over' | 'destination-out';
+      }
+    ) => {
+      const { lineWidth, color, compositeOperation } = options;
+      ctx.lineWidth = lineWidth;
+      ctx.lineCap = 'round';
+      ctx.lineJoin = 'round';
+      ctx.globalCompositeOperation = compositeOperation;
+
+      ctx.beginPath();
+
+      stroke.forEach((point, i) => {
+        console.log('Drawing Point:', point);
+        if (i === 0) {
+          ctx.moveTo(point.x, point.y);
+        } else {
+          ctx.lineTo(point.x, point.y);
+        }
+      });
+      if (compositeOperation === 'source-over') {
+        ctx.strokeStyle = color;
+      }
+      ctx.stroke();
+    },
+    []
+  );
+
+  const drawLine = useCallback(
+    (
+      ctx: CanvasRenderingContext2D,
+      point: Point,
+      options: {
+        lineWidth: number;
+        color: string;
+        compositeOperation: 'source-over' | 'destination-out';
+      }
+    ) => {
+      const { lineWidth, color, compositeOperation } = options;
+
+      ctx.lineWidth = lineWidth;
+      ctx.lineCap = 'round';
+      ctx.lineJoin = 'round';
+      ctx.globalCompositeOperation = compositeOperation;
+
+      ctx.lineTo(point.x, point.y);
+      if (compositeOperation === 'source-over') {
+        ctx.strokeStyle = color;
+      }
+      ctx.stroke();
+    },
+    [lineWidth]
+  );

  const draw = (e: React.MouseEvent<HTMLCanvasElement>) => {
-    if (!isDrawing.current || !lastPoint.current || !currentPoint.current)
-      return;
+    if (!isDrawing.current) return;
+
+    const { x, y } = getTransformedPoint(e);
+    console.log('Drawing:', e.nativeEvent, { x, y });
+    currentStroke.current.push({
+      x,
+      y
+    });

-    const { offsetX, offsetY } = e.nativeEvent;
-    currentPoint.current = { x: offsetX, y: offsetY };
    const ctx = overlayCanvasRef.current!.getContext('2d');

-    ctx!.save(); // 保存当前状态
+    ctx!.save();

-    // 1. 清除当前路径重叠的部分
-    ctx!.globalCompositeOperation = 'destination-out';
-    ctx!.lineWidth = lineWidth;
-    ctx!.lineCap = 'round';
-    ctx!.lineJoin = 'round';
+    drawLine(
+      ctx!,
+      { x, y },
+      { lineWidth, color: COLOR, compositeOperation: 'destination-out' }
+    );
+    drawLine(
+      ctx!,
+      { x, y },
+      { lineWidth, color: COLOR, compositeOperation: 'source-over' }
+    );

-    ctx!.beginPath();
-    ctx!.moveTo(lastPoint.current.x, lastPoint.current.y);
-    ctx!.lineTo(offsetX, offsetY);
-    ctx!.stroke();
-
-    // 2. 重新绘制带颜色的路径
-    ctx!.globalCompositeOperation = 'source-over';
-    ctx!.strokeStyle = COLOR;
-    ctx!.beginPath();
-    ctx!.moveTo(lastPoint.current.x, lastPoint.current.y);
-    ctx!.lineTo(offsetX, offsetY);
-    ctx!.stroke();
-
-    ctx!.restore(); // 恢复状态
-    // lastPoint.current = { x: offsetX, y: offsetY };
+    ctx!.restore();
  };

  const startDrawing = (e: React.MouseEvent<HTMLCanvasElement>) => {
    isDrawing.current = true;
-    lastPoint.current = null;
-    currentPoint.current = null;
-    const { offsetX, offsetY } = e.nativeEvent;
-    console.log('Start Drawing:', { x: offsetX, y: offsetY });
-    lastPoint.current = { x: offsetX, y: offsetY };
-    currentPoint.current = { x: offsetX, y: offsetY };
+
+    currentStroke.current = [];
+    const { x, y } = getTransformedPoint(e);
+    currentStroke.current.push({
+      x,
+      y
+    });
+
+    const ctx = overlayCanvasRef.current!.getContext('2d');
+    ctx!.beginPath();
+    ctx!.moveTo(x, y);
+
    draw(e);
  };

-  const endDrawing = () => {
-    console.log('End Drawing:', lastPoint.current);
-    if (!lastPoint.current || !currentPoint.current) return;
+  const endDrawing = (e: React.MouseEvent<HTMLCanvasElement>) => {
+    console.log('End Drawing:', e);
+    if (!isDrawing.current) {
+      return;
+    }

    isDrawing.current = false;
-    const copyLastPoint = { ...lastPoint.current };
-    const copyCurrentPoint = { ...currentPoint.current };
-    setStrokes((prevStrokes) => [
-      ...prevStrokes,
-      {
-        start: { x: copyLastPoint!.x, y: copyLastPoint!.y },
-        end: { x: copyCurrentPoint!.x, y: copyCurrentPoint!.y }
-      }
-    ]);
-    lastPoint.current = null;
-    currentPoint.current = null;

-    generateMask();
+    strokesRef.current.push(_.cloneDeep(currentStroke.current));
+
+    currentStroke.current = [];
+
+    saveMask();
  };

-  const onClear = () => {
+  const clearOverlayCanvas = useCallback(() => {
    const ctx = overlayCanvasRef.current!.getContext('2d');
    ctx!.clearRect(
-      0,
-      0,
+      -overlayCanvasRef.current!.width / 2,
+      -overlayCanvasRef.current!.height / 2,
      overlayCanvasRef.current!.width,
      overlayCanvasRef.current!.height
    );
+  }, []);
+
+  const clearCanvas = useCallback(() => {
+    const canvas = canvasRef.current!;
+    const ctx = canvasRef.current!.getContext('2d');
+    ctx!.clearRect(
+      -canvas.width / 2,
+      -canvas.height / 2,
+      canvas.width,
+      canvas.height
+    );
+  }, []);
+
+  const clearOffscreenCanvas = useCallback(() => {
+    const offscreenCanvas = offscreenCanvasRef.current!;
+    const offscreenCtx = offscreenCanvas.getContext('2d')!;
+
+    offscreenCtx.clearRect(
+      -offscreenCanvas.width / 2,
+      -offscreenCanvas.height / 2,
+      offscreenCanvas.width,
+      offscreenCanvas.height
+    );
+  }, []);
+
+  const onReset = useCallback(() => {
+    clearOverlayCanvas();
+    console.log('Resetting strokes');
    setStrokes([]);
-    lastPoint.current = null;
-  };
+    currentStroke.current = [];
+  }, []);
+
+  const redrawStrokes = useCallback(
+    (strokes: Stroke[], type?: string) => {
+      console.log('Redrawing strokes:', strokes, type);
+      if (!offscreenCanvasRef.current) {
+        createOffscreenCanvas();
+      }
+      if (!strokes.length) {
+        clearOverlayCanvas();
+        return;
+      }
+
+      const offscreenCanvas = offscreenCanvasRef.current!;
+      const overlayCanvas = overlayCanvasRef.current!;
+      const offscreenCtx = offscreenCanvas.getContext('2d')!;
+      const overlayCtx = overlayCanvas!.getContext('2d')!;
+
+      offscreenCanvas.width = overlayCanvas!.width;
+      offscreenCanvas.height = overlayCanvas!.height;
+
+      // clear offscreen canvas
+
+      clearOverlayCanvas();
+
+      strokes?.forEach((stroke: Point[], index) => {
+        overlayCtx.save();
+        drawStroke(overlayCtx, stroke, {
+          lineWidth,
+          color: COLOR,
+          compositeOperation: 'destination-out'
+        });
+
+        drawStroke(overlayCtx, stroke, {
+          lineWidth,
+          color: COLOR,
+          compositeOperation: 'source-over'
+        });
+        overlayCtx.restore();
+      });
+    },
+    [lineWidth, drawStroke]
+  );

  const undo = () => {
-    if (strokes.length === 0) return;
+    if (strokesRef.current.length === 0) return;

-    const newStrokes = strokes.slice(0, -1);
+    const newStrokes = strokesRef.current.slice(0, -1);
+    console.log('New strokes:', newStrokes, strokesRef.current);
    setStrokes(newStrokes);

-    const ctx = overlayCanvasRef.current!.getContext('2d');
-    ctx!.clearRect(
-      0,
-      0,
-      overlayCanvasRef.current!.width,
-      overlayCanvasRef.current!.height
-    );
-
-    newStrokes.forEach((stroke) => {
-      ctx!.globalCompositeOperation = 'source-over';
-      ctx!.strokeStyle = COLOR;
-      ctx!.lineWidth = lineWidth;
-      ctx!.lineCap = 'round';
-      ctx!.lineJoin = 'round';
-
-      ctx!.beginPath();
-      ctx!.moveTo(stroke.start.x, stroke.start.y);
-      ctx!.lineTo(stroke.end.x, stroke.end.y);
-      ctx!.stroke();
-    });
+    redrawStrokes(newStrokes);
  };

  const download = () => {
-    // download the canvasRef as an image
    const canvas = canvasRef.current!;
    const link = document.createElement('a');
    link.download = 'image.png';
@@ -311,7 +377,111 @@ const CanvasImageEditor: React.FC<CanvasImageEditorProps> = ({
    link.remove();
  };

+  const scaleStrokes = (scale: number): Stroke[] => {
+    const strokes: Stroke[] = _.cloneDeep(strokesRef.current);
+    const newStrokes = strokes.map((stroke) => {
+      return stroke.map((point) => {
+        return {
+          x: point.x * scale,
+          y: point.y * scale
+        };
+      });
+    });
+    setStrokes(newStrokes);
+    return newStrokes;
+  };
+
+  const drawImage = useCallback(async () => {
+    if (!containerRef.current || !canvasRef.current) return;
+    return new Promise<void>((resolve) => {
+      const img = new Image();
+      img.src = imageSrc;
+      img.onload = () => {
+        const canvas = canvasRef.current!;
+        const ctx = canvas!.getContext('2d');
+        const container = containerRef.current;
+        const scale = Math.min(
+          container!.offsetWidth / img.width,
+          container!.offsetHeight / img.height,
+          1
+        );
+
+        canvas!.width = img.width * scale;
+        canvas!.height = img.height * scale;
+
+        autoScale.current = scale / autoScale.current;
+
+        scaleLineWidth();
+        scaleCanvasSize();
+        setCanvasCenter();
+
+        clearCanvas();
+
+        ctx!.drawImage(
+          img,
+          -canvas.width / 2,
+          -canvas.height / 2,
+          canvas!.width,
+          canvas!.height
+        );
+        resolve();
+      };
+    });
+  }, [
+    imageSrc,
+    containerRef.current,
+    canvasRef.current,
+    scaleCanvasSize,
+    setCanvasCenter,
+    scaleLineWidth
+  ]);
+
+  const handleResize = useCallback(
+    async (entries: ResizeObserverEntry[]) => {
+      const contentRect = entries[0].contentRect;
+      if (!contentRect.width || !contentRect.height || !imgLoaded) return;
+      await drawImage();
+      console.log('Image Loaded:', imageStatus, strokesRef.current);
+      if (imageStatus.isOriginal) {
+        redrawStrokes(strokesRef.current, 'resize');
+      }
+    },
+    [drawImage, scaleStrokes, redrawStrokes, onReset, imageStatus, imgLoaded]
+  );
+
+  const initializeImage = useCallback(async () => {
+    setImgLoaded(false);
+    await drawImage();
+    setImgLoaded(true);
+    console.log('Image Loaded:', imageStatus, strokesRef.current);
+    if (imageStatus.isOriginal) {
+      redrawStrokes(strokesRef.current, 'initialize');
+    } else if (imageStatus.isResetNeeded) {
+      onReset();
+    }
+  }, [drawImage, onReset, redrawStrokes, imageStatus]);
+
  useEffect(() => {
+    initializeImage();
+  }, [initializeImage]);
+
+  useEffect(() => {
+    const container = containerRef.current;
+    if (!container) return;
+    if (container) {
+      resizeObserver.current = new ResizeObserver(
+        _.throttle(handleResize, 100)
+      );
+      resizeObserver.current.observe(container);
+    }
+
+    return () => {
+      resizeObserver.current?.disconnect();
+    };
+  }, [handleResize, containerRef.current]);
+
+  useEffect(() => {
+    createOffscreenCanvas();
    const handleUndoShortcut = (e: KeyboardEvent) => {
      if ((e.ctrlKey || e.metaKey) && e.key === 'z') {
        undo();
@@ -322,7 +492,7 @@ const CanvasImageEditor: React.FC<CanvasImageEditorProps> = ({
    return () => {
      window.removeEventListener('keydown', handleUndoShortcut);
    };
-  }, [strokes]);
+  }, []);

  return (
    <div className="editor-wrapper">
@@ -370,7 +540,7 @@ const CanvasImageEditor: React.FC<CanvasImageEditorProps> = ({
          {uploadButton}
          <Tooltip title="Reset">
            <Button
-              onClick={onClear}
+              onClick={onReset}
              size="middle"
              type="text"
              disabled={disabled}
@@ -382,7 +552,7 @@ const CanvasImageEditor: React.FC<CanvasImageEditorProps> = ({
        <div className="tools">
          <Tooltip title="Save Mask">
            <Button onClick={downloadMask} size="middle" type="text">
-              <SaveOutlined className="font-size-14" />
+              <IconFont className="font-size-14" type="icon-save1"></IconFont>
            </Button>
          </Tooltip>
          <Tooltip title="Download">
@@ -395,7 +565,12 @@ const CanvasImageEditor: React.FC<CanvasImageEditorProps> = ({
      <div
        className="editor-content"
        ref={containerRef}
-        style={{ position: 'relative', width: '100%', height: '100%', flex: 1 }}
+        style={{
+          position: 'relative',
+          width: '100%',
+          height: '100%',
+          flex: 1
+        }}
      >
        <canvas ref={canvasRef} style={{ position: 'absolute', zIndex: 1 }} />
        <canvas
@@ -403,28 +578,29 @@ const CanvasImageEditor: React.FC<CanvasImageEditorProps> = ({
          style={{ position: 'absolute', zIndex: 2 }}
          onMouseDown={startDrawing}
          onMouseUp={endDrawing}
+          onMouseEnter={handleMouseEnter}
          onMouseMove={(e) => {
+            handleMouseMove(e);
            draw(e);
          }}
          onMouseLeave={(e) => {
-            endDrawing();
+            handleMouseLeave();
+            endDrawing(e);
+          }}
+        />
+        <div
+          ref={cursorRef}
+          style={{
+            display: 'none',
+            position: 'fixed',
+            width: lineWidth,
+            height: lineWidth,
+            backgroundColor: COLOR,
+            borderRadius: '50%',
+            pointerEvents: 'none',
+            zIndex: 3
          }}
        />
-        {cursorVisible && (
-          <div
-            style={{
-              position: 'absolute',
-              top: cursorPosition?.y,
-              left: cursorPosition?.x,
-              width: lineWidth,
-              height: lineWidth,
-              backgroundColor: COLOR,
-              borderRadius: '50%',
-              pointerEvents: 'none',
-              zIndex: 3
-            }}
-          />
-        )}
      </div>
    </div>
  );
@@ -15,6 +15,7 @@ const SealSelect: React.FC<SelectProps & SealFormItemProps> = (props) => {
    required,
    description,
    options,
+    allowNull,
    isInFormItems = true,
    ...rest
  } = props;
@@ -22,6 +23,8 @@ const SealSelect: React.FC<SelectProps & SealFormItemProps> = (props) => {
  const [isFocus, setIsFocus] = useState(false);
  const inputRef = useRef<any>(null);
  let status = '';
+
+  // the status can be controlled by Form.Item
  if (isInFormItems) {
    const statusData = Form?.Item?.useStatus?.();
    status = statusData?.status || '';
@@ -41,10 +44,10 @@ const SealSelect: React.FC<SelectProps & SealFormItemProps> = (props) => {
  }, [options, intl]);

  useEffect(() => {
-    if (isNotEmptyValue(props.value)) {
+    if (isNotEmptyValue(props.value) || (allowNull && props.value === null)) {
      setIsFocus(true);
    }
-  }, [props.value]);
+  }, [props.value, allowNull]);

  const handleClickWrapper = () => {
    if (!props.disabled && !isFocus) {
@@ -54,7 +57,7 @@ const SealSelect: React.FC<SelectProps & SealFormItemProps> = (props) => {
  };

  const handleChange = (val: any, options: any) => {
-    if (isNotEmptyValue(val)) {
+    if (isNotEmptyValue(val) || (allowNull && val === null)) {
      setIsFocus(true);
    } else {
      setIsFocus(false);
@@ -68,7 +71,9 @@ const SealSelect: React.FC<SelectProps & SealFormItemProps> = (props) => {
  };

  const handleOnBlur = (e: any) => {
-    if (!props.value) {
+    if (allowNull && props.value === null) {
+      setIsFocus(true);
+    } else if (!props.value) {
      setIsFocus(false);
    }
    props.onBlur?.(e);
@@ -7,6 +7,7 @@ export interface SealFormItemProps {
  description?: React.ReactNode;
  extra?: React.ReactNode;
  addAfter?: React.ReactNode;
+  allowNull?: boolean;
  loading?: React.ReactNode;
  trim?: boolean;
  checkStatus?: 'success' | 'error' | 'warning' | '';
@@ -43,6 +43,10 @@ html {
  --font-weight-normal: 500;
  --font-weight-medium: 600;
  --font-weight-bold: 700;
+  --color-white-primary: rgba(255, 255, 255, 100%);
+  --color-white-secondary: rgba(255, 255, 255, 90%);
+  --color-white-tertiary: rgba(255, 255, 255, 70%);
+  --color-white-quaternary: rgba(255, 255, 255, 50%);
  --color-text-1: var(--ant-color-text);
  --color-text-3: rgba(0, 0, 0, 45%);
  --color-text-2: rgba(0, 0, 0, 65%);
@@ -217,5 +217,7 @@ export default {
  'common.text.new': 'New',
  'common.text.changelog': 'Release Notes',
  'common.button.recreate': 'Recreate',
-  'common.button.delrecreate': 'Delete (Recreate)'
+  'common.button.delrecreate': 'Delete (Recreate)',
+  'common.options.all': 'All',
+  'common.options.none': 'None'
 };
@@ -210,5 +210,7 @@ export default {
  'common.text.new': '新',
  'common.text.changelog': '更新日志',
  'common.button.recreate': '重新创建',
-  'common.button.delrecreate': '删除(重建)'
+  'common.button.delrecreate': '删除(重建)',
+  'common.options.all': '全部',
+  'common.options.none': '无'
 };
@@ -52,7 +52,8 @@ const advancedFieldsDefaultValus = {
  cfg_scale: 4.5,
  sampling_steps: 10,
  negative_prompt: null,
-  schedule_method: 'discrete'
+  schedule_method: 'discrete',
+  preview: null
 };

 const openaiCompatibleFieldsDefaultValus = {
@@ -237,6 +238,7 @@ const GroundImages: React.FC<MessageProps> = forwardRef((props, ref) => {
            width: imgSize[0],
            loading: true,
            progressType: stream_options.chunk_results ? 'dashboard' : 'line',
+            preview: false,
            uid: setMessageId()
          };
        });
@@ -302,6 +304,7 @@ const GroundImages: React.FC<MessageProps> = forwardRef((props, ref) => {
            uid: imgItem.uid,
            span: imgItem.span,
            loading: stream_options.chunk_results ? progress < 100 : false,
+            preview: progress >= 100,
            progress: progress
          };
        });
@@ -13,7 +13,7 @@ import {
 } from '@/utils/fetch-chunk-data';
 import { SwapOutlined } from '@ant-design/icons';
 import { useIntl, useSearchParams } from '@umijs/max';
-import { Button, Divider, Form, Image, Tooltip } from 'antd';
+import { Button, Divider, Form, Tooltip } from 'antd';
 import classNames from 'classnames';
 import _ from 'lodash';
 import 'overlayscrollbars/overlayscrollbars.css';
@@ -28,7 +28,6 @@ import React, {
  useState
 } from 'react';
 import { EDIT_IMAGE_API } from '../apis';
-import { promptList } from '../config';
 import {
  ImageAdvancedParamsConfig,
  ImageCustomSizeConfig,
@@ -54,6 +53,7 @@ const advancedFieldsDefaultValus = {
  cfg_scale: 4.5,
  sample_steps: 10,
  negative_prompt: null,
+  preview: null,
  schedule: 'discrete'
 };

@@ -83,6 +83,7 @@ const GroundImages: React.FC<MessageProps> = forwardRef((props, ref) => {
      span?: number;
      loading?: boolean;
      progress?: number;
+      preview?: boolean;
    }[]
  >([]);

@@ -103,8 +104,14 @@ const GroundImages: React.FC<MessageProps> = forwardRef((props, ref) => {
  const inputRef = useRef<any>(null);
  const [image, setImage] = useState<string>('');
  const [mask, setMask] = useState<string>('');
-  const [showOriginal, setShowOriginal] = useState<boolean>(false);
  const [uploadList, setUploadList] = useState<any[]>([]);
+  const [imageStatus, setImageStatus] = useState<{
+    isOriginal: boolean;
+    isResetNeeded: boolean;
+  }>({
+    isOriginal: false,
+    isResetNeeded: false
+  });

  const size = Form.useWatch('size', form.current?.form);

@@ -123,20 +130,6 @@ const GroundImages: React.FC<MessageProps> = forwardRef((props, ref) => {
    };
  });

-  const generateNumber = (min: number, max: number) => {
-    return Math.floor(Math.random() * (max - min + 1) + min);
-  };
-
-  const handleRandomPrompt = useCallback(() => {
-    const randomIndex = generateNumber(0, promptList.length - 1);
-    const randomPrompt = promptList[randomIndex];
-    inputRef.current?.handleInputChange({
-      target: {
-        value: randomPrompt
-      }
-    });
-  }, []);
-
  const setImageSize = useCallback(() => {
    let size: Record<string, string | number> = {
      span: 12
@@ -156,12 +149,20 @@ const GroundImages: React.FC<MessageProps> = forwardRef((props, ref) => {
    return size;
  }, [parameters.n]);

+  const imageFile = useMemo(() => {
+    return base64ToFile(image, 'image');
+  }, [image]);
+
+  const maskFile = useMemo(() => {
+    return base64ToFile(mask, 'mask');
+  }, [mask]);
+
  const finalParameters = useMemo(() => {
    if (parameters.size === 'custom') {
      return {
        ..._.omit(parameters, ['width', 'height', 'preview']),
-        image: base64ToFile(image, 'image'),
-        mask: base64ToFile(mask, 'mask'),
+        image: imageFile,
+        mask: maskFile,
        size:
          parameters.width && parameters.height
            ? `${parameters.width}x${parameters.height}`
@@ -169,11 +170,11 @@ const GroundImages: React.FC<MessageProps> = forwardRef((props, ref) => {
      };
    }
    return {
-      image: base64ToFile(image, 'image'),
-      mask: base64ToFile(mask, 'mask'),
+      image: imageFile,
+      mask: maskFile,
      ..._.omit(parameters, ['width', 'height', 'random_seed', 'preview'])
    };
-  }, [parameters, image, mask]);
+  }, [parameters, maskFile, imageFile]);

  const viewCodeContent = useMemo(() => {
    if (isOpenaiCompatible) {
@@ -248,6 +249,7 @@ const GroundImages: React.FC<MessageProps> = forwardRef((props, ref) => {
            width: imgSize[0],
            loading: true,
            progressType: stream_options.chunk_results ? 'dashboard' : 'line',
+            preview: false,
            uid: setMessageId()
          };
        });
@@ -313,6 +315,7 @@ const GroundImages: React.FC<MessageProps> = forwardRef((props, ref) => {
            uid: imgItem.uid,
            span: imgItem.span,
            loading: stream_options.chunk_results ? progress < 100 : false,
+            preview: progress >= 100,
            progress: progress
          };
        });
@@ -480,17 +483,27 @@ const GroundImages: React.FC<MessageProps> = forwardRef((props, ref) => {
    const img = _.get(base64List, '[0].dataUrl', '');
    setUploadList(base64List);
    setImage(img);
+    setImageStatus({
+      isOriginal: false,
+      isResetNeeded: true
+    });
+    setImageList([]);
  }, []);

  const handleOnSave = useCallback((url: string) => {
-    console.log('url:', url);
+    setImageStatus({
+      isOriginal: true,
+      isResetNeeded: false
+    });
    setMask(url);
  }, []);

  const renderImageEditor = useMemo(() => {
+    console.log('image:', image);
    if (image) {
      return (
        <CanvasImageEditor
+          imageStatus={imageStatus}
          imageSrc={image}
          disabled={loading}
          onSave={handleOnSave}
@@ -524,14 +537,37 @@ const GroundImages: React.FC<MessageProps> = forwardRef((props, ref) => {
        </div>
      </UploadImg>
    );
-  }, [image, loading, handleOnSave, handleUpdateImageList]);
+  }, [image, loading, imageStatus, handleOnSave, handleUpdateImageList]);

-  const handleOnImgClick = useCallback((item: any) => {
-    console.log('item:', item);
+  const handleOnImgClick = useCallback((item: any, isOrigin: boolean) => {
    setImage(item.dataUrl);
-    setShowOriginal(true);
+    setImageStatus({
+      isOriginal: isOrigin,
+      isResetNeeded: false
+    });
  }, []);

+  const renderOriginImage = useMemo(() => {
+    if (!uploadList.length) {
+      return null;
+    }
+    return (
+      <>
+        <SingleImage
+          {...uploadList[0]}
+          height={125}
+          maxHeight={125}
+          preview={true}
+          loading={false}
+          autoSize={false}
+          editable={false}
+          autoBgColor={false}
+          onClick={() => handleOnImgClick(uploadList[0], true)}
+        ></SingleImage>
+      </>
+    );
+  }, [uploadList, handleOnImgClick]);
+
  useEffect(() => {
    return () => {
      requestToken.current?.abort?.();
@@ -613,16 +649,7 @@ const GroundImages: React.FC<MessageProps> = forwardRef((props, ref) => {
              alignItems: 'center'
            }}
          >
-            {uploadList.length > 0 && (
-              <Image
-                onClick={() => handleOnImgClick(uploadList[0])}
-                src={uploadList[0]?.dataUrl}
-                style={{
-                  height: 125,
-                  objectFit: 'cover'
-                }}
-              ></Image>
-            )}
+            {renderOriginImage}
            {imageList.length > 0 && (
              <>
                <Divider
@@ -655,12 +682,12 @@ const GroundImages: React.FC<MessageProps> = forwardRef((props, ref) => {
                          height={125}
                          maxHeight={125}
                          key={item.uid}
-                          preview={true}
+                          preview={item.preview}
                          loading={item.loading}
                          autoSize={false}
                          editable={false}
                          autoBgColor={false}
-                          onClick={() => handleOnImgClick(item)}
+                          onClick={() => handleOnImgClick(item, false)}
                        ></SingleImage>
                      </div>
                    );
@@ -668,26 +695,6 @@ const GroundImages: React.FC<MessageProps> = forwardRef((props, ref) => {
                </div>
              </>
            )}
-            {/* <ThumbImg
-            column={parameters.n}
-            style={{
-              padding: 0,
-              height: '100%',
-              justifyContent: 'center',
-              flexDirection: 'column',
-              flexWrap: 'unset',
-              alignItems: 'center'
-            }}
-            preview={false}
-            autoBgColor={false}
-            editable={false}
-            dataList={imageList}
-            loading={loading}
-            onClick={handleOnImgClick}
-            responseable={true}
-            gutter={[8, 16]}
-            autoSize={true}
-          ></ThumbImg> */}
          </div>
        </div>
      </div>
@@ -11,7 +11,6 @@ const ThumbImg: React.FC<{
    rows: number;
    cols: number;
  };
-  preview?: boolean;
  editable?: boolean;
  onDelete?: (uid: number) => void;
  onClick?: (item: any) => void;
@@ -27,7 +26,6 @@ const ThumbImg: React.FC<{
    rows: 1,
    cols: 1
  },
-  preview = true,
  column = 2,
  dataList,
  editable,
@@ -48,7 +46,6 @@ const ThumbImg: React.FC<{

  const handleOnClick = useCallback(
    (item: any) => {
-      console.log('item=======', item);
      onClick?.(item);
    },
    [onClick]
@@ -110,7 +107,7 @@ const ThumbImg: React.FC<{
        alignItems: 'flex-start'
      }
    };
-  }, [dataList, responseable, column]);
+  }, [dataList.length, responseable, column]);

  return (
    <>
@@ -141,7 +138,7 @@ const ThumbImg: React.FC<{
                      >
                        <SingleImage
                          {...item}
-                          preview={preview}
+                          preview={item.preview}
                          style={{ ...(responseableStyle[index] || {}) }}
                          loading={item.loading}
                          autoSize={autoSize}
@@ -177,7 +174,7 @@ const ThumbImg: React.FC<{
                      >
                        <SingleImage
                          {...item}
-                          preview={preview}
+                          preview={item.preview}
                          style={{ ...(responseableStyle[index + 2] || {}) }}
                          loading={item.loading}
                          autoSize={autoSize}
@@ -198,7 +195,7 @@ const ThumbImg: React.FC<{
                return (
                  <SingleImage
                    {...item}
-                    preview={preview}
+                    preview={item.preview}
                    key={item.uid}
                    autoSize={autoSize}
                    editable={editable}
@@ -216,15 +216,16 @@ export const ImageconstExtraConfig: ParamsSchema[] = [
        label: 'playground.params.style.natural',
        value: 'natural',
        locale: true
-      }
+      },
+      { label: 'common.options.none', value: null, locale: true }
    ],
-    attrs: {
-      allowClear: true
-    },
    label: {
      text: 'playground.params.style',
      isLocalized: true
    },
+    attrs: {
+      allowNull: true
+    },
    rules: [
      {
        required: false
@@ -316,7 +317,7 @@ export const ImageAdvancedParamsConfig: ParamsSchema[] = [
  },
  {
    type: 'Input',
-    name: 'negative_prompt', //ng_deepnegative_v1_75t,(badhandv4:1.2),EasyNegative,(worst quality:2),
+    name: 'negative_prompt', // e.g. ng_deepnegative_v1_75t,(badhandv4:1.2),EasyNegative,(worst quality:2),
    label: {
      text: 'playground.image.params.negativePrompt',
      isLocalized: true
@@ -335,14 +336,15 @@ export const ImageAdvancedParamsConfig: ParamsSchema[] = [
    name: 'preview',
    options: [
      { label: 'Faster', value: 'preview_faster' },
-      { label: 'Normal', value: 'preview' }
+      { label: 'Normal', value: 'preview' },
+      { label: 'common.options.none', value: null, locale: true }
    ],
    label: {
      text: 'Preview',
      isLocalized: false
    },
    attrs: {
-      allowClear: true
+      allowNull: true
    },
    rules: [
      {
@@ -34,7 +34,7 @@ export interface ParamsSchema {
    isLocalized?: boolean;
  };
  style?: React.CSSProperties;
-  options?: Global.BaseOption<string | number>[];
+  options?: Global.BaseOption<string | number | null>[];
  value?: string | number | boolean | string[];
  min?: number;
  max?: number;
@@ -5,6 +5,13 @@ export const isNotEmptyValue = (value: any) => {
  return !!value || value === 0 || value === false;
 };

+export const isNotEmptyValueAllowNull = (value: any) => {
+  if (Array.isArray(value)) {
+    return value.length > 0;
+  }
+  return !!value || value === 0 || value === false || value === null;
+};
+
 export const handleBatchRequest = async (
  list: any[],
  fn: (args: any) => void