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

fix: backend selection

Browse Source
This commit is contained in:
jialin
2026-01-30 20:48:55 +08:00
committed by Lawrence Li
parent a2be7f6b36
commit 4000aacb2c
27 changed files with 317 additions and 142 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/pages/llmodels/config/form-context.ts
+7 -1
View File
@@ -20,7 +20,13 @@ interface FormContextProps {
action: PageActionType;
gpuOptions: CascaderOption[];
workerLabelOptions: CascaderOption[];
backendOptions: BackendOption[];
backendOptions: {
label: string;
value: string;
title?: string;
children: BackendOption[];
}[];
flatBackendOptions: BackendOption[];
initialValues?: FormData; // for editing model
modelContextData?: Record<string, any>;
clearCacheFormValues?: () => void;
src/pages/llmodels/forms/advance-config.tsx
+3 -3
View File
@@ -16,12 +16,12 @@ const AdvanceConfig = () => {
const form = Form.useFormInstance();
const EnviromentVars = Form.useWatch('env', form);
const backend = Form.useWatch('backend', form);
const { onValuesChange, backendOptions, isGGUF, modelContextData } =
const { onValuesChange, isGGUF, modelContextData, flatBackendOptions } =
useFormContext();
const currentBackendOptions = useMemo(() => {
return backendOptions?.find((item) => item.value === backend);
}, [backend, backendOptions]);
return flatBackendOptions?.find((item) => item.value === backend);
}, [backend, flatBackendOptions]);
const handleEnviromentVarsChange = (labels: Record<string, any>) => {
form.setFieldValue('env', labels);
src/pages/llmodels/forms/backend.tsx
+58 -47
View File
@@ -1,13 +1,16 @@
import SealCascader from '@/components/seal-form/seal-cascader';
import SealInput from '@/components/seal-form/seal-input';
import SealSelect from '@/components/seal-form/seal-select';
import TooltipList from '@/components/tooltip-list';
import { PageAction } from '@/config';
import useAppUtils from '@/hooks/use-app-utils';
import { BackendSourceValueMap } from '@/pages/backends/config';
import { CaretDownOutlined, InfoCircleOutlined } from '@ant-design/icons';
import { useIntl, useNavigate } from '@umijs/max';
import { Form, Select } from 'antd';
import React, { useMemo } from 'react';
import React, { useEffect, useMemo } from 'react';
import styled from 'styled-components';
import { backendTipsList } from '../config';
import { backendOptionsMap } from '../config/backend-parameters';
import { useFormContext } from '../config/form-context';
import { BackendOption } from '../config/types';
@@ -29,7 +32,13 @@ const BackendFields: React.FC = () => {
const navigate = useNavigate();
const { getRuleMessage } = useAppUtils();
const form = Form.useFormInstance();
const { onValuesChange, backendOptions, onBackendChange } = useFormContext();
const {
action,
onValuesChange,
backendOptions,
flatBackendOptions,
onBackendChange
} = useFormContext();
const backend = Form.useWatch('backend', form);
const [showDeprecated, setShowDeprecated] = React.useState<boolean>(false);
const [selectedBackend, setSelectedBackend] =
@@ -39,31 +48,21 @@ const BackendFields: React.FC = () => {
onValuesChange?.({}, form.getFieldsValue());
};
const backendGroupedOptions = useMemo(() => {
const builtInBackends = backendOptions?.filter(
(item) => item.isBuiltIn || item.value === backendOptionsMap.custom
);
const customBackends = backendOptions?.filter(
(item) => !item.isBuiltIn && item.value !== backendOptionsMap.custom
);
const options = [];
if (builtInBackends && builtInBackends.length > 0) {
options.push({
label: intl.formatMessage({ id: 'backend.builtin' }),
options: builtInBackends
});
const backendHelperText = useMemo(() => {
const selected = flatBackendOptions?.find((item) => item.value === backend);
if (
selected &&
!selected.enabled &&
selected.backend_source === BackendSourceValueMap.COMMUNITY
) {
return (
<span style={{ color: 'var(--ant-color-error)' }}>
{intl.formatMessage({ id: 'models.form.backend.helperText' })}
</span>
);
}
if (customBackends && customBackends.length > 0) {
options.push({
label: intl.formatMessage({ id: 'models.form.backend.custom' }),
options: customBackends
});
}
return options;
}, [backendOptions, intl]);
return null;
}, [backend, flatBackendOptions, intl]);
const backendVersions = useMemo((): {
builtIn: any[];
@@ -111,14 +110,6 @@ const BackendFields: React.FC = () => {
};
}, [backend, selectedBackend, intl]);
const optionRender = (option: any) => {
return option.data.title;
};
const labelRender = (option: any) => {
return option.title;
};
const backendVersionLabelRender = (option: any) => {
console.log('backendVersionLabelRender option:', option);
return option.title;
@@ -140,10 +131,21 @@ const BackendFields: React.FC = () => {
};
const handleOnBackendChange = (value: any[], option: any) => {
console.log('handleOnBackendChange value, option:', value, option);
form.setFieldsValue({ backend: value[0] });
onBackendChange?.(value[0], option[1]);
setSelectedBackend(option[1]);
form.setFieldValue('backend', value?.[1]);
onBackendChange?.(value?.[1], option?.[1] || {});
setSelectedBackend(option?.[1] || {});
};
const displayRender = (labels: any[], selectedOptions?: any[]) => {
const groupTitle = selectedOptions?.[0]?.title;
if (!groupTitle) {
return <span>{labels?.[0]}</span>;
}
return (
<span className="flex-center">
{intl.formatMessage({ id: groupTitle })} / {labels?.[1]}
</span>
);
};
const renderDeprecatedVersionOptions = (values: any[]) => {
@@ -192,6 +194,20 @@ const BackendFields: React.FC = () => {
);
};
useEffect(() => {
if (action === PageAction.EDIT) {
const selected = flatBackendOptions?.find(
(item) => item.value === backend
);
if (selected) {
form.setFieldValue('backend_selection', [
selected.backend_source,
backend
]);
}
}
}, [backend, flatBackendOptions, action]);
return (
<>
<Form.Item name="backend" hidden>
@@ -205,19 +221,12 @@ const BackendFields: React.FC = () => {
message: getRuleMessage('select', 'models.form.backend')
}
]}
help={backendHelperText}
>
{/* <SealSelect
required
onChange={onBackendChange}
label={intl.formatMessage({ id: 'models.form.backend' })}
description={<TooltipList list={backendTipsList}></TooltipList>}
options={backendGroupedOptions}
optionRender={optionRender}
labelRender={labelRender}
></SealSelect> */}
<SealCascader
required
showSearch
allowClear={false}
changeOnSelect={false}
expandTrigger="hover"
multiple={false}
@@ -231,6 +240,7 @@ const BackendFields: React.FC = () => {
options={backendOptions}
getPopupContainer={(triggerNode) => triggerNode.parentNode}
optionNode={BackendNode}
displayRender={displayRender}
onChange={handleOnBackendChange}
></SealCascader>
</Form.Item>
@@ -244,6 +254,7 @@ const BackendFields: React.FC = () => {
placeholder={intl.formatMessage({
id: 'models.form.backendVersion.holder'
})}
description={<TooltipList list={backendTipsList}></TooltipList>}
onChange={handleBackendVersionOnChange}
label={intl.formatMessage({ id: 'models.form.backendVersion' })}
footer={
src/pages/llmodels/forms/index.tsx
+3 -1
View File
@@ -90,7 +90,8 @@ const DataForm: React.FC<DataFormProps> = forwardRef((props, ref) => {
onOk
} = props;
const { getScrollElementScrollableHeight } = useWrapperContext();
const { backendOptions, getBackendOptions } = useQueryBackends();
const { backendOptions, flatBackendOptions, getBackendOptions } =
useQueryBackends();
const { getGPUOptionList, gpuOptions, workerLabelOptions } =
useGenerateGPUOptions();
const [form] = Form.useForm();
@@ -394,6 +395,7 @@ const DataForm: React.FC<DataFormProps> = forwardRef((props, ref) => {
action: action,
gpuOptions: gpuOptions,
backendOptions: backendOptions,
flatBackendOptions: flatBackendOptions,
workerLabelOptions: workerLabelOptions,
initialValues: initialValues,
modelContextData: modelContextData,
src/pages/llmodels/forms/kv-cache.tsx
+3 -3
View File
@@ -11,7 +11,7 @@ import { FormData } from '../config/types';
const KVCacheForm = () => {
const intl = useIntl();
const form = Form.useFormInstance();
const { onValuesChange, backendOptions, formKey } = useFormContext();
const { onValuesChange, flatBackendOptions, formKey } = useFormContext();
const kvCacheEnabled = Form.useWatch(['extended_kv_cache', 'enabled'], form);
const backend = Form.useWatch('backend', form);
const configCacheRef = useRef<any>({});
@@ -68,7 +68,7 @@ const KVCacheForm = () => {
};
const builtInBackend = useMemo(() => {
const currentBackend = backendOptions.find(
const currentBackend = flatBackendOptions.find(
(item) => item.value === backend
);
@@ -78,7 +78,7 @@ const KVCacheForm = () => {
backend as string
)
);
}, [backend, backendOptions]);
}, [backend, flatBackendOptions]);
return (
<>
src/pages/llmodels/forms/local-path-source.tsx
+2 -2
View File
@@ -18,7 +18,7 @@ const LocalPathForm: React.FC = () => {
const {
formKey,
gpuOptions,
backendOptions,
flatBackendOptions,
onValuesChange,
onBackendChange
} = useFormContext();
@@ -68,7 +68,7 @@ const LocalPathForm: React.FC = () => {
});
if (oldBackend !== backend) {
const option = backendOptions.find((item) => item.value === backend);
const option = flatBackendOptions.find((item) => item.value === backend);
onBackendChange?.(backend, option);
} else {
onValuesChange?.({ local_path: value }, form.getFieldsValue());
src/pages/llmodels/forms/speculative-decode.tsx
+3 -3
View File
@@ -21,7 +21,7 @@ const AlgorithmMap = {
const SpeculativeDecode = () => {
const intl = useIntl();
const { source, backendOptions, onValuesChange } = useFormContext();
const { source, flatBackendOptions, onValuesChange } = useFormContext();
const { getRuleMessage } = useAppUtils();
const form = Form.useFormInstance();
const backend = Form.useWatch('backend', form);
@@ -76,7 +76,7 @@ const SpeculativeDecode = () => {
};
const builtInBackend = useMemo(() => {
const currentBackend = backendOptions.find(
const currentBackend = flatBackendOptions.find(
(item) => item.value === backend
);
@@ -86,7 +86,7 @@ const SpeculativeDecode = () => {
backend as string
)
);
}, [backend, backendOptions]);
}, [backend, flatBackendOptions]);
return (
<>
src/pages/llmodels/hooks/use-query-backends.ts
+9 -3
View File
@@ -6,6 +6,7 @@ import {
import { useIntl } from '@umijs/max';
import { useAtom } from 'jotai';
import _ from 'lodash';
import { useState } from 'react';
import { queryBackendList } from '../apis';
import { backendOptionsMap } from '../config/backend-parameters';
import { BackendOption } from '../config/types';
@@ -43,6 +44,9 @@ const groupByBackendSource = (list: BackendOption[]): BackendGroup[] => {
export default function useQueryBackends() {
const [backendOptions, setBackendOptions] = useAtom(backendOptionsAtom);
const [flatBackendOptions, setFlatBackendOptions] = useState<BackendOption[]>(
[]
);
const intl = useIntl();
const getBackendOptions = async (params?: { cluster_id: number }) => {
@@ -57,6 +61,7 @@ export default function useQueryBackends() {
'is_built_in',
'default_backend_param'
]),
backend_source: item.backend_source || BackendSourceValueMap.CUSTOM,
value: item.backend_name,
label:
item.backend_name === backendOptionsMap.custom
@@ -78,22 +83,23 @@ export default function useQueryBackends() {
});
const groupList = groupByBackendSource(list);
setFlatBackendOptions(list);
setBackendOptions(groupList);
console.log('Fetched backend options:', list, groupList);
if (res?.items) {
setBackendOptions(groupList);
}
return groupList || [];
} catch (error) {
// ignore
setBackendOptions([]);
setFlatBackendOptions([]);
return [];
}
};
return {
backendOptions,
flatBackendOptions,
getBackendOptions
};
}