refactor: create image hooks

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

@@ -1,10 +1,7 @@
-import FieldWrapper from '@/components/seal-form/field-wrapper';
-import SealInput from '@/components/seal-form/seal-input';
+import FieldComponent from '@/components/seal-form/field-component';
 import SealSelect from '@/components/seal-form/seal-select';
-import { INPUT_WIDTH } from '@/constants';
-import { InfoCircleOutlined } from '@ant-design/icons';
 import { useIntl } from '@umijs/max';
-import { Form, InputNumber, Slider, Tooltip } from 'antd';
+import { Form } from 'antd';
 import _ from 'lodash';
 import {
   forwardRef,
@@ -16,25 +13,13 @@ import {
   useMemo
 } from 'react';
 import { ParamsSchema } from '../config/types';
-import CustomLabelStyles from '../style/custom-label.less';
-
-type ParamsSettingsFormProps = {
-  top_n?: number;
-  model?: string;
-};
 
 type ParamsSettingsProps = {
   ref?: any;
   parametersTitle?: React.ReactNode;
-  selectedModel?: string;
   showModelSelector?: boolean;
-  params?: Record<string, any>;
-  model?: string;
   modelList: Global.BaseOption<string>[];
   onValuesChange?: (changeValues: any, value: Record<string, any>) => void;
-  setParams: (params: any) => void;
-  onModelChange?: (model: string) => void;
-  globalParams?: Record<string, any>;
   paramsConfig?: ParamsSchema[];
   initialValues?: Record<string, any>;
   extra?: React.ReactNode;
@@ -43,16 +28,11 @@ type ParamsSettingsProps = {
 const ParamsSettings: React.FC<ParamsSettingsProps> = forwardRef(
   (
     {
-      setParams,
       onValuesChange,
-      onModelChange,
       parametersTitle,
-      selectedModel,
-      globalParams,
       initialValues,
       paramsConfig,
       modelList,
-      params,
       showModelSelector = true,
       extra
     },
@@ -62,34 +42,20 @@ const ParamsSettings: React.FC<ParamsSettingsProps> = forwardRef(
     const [form] = Form.useForm();
     const formId = useId();
 
+    const dependFieldsValue = Form.useWatch(
+      paramsConfig?.flatMap((item) => item.dependencies || []),
+      form
+    );
+
     useImperativeHandle(ref, () => ({
       form
     }));
 
     useEffect(() => {
-      let model = selectedModel || '';
-
-      if (showModelSelector) {
-        model = model || _.get(modelList, '[0].value');
-      }
-
       form.setFieldsValue({
-        model: model,
         ...initialValues
       });
-      setParams({
-        model: model,
-        ...initialValues
-      });
-      onModelChange?.(model);
-    }, [modelList, showModelSelector, selectedModel, initialValues]);
-
-    const handleModelChange = useCallback(
-      (value: string) => {
-        onModelChange?.(value);
-      },
-      [onModelChange]
-    );
+    }, [initialValues]);
 
     const handleOnFinish = (values: any) => {
       console.log('handleOnFinish', values);
@@ -101,172 +67,60 @@ const ParamsSettings: React.FC<ParamsSettingsProps> = forwardRef(
 
     const handleValuesChange = useCallback(
       (changedValues: any, allValues: any) => {
-        setParams?.(allValues);
-        onValuesChange?.(changedValues, allValues);
-      },
-      [onValuesChange, setParams]
-    );
-    const handleFieldValueChange = useCallback(
-      (val: any, field: string) => {
-        const values = form.getFieldsValue();
-        form.setFieldsValue({
-          ...values,
-          [field]: val
-        });
-        setParams({
-          ...values,
-          [field]: val
-        });
-        onValuesChange?.(
-          { [field]: val },
-          {
-            ...values,
-            [field]: val
-          }
+        const normalizedValues = Object.fromEntries(
+          Object.entries(changedValues).map(([key, value]: [string, any]) => [
+            key,
+            value?.target?.checked ?? value?.target?.value ?? value
+          ])
         );
+        form.setFieldsValue(normalizedValues);
+        onValuesChange?.(normalizedValues, {
+          ...allValues,
+          ...normalizedValues
+        });
       },
-      [form, setParams, onValuesChange]
+      [onValuesChange]
     );
 
-    useEffect(() => {
-      form.setFieldsValue(globalParams);
-    }, [globalParams]);
-
-    const renderLabel = useCallback(
-      (args: { field: string; label: string; description: string }) => {
-        return (
-          <span
-            className={CustomLabelStyles.label}
-            style={{ width: INPUT_WIDTH.mini }}
-          >
-            <span className="text">
-              {args.description ? (
-                <Tooltip title={args.description}>
-                  <span> {args.label}</span>
-                  <span className="m-l-5">
-                    <InfoCircleOutlined />
-                  </span>
-                </Tooltip>
-              ) : (
-                <span>{args.label}</span>
-              )}
-            </span>
-
-            <InputNumber
-              className="label-val"
-              variant="outlined"
-              size="small"
-              value={form.getFieldValue(args.field)}
-              controls={false}
-              onChange={(val) => handleFieldValueChange(val, args.field)}
-            ></InputNumber>
-          </span>
-        );
-      },
-      [form, handleFieldValueChange]
-    );
-
-    const renderDescription = useCallback(
-      (item: ParamsSchema) => {
-        if (!item.description) {
-          return null;
-        }
-        if (item.description.html) {
-          return (
-            <div
-              className="m-t-5"
-              dangerouslySetInnerHTML={{
-                __html: intl.formatMessage({ id: item.description.text })
-              }}
-            ></div>
-          );
-        }
-        return intl.formatMessage({ id: item.description.text });
-      },
-      [intl]
-    );
     const renderFields = useMemo(() => {
-      console.log('paramsConfig++++++++++++');
-      if (!paramsConfig?.length) {
+      if (!paramsConfig) {
         return null;
       }
-      return paramsConfig.map((item: ParamsSchema) => {
-        if (item.type === 'InputNumber') {
-          return (
-            <Form.Item name={item.name} rules={item.rules} key={item.name}>
-              <SealInput.Number
-                {...item.attrs}
-                style={{ width: '100%' }}
-                label={
-                  item.label.isLocalized
-                    ? intl.formatMessage({ id: item.label.text })
-                    : item.label.text
-                }
-              ></SealInput.Number>
-            </Form.Item>
-          );
-        }
-        if (item.type === 'TextArea') {
-          return (
-            <Form.Item name={item.name} rules={item.rules} key={item.name}>
-              <SealInput.TextArea
-                {...item.attrs}
-                style={{ width: '100%' }}
-                label={
-                  item.label.isLocalized
-                    ? intl.formatMessage({ id: item.label.text })
-                    : item.label.text
-                }
-              ></SealInput.TextArea>
-            </Form.Item>
-          );
-        }
-        if (item.type === 'Select') {
-          return (
-            <Form.Item name={item.name} rules={item.rules} key={item.name}>
-              <SealSelect
-                {...item.attrs}
-                description={renderDescription(item)}
-                options={item.options}
-                label={
-                  item.label.isLocalized
-                    ? intl.formatMessage({ id: item.label.text })
-                    : item.label.text
-                }
-              ></SealSelect>
-            </Form.Item>
-          );
-        }
-        if (item.type === 'Slider') {
-          return (
-            <Form.Item name={item.name} rules={item.rules} key={item.name}>
-              <FieldWrapper
-                label={renderLabel({
-                  field: item.name,
-                  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 || ''
-                })}
-                style={{ padding: '20px 2px 0' }}
-                variant="borderless"
-              >
-                <Slider
-                  {...item.attrs}
-                  style={{ marginBottom: 0, marginTop: 16, marginInline: 0 }}
-                  tooltip={{ open: false }}
-                  value={form.getFieldValue(item.name) || undefined}
-                  onChange={(val) => handleFieldValueChange(val, item.name)}
-                ></Slider>
-              </FieldWrapper>
-            </Form.Item>
-          );
-        }
-        return null;
+      console.log('renderFields---------');
+      const formValues = form?.getFieldsValue();
+      return paramsConfig?.map((item: ParamsSchema) => {
+        return (
+          <Form.Item
+            name={item.name}
+            rules={item.rules}
+            key={item.name}
+            {...item.formItemAttrs}
+          >
+            <FieldComponent
+              disabled={
+                item.disabledConfig
+                  ? item.disabledConfig?.when?.(formValues)
+                  : item.disabled
+              }
+              description={
+                item.description?.isLocalized
+                  ? intl.formatMessage({ id: item.description.text })
+                  : item.description?.text
+              }
+              onChange={null}
+              {..._.omit(item, [
+                'name',
+                'rules',
+                'formItemAttrs',
+                'dependencies',
+                'disabledConfig',
+                'description'
+              ])}
+            ></FieldComponent>
+          </Form.Item>
+        );
       });
-    }, [paramsConfig, params, renderDescription, intl]);
+    }, [paramsConfig, intl, dependFieldsValue]);
 
     return (
       <Form
@@ -286,7 +140,7 @@ const ParamsSettings: React.FC<ParamsSettingsProps> = forwardRef(
                   </span>
                 )}
               </h3>
-              <Form.Item<ParamsSettingsFormProps>
+              <Form.Item
                 name="model"
                 rules={[
                   {
@@ -301,7 +155,6 @@ const ParamsSettings: React.FC<ParamsSettingsProps> = forwardRef(
                 ]}
               >
                 <SealSelect
-                  onChange={handleModelChange}
                   showSearch={true}
                   options={modelList}
                   label={intl.formatMessage({ id: 'playground.model' })}

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

@@ -1,19 +1,11 @@
 import { setRouteCache } from '@/atoms/route-cache';
 import AlertInfo from '@/components/alert-info';
 import IconFont from '@/components/icon-font';
-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 ThumbImg from '@/pages/playground/components/thumb-img';
-import { generateRandomNumber } from '@/utils';
-import {
-  fetchChunkedData,
-  readLargeStreamData as readStreamData
-} 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 { useIntl } from '@umijs/max';
+import { Button, Tooltip } from 'antd';
 import classNames from 'classnames';
 import _ from 'lodash';
 import 'overlayscrollbars/overlayscrollbars.css';
@@ -21,22 +13,15 @@ import React, {
   forwardRef,
   memo,
   useCallback,
-  useEffect,
   useImperativeHandle,
   useMemo,
   useRef,
   useState
 } from 'react';
 import { CREAT_IMAGE_API } from '../apis';
-import { extractErrorMessage, promptList } from '../config';
-import {
-  ImageAdvancedParamsConfig,
-  ImageCustomSizeConfig,
-  ImageParamsConfig,
-  ImageconstExtraConfig,
-  imageSizeOptions
-} from '../config/params-config';
-import { MessageItem, ParamsSchema } from '../config/types';
+import { MessageItem } 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';
@@ -50,80 +35,39 @@ interface MessageProps {
   ref?: any;
 }
 
-// for advanced fields
-const METAKEYS = [
-  'sample_method',
-  'sampling_steps',
-  'schedule_method',
-  'cfg_scale',
-  'guidance',
-  'negative_prompt'
-];
-
-const ODD_STRING = 'AAAABJRU5ErkJgg===';
-
-const advancedFieldsDefaultValus = {
-  seed: null,
-  sample_method: 'euler_a',
-  cfg_scale: 4.5,
-  guidance: 3.5,
-  sampling_steps: 10,
-  negative_prompt: null,
-  schedule_method: 'discrete',
-  preview: 'preview_faster'
-};
-
-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;
-    }[]
-  >([]);
 
   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 [modelMeta, setModelMeta] = useState<any>({});
-  const form = useRef<any>(null);
   const inputRef = useRef<any>(null);
-  const cacheFormData = useRef<Record<string, any>>({});
 
-  const size = Form.useWatch('size', form.current?.form);
-
-  const { initialize, updateScrollerPosition } = useOverlayScroller();
-  const { initialize: innitializeParams } = useOverlayScroller();
+  const {
+    handleOnValuesChange,
+    handleToggleParamsStyle,
+    form,
+    paramsConfig,
+    initialValues,
+    parameters,
+    isOpenaiCompatible
+  } = useInitImageMeta(props);
+  const {
+    loading,
+    tokenResult,
+    imageList,
+    promptList,
+    currentPrompt,
+    setCurrentPrompt,
+    handleClear,
+    handleStopConversation,
+    submitMessage
+  } = useTextImage({
+    scroller,
+    paramsRef
+  });
 
   useImperativeHandle(ref, () => {
     return {
@@ -137,58 +81,10 @@ 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 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: ParamsSchema[] = ImageParamsConfig.map((item: ParamsSchema) => {
-      if (item.name === 'size') {
-        return {
-          ...item,
-          options: newImageSizeOptions
-        };
-      }
-      return item;
-    });
-    if (!newImageSizeOptions.length) {
-      result = result.filter((item) => item.name !== 'size');
-    }
-    return result;
-  }, [modelMeta]);
-
   const generateNumber = (min: number, max: number) => {
     return Math.floor(Math.random() * (max - min + 1) + min);
   };
 
-  const updateCacheFormData = (values: Record<string, any>) => {
-    _.merge(cacheFormData.current, values);
-  };
-
   const handleRandomPrompt = useCallback(() => {
     const randomIndex = generateNumber(0, promptList.length - 1);
     const randomPrompt = promptList[randomIndex];
@@ -199,25 +95,6 @@ const GroundImages: React.FC<MessageProps> = forwardRef((props, ref) => {
     });
   }, []);
 
-  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 = 12;
-    }
-    if (parameters.n === 4) {
-      size.span = 12;
-    }
-    return size;
-  }, [parameters.n]);
-
   const finalParameters = useMemo(() => {
     if (parameters.size === 'custom') {
       return {
@@ -234,6 +111,7 @@ const GroundImages: React.FC<MessageProps> = forwardRef((props, ref) => {
   }, [parameters]);
 
   const viewCodeContent = useMemo(() => {
+    console.log('finalParameters:', finalParameters);
     if (isOpenaiCompatible) {
       return generateOpenaiImageCode({
         api: CREAT_IMAGE_API,
@@ -250,401 +128,30 @@ const GroundImages: React.FC<MessageProps> = forwardRef((props, ref) => {
         prompt: currentPrompt
       }
     });
-  }, [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;
-      const size: any = setImageSize();
-      setLoading(true);
-      setMessageId();
-      setTokenResult(null);
-      setCurrentPrompt(current?.content || '');
-      setRouteCache(routeCachekey['/playground/text-to-image'], true);
-      const imgSize = _.split(finalParameters.size, 'x').map((item: number) =>
-        _.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) => {
-          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: {
-          ...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: `${CREAT_IMAGE_API}?t=${Date.now()}`,
-        signal: requestToken.current.signal
-      });
-      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 && stream_options.chunk_results) {
-            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: stream_options.chunk_results ? progress < 100 : false,
-            preview: progress >= 100,
-            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);
-  };
+  }, [finalParameters, isOpenaiCompatible, currentPrompt]);
 
   const handleInputChange = (e: any) => {
     setCurrentPrompt(e.target.value);
   };
 
-  const handleSendMessage = (message: Omit<MessageItem, 'uid'>) => {
-    const currentMessage = message.content ? message : undefined;
-    submitMessage(currentMessage);
+  const handleSendMessage = async (message: Omit<MessageItem, 'uid'>) => {
+    try {
+      await form.current?.form?.validateFields();
+      if (!parameters.model) return;
+      submitMessage(finalParameters);
+      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,
-        ..._.pick(cacheFormData.current, _.keys(advancedFieldsDefaultValus))
-      });
-      setParams((pre: object) => {
-        return {
-          ..._.omit(pre, _.keys(openaiCompatibleFieldsDefaultValus)),
-          ...advancedFieldsDefaultValus,
-          ..._.pick(cacheFormData.current, _.keys(advancedFieldsDefaultValus))
-        };
-      });
-    } else {
-      form.current?.form?.setFieldsValue({
-        ...openaiCompatibleFieldsDefaultValus
-      });
-      setParams((pre: object) => {
-        return {
-          ...openaiCompatibleFieldsDefaultValus,
-          ..._.omit(pre, _.keys(advancedFieldsDefaultValus))
-        };
-      });
-    }
-    setIsOpenaiCompatible(!isOpenaiCompatible);
-    updateCacheFormData(parameters);
-  };
-
-  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) => {
-      if (item.name === 'strength') {
-        return null;
-      }
-      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]
-  );
-
-  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">
@@ -771,14 +278,10 @@ 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>