chore: embedding init params

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

@@ -20,6 +20,7 @@ type ParamsSettingsProps = {
   showModelSelector?: boolean;
   modelList: Global.BaseOption<string>[];
   onValuesChange?: (changeValues: any, value: Record<string, any>) => void;
+  onModelChange?: (model: string) => void;
   paramsConfig?: ParamsSchema[];
   initialValues?: Record<string, any>;
   extra?: React.ReactNode;
@@ -29,6 +30,7 @@ const ParamsSettings: React.FC<ParamsSettingsProps> = forwardRef(
   (
     {
       onValuesChange,
+      onModelChange,
       parametersTitle,
       initialValues,
       paramsConfig,
@@ -41,10 +43,13 @@ const ParamsSettings: React.FC<ParamsSettingsProps> = forwardRef(
     const intl = useIntl();
     const [form] = Form.useForm();
     const formId = useId();
+    console.log('dynamic----params');
 
-    const dependFieldsValue = Form.useWatch(
+    const dependFieldsValue = Form.useWatch([], form);
-      paramsConfig?.flatMap((item) => item.dependencies || []),
+    console.log(
-      form
+      'dependFieldsValue===',
+      dependFieldsValue,
+      paramsConfig?.flatMap((item) => item.dependencies || [])
     );
 
     useImperativeHandle(ref, () => ({
@@ -65,6 +70,10 @@ const ParamsSettings: React.FC<ParamsSettingsProps> = forwardRef(
       console.log('handleOnFinishFailed', errorInfo);
     };
 
+    const handleOnModelChange = (model: string) => {
+      onModelChange?.(model);
+    };
+
     const handleValuesChange = useCallback(
       (changedValues: any, allValues: any) => {
         const normalizedValues = Object.fromEntries(
@@ -155,6 +164,7 @@ const ParamsSettings: React.FC<ParamsSettingsProps> = forwardRef(
                 ]}
               >
                 <SealSelect
+                  onChange={handleOnModelChange}
                   showSearch={true}
                   options={modelList}
                   label={intl.formatMessage({ id: 'playground.model' })}

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

@@ -13,7 +13,7 @@ import {
   PlusOutlined,
   SendOutlined
 } from '@ant-design/icons';
-import { useIntl, useSearchParams } from '@umijs/max';
+import { useIntl } from '@umijs/max';
 import { Button, Checkbox, Form, Segmented, Spin, Tabs, Tooltip } from 'antd';
 import classNames from 'classnames';
 import _ from 'lodash';
@@ -32,7 +32,8 @@ import {
 } from 'react';
 import { useHotkeys } from 'react-hotkeys-hook';
 import { EMBEDDING_API, handleEmbedding } from '../apis';
-import { ParamsSchema } from '../config/types';
+import { LLM_METAKEYS } from '../hooks/config';
+import { useInitLLmMeta } from '../hooks/use-init-meta';
 import '../style/ground-left.less';
 import '../style/rerank.less';
 import { generateEmbeddingCode } from '../view-code/embedding';
@@ -47,10 +48,6 @@ interface MessageProps {
   ref?: any;
 }
 
-const paramsConfig: ParamsSchema[] = [];
-
-const initialValues = {};
-
 const GroundEmbedding: React.FC<MessageProps> = forwardRef((props, ref) => {
   const { modelList } = props;
   const acceptType =
@@ -59,9 +56,6 @@ const GroundEmbedding: React.FC<MessageProps> = forwardRef((props, ref) => {
 
   const intl = useIntl();
   const requestSource = useRequestToken();
-  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);
@@ -69,7 +63,6 @@ const GroundEmbedding: React.FC<MessageProps> = forwardRef((props, ref) => {
   const contentRef = useRef<any>('');
   const scroller = useRef<any>(null);
   const inputListRef = useRef<any>(null);
-  const paramsRef = useRef<any>(null);
   const messageListLengthCache = useRef<number>(0);
   const requestToken = useRef<any>(null);
   const [fileList, setFileList] = useState<
@@ -87,7 +80,6 @@ const GroundEmbedding: React.FC<MessageProps> = forwardRef((props, ref) => {
   const [lessTwoInput, setLessTwoInput] = useState<boolean>(false);
   const multiplePasteEnable = useRef<boolean>(true);
   const selectionTextRef = useRef<any>(null);
-  const [metaData, setMetaData] = useState<Record<string, any>>({});
 
   const [textList, setTextList] = useState<
     { text: string; uid: number | string; name: string }[]
@@ -111,9 +103,20 @@ const GroundEmbedding: React.FC<MessageProps> = forwardRef((props, ref) => {
   const { initialize, updateScrollerPosition: updateDocumentScrollerPosition } =
     useOverlayScroller();
 
-  const { initialize: innitializeParams, updateScrollerPosition } =
+  const {
-    useOverlayScroller();
+    handleOnValuesChange,
-  const formRef = useRef<any>(null);
+    formRef,
+    paramsConfig,
+    initialValues,
+    parameters,
+    paramsRef,
+    modelMeta,
+    formFields
+  } = useInitLLmMeta(props, {
+    defaultValues: {},
+    defaultParamsConfig: [],
+    metaKeys: LLM_METAKEYS
+  });
 
   useImperativeHandle(ref, () => {
     return {
@@ -127,17 +130,18 @@ const GroundEmbedding: React.FC<MessageProps> = forwardRef((props, ref) => {
   });
 
   const viewCodeContent = useMemo(() => {
+    console.log('viewCodeContent:', embeddingData.copyValue);
     return generateEmbeddingCode({
       api: EMBEDDING_API,
       parameters: {
-        ...parameters,
+        ..._.pick(parameters, ['model', ..._.split(formFields, ',')]),
         input: [
           ...textList.map((item) => item.text).filter((item) => item),
           ...fileList.map((item) => item.text).filter((item) => item)
         ]
       }
     });
-  }, [parameters, textList, fileList]);
+  }, [parameters, formFields, textList, fileList]);
 
   const inputEmpty = useMemo(() => {
     const list = [...textList, ...fileList];
@@ -378,13 +382,20 @@ const GroundEmbedding: React.FC<MessageProps> = forwardRef((props, ref) => {
     setOutputType(value);
   };
 
-  const handleModelChange = (value: string) => {
+  const renderExtra = useMemo(() => {
-    const model = modelList.find((item) => item.value === value);
+    if (modelMeta?.n_ctx && modelMeta?.n_slot) {
-    if (model) {
+      return (
-      console.log('model:', model);
+        <Form.Item>
-      setMetaData(model.meta || {});
+          <SealInputNumber
+            disabled
+            label="Max Tokens"
+            value={_.divide(modelMeta?.n_ctx, modelMeta?.n_slot)}
+          ></SealInputNumber>
+        </Form.Item>
+      );
     }
-  };
+    return null;
+  }, modelMeta);
 
   const outputItems = useMemo(() => {
     return [
@@ -444,12 +455,6 @@ const GroundEmbedding: React.FC<MessageProps> = forwardRef((props, ref) => {
     }
   }, [scroller.current, initialize]);
 
-  useEffect(() => {
-    if (paramsRef.current) {
-      innitializeParams(paramsRef.current);
-    }
-  }, [paramsRef.current, innitializeParams]);
-
   useEffect(() => {
     if (textList.length + fileList.length > messageListLengthCache.current) {
       updateDocumentScrollerPosition();
@@ -706,25 +711,11 @@ const GroundEmbedding: React.FC<MessageProps> = forwardRef((props, ref) => {
         <div className="box">
           <DynamicParams
             ref={formRef}
-            onModelChange={handleModelChange}
+            onValuesChange={handleOnValuesChange}
-            setParams={setParams}
             paramsConfig={paramsConfig}
             initialValues={initialValues}
-            params={parameters}
-            selectedModel={selectModel}
             modelList={modelList}
-            extra={
+            extra={renderExtra}
-              metaData?.n_ctx &&
-              metaData?.n_slot && (
-                <Form.Item>
-                  <SealInputNumber
-                    disabled
-                    label="Max Tokens"
-                    value={_.divide(metaData?.n_ctx, metaData?.n_slot)}
-                  ></SealInputNumber>
-                </Form.Item>
-              )
-            }
           />
         </div>
       </div>

src/pages/playground/hooks/config.ts

@@ -0,0 +1,49 @@
+export const LLM_METAKEYS: Record<string, any> = {
+  seed: 'seed',
+  stop: 'stop',
+  temperature: 'temperature',
+  top_p: 'top_p',
+  n_ctx: 'n_ctx',
+  n_slot: 'n_slot',
+  max_model_len: 'max_model_len'
+};
+
+export const IMG_METAKEYS = [
+  'sample_method',
+  'sampling_steps',
+  'schedule_method',
+  'cfg_scale',
+  'guidance',
+  'negative_prompt'
+];
+
+export const llmInitialValues = {
+  seed: null,
+  stop: null,
+  temperature: 1,
+  top_p: 1,
+  max_tokens: 1024
+};
+
+export 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'
+};
+
+export const openaiCompatibleFieldsDefaultValus = {
+  quality: 'standard',
+  style: null
+};
+
+export const imgInitialValues = {
+  n: 1,
+  size: '512x512',
+  width: 512,
+  height: 512
+};

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

@@ -1,3 +1,4 @@
+import useOverlayScroller from '@/hooks/use-overlay-scroller';
 import {
   ImageAdvancedParamsConfig,
   ImageCountConfig,
@@ -9,74 +10,71 @@ import {
 } from '@/pages/playground/config/params-config';
 import { useSearchParams } from '@umijs/max';
 import _ from 'lodash';
-import React, { useCallback, useEffect, useRef, useState } from 'react';
+import React, {
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState
+} from 'react';
 import { ParamsSchema } from '../config/types';
+import {
+  IMG_METAKEYS,
+  advancedFieldsDefaultValus,
+  imgInitialValues,
+  openaiCompatibleFieldsDefaultValus
+} from './config';
 
-const LLM_METAKEYS: Record<string, any> = {
+interface MessageProps {
-  seed: 'seed',
+  modelList: Global.BaseOption<string>[];
-  stop: 'stop',
+  loaded?: boolean;
-  temperature: 'temperature',
+  ref?: any;
-  top_p: 'top_p',
+}
-  n_ctx: 'n_ctx',
-  n_slot: 'n_slot',
-  max_model_len: 'max_model_len'
-};
 
-const IMG_METAKEYS = [
+interface InitMetaOptions {
-  'sample_method',
+  metaKeys?: Record<string, any> | string[];
-  'sampling_steps',
+  defaultValues?: Record<string, any>;
-  'schedule_method',
+  defaultParamsConfig?: ParamsSchema[];
-  'cfg_scale',
+}
-  'guidance',
-  'negative_prompt'
-];
 
-const llmInitialValues = {
+// init not image meta, for params form
-  seed: null,
+export const useInitLLmMeta = (
-  stop: null,
+  props: MessageProps,
-  temperature: 1,
+  options: InitMetaOptions
-  top_p: 1,
+) => {
-  max_tokens: 1024
+  const { modelList } = props;
-};
+  const {
+    metaKeys = {},
+    defaultValues = {},
+    defaultParamsConfig = []
+  } = options;
+  const formRef = useRef<any>(null);
+  const [searchParams] = useSearchParams();
+  const selectModel = searchParams.get('model') || '';
+  const [modelMeta, setModelMeta] = useState<any>({});
+  const [initialValues, setInitialValues] = useState<any>({
+    ...defaultValues,
+    model: selectModel
+  });
+  const [parameters, setParams] = useState<any>({
+    model: selectModel
+  });
+  const [paramsConfig, setParamsConfig] =
+    useState<ParamsSchema[]>(defaultParamsConfig);
+  const paramsRef = useRef<any>(null);
 
-const advancedFieldsDefaultValus = {
+  const { initialize: innitializeParams } = useOverlayScroller();
-  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 imgInitialValues = {
-  n: 1,
-  size: '512x512',
-  width: 512,
-  height: 512
-};
-
-// init not image meta
-export const useInitLLmMeta = () => {
   const extractLLMMeta = (meta: any) => {
     const modelMeta = meta || {};
-    const modelMetaValue = _.pick(modelMeta, _.keys(LLM_METAKEYS));
+    const modelMetaValue = _.pick(modelMeta, _.keys(metaKeys));
-    const obj = Object.entries(LLM_METAKEYS).reduce(
+    const obj = Object.entries(metaKeys).reduce((acc: any, [key, value]) => {
-      (acc: any, [key, value]) => {
+      const val = modelMetaValue[key];
-        const val = modelMetaValue[key];
+      if (val && _.hasIn(modelMetaValue, key)) {
-        if (val && _.hasIn(modelMetaValue, key)) {
+        acc[value] = val;
-          acc[value] = val;
+      }
-        }
+      return acc;
-        return acc;
+    }, {});
-      },
-      {}
-    );
 
     let defaultMaxTokens = 1024;
 
@@ -87,7 +85,7 @@ export const useInitLLmMeta = () => {
     }
 
     return {
-      form: _.merge({}, llmInitialValues, {
+      form: _.merge({}, defaultValues, {
         ..._.omit(obj, ['n_ctx', 'n_slot', 'max_model_len']),
         max_tokens: defaultMaxTokens
       }),
@@ -98,14 +96,62 @@ export const useInitLLmMeta = () => {
     };
   };
 
-  return { extractLLMMeta };
+  const formFields = useMemo(() => {
-};
+    const fields = paramsConfig?.map((item) => item.name);
+    return fields?.join(',');
+  }, [paramsConfig]);
 
-interface MessageProps {
+  const handleOnValuesChange = useCallback(
-  modelList: Global.BaseOption<string>[];
+    (changeValues: Record<string, any>, allValues: Record<string, any>) => {
-  loaded?: boolean;
+      setParams(allValues);
-  ref?: any;
+    },
-}
+    []
+  );
+
+  const handleOnModelChange = useCallback(
+    (val: string) => {
+      if (!val) return;
+      const model = modelList.find((item) => item.value === val);
+      const { form: initialData, meta } = extractLLMMeta(model?.meta);
+      setModelMeta(meta || {});
+      setInitialValues({
+        ...initialData,
+        model: val
+      });
+      setParams({
+        ...initialData,
+        model: val
+      });
+    },
+    [modelList]
+  );
+
+  useEffect(() => {
+    if (!parameters.model && modelList.length) {
+      const model = modelList[0]?.value;
+      handleOnModelChange(model);
+    }
+  }, [modelList, parameters.model, handleOnModelChange]);
+
+  useEffect(() => {
+    if (paramsRef.current) {
+      innitializeParams(paramsRef.current);
+    }
+  }, [paramsRef.current, innitializeParams]);
+
+  return {
+    extractLLMMeta,
+    handleOnModelChange,
+    handleOnValuesChange,
+    formRef,
+    paramsConfig,
+    initialValues,
+    parameters,
+    modelMeta,
+    paramsRef,
+    formFields
+  };
+};
 
 export const useInitImageMeta = (props: MessageProps) => {
   const { modelList } = props;