chore: image edit init params

src/pages/playground/components/dynamic-params.tsx

@@ -22,7 +22,7 @@ type ParamsSettingsProps = {
   onValuesChange?: (changeValues: any, value: Record<string, any>) => void;
   onModelChange?: (model: string) => void;
   paramsConfig?: ParamsSchema[];
-  initialValues?: Record<string, any>;
+  initialValues?: Record<string, any>; // for initial values when switch model
   extra?: React.ReactNode;
 };
 

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

@@ -3,6 +3,7 @@ import AlertInfo from '@/components/alert-info';
 import IconFont from '@/components/icon-font';
 import routeCachekey from '@/config/route-cachekey';
 import ThumbImg from '@/pages/playground/components/thumb-img';
+import { generateRandomNumber } from '@/utils';
 import { FileImageOutlined, SwapOutlined } from '@ant-design/icons';
 import { useIntl } from '@umijs/max';
 import { Button, Tooltip } from 'antd';
@@ -19,7 +20,6 @@ import React, {
   useState
 } from 'react';
 import { CREAT_IMAGE_API } from '../apis';
-import { MessageItem } from '../config/types';
 import { useInitImageMeta } from '../hooks/use-init-meta';
 import useTextImage from '../hooks/use-text-image';
 import '../style/ground-left.less';
@@ -48,6 +48,7 @@ const GroundImages: React.FC<MessageProps> = forwardRef((props, ref) => {
   const {
     handleOnValuesChange,
     handleToggleParamsStyle,
+    setParams,
     form,
     paramsConfig,
     initialValues,
@@ -66,7 +67,9 @@ const GroundImages: React.FC<MessageProps> = forwardRef((props, ref) => {
     submitMessage
   } = useTextImage({
     scroller,
-    paramsRef
+    paramsRef,
+    chunkFields: ['stream_options', 'chunk_results'],
+    API: CREAT_IMAGE_API
   });
 
   useImperativeHandle(ref, () => {
@@ -111,7 +114,6 @@ const GroundImages: React.FC<MessageProps> = forwardRef((props, ref) => {
   }, [parameters]);
 
   const viewCodeContent = useMemo(() => {
-    console.log('finalParameters:', finalParameters);
     if (isOpenaiCompatible) {
       return generateOpenaiImageCode({
         api: CREAT_IMAGE_API,
@@ -134,11 +136,53 @@ const GroundImages: React.FC<MessageProps> = forwardRef((props, ref) => {
     setCurrentPrompt(e.target.value);
   };
 
-  const handleSendMessage = async (message: Omit<MessageItem, 'uid'>) => {
+  const generateParams = () => {
+    // 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
+      };
+    }
+
+    const params = {
+      ..._.omitBy(
+        parameters,
+        (value: string, key: string) =>
+          !value || ['width', 'height', 'seed'].includes(key)
+      ),
+      seed: parameters.random_seed ? generateRandomNumber() : parameters.seed,
+      stream: true,
+      stream_options: {
+        ...stream_options
+      },
+      prompt: currentPrompt
+    };
+    return params;
+  };
+
+  const handleSendMessage = async () => {
     try {
       await form.current?.form?.validateFields();
       if (!parameters.model) return;
-      submitMessage(finalParameters);
+      const params = generateParams();
+      setParams({
+        ...params,
+        seed: params.seed
+      });
+
+      form.current?.form?.setFieldValue('seed', params.seed);
+      console.log('params:', params, parameters);
+      submitMessage(params);
       setRouteCache(routeCachekey['/playground/text-to-image'], true);
     } catch (error) {
       // console.log('error:', error);

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

@@ -3,19 +3,12 @@ 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 routeCachekey from '@/config/route-cachekey';
-import useOverlayScroller from '@/hooks/use-overlay-scroller';
 import UploadImg from '@/pages/playground/components/upload-img';
 import { base64ToFile, generateRandomNumber } from '@/utils';
-import {
-  fetchChunkedDataPostFormData as fetchChunkedData,
-  readLargeStreamData as readStreamData
-} from '@/utils/fetch-chunk-data';
 import { SwapOutlined } from '@ant-design/icons';
-import { useIntl, useSearchParams } from '@umijs/max';
-import { Button, Divider, Form, Tooltip } from 'antd';
+import { useIntl } from '@umijs/max';
+import { Button, Divider, Tooltip } from 'antd';
 import classNames from 'classnames';
 import _ from 'lodash';
 import 'overlayscrollbars/overlayscrollbars.css';
@@ -30,15 +23,8 @@ import React, {
   useState
 } from 'react';
 import { EDIT_IMAGE_API } from '../apis';
-import { extractErrorMessage } from '../config';
-import {
-  ImageAdvancedParamsConfig,
-  ImageCustomSizeConfig,
-  ImageParamsConfig,
-  ImageconstExtraConfig,
-  imageSizeOptions
-} from '../config/params-config';
-import { MessageItem, ParamsSchema } from '../config/types';
+import { useInitImageMeta } from '../hooks/use-init-meta';
+import useTextImage from '../hooks/use-text-image';
 import '../style/ground-left.less';
 import '../style/system-message-wrap.less';
 import { generateImageCode, generateOpenaiImageCode } from '../view-code/image';
@@ -52,81 +38,19 @@ interface MessageProps {
   ref?: any;
 }
 
-// for advanced fields
-const METAKEYS = [
-  'sample_method',
-  'sampling_steps',
-  'schedule_method',
-  'cfg_scale',
-  'guidance',
-  'negative_prompt',
-  'strength'
-];
-
-const ODD_STRING = 'AAAABJRU5ErkJgg===';
-
-const advancedFieldsDefaultValus = {
-  seed: null,
-  sample_method: 'euler_a',
-  cfg_scale: 4.5,
-  guidance: 3.5,
-  strength: 0.75,
-  sampling_steps: 10,
-  negative_prompt: null,
-  preview: 'preview_faster',
-  schedule_method: 'discrete'
-};
-
-const openaiCompatibleFieldsDefaultValus = {
-  quality: 'standard',
-  style: null
-};
-
-const initialValues = {
-  n: 1,
-  size: '512x512',
-  ...advancedFieldsDefaultValus
-};
-
 const GroundImages: React.FC<MessageProps> = forwardRef((props, ref) => {
   const { modelList } = props;
-  const messageId = useRef<number>(0);
-  const [isOpenaiCompatible, setIsOpenaiCompatible] = useState<boolean>(false);
-  const [imageList, setImageList] = useState<
-    {
-      dataUrl: string;
-      height: number | string;
-      width: string | number;
-      maxHeight: string | number;
-      maxWidth: string | number;
-      uid: number;
-      span?: number;
-      loading?: boolean;
-      progress?: number;
-      preview?: boolean;
-    }[]
-  >([]);
 
   const intl = useIntl();
-  const [searchParams] = useSearchParams();
-  const selectModel = searchParams.get('model') || '';
-  const [parameters, setParams] = useState<any>({});
   const [show, setShow] = useState(false);
-  const [loading, setLoading] = useState(false);
-  const [tokenResult, setTokenResult] = useState<any>(null);
   const [collapse, setCollapse] = useState(false);
   const scroller = useRef<any>(null);
   const paramsRef = useRef<any>(null);
-  const messageListLengthCache = useRef<number>(0);
-  const requestToken = useRef<any>(null);
-  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 | null>(null);
   const [uploadList, setUploadList] = useState<any[]>([]);
   const [maskUpload, setMaskUpload] = useState<any[]>([]);
-  const [modelMeta, setModelMeta] = useState<any>({});
   const [imageStatus, setImageStatus] = useState<{
     isOriginal: boolean;
     isResetNeeded: boolean;
@@ -139,12 +63,34 @@ const GroundImages: React.FC<MessageProps> = forwardRef((props, ref) => {
     height: 512
   });
   const doneImage = useRef<boolean>(false);
-  const cacheFormData = useRef<any>({});
-  const size = Form.useWatch('size', form.current?.form);
   const [activeImgUid, setActiveImgUid] = useState<number>(0);
 
-  const { initialize, updateScrollerPosition } = useOverlayScroller();
-  const { initialize: innitializeParams } = useOverlayScroller();
+  const {
+    handleOnValuesChange,
+    handleToggleParamsStyle,
+    setParams,
+    updateCacheFormData,
+    form,
+    paramsConfig,
+    initialValues,
+    parameters,
+    isOpenaiCompatible
+  } = useInitImageMeta(props);
+  const {
+    loading,
+    tokenResult,
+    imageList,
+    currentPrompt,
+    setImageList,
+    setCurrentPrompt,
+    handleStopConversation,
+    submitMessage
+  } = useTextImage({
+    scroller,
+    paramsRef,
+    chunkFields: ['stream_options_chunk_result'],
+    API: EDIT_IMAGE_API
+  });
 
   useImperativeHandle(ref, () => {
     return {
@@ -158,76 +104,6 @@ const GroundImages: React.FC<MessageProps> = forwardRef((props, ref) => {
     };
   });
 
-  const removeBase64Suffix = (str: string, suffix: string) => {
-    return str.endsWith(suffix) ? str.slice(0, -suffix.length) : str;
-  };
-
-  const updateCacheFormData = (values: Record<string, any>) => {
-    cacheFormData.current = {
-      ...cacheFormData.current,
-      ...values
-    };
-  };
-
-  const getNewImageSizeOptions = useCallback((metaData: any) => {
-    const { max_height, max_width } = metaData || {};
-    if (!max_height || !max_width) {
-      return imageSizeOptions;
-    }
-    const newImageSizeOptions = imageSizeOptions.filter((item) => {
-      return item.width <= max_width && item.height <= max_height;
-    });
-    if (
-      !newImageSizeOptions.find(
-        (item) => item.width === max_width && item.height === max_height
-      )
-    ) {
-      newImageSizeOptions.push({
-        width: max_width,
-        height: max_height,
-        label: `${max_width}x${max_height}`,
-        value: `${max_width}x${max_height}`
-      });
-    }
-    return newImageSizeOptions;
-  }, []);
-
-  const paramsConfig = useMemo(() => {
-    const newImageSizeOptions = getNewImageSizeOptions(modelMeta);
-    let result = ImageParamsConfig.map((item) => {
-      if (item.name === 'size') {
-        return {
-          ...item,
-          options: newImageSizeOptions
-        };
-      }
-      return item;
-    });
-    if (!newImageSizeOptions.length) {
-      result = result.filter((item) => item.name !== 'size');
-    }
-    return result;
-  }, [modelMeta, getNewImageSizeOptions]);
-
-  const setImageSize = useCallback(() => {
-    let size: Record<string, string | number> = {
-      span: 12
-    };
-    if (parameters.n === 1) {
-      size.span = 24;
-    }
-    if (parameters.n === 2) {
-      size.span = 12;
-    }
-    if (parameters.n === 3) {
-      size.span = 8;
-    }
-    if (parameters.n === 4) {
-      size.span = 6;
-    }
-    return size;
-  }, [parameters.n]);
-
   const imageFile = useMemo(() => {
     if (!image) return null;
     return base64ToFile(image, 'image');
@@ -280,357 +156,73 @@ const GroundImages: React.FC<MessageProps> = forwardRef((props, ref) => {
     });
   }, [finalParameters, currentPrompt, parameters.size]);
 
-  const setMessageId = () => {
-    messageId.current = messageId.current + 1;
-    return messageId.current;
-  };
-
-  const handleStopConversation = () => {
-    requestToken.current?.abort?.();
-    setLoading(false);
-  };
-
-  const submitMessage = async (current?: { content: string }) => {
-    try {
-      await form.current?.form?.validateFields();
-      if (!parameters.model) return;
-      doneImage.current = false;
-      const size: any = setImageSize();
-      setLoading(true);
-      setMessageId();
-      setTokenResult(null);
-      setCurrentPrompt(current?.content || '');
-      // setUploadList((pre) => {
-      //   return pre.map((item) => {
-      //     return {
-      //       ...item,
-      //       uid: activeImgUid
-      //     };
-      //   });
-      // });
-      setRouteCache(routeCachekey['/playground/text-to-image'], true);
-
-      const imgSize = _.split(finalParameters.size, 'x').map((item: string) =>
-        _.toNumber(item)
-      );
-
-      // preview
-      let stream_options: Record<string, any> = {
-        stream_options_chunk_size: 16 * 1024,
-        stream_options_chunk_result: true
-      };
-      if (parameters.preview === 'preview') {
-        stream_options = {
-          stream_options_preview: true
-        };
-      }
-
-      if (parameters.preview === 'preview_faster') {
-        stream_options = {
-          stream_options_preview_faster: true
-        };
-      }
-
-      let newImageList = Array(parameters.n)
-        .fill({})
-        .map((item, index: number) => {
-          return {
-            dataUrl: 'data:image/png;base64,',
-            ...size,
-            progress: 0,
-            height: imgSize[1],
-            width: imgSize[0],
-            loading: true,
-            progressType: 'dashboard',
-            preview: false,
-            uid: setMessageId()
-          };
-        });
-      setImageList(newImageList);
-
-      requestToken.current?.abort?.();
-      requestToken.current = new AbortController();
-
-      const params = {
-        ..._.omitBy(finalParameters, (value: string) => !value),
-        seed: parameters.random_seed ? generateRandomNumber() : parameters.seed,
-        stream: true,
-        ...stream_options,
-        prompt: current?.content || currentPrompt || ''
-      };
-      setParams({
-        ...parameters,
-        seed: params.seed
-      });
-      form.current?.form?.setFieldValue('seed', params.seed);
-
-      const result: any = await fetchChunkedData({
-        data: params,
-        url: EDIT_IMAGE_API,
-        signal: requestToken.current.signal
-      });
-
-      console.log('result:', result);
-      if (result.error) {
-        setTokenResult({
-          error: true,
-          errorMessage: extractErrorMessage(result)
-        });
-        setImageList([]);
-        return;
-      }
-
-      const { reader, decoder } = result;
-
-      await readStreamData(reader, decoder, (chunk: any) => {
-        if (chunk?.error) {
-          setTokenResult({
-            error: true,
-            errorMessage: chunk?.error?.message || chunk?.message || ''
-          });
-          return;
-        }
-        chunk?.data?.forEach((item: any) => {
-          const imgItem = newImageList[item.index];
-          if (item.b64_json && params.stream_options_chunk_result) {
-            imgItem.dataUrl += removeBase64Suffix(item.b64_json, ODD_STRING);
-          } else if (item.b64_json) {
-            imgItem.dataUrl = `data:image/png;base64,${removeBase64Suffix(item.b64_json, ODD_STRING)}`;
-          }
-          const progress = item.progress;
-
-          newImageList[item.index] = {
-            dataUrl: imgItem.dataUrl,
-            height: imgSize[1],
-            width: imgSize[0],
-            maxHeight: `${imgSize[1]}px`,
-            maxWidth: `${imgSize[0]}px`,
-            uid: imgItem.uid,
-            span: imgItem.span,
-            loading: params.stream_options_chunk_result
-              ? progress < 100
-              : false,
-            preview: false,
-            progress: progress
-          };
-        });
-        setImageList([...newImageList]);
-      });
-    } catch (error) {
-      console.log('error:', error);
-      requestToken.current?.abort?.();
-      setImageList([]);
-    } finally {
-      setLoading(false);
-      setRouteCache(routeCachekey['/playground/text-to-image'], false);
-    }
-  };
   const handleClear = () => {
-    setMessageId();
-    setImageList([]);
-    setTokenResult(null);
-    setMask('');
-    setImage('');
-    setUploadList([]);
+    // setImageList([]);
+    // setTokenResult(null);
+    // setMask('');
+    // setImage('');
+    // setUploadList([]);
+    setCurrentPrompt('');
   };
 
   const handleInputChange = (e: any) => {
     setCurrentPrompt(e.target.value);
   };
 
-  const handleSendMessage = (message: Omit<MessageItem, 'uid'>) => {
-    const currentMessage = message.content ? message : undefined;
-    submitMessage(currentMessage);
+  const generateParams = () => {
+    // preview
+    let stream_options: Record<string, any> = {
+      stream_options_chunk_size: 16 * 1024,
+      stream_options_chunk_result: true
+    };
+    if (parameters.preview === 'preview') {
+      stream_options = {
+        stream_options_preview: true
+      };
+    }
+
+    if (parameters.preview === 'preview_faster') {
+      stream_options = {
+        stream_options_preview_faster: true
+      };
+    }
+
+    const params = {
+      ..._.omitBy(finalParameters, (value: string) => !value),
+      seed: parameters.random_seed ? generateRandomNumber() : parameters.seed,
+      stream: true,
+      ...stream_options,
+      prompt: currentPrompt
+    };
+    return params;
+  };
+
+  const handleSendMessage = async () => {
+    try {
+      await form.current?.form?.validateFields();
+      if (!parameters.model) return;
+      const params = generateParams();
+      setParams({
+        ...params,
+        seed: params.seed
+      });
+
+      form.current?.form?.setFieldValue('seed', params.seed);
+      console.log('params:', params, parameters);
+      submitMessage(params);
+      setRouteCache(routeCachekey['/playground/text-to-image'], true);
+    } catch (error) {
+      // console.log('error:', error);
+    } finally {
+      console.log('finally---------');
+      setRouteCache(routeCachekey['/playground/text-to-image'], false);
+    }
   };
 
   const handleCloseViewCode = () => {
     setShow(false);
   };
 
-  const handleToggleParamsStyle = () => {
-    if (isOpenaiCompatible) {
-      form.current?.form?.setFieldsValue({
-        ...advancedFieldsDefaultValus
-      });
-      setParams((pre: object) => {
-        return {
-          ..._.omit(pre, _.keys(openaiCompatibleFieldsDefaultValus)),
-          ...advancedFieldsDefaultValus
-        };
-      });
-    } else {
-      form.current?.form?.setFieldsValue({
-        ...openaiCompatibleFieldsDefaultValus
-      });
-      setParams((pre: object) => {
-        return {
-          ...openaiCompatibleFieldsDefaultValus,
-          ..._.omit(pre, _.keys(advancedFieldsDefaultValus))
-        };
-      });
-    }
-    setIsOpenaiCompatible(!isOpenaiCompatible);
-  };
-
-  const renderExtra = useMemo(() => {
-    if (!isOpenaiCompatible) {
-      return [];
-    }
-    return ImageconstExtraConfig.map((item: ParamsSchema) => {
-      return (
-        <Form.Item name={item.name} rules={item.rules} key={item.name}>
-          <SealSelect
-            {...item.attrs}
-            options={item.options}
-            label={
-              item.label.isLocalized
-                ? intl.formatMessage({ id: item.label.text })
-                : item.label.text
-            }
-          ></SealSelect>
-        </Form.Item>
-      );
-    });
-  }, [ImageconstExtraConfig, isOpenaiCompatible, intl]);
-
-  const handleFieldChange = (e: any) => {
-    if (e.target.id.indexOf('random_seed') > -1) {
-      form.current?.form?.setFieldValue('random_seed', e.target.checked);
-      setParams((pre: object) => {
-        return {
-          ...pre,
-          random_seed: e.target.checked
-        };
-      });
-    }
-  };
-  const renderAdvanced = useMemo(() => {
-    if (isOpenaiCompatible) {
-      return [];
-    }
-    const formValues = form.current?.form?.getFieldsValue();
-    return ImageAdvancedParamsConfig.map((item: ParamsSchema) => {
-      return (
-        <Form.Item
-          name={item.name}
-          rules={item.rules}
-          key={item.name}
-          noStyle={item.name === 'random_seed'}
-        >
-          <FieldComponent
-            style={item.name === 'random_seed' ? { marginBottom: 20 } : {}}
-            disabled={
-              item.disabledConfig
-                ? 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',
-              'description'
-            ])}
-          ></FieldComponent>
-        </Form.Item>
-      );
-    });
-  }, [ImageAdvancedParamsConfig, isOpenaiCompatible, intl, form.current]);
-
-  const renderCustomSize = useMemo(() => {
-    if (size === 'custom') {
-      return ImageCustomSizeConfig.map((item: ParamsSchema) => {
-        return (
-          <Form.Item
-            name={item.name}
-            rules={[
-              {
-                message: intl.formatMessage(
-                  { id: 'common.form.rule.input' },
-                  { name: intl.formatMessage({ id: item.label.text }) }
-                ),
-                required: true
-              }
-            ]}
-            key={item.name}
-          >
-            <FieldComponent
-              label={
-                item.label.isLocalized
-                  ? intl.formatMessage({ id: item.label.text })
-                  : item.label.text
-              }
-              description={
-                item.description?.isLocalized
-                  ? intl.formatMessage({ id: item.description.text })
-                  : item.description?.text
-              }
-              {..._.omit(item, [
-                'name',
-                'description',
-                'rules',
-                'disabledConfig',
-                'attrs'
-              ])}
-              {...item.attrs}
-              defaultValue={
-                item.name === 'height'
-                  ? modelMeta.default_height
-                  : modelMeta.default_width
-              }
-              max={
-                item.name === 'height'
-                  ? modelMeta.max_height || item.attrs?.max
-                  : modelMeta.max_width || item.attrs?.max
-              }
-            ></FieldComponent>
-          </Form.Item>
-        );
-      });
-    }
-    return null;
-  }, [size, intl, modelMeta]);
-
-  const handleOnModelChange = useCallback(
-    (val: string) => {
-      if (!val) return;
-
-      const model = modelList.find((item) => item.value === val);
-
-      setModelMeta(model?.meta || {});
-      const imageSizeOptions = getNewImageSizeOptions(model?.meta);
-      const w = model?.meta?.default_width || 512;
-      const h = model?.meta?.default_height || 512;
-      const defaultSize = imageSizeOptions.length ? `${w}x${h}` : 'custom';
-
-      if (!isOpenaiCompatible) {
-        setParams((pre: object) => {
-          const obj = _.merge({}, pre, _.pick(model?.meta, METAKEYS, {}));
-
-          return { ...obj, size: defaultSize, width: w, height: h };
-        });
-        form.current?.form?.setFieldsValue({
-          ..._.pick(model?.meta, METAKEYS, {}),
-          size: defaultSize,
-          width: w,
-          height: h
-        });
-      }
-      updateCacheFormData({
-        ..._.pick(model?.meta, METAKEYS, {}),
-        size: defaultSize,
-        width: w,
-        height: h
-      });
-    },
-    [modelList, isOpenaiCompatible]
-  );
-
   const handleOnScaleImageSize = useCallback(
     (data: { width: number; height: number }) => {
       const { width, height } = data;
@@ -806,53 +398,6 @@ const GroundImages: React.FC<MessageProps> = forwardRef((props, ref) => {
     );
   }, [uploadList, handleOnImgClick]);
 
-  useEffect(() => {
-    return () => {
-      requestToken.current?.abort?.();
-    };
-  }, []);
-
-  useEffect(() => {
-    if (size === 'custom') {
-      form.current?.form?.setFieldsValue({
-        width: cacheFormData.current.width || 512,
-        height: cacheFormData.current.height || 512
-      });
-      setParams((pre: object) => {
-        return {
-          ...pre,
-          width: cacheFormData.current.width || 512,
-          height: cacheFormData.current.height || 512
-        };
-      });
-    }
-  }, [size]);
-
-  useEffect(() => {
-    if (scroller.current) {
-      initialize(scroller.current);
-    }
-  }, [scroller.current, initialize]);
-
-  useEffect(() => {
-    if (paramsRef.current) {
-      innitializeParams(paramsRef.current);
-    }
-  }, [paramsRef.current, innitializeParams]);
-
-  useEffect(() => {
-    if (loading) {
-      updateScrollerPosition();
-    }
-  }, [imageList, loading]);
-
-  useEffect(() => {
-    if (imageList.length > messageListLengthCache.current) {
-      updateScrollerPosition();
-    }
-    messageListLengthCache.current = imageList.length;
-  }, [imageList.length]);
-
   return (
     <div className="ground-left-wrapper">
       <div className="ground-left">
@@ -975,19 +520,16 @@ const GroundImages: React.FC<MessageProps> = forwardRef((props, ref) => {
                   </Tooltip>
                 </div>
               }
-              onModelChange={handleOnModelChange}
-              setParams={setParams}
+              onValuesChange={handleOnValuesChange}
               paramsConfig={paramsConfig}
               initialValues={initialValues}
-              params={parameters}
-              selectedModel={selectModel}
               modelList={modelList}
-              extra={[renderCustomSize, ...renderExtra, ...renderAdvanced]}
             />
           </div>
         </div>
         <div style={{ width: 389 }}>
           <MessageInput
+            actions={['clear']}
             defaultSize={{
               minRows: 5,
               maxRows: 5
@@ -996,7 +538,6 @@ const GroundImages: React.FC<MessageProps> = forwardRef((props, ref) => {
             placeholer={intl.formatMessage({
               id: 'playground.input.prompt.holder'
             })}
-            actions={[]}
             title={
               <span className="font-600">
                 {intl.formatMessage({ id: 'playground.image.prompt' })}

src/pages/playground/hooks/use-init-meta.ts

@@ -146,6 +146,7 @@ export const useInitLLmMeta = (
     setModelMeta,
     setInitialValues,
     setParams,
+    setParamsConfig,
     formRef,
     paramsConfig,
     initialValues,
@@ -389,6 +390,9 @@ export const useInitImageMeta = (props: MessageProps) => {
         ]);
         setParams(allValues);
         updateCacheFormData(changeValues);
+      } else {
+        setParams(allValues);
+        updateCacheFormData(changeValues);
       }
     },
     [

src/pages/playground/hooks/use-text-image.ts

@@ -1,20 +1,34 @@
 import useOverlayScroller from '@/hooks/use-overlay-scroller';
-import { CREAT_IMAGE_API } from '@/pages/playground/apis';
 import { extractErrorMessage, promptList } from '@/pages/playground/config';
-import { generateRandomNumber } from '@/utils';
 import {
   fetchChunkedData,
+  fetchChunkedDataPostFormData,
   readLargeStreamData as readStreamData
 } from '@/utils/fetch-chunk-data';
 import _ from 'lodash';
 import { useEffect, useRef, useState } from 'react';
+import { CREAT_IMAGE_API, EDIT_IMAGE_API } from '../apis';
 
 const ODD_STRING = 'AAAABJRU5ErkJgg===';
 
-export default function useTextImage({ scroller, paramsRef }: any) {
+export default function useTextImage(props: any) {
+  const { scroller, paramsRef, chunkFields, API } = props;
   const [loading, setLoading] = useState(false);
   const [tokenResult, setTokenResult] = useState<any>(null);
-  const [imageList, setImageList] = useState<any[]>([]);
+  const [imageList, setImageList] = useState<
+    {
+      dataUrl: string;
+      height: number | string;
+      width: string | number;
+      maxHeight: string | number;
+      maxWidth: string | number;
+      uid: number;
+      span?: number;
+      loading?: boolean;
+      progress?: number;
+      preview?: boolean;
+    }[]
+  >([]);
   const [currentPrompt, setCurrentPrompt] = useState('');
   const messageId = useRef<number>(0);
   const requestToken = useRef<any>(null);
@@ -76,23 +90,6 @@ export default function useTextImage({ scroller, paramsRef }: any) {
         _.toNumber(item)
       );
 
-      // 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) => {
@@ -113,26 +110,23 @@ export default function useTextImage({ scroller, paramsRef }: any) {
       requestToken.current?.abort?.();
       requestToken.current = new AbortController();
 
-      const params = {
-        ..._.omitBy(
-          parameters,
-          (value: string, key: string) =>
-            !value || ['width', 'height', 'seed'].includes(key)
-        ),
-        size: `${imgSize[0]}x${imgSize[1]}`,
-        seed: parameters.random_seed ? generateRandomNumber() : parameters.seed,
-        stream: true,
-        stream_options: {
-          ...stream_options
-        },
-        prompt: currentPrompt
-      };
+      let result: any = {};
+      if (API === CREAT_IMAGE_API) {
+        result = await fetchChunkedData({
+          data: parameters,
+          url: `${API}?t=${Date.now()}`,
+          signal: requestToken.current.signal
+        });
+      }
+
+      if (API === EDIT_IMAGE_API) {
+        result = await fetchChunkedDataPostFormData({
+          data: parameters,
+          url: `${API}?t=${Date.now()}`,
+          signal: requestToken.current.signal
+        });
+      }
 
-      const result: any = await fetchChunkedData({
-        data: params,
-        url: `${CREAT_IMAGE_API}?t=${Date.now()}`,
-        signal: requestToken.current.signal
-      });
       if (result.error) {
         setTokenResult({
           error: true,
@@ -154,7 +148,7 @@ export default function useTextImage({ scroller, paramsRef }: any) {
         }
         chunk?.data?.forEach((item: any) => {
           const imgItem = newImageList[item.index];
-          if (item.b64_json && stream_options.chunk_results) {
+          if (item.b64_json && _.get(parameters, chunkFields)) {
             imgItem.dataUrl += removeBase64Suffix(item.b64_json, ODD_STRING);
           } else if (item.b64_json) {
             imgItem.dataUrl = `data:image/png;base64,${removeBase64Suffix(item.b64_json, ODD_STRING)}`;
@@ -169,8 +163,8 @@ export default function useTextImage({ scroller, paramsRef }: any) {
             maxWidth: `${imgSize[0]}px`,
             uid: imgItem.uid,
             span: imgItem.span,
-            loading: stream_options.chunk_results ? progress < 100 : false,
-            preview: progress >= 100,
+            loading: _.get(parameters, chunkFields) ? progress < 100 : false,
+            preview: API === CREAT_IMAGE_API ? progress >= 100 : false,
             progress: progress
           };
         });
@@ -208,6 +202,7 @@ export default function useTextImage({ scroller, paramsRef }: any) {
     imageList,
     promptList,
     currentPrompt,
+    setImageList,
     setTokenResult,
     setCurrentPrompt,
     handleStopConversation,