chore: pluggable locale config

config/routes.ts

@@ -115,7 +115,7 @@ export default [
         defaultIcon: 'icon-backend',
         access: 'canSeeAdmin',
         subMenu: ['/models/backends/create'],
-        component: './backends/list'
+        component: './backends/index'
       }
     ]
   },

src/components/collapse-container/index.tsx

@@ -79,6 +79,11 @@ export interface CollapsibleContainerProps {
   variant?: 'outlined' | 'borderless' | undefined;
   className?: string;
   children?: React.ReactNode;
+  styles?: {
+    body?: React.CSSProperties;
+    header?: React.CSSProperties;
+    content?: React.CSSProperties;
+  };
 }
 
 export default function CollapsibleContainer({
@@ -94,6 +99,7 @@ export default function CollapsibleContainer({
   variant = 'borderless',
   className = '',
   collapsible,
+  styles: cardStyles,
   children
 }: CollapsibleContainerProps) {
   const { styles } = useStyles();
@@ -169,7 +175,11 @@ export default function CollapsibleContainer({
       variant={variant}
       styles={{
         body: {
-          padding: 0
+          padding: 0,
+          ...cardStyles?.body
+        },
+        header: {
+          ...cardStyles?.header
         }
       }}
       title={renderTitle()}
@@ -181,7 +191,7 @@ export default function CollapsibleContainer({
           overflow: 'hidden'
         }}
       >
-        <div style={{ paddingTop: 8 }}>{children}</div>
+        <div style={{ paddingTop: 8, ...cardStyles?.content }}>{children}</div>
       </div>
     </CardStyled>
   );

src/locales/en-US/backends.ts

@@ -1,3 +1,26 @@
 export default {
-  'backends.title': 'Inference Backends'
+  'backends.title': 'Inference Backends',
+  'backend.button.add': 'Add Backend',
+  'backend.button.edit': 'Edit Backend',
+  'backend.versions': 'Version List',
+  'backend.defaultVersion': 'Default Version',
+  'backend.version': 'Version',
+  'backend.imageName': 'Image Name',
+  'backend.runCommand': 'Execution Command',
+  'backend.framework': 'Framework',
+  'backend.builtin': 'Built-in',
+  'backend.custom': 'Custom',
+  'backend.isDefault': 'Default',
+  'backend.availableFrameworks': 'Available Frameworks',
+  'backend.addVersion': 'Add Version',
+  'backend.filter.framework': 'Filter by Framework',
+  'backend.export.yaml': 'Export YAML',
+  'backend.mode.form': 'Form Mode',
+  'backend.mode.yaml': 'YAML Mode',
+  'backend.form.healthCheckPath': 'Health Check Path',
+  'backend.form.defaultExecuteCommand': 'Default Execution Command',
+  'backend.form.defaultBackendParameters': 'Default Backend Parameters',
+  'backend.form.versionConfig': 'Versions Config',
+  'backend.form.addParameter': 'Add Parameter',
+  'backend.form.noVersion': 'No versions added'
 };

src/locales/ja-JP/backends.ts

@@ -1,3 +1,26 @@
 export default {
-  'backends.title': 'Inference Backends'
+  'backends.title': 'Inference Backends',
+  'backend.button.add': 'Add Backend',
+  'backend.button.edit': 'Edit Backend',
+  'backend.versions': 'Version List',
+  'backend.defaultVersion': 'Default Version',
+  'backend.version': 'Version',
+  'backend.imageName': 'Image Name',
+  'backend.runCommand': 'Execution Command',
+  'backend.framework': 'Framework',
+  'backend.builtin': 'Built-in',
+  'backend.custom': 'Custom',
+  'backend.isDefault': 'Default',
+  'backend.availableFrameworks': 'Available Frameworks',
+  'backend.addVersion': 'Add Version',
+  'backend.filter.framework': 'Filter by Framework',
+  'backend.export.yaml': 'Export YAML',
+  'backend.mode.form': 'Form Mode',
+  'backend.mode.yaml': 'YAML Mode',
+  'backend.form.healthCheckPath': 'Health Check Path',
+  'backend.form.defaultExecuteCommand': 'Default Execution Command',
+  'backend.form.defaultBackendParameters': 'Default Backend Parameters',
+  'backend.form.versionConfig': 'Versions Config',
+  'backend.form.addParameter': 'Add Parameter',
+  'backend.form.noVersion': 'No versions added'
 };

src/locales/ru-RU/backends.ts

@@ -1,3 +1,26 @@
 export default {
-  'backends.title': 'Inference Backends'
+  'backends.title': 'Inference Backends',
+  'backend.button.add': 'Add Backend',
+  'backend.button.edit': 'Edit Backend',
+  'backend.versions': 'Version List',
+  'backend.defaultVersion': 'Default Version',
+  'backend.version': 'Version',
+  'backend.imageName': 'Image Name',
+  'backend.runCommand': 'Execution Command',
+  'backend.framework': 'Framework',
+  'backend.builtin': 'Built-in',
+  'backend.custom': 'Custom',
+  'backend.isDefault': 'Default',
+  'backend.availableFrameworks': 'Available Frameworks',
+  'backend.addVersion': 'Add Version',
+  'backend.filter.framework': 'Filter by Framework',
+  'backend.export.yaml': 'Export YAML',
+  'backend.mode.form': 'Form Mode',
+  'backend.mode.yaml': 'YAML Mode',
+  'backend.form.healthCheckPath': 'Health Check Path',
+  'backend.form.defaultExecuteCommand': 'Default Execution Command',
+  'backend.form.defaultBackendParameters': 'Default Backend Parameters',
+  'backend.form.versionConfig': 'Versions Config',
+  'backend.form.addParameter': 'Add Parameter',
+  'backend.form.noVersion': 'No versions added'
 };

src/locales/zh-CN/backends.ts

@@ -1,3 +1,26 @@
 export default {
-  'backends.title': '推理后端'
+  'backends.title': '推理后端',
+  'backend.button.add': '添加后端',
+  'backend.button.edit': '编辑后端',
+  'backend.versions': '版本列表',
+  'backend.defaultVersion': '默认版本',
+  'backend.version': '版本',
+  'backend.imageName': '镜像名称',
+  'backend.runCommand': '执行命令',
+  'backend.framework': '框架',
+  'backend.builtin': '内置',
+  'backend.custom': '自定义',
+  'backend.isDefault': '默认',
+  'backend.availableFrameworks': '可用框架',
+  'backend.addVersion': '添加版本',
+  'backend.filter.framework': '按框架过滤',
+  'backend.export.yaml': '导出 YAML',
+  'backend.mode.form': '表单模式',
+  'backend.mode.yaml': 'YAML 模式',
+  'backend.form.healthCheckPath': '健康检查路径',
+  'backend.form.defaultExecuteCommand': '默认执行命令',
+  'backend.form.defaultBackendParameters': '默认后端参数',
+  'backend.form.versionConfig': '版本配置',
+  'backend.form.addParameter': '添加参数',
+  'backend.form.noVersion': '尚未添加版本'
 };

src/pages/backends/components/add-modal.tsx

@@ -67,7 +67,6 @@ const AddModal: React.FC<AddModalProps> = (props) => {
   };
 
   const onFinish = (values: FormData) => {
-    console.log('Form values:', values);
     const versionConfigs = values.version_configs?.reduce(
       (acc: Record<string, any>, curr) => {
         if (curr.version_no) {
@@ -176,12 +175,12 @@ const AddModal: React.FC<AddModalProps> = (props) => {
           onChange={(value) => setActiveKey(value as string)}
           options={[
             {
-              label: 'Form',
+              label: intl.formatMessage({ id: 'backend.mode.form' }),
               value: 'form',
               icon: <IconFont type="icon-edit-content" />
             },
             {
-              label: 'YAML',
+              label: intl.formatMessage({ id: 'backend.mode.yaml' }),
               value: 'yaml',
               icon: <IconFont type="icon-code_block" />
             }
@@ -207,7 +206,7 @@ const AddModal: React.FC<AddModalProps> = (props) => {
           items={[
             {
               key: 'form',
-              label: 'Form',
+              label: intl.formatMessage({ id: 'backend.mode.form' }),
               children: (
                 <BackendForm
                   onFinish={onFinish}
@@ -219,7 +218,7 @@ const AddModal: React.FC<AddModalProps> = (props) => {
             },
             {
               key: 'yaml',
-              label: 'YAML',
+              label: intl.formatMessage({ id: 'backend.mode.yaml' }),
               children: (
                 <ImportYAML
                   actionStatus={{

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

@@ -3,7 +3,7 @@ import DropDownActions from '@/components/drop-down-actions';
 import IconFont from '@/components/icon-font';
 import ThemeTag from '@/components/tags-wrapper/theme-tag';
 import Card from '@/components/templates/card';
-import { DockerOutlined, InfoCircleOutlined } from '@ant-design/icons';
+import { useIntl } from '@umijs/max';
 import { Button, Tag } from 'antd';
 import _ from 'lodash';
 import { useMemo } from 'react';
@@ -87,6 +87,22 @@ const Content = styled.div`
   }
 `;
 
+const InfoItem = styled.div`
+  display: grid;
+  grid-template-columns: max-content 1fr;
+  align-items: center;
+  gap: 8px;
+  color: var(--ant-color-text-tertiary);
+  .icon {
+    color: var(--ant-color-text-tertiary);
+  }
+  .label {
+    display: flex;
+    align-items: center;
+    gap: 4px;
+  }
+`;
+
 const BackendBox = styled.div`
   display: flex;
   align-items: center;
@@ -100,12 +116,14 @@ interface BackendCardProps {
 }
 
 const BackendCard: React.FC<BackendCardProps> = ({ data, onSelect }) => {
+  const intl = useIntl();
+
   const handleOnSelect = (item: any) => {
     onSelect?.({ action: item.key, data: data });
   };
 
   const handleClick = () => {
-    onSelect?.({ action: 'edit', data: data });
+    onSelect?.({ action: 'view_versions', data: data });
   };
 
   const renderIcon = () => {
@@ -133,28 +151,30 @@ const BackendCard: React.FC<BackendCardProps> = ({ data, onSelect }) => {
     e.stopPropagation();
   };
 
-  const renderDrivers = () => {
-    if (data.is_build_in) {
-      const backendList = _.get(
-        data,
-        [
-          'build_in_version_configs',
-          data.default_version,
-          'build_in_frameworks'
-        ],
-        []
-      );
+  const renderFrameworks = () => {
+    const frameworks = _.keys(data.framework_index_map || {});
 
-      return (
-        <>
-          <span className="label">
-            <IconFont className="icon" type="icon-gpu1" />
-            <span>Supported Frameworks: </span>
+    return (
+      <InfoItem>
+        <span className="label">
+          <IconFont className="icon" type="icon-gpu1" />
+          <span>
+            {intl.formatMessage({ id: 'backend.availableFrameworks' })}:{' '}
           </span>
-          <AutoTooltip ghost maxWidth={'100%'}>
-            <BackendBox>
-              {_.take(backendList, 3).map((item: string) => {
-                return (
+        </span>
+
+        <BackendBox>
+          {_.take(frameworks, 3).map((item: string) => {
+            return (
+              <div key={item}>
+                <AutoTooltip
+                  ghost
+                  minWidth={20}
+                  showTitle
+                  title={
+                    _.join(data.framework_index_map?.[item], ', ') || false
+                  }
+                >
                   <ThemeTag
                     key={item}
                     style={{ marginRight: 0 }}
@@ -162,29 +182,12 @@ const BackendCard: React.FC<BackendCardProps> = ({ data, onSelect }) => {
                   >
                     {item}
                   </ThemeTag>
-                );
-              })}
-            </BackendBox>
-          </AutoTooltip>
-        </>
-      );
-    }
-    return (
-      <>
-        <span className="label">
-          <DockerOutlined className="icon" />
-          <span>Default Image: </span>
-        </span>
-        <span className="text">
-          <AutoTooltip ghost maxWidth={'100%'}>
-            {_.get(data, [
-              'version_configs',
-              data.default_version,
-              'image_name'
-            ])}
-          </AutoTooltip>
-        </span>
-      </>
+                </AutoTooltip>
+              </div>
+            );
+          })}
+        </BackendBox>
+      </InfoItem>
     );
   };
 
@@ -194,7 +197,7 @@ const BackendCard: React.FC<BackendCardProps> = ({ data, onSelect }) => {
       clickable={true}
       hoverable={true}
       disabled={false}
-      height={160}
+      height={140}
       ghost
       header={
         <Header>
@@ -226,18 +229,11 @@ const BackendCard: React.FC<BackendCardProps> = ({ data, onSelect }) => {
               bordered={false}
               style={{ borderRadius: 'var(--ant-border-radius)' }}
             >
-              Built-in
+              {intl.formatMessage({ id: 'backend.builtin' })}
             </Tag>
           )}
         </CardName>
-        <div className="info">
-          <span className="label">
-            <InfoCircleOutlined className="icon" />
-            <span>Default Version: </span>
-          </span>
-          <span className="text">{data.default_version}</span>
-          {renderDrivers()}
-        </div>
+        {renderFrameworks()}
       </Content>
     </Card>
   );

src/pages/backends/components/version-info-modal.tsx

@@ -0,0 +1,89 @@
+import ScrollerModal from '@/components/scroller-modal';
+import { useIntl } from '@umijs/max';
+import { useEffect, useState } from 'react';
+import { VersionListItem } from '../config/types';
+import VersionInfo from '../forms/version-info';
+
+interface VersionInfoModalProps {
+  open?: boolean;
+  currentData?: any;
+  onClose?: () => void;
+}
+
+const VersionInfoModal: React.FC<VersionInfoModalProps> = ({
+  open,
+  currentData,
+  onClose
+}) => {
+  const intl = useIntl();
+  const [versionConfigs, setVersionConfigs] = useState<VersionListItem[]>([]);
+
+  useEffect(() => {
+    if (open && currentData) {
+      // add is_built_in field to build_in_version_configs
+      const builtInVersions = currentData.build_in_version_configs || {};
+
+      for (const key in builtInVersions) {
+        if (builtInVersions?.hasOwnProperty(key)) {
+          builtInVersions[key].is_built_in = true;
+        }
+      }
+
+      const versions = {
+        ...builtInVersions,
+        ...currentData.version_configs
+      };
+
+      const versionList: VersionListItem[] = Object.entries(versions).map(
+        ([key, value]: [string, any]) => ({
+          version_no: key,
+          image_name: value.image_name,
+          run_command: value.run_command,
+          is_default: key === currentData.default_version,
+          availableFrameworks: [
+            ...(value.build_in_frameworks || []),
+            ...(value.custom_framework ? [value.custom_framework] : [])
+          ],
+          is_built_in: value.is_built_in || false
+        })
+      );
+
+      setVersionConfigs(versionList);
+    }
+  }, [open, currentData]);
+
+  return (
+    <ScrollerModal
+      open={open}
+      title={intl.formatMessage({ id: 'backend.versions' })}
+      width={600}
+      centered
+      destroyOnHidden
+      closable={true}
+      maskClosable={false}
+      onOk={onClose}
+      onCancel={onClose}
+      styles={{
+        content: {
+          padding: '0 0 16px 0'
+        },
+        header: {
+          padding: 'var(--ant-modal-content-padding)',
+          paddingBottom: '0'
+        },
+        body: {
+          padding: '16px 24px 32px'
+        },
+        footer: {
+          padding: '16px 24px',
+          margin: '0'
+        }
+      }}
+      footer={null}
+    >
+      <VersionInfo versionConfigs={versionConfigs} />
+    </ScrollerModal>
+  );
+};
+
+export default VersionInfoModal;

src/pages/backends/components/view-builtin-versions-modal.tsx

@@ -1,76 +0,0 @@
-import ScrollerModal from '@/components/scroller-modal';
-import { Form } from 'antd';
-import { useEffect } from 'react';
-import BuiltinVersions from '../forms/built-in-versions';
-
-interface ViewBuiltinVersionsModalProps {
-  open?: boolean;
-  currentData?: any;
-  onClose?: () => void;
-}
-
-const ViewBuiltinVersionsModal: React.FC<ViewBuiltinVersionsModalProps> = ({
-  open,
-  currentData,
-  onClose
-}) => {
-  const [form] = Form.useForm();
-
-  useEffect(() => {
-    if (open && currentData) {
-      const builtInVersions = Object.keys(
-        currentData.build_in_version_configs || {}
-      ).map((key) => ({
-        version_no: key,
-        image_name: currentData.build_in_version_configs[key].image_name,
-        run_command: currentData.build_in_version_configs[key].run_command,
-        is_default: key === currentData.default_version,
-        build_in_frameworks:
-          currentData.build_in_version_configs[key].build_in_frameworks || [],
-        is_built_in: true
-      }));
-      form.setFieldsValue({
-        build_in_version_configs: builtInVersions
-      });
-    }
-  }, [open, currentData, form]);
-
-  return (
-    <ScrollerModal
-      open={open}
-      style={{
-        top: '20%'
-      }}
-      title="View Built-in Versions"
-      width={550}
-      destroyOnHidden
-      closable={true}
-      maskClosable={false}
-      onOk={onClose}
-      onCancel={onClose}
-      styles={{
-        content: {
-          padding: '0 0 16px 0'
-        },
-        header: {
-          padding: 'var(--ant-modal-content-padding)',
-          paddingBottom: '0'
-        },
-        body: {
-          padding: '16px 24px 32px'
-        },
-        footer: {
-          padding: '16px 24px',
-          margin: '0'
-        }
-      }}
-      footer={null}
-    >
-      <Form form={form}>
-        <BuiltinVersions />
-      </Form>
-    </ScrollerModal>
-  );
-};
-
-export default ViewBuiltinVersionsModal;

src/pages/backends/components/yaml-editor.tsx

@@ -74,29 +74,6 @@ const ViewerEditor: React.FC<ViewerProps> = forwardRef((props, ref) => {
     editorRef.current = editor;
     monacoRef.current = monaco;
     const uri = monaco.Uri.parse(path);
-
-    // monaco.editor.onDidChangeMarkers((uris: string[]) => {
-    //   if (!uris.some((u) => u.toString() === uri.toString())) return;
-
-    //   const model = monaco.editor.getModel(uri);
-    //   if (!model) return;
-    //   console.log('Markers changed:', uris);
-    //   const markers = monaco.editor.getModelMarkers({ resource: uri });
-    //   const adjusted = markers.map((m: any) => {
-    //     if (m._adjusted) return m;
-    //     return {
-    //       ...m,
-    //       _adjusted: true,
-    //       severity: monaco.MarkerSeverity.ErrorText
-    //     };
-    //   });
-
-    //   monaco.editor.setModelMarkers(
-    //     monaco.editor.getModel(uri),
-    //     'yaml',
-    //     adjusted
-    //   );
-    // });
   };
 
   const formatCode = () => {

src/pages/backends/config/index.ts

@@ -18,8 +18,8 @@ const SEAL_SCHEMA = jsYaml.DEFAULT_SCHEMA.extend([SealYamlType]);
 
 export const builtInBackends = {
   SGLang: 'SGLang',
-  vLLM: 'vllm',
-  MindIE: 'mindie',
+  vLLM: 'vLLM',
+  MindIE: 'MindIE',
   VoxBox: 'voxbox'
 };
 
@@ -32,25 +32,25 @@ export const builtInBackendLogos: Record<string, string> = {
 
 export const backendActions = [
   {
-    label: 'Edit',
+    label: 'common.button.edit',
     value: 'edit',
     key: 'edit',
-    icon: icons.EditOutlined,
-    locale: false
+    locale: true,
+    icon: icons.EditOutlined
   },
   {
-    label: 'Export YAML',
+    label: 'backend.export.yaml',
     value: 'yaml',
     key: 'export',
-    icon: icons.Yaml,
-    locale: false
+    locale: true,
+    icon: icons.Yaml
   },
   {
-    label: 'Delete',
+    label: 'common.button.delete',
     value: 'delete',
     key: 'delete',
     icon: icons.DeleteOutlined,
-    locale: false,
+    locale: true,
     danger: true
   }
 ];
@@ -136,6 +136,10 @@ export const frameworks = [
   {
     label: 'CoreX',
     value: 'corex'
+  },
+  {
+    label: 'CPU',
+    value: 'cpu'
   }
 ];
 

src/pages/backends/config/types.ts

@@ -3,11 +3,15 @@ export interface VersionConfigs {
   run_command: string;
   is_default: boolean;
   build_in_frameworks?: string[];
-  custom_framework: string;
+  custom_framework?: string;
   version_no?: string;
   is_built_in?: boolean;
 }
 
+export interface VersionListItem extends VersionConfigs {
+  availableFrameworks: string[];
+}
+
 export interface FormData {
   backend_name: string;
   description?: string;
@@ -26,4 +30,5 @@ export interface ListItem extends FormData {
   created_at?: string;
   updated_at?: string;
   build_in_version_configs?: Record<string, VersionConfigs>;
+  framework_index_map?: Record<string, string[]>;
 }

src/pages/backends/forms/basic.tsx

@@ -38,11 +38,18 @@ const BasicForm: React.FC<AddModalProps> = ({ action }) => {
         name="health_check_path"
         rules={[{ required: false }]}
       >
-        <SealInput.Input trim label={'Health Check Path'}></SealInput.Input>
+        <SealInput.Input
+          trim
+          label={intl.formatMessage({ id: 'backend.form.healthCheckPath' })}
+        ></SealInput.Input>
       </Form.Item>
 
       <Form.Item name="default_run_command">
-        <SealInput.TextArea label="Default Execution Command"></SealInput.TextArea>
+        <SealInput.TextArea
+          label={intl.formatMessage({
+            id: 'backend.form.defaultExecuteCommand'
+          })}
+        ></SealInput.TextArea>
       </Form.Item>
 
       <Form.Item<FormData>
@@ -54,8 +61,10 @@ const BasicForm: React.FC<AddModalProps> = ({ action }) => {
           onChange={(data: string[]) => {
             form.setFieldValue('default_backend_param', data);
           }}
-          btnText={'Add Backend Parameter'}
-          label={'Default Backend Parameters'}
+          btnText={intl.formatMessage({ id: 'backend.form.addParameter' })}
+          label={intl.formatMessage({
+            id: 'backend.form.defaultBackendParameters'
+          })}
         ></ListInput>
       </Form.Item>
 

src/pages/backends/forms/built-in-versions.tsx

@@ -1,119 +0,0 @@
-import ThemeTag from '@/components/tags-wrapper/theme-tag';
-import { Divider, Form } from 'antd';
-import styled from 'styled-components';
-import { getGpuColor } from '../config';
-
-const ItemWrapper = styled.div`
-  display: flex;
-  flex-direction: column;
-  align-items: flex-start;
-  gap: 8px;
-  width: 100%;
-  .title {
-    width: 100%;
-    justify-content: space-between;
-    display: flex;
-    align-items: center;
-    font-weight: 600;
-  }
-`;
-
-const RowWrapper = styled.div`
-  display: flex;
-  flex-direction: column;
-  align-items: flex-start;
-  gap: 4px;
-  .label {
-    color: var(--ant-color-text-tertiary);
-  }
-  .drivers {
-    display: flex;
-    flex-wrap: wrap;
-    gap: 8px;
-  }
-`;
-
-interface VersionItemProps {
-  data: {
-    build_in_frameworks: string[];
-    custom_framework: string;
-    version_no: string;
-    image_name: string;
-    run_command: string;
-    isBuiltin: boolean;
-    is_default: boolean;
-  };
-}
-
-export const VersionItem: React.FC<VersionItemProps> = ({ data }) => {
-  return (
-    <ItemWrapper>
-      <div className="title">
-        <span>{data.version_no}</span>
-        {data.is_default && (
-          <ThemeTag
-            color="geekblue"
-            className="font-400"
-            style={{ marginRight: 0 }}
-          >
-            Default
-          </ThemeTag>
-        )}
-      </div>
-      <RowWrapper>
-        <span className="text drivers">
-          {data.build_in_frameworks?.map((item) => {
-            return (
-              <ThemeTag
-                key={item}
-                style={{ marginRight: 0 }}
-                color={getGpuColor(item)}
-              >
-                {item}
-              </ThemeTag>
-            );
-          })}
-        </span>
-      </RowWrapper>
-    </ItemWrapper>
-  );
-};
-
-const BuiltInVersionsForm = () => {
-  const form = Form.useFormInstance();
-  const versionList = Form.useWatch('build_in_version_configs', form) || [];
-  return (
-    <Form.List name="build_in_version_configs">
-      {() => {
-        return (
-          <div
-            style={{
-              border: '1px solid var(--ant-color-border)',
-              borderRadius: 'var(--border-radius-base)',
-              padding: '14px'
-            }}
-          >
-            {versionList.map((version: any, index: number) => {
-              return (
-                <>
-                  <VersionItem key={index} data={version} />
-                  {index < versionList.length - 1 && (
-                    <Divider
-                      className="divider"
-                      style={{
-                        marginBlock: 16,
-                        borderTop: '1px  dashed var(--ant-color-border)'
-                      }}
-                    />
-                  )}
-                </>
-              );
-            })}
-          </div>
-        );
-      }}
-    </Form.List>
-  );
-};
-
-export default BuiltInVersionsForm;

src/pages/backends/forms/index.tsx

@@ -1,4 +1,5 @@
 import { PageActionType } from '@/config/types';
+import { useIntl } from '@umijs/max';
 import { Form } from 'antd';
 import _ from 'lodash';
 import React, { forwardRef, useEffect, useImperativeHandle } from 'react';
@@ -14,6 +15,7 @@ type AddModalProps = {
 };
 const BackendForm: React.FC<AddModalProps> = forwardRef(
   ({ action, currentData, onFinish }, ref) => {
+    const intl = useIntl();
     const [form] = Form.useForm();
     const [activeKey, setActiveKey] = React.useState<string[]>([]);
 
@@ -33,7 +35,6 @@ const BackendForm: React.FC<AddModalProps> = forwardRef(
 
     useEffect(() => {
       if (currentData) {
-        console.log('currentData:', currentData);
         form.setFieldsValue(currentData);
       }
     }, [currentData]);

src/pages/backends/forms/parameters.tsx

@@ -1,32 +0,0 @@
-import ListInput from '@/components/list-input';
-import { PageActionType } from '@/config/types';
-import { Form } from 'antd';
-import React from 'react';
-import { FormData } from '../config/types';
-
-type AddModalProps = {
-  action: PageActionType;
-};
-const ParametersForm: React.FC<AddModalProps> = ({ action }) => {
-  const form = Form.useFormInstance();
-
-  return (
-    <>
-      <Form.Item<FormData>
-        name="default_backend_param"
-        rules={[{ required: false }]}
-      >
-        <ListInput
-          dataList={form.getFieldValue('default_backend_param') || []}
-          onChange={(data: string[]) => {
-            form.setFieldValue('default_backend_param', data);
-          }}
-          btnText={'Add Backend Parameter'}
-          label={'Default Backend Parameters'}
-        ></ListInput>
-      </Form.Item>
-    </>
-  );
-};
-
-export default ParametersForm;

src/pages/backends/forms/version-info.tsx

@@ -0,0 +1,185 @@
+import AutoTooltip from '@/components/auto-tooltip';
+import BaseSelect from '@/components/seal-form/base/select';
+import ThemeTag from '@/components/tags-wrapper/theme-tag';
+import { useIntl } from '@umijs/max';
+import { Empty } from 'antd';
+import { useState } from 'react';
+import styled from 'styled-components';
+import { frameworks, getGpuColor } from '../config';
+import { VersionListItem } from '../config/types';
+
+const ItemWrapper = styled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 8px;
+  width: 100%;
+  border: 1px solid var(--ant-color-border);
+  border-radius: var(--ant-border-radius);
+  padding: 12px 16px;
+  &:hover {
+    background-color: var(--ant-color-fill-tertiary);
+  }
+  .title {
+    width: 100%;
+    justify-content: space-between;
+    display: flex;
+    align-items: center;
+    font-weight: 600;
+  }
+`;
+
+const RowWrapper = styled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 4px;
+  .label {
+    color: var(--ant-color-text-tertiary);
+  }
+  .drivers {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 8px;
+  }
+`;
+
+const InfoItem = styled.div`
+  display: grid;
+  grid-template-columns: max-content 1fr;
+  gap: 8px;
+  .label {
+    color: var(--ant-color-text-tertiary);
+  }
+`;
+
+const ListWrapper = styled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 16px;
+  width: 100%;
+`;
+
+const FilterBox = styled.div`
+  position: sticky;
+  top: 0;
+  width: 100%;
+  z-index: 100;
+  padding-bottom: 16px;
+  padding-top: 16px;
+  background-color: var(--ant-color-bg-container);
+`;
+
+interface VersionItemProps {
+  data: VersionListItem;
+}
+
+export const VersionItem: React.FC<VersionItemProps> = ({ data }) => {
+  const intl = useIntl();
+  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>
+        )}
+      </div>
+      <RowWrapper>
+        {data.image_name && (
+          <InfoItem>
+            <span className="label">
+              {intl.formatMessage({ id: 'backend.imageName' })}:
+            </span>
+            <AutoTooltip ghost minWidth={20}>
+              {data.is_built_in
+                ? 'Selected dynamically at runtime'
+                : data.image_name}
+            </AutoTooltip>
+          </InfoItem>
+        )}
+        {data.run_command && (
+          <InfoItem>
+            <span className="label">
+              {intl.formatMessage({ id: 'backend.runCommand' })}:
+            </span>
+            <AutoTooltip ghost minWidth={20}>
+              {data.run_command}
+            </AutoTooltip>
+          </InfoItem>
+        )}
+        <InfoItem>
+          <span className="label">
+            {intl.formatMessage({ id: 'backend.framework' })}:
+          </span>
+          <span className="text drivers">
+            {data.availableFrameworks?.map((item) => {
+              return (
+                <ThemeTag
+                  key={item}
+                  style={{ marginRight: 0 }}
+                  color={getGpuColor(item)}
+                >
+                  {item}
+                </ThemeTag>
+              );
+            })}
+          </span>
+        </InfoItem>
+      </RowWrapper>
+    </ItemWrapper>
+  );
+};
+
+const VersionList: React.FC<{ versionConfigs: VersionListItem[] }> = ({
+  versionConfigs
+}) => {
+  const intl = useIntl();
+  const [dataList, setDataList] = useState<VersionListItem[]>(versionConfigs);
+
+  const handleChange = (value: string) => {
+    if (value) {
+      const filtered = versionConfigs.filter((item) =>
+        item.availableFrameworks?.includes(value)
+      );
+      setDataList(filtered);
+    } else {
+      setDataList(versionConfigs);
+    }
+  };
+
+  return (
+    <div>
+      <FilterBox>
+        <BaseSelect
+          allowClear
+          placeholder={intl.formatMessage({ id: 'backend.filter.framework' })}
+          options={frameworks}
+          style={{ width: '100%' }}
+          onChange={handleChange}
+        />
+      </FilterBox>
+      <ListWrapper>
+        {dataList.length ? (
+          dataList.map((version: VersionListItem, index: number) => {
+            return <VersionItem key={index} data={version} />;
+          })
+        ) : (
+          <Empty
+            style={{ width: '100%' }}
+            image={Empty.PRESENTED_IMAGE_SIMPLE}
+            description="Data not found"
+          />
+        )}
+      </ListWrapper>
+    </div>
+  );
+};
+
+export default VersionList;

src/pages/backends/forms/versions-config.tsx

@@ -1,16 +1,15 @@
-import AutoTooltip from '@/components/auto-tooltip';
 import CollapsibleContainer from '@/components/collapse-container';
 import SealInput from '@/components/seal-form/seal-input';
 import SealSelect from '@/components/seal-form/seal-select';
 import { PageActionType } from '@/config/types';
+import useAppUtils from '@/hooks/use-app-utils';
 import { MinusOutlined, PlusOutlined } from '@ant-design/icons';
-import { Button, Divider, Form, Radio } from 'antd';
-import _ from 'lodash';
-import React, { useEffect } from 'react';
+import { useIntl } from '@umijs/max';
+import { Button, Empty, Form, Select, Tag } from 'antd';
+import React, { useEffect, useMemo } from 'react';
 import styled from 'styled-components';
 import { frameworks } from '../config';
 import { ListItem } from '../config/types';
-import { VersionItem } from './built-in-versions';
 
 const Box = styled.div`
   display: grid;
@@ -26,86 +25,66 @@ const Label = styled.span`
   color: var(--ant-color-text-secondary);
 `;
 
-const ImageInner = styled.div`
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  margin-left: 20px;
+const DefaultTag = styled(Tag)`
+  font-weight: 500;
+  margin-left: 8px;
+  color: var(--ant-color-text);
 `;
 
 const Title = styled.div`
+  position: sticky;
+  top: -16px;
+  z-index: 100;
   display: flex;
   align-items: center;
   justify-content: space-between;
+  background-color: var(--ant-color-bg-container);
   font-weight: 600;
-  margin-bottom: 8px;
-`;
-
-const VersionItemWrapper = styled.div`
-  display: flex;
-  flex-direction: column;
-  align-items: flex-start;
-  padding: 8px 16px;
-  border-radius: var(--ant-border-radius);
-  background-color: var(--ant-color-fill-quaternary);
-  width: 100%;
+  padding-top: 8px;
+  padding-bottom: 8px;
 `;
 
 type AddModalProps = {
   action: PageActionType;
   currentData?: ListItem;
-  activeKey?: number[];
+  activeKey?: Array<string | number>;
 };
 const VersionsForm: React.FC<AddModalProps> = ({
   action,
   currentData,
   activeKey
 }) => {
+  const intl = useIntl();
+  const { getRuleMessage } = useAppUtils();
+  const [defaultVersion, setDefaultVersion] = React.useState<string | null>(
+    null
+  );
   const defaultCollapseKey =
     action === 'edit' ? new Set<number>() : new Set([0]);
   const form = Form.useFormInstance();
   const version_configs = Form.useWatch('version_configs', form);
-  const buildInVersionConfigs = Form.useWatch('build_in_version_configs', form);
   const [collapseKey, setCollapseKey] =
-    React.useState<Set<number>>(defaultCollapseKey);
+    React.useState<Set<number | string>>(defaultCollapseKey);
   const versionList = [
     {
       version_no: '',
       image_name: '',
       run_command: '',
       isBuiltin: false,
-      is_default: true
+      is_default: false
     }
   ];
 
-  const handleSetDefaultVersion = (e: any, index: number) => {
-    const versions = form.getFieldValue('version_configs') || [];
-    const updatedVersions = versions.map((version: any, idx: number) => ({
-      ...version,
-      is_default: idx === index
-    }));
-    form.setFieldValue('version_configs', updatedVersions);
-  };
-
-  const handleVersionOnBlur = (
-    e: React.FocusEvent<HTMLInputElement>,
-    index: number
-  ) => {
-    const inputValue = e.target.value.trim() || '';
-    const versions = form.getFieldValue('version_configs') || [];
-    console.log('inputValue:', version_configs, currentData);
-    const isDuplicate =
-      _.get(currentData, ['build_in_version_configs', inputValue]) ||
-      versions.some(
-        (version: any, idx: number) =>
-          version?.version_no === inputValue && idx !== index
-      );
-    if (isDuplicate) {
-      const updatedVersions = [...versions];
-      updatedVersions[index].version_no = '';
-      form.setFieldValue('version_configs', updatedVersions);
-    }
-  };
+  const validVersions = useMemo(() => {
+    return (version_configs || [])
+      .filter((v: any) => v.version_no)
+      ?.map((v: any) => {
+        return {
+          label: v.version_no,
+          value: v.version_no
+        };
+      });
+  }, [version_configs]);
 
   const onToggle = (open: boolean, key: number) => {
     setCollapseKey(open ? new Set([key]) : new Set());
@@ -123,23 +102,11 @@ const VersionsForm: React.FC<AddModalProps> = ({
     form.setFieldValue('version_configs', [...versions, newVersion]);
   };
 
-  const remove = (versions: any[], index: number) => {
-    const updatedVersions = versions.filter(
-      (_: any, idx: number) => idx !== index
-    );
-    // If the removed version was the default, set the first version as default
-    if (versions[index].is_default && updatedVersions.length > 0) {
-      updatedVersions[0].is_default = true;
-    }
-    form.setFieldValue('version_configs', updatedVersions);
-  };
-
   const handleAdd = async () => {
     try {
       const isValid = await form.validateFields(['version_configs'], {
         recursive: true
       });
-      console.log('isValid:', isValid, version_configs);
       if (isValid) {
         add();
         setTimeout(() => {
@@ -154,6 +121,16 @@ const VersionsForm: React.FC<AddModalProps> = ({
     }
   };
 
+  const handleDefaultChange = (value: string) => {
+    const versions = form.getFieldValue('version_configs') || [];
+    const updatedVersions = versions.map((version: any, idx: number) => ({
+      ...version,
+      is_default: version.version_no === value
+    }));
+    form.setFieldValue('version_configs', updatedVersions);
+    setDefaultVersion(value);
+  };
+
   useEffect(() => {
     const versions = form.getFieldValue('version_configs') || [];
 
@@ -168,141 +145,185 @@ const VersionsForm: React.FC<AddModalProps> = ({
     }
   }, [activeKey]);
 
+  useEffect(() => {
+    if (currentData?.default_version) {
+      setDefaultVersion(currentData.default_version);
+    }
+  }, [currentData?.default_version]);
+
   return (
     <>
-      <Form.Item name="version_configs" hidden></Form.Item>
-      <Form.Item name="build_in_version_configs" hidden></Form.Item>
+      <Title>
+        <span className="flex-center gap-8">
+          <span>
+            {intl.formatMessage({ id: 'backend.form.versionConfig' })}
+          </span>
+          <Button onClick={handleAdd} type="link">
+            <PlusOutlined /> {intl.formatMessage({ id: 'backend.addVersion' })}
+          </Button>
+        </span>
+        {!currentData?.is_build_in && (
+          <Select
+            prefix={
+              <span style={{ color: 'var(--ant-color-text-tertiary)' }}>
+                {intl.formatMessage({ id: 'backend.isDefault' })}:
+              </span>
+            }
+            value={defaultVersion}
+            notFoundContent={
+              <Empty
+                style={{ marginBlock: 8 }}
+                image={Empty.PRESENTED_IMAGE_SIMPLE}
+                description={intl.formatMessage({
+                  id: 'backend.form.noVersion'
+                })}
+              />
+            }
+            placeholder={intl.formatMessage({ id: 'backend.version' })}
+            options={validVersions}
+            style={{ width: 200, fontWeight: 400 }}
+            allowClear
+            onChange={handleDefaultChange}
+          />
+        )}
+      </Title>
       <div
         style={{
           display: 'flex',
           flexDirection: 'column',
+          gap: '16px',
           marginBottom: '24px'
         }}
       >
-        <Title>
-          <span>Versions Config</span>
-          <Button onClick={handleAdd} variant="filled" color="default">
-            <PlusOutlined /> Add Version
-          </Button>
-        </Title>
-        {buildInVersionConfigs?.map((item: any, index: number) => (
-          <>
-            <VersionItemWrapper>
-              <VersionItem data={item} />
-            </VersionItemWrapper>
-            <Divider
-              className="divider"
-              style={{
-                borderTop: '1px  dashed var(--ant-color-border)'
-              }}
-            />
-          </>
-        ))}
-        {version_configs?.map((item: any, index: number) => (
-          <>
-            <CollapsibleContainer
-              collapsible={true}
-              showExpandIcon={true}
-              key={index}
-              defaultOpen
-              open={collapseKey.has(index)}
-              title={
-                <Label>
-                  <span>Version:</span>
-                  <span>{item.version_no}</span>
-                </Label>
-              }
-              subtitle={
-                item.image_name && (
-                  <ImageInner>
-                    <span>Image:</span>
-                    <AutoTooltip ghost maxWidth={280}>
-                      {item.image_name}
-                    </AutoTooltip>
-                  </ImageInner>
-                )
-              }
-              onToggle={(open) => onToggle(open, index)}
-              deleteBtn={false}
-              right={
-                <div className="flex-center gap-8">
-                  <span
-                    className="flex-center"
-                    onClick={(e) => e.stopPropagation()}
-                  >
-                    {!currentData?.is_build_in && (
-                      <Form.Item
-                        name={['version_configs', index, 'is_default']}
-                        valuePropName="checked"
-                        initialValue={false}
-                        noStyle
-                      >
-                        <Radio
-                          onChange={(e: any) =>
-                            handleSetDefaultVersion(e, index)
-                          }
-                        >
-                          Default Version
-                        </Radio>
-                      </Form.Item>
-                    )}
-                  </span>
-                  {(version_configs.length > 1 || currentData?.is_build_in) && (
-                    <Button
-                      size="small"
-                      shape="circle"
-                      onClick={() => remove(version_configs, index)}
-                    >
-                      <MinusOutlined />
-                    </Button>
-                  )}
-                </div>
-              }
-            >
-              <Box>
-                <Form.Item
-                  name={['version_configs', index, 'version_no']}
-                  rules={[{ required: true, message: 'Version is required' }]}
-                >
-                  <SealInput.Input
-                    trim
-                    label="Version"
-                    required
-                  ></SealInput.Input>
-                </Form.Item>
-                <Form.Item
-                  name={['version_configs', index, 'image_name']}
-                  rules={[
-                    { required: true, message: 'Image Name is required' }
-                  ]}
-                >
-                  <SealInput.Input
-                    trim
-                    label="Image Name"
-                    required
-                  ></SealInput.Input>
-                </Form.Item>
-              </Box>
-              <Form.Item name={['version_configs', index, 'run_command']}>
-                <SealInput.TextArea label="Execution Command"></SealInput.TextArea>
-              </Form.Item>
-              <Form.Item
-                name={['version_configs', index, 'custom_framework']}
-                style={{ marginBottom: 0 }}
-              >
-                <SealSelect label="Framework" options={frameworks} />
-              </Form.Item>
-            </CollapsibleContainer>
-            {index < version_configs.length - 1 && (
-              <Divider
-                className="divider"
+        <Form.List name="version_configs">
+          {(
+            fields: Array<{ key: React.Key; name: number }>,
+            { add, remove }
+          ) => {
+            const versionConfigs = form.getFieldValue('version_configs');
+            return fields?.map(({ key, name }) => (
+              <div
+                key={name}
                 style={{
-                  borderTop: '1px  dashed var(--ant-color-border)'
+                  borderRadius: 'var(--ant-border-radius)',
+                  border: '1px solid var(--ant-color-split)'
                 }}
-              />
-            )}
-          </>
-        ))}
+              >
+                <CollapsibleContainer
+                  collapsible={true}
+                  showExpandIcon={true}
+                  key={name}
+                  defaultOpen
+                  styles={{
+                    body: collapseKey.has(name) ? { padding: 16 } : {},
+                    content: { paddingTop: 0 },
+                    header: {
+                      backgroundColor: 'unset'
+                    }
+                  }}
+                  open={collapseKey.has(name)}
+                  title={
+                    <Label>
+                      <span>
+                        {intl.formatMessage({ id: 'backend.version' })}:
+                      </span>
+                      <span>{versionConfigs[name]?.version_no}</span>
+                      {versionConfigs[name]?.is_default && (
+                        <DefaultTag>
+                          {intl.formatMessage({ id: 'backend.isDefault' })}
+                        </DefaultTag>
+                      )}
+                    </Label>
+                  }
+                  onToggle={(open) => onToggle(open, name)}
+                  deleteBtn={false}
+                  right={
+                    <div className="flex-center gap-8">
+                      <span
+                        className="flex-center"
+                        onClick={(e) => e.stopPropagation()}
+                      >
+                        {!currentData?.is_build_in && (
+                          <Form.Item
+                            name={[name, 'is_default']}
+                            valuePropName="checked"
+                            initialValue={false}
+                            noStyle
+                          ></Form.Item>
+                        )}
+                      </span>
+                      {(fields.length > 1 || currentData?.is_build_in) && (
+                        <Button
+                          size="small"
+                          shape="circle"
+                          onClick={(e: any) => remove(name)}
+                        >
+                          <MinusOutlined />
+                        </Button>
+                      )}
+                    </div>
+                  }
+                >
+                  <Box>
+                    <Form.Item
+                      name={[name, 'version_no']}
+                      rules={[
+                        {
+                          required: true,
+                          message: getRuleMessage(`input`, 'backend.version')
+                        }
+                      ]}
+                    >
+                      <SealInput.Input
+                        trim
+                        label={intl.formatMessage({ id: 'backend.version' })}
+                        required
+                      ></SealInput.Input>
+                    </Form.Item>
+                    <Form.Item
+                      name={[name, 'image_name']}
+                      rules={[
+                        {
+                          required: true,
+                          message: getRuleMessage(`input`, 'backend.imageName')
+                        }
+                      ]}
+                    >
+                      <SealInput.Input
+                        trim
+                        label={intl.formatMessage({ id: 'backend.imageName' })}
+                        required
+                      ></SealInput.Input>
+                    </Form.Item>
+                  </Box>
+                  <Form.Item
+                    name={[name, 'custom_framework']}
+                    rules={[
+                      {
+                        required: true,
+                        message: getRuleMessage('select', 'backend.framework')
+                      }
+                    ]}
+                  >
+                    <SealSelect
+                      label={intl.formatMessage({ id: 'backend.framework' })}
+                      options={frameworks}
+                      required
+                    />
+                  </Form.Item>
+                  <Form.Item
+                    name={[name, 'run_command']}
+                    style={{ marginBottom: 0 }}
+                  >
+                    <SealInput.TextArea
+                      label={intl.formatMessage({ id: 'backend.runCommand' })}
+                    ></SealInput.TextArea>
+                  </Form.Item>
+                </CollapsibleContainer>
+              </div>
+            ));
+          }}
+        </Form.List>
       </div>
     </>
   );

src/pages/backends/index.tsx

@@ -17,7 +17,7 @@ import {
 } from './apis';
 import AddModal from './components/add-modal';
 import BackendCardList from './components/backend-list';
-import ViewBuiltinVersionsModal from './components/view-builtin-versions-modal';
+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';
@@ -54,11 +54,10 @@ const BackendList = () => {
     action: PageActionType;
     currentData?: Partial<ListItem>;
   }>({ open: false, action: 'create' });
-  const [openViewBuiltinVersionsModal, setOpenViewBuiltinVersionsModal] =
-    useState<{
-      open: boolean;
-      currentData?: Partial<ListItem>;
-    }>({ open: false });
+  const [openVersionInfoModal, setOpenVersionInfoModal] = useState<{
+    open: boolean;
+    currentData?: Partial<ListItem>;
+  }>({ open: false });
 
   // build_in_version_configs is read-only, but needs to be included when updating
   const handleOnSubmit = async (values: FormData) => {
@@ -133,10 +132,9 @@ const BackendList = () => {
       });
     } else if (item.action === 'export') {
       // Export YAML action
-      console.log('Export YAML for:', item.data);
       exportYAML(item.data);
     } else if (item.action === 'view_versions') {
-      setOpenViewBuiltinVersionsModal({
+      setOpenVersionInfoModal({
         open: true,
         currentData: item.data
       });
@@ -156,13 +154,14 @@ const BackendList = () => {
       extra={[]}
     >
       <FilterBar
+        showDeleteButton={false}
         marginBottom={22}
         marginTop={30}
         width={{
           input: 300
         }}
         inputHolder={intl.formatMessage({ id: 'common.filter.name' })}
-        buttonText={'Add Backend'}
+        buttonText={intl.formatMessage({ id: 'backend.button.add' })}
         handleDeleteByBatch={handleDeleteBatch}
         handleClickPrimary={handleAddBackend}
         handleSearch={handleSearch}
@@ -187,20 +186,20 @@ const BackendList = () => {
         open={openModalStatus.open}
         title={
           openModalStatus.action === 'create'
-            ? 'Create Backend'
-            : 'Edit Backend'
+            ? intl.formatMessage({ id: 'backend.button.add' })
+            : intl.formatMessage({ id: 'backend.button.edit' })
         }
       ></AddModal>
-      <ViewBuiltinVersionsModal
-        open={openViewBuiltinVersionsModal.open}
-        currentData={openViewBuiltinVersionsModal.currentData as ListItem}
+      <VersionInfoModal
+        open={openVersionInfoModal.open}
+        currentData={openVersionInfoModal.currentData as ListItem}
         onClose={() =>
-          setOpenViewBuiltinVersionsModal({
+          setOpenVersionInfoModal({
             open: false,
             currentData: undefined
           })
         }
-      ></ViewBuiltinVersionsModal>
+      ></VersionInfoModal>
       <DeleteModal ref={modalRef}></DeleteModal>
     </PageContainer>
   );

src/pages/cluster-management/components/support-gpus.tsx

@@ -35,7 +35,7 @@ const SupportedHardware: React.FC<SupportedHardwareProps> = ({
 
   const supportedHardPlatforms = [
     {
-      label: 'Nvidia',
+      label: 'NVIDIA',
       value: 'cuda',
       description: '',
       key: 'cuda',

src/pages/llmodels/apis/index.ts

@@ -399,7 +399,7 @@ export async function evaluationsModelSpec(
   };
 }
 
-export async function queryBackendList() {
+export async function queryBackendList(params?: { cluster_id: number }) {
   return request<{
     items: {
       backend_name: string;
@@ -410,6 +410,7 @@ export async function queryBackendList() {
       versions: string[];
     }[];
   }>(BACKEND_LIST_API, {
-    method: 'GET'
+    method: 'GET',
+    params
   });
 }

src/pages/llmodels/components/deploy-builtin-modal.tsx

@@ -245,6 +245,7 @@ const AddModal: React.FC<AddModalProps> = (props) => {
     return result;
   };
 
+  // TODO need check the backend is available
   const handleSetBackendOptions = () => {
     const backendGroup = _.groupBy(specListRef.current, 'backend');
 
@@ -495,6 +496,9 @@ const AddModal: React.FC<AddModalProps> = (props) => {
         form.current?.getGPUOptionList?.({
           clusterId: initClusterId()
         });
+        form.current?.getBackendOptions?.({
+          cluster_id: initClusterId()
+        });
       }, 100);
     }
     return () => {
@@ -596,7 +600,6 @@ const AddModal: React.FC<AddModalProps> = (props) => {
                 isGGUF={isGGUF}
                 formKey={deployFormKeyMap.catalog}
                 sourceDisable={false}
-                backendOptions={backendList}
                 sourceList={sourceList}
                 clusterList={clusterList}
                 onBackendChange={handleBackendChange}

src/pages/llmodels/components/deploy-modal.tsx

@@ -10,7 +10,7 @@ import styled from 'styled-components';
 import ColumnWrapper from '../../_components/column-wrapper';
 import { defaultFormValues, deployFormKeyMap, modelSourceMap } from '../config';
 import { backendOptionsMap } from '../config/backend-parameters';
-import { BackendOption, FormData, SourceType } from '../config/types';
+import { FormData, SourceType } from '../config/types';
 import DataForm from '../forms';
 import {
   MessageStatus,
@@ -63,7 +63,6 @@ type AddModalProps = {
   width?: string | number;
   initialValues?: any;
   deploymentType?: 'modelList' | 'modelFiles';
-  backendOptions: BackendOption[];
   clusterList: Global.BaseOption<
     number,
     { provider: string; state: string | number }
@@ -326,15 +325,17 @@ const AddModal: FC<AddModalProps> = (props) => {
       return;
     }
     if (data.local_path || props.source !== modelSourceMap.local_path_value) {
+      // TODO confirm wheather it is gguf by model file not by backend
       handleOnValuesChange?.({
         changedValues: {},
-        allValues:
-          backend === backendOptionsMap.llamaBox
-            ? data
-            : _.omit(data, [
-                'cpu_offloading',
-                'distributed_inference_across_workers'
-              ]),
+        // allValues:
+        //   backend === backendOptionsMap.llamaBox
+        //     ? data
+        //     : _.omit(data, [
+        //         'cpu_offloading',
+        //         'distributed_inference_across_workers'
+        //       ]),
+        allValues: data,
         source: props.source
       });
     }
@@ -413,6 +414,9 @@ const AddModal: FC<AddModalProps> = (props) => {
       form.current?.getGPUOptionList?.({
         clusterId: initClusterId()
       });
+      form.current?.getBackendOptions?.({
+        cluster_id: initClusterId()
+      });
     } else {
       cancelEvaluate();
       clearCahceFormValues();
@@ -542,7 +546,6 @@ const AddModal: FC<AddModalProps> = (props) => {
                 onOk={handleOnOk}
                 ref={form}
                 isGGUF={isGGUF}
-                backendOptions={props.backendOptions}
                 onBackendChange={handleBackendChange}
                 onValuesChange={onValuesChange}
               ></DataForm>

src/pages/llmodels/components/table-list.tsx

@@ -42,7 +42,6 @@ import {
   modelCategoriesMap,
   modelSourceMap
 } from '../config';
-import { backendOptionsMap } from '../config/backend-parameters';
 import {
   ButtonList,
   categoryToPathMap,
@@ -57,7 +56,6 @@ import {
 } from '../config/types';
 import useFormInitialValues from '../hooks/use-form-initial-values';
 import useModelsColumns from '../hooks/use-models-columns';
-import useQueryBackends from '../hooks/use-query-backends';
 import APIAccessInfoModal from './api-access-info';
 import DeployModal from './deploy-modal';
 import Instances from './instances';
@@ -124,7 +122,6 @@ const Models: React.FC<ModelsProps> = ({
   loadend,
   total
 }) => {
-  const { backendOptions } = useQueryBackends();
   const { generateFormValues, clusterList, getClusterList } =
     useFormInitialValues();
   const { saveScrollHeight, restoreScrollHeight } = useBodyScroll();
@@ -401,7 +398,7 @@ const Models: React.FC<ModelsProps> = ({
     const initialValues = generateFormValues(row, []);
     setUpdateFormInitials({
       data: initialValues,
-      isGGUF: row.backend === backendOptionsMap.llamaBox
+      isGGUF: false
     });
     setCurrentData(row);
     setOpenAddModal(true);
@@ -693,7 +690,6 @@ const Models: React.FC<ModelsProps> = ({
         clusterList={clusterList}
         onCancel={handleModalCancel}
         onOk={handleModalOk}
-        backendOptions={backendOptions}
       ></UpdateModelModal>
       <DeployModal
         open={openDeployModal.show}
@@ -704,7 +700,6 @@ const Models: React.FC<ModelsProps> = ({
         isGGUF={openDeployModal.isGGUF}
         hasLinuxWorker={openDeployModal.hasLinuxWorker}
         clusterList={clusterList}
-        backendOptions={backendOptions}
         onCancel={handleDeployModalCancel}
         onOk={handleCreateModel}
       ></DeployModal>

src/pages/llmodels/components/update-modal.tsx

@@ -12,7 +12,7 @@ import {
   updateIgnoreFields
 } from '../config';
 import { backendOptionsMap } from '../config/backend-parameters';
-import { BackendOption, FormData } from '../config/types';
+import { FormData } from '../config/types';
 import { generateGPUSelector } from '../config/utils';
 import DataForm from '../forms';
 import { useCheckCompatibility } from '../hooks';
@@ -26,7 +26,6 @@ type AddModalProps = {
     data: FormData;
     isGGUF: boolean;
   };
-  backendOptions: BackendOption[];
   clusterList: Global.BaseOption<
     number,
     { provider: string; state: string | number }
@@ -326,7 +325,6 @@ const UpdateModal: React.FC<AddModalProps> = (props) => {
           onOk={handleOk}
           ref={formRef}
           isGGUF={isGGUF}
-          backendOptions={props.backendOptions}
           onBackendChange={handleAsyncBackendChange}
           onValuesChange={handleManulOnValuesChange}
         ></DataForm>

src/pages/llmodels/config/backend-parameters/index.ts

@@ -4,9 +4,9 @@ import vllmParameters from './vllm-parameters';
 
 export const backendOptionsMap = {
   llamaBox: 'llama-box',
-  vllm: 'vllm',
+  vllm: 'vLLM',
   voxBox: 'vox-box',
-  ascendMindie: 'ascend-mindie',
+  ascendMindie: 'MindIE',
   custom: 'custom'
 };
 

src/pages/llmodels/forms/index.tsx

@@ -22,6 +22,7 @@ import CatalogFrom from './catalog';
 import LocalPathSource from './local-path-source';
 import OnlineSource from './online-source';
 // import AdvanceConfig from './advance-config';
+import useQueryBackends from '../hooks/use-query-backends';
 import AdvanceConfig from './advance-config';
 import Performance from './performance';
 
@@ -33,7 +34,6 @@ interface DataFormProps {
   isGGUF: boolean;
   formKey: DeployFormKey;
   sourceDisable?: boolean;
-  backendOptions: BackendOption[];
   sourceList?: Global.BaseOption<string>[];
   clusterList: Global.BaseOption<number>[];
   fields?: string[];
@@ -50,7 +50,6 @@ const DataForm: React.FC<DataFormProps> = forwardRef((props, ref) => {
     formKey,
     initialValues,
     sourceDisable = true,
-    backendOptions = [],
     sourceList,
     clusterList = [],
     fields = ['source'],
@@ -58,6 +57,7 @@ const DataForm: React.FC<DataFormProps> = forwardRef((props, ref) => {
     onValuesChange,
     onOk
   } = props;
+  const { backendOptions, getBackendOptions } = useQueryBackends();
   const { getGPUOptionList, gpuOptions } = useGenerateGPUOptions();
   const { getRuleMessage } = useAppUtils();
   const [form] = Form.useForm();
@@ -111,6 +111,7 @@ const DataForm: React.FC<DataFormProps> = forwardRef((props, ref) => {
 
   const handleClusterChange = (value: number) => {
     getGPUOptionList({ clusterId: value });
+    getBackendOptions({ cluster_id: value });
   };
 
   const handleOnValuesChange = async (changedValues: any, allValues: any) => {
@@ -147,6 +148,9 @@ const DataForm: React.FC<DataFormProps> = forwardRef((props, ref) => {
       },
       getGPUOptionList: async (params: { clusterId: number }) => {
         return await getGPUOptionList(params);
+      },
+      getBackendOptions: async (params?: { cluster_id: number }) => {
+        getBackendOptions(params);
       }
     };
   });

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

@@ -1,14 +1,13 @@
 import { backendOptionsAtom } from '@/atoms/models';
 import { useAtom } from 'jotai';
-import { useEffect } from 'react';
 import { queryBackendList } from '../apis';
 
 export default function useQueryBackends() {
   const [backendOptions, setBackendOptions] = useAtom(backendOptionsAtom);
 
-  const getBackendOptions = async () => {
+  const getBackendOptions = async (params?: { cluster_id: number }) => {
     try {
-      const res = await queryBackendList();
+      const res = await queryBackendList(params);
       const list = res?.items?.map((item) => {
         return {
           value: item.backend_name,
@@ -30,10 +29,6 @@ export default function useQueryBackends() {
     }
   };
 
-  useEffect(() => {
-    getBackendOptions();
-  }, []);
-
   return {
     backendOptions,
     getBackendOptions

src/pages/resources/components/model-files.tsx

@@ -17,7 +17,6 @@ import { SourceType } from '@/pages/llmodels/config/types';
 import DownloadModal from '@/pages/llmodels/download';
 import useCheckBackend from '@/pages/llmodels/hooks/use-check-backend';
 import { useGenerateWorkerOptions } from '@/pages/llmodels/hooks/use-form-initial-values';
-import useQueryBackends from '@/pages/llmodels/hooks/use-query-backends';
 import useRecognizeAudio from '@/pages/llmodels/hooks/use-recognize-audio';
 import { PageContainer } from '@ant-design/pro-components';
 import { useIntl, useNavigate } from '@umijs/max';
@@ -67,7 +66,6 @@ const ModelFiles = () => {
     watch: true,
     contentForDelete: 'resources.modelfiles.modelfile'
   });
-  const { backendOptions } = useQueryBackends();
   const intl = useIntl();
   const { showSuccess } = useAppUtils();
   const [downloadModalStatus, setDownlaodMoalStatus] = useState<{
@@ -347,7 +345,6 @@ const ModelFiles = () => {
           workerOptions={readyWorkers}
         ></DownloadModal>
         <DeployModal
-          backendOptions={backendOptions}
           deploymentType="modelFiles"
           title={intl.formatMessage({ id: 'models.button.deploy' })}
           onCancel={handleDeployModalCancel}