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

fix: check form data after blur

Browse Source
This commit is contained in:
jialin
2025-04-02 20:40:57 +08:00
parent 4755cf6a25
commit afacd2a8a0
19 changed files with 339 additions and 250 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/pages/llmodels/components/advance-config.tsx
+36
View File
@@ -26,6 +26,7 @@ import {
modelCategories,
placementStrategyOptions
} from '../config';
import { useFormContext } from '../config/form-context';
import llamaConfig from '../config/llama-config';
import { FormData } from '../config/types';
import vllmConfig from '../config/vllm-config';
@@ -73,6 +74,7 @@ const AdvanceConfig: React.FC<AdvanceConfigProps> = (props) => {
const placement_strategy = Form.useWatch('placement_strategy', form);
const gpuSelectorIds = Form.useWatch(['gpu_selector', 'gpu_ids'], form);
const worker_selector = Form.useWatch('worker_selector', form);
const { onValuesChange } = useFormContext();
const placementStrategyTips = [
{
@@ -153,6 +155,37 @@ const AdvanceConfig: React.FC<AdvanceConfigProps> = (props) => {
form.setFieldValue('backend_parameters', list);
}, []);
const handleBackendParametersOnBlur = () => {
const backendParams = form.getFieldValue('backend_parameters');
console.log('backendParams==', backendParams);
onValuesChange?.({
source: source,
allValues: form.getFieldsValue(),
changedValues: {}
});
};
const handleSelectorOnBlur = () => {
const workerSelector = form.getFieldValue('worker_selector');
console.log('workerSelector==', workerSelector);
onValuesChange?.({
source: source,
allValues: form.getFieldsValue(),
changedValues: {}
});
};
const handleBackendVersionOnBlur = () => {
const backendVersion = form.getFieldValue('backend_version');
if (backendVersion) {
onValuesChange?.({
source: source,
allValues: form.getFieldsValue(),
changedValues: {}
});
}
};
const collapseItems = useMemo(() => {
const children = (
<>
@@ -233,6 +266,7 @@ const AdvanceConfig: React.FC<AdvanceConfigProps> = (props) => {
})}
labels={wokerSelector}
onChange={handleWorkerLabelsChange}
onBlur={handleSelectorOnBlur}
description={
<span>
{intl.formatMessage({
@@ -275,6 +309,7 @@ const AdvanceConfig: React.FC<AdvanceConfigProps> = (props) => {
<Form.Item name="backend_version">
<SealInput.Input
onBlur={handleBackendVersionOnBlur}
label={intl.formatMessage({ id: 'models.form.backendVersion' })}
description={intl.formatMessage(
{
@@ -324,6 +359,7 @@ const AdvanceConfig: React.FC<AdvanceConfigProps> = (props) => {
})}
dataList={form.getFieldValue('backend_parameters') || []}
onChange={handleBackendParametersChange}
onBlur={handleBackendParametersOnBlur}
options={paramsConfig}
description={
backendParamsTips && (
src/pages/llmodels/components/data-form.tsx
+3 -8
View File
@@ -132,16 +132,11 @@ const DataForm: React.FC<DataFormProps> = forwardRef((props, ref) => {
}
};
// voxbox is not support multi gpu
const handleSetGPUIds = (backend: string) => {
if (backend === backendOptionsMap.llamaBox) {
return;
}
const gpuids = form.getFieldValue(['gpu_selector', 'gpu_ids']);
const gpuids = form.getFieldValue(['gpu_selector', 'gpu_ids']) || [];
if (!gpuids?.length) {
return;
}
if (gpuids.length > 1 && Array.isArray(gpuids[0])) {
if (backend === backendOptionsMap.voxBox && gpuids.length > 0) {
form.setFieldValue(['gpu_selector', 'gpu_ids'], [gpuids[0]]);
}
};
src/pages/llmodels/components/deploy-modal.tsx
+18 -34
View File
@@ -77,9 +77,7 @@ const AddModal: FC<AddModalProps> = (props) => {
const {
handleShowCompatibleAlert,
handleUpdateWarning,
setWarningStatus,
handleEvaluate,
handleOnValuesChange,
checkTokenRef,
warningStatus,
@@ -140,40 +138,25 @@ const AddModal: FC<AddModalProps> = (props) => {
}
};
// trigger from local_path change or backend change
const handleBackendChangeBefore = async () => {
const localPath = form.current.form.getFieldValue?.('local_path');
const backend = form.current.form.getFieldValue?.('backend');
const res = handleUpdateWarning?.({
backend,
localPath: localPath,
source: props.source
});
if (!res.show) {
const values = form.current.form.getFieldsValue?.();
const data = getSourceRepoConfigValue(props.source, values);
const evalutionData = await handleEvaluate(
_.omit(data.values, [
'cpu_offloading',
'distributed_inference_across_workers'
])
);
handleShowCompatibleAlert?.(evalutionData);
} else {
setWarningStatus?.(res);
}
};
const handleBackendChange = async (backend: string) => {
handleBackendChangeBefore();
if (backend === backendOptionsMap.vllm) {
setIsGGUF(false);
}
if (backend === backendOptionsMap.llamaBox) {
setIsGGUF(true);
} else {
setIsGGUF(false);
}
const data = form.current.form.getFieldsValue?.();
if (data.local_path || props.source !== modelSourceMap.local_path_value) {
handleOnValuesChange?.({
changedValues: {},
allValues:
backend === backendOptionsMap.llamaBox
? data
: _.omit(data, [
'cpu_offloading',
'distributed_inference_across_workers'
]),
source: props.source
});
}
};
@@ -291,7 +274,8 @@ const AddModal: FC<AddModalProps> = (props) => {
<FormContext.Provider
value={{
isGGUF: isGGUF,
modelFileOptions: props.modelFileOptions
modelFileOptions: props.modelFileOptions,
onValuesChange: handleOnValuesChange
}}
>
<FormWrapper>
src/pages/llmodels/components/update-modal.tsx
+172 -166
View File
@@ -21,6 +21,7 @@ import {
ollamaModelOptions,
sourceOptions
} from '../config';
import { FormContext } from '../config/form-context';
import { FormData, ListItem } from '../config/types';
import { useCheckCompatibility } from '../hooks';
import AdvanceConfig from './advance-config';
@@ -55,10 +56,7 @@ const UpdateModal: React.FC<AddModalProps> = (props) => {
updateFormInitials: { gpuOptions, isGGUF, data: formData }
} = props || {};
const {
handleShowCompatibleAlert,
handleUpdateWarning,
setWarningStatus,
handleEvaluate,
generateGPUIds,
handleOnValuesChange,
checkTokenRef,
@@ -70,56 +68,42 @@ const UpdateModal: React.FC<AddModalProps> = (props) => {
const localPathCache = useRef<string>('');
const submitAnyway = useRef<boolean>(false);
// voxbox is not support multi gpu
const handleSetGPUIds = (backend: string) => {
if (backend === backendOptionsMap.llamaBox) {
return;
}
const gpuids = form.getFieldValue(['gpu_selector', 'gpu_ids']);
const gpuids = form.getFieldValue(['gpu_selector', 'gpu_ids']) || [];
if (!gpuids?.length) {
return;
}
if (gpuids.length > 1 && Array.isArray(gpuids[0])) {
if (backend === backendOptionsMap.voxBox && gpuids.length > 0) {
form.setFieldValue(['gpu_selector', 'gpu_ids'], [gpuids[0]]);
}
};
// trigger from local_path change or backend change
const handleBackendChangeBefore = async () => {
const localPath = form.getFieldValue?.('local_path');
const backend = form.getFieldValue?.('backend');
const res = handleUpdateWarning?.({
backend,
localPath: localPath,
source: formData?.source as string
});
if (!res.show) {
const values = form.getFieldsValue?.();
const data = getSourceRepoConfigValue(formData?.source as string, values);
const evalutionData = await handleEvaluate(
_.omit(data.values, [
'cpu_offloading',
'distributed_inference_across_workers'
])
);
handleShowCompatibleAlert?.(evalutionData);
} else {
setWarningStatus?.(res);
}
};
const handleBackendChange = (val: string) => {
if (val === backendOptionsMap.llamaBox) {
form.setFieldsValue({
const handleBackendChange = (backend: string) => {
const updates = {
backend_version: ''
};
if (backend === backendOptionsMap.llamaBox) {
Object.assign(updates, {
distributed_inference_across_workers: true,
cpu_offloading: true
});
}
form.setFieldValue('backend_version', '');
handleSetGPUIds(val);
handleBackendChangeBefore();
form.setFieldsValue(updates);
handleSetGPUIds(backend);
const data = form.getFieldsValue?.();
if (data.local_path || data.source !== modelSourceMap.local_path_value) {
handleOnValuesChange?.({
changedValues: {},
allValues:
backend === backendOptionsMap.llamaBox
? data
: _.omit(data, [
'cpu_offloading',
'distributed_inference_across_workers'
]),
source: data.source
});
}
};
const handleOnFocus = () => {
@@ -137,8 +121,21 @@ const UpdateModal: React.FC<AddModalProps> = (props) => {
if (!isEndwithGGUF || !isBlobFile) {
backend = backendOptionsMap.vllm;
}
handleBackendChange?.(backend);
form.setFieldValue('backend', backend);
handleBackendChange?.(backend);
};
const handleOnBlur = (e: any) => {
const value = e.target.value;
if (value) {
handleOnValuesChange?.({
changedValues: {},
allValues: {
...form.getFieldsValue?.()
},
source: formData?.source
});
}
};
const renderHuggingfaceFields = () => {
@@ -159,6 +156,7 @@ const UpdateModal: React.FC<AddModalProps> = (props) => {
]}
>
<SealInput.Input
onBlur={handleOnBlur}
label={intl.formatMessage({ id: 'models.form.repoid' })}
required
disabled={false}
@@ -180,6 +178,7 @@ const UpdateModal: React.FC<AddModalProps> = (props) => {
]}
>
<SealInput.Input
onBlur={handleOnBlur}
label={intl.formatMessage({ id: 'models.form.filename' })}
required
disabled={false}
@@ -212,6 +211,7 @@ const UpdateModal: React.FC<AddModalProps> = (props) => {
defaultActiveFirstOption
disabled={false}
options={ollamaModelOptions}
onBlur={handleOnBlur}
placeholder={intl.formatMessage({ id: 'model.form.ollamaholder' })}
description={
<span>
@@ -423,137 +423,143 @@ const UpdateModal: React.FC<AddModalProps> = (props) => {
></CompatibilityAlert>
}
>
<Form
name="addModalForm"
form={form}
onFinish={handleOk}
onValuesChange={onValuesChange}
scrollToFirstError={true}
preserve={false}
clearOnDestroy={true}
initialValues={{
...formData
}}
style={{
padding: 'var(--ant-modal-content-padding)',
paddingBlock: 0
<FormContext.Provider
value={{
onValuesChange: handleOnValuesChange
}}
>
<Form.Item<FormData>
name="name"
rules={[
{
required: true,
message: getRuleMessage('input', 'common.table.name')
}
]}
<Form
name="addModalForm"
form={form}
onFinish={handleOk}
onValuesChange={onValuesChange}
scrollToFirstError={true}
preserve={false}
clearOnDestroy={true}
initialValues={{
...formData
}}
style={{
padding: 'var(--ant-modal-content-padding)',
paddingBlock: 0
}}
>
<SealInput.Input
label={intl.formatMessage({
id: 'common.table.name'
})}
required
></SealInput.Input>
</Form.Item>
<Form.Item<FormData>
name="source"
rules={[
{
required: true,
message: getRuleMessage('select', 'models.form.source')
}
]}
>
{action === PageAction.EDIT && (
<SealSelect
disabled={true}
label={intl.formatMessage({
id: 'models.form.source'
})}
options={sourceOptions}
required
></SealSelect>
)}
</Form.Item>
{renderFieldsBySource}
<Form.Item name="backend" rules={[{ required: true }]}>
<SealSelect
required
onChange={handleBackendChange}
label={intl.formatMessage({ id: 'models.form.backend' })}
description={<TooltipList list={backendTipsList}></TooltipList>}
options={[
<Form.Item<FormData>
name="name"
rules={[
{
label: `llama-box`,
value: backendOptionsMap.llamaBox,
disabled:
formData?.source === modelSourceMap.local_path_value
? false
: !isGGUF
},
{
label: 'vLLM',
value: backendOptionsMap.vllm,
disabled:
formData?.source === modelSourceMap.local_path_value
? false
: isGGUF
},
{
label: 'vox-box',
value: backendOptionsMap.voxBox,
disabled:
formData?.source === modelSourceMap.local_path_value
? false
: isGGUF
required: true,
message: getRuleMessage('input', 'common.table.name')
}
]}
disabled={
action === PageAction.EDIT &&
formData?.source !== modelSourceMap.local_path_value
}
></SealSelect>
</Form.Item>
<Form.Item<FormData>
name="replicas"
rules={[
{
required: true,
message: getRuleMessage('input', 'models.form.replicas')
}
]}
>
<SealInput.Number
style={{ width: '100%' }}
label={intl.formatMessage({
id: 'models.form.replicas'
})}
required
description={intl.formatMessage(
>
<SealInput.Input
label={intl.formatMessage({
id: 'common.table.name'
})}
required
></SealInput.Input>
</Form.Item>
<Form.Item<FormData>
name="source"
rules={[
{
id: 'models.form.replicas.tips'
},
{ api: `${window.location.origin}/v1` }
required: true,
message: getRuleMessage('select', 'models.form.source')
}
]}
>
{action === PageAction.EDIT && (
<SealSelect
disabled={true}
label={intl.formatMessage({
id: 'models.form.source'
})}
options={sourceOptions}
required
></SealSelect>
)}
min={0}
></SealInput.Number>
</Form.Item>
<Form.Item<FormData> name="description">
<SealInput.TextArea
label={intl.formatMessage({
id: 'common.table.description'
})}
></SealInput.TextArea>
</Form.Item>
</Form.Item>
{renderFieldsBySource}
<Form.Item name="backend" rules={[{ required: true }]}>
<SealSelect
required
onChange={handleBackendChange}
label={intl.formatMessage({ id: 'models.form.backend' })}
description={<TooltipList list={backendTipsList}></TooltipList>}
options={[
{
label: `llama-box`,
value: backendOptionsMap.llamaBox,
disabled:
formData?.source === modelSourceMap.local_path_value
? false
: !isGGUF
},
{
label: 'vLLM',
value: backendOptionsMap.vllm,
disabled:
formData?.source === modelSourceMap.local_path_value
? false
: isGGUF
},
{
label: 'vox-box',
value: backendOptionsMap.voxBox,
disabled:
formData?.source === modelSourceMap.local_path_value
? false
: isGGUF
}
]}
disabled={
action === PageAction.EDIT &&
formData?.source !== modelSourceMap.local_path_value
}
></SealSelect>
</Form.Item>
<Form.Item<FormData>
name="replicas"
rules={[
{
required: true,
message: getRuleMessage('input', 'models.form.replicas')
}
]}
>
<SealInput.Number
style={{ width: '100%' }}
label={intl.formatMessage({
id: 'models.form.replicas'
})}
required
description={intl.formatMessage(
{
id: 'models.form.replicas.tips'
},
{ api: `${window.location.origin}/v1` }
)}
min={0}
></SealInput.Number>
</Form.Item>
<Form.Item<FormData> name="description">
<SealInput.TextArea
label={intl.formatMessage({
id: 'common.table.description'
})}
></SealInput.TextArea>
</Form.Item>
<AdvanceConfig
form={form}
gpuOptions={gpuOptions}
action={PageAction.EDIT}
source={formData?.source || ''}
isGGUF={formData?.backend === backendOptionsMap.llamaBox}
></AdvanceConfig>
</Form>
<AdvanceConfig
form={form}
gpuOptions={gpuOptions}
action={PageAction.EDIT}
source={formData?.source || ''}
isGGUF={formData?.backend === backendOptionsMap.llamaBox}
></AdvanceConfig>
</Form>
</FormContext.Provider>
</ColumnWrapper>
</Modal>
);
src/pages/llmodels/config/form-context.ts
+2 -1
View File
@@ -1,13 +1,14 @@
import React from 'react';
interface FormContextProps {
isGGUF: boolean;
isGGUF?: boolean;
byBuiltIn?: boolean;
sizeOptions?: Global.BaseOption<number>[];
quantizationOptions?: Global.BaseOption<string>[];
modelFileOptions?: any[];
onSizeChange?: (val: number) => void;
onQuantizationChange?: (val: string) => void;
onValuesChange?: (val: any) => void;
}
interface FormInnerContextProps {
src/pages/llmodels/config/index.ts
+6 -1
View File
@@ -450,6 +450,8 @@ export const modelLabels = [
];
export const excludeFields = [
'repo_id',
'file_name',
'replicas',
'categories',
'name',
@@ -460,5 +462,8 @@ export const excludeFields = [
'size',
'restart_on_error',
'worker_selector',
'backend_parameters'
'backend_parameters',
'local_path',
'backend_version',
'ollama_library_model_name'
];
src/pages/llmodels/hooks/index.ts
+17 -1
View File
@@ -215,9 +215,11 @@ export const useGenerateModelFileOptions = () => {
export const useCheckCompatibility = () => {
const intl = useIntl();
const cacheFormValuesRef = useRef<any>({});
const checkTokenRef = useRef<any>(null);
const submitAnyway = useRef<boolean>(false);
const requestIdRef = useRef(0);
const updateStatusTimer = useRef<any>(null);
const [warningStatus, setWarningStatus] = useState<{
show: boolean;
title?: string;
@@ -295,7 +297,12 @@ export const useCheckCompatibility = () => {
const handleShowCompatibleAlert = (evaluateResult: EvaluateResult | null) => {
const result = handleCheckCompatibility(evaluateResult);
setWarningStatus(result);
if (updateStatusTimer.current) {
clearTimeout(updateStatusTimer.current);
}
updateStatusTimer.current = setTimeout(() => {
setWarningStatus(result);
}, 300);
};
const updateShowWarning = (params: {
@@ -386,6 +393,15 @@ export const useCheckCompatibility = () => {
source: string;
}) => {
const { changedValues, allValues, source } = params;
if (
_.isEqual(cacheFormValuesRef.current, allValues) ||
(allValues.source === modelSourceMap.local_path_value &&
!allValues.local_path)
) {
return;
}
cacheFormValuesRef.current = allValues;
const data = getSourceRepoConfigValue(source, allValues);
const gpuSelector = generateGPUIds(data.values);
src/pages/resources/components/model-files.tsx
+1 -1
View File
@@ -467,7 +467,7 @@ const ModelFiles = () => {
return (
record.resolved_paths?.length > 0 && (
<PathWrapper>
<AutoTooltip ghost>
<AutoTooltip ghost title={record.resolved_paths?.[0]} showTitle>
<span>{getResolvedPath(record.resolved_paths)}</span>
</AutoTooltip>
<span className="btn-wrapper">