diff --git a/src/pages/playground/components/dynamic-params.tsx b/src/pages/playground/components/dynamic-params.tsx index 3b2e8301..fa56aedb 100644 --- a/src/pages/playground/components/dynamic-params.tsx +++ b/src/pages/playground/components/dynamic-params.tsx @@ -20,6 +20,7 @@ type ParamsSettingsProps = { showModelSelector?: boolean; modelList: Global.BaseOption[]; onValuesChange?: (changeValues: any, value: Record) => void; + onModelChange?: (model: string) => void; paramsConfig?: ParamsSchema[]; initialValues?: Record; extra?: React.ReactNode; @@ -29,6 +30,7 @@ const ParamsSettings: React.FC = forwardRef( ( { onValuesChange, + onModelChange, parametersTitle, initialValues, paramsConfig, @@ -41,10 +43,13 @@ const ParamsSettings: React.FC = 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 = 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 = forwardRef( ]} > = forwardRef((props, ref) => { const { modelList } = props; const acceptType = @@ -59,9 +56,6 @@ const GroundEmbedding: React.FC = forwardRef((props, ref) => { const intl = useIntl(); const requestSource = useRequestToken(); - const [searchParams] = useSearchParams(); - const selectModel = searchParams.get('model') || ''; - const [parameters, setParams] = useState({}); const [show, setShow] = useState(false); const [loading, setLoading] = useState(false); const [tokenResult, setTokenResult] = useState(null); @@ -69,7 +63,6 @@ const GroundEmbedding: React.FC = forwardRef((props, ref) => { const contentRef = useRef(''); const scroller = useRef(null); const inputListRef = useRef(null); - const paramsRef = useRef(null); const messageListLengthCache = useRef(0); const requestToken = useRef(null); const [fileList, setFileList] = useState< @@ -87,7 +80,6 @@ const GroundEmbedding: React.FC = forwardRef((props, ref) => { const [lessTwoInput, setLessTwoInput] = useState(false); const multiplePasteEnable = useRef(true); const selectionTextRef = useRef(null); - const [metaData, setMetaData] = useState>({}); const [textList, setTextList] = useState< { text: string; uid: number | string; name: string }[] @@ -111,9 +103,20 @@ const GroundEmbedding: React.FC = forwardRef((props, ref) => { const { initialize, updateScrollerPosition: updateDocumentScrollerPosition } = useOverlayScroller(); - const { initialize: innitializeParams, updateScrollerPosition } = - useOverlayScroller(); - const formRef = useRef(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 = 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 = 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 ( + + + + ); } - }; + return null; + }, modelMeta); const outputItems = useMemo(() => { return [ @@ -444,12 +455,6 @@ const GroundEmbedding: React.FC = 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 = forwardRef((props, ref) => {
- - - ) - } + extra={renderExtra} />
diff --git a/src/pages/playground/hooks/config.ts b/src/pages/playground/hooks/config.ts new file mode 100644 index 00000000..750b3090 --- /dev/null +++ b/src/pages/playground/hooks/config.ts @@ -0,0 +1,49 @@ +export const LLM_METAKEYS: Record = { + 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 +}; diff --git a/src/pages/playground/hooks/use-init-meta.ts b/src/pages/playground/hooks/use-init-meta.ts index af57e479..c4b95136 100644 --- a/src/pages/playground/hooks/use-init-meta.ts +++ b/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 = { - 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[]; + loaded?: boolean; + ref?: any; +} -const IMG_METAKEYS = [ - 'sample_method', - 'sampling_steps', - 'schedule_method', - 'cfg_scale', - 'guidance', - 'negative_prompt' -]; +interface InitMetaOptions { + metaKeys?: Record | string[]; + defaultValues?: Record; + 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(null); + const [searchParams] = useSearchParams(); + const selectModel = searchParams.get('model') || ''; + const [modelMeta, setModelMeta] = useState({}); + const [initialValues, setInitialValues] = useState({ + ...defaultValues, + model: selectModel + }); + const [parameters, setParams] = useState({ + model: selectModel + }); + const [paramsConfig, setParamsConfig] = + useState(defaultParamsConfig); + const paramsRef = useRef(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[]; - loaded?: boolean; - ref?: any; -} + const handleOnValuesChange = useCallback( + (changeValues: Record, allValues: Record) => { + 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;