diff --git a/src/pages/playground/components/multiple-chat/active-models.tsx b/src/pages/playground/components/multiple-chat/active-models.tsx index 45b89a11..b81f7327 100644 --- a/src/pages/playground/components/multiple-chat/active-models.tsx +++ b/src/pages/playground/components/multiple-chat/active-models.tsx @@ -14,6 +14,7 @@ interface ActiveModelsProps { const ActiveModels: React.FC = (props) => { const { spans, modelSelections, setModelRefs } = props; + return ( {modelSelections.map((model, index) => ( @@ -21,7 +22,8 @@ const ActiveModels: React.FC = (props) => { span={spans.span} key={`${model.value || 'empty'}-${model.uid}`} style={{ - height: spans.count < 4 ? 'calc(100% - 16px)' : 'calc(50% - 16px)' + height: spans.count < 4 ? 'calc(100% - 16px)' : 'calc(50% - 16px)', + overflow: 'hidden' }} > = forwardRef((props, ref) => { - const { modelList, model, instanceId } = props; + const { modelList, ...restProps } = props; + const { model, instanceId } = restProps; const { globalParams, setGlobalParams, @@ -66,14 +67,20 @@ const ModelItem: React.FC = forwardRef((props, ref) => { paramsConfig, initialValues, parameters - } = useInitLLmMeta(props, { - defaultValues: { - ...llmInitialValues, - model: model + } = useInitLLmMeta( + { + ...restProps, + modelList: modelFullList }, - defaultParamsConfig: ChatParamsConfig, - metaKeys: LLM_METAKEYS - }); + { + defaultValues: { + ...llmInitialValues, + model: model + }, + defaultParamsConfig: ChatParamsConfig, + metaKeys: LLM_METAKEYS + } + ); const intl = useIntl(); const isApplyToAllModels = useRef(false); const [systemMessage, setSystemMessage] = useState(''); diff --git a/src/pages/playground/hooks/use-init-meta.ts b/src/pages/playground/hooks/use-init-meta.ts index bf00f80b..f96f0a73 100644 --- a/src/pages/playground/hooks/use-init-meta.ts +++ b/src/pages/playground/hooks/use-init-meta.ts @@ -12,13 +12,7 @@ import { generateRandomNumber } from '@/utils'; import { useSearchParams } from '@umijs/max'; import { useMemoizedFn } from 'ahooks'; import _ from 'lodash'; -import React, { - useCallback, - useEffect, - useMemo, - useRef, - useState -} from 'react'; +import React, { useEffect, useMemo, useRef, useState } from 'react'; import { ParamsSchema } from '../config/types'; import { IMG_METAKEYS, @@ -133,37 +127,34 @@ export const useInitLLmMeta = ( return fields?.join(','); }, [paramsConfig]); - 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 - }); - const config = defaultParamsConfig.map((item) => { - return { - ...item, - attrs: - item.name === 'max_tokens' - ? { ...item.attrs, max: meta.max_tokens } - : { - ...item.attrs - } - }; - }); - setParamsConfig(config); - }, - [modelList, defaultParamsConfig] - ); + const handleOnModelChange = useMemoizedFn((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 + }); + const config = defaultParamsConfig.map((item) => { + return { + ...item, + attrs: + item.name === 'max_tokens' + ? { ...item.attrs, max: meta.max_tokens } + : { + ...item.attrs + } + }; + }); + setParamsConfig(config); + }); - const handleOnValuesChange = useCallback( + const handleOnValuesChange = useMemoizedFn( (changeValues: Record, allValues: Record) => { if (changeValues.model) { handleOnModelChange(changeValues.model); @@ -172,8 +163,7 @@ export const useInitLLmMeta = ( setParams(allValues); setInitialValues(allValues); } - }, - [handleOnModelChange] + } ); useEffect(() => { @@ -405,35 +395,32 @@ export const useInitImageMeta = ( return fields?.join(','); }, [paramsConfig]); - const handleOnModelChange = useCallback( - (val: string) => { - if (!val) return; - const model = modelList.find((item) => item.value === val); - const { form: initialData, sizeOptions } = extractIMGMeta(model?.meta); - const newParamsConfig = generateImageParamsConfig(model, sizeOptions); + const handleOnModelChange = useMemoizedFn((val: string) => { + if (!val) return; + const model = modelList.find((item) => item.value === val); + const { form: initialData, sizeOptions } = extractIMGMeta(model?.meta); + const newParamsConfig = generateImageParamsConfig(model, sizeOptions); - if (!isOpenaiCompatible) { - setParamsConfig([...newParamsConfig, ...ImageAdvancedParamsConfig]); - } else { - setParamsConfig(newParamsConfig); - } - setBasicParamsConfig(newParamsConfig); - setImageSizeOptions(sizeOptions); - setModelMeta(model?.meta || {}); - setInitialValues({ - ...initialData, - seed: parameters.seed, - model: val - }); - setParams({ - ...initialData, - seed: parameters.seed, - model: val - }); - updateCacheFormData(initialData); - }, - [modelList, isOpenaiCompatible] - ); + if (!isOpenaiCompatible) { + setParamsConfig([...newParamsConfig, ...ImageAdvancedParamsConfig]); + } else { + setParamsConfig(newParamsConfig); + } + setBasicParamsConfig(newParamsConfig); + setImageSizeOptions(sizeOptions); + setModelMeta(model?.meta || {}); + setInitialValues({ + ...initialData, + seed: parameters.seed, + model: val + }); + setParams({ + ...initialData, + seed: parameters.seed, + model: val + }); + updateCacheFormData(initialData); + }); const handleOnValuesChange = useMemoizedFn( (changeValues: Record, allValues: Record) => {