chore: image edit ux

src/components/auto-image/index.tsx

@@ -19,10 +19,11 @@ const AutoImage: React.FC<
     height: number | string;
     width?: number | string;
     autoSize?: boolean;
+    preview?: boolean;
     onLoad?: () => void;
   }
 > = (props) => {
-  const { height = 100, width: w, autoSize, ...rest } = props;
+  const { height = 100, width: w, autoSize, preview = true, ...rest } = props;
   const [width, setWidth] = useState(w || 0);
   const [isError, setIsError] = useState(false);
 
@@ -88,35 +89,37 @@ const AutoImage: React.FC<
       onLoad={handleImgLoad}
       fallback={fallbackImg}
       crossOrigin="anonymous"
-      preview={{
+      preview={
-        mask: <EyeOutlined />,
+        preview ?? {
-        toolbarRender: (
+          mask: <EyeOutlined />,
-          _,
+          toolbarRender: (
-          {
+            _,
-            transform: { scale },
+            {
-            actions: {
+              transform: { scale },
-              onFlipY,
+              actions: {
-              onFlipX,
+                onFlipY,
-              onRotateLeft,
+                onFlipX,
-              onRotateRight,
+                onRotateLeft,
-              onZoomOut,
+                onRotateRight,
-              onZoomIn,
+                onZoomOut,
-              onReset
+                onZoomIn,
+                onReset
+              }
             }
-          }
+          ) => (
-        ) => (
+            <Space size={12} className="toolbar-wrapper">
-          <Space size={12} className="toolbar-wrapper">
+              <DownloadOutlined onClick={onDownload} />
-            <DownloadOutlined onClick={onDownload} />
+              <SwapOutlined rotate={90} onClick={onFlipY} />
-            <SwapOutlined rotate={90} onClick={onFlipY} />
+              <SwapOutlined onClick={onFlipX} />
-            <SwapOutlined onClick={onFlipX} />
+              <RotateLeftOutlined onClick={onRotateLeft} />
-            <RotateLeftOutlined onClick={onRotateLeft} />
+              <RotateRightOutlined onClick={onRotateRight} />
-            <RotateRightOutlined onClick={onRotateRight} />
+              <ZoomOutOutlined disabled={scale === 1} onClick={onZoomOut} />
-            <ZoomOutOutlined disabled={scale === 1} onClick={onZoomOut} />
+              <ZoomInOutlined disabled={scale === 50} onClick={onZoomIn} />
-            <ZoomInOutlined disabled={scale === 50} onClick={onZoomIn} />
+              <UndoOutlined onClick={onReset} />
-            <UndoOutlined onClick={onReset} />
+            </Space>
-          </Space>
+          )
-        )
+        }
-      }}
+      }
     />
   );
 };

src/components/auto-image/progress-line.less

@@ -0,0 +1,44 @@
+.img-wrapper {
+  position: relative;
+  display: inline-block;
+}
+
+.img-wrapper .auto-image {
+  display: block;
+}
+
+.img-wrapper .progress-wrapper {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.progress-square {
+  width: 100%;
+  height: 100%;
+  transform: rotate(0deg);
+}
+
+.progress-square-bg {
+  fill: none;
+}
+
+.progress-square-fg {
+  fill: none;
+  stroke-linecap: square;
+  stroke-dasharray: 400;
+  stroke-dashoffset: 400;
+  transition: stroke-dashoffset 0.3s ease;
+}
+
+.progress-text {
+  position: absolute;
+  color: black;
+  font-size: 20px;
+  font-weight: bold;
+}

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

@@ -8,6 +8,13 @@
   border-radius: var(--border-radius-base);
   overflow: hidden;
 
+  .progress-wrapper {
+    position: absolute;
+    bottom: 20px;
+    left: 20px;
+    right: 20px;
+  }
+
   .img {
     display: flex;
     width: auto;

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

@@ -1,11 +1,10 @@
 import { CloseCircleOutlined } from '@ant-design/icons';
-import { Progress } from 'antd';
+import { Progress, Tooltip } from 'antd';
 import classNames from 'classnames';
 import ResizeObserver from 'rc-resize-observer';
 import React, { useCallback } from 'react';
 import AutoImage from './index';
 import './single-image.less';
-
 interface SingleImageProps {
   loading?: boolean;
   width?: number;
@@ -15,17 +14,23 @@ interface SingleImageProps {
   maxWidth?: number;
   dataUrl: string;
   uid: number;
+  preview?: boolean;
   autoSize?: boolean;
   onDelete: (uid: number) => void;
+  onClick?: (item: any) => void;
   autoBgColor?: boolean;
   editable?: boolean;
   style?: React.CSSProperties;
+  progressType?: 'line' | 'circle' | 'dashboard';
+  progressColor?: string;
+  progressWidth?: number;
 }
 
 const SingleImage: React.FC<SingleImageProps> = (props) => {
   const {
     editable,
     onDelete: handleOnDelete,
+    onClick,
     autoSize,
     uid,
     loading,
@@ -36,10 +41,13 @@ const SingleImage: React.FC<SingleImageProps> = (props) => {
     maxWidth,
     dataUrl,
     style,
-    autoBgColor
+    autoBgColor,
+    progressColor = 'var(--ant-color-primary)',
+    progressWidth = 2,
+    preview = true,
+    progressType = 'dashboard'
   } = props;
 
-  const [color, setColor] = React.useState({});
   const imgWrapper = React.useRef<HTMLSpanElement>(null);
   const [imgSize, setImgSize] = React.useState({
     width: width,
@@ -50,6 +58,10 @@ const SingleImage: React.FC<SingleImageProps> = (props) => {
     return loading ? { width: '100%', height: '100%' } : {};
   }, [loading, imgSize]);
 
+  const handleOnClick = useCallback(() => {
+    onClick?.(props);
+  }, [onClick, props]);
+
   const handleResize = useCallback(
     (size: { width: number; height: number }) => {
       if (!autoSize) return;
@@ -119,18 +131,47 @@ const SingleImage: React.FC<SingleImageProps> = (props) => {
                   overflow: 'hidden'
                 }}
               >
-                <Progress
+                {progressType === 'dashboard' ? (
-                  percent={progress}
+                  <Progress
-                  type="dashboard"
+                    percent={progress}
-                  steps={{ count: 50, gap: 2 }}
+                    type="dashboard"
-                  format={() => (
+                    steps={{ count: 50, gap: 2 }}
-                    <span className="font-size-20">{progress}%</span>
+                    format={() => (
-                  )}
+                      <span className="font-size-20">{progress}%</span>
-                  trailColor="var(--ant-color-fill-secondary)"
+                    )}
-                />
+                    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>
+                )}
               </span>
             ) : (
               <span
+                onClick={handleOnClick}
                 className="img"
                 style={{
                   maxHeight: `min(${maxHeight}, 100%)`,
@@ -138,12 +179,37 @@ const SingleImage: React.FC<SingleImageProps> = (props) => {
                 }}
               >
                 <AutoImage
+                  preview={preview}
                   autoSize={autoSize}
                   src={dataUrl}
                   width={imgSize.width || 100}
                   height={imgSize.height || 100}
                   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>
+                )}
               </span>
             )}
           </>

src/components/image-editor/index.less

@@ -0,0 +1,18 @@
+.editor-wrapper {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  height: 100%;
+
+  .tools {
+    margin-bottom: 10px;
+    display: flex;
+    gap: 10px;
+  }
+
+  .editor-content {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+}

src/components/image-editor/index.tsx

@@ -0,0 +1,433 @@
+import {
+  DownloadOutlined,
+  FormatPainterOutlined,
+  SaveOutlined,
+  SyncOutlined,
+  UndoOutlined
+} from '@ant-design/icons';
+import { Button, Slider, Tooltip } from 'antd';
+import React, { useCallback, useEffect, useRef, useState } from 'react';
+import './index.less';
+
+type Point = { x: number; y: number };
+type Stroke = { start: Point; end: Point };
+
+type CanvasImageEditorProps = {
+  imageSrc: string;
+  disabled?: boolean;
+  onSave: (imageData: string) => void;
+  uploadButton: React.ReactNode;
+};
+
+const CanvasImageEditor: React.FC<CanvasImageEditorProps> = ({
+  imageSrc,
+  disabled,
+  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);
+
+  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 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;
+
+      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 handleResize = useCallback(() => {
+    const container = containerRef.current;
+    const canvas = canvasRef.current;
+    const overlayCanvas = overlayCanvasRef.current;
+
+    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);
+  };
+
+  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 handleMouseMove = (e: React.MouseEvent<HTMLCanvasElement>) => {
+    const { offsetX, offsetY } = e.nativeEvent;
+    setCursorPosition({ x: offsetX, y: offsetY });
+  };
+
+  const handleMouseLeave = () => {
+    setCursorVisible(false);
+    setCursorPosition(null);
+  };
+
+  useEffect(() => {
+    const resizeObserver = new ResizeObserver(() => {
+      handleResize();
+    });
+
+    const container = containerRef.current;
+    if (container) resizeObserver.observe(container);
+
+    return () => {
+      resizeObserver.disconnect();
+    };
+  }, [handleResize, strokes, containerRef.current]);
+
+  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 maskCanvas = document.createElement('canvas');
+    maskCanvas.width = canvas.width;
+    maskCanvas.height = canvas.height;
+    const maskCtx = maskCanvas.getContext('2d');
+
+    // set the background to black
+    maskCtx!.fillStyle = 'black';
+    maskCtx!.fillRect(0, 0, maskCanvas.width, maskCanvas.height);
+
+    maskCtx!.globalCompositeOperation = 'destination-out';
+    maskCtx!.drawImage(canvas, 0, 0);
+
+    const link = document.createElement('a');
+    link.download = 'mask.png';
+    link.href = maskCanvas.toDataURL('image/png');
+    link.click();
+  }, []);
+
+  const draw = (e: React.MouseEvent<HTMLCanvasElement>) => {
+    if (!isDrawing.current || !lastPoint.current || !currentPoint.current)
+      return;
+
+    const { offsetX, offsetY } = e.nativeEvent;
+    currentPoint.current = { x: offsetX, y: offsetY };
+    const ctx = overlayCanvasRef.current!.getContext('2d');
+
+    ctx!.save(); // 保存当前状态
+
+    // 1. 清除当前路径重叠的部分
+    ctx!.globalCompositeOperation = 'destination-out';
+    ctx!.lineWidth = lineWidth;
+    ctx!.lineCap = 'round';
+    ctx!.lineJoin = 'round';
+
+    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 };
+  };
+
+  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 };
+    draw(e);
+  };
+
+  const endDrawing = () => {
+    console.log('End Drawing:', lastPoint.current);
+    if (!lastPoint.current || !currentPoint.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();
+  };
+
+  const onClear = () => {
+    const ctx = overlayCanvasRef.current!.getContext('2d');
+    ctx!.clearRect(
+      0,
+      0,
+      overlayCanvasRef.current!.width,
+      overlayCanvasRef.current!.height
+    );
+    setStrokes([]);
+    lastPoint.current = null;
+  };
+
+  const undo = () => {
+    if (strokes.length === 0) return;
+
+    const newStrokes = strokes.slice(0, -1);
+    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();
+    });
+  };
+
+  const download = () => {
+    // download the canvasRef as an image
+    const canvas = canvasRef.current!;
+    const link = document.createElement('a');
+    link.download = 'image.png';
+    link.href = canvas.toDataURL('image/png');
+    link.click();
+    link.remove();
+  };
+
+  useEffect(() => {
+    const handleUndoShortcut = (e: KeyboardEvent) => {
+      if ((e.ctrlKey || e.metaKey) && e.key === 'z') {
+        undo();
+      }
+    };
+
+    window.addEventListener('keydown', handleUndoShortcut);
+    return () => {
+      window.removeEventListener('keydown', handleUndoShortcut);
+    };
+  }, [strokes]);
+
+  return (
+    <div className="editor-wrapper">
+      <div className="flex-between">
+        <div className="tools">
+          <Tooltip
+            placement="bottomLeft"
+            arrow={false}
+            overlayInnerStyle={{
+              background: 'var(--color-white-1)',
+              display: 'flex',
+              alignItems: 'center',
+              justifyContent: 'flex-start',
+              width: 160
+            }}
+            title={
+              <div className="flex-column" style={{ width: '100%' }}>
+                <span className="text-secondary">Brush Size</span>
+                <Slider
+                  disabled={disabled}
+                  style={{ marginBlock: '4px 6px', marginLeft: 0, flex: 1 }}
+                  vertical={false}
+                  defaultValue={lineWidth}
+                  min={1}
+                  max={60}
+                  onChange={(value) => setLineWidth(value)}
+                />
+              </div>
+            }
+          >
+            <Button size="middle" type="text">
+              <FormatPainterOutlined className="font-size-14" />
+            </Button>
+          </Tooltip>
+          <Tooltip title="Undo">
+            <Button
+              onClick={undo}
+              size="middle"
+              type="text"
+              disabled={disabled}
+            >
+              <UndoOutlined className="font-size-14" />
+            </Button>
+          </Tooltip>
+          {uploadButton}
+          <Tooltip title="Reset">
+            <Button
+              onClick={onClear}
+              size="middle"
+              type="text"
+              disabled={disabled}
+            >
+              <SyncOutlined className="font-size-14" />
+            </Button>
+          </Tooltip>
+        </div>
+        <div className="tools">
+          <Tooltip title="Save Mask">
+            <Button onClick={downloadMask} size="middle" type="text">
+              <SaveOutlined className="font-size-14" />
+            </Button>
+          </Tooltip>
+          <Tooltip title="Download">
+            <Button onClick={download} size="middle" type="text">
+              <DownloadOutlined className="font-size-14" />
+            </Button>
+          </Tooltip>
+        </div>
+      </div>
+      <div
+        className="editor-content"
+        ref={containerRef}
+        style={{ position: 'relative', width: '100%', height: '100%', flex: 1 }}
+      >
+        <canvas ref={canvasRef} style={{ position: 'absolute', zIndex: 1 }} />
+        <canvas
+          ref={overlayCanvasRef}
+          style={{ position: 'absolute', zIndex: 2 }}
+          onMouseDown={startDrawing}
+          onMouseUp={endDrawing}
+          onMouseMove={(e) => {
+            draw(e);
+          }}
+          onMouseLeave={(e) => {
+            endDrawing();
+          }}
+        />
+        {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>
+  );
+};
+
+export default React.memo(CanvasImageEditor);

src/global.less

@@ -636,6 +636,10 @@ body {
   }
 }
 
+.ant-upload.ant-upload-drag {
+  background: none;
+}
+
 .ant-message-notice-wrapper {
   .ant-message-notice-error {
     .ant-message-notice-content {

src/pages/playground/apis/index.ts

@@ -3,6 +3,7 @@ import { request } from '@umijs/max';
 export const CHAT_API = '/v1-openai/chat/completions';
 
 export const CREAT_IMAGE_API = '/v1-openai/images/generations';
+export const EDIT_IMAGE_API = '/v1-openai/images/edits';
 
 export const EMBEDDING_API = '/v1-openai/embeddings';
 

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

@@ -11,7 +11,7 @@ import {
 } from '@/utils/fetch-chunk-data';
 import { FileImageOutlined, SwapOutlined } from '@ant-design/icons';
 import { useIntl, useSearchParams } from '@umijs/max';
-import { Button, Form, Tooltip } from 'antd';
+import { Button, Checkbox, Form, Tooltip } from 'antd';
 import classNames from 'classnames';
 import _ from 'lodash';
 import 'overlayscrollbars/overlayscrollbars.css';
@@ -99,6 +99,10 @@ const GroundImages: React.FC<MessageProps> = forwardRef((props, ref) => {
   const [currentPrompt, setCurrentPrompt] = useState<string>('');
   const form = useRef<any>(null);
   const inputRef = useRef<any>(null);
+  const previewRef = useRef<any>({
+    preview: false,
+    preview_faster: false
+  });
 
   const size = Form.useWatch('size', form.current?.form);
 
@@ -153,7 +157,7 @@ const GroundImages: React.FC<MessageProps> = forwardRef((props, ref) => {
   const finalParameters = useMemo(() => {
     if (parameters.size === 'custom') {
       return {
-        ..._.omit(parameters, ['width', 'height']),
+        ..._.omit(parameters, ['width', 'height', 'preview']),
         size:
           parameters.width && parameters.height
             ? `${parameters.width}x${parameters.height}`
@@ -161,7 +165,7 @@ const GroundImages: React.FC<MessageProps> = forwardRef((props, ref) => {
       };
     }
     return {
-      ..._.omit(parameters, ['width', 'height', 'random_seed'])
+      ..._.omit(parameters, ['width', 'height', 'random_seed', 'preview'])
     };
   }, [parameters]);
 
@@ -205,6 +209,23 @@ const GroundImages: React.FC<MessageProps> = forwardRef((props, ref) => {
       setCurrentPrompt(current?.content || '');
       const imgSize = _.split(finalParameters.size, 'x');
 
+      // preview
+      let stream_options: Record<string, any> = {
+        chunk_size: 16 * 1024,
+        chunk_results: true
+      };
+      if (parameters.preview === 'preview') {
+        stream_options = {
+          preview: true
+        };
+      }
+
+      if (parameters.preview === 'preview_faster') {
+        stream_options = {
+          preview_faster: true
+        };
+      }
+
       let newImageList = Array(parameters.n)
         .fill({})
         .map((item, index: number) => {
@@ -215,6 +236,7 @@ const GroundImages: React.FC<MessageProps> = forwardRef((props, ref) => {
             height: imgSize[1],
             width: imgSize[0],
             loading: true,
+            progressType: stream_options.chunk_results ? 'dashboard' : 'line',
             uid: setMessageId()
           };
         });
@@ -228,8 +250,7 @@ const GroundImages: React.FC<MessageProps> = forwardRef((props, ref) => {
         seed: parameters.random_seed ? generateRandomNumber() : parameters.seed,
         stream: true,
         stream_options: {
-          chunk_size: 16 * 1024,
+          ...stream_options
-          chunk_results: true
         },
         prompt: current?.content || currentPrompt || ''
       };
@@ -266,8 +287,10 @@ const GroundImages: React.FC<MessageProps> = forwardRef((props, ref) => {
         }
         chunk?.data?.forEach((item: any) => {
           const imgItem = newImageList[item.index];
-          if (item.b64_json) {
+          if (item.b64_json && stream_options.chunk_results) {
             imgItem.dataUrl += item.b64_json;
+          } else if (item.b64_json) {
+            imgItem.dataUrl = `data:image/png;base64,${item.b64_json}`;
           }
           const progress = _.round(item.progress, 0);
           newImageList[item.index] = {
@@ -278,7 +301,7 @@ const GroundImages: React.FC<MessageProps> = forwardRef((props, ref) => {
             maxWidth: `${imgSize[0]}px`,
             uid: imgItem.uid,
             span: imgItem.span,
-            loading: progress < 100,
+            loading: stream_options.chunk_results ? progress < 100 : false,
             progress: progress
           };
         });
@@ -439,6 +462,27 @@ const GroundImages: React.FC<MessageProps> = forwardRef((props, ref) => {
     return null;
   }, [size, intl]);
 
+  const hanldeOnPreview = (e: any) => {
+    previewRef.current.preview = e.target.checked;
+  };
+
+  const hanldeOnPreviewFaster = (e: any) => {
+    previewRef.current.preview_faster = e.target.checked;
+  };
+
+  const renderPreview = useMemo(() => {
+    return (
+      <>
+        <Checkbox onChange={hanldeOnPreview} defaultChecked={false}>
+          Preview
+        </Checkbox>
+        <Checkbox onChange={hanldeOnPreviewFaster} defaultChecked={false}>
+          Preview Faster
+        </Checkbox>
+      </>
+    );
+  }, []);
+
   useEffect(() => {
     return () => {
       requestToken.current?.abort?.();
@@ -508,7 +552,6 @@ const GroundImages: React.FC<MessageProps> = forwardRef((props, ref) => {
                 autoBgColor={false}
                 editable={false}
                 dataList={imageList}
-                loading={loading}
                 responseable={true}
                 gutter={[8, 16]}
                 autoSize={true}

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

@@ -1,16 +1,19 @@
 import AlertInfo from '@/components/alert-info';
+import SingleImage from '@/components/auto-image/single-image';
+import IconFont from '@/components/icon-font';
+import CanvasImageEditor from '@/components/image-editor';
 import FieldComponent from '@/components/seal-form/field-component';
 import SealSelect from '@/components/seal-form/seal-select';
 import useOverlayScroller from '@/hooks/use-overlay-scroller';
-import ThumbImg from '@/pages/playground/components/thumb-img';
+import UploadImg from '@/pages/playground/components/upload-img';
-import { generateRandomNumber } from '@/utils';
+import { base64ToFile, generateRandomNumber } from '@/utils';
 import {
-  fetchChunkedData,
+  fetchChunkedDataPostFormData as fetchChunkedData,
   readLargeStreamData as readStreamData
 } from '@/utils/fetch-chunk-data';
-import { FileImageOutlined, SwapOutlined } from '@ant-design/icons';
+import { SwapOutlined } from '@ant-design/icons';
 import { useIntl, useSearchParams } from '@umijs/max';
-import { Button, Form, Tooltip } from 'antd';
+import { Button, Divider, Form, Image, Tooltip } from 'antd';
 import classNames from 'classnames';
 import _ from 'lodash';
 import 'overlayscrollbars/overlayscrollbars.css';
@@ -24,7 +27,7 @@ import React, {
   useRef,
   useState
 } from 'react';
-import { CREAT_IMAGE_API } from '../apis';
+import { EDIT_IMAGE_API } from '../apis';
 import { promptList } from '../config';
 import {
   ImageAdvancedParamsConfig,
@@ -46,7 +49,7 @@ interface MessageProps {
   ref?: any;
 }
 const advancedFieldsDefaultValus = {
-  seed: null,
+  seed: 1,
   sampler: 'euler_a',
   cfg_scale: 4.5,
   sample_steps: 10,
@@ -98,6 +101,10 @@ const GroundImages: React.FC<MessageProps> = forwardRef((props, ref) => {
   const [currentPrompt, setCurrentPrompt] = useState<string>('');
   const form = useRef<any>(null);
   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 size = Form.useWatch('size', form.current?.form);
 
@@ -141,10 +148,10 @@ const GroundImages: React.FC<MessageProps> = forwardRef((props, ref) => {
       size.span = 12;
     }
     if (parameters.n === 3) {
-      size.span = 12;
+      size.span = 8;
     }
     if (parameters.n === 4) {
-      size.span = 12;
+      size.span = 6;
     }
     return size;
   }, [parameters.n]);
@@ -152,7 +159,9 @@ const GroundImages: React.FC<MessageProps> = forwardRef((props, ref) => {
   const finalParameters = useMemo(() => {
     if (parameters.size === 'custom') {
       return {
-        ..._.omit(parameters, ['width', 'height']),
+        ..._.omit(parameters, ['width', 'height', 'preview']),
+        image: base64ToFile(image, 'image'),
+        mask: base64ToFile(mask, 'mask'),
         size:
           parameters.width && parameters.height
             ? `${parameters.width}x${parameters.height}`
@@ -160,14 +169,18 @@ const GroundImages: React.FC<MessageProps> = forwardRef((props, ref) => {
       };
     }
     return {
-      ..._.omit(parameters, ['width', 'height', 'random_seed'])
+      image: base64ToFile(image, 'image'),
+      mask: base64ToFile(mask, 'mask'),
+      ..._.omit(parameters, ['width', 'height', 'random_seed', 'preview'])
     };
-  }, [parameters]);
+  }, [parameters, image, mask]);
 
   const viewCodeContent = useMemo(() => {
     if (isOpenaiCompatible) {
       return generateOpenaiImageCode({
-        api: '/v1-openai/images/generations',
+        api: EDIT_IMAGE_API,
+        edit: true,
+        isFormdata: true,
         parameters: {
           ...finalParameters,
           prompt: currentPrompt
@@ -175,7 +188,9 @@ const GroundImages: React.FC<MessageProps> = forwardRef((props, ref) => {
       });
     }
     return generateImageCode({
-      api: '/v1-openai/images/generations',
+      api: EDIT_IMAGE_API,
+      isFormdata: true,
+      edit: true,
       parameters: {
         ...finalParameters,
         prompt: currentPrompt
@@ -202,8 +217,26 @@ const GroundImages: React.FC<MessageProps> = forwardRef((props, ref) => {
       setMessageId();
       setTokenResult(null);
       setCurrentPrompt(current?.content || '');
+
       const imgSize = _.split(finalParameters.size, 'x');
 
+      // preview
+      let stream_options: Record<string, any> = {
+        chunk_size: 16 * 1024,
+        chunk_results: true
+      };
+      if (parameters.preview === 'preview') {
+        stream_options = {
+          preview: true
+        };
+      }
+
+      if (parameters.preview === 'preview_faster') {
+        stream_options = {
+          preview_faster: true
+        };
+      }
+
       let newImageList = Array(parameters.n)
         .fill({})
         .map((item, index: number) => {
@@ -214,6 +247,7 @@ const GroundImages: React.FC<MessageProps> = forwardRef((props, ref) => {
             height: imgSize[1],
             width: imgSize[0],
             loading: true,
+            progressType: stream_options.chunk_results ? 'dashboard' : 'line',
             uid: setMessageId()
           };
         });
@@ -227,8 +261,7 @@ const GroundImages: React.FC<MessageProps> = forwardRef((props, ref) => {
         seed: parameters.random_seed ? generateRandomNumber() : parameters.seed,
         stream: true,
         stream_options: {
-          chunk_size: 16 * 1024,
+          ...stream_options
-          chunk_results: true
         },
         prompt: current?.content || currentPrompt || ''
       };
@@ -240,7 +273,7 @@ const GroundImages: React.FC<MessageProps> = forwardRef((props, ref) => {
 
       const result: any = await fetchChunkedData({
         data: params,
-        url: `${CREAT_IMAGE_API}?t=${Date.now()}`,
+        url: `http://192.168.50.4:40325/v1/images/edits?t=${Date.now()}`,
         signal: requestToken.current.signal
       });
       if (result.error) {
@@ -265,8 +298,10 @@ const GroundImages: React.FC<MessageProps> = forwardRef((props, ref) => {
         }
         chunk?.data?.forEach((item: any) => {
           const imgItem = newImageList[item.index];
-          if (item.b64_json) {
+          if (item.b64_json && stream_options.chunk_results) {
             imgItem.dataUrl += item.b64_json;
+          } else if (item.b64_json) {
+            imgItem.dataUrl = `data:image/png;base64,${item.b64_json}`;
           }
           const progress = _.round(item.progress, 0);
           newImageList[item.index] = {
@@ -277,7 +312,7 @@ const GroundImages: React.FC<MessageProps> = forwardRef((props, ref) => {
             maxWidth: `${imgSize[0]}px`,
             uid: imgItem.uid,
             span: imgItem.span,
-            loading: progress < 100,
+            loading: stream_options.chunk_results ? progress < 100 : false,
             progress: progress
           };
         });
@@ -295,6 +330,9 @@ const GroundImages: React.FC<MessageProps> = forwardRef((props, ref) => {
     setMessageId();
     setImageList([]);
     setTokenResult(null);
+    setMask('');
+    setImage('');
+    setUploadList([]);
   };
 
   const handleInputChange = (e: any) => {
@@ -438,6 +476,62 @@ const GroundImages: React.FC<MessageProps> = forwardRef((props, ref) => {
     return null;
   }, [size, intl]);
 
+  const handleUpdateImageList = useCallback((base64List: any) => {
+    const img = _.get(base64List, '[0].dataUrl', '');
+    setUploadList(base64List);
+    setImage(img);
+  }, []);
+
+  const handleOnSave = useCallback((url: string) => {
+    console.log('url:', url);
+    setMask(url);
+  }, []);
+
+  const renderImageEditor = useMemo(() => {
+    if (image) {
+      return (
+        <CanvasImageEditor
+          imageSrc={image}
+          disabled={loading}
+          onSave={handleOnSave}
+          uploadButton={
+            <Tooltip title="Upload Image">
+              <UploadImg
+                disabled={loading}
+                handleUpdateImgList={handleUpdateImageList}
+                size="middle"
+              ></UploadImg>
+            </Tooltip>
+          }
+        ></CanvasImageEditor>
+      );
+    }
+    return (
+      <UploadImg
+        drag={true}
+        multiple={false}
+        handleUpdateImgList={handleUpdateImageList}
+      >
+        <div
+          className="flex-column flex-center gap-10 justify-center"
+          style={{ width: 150, height: 150 }}
+        >
+          <IconFont
+            type="icon-upload_image"
+            className="font-size-24"
+          ></IconFont>
+          <h3>Click or drag image to this area to upload</h3>
+        </div>
+      </UploadImg>
+    );
+  }, [image, loading, handleOnSave, handleUpdateImageList]);
+
+  const handleOnImgClick = useCallback((item: any) => {
+    console.log('item:', item);
+    setImage(item.dataUrl);
+    setShowOriginal(true);
+  }, []);
+
   useEffect(() => {
     return () => {
       requestToken.current?.abort?.();
@@ -495,114 +589,183 @@ const GroundImages: React.FC<MessageProps> = forwardRef((props, ref) => {
         >
           <>
             <div className="content" style={{ height: '100%' }}>
-              <ThumbImg
+              {
-                style={{
-                  padding: 0,
-                  height: '100%',
-                  justifyContent: 'center',
-                  flexDirection: 'column',
-                  flexWrap: 'unset',
-                  alignItems: 'center'
-                }}
-                autoBgColor={false}
-                editable={false}
-                dataList={imageList}
-                loading={loading}
-                responseable={true}
-                gutter={[8, 16]}
-                autoSize={true}
-              ></ThumbImg>
-              {!imageList.length && (
                 <div className="flex-column font-size-14 flex-center gap-20 justify-center hold-wrapper">
-                  <span>
+                  {renderImageEditor}
-                    <FileImageOutlined className="font-size-32 text-secondary" />
-                  </span>
-                  <span>
-                    {intl.formatMessage({ id: 'playground.params.empty.tips' })}
-                  </span>
                 </div>
-              )}
+              }
             </div>
           </>
         </div>
-        {tokenResult && (
+        <div className="ground-left-footer" style={{ padding: 10 }}>
-          <div style={{ height: 40 }}>
+          {tokenResult && (
-            <AlertInfo
+            <div style={{ height: 40 }}>
-              type="danger"
+              <AlertInfo
-              message={tokenResult?.errorMessage}
+                type="danger"
-            ></AlertInfo>
+                message={tokenResult?.errorMessage}
-          </div>
+              ></AlertInfo>
-        )}
+            </div>
-        <div className="ground-left-footer">
+          )}
-          <MessageInput
+          <div
-            ref={inputRef}
+            style={{
-            placeholer={intl.formatMessage({
+              display: 'flex',
-              id: 'playground.input.prompt.holder'
+              justifyContent: 'center',
-            })}
+              alignItems: 'center'
-            actions={['clear']}
-            defaultSize={{
-              minRows: 5,
-              maxRows: 5
             }}
-            title={
+          >
-              <span className="font-600">
+            {uploadList.length > 0 && (
-                {intl.formatMessage({ id: 'playground.image.prompt' })}
+              <Image
-              </span>
+                onClick={() => handleOnImgClick(uploadList[0])}
-            }
+                src={uploadList[0]?.dataUrl}
+                style={{
+                  height: 125,
+                  objectFit: 'cover'
+                }}
+              ></Image>
+            )}
+            {imageList.length > 0 && (
+              <>
+                <Divider
+                  type="vertical"
+                  style={{
+                    margin: '0 30px',
+                    height: 80
+                  }}
+                ></Divider>
+                <div
+                  style={{
+                    display: 'flex',
+                    justifyContent: 'center',
+                    alignItems: 'center',
+                    gap: 10
+                  }}
+                >
+                  {_.map(imageList, (item: any, index: number) => {
+                    return (
+                      <div
+                        style={{
+                          height: 125,
+                          minWidth: 125,
+                          maxHeight: 125
+                        }}
+                        key={item.uid}
+                      >
+                        <SingleImage
+                          {...item}
+                          height={125}
+                          maxHeight={125}
+                          key={item.uid}
+                          preview={true}
+                          loading={item.loading}
+                          autoSize={false}
+                          editable={false}
+                          autoBgColor={false}
+                          onClick={() => handleOnImgClick(item)}
+                        ></SingleImage>
+                      </div>
+                    );
+                  })}
+                </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}
-            disabled={!parameters.model}
+            onClick={handleOnImgClick}
-            isEmpty={!imageList.length}
+            responseable={true}
-            handleSubmit={handleSendMessage}
+            gutter={[8, 16]}
-            handleAbortFetch={handleStopConversation}
+            autoSize={true}
-            onInputChange={handleInputChange}
+          ></ThumbImg> */}
-            shouldResetMessage={false}
+          </div>
-            clearAll={handleClear}
-          />
         </div>
       </div>
       <div
         className={classNames('params-wrapper', {
           collapsed: collapse
         })}
-        ref={paramsRef}
+        style={{
+          display: 'flex',
+          flexDirection: 'column',
+          overflow: 'hidden'
+        }}
       >
-        <div className="box">
+        <div style={{ flex: 1, overflow: 'auto' }} ref={paramsRef}>
-          <DynamicParams
+          <div className="box">
-            ref={form}
+            <DynamicParams
-            parametersTitle={
+              ref={form}
-              <div className="flex-between flex-center">
+              parametersTitle={
-                <span>
+                <div className="flex-between flex-center">
-                  {intl.formatMessage({ id: 'playground.parameters' })}
+                  <span>
-                </span>
+                    {intl.formatMessage({ id: 'playground.parameters' })}
-                <Tooltip
+                  </span>
-                  title={intl.formatMessage({
+                  <Tooltip
-                    id: 'playground.image.params.custom.tips'
+                    title={intl.formatMessage({
-                  })}
+                      id: 'playground.image.params.custom.tips'
-                >
+                    })}
-                  <Button
-                    size="middle"
-                    type="text"
-                    icon={<SwapOutlined />}
-                    onClick={handleToggleParamsStyle}
                   >
-                    {isOpenaiCompatible
+                    <Button
-                      ? intl.formatMessage({
+                      size="middle"
-                          id: 'playground.image.params.custom'
+                      type="text"
-                        })
+                      icon={<SwapOutlined />}
-                      : intl.formatMessage({
+                      onClick={handleToggleParamsStyle}
-                          id: 'playground.image.params.openai'
+                    >
-                        })}
+                      {isOpenaiCompatible
-                  </Button>
+                        ? intl.formatMessage({
-                </Tooltip>
+                            id: 'playground.image.params.custom'
-              </div>
+                          })
+                        : intl.formatMessage({
+                            id: 'playground.image.params.openai'
+                          })}
+                    </Button>
+                  </Tooltip>
+                </div>
+              }
+              setParams={setParams}
+              paramsConfig={paramsConfig}
+              initialValues={initialValues}
+              params={parameters}
+              selectedModel={selectModel}
+              modelList={modelList}
+              extra={[renderCustomSize, ...renderExtra, ...renderAdvanced]}
+            />
+          </div>
+        </div>
+        <div style={{ width: 389 }}>
+          <MessageInput
+            defaultSize={{
+              minRows: 5,
+              maxRows: 5
+            }}
+            ref={inputRef}
+            placeholer={intl.formatMessage({
+              id: 'playground.input.prompt.holder'
+            })}
+            actions={['clear']}
+            title={
+              <span className="font-600">
+                {intl.formatMessage({ id: 'playground.image.prompt' })}
+              </span>
             }
-            setParams={setParams}
+            loading={loading}
-            paramsConfig={paramsConfig}
+            disabled={!parameters.model || mask === ''}
-            initialValues={initialValues}
+            isEmpty={!imageList.length}
-            params={parameters}
+            handleSubmit={handleSendMessage}
-            selectedModel={selectModel}
+            handleAbortFetch={handleStopConversation}
-            modelList={modelList}
+            onInputChange={handleInputChange}
-            extra={[renderCustomSize, ...renderExtra, ...renderAdvanced]}
+            shouldResetMessage={false}
+            clearAll={handleClear}
           />
         </div>
       </div>

src/pages/playground/components/thumb-img.tsx

@@ -6,8 +6,15 @@ import '../style/thumb-img.less';
 
 const ThumbImg: React.FC<{
   dataList: any[];
+  column?: number;
+  layout?: {
+    rows: number;
+    cols: number;
+  };
+  preview?: boolean;
   editable?: boolean;
   onDelete?: (uid: number) => void;
+  onClick?: (item: any) => void;
   loading?: boolean;
   style?: React.CSSProperties;
   responseable?: boolean;
@@ -16,11 +23,18 @@ const ThumbImg: React.FC<{
   autoSize?: boolean;
   autoBgColor?: boolean;
 }> = ({
+  layout = {
+    rows: 1,
+    cols: 1
+  },
+  preview = true,
+  column = 2,
   dataList,
   editable,
   responseable,
   gutter,
   onDelete,
+  onClick,
   autoBgColor,
   autoSize,
   style
@@ -32,6 +46,14 @@ const ThumbImg: React.FC<{
     [onDelete]
   );
 
+  const handleOnClick = useCallback(
+    (item: any) => {
+      console.log('item=======', item);
+      onClick?.(item);
+    },
+    [onClick]
+  );
+
   const responseableStyle: Record<number, any> = useMemo(() => {
     if (!responseable) return {};
     if (dataList.length === 1) {
@@ -88,7 +110,7 @@ const ThumbImg: React.FC<{
         alignItems: 'flex-start'
       }
     };
-  }, [dataList, responseable]);
+  }, [dataList, responseable, column]);
 
   return (
     <>
@@ -100,34 +122,40 @@ const ThumbImg: React.FC<{
                 gutter={gutter || []}
                 className="flex-center"
                 style={{
-                  height: dataList.length > 2 ? '50%' : '100%',
+                  height: dataList.length > column ? '50%' : '100%',
                   flex: 'none',
                   width: '100%',
                   justifyContent:
                     dataList.length === 1 ? 'center' : 'flex-start'
                 }}
               >
-                {_.map(_.slice(dataList, 0, 2), (item: any, index: number) => {
+                {_.map(
-                  return (
+                  _.slice(dataList, 0, column),
-                    <Col
+                  (item: any, index: number) => {
-                      span={item.span}
+                    return (
-                      key={`1-${index}`}
+                      <Col
-                      className="flex-center justify-center"
+                        span={item.span}
-                      style={{ height: '100%', width: '100%' }}
+                        key={`1-${index}`}
-                    >
+                        className="flex-center justify-center"
-                      <SingleImage
+                        style={{ height: '100%', width: '100%' }}
-                        {...item}
+                      >
-                        style={{ ...(responseableStyle[index] || {}) }}
+                        <SingleImage
-                        autoSize={autoSize}
+                          {...item}
-                        editable={editable}
+                          preview={preview}
-                        autoBgColor={autoBgColor}
+                          style={{ ...(responseableStyle[index] || {}) }}
-                        onDelete={handleOnDelete}
+                          loading={item.loading}
-                      ></SingleImage>
+                          autoSize={autoSize}
-                    </Col>
+                          editable={editable}
-                  );
+                          autoBgColor={autoBgColor}
-                })}
+                          onDelete={handleOnDelete}
+                          onClick={() => handleOnClick(item)}
+                        ></SingleImage>
+                      </Col>
+                    );
+                  }
+                )}
               </Row>
-              {dataList.length > 2 && (
+              {dataList.length > column && (
                 <Row
                   gutter={gutter || []}
                   style={{
@@ -140,7 +168,6 @@ const ThumbImg: React.FC<{
                   className="flex-center"
                 >
                   {_.map(_.slice(dataList, 2), (item: any, index: number) => {
-                    console.log('index=======', index);
                     return (
                       <Col
                         span={item.span}
@@ -150,12 +177,14 @@ const ThumbImg: React.FC<{
                       >
                         <SingleImage
                           {...item}
+                          preview={preview}
                           style={{ ...(responseableStyle[index + 2] || {}) }}
                           loading={item.loading}
                           autoSize={autoSize}
                           editable={editable}
                           autoBgColor={autoBgColor}
                           onDelete={handleOnDelete}
+                          onClick={() => handleOnClick(item)}
                         ></SingleImage>
                       </Col>
                     );
@@ -169,11 +198,13 @@ const ThumbImg: React.FC<{
                 return (
                   <SingleImage
                     {...item}
+                    preview={preview}
                     key={item.uid}
                     autoSize={autoSize}
                     editable={editable}
                     autoBgColor={autoBgColor}
                     onDelete={handleOnDelete}
+                    onClick={() => handleOnClick(item)}
                   ></SingleImage>
                 );
               })}

src/pages/playground/components/upload-img.tsx

@@ -9,6 +9,10 @@ import React, { useCallback, useRef } from 'react';
 interface UploadImgProps {
   size?: 'small' | 'middle' | 'large';
   height?: number;
+  multiple?: boolean;
+  drag?: boolean;
+  disabled?: boolean;
+  children?: React.ReactNode;
   handleUpdateImgList: (
     imgList: { dataUrl: string; uid: number | string }[]
   ) => void;
@@ -16,7 +20,10 @@ interface UploadImgProps {
 
 const UploadImg: React.FC<UploadImgProps> = ({
   handleUpdateImgList,
-  height = 100,
+  multiple = true,
+  drag = false,
+  disabled = false,
+  children,
   size = 'small'
 }) => {
   const intl = useIntl();
@@ -71,19 +78,53 @@ const UploadImg: React.FC<UploadImgProps> = ({
 
   return (
     <>
-      <Upload
+      {drag ? (
-        ref={uploadRef}
+        <Upload.Dragger
-        accept="image/*"
+          ref={uploadRef}
-        multiple
+          accept="image/*"
-        action="/"
+          multiple={multiple}
-        fileList={[]}
+          action="/"
-        beforeUpload={(file) => false}
+          fileList={[]}
-        onChange={handleChange}
+          beforeUpload={(file) => false}
-      >
+          onChange={handleChange}
-        <Tooltip title={intl.formatMessage({ id: 'playground.img.upload' })}>
+        >
-          <Button size={size} type="text" icon={<PictureOutlined />}></Button>
+          {children ?? (
-        </Tooltip>
+            <Tooltip
-      </Upload>
+              title={intl.formatMessage({ id: 'playground.img.upload' })}
+            >
+              <Button
+                disabled={disabled}
+                size={size}
+                type="text"
+                icon={<PictureOutlined />}
+              ></Button>
+            </Tooltip>
+          )}
+        </Upload.Dragger>
+      ) : (
+        <Upload
+          ref={uploadRef}
+          accept="image/*"
+          multiple={multiple}
+          action="/"
+          fileList={[]}
+          beforeUpload={(file) => false}
+          onChange={handleChange}
+        >
+          {children ?? (
+            <Tooltip
+              title={intl.formatMessage({ id: 'playground.img.upload' })}
+            >
+              <Button
+                disabled={disabled}
+                size={size}
+                type="text"
+                icon={<PictureOutlined />}
+              ></Button>
+            </Tooltip>
+          )}
+        </Upload>
+      )}
     </>
   );
 };

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

@@ -330,6 +330,26 @@ export const ImageAdvancedParamsConfig: ParamsSchema[] = [
       }
     ]
   },
+  {
+    type: 'Select',
+    name: 'preview',
+    options: [
+      { label: 'Faster', value: 'preview_faster' },
+      { label: 'Normal', value: 'preview' }
+    ],
+    label: {
+      text: 'Preview',
+      isLocalized: false
+    },
+    attrs: {
+      allowClear: true
+    },
+    rules: [
+      {
+        required: false
+      }
+    ]
+  },
   {
     type: 'InputNumber',
     name: 'seed',

src/pages/playground/style/ground-left.less

@@ -71,7 +71,6 @@
   }
 
   .ant-upload-wrapper .ant-upload-drag {
-    background-color: var(--color-fill-sider);
     display: flex;
     flex-direction: column;
     justify-content: center;

src/pages/playground/view-code/image.ts

@@ -1,14 +1,32 @@
+import _ from 'lodash';
 import { fomatNodeJsParams, formatCurlArgs, formatPyParams } from './utils';
 
-export const generateImageCode = ({ api, parameters }: Record<string, any>) => {
+export const generateImageCode = ({
+  api,
+  parameters,
+  isFormdata = false,
+  edit = false
+}: Record<string, any>) => {
   const host = window.location.origin;
 
   // ========================= Curl =========================
-  const curlCode = `
+  let curlCode = `
 curl ${host}${api} \\
 -H "Content-Type: application/json" \\
 -H "Authorization: Bearer $\{YOUR_GPUSTACK_API_KEY}" \\
-${formatCurlArgs(parameters, false)}`.trim();
+${formatCurlArgs(parameters, isFormdata)}`.trim();
+
+  if (edit) {
+    curlCode = `
+curl ${host}${api} \\
+-H "Content-Type: multipart/form-data" \\
+-H "Authorization: Bearer $\{YOUR_GPUSTACK_API_KEY}" \\
+-F image="@image.png" \\
+-F mask="@mask.png" \\
+${formatCurlArgs(_.omit(parameters, ['mask', 'image']), isFormdata)}`
+      .trim()
+      .replace(/\\$/, '');
+  }
 
   // ========================= Python =========================
   const pythonCode = `
@@ -46,16 +64,29 @@ axios.post(url, data, { headers }).then((response) => {
 
 export const generateOpenaiImageCode = ({
   api,
-  parameters
+  parameters,
+  isFormdata = false,
+  edit = false
 }: Record<string, any>) => {
   const host = window.location.origin;
 
   // ========================= Curl =========================
-  const curlCode = `
+  let curlCode = `
+curl ${host}${api} \\
+-H "Content-Type: multipart/form-data" \\
+-H "Authorization: Bearer $\{YOUR_GPUSTACK_API_KEY}" \\
+${formatCurlArgs(parameters, isFormdata)}`.trim();
+  if (edit) {
+    curlCode = `
 curl ${host}${api} \\
 -H "Content-Type: application/json" \\
 -H "Authorization: Bearer $\{YOUR_GPUSTACK_API_KEY}" \\
-${formatCurlArgs(parameters, false)}`.trim();
+-F image="@image.png" \\
+-F mask="@mask.png" \\
+${formatCurlArgs(_.omit(parameters, ['mask', 'image']), isFormdata)}`
+      .trim()
+      .replace(/\\$/, '');
+  }
 
   // ========================= Python =========================
   const pythonCode = `

src/utils/fetch-chunk-data.ts

@@ -1,5 +1,4 @@
 import qs from 'query-string';
-
 const extractStreamRegx = /data:\s*({.*?})(?=\n|$)/g;
 
 const extractJSON = (dataStr: string) => {
@@ -68,6 +67,62 @@ export const fetchChunkedData = async (params: {
   };
 };
 
+const createFormData = (data: any): FormData => {
+  const formData = new FormData();
+
+  const appendToFormData = (key: string, value: any) => {
+    if (value instanceof File) {
+      // 处理文件类型
+      formData.append(key, value);
+    } else if (typeof value === 'object' && value !== null) {
+      // 如果是对象或数组，序列化为 JSON 字符串
+      formData.append(key, JSON.stringify(value));
+    } else {
+      // 处理基本数据类型
+      formData.append(key, String(value));
+    }
+  };
+
+  for (const key in data) {
+    if (Object.prototype.hasOwnProperty.call(data, key)) {
+      appendToFormData(key, data[key]);
+    }
+  }
+
+  return formData;
+};
+
+export const fetchChunkedDataPostFormData = async (params: {
+  data?: any;
+  url: string;
+  params?: any;
+  signal?: AbortSignal;
+  method?: string;
+  headers?: any;
+}) => {
+  const { url } = params;
+  const response = await fetch(url, {
+    method: 'POST',
+    body: createFormData(params.data),
+    signal: params.signal
+  });
+  console.log('response====', response);
+  if (!response.ok) {
+    return {
+      error: true,
+      data: await response.json()
+    };
+  }
+  const reader = response?.body?.getReader();
+  const decoder = new TextDecoder('utf-8', {
+    fatal: true
+  });
+  return {
+    reader,
+    decoder
+  };
+};
+
 export const readStreamData = async (
   reader: any,
   decoder: TextDecoder,

src/utils/index.ts

@@ -140,3 +140,36 @@ export const generateRandomNumber = () => {
   // 16: 0x1000；32:0x100000000
   return Math.floor(Math.random() * 0x100000000);
 };
+
+function base64ToBlob(base64: string, contentType = '', sliceSize = 512) {
+  const byteCharacters = atob(base64.split(',')[1]); // 去掉 Base64 前缀部分
+  const byteArrays = [];
+
+  for (let offset = 0; offset < byteCharacters.length; offset += sliceSize) {
+    const slice = byteCharacters.slice(offset, offset + sliceSize);
+
+    const byteNumbers = new Array(slice.length);
+    for (let i = 0; i < slice.length; i++) {
+      byteNumbers[i] = slice.charCodeAt(i);
+    }
+
+    const byteArray = new Uint8Array(byteNumbers);
+    byteArrays.push(byteArray);
+  }
+
+  return new Blob(byteArrays, { type: contentType });
+}
+
+export const base64ToFile = (base64String: string, fileName: string) => {
+  if (!base64String) {
+    return null;
+  }
+  console.log('base64String:', base64String);
+  const match = base64String.match(/data:(.*?);base64,/);
+  if (!match) {
+    throw new Error('Invalid base64 string');
+  }
+  const contentType = match[1];
+  const blob = base64ToBlob(base64String, contentType);
+  return new File([blob], fileName || contentType, { type: contentType });
+};