chore: embedding init params

2025-02-23 13:32:03 +08:00
parent bb8b00e547
commit 8c7eebe76c
4 changed files with 211 additions and 115 deletions
@@ -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(
-      paramsConfig?.flatMap((item) => item.dependencies || []),
-      form
+    const dependFieldsValue = Form.useWatch([], form);
+    console.log(
+      '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' })}
@@ -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 } =
-    useOverlayScroller();
-  const formRef = useRef<any>(null);
+  const {
+    handleOnValuesChange,
+    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 model = modelList.find((item) => item.value === value);
-    if (model) {
-      console.log('model:', model);
-      setMetaData(model.meta || {});
+  const renderExtra = useMemo(() => {
+    if (modelMeta?.n_ctx && modelMeta?.n_slot) {
+      return (
+        <Form.Item>
+          <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}
-            setParams={setParams}
+            onValuesChange={handleOnValuesChange}
            paramsConfig={paramsConfig}
            initialValues={initialValues}
-            params={parameters}
-            selectedModel={selectModel}
            modelList={modelList}
-            extra={
-              metaData?.n_ctx &&
-              metaData?.n_slot && (
-                <Form.Item>
-                  <SealInputNumber
-                    disabled
-                    label="Max Tokens"
-                    value={_.divide(metaData?.n_ctx, metaData?.n_slot)}
-                  ></SealInputNumber>
-                </Form.Item>
-              )
-            }
+            extra={renderExtra}
          />
        </div>
      </div>
@@ -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
+};
@@ -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> = {
-  seed: 'seed',
-  stop: 'stop',
-  temperature: 'temperature',
-  top_p: 'top_p',
-  n_ctx: 'n_ctx',
-  n_slot: 'n_slot',
-  max_model_len: 'max_model_len'
-};
+interface MessageProps {
+  modelList: Global.BaseOption<string>[];
+  loaded?: boolean;
+  ref?: any;
+}

-const IMG_METAKEYS = [
-  'sample_method',
-  'sampling_steps',
-  'schedule_method',
-  'cfg_scale',
-  'guidance',
-  'negative_prompt'
-];
+interface InitMetaOptions {
+  metaKeys?: Record<string, any> | string[];
+  defaultValues?: Record<string, any>;
+  defaultParamsConfig?: ParamsSchema[];
+}

-const llmInitialValues = {
-  seed: null,
-  stop: null,
-  temperature: 1,
-  top_p: 1,
-  max_tokens: 1024
-};
+// init not image meta, for params form
+export const useInitLLmMeta = (
+  props: MessageProps,
+  options: InitMetaOptions
+) => {
+  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 = {
-  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 { initialize: innitializeParams } = useOverlayScroller();

-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 obj = Object.entries(LLM_METAKEYS).reduce(
-      (acc: any, [key, value]) => {
-        const val = modelMetaValue[key];
-        if (val && _.hasIn(modelMetaValue, key)) {
-          acc[value] = val;
-        }
-        return acc;
-      },
-      {}
-    );
+    const modelMetaValue = _.pick(modelMeta, _.keys(metaKeys));
+    const obj = Object.entries(metaKeys).reduce((acc: any, [key, value]) => {
+      const val = modelMetaValue[key];
+      if (val && _.hasIn(modelMetaValue, key)) {
+        acc[value] = val;
+      }
+      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 {
-  modelList: Global.BaseOption<string>[];
-  loaded?: boolean;
-  ref?: any;
-}
+  const handleOnValuesChange = useCallback(
+    (changeValues: Record<string, any>, allValues: Record<string, any>) => {
+      setParams(allValues);
+    },
+    []
+  );
+
+  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;