From 1bb6c5fbfc0234377a2f8ea00f0d62fc1285f349 Mon Sep 17 00:00:00 2001 From: jialin Date: Mon, 3 Mar 2025 10:09:22 +0800 Subject: [PATCH] chore: init chat params --- .../playground/components/dynamic-params.tsx | 46 +- .../playground/components/ground-left.tsx | 51 +- .../components/multiple-chat/index.tsx | 8 +- .../components/multiple-chat/model-item.tsx | 528 +++++++++--------- src/pages/playground/hooks/config.ts | 2 +- src/pages/playground/hooks/use-init-meta.ts | 43 +- 6 files changed, 359 insertions(+), 319 deletions(-) diff --git a/src/pages/playground/components/dynamic-params.tsx b/src/pages/playground/components/dynamic-params.tsx index 36a82955..fee35f2b 100644 --- a/src/pages/playground/components/dynamic-params.tsx +++ b/src/pages/playground/components/dynamic-params.tsx @@ -18,7 +18,7 @@ type ParamsSettingsProps = { ref?: any; parametersTitle?: React.ReactNode; showModelSelector?: boolean; - modelList: Global.BaseOption[]; + modelList?: Global.BaseOption[]; onValuesChange?: (changeValues: any, value: Record) => void; onModelChange?: (model: string) => void; paramsConfig?: ParamsSchema[]; @@ -143,27 +143,29 @@ const ParamsSettings: React.FC = forwardRef( )} - - - + {showModelSelector && ( + + + + )} } {renderFields} diff --git a/src/pages/playground/components/ground-left.tsx b/src/pages/playground/components/ground-left.tsx index a8db82a1..ea1005a3 100644 --- a/src/pages/playground/components/ground-left.tsx +++ b/src/pages/playground/components/ground-left.tsx @@ -1,25 +1,26 @@ -import useOverlayScroller from '@/hooks/use-overlay-scroller'; -import { useIntl, useSearchParams } from '@umijs/max'; +import { useIntl } from '@umijs/max'; import { Spin } from 'antd'; import classNames from 'classnames'; import 'overlayscrollbars/overlayscrollbars.css'; import { forwardRef, - useEffect, useImperativeHandle, useMemo, useRef, useState } from 'react'; import { OpenAIViewCode, Roles, generateMessages } from '../config'; +import { ChatParamsConfig } from '../config/params-config'; import { MessageItem, MessageItemAction } from '../config/types'; +import { LLM_METAKEYS, llmInitialValues } from '../hooks/config'; import useChatCompletion from '../hooks/use-chat-completion'; +import { useInitLLmMeta } from '../hooks/use-init-meta'; import '../style/ground-left.less'; import '../style/system-message-wrap.less'; +import DynamicParams from './dynamic-params'; import MessageInput from './message-input'; import MessageContent from './multiple-chat/message-content'; import SystemMessage from './multiple-chat/system-message'; -import ParamsSettings from './params-settings'; import ReferenceParams from './reference-params'; import ViewCodeModal from './view-code-modal'; @@ -32,21 +33,16 @@ interface MessageProps { const GroundLeft: React.FC = forwardRef((props, ref) => { const { modelList } = props; const intl = useIntl(); - const [searchParams] = useSearchParams(); - const selectModel = searchParams.get('model') || ''; - const [parameters, setParams] = useState({}); const [systemMessage, setSystemMessage] = useState(''); const [show, setShow] = useState(false); const [collapse, setCollapse] = useState(false); const scroller = useRef(null); - const paramsRef = useRef(null); const [actions, setActions] = useState([ 'upload', 'delete', 'copy' ]); - const { initialize: innitializeParams } = useOverlayScroller(); const { submitMessage, handleStopConversation, @@ -57,6 +53,24 @@ const GroundLeft: React.FC = forwardRef((props, ref) => { messageList, loading } = useChatCompletion(scroller); + const { + handleOnValuesChange, + formRef, + paramsRef, + paramsConfig, + initialValues, + parameters + } = useInitLLmMeta( + { modelList, isChat: true }, + { + defaultValues: { + ...llmInitialValues, + model: modelList[0]?.value + }, + defaultParamsConfig: ChatParamsConfig, + metaKeys: LLM_METAKEYS + } + ); useImperativeHandle(ref, () => { return { @@ -93,8 +107,6 @@ const GroundLeft: React.FC = forwardRef((props, ref) => { setShow(false); }; - const handleSelectModel = () => {}; - const handleOnCheck = (e: any) => { const checked = e.target.checked; if (checked) { @@ -104,12 +116,6 @@ const GroundLeft: React.FC = forwardRef((props, ref) => { } }; - useEffect(() => { - if (paramsRef.current) { - innitializeParams(paramsRef.current); - } - }, [innitializeParams]); - return (
@@ -176,7 +182,6 @@ const GroundLeft: React.FC = forwardRef((props, ref) => { addMessage={handleAddNewMessage} handleAbortFetch={handleStopConversation} clearAll={handleClear} - setModelSelections={handleSelectModel} />
@@ -187,11 +192,13 @@ const GroundLeft: React.FC = forwardRef((props, ref) => { ref={paramsRef} >
-
diff --git a/src/pages/playground/components/multiple-chat/index.tsx b/src/pages/playground/components/multiple-chat/index.tsx index 1215a7d4..966af52f 100644 --- a/src/pages/playground/components/multiple-chat/index.tsx +++ b/src/pages/playground/components/multiple-chat/index.tsx @@ -28,13 +28,7 @@ const MultiCompare: React.FC = ({ modelList, loaded }) => { const [modelSelections, setModelSelections] = useState( [] ); - const [globalParams, setGlobalParams] = useState>({ - seed: null, - stop: null, - temperature: 1, - top_p: 1, - max_tokens: 1024 - }); + const [globalParams, setGlobalParams] = useState>({}); const [spans, setSpans] = useState<{ span: number; count: number; diff --git a/src/pages/playground/components/multiple-chat/model-item.tsx b/src/pages/playground/components/multiple-chat/model-item.tsx index 59cf5953..abcb78a2 100644 --- a/src/pages/playground/components/multiple-chat/model-item.tsx +++ b/src/pages/playground/components/multiple-chat/model-item.tsx @@ -23,10 +23,13 @@ import React, { import 'simplebar-react/dist/simplebar.min.css'; import { OpenAIViewCode, Roles, generateMessages } from '../../config'; import CompareContext from '../../config/compare-context'; +import { ChatParamsConfig } from '../../config/params-config'; import { MessageItem, ModelSelectionItem } from '../../config/types'; +import { LLM_METAKEYS, llmInitialValues } from '../../hooks/config'; import useChatCompletion from '../../hooks/use-chat-completion'; +import { useInitLLmMeta } from '../../hooks/use-init-meta'; import '../../style/model-item.less'; -import ParamsSettings from '../params-settings'; +import DynamicParams from '../dynamic-params'; import ReferenceParams from '../reference-params'; import ViewCodeModal from '../view-code-modal'; import MessageContent from './message-content'; @@ -39,287 +42,300 @@ interface ModelItemProps { ref: any; } -const ModelItem: React.FC = forwardRef( - ({ model, modelList, instanceId }, ref) => { - const { - globalParams, - setGlobalParams, - setLoadingStatus, - handleDeleteModel, - handleApplySystemChangeToAll, - modelFullList, - actions - } = useContext(CompareContext); - const intl = useIntl(); - const isApplyToAllModels = useRef(false); - const [systemMessage, setSystemMessage] = useState(''); - const [params, setParams] = useState>({ +const ModelItem: React.FC = forwardRef((props, ref) => { + const { modelList, model, instanceId } = props; + const { + globalParams, + setGlobalParams, + setLoadingStatus, + handleDeleteModel, + handleApplySystemChangeToAll, + modelFullList, + actions + } = useContext(CompareContext); + const { + handleOnValuesChange, + handleOnModelChange, + setParams, + setInitialValues, + formRef, + paramsConfig, + initialValues, + parameters + } = useInitLLmMeta(props, { + defaultValues: { + ...llmInitialValues, model: model - }); - const [show, setShow] = useState(false); - const scroller = useRef(null); + }, + defaultParamsConfig: ChatParamsConfig, + metaKeys: LLM_METAKEYS + }); + const intl = useIntl(); + const isApplyToAllModels = useRef(false); + const [systemMessage, setSystemMessage] = useState(''); + const [show, setShow] = useState(false); + const scroller = useRef(null); - const { - submitMessage, - handleAddNewMessage, - handleClear, - setMessageList, - handleStopConversation, - tokenResult, - messageList, - loading - } = useChatCompletion(scroller); + const { + submitMessage, + handleAddNewMessage, + handleClear, + setMessageList, + handleStopConversation, + tokenResult, + messageList, + loading + } = useChatCompletion(scroller); - const viewCodeMessage = useMemo(() => { - return generateMessages([ - { role: Roles.System, content: systemMessage }, - ...messageList - ]); - }, [messageList, systemMessage]); + const viewCodeMessage = useMemo(() => { + return generateMessages([ + { role: Roles.System, content: systemMessage }, + ...messageList + ]); + }, [messageList, systemMessage]); - const abortFetch = () => { - handleStopConversation(); - setLoadingStatus(instanceId, false); - }; + const abortFetch = () => { + handleStopConversation(); + setLoadingStatus(instanceId, false); + }; - const handleDelete = () => { - handleDeleteModel(instanceId); - }; + const handleDelete = () => { + handleDeleteModel(instanceId); + }; - const handleSubmit = (currentMessage: Omit) => { - const currentMsg = - currentMessage.content || currentMessage.imgs?.length - ? currentMessage - : undefined; + const handleSubmit = (currentMessage: Omit) => { + const currentMsg = + currentMessage.content || currentMessage.imgs?.length + ? currentMessage + : undefined; - submitMessage({ - system: systemMessage - ? { role: Roles.System, content: systemMessage } - : undefined, - current: currentMsg, - parameters: params + submitMessage({ + system: systemMessage + ? { role: Roles.System, content: systemMessage } + : undefined, + current: currentMsg, + parameters: parameters + }); + }; + + const handleApplyToAllModels = (e: any) => { + isApplyToAllModels.current = e.target.checked; + if (e.target.checked) { + setGlobalParams({ + ..._.omit(parameters, 'model') }); - }; + } + }; - const handleApplyToAllModels = (e: any) => { - isApplyToAllModels.current = e.target.checked; - if (e.target.checked) { + const OnValuesChange = useCallback( + (changeValues: any, allValues: Record) => { + handleOnValuesChange(changeValues, { + ...allValues, + model: parameters.model + }); + if (isApplyToAllModels.current) { setGlobalParams({ - ..._.omit(params, 'model') + ...allValues }); } - }; + }, + [parameters, isApplyToAllModels.current] + ); - const handleOnValuesChange = useCallback( - (changeValues: any, allValues: Record) => { - if (isApplyToAllModels.current) { - setParams({ - ...params, - ...allValues - }); - setGlobalParams({ - ...allValues - }); - } else { - setParams({ - ...params, - ...changeValues - }); - } - }, - [params, isApplyToAllModels.current] - ); + const handleCloseViewCode = () => { + setShow(false); + }; - const handleCloseViewCode = () => { - setShow(false); - }; + const onModelChange = (value: string) => { + handleOnModelChange(value); + handleClear(); + }; - const handleModelChange = (value: string) => { - setParams({ - ...params, - model: value - }); - handleClear(); - }; - - const actionItems = useMemo(() => { - const list = [ - { - label: intl.formatMessage({ id: 'common.button.clear' }), - key: 'clear', - icon: , - danger: false, - onClick: () => { - setMessageList([]); - setSystemMessage(''); - } - }, - { - label: intl.formatMessage({ id: 'playground.viewcode' }), - key: 'viewcode', - icon: , - onClick: () => { - setShow(true); - } + const actionItems = useMemo(() => { + const list = [ + { + label: intl.formatMessage({ id: 'common.button.clear' }), + key: 'clear', + icon: , + danger: false, + onClick: () => { + setMessageList([]); + setSystemMessage(''); + } + }, + { + label: intl.formatMessage({ id: 'playground.viewcode' }), + key: 'viewcode', + icon: , + onClick: () => { + setShow(true); } - ]; - - if (modelList.length > 2) { - list.push({ - label: intl.formatMessage({ id: 'common.button.delete' }), - key: 'delete', - icon: , - danger: true, - onClick: () => { - handleDelete(); - } - }); } - return list; - }, [modelList, intl]); + ]; - useEffect(() => { - setParams({ - ...params, - ...globalParams + if (modelList.length > 2) { + list.push({ + label: intl.formatMessage({ id: 'common.button.delete' }), + key: 'delete', + icon: , + danger: true, + onClick: () => { + handleDelete(); + } }); - }, [globalParams]); + } + return list; + }, [modelList, intl]); - useEffect(() => { - setLoadingStatus(instanceId, loading); - return () => { - setLoadingStatus(instanceId, false); + useEffect(() => { + setParams((prev: any) => { + return { + ...prev, + ...globalParams }; - }, [loading]); - - useImperativeHandle(ref, () => { + }); + setInitialValues((prev: any) => { return { - submit: handleSubmit, - abortFetch, - addNewMessage: handleAddNewMessage, - clear: handleClear, - setSystemMessage, - loading + ...prev, + ...globalParams }; }); + }, [globalParams]); - return ( -
-
- - - - - - - - - - } - trigger={['click']} - arrow={false} - fresh={true} - title={ -
- - {intl.formatMessage({ - id: 'playground.compare.applytoall' - })} - -
- } - > - - - -
- -
-
- - -
+ useEffect(() => { + setLoadingStatus(instanceId, loading); + return () => { + setLoadingStatus(instanceId, false); + }; + }, [loading]); + + useImperativeHandle(ref, () => { + return { + submit: handleSubmit, + abortFetch, + addNewMessage: handleAddNewMessage, + clear: handleClear, + setSystemMessage, + loading + }; + }); + + return ( +
+
+ + + + + + + + + + } + trigger={['click']} + arrow={false} + fresh={true} + title={ +
+ + {intl.formatMessage({ + id: 'playground.compare.applytoall' + })} + +
+ } + > + + + +
+ +
+
+ +
-
- ); - } -); + +
+ ); +}); export default React.memo(ModelItem); diff --git a/src/pages/playground/hooks/config.ts b/src/pages/playground/hooks/config.ts index 7c36edf9..8d628830 100644 --- a/src/pages/playground/hooks/config.ts +++ b/src/pages/playground/hooks/config.ts @@ -23,7 +23,7 @@ export const llmInitialValues = { stop: null, temperature: 1, top_p: 1, - max_tokens: 1024 + max_tokens: null }; export const advancedFieldsDefaultValus = { diff --git a/src/pages/playground/hooks/use-init-meta.ts b/src/pages/playground/hooks/use-init-meta.ts index 5a694b4a..9cef0dcc 100644 --- a/src/pages/playground/hooks/use-init-meta.ts +++ b/src/pages/playground/hooks/use-init-meta.ts @@ -28,7 +28,9 @@ import { interface MessageProps { modelList: Global.BaseOption[]; + model?: string; loaded?: boolean; + isChat?: boolean; ref?: any; } @@ -43,7 +45,7 @@ export const useInitLLmMeta = ( props: MessageProps, options: InitMetaOptions ) => { - const { modelList } = props; + const { modelList, model, isChat } = props; const { metaKeys = {}, defaultValues = {}, @@ -51,7 +53,9 @@ export const useInitLLmMeta = ( } = options; const formRef = useRef(null); const [searchParams] = useSearchParams(); - const defaultModel = searchParams.get('model') || modelList?.[0]?.value || ''; + const defaultModel = + searchParams.get('model') || + (isChat ? model ?? modelList?.[0]?.value : model); const [modelMeta, setModelMeta] = useState({}); const [initialValues, setInitialValues] = useState({ ...defaultValues, @@ -103,18 +107,12 @@ export const useInitLLmMeta = ( return fields?.join(','); }, [paramsConfig]); - 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, @@ -124,8 +122,31 @@ export const useInitLLmMeta = ( ...initialData, model: val }); + const config = defaultParamsConfig.map((item) => { + return { + ...item, + attrs: + item.name === 'max_tokens' + ? { ...item.attrs, max: meta.max_tokens || 16 * 1024 } + : { + ...item.attrs + } + }; + }); + setParamsConfig(config); + }, + [modelList, defaultParamsConfig] + ); + + const handleOnValuesChange = useCallback( + (changeValues: Record, allValues: Record) => { + if (changeValues.model) { + handleOnModelChange(changeValues.model); + return; + } + setParams(allValues); }, - [modelList] + [handleOnModelChange] ); useEffect(() => { @@ -138,7 +159,7 @@ export const useInitLLmMeta = ( if (paramsRef.current) { innitializeParams(paramsRef.current); } - }, [paramsRef.current, innitializeParams]); + }, [innitializeParams]); return { extractLLMMeta,