chore: image edit api

src/components/auto-image/index.tsx

@@ -45,6 +45,7 @@ const AutoImage: React.FC<
       return;
     }
     const { ratio } = await getImgRatio(props.src || '');
+    console.log('ratio', ratio);
     if (typeof height === 'number') {
       setWidth(height * ratio);
     } else {
@@ -66,6 +67,7 @@ const AutoImage: React.FC<
 
   const handleImgLoad = useCallback(() => {
     props.onLoad?.();
+    setIsError(false);
   }, [props.onLoad]);
 
   const handleOnError = () => {

src/components/icon-font/index.tsx

@@ -2,7 +2,7 @@ import { createFromIconfontCN } from '@ant-design/icons';
 // import './iconfont/iconfont.js';
 
 const IconFont = createFromIconfontCN({
-  scriptUrl: '//at.alicdn.com/t/c/font_4613488_hdf3t88r4j.js'
+  scriptUrl: '//at.alicdn.com/t/c/font_4613488_bslq45omhet.js'
 });
 
 export default IconFont;

src/components/image-editor/index.tsx

@@ -16,7 +16,7 @@ type Stroke = Point[];
 type CanvasImageEditorProps = {
   imageSrc: string;
   disabled?: boolean;
-  onSave: (imageData: string) => void;
+  onSave: (imageData: { mask: string; img: string }) => void;
   uploadButton: React.ReactNode;
   imageStatus: {
     isOriginal: boolean;
@@ -131,20 +131,44 @@ const CanvasImageEditor: React.FC<CanvasImageEditorProps> = ({
     const maskCanvas = document.createElement('canvas');
     maskCanvas.width = overlayCanvas.width;
     maskCanvas.height = overlayCanvas.height;
-    const maskCtx = maskCanvas.getContext('2d');
+    const maskCtx = maskCanvas.getContext('2d')!;
+    const overlayCtx = overlayCanvas.getContext('2d')!;
 
-    // Create the transparent overlay
+    const imageData = overlayCtx.getImageData(
-    maskCtx!.fillStyle = 'black';
+      0,
-    maskCtx!.fillRect(0, 0, maskCanvas.width, maskCanvas.height);
+      0,
-    maskCtx!.globalCompositeOperation = 'destination-out';
+      overlayCanvas.width,
-    maskCtx!.drawImage(overlayCanvas, 0, 0);
+      overlayCanvas.height
+    );
+    const data = imageData.data;
+
+    for (let i = 0; i < data.length; i += 4) {
+      const alpha = data[i + 3];
+      if (alpha > 0) {
+        data[i] = 255; // Red
+        data[i + 1] = 255; // Green
+        data[i + 2] = 255; // Blue
+        data[i + 3] = 255; // Alpha
+      }
+    }
+    maskCtx.putImageData(imageData, 0, 0);
+
+    maskCtx.globalCompositeOperation = 'destination-over';
+    maskCtx.fillStyle = 'black';
+    maskCtx.fillRect(0, 0, maskCanvas.width, maskCanvas.height);
 
     return maskCanvas.toDataURL('image/png');
   }, []);
 
-  const saveMask = useCallback(() => {
+  const generateImage = useCallback(() => {
+    const canvas = canvasRef.current!;
+    return canvas.toDataURL('image/png');
+  }, []);
+
+  const saveImage = useCallback(() => {
     const mask = generateMask();
-    onSave(mask);
+    const img = generateImage();
+    onSave({ mask, img });
   }, [onSave, generateMask]);
 
   const downloadMask = useCallback(() => {
@@ -273,7 +297,7 @@ const CanvasImageEditor: React.FC<CanvasImageEditorProps> = ({
 
     currentStroke.current = [];
 
-    saveMask();
+    saveImage();
   };
 
   const clearOverlayCanvas = useCallback(() => {
@@ -560,7 +584,7 @@ const CanvasImageEditor: React.FC<CanvasImageEditorProps> = ({
         <div className="tools">
           <Tooltip title="Save Mask">
             <Button onClick={downloadMask} size="middle" type="text">
-              <IconFont className="font-size-14" type="icon-save1"></IconFont>
+              <IconFont className="font-size-14" type="icon-save2"></IconFont>
             </Button>
           </Tooltip>
           <Tooltip title="Download">

src/components/status-tag/index.tsx

@@ -82,7 +82,7 @@ const StatusTag: React.FC<StatusTagProps> = ({
           ></CopyButton>
           {actions?.map((item) => {
             return (
-              <>
+              <div key={item.key}>
                 <Divider
                   style={{
                     marginBlock: 5,
@@ -99,7 +99,7 @@ const StatusTag: React.FC<StatusTagProps> = ({
                     <span className="font-size-14">{item.icon}</span>
                   </Button>
                 </Tooltip>
-              </>
+              </div>
             );
           })}
         </div>

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

@@ -52,6 +52,7 @@ const advancedFieldsDefaultValus = {
   seed: null,
   sample_method: 'euler_a',
   cfg_scale: 4.5,
+  guidance: 3.5,
   sampling_steps: 10,
   negative_prompt: null,
   schedule_method: 'discrete',
@@ -404,6 +405,9 @@ const GroundImages: React.FC<MessageProps> = forwardRef((props, ref) => {
     }
     const formValues = form.current?.form?.getFieldsValue();
     return ImageAdvancedParamsConfig.map((item: ParamsSchema) => {
+      if (item.name === 'strength') {
+        return null;
+      }
       return (
         <Form.Item
           name={item.name}
@@ -418,6 +422,11 @@ const GroundImages: React.FC<MessageProps> = forwardRef((props, ref) => {
                 ? item.disabledConfig?.when?.(formValues)
                 : item.disabled
             }
+            description={
+              item.description?.isLocalized
+                ? intl.formatMessage({ id: item.description.text })
+                : item.description?.text
+            }
             onChange={item.name === 'random_seed' ? handleFieldChange : null}
             {..._.omit(item, ['name', 'rules', 'disabledConfig'])}
           ></FieldComponent>

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

@@ -53,6 +53,8 @@ const advancedFieldsDefaultValus = {
   seed: 1,
   sample_method: 'euler_a',
   cfg_scale: 4.5,
+  guidance: 3.5,
+  strength: 0.75,
   sampling_steps: 10,
   negative_prompt: null,
   preview: null,
@@ -152,10 +154,12 @@ const GroundImages: React.FC<MessageProps> = forwardRef((props, ref) => {
   }, [parameters.n]);
 
   const imageFile = useMemo(() => {
+    console.log('image:', image);
     return base64ToFile(image, 'image');
   }, [image]);
 
   const maskFile = useMemo(() => {
+    console.log('mask:', mask);
     return base64ToFile(mask, 'mask');
   }, [mask]);
 
@@ -222,7 +226,9 @@ const GroundImages: React.FC<MessageProps> = forwardRef((props, ref) => {
       setCurrentPrompt(current?.content || '');
       setRouteCache(routeCachekey.playgroundTextToImage, true);
 
-      const imgSize = _.split(finalParameters.size, 'x');
+      const imgSize = _.split(finalParameters.size, 'x').map((item: string) =>
+        _.toNumber(item)
+      );
 
       // preview
       let stream_options: Record<string, any> = {
@@ -278,9 +284,12 @@ const GroundImages: React.FC<MessageProps> = forwardRef((props, ref) => {
 
       const result: any = await fetchChunkedData({
         data: params,
-        url: `${EDIT_IMAGE_API}?t=${Date.now()}`,
+        url: `http://192.168.50.174:40935/v1/images/edits?t=${Date.now()}`,
+        // url: EDIT_IMAGE_API,
         signal: requestToken.current.signal
       });
+
+      console.log('result:', result);
       if (result.error) {
         setTokenResult({
           error: true,
@@ -432,6 +441,11 @@ const GroundImages: React.FC<MessageProps> = forwardRef((props, ref) => {
                 ? item.disabledConfig?.when?.(formValues)
                 : item.disabled
             }
+            description={
+              item.description?.isLocalized
+                ? intl.formatMessage({ id: item.description.text })
+                : item.description?.text || ''
+            }
             onChange={item.name === 'random_seed' ? handleFieldChange : null}
             {..._.omit(item, ['name', 'rules', 'disabledConfig'])}
           ></FieldComponent>
@@ -494,16 +508,16 @@ const GroundImages: React.FC<MessageProps> = forwardRef((props, ref) => {
     setImageList([]);
   }, []);
 
-  const handleOnSave = useCallback((url: string) => {
+  const handleOnSave = useCallback((data: { img: string; mask: string }) => {
     setImageStatus({
       isOriginal: true,
       isResetNeeded: false
     });
-    setMask(url);
+    setMask(data.mask);
+    setImage(data.img);
   }, []);
 
   const renderImageEditor = useMemo(() => {
-    console.log('image:', image);
     if (image) {
       return (
         <CanvasImageEditor
@@ -517,6 +531,7 @@ const GroundImages: React.FC<MessageProps> = forwardRef((props, ref) => {
                 disabled={loading}
                 handleUpdateImgList={handleUpdateImageList}
                 size="middle"
+                accept="image/png"
               ></UploadImg>
             </Tooltip>
           }
@@ -525,6 +540,7 @@ const GroundImages: React.FC<MessageProps> = forwardRef((props, ref) => {
     }
     return (
       <UploadImg
+        accept="image/png"
         drag={true}
         multiple={false}
         handleUpdateImgList={handleUpdateImageList}
@@ -676,7 +692,6 @@ const GroundImages: React.FC<MessageProps> = forwardRef((props, ref) => {
                       <div
                         style={{
                           height: 125,
-                          minWidth: 125,
                           maxHeight: 125
                         }}
                         key={item.uid}

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

@@ -13,6 +13,7 @@ interface UploadImgProps {
   drag?: boolean;
   disabled?: boolean;
   children?: React.ReactNode;
+  accept?: string;
   handleUpdateImgList: (
     imgList: { dataUrl: string; uid: number | string }[]
   ) => void;
@@ -24,6 +25,7 @@ const UploadImg: React.FC<UploadImgProps> = ({
   drag = false,
   disabled = false,
   children,
+  accept = 'image/*',
   size = 'small'
 }) => {
   const intl = useIntl();
@@ -81,7 +83,7 @@ const UploadImg: React.FC<UploadImgProps> = ({
       {drag ? (
         <Upload.Dragger
           ref={uploadRef}
-          accept="image/*"
+          accept={accept}
           multiple={multiple}
           action="/"
           fileList={[]}
@@ -104,7 +106,7 @@ const UploadImg: React.FC<UploadImgProps> = ({
       ) : (
         <Upload
           ref={uploadRef}
-          accept="image/*"
+          accept={accept}
           multiple={multiple}
           action="/"
           fileList={[]}

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

@@ -297,6 +297,47 @@ export const ImageAdvancedParamsConfig: ParamsSchema[] = [
       }
     ]
   },
+  {
+    type: 'InputNumber',
+    name: 'guidance',
+    label: {
+      text: 'Guidance',
+      isLocalized: false
+    },
+    attrs: {
+      min: 1.0,
+      max: 10,
+      step: 0.1
+    },
+    rules: [
+      {
+        required: false
+      }
+    ]
+  },
+  {
+    type: 'InputNumber',
+    name: 'strength',
+    label: {
+      text: 'Strength',
+      isLocalized: false
+    },
+    // description: {
+    //   text: '值越高，它对原图的修改越大，更多变化',
+    //   html: false,
+    //   isLocalized: false
+    // },
+    attrs: {
+      min: 0,
+      max: 1,
+      step: 0.1
+    },
+    rules: [
+      {
+        required: false
+      }
+    ]
+  },
   {
     type: 'InputNumber',
     name: 'cfg_scale',

src/pages/playground/images.tsx

@@ -5,7 +5,7 @@ import useWindowResize from '@/hooks/use-window-resize';
 import { DiffOutlined, HighlightOutlined } from '@ant-design/icons';
 import { PageContainer } from '@ant-design/pro-components';
 import { useIntl } from '@umijs/max';
-import { Button, Space, Tabs, TabsProps } from 'antd';
+import { Button, Segmented, Space, Tabs, TabsProps } from 'antd';
 import classNames from 'classnames';
 import _ from 'lodash';
 import { useCallback, useEffect, useRef, useState } from 'react';
@@ -155,14 +155,14 @@ const TextToImages: React.FC = () => {
             <span className="font-600">
               {intl.formatMessage({ id: 'menu.playground.text2images' })}
             </span>
-            {/* {
+            {
               <Segmented
                 options={optionsList}
                 size="middle"
                 className="m-l-40"
                 onChange={(key) => setActiveKey(key)}
               ></Segmented>
-            } */}
+            }
           </div>
         ),
         breadcrumb: {}

src/utils/fetch-chunk-data.ts

@@ -72,13 +72,10 @@ const createFormData = (data: any): 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));
     }
   };
@@ -106,7 +103,6 @@ export const fetchChunkedDataPostFormData = async (params: {
     body: createFormData(params.data),
     signal: params.signal
   });
-  console.log('response====', response);
   if (!response.ok) {
     return {
       error: true,
@@ -170,6 +166,7 @@ export const readLargeStreamData = async (
 
   while (true) {
     const { done, value } = await reader?.read?.();
+
     if (done) {
       // Process remaining buffered data
       if (buffer.trim()) {
@@ -198,6 +195,12 @@ export const readLargeStreamData = async (
           console.error('Failed to parse JSON:', jsonStr, e);
         }
       }
+
+      if (line.startsWith('error:')) {
+        const errorStr = line.slice(7).trim();
+        const jsonData = JSON.parse(errorStr);
+        callback({ error: jsonData });
+      }
     }
   }
 };