chore: image edit api

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: {}