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

fix: custom backend and versions ux

Browse Source
This commit is contained in:
jialin
2025-11-04 13:37:53 +08:00
parent 9be465a8cf
commit 23b7936924
19 changed files with 247 additions and 104 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/pages/llmodels/config/types.ts
+8 -2
View File
@@ -288,13 +288,19 @@ export interface EvaluateResult {
};
}
export interface BackendOption {
export interface BackendGroupOption {
value: string;
label: string;
title?: string;
default_backend_param: string[];
default_version: string;
isBuiltIn: boolean;
versions: { label: string; value: string }[];
versions: { label: string; value: string; title?: string }[];
}
export interface BackendOption {
label: string;
options: BackendGroupOption[];
}
export interface AccessControlFormData {
src/pages/llmodels/forms/advance-config.tsx
+8 -5
View File
@@ -5,11 +5,13 @@ import { useIntl } from '@umijs/max';
import { Form } from 'antd';
import _ from 'lodash';
import { useCallback } from 'react';
import { modelCategories, ScheduleValueMap } from '../config';
import { DeployFormKeyMap, modelCategories, ScheduleValueMap } from '../config';
import { backendOptionsMap } from '../config/backend-parameters';
import { useFormContext } from '../config/form-context';
import { FormData } from '../config/types';
import Backend from './backend';
import BackendForm from './backend';
import BackendParametersList from './backend-parameters-list';
import CustomBackend from './custom-backend';
const AdvanceConfig = () => {
const intl = useIntl();
@@ -17,7 +19,7 @@ const AdvanceConfig = () => {
const EnviromentVars = Form.useWatch('env', form);
const scheduleType = Form.useWatch('scheduleType', form);
const backend = Form.useWatch('backend', form);
const { onValuesChange } = useFormContext();
const { onValuesChange, formKey } = useFormContext();
const handleEnviromentVarsChange = useCallback(
(labels: Record<string, any>) => {
@@ -62,8 +64,9 @@ const AdvanceConfig = () => {
options={modelCategories}
></SealSelect>
</Form.Item>
<Backend></Backend>
{formKey === DeployFormKeyMap.CATALOG && <BackendForm></BackendForm>}
<CustomBackend></CustomBackend>
<BackendParametersList></BackendParametersList>
<Form.Item<FormData> name="env">
<LabelSelector
label={intl.formatMessage({
src/pages/llmodels/forms/backend.tsx
+60 -58
View File
@@ -1,12 +1,11 @@
import IconFont from '@/components/icon-font';
import SealInput from '@/components/seal-form/seal-input';
import SealSelect from '@/components/seal-form/seal-select';
import SealTextArea from '@/components/seal-form/seal-textarea';
import TooltipList from '@/components/tooltip-list';
import useAppUtils from '@/hooks/use-app-utils';
import { useIntl } from '@umijs/max';
import { Form, Typography } from 'antd';
import React, { useMemo } from 'react';
import styled from 'styled-components';
import {
backendLabelMap,
backendTipsList,
@@ -14,23 +13,20 @@ import {
} from '../config';
import { backendOptionsMap } from '../config/backend-parameters';
import { useFormContext } from '../config/form-context';
import { FormData } from '../config/types';
import BackendParametersList from './backend-parameters-list';
const Box = styled.div`
&.default-backend {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 16px;
}
`;
const BackendFields: React.FC = () => {
const intl = useIntl();
const { getRuleMessage } = useAppUtils();
const form = Form.useFormInstance();
const {
isGGUF,
formKey,
action,
source,
gpuOptions,
onValuesChange,
backendOptions,
onBackendChange
} = useFormContext();
const { onValuesChange, backendOptions, onBackendChange } = useFormContext();
const backend = Form.useWatch('backend', form);
const handleBackendVersionOnBlur = () => {
@@ -45,10 +41,53 @@ const BackendFields: React.FC = () => {
if (!backend || backend === backendOptionsMap.custom) {
return [];
}
return (
backendOptions.find((item) => item.value === backend)?.versions || []
// find the backend item from backendOptions
const backendItem = backendOptions
.flatMap((group) => group.options)
.find((item) => item.value === backend);
const versions = backendItem?.versions || [];
// if it's a custom backend,
if (backendItem && !backendItem.isBuiltIn) {
return versions;
}
// check the value if endts with '-custom', if true, remove the suffix add to "Cutom" group, if not , add to "Built-in" group
const builtInVersions = versions.filter(
(item) => !item.value?.endsWith('-custom')
);
}, [backend, backendOptions]);
const customVersions = versions.filter((item) =>
item.value?.endsWith('-custom')
);
const options = [];
if (builtInVersions.length > 0) {
options.push({
label: intl.formatMessage({ id: 'backend.builtin' }),
options: builtInVersions
});
}
if (customVersions.length > 0) {
options.push({
label: intl.formatMessage({ id: 'backend.custom' }),
options: customVersions
});
}
return options;
}, [backend, backendOptions, intl]);
const optionRender = (option: any) => {
return option.data.title;
};
const labelRender = (option: any) => {
return option.title;
};
return (
<>
@@ -67,12 +106,16 @@ const BackendFields: React.FC = () => {
label={intl.formatMessage({ id: 'models.form.backend' })}
description={<TooltipList list={backendTipsList}></TooltipList>}
options={backendOptions}
optionRender={optionRender}
labelRender={labelRender}
></SealSelect>
</Form.Item>
{backendOptionsMap.custom !== backend && (
<Form.Item name="backend_version">
<SealSelect
options={backendVersions}
optionRender={optionRender}
labelRender={labelRender}
placeholder={intl.formatMessage({
id: 'models.form.backendVersion.holder'
})}
@@ -114,47 +157,6 @@ const BackendFields: React.FC = () => {
></SealSelect>
</Form.Item>
)}
{backend === backendOptionsMap.custom && (
<>
<Form.Item<FormData>
name="image_name"
rules={[
{
required: true,
message: getRuleMessage('input', 'backend.imageName')
}
]}
>
<SealInput.Input
required
allowClear
label={intl.formatMessage({ id: 'backend.imageName' })}
></SealInput.Input>
</Form.Item>
<Form.Item<FormData>
name="run_command"
rules={[
{
required: true,
message: getRuleMessage('input', 'backend.runCommand')
}
]}
>
<SealTextArea
allowClear
required
scaleSize={true}
alwaysFocus={true}
autoSize={{ minRows: 2, maxRows: 4 }}
label={intl.formatMessage({ id: 'backend.runCommand' })}
placeholder={intl.formatMessage({
id: 'models.form.runCommandPlaceholder'
})}
></SealTextArea>
</Form.Item>
</>
)}
<BackendParametersList></BackendParametersList>
</>
);
};
src/pages/llmodels/forms/basic.tsx
+5 -1
View File
@@ -8,8 +8,10 @@ import {
import { useIntl } from '@umijs/max';
import { Form } from 'antd';
import { useMemo } from 'react';
import { sourceOptions } from '../config';
import { DeployFormKeyMap, sourceOptions } from '../config';
import { useFormContext } from '../config/form-context';
import { FormData } from '../config/types';
import BackendForm from './backend';
import LocalPathSource from './local-path-source';
import OnlineSource from './online-source';
@@ -32,6 +34,7 @@ const BasicForm: React.FC<BasicFormProps> = (props) => {
onSourceChange
} = props;
const intl = useIntl();
const { formKey } = useFormContext();
const { getRuleMessage } = useAppUtils();
const form = Form.useFormInstance();
@@ -115,6 +118,7 @@ const BasicForm: React.FC<BasicFormProps> = (props) => {
></SealSelect>
}
</Form.Item>
{formKey === DeployFormKeyMap.DEPLOYMENT && <BackendForm></BackendForm>}
<Form.Item<FormData>
name="replicas"
rules={[
src/pages/llmodels/forms/custom-backend.tsx
+66
View File
@@ -0,0 +1,66 @@
import SealInput from '@/components/seal-form/seal-input';
import SealTextArea from '@/components/seal-form/seal-textarea';
import useAppUtils from '@/hooks/use-app-utils';
import { useIntl } from '@umijs/max';
import { Form } from 'antd';
import React from 'react';
import { backendOptionsMap } from '../config/backend-parameters';
import { FormData } from '../config/types';
const CustomBackend: React.FC = () => {
const intl = useIntl();
const { getRuleMessage } = useAppUtils();
const form = Form.useFormInstance();
const backend = Form.useWatch('backend', form);
return (
<>
{backend === backendOptionsMap.custom && (
<>
<Form.Item<FormData>
name="image_name"
rules={[
{
required: true,
message: getRuleMessage('input', 'backend.imageName')
}
]}
>
<SealInput.Input
required
allowClear
label={intl.formatMessage({ id: 'backend.imageName' })}
></SealInput.Input>
</Form.Item>
<Form.Item<FormData>
name="run_command"
rules={[
{
required: true,
message: getRuleMessage('input', 'backend.runCommand')
}
]}
>
<SealTextArea
allowClear
required
scaleSize={true}
alwaysFocus={true}
autoSize={{ minRows: 2, maxRows: 4 }}
label={intl.formatMessage({ id: 'backend.runCommand' })}
description={intl.formatMessage({
id: 'backend.form.defaultExecuteCommand.tips'
})}
placeholder={intl.formatMessage(
{ id: 'common.help.eg' },
{ content: 'vllm serve {{model_path}} --port {{port}}' }
)}
></SealTextArea>
</Form.Item>
</>
)}
</>
);
};
export default CustomBackend;
src/pages/llmodels/forms/index.tsx
+8 -3
View File
@@ -16,7 +16,7 @@ import {
import { backendOptionsMap } from '../config/backend-parameters';
import { FormContext } from '../config/form-context';
import {
BackendOption,
BackendGroupOption,
DeployFormKey,
FormData,
SourceType
@@ -188,7 +188,7 @@ const DataForm: React.FC<DataFormProps> = forwardRef((props, ref) => {
};
};
const updateKVCacheConfig = (backend: string, option: BackendOption) => {
const updateKVCacheConfig = (backend: string, option: BackendGroupOption) => {
if (
!option.isBuiltIn &&
[backendOptionsMap.SGLang, backendOptionsMap.vllm].includes(backend)
@@ -202,7 +202,12 @@ const DataForm: React.FC<DataFormProps> = forwardRef((props, ref) => {
return {};
};
const handleBackendChange = async (val: string, option: BackendOption) => {
const handleBackendChange = async (
val: string,
option: BackendGroupOption
) => {
console.log('handleBackendChange option===>', val, option);
const isGGUF = checkIsGGUF();
form.setFieldsValue({
env: null,
backend_version: option.default_version || '',
src/pages/llmodels/hooks/use-query-backends.ts
+35 -4
View File
@@ -1,28 +1,59 @@
import { backendOptionsAtom } from '@/atoms/models';
import { useIntl } from '@umijs/max';
import { useAtom } from 'jotai';
import { queryBackendList } from '../apis';
import { backendOptionsMap } from '../config/backend-parameters';
import { BackendGroupOption } from '../config/types';
export default function useQueryBackends() {
const [backendOptions, setBackendOptions] = useAtom(backendOptionsAtom);
const intl = useIntl();
const getBackendOptions = async (params?: { cluster_id: number }) => {
try {
const res = await queryBackendList(params);
const list = res?.items?.map((item) => {
const list: BackendGroupOption[] = res?.items?.map((item) => {
return {
value: item.backend_name,
label: item.backend_name,
label:
item.backend_name === backendOptionsMap.custom
? intl.formatMessage({ id: 'backend.quickConfig' })
: item.backend_name,
title:
item.backend_name === backendOptionsMap.custom
? intl.formatMessage({ id: 'backend.quickConfig' })
: item.backend_name.replace(/-custom$/, ''),
default_backend_param: item.default_backend_param || [],
default_version: item.default_version,
isBuiltIn: item.is_built_in,
versions: (item.versions || []).map((vItem) => ({
label: vItem.version,
value: vItem.version
value: vItem.version,
title: vItem.version.replace(/-custom$/, '')
}))
};
});
const builtInBackends = list?.filter((item) => item.isBuiltIn);
const customBackends = list?.filter((item) => !item.isBuiltIn);
const options = [];
if (builtInBackends && builtInBackends.length > 0) {
options.push({
label: intl.formatMessage({ id: 'backend.builtin' }),
options: builtInBackends
});
}
if (customBackends && customBackends.length > 0) {
options.push({
label: intl.formatMessage({ id: 'backend.custom' }),
options: customBackends
});
}
if (res?.items) {
setBackendOptions(list || []);
setBackendOptions(options);
}
return list || [];
} catch (error) {