root/gpustack-ui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

chore: init chat params

Browse Source
This commit is contained in:
jialin
2025-03-03 10:13:06 +08:00
parent 35fe459420
commit 1bb6c5fbfc
6 changed files with 365 additions and 325 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/pages/playground/components/dynamic-params.tsx
+3 -1
View File
@@ -18,7 +18,7 @@ type ParamsSettingsProps = {
ref?: any;
parametersTitle?: React.ReactNode;
showModelSelector?: boolean;
modelList: Global.BaseOption<string>[];
modelList?: Global.BaseOption<string>[];
onValuesChange?: (changeValues: any, value: Record<string, any>) => void;
onModelChange?: (model: string) => void;
paramsConfig?: ParamsSchema[];
@@ -143,6 +143,7 @@ const ParamsSettings: React.FC<ParamsSettingsProps> = forwardRef(
</span>
)}
</h3>
{showModelSelector && (
<Form.Item
name="model"
rules={[
@@ -164,6 +165,7 @@ const ParamsSettings: React.FC<ParamsSettingsProps> = forwardRef(
label={intl.formatMessage({ id: 'playground.model' })}
></SealSelect>
</Form.Item>
)}
</>
}
{renderFields}
src/pages/playground/components/ground-left.tsx
+29 -22
View File
@@ -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<MessageProps> = forwardRef((props, ref) => {
const { modelList } = props;
const intl = useIntl();
const [searchParams] = useSearchParams();
const selectModel = searchParams.get('model') || '';
const [parameters, setParams] = useState<any>({});
const [systemMessage, setSystemMessage] = useState('');
const [show, setShow] = useState(false);
const [collapse, setCollapse] = useState(false);
const scroller = useRef<any>(null);
const paramsRef = useRef<any>(null);
const [actions, setActions] = useState<MessageItemAction[]>([
'upload',
'delete',
'copy'
]);
const { initialize: innitializeParams } = useOverlayScroller();
const {
submitMessage,
handleStopConversation,
@@ -57,6 +53,24 @@ const GroundLeft: React.FC<MessageProps> = 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<MessageProps> = 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<MessageProps> = forwardRef((props, ref) => {
}
};
useEffect(() => {
if (paramsRef.current) {
innitializeParams(paramsRef.current);
}
}, [innitializeParams]);
return (
<div className="ground-left-wrapper">
<div className="ground-left">
@@ -176,7 +182,6 @@ const GroundLeft: React.FC<MessageProps> = forwardRef((props, ref) => {
addMessage={handleAddNewMessage}
handleAbortFetch={handleStopConversation}
clearAll={handleClear}
setModelSelections={handleSelectModel}
/>
</div>
</div>
@@ -187,11 +192,13 @@ const GroundLeft: React.FC<MessageProps> = forwardRef((props, ref) => {
ref={paramsRef}
>
<div className="box">
<ParamsSettings
setParams={setParams}
params={parameters}
selectedModel={selectModel}
<DynamicParams
ref={formRef}
onValuesChange={handleOnValuesChange}
paramsConfig={paramsConfig}
initialValues={initialValues}
modelList={modelList}
showModelSelector={true}
/>
</div>
</div>
src/pages/playground/components/multiple-chat/index.tsx
+1 -7
View File
@@ -28,13 +28,7 @@ const MultiCompare: React.FC<MultiCompareProps> = ({ modelList, loaded }) => {
const [modelSelections, setModelSelections] = useState<ModelSelectionItem[]>(
[]
);
const [globalParams, setGlobalParams] = useState<Record<string, any>>({
seed: null,
stop: null,
temperature: 1,
top_p: 1,
max_tokens: 1024
});
const [globalParams, setGlobalParams] = useState<Record<string, any>>({});
const [spans, setSpans] = useState<{
span: number;
count: number;
src/pages/playground/components/multiple-chat/model-item.tsx
+53 -37
View File
@@ -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,8 +42,8 @@ interface ModelItemProps {
ref: any;
}
const ModelItem: React.FC<ModelItemProps> = forwardRef(
({ model, modelList, instanceId }, ref) => {
const ModelItem: React.FC<ModelItemProps> = forwardRef((props, ref) => {
const { modelList, model, instanceId } = props;
const {
globalParams,
setGlobalParams,
@@ -50,12 +53,26 @@ const ModelItem: React.FC<ModelItemProps> = forwardRef(
modelFullList,
actions
} = useContext(CompareContext);
const {
handleOnValuesChange,
handleOnModelChange,
setParams,
setInitialValues,
formRef,
paramsConfig,
initialValues,
parameters
} = useInitLLmMeta(props, {
defaultValues: {
...llmInitialValues,
model: model
},
defaultParamsConfig: ChatParamsConfig,
metaKeys: LLM_METAKEYS
});
const intl = useIntl();
const isApplyToAllModels = useRef(false);
const [systemMessage, setSystemMessage] = useState<string>('');
const [params, setParams] = useState<Record<string, any>>({
model: model
});
const [show, setShow] = useState(false);
const scroller = useRef<any>(null);
@@ -97,7 +114,7 @@ const ModelItem: React.FC<ModelItemProps> = forwardRef(
? { role: Roles.System, content: systemMessage }
: undefined,
current: currentMsg,
parameters: params
parameters: parameters
});
};
@@ -105,40 +122,32 @@ const ModelItem: React.FC<ModelItemProps> = forwardRef(
isApplyToAllModels.current = e.target.checked;
if (e.target.checked) {
setGlobalParams({
..._.omit(params, 'model')
..._.omit(parameters, 'model')
});
}
};
const handleOnValuesChange = useCallback(
const OnValuesChange = useCallback(
(changeValues: any, allValues: Record<string, any>) => {
if (isApplyToAllModels.current) {
setParams({
...params,
...allValues
handleOnValuesChange(changeValues, {
...allValues,
model: parameters.model
});
if (isApplyToAllModels.current) {
setGlobalParams({
...allValues
});
} else {
setParams({
...params,
...changeValues
});
}
},
[params, isApplyToAllModels.current]
[parameters, isApplyToAllModels.current]
);
const handleCloseViewCode = () => {
setShow(false);
};
const handleModelChange = (value: string) => {
setParams({
...params,
model: value
});
const onModelChange = (value: string) => {
handleOnModelChange(value);
handleClear();
};
@@ -179,9 +188,17 @@ const ModelItem: React.FC<ModelItemProps> = forwardRef(
}, [modelList, intl]);
useEffect(() => {
setParams({
...params,
setParams((prev: any) => {
return {
...prev,
...globalParams
};
});
setInitialValues((prev: any) => {
return {
...prev,
...globalParams
};
});
}, [globalParams]);
@@ -211,8 +228,8 @@ const ModelItem: React.FC<ModelItemProps> = forwardRef(
style={{ width: '100%' }}
variant="borderless"
options={modelFullList}
onChange={handleModelChange}
value={params.model}
onChange={onModelChange}
value={parameters.model}
labelRender={(data) => {
return (
<AutoTooltip
@@ -259,14 +276,14 @@ const ModelItem: React.FC<ModelItemProps> = forwardRef(
</Dropdown>
<Popover
placement="bottomRight"
overlayInnerStyle={{ width: 384 }}
content={
<ParamsSettings
<DynamicParams
ref={formRef}
onValuesChange={OnValuesChange}
paramsConfig={paramsConfig}
initialValues={initialValues}
showModelSelector={false}
setParams={setParams}
modelList={modelList}
globalParams={globalParams}
selectedModel={params.model}
onValuesChange={handleOnValuesChange}
/>
}
trigger={['click']}
@@ -313,13 +330,12 @@ const ModelItem: React.FC<ModelItemProps> = forwardRef(
payload={{
messages: viewCodeMessage
}}
parameters={params}
parameters={parameters}
onCancel={handleCloseViewCode}
title={intl.formatMessage({ id: 'playground.viewcode' })}
></ViewCodeModal>
</div>
);
}
);
});
export default React.memo(ModelItem);
src/pages/playground/hooks/config.ts
+1 -1
View File
@@ -23,7 +23,7 @@ export const llmInitialValues = {
stop: null,
temperature: 1,
top_p: 1,
max_tokens: 1024
max_tokens: null
};
export const advancedFieldsDefaultValus = {
src/pages/playground/hooks/use-init-meta.ts
+32 -11
View File
@@ -28,7 +28,9 @@ import {
interface MessageProps {
modelList: Global.BaseOption<string>[];
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<any>(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<any>({});
const [initialValues, setInitialValues] = useState<any>({
...defaultValues,
@@ -103,18 +107,12 @@ export const useInitLLmMeta = (
return fields?.join(',');
}, [paramsConfig]);
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,
@@ -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]
[modelList, defaultParamsConfig]
);
const handleOnValuesChange = useCallback(
(changeValues: Record<string, any>, allValues: Record<string, any>) => {
if (changeValues.model) {
handleOnModelChange(changeValues.model);
return;
}
setParams(allValues);
},
[handleOnModelChange]
);
useEffect(() => {
@@ -138,7 +159,7 @@ export const useInitLLmMeta = (
if (paramsRef.current) {
innitializeParams(paramsRef.current);
}
}, [paramsRef.current, innitializeParams]);
}, [innitializeParams]);
return {
extractLLMMeta,