chore: backend api
This commit is contained in:
Generated
+11265
-9071
File diff suppressed because it is too large
Load Diff
+8
-1
@@ -47,6 +47,13 @@ export const workerListAtom = atom<
|
||||
}[]
|
||||
>([]);
|
||||
|
||||
export const backendOptionsAtom = atom<BackendOption[]>([]);
|
||||
interface BackGroupOption {
|
||||
label: string;
|
||||
value: string;
|
||||
title?: string;
|
||||
children: BackendOption[];
|
||||
}
|
||||
|
||||
export const backendOptionsAtom = atom<BackGroupOption[]>([]);
|
||||
|
||||
export const resourceOverviewAtom = atom<Record<string, any>>({});
|
||||
|
||||
@@ -2,7 +2,7 @@ import { createFromIconfontCN } from '@ant-design/icons';
|
||||
// import './iconfont/iconfont.js';
|
||||
|
||||
const IconFont = createFromIconfontCN({
|
||||
scriptUrl: '//at.alicdn.com/t/c/font_4613488_q6s2f01tf6l.js'
|
||||
scriptUrl: '//at.alicdn.com/t/c/font_4613488_2h8628ohalv.js'
|
||||
});
|
||||
|
||||
export default IconFont;
|
||||
|
||||
@@ -22,7 +22,7 @@ const CardWrapper = styled.div.attrs({
|
||||
})`
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
padding: 16px 20px;
|
||||
padding: 16px 16px;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
border: 1px solid var(--ant-color-border);
|
||||
|
||||
@@ -10,6 +10,7 @@ export default {
|
||||
'backend.framework': 'Framework',
|
||||
'backend.builtin': 'Built-in',
|
||||
'backend.custom': 'Custom',
|
||||
'backend.community': 'Community',
|
||||
'backend.isDefault': 'Default',
|
||||
'backend.availableFrameworks': 'Supported Frameworks',
|
||||
'backend.addVersion': 'Add Version',
|
||||
|
||||
@@ -269,5 +269,9 @@ export default {
|
||||
'common.button.dontshowagain': "Don't show again",
|
||||
'common.sorter.tips.ascend': 'Click to sort ascending',
|
||||
'common.sorter.tips.descend': 'Click to sort descending',
|
||||
'common.sorter.tips.cancel': 'Click to cancel sorting'
|
||||
'common.sorter.tips.cancel': 'Click to cancel sorting',
|
||||
'common.button.enable': 'Enable',
|
||||
'common.button.disable': 'Disable',
|
||||
'common.status.enabled': 'Enabled',
|
||||
'common.status.disabled': 'Disabled'
|
||||
};
|
||||
|
||||
@@ -10,6 +10,7 @@ export default {
|
||||
'backend.framework': 'Framework',
|
||||
'backend.builtin': 'Built-in',
|
||||
'backend.custom': 'Custom',
|
||||
'backend.community': 'Community',
|
||||
'backend.isDefault': 'Default',
|
||||
'backend.availableFrameworks': 'Supported Frameworks',
|
||||
'backend.addVersion': 'Add Version',
|
||||
|
||||
@@ -269,7 +269,11 @@ export default {
|
||||
'common.button.dontshowagain': "Don't show again",
|
||||
'common.sorter.tips.ascend': 'Click to sort ascending',
|
||||
'common.sorter.tips.descend': 'Click to sort descending',
|
||||
'common.sorter.tips.cancel': 'Click to cancel sorting'
|
||||
'common.sorter.tips.cancel': 'Click to cancel sorting',
|
||||
'common.button.enable': 'Enable',
|
||||
'common.button.disable': 'Disable',
|
||||
'common.status.enabled': 'Enabled',
|
||||
'common.status.disabled': 'Disabled'
|
||||
};
|
||||
|
||||
// ========== To-Do: Translate Keys (Remove After Translation) ==========
|
||||
@@ -304,5 +308,9 @@ export default {
|
||||
// 29. 'common.button.dontshowagain': "Don't show again",
|
||||
// 30. 'common.sorter.tips.ascend': 'Click to sort ascending',
|
||||
// 31. 'common.sorter.tips.descend': 'Click to sort descending',
|
||||
// 32. 'common.sorter.tips.cancel': 'Click to cancel sorting'
|
||||
// 32. 'common.sorter.tips.cancel': 'Click to cancel sorting',
|
||||
// 33. 'common.button.enable': 'Enable',
|
||||
// 34. 'common.button.disable': 'Disable',
|
||||
// 35. 'common.status.enabled': 'Enabled',
|
||||
// 36. 'common.status.disabled': 'Disabled'
|
||||
// ========== End of To-Do List ==========
|
||||
|
||||
@@ -10,6 +10,7 @@ export default {
|
||||
'backend.framework': 'Фреймворк',
|
||||
'backend.builtin': 'Встроенный',
|
||||
'backend.custom': 'Пользовательский',
|
||||
'backend.community': 'Сообщество',
|
||||
'backend.isDefault': 'По умолчанию',
|
||||
'backend.availableFrameworks': 'Поддерживаемые фреймворки',
|
||||
'backend.addVersion': 'Добавить версию',
|
||||
|
||||
@@ -265,12 +265,19 @@ export default {
|
||||
'common.form.rule.selectInput': 'Выберите или введите {name}',
|
||||
'common.tag.experimental': 'Экспериментальный',
|
||||
'common.title.example': 'Пример',
|
||||
'common.button.dontshowagain': "Больше не показывать",
|
||||
'common.button.dontshowagain': 'Больше не показывать',
|
||||
'common.sorter.tips.ascend': 'Нажмите для сортировки по возрастанию',
|
||||
'common.sorter.tips.descend': 'Нажмите для сортировки по убыванию',
|
||||
'common.sorter.tips.cancel': 'Нажмите, чтобы отменить сортировку'
|
||||
'common.sorter.tips.cancel': 'Нажмите, чтобы отменить сортировку',
|
||||
'common.button.enable': 'Enable',
|
||||
'common.button.disable': 'Disable',
|
||||
'common.status.enabled': 'Enabled',
|
||||
'common.status.disabled': 'Disabled'
|
||||
};
|
||||
|
||||
// ========== To-Do: Translate Keys (Remove After Translation) ==========
|
||||
|
||||
// 1. 'common.button.enable': 'Enable',
|
||||
// 2. 'common.button.disable': 'Disable',
|
||||
// 3. 'common.status.enabled': 'Enabled',
|
||||
// 4. 'common.status.disabled': 'Disabled'
|
||||
// ========== End of To-Do List ==========
|
||||
|
||||
@@ -10,6 +10,7 @@ export default {
|
||||
'backend.framework': '框架',
|
||||
'backend.builtin': '内置',
|
||||
'backend.custom': '自定义',
|
||||
'backend.community': '社区',
|
||||
'backend.isDefault': '默认',
|
||||
'backend.availableFrameworks': '支持框架',
|
||||
'backend.addVersion': '添加版本',
|
||||
|
||||
@@ -261,5 +261,9 @@ export default {
|
||||
'common.button.dontshowagain': '不再提示',
|
||||
'common.sorter.tips.ascend': '点击升序',
|
||||
'common.sorter.tips.descend': '点击降序',
|
||||
'common.sorter.tips.cancel': '取消排序'
|
||||
'common.sorter.tips.cancel': '取消排序',
|
||||
'common.button.enable': '启用',
|
||||
'common.button.disable': '禁用',
|
||||
'common.status.enabled': '已启用',
|
||||
'common.status.disabled': '未启用'
|
||||
};
|
||||
|
||||
@@ -13,6 +13,8 @@ import semverGt from 'semver/functions/gt';
|
||||
import styled from 'styled-components';
|
||||
import {
|
||||
backendActions,
|
||||
BackendSourceLabelMap,
|
||||
BackendSourceValueMap,
|
||||
builtInBackendLogos,
|
||||
customColors,
|
||||
customIcons,
|
||||
@@ -29,6 +31,23 @@ const StyledCard = styled(Card)`
|
||||
}
|
||||
`;
|
||||
|
||||
const SourceWrapper = styled.div`
|
||||
display: grid;
|
||||
width: 100%;
|
||||
grid-template-columns: max-content 1fr;
|
||||
align-items: center;
|
||||
|
||||
gap: 0px;
|
||||
.dot {
|
||||
display: flex;
|
||||
height: 4px;
|
||||
width: 4px;
|
||||
background-color: var(--ant-color-text-quaternary);
|
||||
border-radius: 50%;
|
||||
margin-inline: 8px;
|
||||
}
|
||||
`;
|
||||
|
||||
const TagInner = styled(Tag)`
|
||||
display: flex;
|
||||
align-items: center;
|
||||
@@ -59,8 +78,8 @@ const CardName = styled.div`
|
||||
display: flex;
|
||||
align-items: center;
|
||||
color: var(--ant-color-text);
|
||||
margin-bottom: 4px;
|
||||
gap: 16px;
|
||||
margin-bottom: 8px;
|
||||
gap: 8px;
|
||||
`;
|
||||
|
||||
const Content = styled.div`
|
||||
@@ -68,7 +87,7 @@ const Content = styled.div`
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
margin-top: 12px;
|
||||
gap: 16px;
|
||||
gap: 8px;
|
||||
color: var(--ant-color-text-secondary);
|
||||
.description {
|
||||
margin-block: 12px;
|
||||
@@ -103,12 +122,12 @@ const Content = styled.div`
|
||||
const InfoItem = styled.div`
|
||||
display: grid;
|
||||
width: 100%;
|
||||
grid-template-columns: max-content 1fr;
|
||||
grid-template-columns: max-content 1fr minmax(0, max-content);
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
color: var(--ant-color-text-tertiary);
|
||||
.icon {
|
||||
color: var(--ant-color-text-tertiary);
|
||||
color: var(--ant-color-text-quaternary);
|
||||
}
|
||||
.label {
|
||||
display: flex;
|
||||
@@ -123,6 +142,12 @@ 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();
|
||||
|
||||
@@ -138,6 +163,9 @@ const BackendCard: React.FC<BackendCardProps> = ({ data, onSelect }) => {
|
||||
if (builtInBackendLogos[data.backend_name]) {
|
||||
return <img src={builtInBackendLogos[data.backend_name]} height={20} />;
|
||||
}
|
||||
if (data.icon) {
|
||||
return <img src={data.icon} height={20} />;
|
||||
}
|
||||
const color = customColors[data.id % customColors.length];
|
||||
const icon = customIcons[data.id % customIcons.length];
|
||||
|
||||
@@ -149,10 +177,12 @@ const BackendCard: React.FC<BackendCardProps> = ({ data, onSelect }) => {
|
||||
};
|
||||
|
||||
const actions = useMemo(() => {
|
||||
if (data.is_built_in) {
|
||||
return backendActions.filter((item) => item.key !== 'delete');
|
||||
}
|
||||
return backendActions.filter((item) => item.key !== 'view_versions');
|
||||
return backendActions.filter((item) => {
|
||||
if (item.show) {
|
||||
return item.show(data);
|
||||
}
|
||||
return true;
|
||||
});
|
||||
}, [data.is_built_in]);
|
||||
|
||||
const onClick = (e: React.MouseEvent) => {
|
||||
@@ -193,6 +223,16 @@ const BackendCard: React.FC<BackendCardProps> = ({ data, onSelect }) => {
|
||||
);
|
||||
};
|
||||
|
||||
const renderModel = (item: any) => {
|
||||
return (
|
||||
<AutoTooltip ghost minWidth={20} showTitle title={item}>
|
||||
<ThemeTag key={item} style={{ marginRight: 0 }}>
|
||||
{item}
|
||||
</ThemeTag>
|
||||
</AutoTooltip>
|
||||
);
|
||||
};
|
||||
|
||||
const renderFrameworks = () => {
|
||||
const frameworks = _.keys(data.framework_index_map || {});
|
||||
|
||||
@@ -213,13 +253,30 @@ const BackendCard: React.FC<BackendCardProps> = ({ data, onSelect }) => {
|
||||
);
|
||||
};
|
||||
|
||||
const renderRecommendModels = () => {
|
||||
const recommnadedModels = data.recommend_models || [];
|
||||
if (recommnadedModels.length === 0) {
|
||||
return null;
|
||||
}
|
||||
return (
|
||||
<div className="flex-center">
|
||||
<span className="dot"></span>
|
||||
<TagWrapper
|
||||
gap={8}
|
||||
dataList={recommnadedModels}
|
||||
renderTag={renderModel}
|
||||
></TagWrapper>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
return (
|
||||
<StyledCard
|
||||
onClick={handleClick}
|
||||
clickable={true}
|
||||
hoverable={true}
|
||||
disabled={false}
|
||||
height={140}
|
||||
height={164}
|
||||
ghost
|
||||
header={
|
||||
<Header>
|
||||
@@ -244,17 +301,56 @@ const BackendCard: React.FC<BackendCardProps> = ({ data, onSelect }) => {
|
||||
<Content>
|
||||
<CardName>
|
||||
<span>{data.backend_name}</span>
|
||||
{data.is_built_in && (
|
||||
<Tag
|
||||
color="geekblue"
|
||||
className="font-400"
|
||||
variant="filled"
|
||||
style={{ borderRadius: 'var(--ant-border-radius)', margin: 0 }}
|
||||
>
|
||||
{intl.formatMessage({ id: 'backend.builtin' })}
|
||||
</Tag>
|
||||
)}
|
||||
</CardName>
|
||||
<SourceWrapper>
|
||||
<InfoItem>
|
||||
<span className="label">
|
||||
<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>
|
||||
{data.backend_source === BackendSourceValueMap.COMMUNITY && (
|
||||
<>
|
||||
<ThemeTag
|
||||
className="font-400"
|
||||
variant="outlined"
|
||||
color={data.enabled ? 'green' : 'default'}
|
||||
style={{
|
||||
borderRadius: 'var(--ant-border-radius)',
|
||||
margin: 0,
|
||||
width: 'max-content'
|
||||
}}
|
||||
>
|
||||
{data.enabled
|
||||
? `${intl.formatMessage({ id: 'common.status.enabled' })}`
|
||||
: `${intl.formatMessage({ id: 'common.status.disabled' })}`}
|
||||
</ThemeTag>
|
||||
</>
|
||||
)}
|
||||
</InfoItem>
|
||||
{/* {renderRecommendModels()} */}
|
||||
</SourceWrapper>
|
||||
{renderFrameworks()}
|
||||
</Content>
|
||||
</StyledCard>
|
||||
|
||||
@@ -29,6 +29,20 @@ export const builtInBackendLogos: Record<string, string> = {
|
||||
[backendOptionsMap.voxBox]: VoxBoxLogo
|
||||
};
|
||||
|
||||
export const BackendSourceValueMap = {
|
||||
CUSTOM: 'custom',
|
||||
BUILTIN: 'built-in',
|
||||
COMMUNITY: 'community',
|
||||
USER_DEFINED: 'user_defined'
|
||||
};
|
||||
|
||||
export const BackendSourceLabelMap: Record<string, string> = {
|
||||
[BackendSourceValueMap.CUSTOM]: 'backend.custom',
|
||||
[BackendSourceValueMap.BUILTIN]: 'backend.builtin',
|
||||
[BackendSourceValueMap.COMMUNITY]: 'backend.community',
|
||||
[BackendSourceValueMap.USER_DEFINED]: 'models.form.backend.custom'
|
||||
};
|
||||
|
||||
export const backendActions = [
|
||||
{
|
||||
label: 'common.button.edit',
|
||||
@@ -44,13 +58,34 @@ export const backendActions = [
|
||||
locale: true,
|
||||
icon: icons.Yaml
|
||||
},
|
||||
{
|
||||
label: 'common.button.enable',
|
||||
value: 'enable',
|
||||
key: 'enable',
|
||||
locale: true,
|
||||
icon: icons.Yaml,
|
||||
show: (record: any) =>
|
||||
!record.enabled &&
|
||||
record.backend_source === BackendSourceValueMap.COMMUNITY
|
||||
},
|
||||
{
|
||||
label: 'common.button.disable',
|
||||
value: 'disable',
|
||||
key: 'disable',
|
||||
locale: true,
|
||||
icon: icons.Yaml,
|
||||
show: (record: any) =>
|
||||
record.enabled &&
|
||||
record.backend_source === BackendSourceValueMap.COMMUNITY
|
||||
},
|
||||
{
|
||||
label: 'common.button.delete',
|
||||
value: 'delete',
|
||||
key: 'delete',
|
||||
icon: icons.DeleteOutlined,
|
||||
locale: true,
|
||||
danger: true
|
||||
danger: true,
|
||||
show: (record: any) => !record.is_built_in
|
||||
}
|
||||
];
|
||||
|
||||
|
||||
@@ -23,6 +23,7 @@ export interface FormData {
|
||||
default_backend_param?: string[];
|
||||
allowed_proxy_uris?: string[];
|
||||
content?: string;
|
||||
enabled?: boolean;
|
||||
}
|
||||
|
||||
export interface ListItem extends FormData {
|
||||
@@ -30,6 +31,9 @@ export interface ListItem extends FormData {
|
||||
is_built_in?: boolean;
|
||||
created_at?: string;
|
||||
updated_at?: string;
|
||||
backend_source: string;
|
||||
icon: string;
|
||||
recommend_models: string[];
|
||||
built_in_version_configs?: Record<string, VersionConfigs>;
|
||||
framework_index_map?: Record<string, string[]>;
|
||||
}
|
||||
|
||||
@@ -25,6 +25,7 @@ import VersionInfoModal from './components/version-info-modal';
|
||||
import { json2Yaml, yaml2Json } from './config';
|
||||
import { FormData, ListItem } from './config/types';
|
||||
import useExportYAML from './hooks/use-export-yaml';
|
||||
import useEnableBackend from './services/use-enable-backend';
|
||||
|
||||
const BackendList = () => {
|
||||
const intl = useIntl();
|
||||
@@ -59,6 +60,7 @@ const BackendList = () => {
|
||||
open: boolean;
|
||||
currentData?: Partial<ListItem>;
|
||||
}>({ open: false });
|
||||
const { handleEnableBackend } = useEnableBackend();
|
||||
|
||||
// built_in_version_configs is read-only, but needs to be included when updating
|
||||
const handleOnSubmit = async (values: FormData) => {
|
||||
@@ -151,6 +153,14 @@ const BackendList = () => {
|
||||
open: true,
|
||||
currentData: item.data
|
||||
});
|
||||
} else if (item.action === 'enable' || item.action === 'disable') {
|
||||
handleEnableBackend({
|
||||
id: item.data.id,
|
||||
data: {
|
||||
...item.data,
|
||||
enabled: item.action === 'enable'
|
||||
}
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
@@ -0,0 +1,21 @@
|
||||
import { useIntl } from '@umijs/max';
|
||||
import { message } from 'antd';
|
||||
import { updateBackend } from '../../backends/apis';
|
||||
import { FormData } from '../../backends/config/types';
|
||||
|
||||
const useEnableBackend = () => {
|
||||
const intl = useIntl();
|
||||
const handleEnableBackend = async (params: {
|
||||
id: number;
|
||||
data: FormData;
|
||||
}) => {
|
||||
await updateBackend(params.id, {
|
||||
data: params.data
|
||||
});
|
||||
message.success(intl.formatMessage({ id: 'common.message.success' }));
|
||||
};
|
||||
|
||||
return { handleEnableBackend };
|
||||
};
|
||||
|
||||
export default useEnableBackend;
|
||||
@@ -0,0 +1,204 @@
|
||||
export default {
|
||||
items: [
|
||||
{
|
||||
backend_name: 'vLLM',
|
||||
is_built_in: true,
|
||||
backend_source: 'built-in',
|
||||
default_version: '0.13.0',
|
||||
default_backend_param: [],
|
||||
versions: [
|
||||
{
|
||||
version: '0.13.0',
|
||||
is_deprecated: false
|
||||
},
|
||||
{
|
||||
version: '0.12.0',
|
||||
is_deprecated: false
|
||||
},
|
||||
{
|
||||
version: '0.11.2',
|
||||
is_deprecated: false
|
||||
},
|
||||
{
|
||||
version: '0.11.0',
|
||||
is_deprecated: true
|
||||
},
|
||||
{
|
||||
version: '0.10.2',
|
||||
is_deprecated: false
|
||||
},
|
||||
{
|
||||
version: '0.10.1.1',
|
||||
is_deprecated: true
|
||||
},
|
||||
{
|
||||
version: '0.10.0',
|
||||
is_deprecated: true
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
backend_name: 'SGLang',
|
||||
backend_source: 'built-in',
|
||||
is_built_in: true,
|
||||
default_version: '0.5.7',
|
||||
default_backend_param: [],
|
||||
versions: [
|
||||
{
|
||||
version: '0.5.7',
|
||||
is_deprecated: false
|
||||
},
|
||||
{
|
||||
version: '0.5.6.post2',
|
||||
is_deprecated: false
|
||||
},
|
||||
{
|
||||
version: '0.5.5.post3',
|
||||
is_deprecated: false
|
||||
},
|
||||
{
|
||||
version: '0.5.5',
|
||||
is_deprecated: true
|
||||
},
|
||||
{
|
||||
version: '0.5.4.post3',
|
||||
is_deprecated: false
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
backend_name: 'MindIE',
|
||||
backend_source: 'built-in',
|
||||
is_built_in: true,
|
||||
default_version: null,
|
||||
default_backend_param: [],
|
||||
versions: []
|
||||
},
|
||||
{
|
||||
backend_name: 'VoxBox',
|
||||
backend_source: 'built-in',
|
||||
is_built_in: true,
|
||||
default_version: '0.0.21',
|
||||
default_backend_param: [],
|
||||
versions: [
|
||||
{
|
||||
version: '0.0.21',
|
||||
is_deprecated: false
|
||||
},
|
||||
{
|
||||
version: '0.0.20',
|
||||
is_deprecated: true
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
backend_name: 'kokoro',
|
||||
backend_source: 'community',
|
||||
is_built_in: false,
|
||||
default_version: '',
|
||||
default_backend_param: [],
|
||||
versions: [
|
||||
{
|
||||
version: 'latest',
|
||||
is_deprecated: false
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
backend_name: 'llama.cpp',
|
||||
backend_source: 'community',
|
||||
is_built_in: false,
|
||||
default_version: 'cpu',
|
||||
default_backend_param: [],
|
||||
versions: [
|
||||
{
|
||||
version: 'cuda',
|
||||
is_deprecated: false
|
||||
},
|
||||
{
|
||||
version: 'cpu',
|
||||
is_deprecated: false
|
||||
},
|
||||
{
|
||||
version: 'vulkan',
|
||||
is_deprecated: false
|
||||
},
|
||||
{
|
||||
version: 'musa',
|
||||
is_deprecated: false
|
||||
},
|
||||
{
|
||||
version: 'rocm',
|
||||
is_deprecated: false
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
backend_name: 'MinerU',
|
||||
backend_source: 'community',
|
||||
is_built_in: false,
|
||||
default_version: 'v2.7.0',
|
||||
default_backend_param: [],
|
||||
versions: [
|
||||
{
|
||||
version: 'v2.7.0',
|
||||
is_deprecated: false
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
backend_name: 'paddlex-genai',
|
||||
backend_source: 'community',
|
||||
is_built_in: false,
|
||||
default_version: 'latest',
|
||||
default_backend_param: [],
|
||||
versions: [
|
||||
{
|
||||
version: 'latest',
|
||||
is_deprecated: false
|
||||
},
|
||||
{
|
||||
version: 'latest-dcu',
|
||||
is_deprecated: false
|
||||
},
|
||||
{
|
||||
version: 'latest-metax-gpu',
|
||||
is_deprecated: false
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
backend_name: 'text-embeddings-inference',
|
||||
is_built_in: false,
|
||||
backend_source: 'community',
|
||||
default_version: 'cpu-1.8',
|
||||
default_backend_param: [],
|
||||
versions: [
|
||||
{
|
||||
version: 'cpu-1.8',
|
||||
is_deprecated: false
|
||||
},
|
||||
{
|
||||
version: 'cuda-sm89-1.8',
|
||||
is_deprecated: false
|
||||
},
|
||||
{
|
||||
version: 'cuda-sm86-1.8',
|
||||
is_deprecated: false
|
||||
},
|
||||
{
|
||||
version: 'cuda-sm80-1.8',
|
||||
is_deprecated: false
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
backend_name: 'Custom',
|
||||
backend_source: 'custom',
|
||||
is_built_in: false,
|
||||
default_version: null,
|
||||
default_backend_param: null,
|
||||
versions: []
|
||||
}
|
||||
]
|
||||
};
|
||||
@@ -303,6 +303,23 @@ export interface BackendGroupOption {
|
||||
versions: { label: string; value: string; title?: string }[];
|
||||
}
|
||||
|
||||
export interface BackendGroupItem {
|
||||
value: string;
|
||||
label: string;
|
||||
title?: string;
|
||||
default_backend_param: string[];
|
||||
default_version: string;
|
||||
isBuiltIn: boolean;
|
||||
backend_source: string;
|
||||
enabled: boolean;
|
||||
versions: {
|
||||
label: string;
|
||||
value: string;
|
||||
title?: string;
|
||||
is_deprecated: boolean;
|
||||
}[];
|
||||
}
|
||||
|
||||
export interface BackendOption {
|
||||
value: string;
|
||||
label: string;
|
||||
@@ -310,6 +327,8 @@ export interface BackendOption {
|
||||
default_backend_param: string[];
|
||||
default_version: string;
|
||||
isBuiltIn: boolean;
|
||||
backend_source: string;
|
||||
enabled: boolean;
|
||||
versions: {
|
||||
label: string;
|
||||
value: string;
|
||||
@@ -329,6 +348,8 @@ export interface BackendItem {
|
||||
default_version: string;
|
||||
default_backend_param: string[];
|
||||
is_built_in: boolean;
|
||||
backend_source: string;
|
||||
enabled: boolean;
|
||||
versions: {
|
||||
version: string;
|
||||
is_deprecated: boolean;
|
||||
|
||||
@@ -1,14 +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 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 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';
|
||||
|
||||
const CaretDownWrapper = styled.span`
|
||||
display: flex;
|
||||
@@ -30,6 +32,8 @@ const BackendFields: React.FC = () => {
|
||||
const { onValuesChange, backendOptions, onBackendChange } = useFormContext();
|
||||
const backend = Form.useWatch('backend', form);
|
||||
const [showDeprecated, setShowDeprecated] = React.useState<boolean>(false);
|
||||
const [selectedBackend, setSelectedBackend] =
|
||||
React.useState<BackendOption | null>(null);
|
||||
|
||||
const handleBackendVersionOnChange = (value: any) => {
|
||||
onValuesChange?.({}, form.getFieldsValue());
|
||||
@@ -74,13 +78,10 @@ const BackendFields: React.FC = () => {
|
||||
};
|
||||
}
|
||||
|
||||
// find the backend item from backendOptions
|
||||
const backendItem = backendOptions.find((item) => item.value === backend);
|
||||
|
||||
const versions = backendItem?.versions || [];
|
||||
const versions = selectedBackend?.versions || [];
|
||||
|
||||
// if it's a custom backend,
|
||||
if (backendItem && !backendItem.isBuiltIn) {
|
||||
if (selectedBackend && !selectedBackend.isBuiltIn) {
|
||||
return {
|
||||
builtIn: [],
|
||||
custom: versions.filter((item) => !item.is_deprecated),
|
||||
@@ -108,7 +109,7 @@ const BackendFields: React.FC = () => {
|
||||
custom: customVersions,
|
||||
deprecated: deprecatedVersions
|
||||
};
|
||||
}, [backend, backendOptions, intl]);
|
||||
}, [backend, selectedBackend, intl]);
|
||||
|
||||
const optionRender = (option: any) => {
|
||||
return option.data.title;
|
||||
@@ -138,6 +139,13 @@ 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]);
|
||||
};
|
||||
|
||||
const renderDeprecatedVersionOptions = (values: any[]) => {
|
||||
if (!values || values.length === 0) {
|
||||
return null;
|
||||
@@ -167,10 +175,30 @@ const BackendFields: React.FC = () => {
|
||||
);
|
||||
};
|
||||
|
||||
const BackendNode = (props: any) => {
|
||||
const { data: backend } = props;
|
||||
return backend.isLeaf ? (
|
||||
<span className="flex-center">
|
||||
{backend.label}
|
||||
{backend.backend_source === BackendSourceValueMap.COMMUNITY &&
|
||||
!backend.enabled && (
|
||||
<span className="text-tertiary m-l-4">
|
||||
[{intl.formatMessage({ id: 'common.status.disabled' })}]
|
||||
</span>
|
||||
)}
|
||||
</span>
|
||||
) : (
|
||||
<span>{intl.formatMessage({ id: backend.title })}</span>
|
||||
);
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<Form.Item name="backend" hidden>
|
||||
<SealInput.Input></SealInput.Input>
|
||||
</Form.Item>
|
||||
<Form.Item
|
||||
name="backend"
|
||||
name="backend_selection"
|
||||
rules={[
|
||||
{
|
||||
required: true,
|
||||
@@ -178,7 +206,7 @@ const BackendFields: React.FC = () => {
|
||||
}
|
||||
]}
|
||||
>
|
||||
<SealSelect
|
||||
{/* <SealSelect
|
||||
required
|
||||
onChange={onBackendChange}
|
||||
label={intl.formatMessage({ id: 'models.form.backend' })}
|
||||
@@ -186,7 +214,25 @@ const BackendFields: React.FC = () => {
|
||||
options={backendGroupedOptions}
|
||||
optionRender={optionRender}
|
||||
labelRender={labelRender}
|
||||
></SealSelect>
|
||||
></SealSelect> */}
|
||||
<SealCascader
|
||||
required
|
||||
showSearch
|
||||
changeOnSelect={false}
|
||||
expandTrigger="hover"
|
||||
multiple={false}
|
||||
classNames={{
|
||||
popup: {
|
||||
root: 'cascader-popup-wrapper gpu-selector'
|
||||
}
|
||||
}}
|
||||
maxTagCount={1}
|
||||
label={intl.formatMessage({ id: 'models.form.backend' })}
|
||||
options={backendOptions}
|
||||
getPopupContainer={(triggerNode) => triggerNode.parentNode}
|
||||
optionNode={BackendNode}
|
||||
onChange={handleOnBackendChange}
|
||||
></SealCascader>
|
||||
</Form.Item>
|
||||
{backendOptionsMap.custom !== backend && (
|
||||
<Form.Item name="backend_version">
|
||||
|
||||
@@ -1,10 +1,46 @@
|
||||
import { backendOptionsAtom } from '@/atoms/models';
|
||||
import {
|
||||
BackendSourceLabelMap,
|
||||
BackendSourceValueMap
|
||||
} from '@/pages/backends/config';
|
||||
import { useIntl } from '@umijs/max';
|
||||
import { useAtom } from 'jotai';
|
||||
import _ from 'lodash';
|
||||
import { queryBackendList } from '../apis';
|
||||
import { backendOptionsMap } from '../config/backend-parameters';
|
||||
import { BackendOption } from '../config/types';
|
||||
|
||||
interface BackendGroup {
|
||||
label: string;
|
||||
value: string;
|
||||
title?: string;
|
||||
children: BackendOption[];
|
||||
}
|
||||
|
||||
const groupByBackendSource = (list: BackendOption[]): BackendGroup[] => {
|
||||
const map = list.reduce<Record<string, BackendOption[]>>((acc, item) => {
|
||||
const key = item.backend_source;
|
||||
|
||||
if (!acc[key]) {
|
||||
acc[key] = [];
|
||||
}
|
||||
|
||||
acc[key].push(item);
|
||||
return acc;
|
||||
}, {});
|
||||
|
||||
return Object.entries(map).map(([backend_source, backends]) => ({
|
||||
label: backend_source,
|
||||
value: backend_source,
|
||||
title:
|
||||
backend_source === BackendSourceValueMap.CUSTOM
|
||||
? BackendSourceLabelMap[BackendSourceValueMap.USER_DEFINED]
|
||||
: BackendSourceLabelMap[backend_source],
|
||||
isLeaf: false,
|
||||
children: backends
|
||||
}));
|
||||
};
|
||||
|
||||
export default function useQueryBackends() {
|
||||
const [backendOptions, setBackendOptions] = useAtom(backendOptionsAtom);
|
||||
const intl = useIntl();
|
||||
@@ -14,6 +50,13 @@ export default function useQueryBackends() {
|
||||
const res = await queryBackendList(params);
|
||||
const list: BackendOption[] = res?.items?.map((item) => {
|
||||
return {
|
||||
..._.pick(item, [
|
||||
'enabled',
|
||||
'default_version',
|
||||
'backend_source',
|
||||
'is_built_in',
|
||||
'default_backend_param'
|
||||
]),
|
||||
value: item.backend_name,
|
||||
label:
|
||||
item.backend_name === backendOptionsMap.custom
|
||||
@@ -23,9 +66,8 @@ export default function useQueryBackends() {
|
||||
item.backend_name === backendOptionsMap.custom
|
||||
? intl.formatMessage({ id: 'backend.custom' })
|
||||
: item.backend_name.replace(/-custom$/, ''),
|
||||
default_backend_param: item.default_backend_param || [],
|
||||
default_version: item.default_version,
|
||||
isBuiltIn: item.is_built_in,
|
||||
isLeaf: true,
|
||||
versions: (item.versions || []).map((vItem, index) => ({
|
||||
label: vItem.version,
|
||||
value: vItem.version,
|
||||
@@ -35,10 +77,14 @@ export default function useQueryBackends() {
|
||||
};
|
||||
});
|
||||
|
||||
const groupList = groupByBackendSource(list);
|
||||
|
||||
console.log('Fetched backend options:', list, groupList);
|
||||
|
||||
if (res?.items) {
|
||||
setBackendOptions(list);
|
||||
setBackendOptions(groupList);
|
||||
}
|
||||
return list || [];
|
||||
return groupList || [];
|
||||
} catch (error) {
|
||||
// ignore
|
||||
setBackendOptions([]);
|
||||
|
||||
@@ -2,7 +2,7 @@
|
||||
height: 150px;
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
padding: 16px 20px;
|
||||
padding: 16px;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
align-items: flex-start;
|
||||
|
||||
Reference in New Issue
Block a user