chore: backend api

src/atoms/models.ts

@@ -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>>({});

src/components/icon-font/index.tsx

@@ -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;

src/components/templates/card.tsx

@@ -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);

src/locales/en-US/backends.ts

@@ -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',

src/locales/en-US/common.ts

@@ -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'
 };

src/locales/ja-JP/backends.ts

@@ -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',

src/locales/ja-JP/common.ts

@@ -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 ==========

src/locales/ru-RU/backends.ts

@@ -10,6 +10,7 @@ export default {
   'backend.framework': 'Фреймворк',
   'backend.builtin': 'Встроенный',
   'backend.custom': 'Пользовательский',
+  'backend.community': 'Сообщество',
   'backend.isDefault': 'По умолчанию',
   'backend.availableFrameworks': 'Поддерживаемые фреймворки',
   'backend.addVersion': 'Добавить версию',

src/locales/ru-RU/common.ts

@@ -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 ==========

src/locales/zh-CN/backends.ts

@@ -10,6 +10,7 @@ export default {
   'backend.framework': '框架',
   'backend.builtin': '内置',
   'backend.custom': '自定义',
+  'backend.community': '社区',
   'backend.isDefault': '默认',
   'backend.availableFrameworks': '支持框架',
   'backend.addVersion': '添加版本',

src/locales/zh-CN/common.ts

@@ -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': '未启用'
 };

src/pages/backends/components/backend-card.tsx

@@ -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;
+  margin-bottom: 8px;
-  gap: 16px;
+  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) => {
-      return backendActions.filter((item) => item.key !== 'delete');
+      if (item.show) {
-    }
+        return item.show(data);
-    return backendActions.filter((item) => item.key !== 'view_versions');
+      }
+      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>

src/pages/backends/config/index.ts

@@ -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
   }
 ];
 

src/pages/backends/config/types.ts

@@ -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[]>;
 }

src/pages/backends/index.tsx

@@ -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'
+        }
+      });
     }
   };
 

src/pages/backends/services/use-enable-backend.ts

@@ -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;

src/pages/llmodels/config/test-data.ts

@@ -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: []
+    }
+  ]
+};

src/pages/llmodels/config/types.ts

@@ -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;

src/pages/llmodels/forms/backend.tsx

@@ -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 versions = selectedBackend?.versions || [];
-    const backendItem = backendOptions.find((item) => item.value === backend);
-
-    const versions = backendItem?.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">

src/pages/llmodels/hooks/use-query-backends.ts

@@ -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([]);

src/pages/llmodels/style/catalog-item.less

@@ -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;