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/backends/components/add-modal.tsx
+7 -3
View File
@@ -11,6 +11,7 @@ import React, { useEffect, useId, useRef, useState } from 'react';
import styled from 'styled-components';
import ColumnWrapper from '../../_components/column-wrapper';
import {
BackendSourceValueMap,
builtInBackendFields,
customBackendFields,
json2Yaml
@@ -55,7 +56,8 @@ const AddModal: React.FC<AddModalProps> = (props) => {
'image_name',
'run_command',
'custom_framework',
'entrypoint'
'entrypoint',
'environment'
];
// remove '-custom' suffix from version_no in currentData, when action is EDIT
@@ -64,7 +66,7 @@ const AddModal: React.FC<AddModalProps> = (props) => {
data.version_configs = Object.entries(data.version_configs || {}).reduce(
(acc, [key, value]) => {
const version = key.replace(/-custom$/, '');
acc[version] = { ...value };
acc[version] = { ...value, backend_source: data.backend_source };
return acc;
},
{} as any
@@ -128,7 +130,9 @@ const AddModal: React.FC<AddModalProps> = (props) => {
is_default: key === values.default_version,
built_in_frameworks:
values.built_in_version_configs?.[key]?.built_in_frameworks || [],
is_built_in: true,
is_built_in:
data.is_built_in &&
data.backend_source === BackendSourceValueMap.BUILTIN,
..._.pick(values.built_in_version_configs?.[key], [
'image_name',
'run_command',
src/pages/backends/components/backend-card.tsx
+55 -38
View File
@@ -5,7 +5,7 @@ import TagWrapper from '@/components/tags-wrapper';
import ThemeTag from '@/components/tags-wrapper/theme-tag';
import Card from '@/components/templates/card';
import { useIntl } from '@umijs/max';
import { Button, Tag } from 'antd';
import { Button, Flex, Tag, Tooltip } from 'antd';
import _ from 'lodash';
import { useMemo } from 'react';
import semverCoerce from 'semver/functions/coerce';
@@ -18,7 +18,8 @@ import {
builtInBackendLogos,
customColors,
customIcons,
getGpuColor
getGpuColor,
TagColorMap
} from '../config';
import { ListItem } from '../config/types';
@@ -142,12 +143,6 @@ interface BackendCardProps {
data: ListItem;
}
const TagColorMap: Record<string, string> = {
[BackendSourceValueMap.CUSTOM]: 'purple',
[BackendSourceValueMap.BUILTIN]: 'geekblue',
[BackendSourceValueMap.COMMUNITY]: 'cyan'
};
const BackendCard: React.FC<BackendCardProps> = ({ data, onSelect }) => {
const intl = useIntl();
@@ -254,22 +249,65 @@ const BackendCard: React.FC<BackendCardProps> = ({ data, onSelect }) => {
};
const renderRecommendModels = () => {
const recommnadedModels = data.recommend_models || [];
if (recommnadedModels.length === 0) {
const recommendedModels = data.recommend_models || [];
if (recommendedModels.length === 0) {
return null;
}
return (
<div className="flex-center">
<span className="dot"></span>
<TagWrapper
gap={8}
dataList={recommnadedModels}
renderTag={renderModel}
></TagWrapper>
<Tooltip
title={
<Flex gap={4} wrap="wrap">
{recommendedModels.map((item) => (
<Tag style={{ margin: 0 }} key={item}>
{item}
</Tag>
))}
</Flex>
}
>
<span>
<ThemeTag color="default">
{intl.formatMessage({ id: 'backend.recommendModels' })}
</ThemeTag>
</span>
</Tooltip>
</div>
);
};
const renderSource = () => {
const source = data.is_built_in
? BackendSourceLabelMap[BackendSourceValueMap.BUILTIN] || ''
: BackendSourceLabelMap[data.backend_source] || '';
if (!source) {
return null;
}
return (
<ThemeTag
color={
TagColorMap[
data.is_built_in
? BackendSourceValueMap.BUILTIN
: data.backend_source
]
}
className="font-400"
variant="outlined"
style={{
borderRadius: 'var(--ant-border-radius)',
margin: 0,
width: 'max-content'
}}
>
{intl.formatMessage({
id: source
})}
</ThemeTag>
);
};
return (
<StyledCard
onClick={handleClick}
@@ -308,28 +346,7 @@ const BackendCard: React.FC<BackendCardProps> = ({ data, onSelect }) => {
<IconFont type="icon-source" className="icon" />
<span>Source:</span>
</span>
<ThemeTag
color={
TagColorMap[
data.is_built_in
? BackendSourceValueMap.BUILTIN
: data.backend_source
]
}
className="font-400"
variant="outlined"
style={{
borderRadius: 'var(--ant-border-radius)',
margin: 0,
width: 'max-content'
}}
>
{intl.formatMessage({
id: data.is_built_in
? BackendSourceLabelMap[BackendSourceValueMap.BUILTIN]
: BackendSourceLabelMap[data.backend_source]
})}
</ThemeTag>
{renderSource()}
{data.backend_source === BackendSourceValueMap.COMMUNITY && (
<>
<ThemeTag
@@ -349,7 +366,7 @@ const BackendCard: React.FC<BackendCardProps> = ({ data, onSelect }) => {
</>
)}
</InfoItem>
{/* {renderRecommendModels()} */}
{renderRecommendModels()}
</SourceWrapper>
{renderFrameworks()}
</Content>
src/pages/backends/components/version-info-modal.tsx
+12 -5
View File
@@ -2,7 +2,9 @@ import ScrollerModal from '@/components/scroller-modal';
import { PlusOutlined } from '@ant-design/icons';
import { useIntl } from '@umijs/max';
import { Button } from 'antd';
import _ from 'lodash';
import { useEffect, useState } from 'react';
import { BackendSourceValueMap } from '../config';
import { VersionListItem } from '../config/types';
import VersionInfo from '../forms/version-info';
@@ -26,10 +28,11 @@ const VersionInfoModal: React.FC<VersionInfoModalProps> = ({
if (open && currentData) {
// add is_built_in field to built_in_version_configs
const builtInVersions = currentData.built_in_version_configs || {};
for (const key in builtInVersions) {
if (builtInVersions?.hasOwnProperty(key)) {
builtInVersions[key].is_built_in = true;
builtInVersions[key].is_built_in =
currentData.backend_source === BackendSourceValueMap.BUILTIN &&
currentData.is_built_in;
}
}
@@ -41,9 +44,13 @@ const VersionInfoModal: React.FC<VersionInfoModalProps> = ({
const versionList: VersionListItem[] = Object.entries(versions).map(
([key, value]: [string, any]) => ({
version_no: key,
image_name: value.image_name,
run_command: value.run_command,
entrypoint: value.entrypoint,
..._.pick(value, [
'image_name',
'run_command',
'entrypoint',
'environment',
'backend_source'
]),
is_default: key === currentData.default_version,
availableFrameworks: [
...(value.built_in_frameworks || []),
src/pages/backends/config/index.ts
+8 -2
View File
@@ -43,6 +43,12 @@ export const BackendSourceLabelMap: Record<string, string> = {
[BackendSourceValueMap.USER_DEFINED]: 'models.form.backend.custom'
};
export const TagColorMap: Record<string, string> = {
[BackendSourceValueMap.CUSTOM]: 'purple',
[BackendSourceValueMap.BUILTIN]: 'geekblue',
[BackendSourceValueMap.COMMUNITY]: 'cyan'
};
export const backendActions = [
{
label: 'common.button.edit',
@@ -63,7 +69,7 @@ export const backendActions = [
value: 'enable',
key: 'enable',
locale: true,
icon: icons.Yaml,
icon: icons.Charger,
show: (record: any) =>
!record.enabled &&
record.backend_source === BackendSourceValueMap.COMMUNITY
@@ -73,7 +79,7 @@ export const backendActions = [
value: 'disable',
key: 'disable',
locale: true,
icon: icons.Yaml,
icon: icons.Disabled,
show: (record: any) =>
record.enabled &&
record.backend_source === BackendSourceValueMap.COMMUNITY
src/pages/backends/config/types.ts
+4
View File
@@ -7,6 +7,8 @@ export interface VersionConfigs {
entrypoint?: string;
version_no?: string;
is_built_in?: boolean;
backend_source?: string;
environment: Record<string, any>;
}
export interface VersionListItem extends VersionConfigs {
@@ -24,6 +26,8 @@ export interface FormData {
allowed_proxy_uris?: string[];
content?: string;
enabled?: boolean;
backend_source?: string;
default_environment?: Record<string, any>;
}
export interface ListItem extends FormData {
src/pages/backends/forms/basic.tsx
+29 -1
View File
@@ -1,3 +1,4 @@
import LabelSelector from '@/components/label-selector';
import ListInput from '@/components/list-input';
import SealInput from '@/components/seal-form/seal-input';
import SealTextArea from '@/components/seal-form/seal-textarea';
@@ -6,7 +7,8 @@ import { PageActionType } from '@/config/types';
import useAppUtils from '@/hooks/use-app-utils';
import { useIntl } from '@umijs/max';
import { Form } from 'antd';
import React from 'react';
import React, { useEffect } from 'react';
import { BackendSourceValueMap } from '../config';
import { FormData, ListItem } from '../config/types';
type AddModalProps = {
@@ -17,6 +19,17 @@ const BasicForm: React.FC<AddModalProps> = ({ action, currentData }) => {
const form = Form.useFormInstance();
const intl = useIntl();
const { getRuleMessage } = useAppUtils();
const defaultEnvs = Form.useWatch('default_environment', form);
const handleEnviromentVarsChange = (labels: Record<string, any>) => {
form.setFieldValue('env', labels);
};
useEffect(() => {
if (action === PageAction.CREATE) {
form.setFieldValue('backend_source', BackendSourceValueMap.CUSTOM);
}
}, [action]);
return (
<>
@@ -37,6 +50,11 @@ const BasicForm: React.FC<AddModalProps> = ({ action, currentData }) => {
required
></SealInput.Input>
</Form.Item>
{action === PageAction.CREATE && (
<Form.Item<FormData> hidden name="backend_source">
<SealInput.Input></SealInput.Input>
</Form.Item>
)}
{!currentData?.is_built_in && (
<>
<Form.Item<FormData>
@@ -86,6 +104,16 @@ const BasicForm: React.FC<AddModalProps> = ({ action, currentData }) => {
})}
></ListInput>
</Form.Item>
<Form.Item<FormData> name="default_environment">
<LabelSelector
label={intl.formatMessage({
id: 'backend.form.defaultEnvironment'
})}
labels={defaultEnvs}
btnText={intl.formatMessage({ id: 'common.button.vars' })}
onChange={handleEnviromentVarsChange}
></LabelSelector>
</Form.Item>
<Form.Item<FormData> name="description" rules={[{ required: false }]}>
<SealInput.TextArea
src/pages/backends/forms/version-info.tsx
+40 -10
View File
@@ -5,7 +5,13 @@ import { useIntl } from '@umijs/max';
import { Empty } from 'antd';
import { useState } from 'react';
import styled from 'styled-components';
import { frameworks, getGpuColor } from '../config';
import {
BackendSourceLabelMap,
BackendSourceValueMap,
frameworks,
getGpuColor,
TagColorMap
} from '../config';
import { VersionListItem } from '../config/types';
const ItemWrapper = styled.div`
@@ -76,19 +82,43 @@ interface VersionItemProps {
export const VersionItem: React.FC<VersionItemProps> = ({ data }) => {
const intl = useIntl();
const renderSource = () => {
console.log('data.is_built_in', data.is_built_in);
const source = data.is_built_in
? BackendSourceLabelMap[BackendSourceValueMap.BUILTIN] || ''
: BackendSourceLabelMap[data.backend_source || ''] || '';
if (!source) {
return null;
}
return (
<ThemeTag
color={
TagColorMap[
data.is_built_in
? BackendSourceValueMap.BUILTIN
: data.backend_source || ''
]
}
className="font-400"
variant="outlined"
style={{
borderRadius: 'var(--ant-border-radius)',
margin: 0,
width: 'max-content'
}}
>
{intl.formatMessage({
id: source
})}
</ThemeTag>
);
};
return (
<ItemWrapper>
<div className="title">
<span>{data.version_no}</span>
{data.is_built_in && (
<ThemeTag
color="geekblue"
className="font-400"
style={{ marginRight: 0 }}
>
{intl.formatMessage({ id: 'backend.builtin' })}
</ThemeTag>
)}
{renderSource()}
{!data.is_built_in && data.is_default && (
<ThemeTag
color="geekblue"
src/pages/backends/forms/versions-config.tsx
+38 -6
View File
@@ -1,4 +1,5 @@
import CollapsibleContainer from '@/components/collapse-container';
import LabelSelector from '@/components/label-selector';
import BaseSelect from '@/components/seal-form/base/select';
import SealInput from '@/components/seal-form/seal-input';
import SealSelect from '@/components/seal-form/seal-select';
@@ -75,7 +76,8 @@ const VersionsForm: React.FC<AddModalProps> = ({
run_command: '',
entrypoint: '',
isBuiltin: false,
is_default: false
is_default: false,
environment: {}
}
];
@@ -102,7 +104,8 @@ const VersionsForm: React.FC<AddModalProps> = ({
run_command: '',
entrypoint: '',
isBuiltin: false,
is_default: false
is_default: false,
environment: {}
};
form.setFieldValue('version_configs', [...versions, newVersion]);
};
@@ -136,6 +139,25 @@ const VersionsForm: React.FC<AddModalProps> = ({
setDefaultVersion(value);
};
const handleEnviromentVarsChange = (
envs: Record<string, any>,
name: number
) => {
const versions = form.getFieldValue('version_configs') || [];
const updatedVersions = versions.map((version: any, idx: number) => {
if (idx === name) {
return {
...version,
environment: {
...envs
}
};
}
return version;
});
form.setFieldValue('version_configs', updatedVersions);
};
useEffect(() => {
const versions = form.getFieldValue('version_configs') || [];
@@ -227,6 +249,7 @@ const VersionsForm: React.FC<AddModalProps> = ({
{ add, remove }
) => {
const versionConfigs = form.getFieldValue('version_configs');
console.log('versionConfigs', versionConfigs);
return fields?.map(({ key, name }) => (
<div
key={name}
@@ -356,10 +379,7 @@ const VersionsForm: React.FC<AddModalProps> = ({
})}
></SealInput.TextArea>
</Form.Item>
<Form.Item
name={[name, 'run_command']}
style={{ marginBottom: 0 }}
>
<Form.Item name={[name, 'run_command']}>
<SealTextArea
allowClear
alwaysFocus={true}
@@ -376,6 +396,18 @@ const VersionsForm: React.FC<AddModalProps> = ({
label={intl.formatMessage({ id: 'backend.runCommand' })}
></SealTextArea>
</Form.Item>
<Form.Item name={[name, 'environment']}>
<LabelSelector
label={intl.formatMessage({
id: 'models.form.env'
})}
labels={versionConfigs.environment}
btnText={intl.formatMessage({ id: 'common.button.vars' })}
onChange={(envs) =>
handleEnviromentVarsChange(envs, name)
}
></LabelSelector>
</Form.Item>
</CollapsibleContainer>
</div>
));
src/pages/backends/index.tsx
+3 -1
View File
@@ -1,6 +1,7 @@
import DeleteModal from '@/components/delete-modal';
import IconFont from '@/components/icon-font';
import { FilterBar } from '@/components/page-tools';
import { PageAction } from '@/config';
import { PageActionType } from '@/config/types';
import useTableFetch from '@/hooks/use-table-fetch';
import { useIntl } from '@umijs/max';
@@ -122,7 +123,7 @@ const BackendList = () => {
const handleAddBackend = () => {
setOpenModalStatus({
open: true,
action: 'create'
action: PageAction.CREATE
});
};
@@ -161,6 +162,7 @@ const BackendList = () => {
enabled: item.action === 'enable'
}
});
handleSearch();
}
};
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
};
}