fix: custom backend and versions ux

src/atoms/models.ts

@@ -1,3 +1,4 @@
+import { BackendOption } from '@/pages/llmodels/config/types';
 import { atom, getDefaultStore } from 'jotai';
 
 // models expand keys: create, update , delete,
@@ -24,13 +25,4 @@ export const clusterListAtom = atom<
   }[]
 >([]);
 
-export const backendOptionsAtom = atom<
+export const backendOptionsAtom = atom<BackendOption[]>([]);
-  {
-    value: string;
-    label: string;
-    default_backend_param: string[];
-    default_version: string;
-    isBuiltIn: boolean;
-    versions: { label: string; value: string }[];
-  }[]
->([]);

src/locales/en-US/backends.ts

@@ -29,5 +29,8 @@ export default {
   'backend.versionInfo.autoImage': 'Automatically selected at runtime',
   'backend.version.rules.builtin': 'Must end with "-custom"',
   'backend.version.no.tips':
-    'The name of a custom version must end with "-custom."'
+    'The built-in backend’s custom version name must end with "-custom".',
+  'backend.backend.rules.custom':
+    'The custom backend name must end with "-custom".',
+  'backend.quickConfig': 'Quick Config'
 };

src/locales/ja-JP/backends.ts

@@ -29,5 +29,8 @@ export default {
   'backend.versionInfo.autoImage': 'Automatically selected at runtime',
   'backend.version.rules.builtin': 'Must end with "-custom"',
   'backend.version.no.tips':
-    'The name of a custom version must end with "-custom."'
+    'The built-in backend’s custom version name must end with "-custom".',
+  'backend.backend.rules.custom':
+    'The custom backend name must end with "-custom".',
+  'backend.quickConfig': 'Quick Config'
 };

src/locales/ru-RU/backends.ts

@@ -29,10 +29,15 @@ export default {
   'backend.versionInfo.autoImage': 'Автоматически выбор во время запуска',
   'backend.version.rules.builtin': 'Должен заканчиваться на "-custom"',
   'backend.version.no.tips':
-    'The name of a custom version must end with "-custom."'
+    'The built-in backend’s custom version name must end with "-custom".',
+  'backend.backend.rules.custom':
+    'The custom backend name must end with "-custom".',
+  'backend.quickConfig': 'Quick Config'
 };
 
 // ========== To-Do: Translate Keys (Remove After Translation) ==========
 // 1. 'backend.form.defaultExecuteCommand.tips': '{{model_path}} is the model path, and {{port}} is the service port. These variable names cannot be modified.'
-// 2. 'backend.version.no.tips': 'The name of a custom version must end with "-custom."'
+// 2. 'backend.version.no.tips': 'The built-in backend’s custom version name must end with "-custom".'
+// 3. 'backend.backend.rules.custom': 'The custom backend name must end with "-custom".',
+// 4. 'backend.quickConfig': 'Quick Config'
 // ========== End of To-Do List ==========

src/locales/zh-CN/backends.ts

@@ -28,5 +28,7 @@ export default {
   'backend.noVersion': '未找到版本',
   'backend.versionInfo.autoImage': '运行时自动选择',
   'backend.version.rules.builtin': '须以 "-custom" 结尾',
-  'backend.version.no.tips': '自定义版本名称必须以 "-custom" 结尾。'
+  'backend.version.no.tips': '内置后端自定义版本名称必须以 "-custom" 结尾。',
+  'backend.backend.rules.custom': '自定义后端名称须以 "-custom" 结尾。',
+  'backend.quickConfig': '快速配置'
 };

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

@@ -53,7 +53,8 @@ const AddModal: React.FC<AddModalProps> = (props) => {
   const [yamlContent, setYamlContent] = useState<string>('');
   const [formContent, setFormContent] = useState<FormData>({} as FormData);
 
-  const genertateCurrentData = (values: ListItem): ListItem => {
+  // remove '-custom' suffix from version_no in currentData, when action is EDIT
+  const genertateCurrentVersionData = (values: ListItem): ListItem => {
     const data = { ...values };
     data.version_configs = Object.entries(data.version_configs || {}).reduce(
       (acc, [key, value]) => {
@@ -105,7 +106,7 @@ const AddModal: React.FC<AddModalProps> = (props) => {
 
   useEffect(() => {
     const iniFormContent = (data: ListItem) => {
-      const values: any = genertateCurrentData(data);
+      const values: any = genertateCurrentVersionData(data);
 
       // custom versions
       const versionConfigs = Object.keys(values.version_configs || {}).map(
@@ -133,6 +134,7 @@ const AddModal: React.FC<AddModalProps> = (props) => {
 
       return {
         ...values,
+        backend_name: values.backend_name.replace(/-custom$/, ''),
         version_configs: versionConfigs,
         built_in_version_configs: builtInVersions
       };
@@ -158,7 +160,7 @@ const AddModal: React.FC<AddModalProps> = (props) => {
 
     if (action === PageAction.EDIT && open) {
       const yaml = initYamlContent(currentData || {});
-      const formData = iniFormContent(currentData || {});
+      const formData = iniFormContent(currentData || ({} as ListItem));
       setYamlContent(yaml);
       setFormContent(formData);
       formRef.current?.setFieldsValue?.(formData);

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

@@ -104,13 +104,22 @@ const ImportYAML: React.FC<ImportYAMLProps> = forwardRef(
 
         const jsonData = yaml2Json(content);
         const exsistingVersions = Object.keys(jsonData.version_configs || {});
-        const invalidVersion = exsistingVersions.find(
+
-          (v) => !v.endsWith('-custom')
+        if (
-        );
+          actionStatus.isBuiltIn &&
-        if (invalidVersion) {
+          exsistingVersions.find((v) => !v.endsWith('-custom'))
+        ) {
           setError(intl.formatMessage({ id: 'backend.version.no.tips' }));
           return false;
         }
+        if (
+          !actionStatus.isBuiltIn &&
+          actionStatus.action === PageAction.CREATE &&
+          !jsonData.backend_name.endsWith('-custom')
+        ) {
+          setError(intl.formatMessage({ id: 'backend.backend.rules.custom' }));
+          return false;
+        }
 
         return content;
       } catch (error) {

src/pages/backends/config/index.ts

@@ -144,7 +144,7 @@ export const frameworks = [
 ];
 
 export const yamlTemplate = `# backend configuration template
-backend_name: my-backend
+backend_name: my-backend-custom
 description: this is my-backend
 default_version: v0.5.1
 health_check_path: /v1/models
@@ -152,11 +152,11 @@ default_backend_param:
   - --host
 default_run_command: myBackend serve {{model_path}} --port {{port}}
 version_configs:
-  v0.0.1-custom:
+  v0.0.1:
     image_name: lm/mybackend:latest
     run_command: myBackend serve {{model_path}} --port {{port}}
     custom_framework: cuda
-  v0.0.2-custom:
+  v0.0.2:
     image_name: lm/mybackend:test
     run_command:
     custom_framework:

src/pages/backends/config/schema/create.json

@@ -3,6 +3,7 @@
   "properties": {
     "backend_name": {
       "type": "string",
+      "pattern": "^-custom$",
       "description": "backend name",
       "severity": "error"
     },

src/pages/backends/forms/basic.tsx

@@ -7,12 +7,13 @@ import useAppUtils from '@/hooks/use-app-utils';
 import { useIntl } from '@umijs/max';
 import { Form } from 'antd';
 import React from 'react';
-import { FormData } from '../config/types';
+import { FormData, ListItem } from '../config/types';
 
 type AddModalProps = {
   action: PageActionType;
+  currentData?: ListItem;
 };
-const BasicForm: React.FC<AddModalProps> = ({ action }) => {
+const BasicForm: React.FC<AddModalProps> = ({ action, currentData }) => {
   const form = Form.useFormInstance();
   const intl = useIntl();
   const { getRuleMessage } = useAppUtils();
@@ -30,6 +31,7 @@ const BasicForm: React.FC<AddModalProps> = ({ action }) => {
       >
         <SealInput.Input
           trim
+          addAfter={currentData?.is_built_in ? null : '-custom'}
           disabled={action === PageAction.EDIT}
           label={intl.formatMessage({ id: 'common.table.name' })}
           required

src/pages/backends/forms/index.tsx

@@ -34,12 +34,19 @@ const BackendForm: React.FC<AddModalProps> = forwardRef(
     };
 
     const handleOnFinish = (values: FormData) => {
-      const data = { ...values };
+      const data = {
+        ...values,
+        backend_name: currentData?.is_built_in
+          ? values.backend_name
+          : `${values.backend_name}-custom`
+      };
       data.version_configs = data.version_configs?.map((item) => {
         if (item.version_no) {
           return {
             ...item,
-            version_no: `${item.version_no}-custom`
+            version_no: currentData?.is_built_in
+              ? `${item.version_no}-custom`
+              : item.version_no
           };
         }
         return item;
@@ -82,7 +89,7 @@ const BackendForm: React.FC<AddModalProps> = forwardRef(
         initialValues={_.omit(currentData, ['version_configs'])}
         onFinishFailed={onFinishFailed}
       >
-        <BasicForm action={action}></BasicForm>
+        <BasicForm action={action} currentData={currentData}></BasicForm>
         <VersionsForm
           action={action}
           currentData={currentData}

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

@@ -283,7 +283,7 @@ const VersionsForm: React.FC<AddModalProps> = ({
                     >
                       <SealInput.Input
                         trim
-                        addAfter="-custom"
+                        addAfter={currentData?.is_built_in ? '-custom' : null}
                         onChange={handleVersionChange}
                         label={intl.formatMessage({ id: 'backend.version' })}
                         required

src/pages/llmodels/config/types.ts

@@ -288,13 +288,19 @@ export interface EvaluateResult {
   };
 }
 
-export interface BackendOption {
+export interface BackendGroupOption {
   value: string;
   label: string;
+  title?: string;
   default_backend_param: string[];
   default_version: string;
   isBuiltIn: boolean;
-  versions: { label: string; value: string }[];
+  versions: { label: string; value: string; title?: string }[];
+}
+
+export interface BackendOption {
+  label: string;
+  options: BackendGroupOption[];
 }
 
 export interface AccessControlFormData {

src/pages/llmodels/forms/advance-config.tsx

@@ -5,11 +5,13 @@ import { useIntl } from '@umijs/max';
 import { Form } from 'antd';
 import _ from 'lodash';
 import { useCallback } from 'react';
-import { modelCategories, ScheduleValueMap } from '../config';
+import { DeployFormKeyMap, modelCategories, ScheduleValueMap } from '../config';
 import { backendOptionsMap } from '../config/backend-parameters';
 import { useFormContext } from '../config/form-context';
 import { FormData } from '../config/types';
-import Backend from './backend';
+import BackendForm from './backend';
+import BackendParametersList from './backend-parameters-list';
+import CustomBackend from './custom-backend';
 
 const AdvanceConfig = () => {
   const intl = useIntl();
@@ -17,7 +19,7 @@ const AdvanceConfig = () => {
   const EnviromentVars = Form.useWatch('env', form);
   const scheduleType = Form.useWatch('scheduleType', form);
   const backend = Form.useWatch('backend', form);
-  const { onValuesChange } = useFormContext();
+  const { onValuesChange, formKey } = useFormContext();
 
   const handleEnviromentVarsChange = useCallback(
     (labels: Record<string, any>) => {
@@ -62,8 +64,9 @@ const AdvanceConfig = () => {
           options={modelCategories}
         ></SealSelect>
       </Form.Item>
-      <Backend></Backend>
+      {formKey === DeployFormKeyMap.CATALOG && <BackendForm></BackendForm>}
-
+      <CustomBackend></CustomBackend>
+      <BackendParametersList></BackendParametersList>
       <Form.Item<FormData> name="env">
         <LabelSelector
           label={intl.formatMessage({

src/pages/llmodels/forms/backend.tsx

@@ -1,12 +1,11 @@
 import IconFont from '@/components/icon-font';
-import SealInput from '@/components/seal-form/seal-input';
 import SealSelect from '@/components/seal-form/seal-select';
-import SealTextArea from '@/components/seal-form/seal-textarea';
 import TooltipList from '@/components/tooltip-list';
 import useAppUtils from '@/hooks/use-app-utils';
 import { useIntl } from '@umijs/max';
 import { Form, Typography } from 'antd';
 import React, { useMemo } from 'react';
+import styled from 'styled-components';
 import {
   backendLabelMap,
   backendTipsList,
@@ -14,23 +13,20 @@ import {
 } from '../config';
 import { backendOptionsMap } from '../config/backend-parameters';
 import { useFormContext } from '../config/form-context';
-import { FormData } from '../config/types';
+
-import BackendParametersList from './backend-parameters-list';
+const Box = styled.div`
+  &.default-backend {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: 16px;
+  }
+`;
 
 const BackendFields: React.FC = () => {
   const intl = useIntl();
   const { getRuleMessage } = useAppUtils();
   const form = Form.useFormInstance();
-  const {
+  const { onValuesChange, backendOptions, onBackendChange } = useFormContext();
-    isGGUF,
-    formKey,
-    action,
-    source,
-    gpuOptions,
-    onValuesChange,
-    backendOptions,
-    onBackendChange
-  } = useFormContext();
   const backend = Form.useWatch('backend', form);
 
   const handleBackendVersionOnBlur = () => {
@@ -45,10 +41,53 @@ const BackendFields: React.FC = () => {
     if (!backend || backend === backendOptionsMap.custom) {
       return [];
     }
-    return (
+
-      backendOptions.find((item) => item.value === backend)?.versions || []
+    // find the backend item from backendOptions
+    const backendItem = backendOptions
+      .flatMap((group) => group.options)
+      .find((item) => item.value === backend);
+
+    const versions = backendItem?.versions || [];
+
+    // if it's a custom backend,
+    if (backendItem && !backendItem.isBuiltIn) {
+      return versions;
+    }
+
+    // check the value if endts with '-custom', if true, remove the suffix  add to  "Cutom" group, if not , add to "Built-in" group
+    const builtInVersions = versions.filter(
+      (item) => !item.value?.endsWith('-custom')
     );
-  }, [backend, backendOptions]);
+    const customVersions = versions.filter((item) =>
+      item.value?.endsWith('-custom')
+    );
+
+    const options = [];
+
+    if (builtInVersions.length > 0) {
+      options.push({
+        label: intl.formatMessage({ id: 'backend.builtin' }),
+        options: builtInVersions
+      });
+    }
+
+    if (customVersions.length > 0) {
+      options.push({
+        label: intl.formatMessage({ id: 'backend.custom' }),
+        options: customVersions
+      });
+    }
+
+    return options;
+  }, [backend, backendOptions, intl]);
+
+  const optionRender = (option: any) => {
+    return option.data.title;
+  };
+
+  const labelRender = (option: any) => {
+    return option.title;
+  };
 
   return (
     <>
@@ -67,12 +106,16 @@ const BackendFields: React.FC = () => {
           label={intl.formatMessage({ id: 'models.form.backend' })}
           description={<TooltipList list={backendTipsList}></TooltipList>}
           options={backendOptions}
+          optionRender={optionRender}
+          labelRender={labelRender}
         ></SealSelect>
       </Form.Item>
       {backendOptionsMap.custom !== backend && (
         <Form.Item name="backend_version">
           <SealSelect
             options={backendVersions}
+            optionRender={optionRender}
+            labelRender={labelRender}
             placeholder={intl.formatMessage({
               id: 'models.form.backendVersion.holder'
             })}
@@ -114,47 +157,6 @@ const BackendFields: React.FC = () => {
           ></SealSelect>
         </Form.Item>
       )}
-      {backend === backendOptionsMap.custom && (
-        <>
-          <Form.Item<FormData>
-            name="image_name"
-            rules={[
-              {
-                required: true,
-                message: getRuleMessage('input', 'backend.imageName')
-              }
-            ]}
-          >
-            <SealInput.Input
-              required
-              allowClear
-              label={intl.formatMessage({ id: 'backend.imageName' })}
-            ></SealInput.Input>
-          </Form.Item>
-          <Form.Item<FormData>
-            name="run_command"
-            rules={[
-              {
-                required: true,
-                message: getRuleMessage('input', 'backend.runCommand')
-              }
-            ]}
-          >
-            <SealTextArea
-              allowClear
-              required
-              scaleSize={true}
-              alwaysFocus={true}
-              autoSize={{ minRows: 2, maxRows: 4 }}
-              label={intl.formatMessage({ id: 'backend.runCommand' })}
-              placeholder={intl.formatMessage({
-                id: 'models.form.runCommandPlaceholder'
-              })}
-            ></SealTextArea>
-          </Form.Item>
-        </>
-      )}
-      <BackendParametersList></BackendParametersList>
     </>
   );
 };

src/pages/llmodels/forms/basic.tsx

@@ -8,8 +8,10 @@ import {
 import { useIntl } from '@umijs/max';
 import { Form } from 'antd';
 import { useMemo } from 'react';
-import { sourceOptions } from '../config';
+import { DeployFormKeyMap, sourceOptions } from '../config';
+import { useFormContext } from '../config/form-context';
 import { FormData } from '../config/types';
+import BackendForm from './backend';
 import LocalPathSource from './local-path-source';
 import OnlineSource from './online-source';
 
@@ -32,6 +34,7 @@ const BasicForm: React.FC<BasicFormProps> = (props) => {
     onSourceChange
   } = props;
   const intl = useIntl();
+  const { formKey } = useFormContext();
   const { getRuleMessage } = useAppUtils();
   const form = Form.useFormInstance();
 
@@ -115,6 +118,7 @@ const BasicForm: React.FC<BasicFormProps> = (props) => {
           ></SealSelect>
         }
       </Form.Item>
+      {formKey === DeployFormKeyMap.DEPLOYMENT && <BackendForm></BackendForm>}
       <Form.Item<FormData>
         name="replicas"
         rules={[

src/pages/llmodels/forms/custom-backend.tsx

@@ -0,0 +1,66 @@
+import SealInput from '@/components/seal-form/seal-input';
+import SealTextArea from '@/components/seal-form/seal-textarea';
+import useAppUtils from '@/hooks/use-app-utils';
+import { useIntl } from '@umijs/max';
+import { Form } from 'antd';
+import React from 'react';
+import { backendOptionsMap } from '../config/backend-parameters';
+import { FormData } from '../config/types';
+
+const CustomBackend: React.FC = () => {
+  const intl = useIntl();
+  const { getRuleMessage } = useAppUtils();
+  const form = Form.useFormInstance();
+  const backend = Form.useWatch('backend', form);
+
+  return (
+    <>
+      {backend === backendOptionsMap.custom && (
+        <>
+          <Form.Item<FormData>
+            name="image_name"
+            rules={[
+              {
+                required: true,
+                message: getRuleMessage('input', 'backend.imageName')
+              }
+            ]}
+          >
+            <SealInput.Input
+              required
+              allowClear
+              label={intl.formatMessage({ id: 'backend.imageName' })}
+            ></SealInput.Input>
+          </Form.Item>
+          <Form.Item<FormData>
+            name="run_command"
+            rules={[
+              {
+                required: true,
+                message: getRuleMessage('input', 'backend.runCommand')
+              }
+            ]}
+          >
+            <SealTextArea
+              allowClear
+              required
+              scaleSize={true}
+              alwaysFocus={true}
+              autoSize={{ minRows: 2, maxRows: 4 }}
+              label={intl.formatMessage({ id: 'backend.runCommand' })}
+              description={intl.formatMessage({
+                id: 'backend.form.defaultExecuteCommand.tips'
+              })}
+              placeholder={intl.formatMessage(
+                { id: 'common.help.eg' },
+                { content: 'vllm serve {{model_path}} --port {{port}}' }
+              )}
+            ></SealTextArea>
+          </Form.Item>
+        </>
+      )}
+    </>
+  );
+};
+
+export default CustomBackend;

src/pages/llmodels/forms/index.tsx

@@ -16,7 +16,7 @@ import {
 import { backendOptionsMap } from '../config/backend-parameters';
 import { FormContext } from '../config/form-context';
 import {
-  BackendOption,
+  BackendGroupOption,
   DeployFormKey,
   FormData,
   SourceType
@@ -188,7 +188,7 @@ const DataForm: React.FC<DataFormProps> = forwardRef((props, ref) => {
     };
   };
 
-  const updateKVCacheConfig = (backend: string, option: BackendOption) => {
+  const updateKVCacheConfig = (backend: string, option: BackendGroupOption) => {
     if (
       !option.isBuiltIn &&
       [backendOptionsMap.SGLang, backendOptionsMap.vllm].includes(backend)
@@ -202,7 +202,12 @@ const DataForm: React.FC<DataFormProps> = forwardRef((props, ref) => {
     return {};
   };
 
-  const handleBackendChange = async (val: string, option: BackendOption) => {
+  const handleBackendChange = async (
+    val: string,
+    option: BackendGroupOption
+  ) => {
+    console.log('handleBackendChange option===>', val, option);
+    const isGGUF = checkIsGGUF();
     form.setFieldsValue({
       env: null,
       backend_version: option.default_version || '',

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

@@ -1,28 +1,59 @@
 import { backendOptionsAtom } from '@/atoms/models';
+import { useIntl } from '@umijs/max';
 import { useAtom } from 'jotai';
 import { queryBackendList } from '../apis';
+import { backendOptionsMap } from '../config/backend-parameters';
+import { BackendGroupOption } from '../config/types';
 
 export default function useQueryBackends() {
   const [backendOptions, setBackendOptions] = useAtom(backendOptionsAtom);
+  const intl = useIntl();
 
   const getBackendOptions = async (params?: { cluster_id: number }) => {
     try {
       const res = await queryBackendList(params);
-      const list = res?.items?.map((item) => {
+      const list: BackendGroupOption[] = res?.items?.map((item) => {
         return {
           value: item.backend_name,
-          label: item.backend_name,
+          label:
+            item.backend_name === backendOptionsMap.custom
+              ? intl.formatMessage({ id: 'backend.quickConfig' })
+              : item.backend_name,
+          title:
+            item.backend_name === backendOptionsMap.custom
+              ? intl.formatMessage({ id: 'backend.quickConfig' })
+              : item.backend_name.replace(/-custom$/, ''),
           default_backend_param: item.default_backend_param || [],
           default_version: item.default_version,
           isBuiltIn: item.is_built_in,
           versions: (item.versions || []).map((vItem) => ({
             label: vItem.version,
-            value: vItem.version
+            value: vItem.version,
+            title: vItem.version.replace(/-custom$/, '')
           }))
         };
       });
+      const builtInBackends = list?.filter((item) => item.isBuiltIn);
+      const customBackends = list?.filter((item) => !item.isBuiltIn);
+
+      const options = [];
+
+      if (builtInBackends && builtInBackends.length > 0) {
+        options.push({
+          label: intl.formatMessage({ id: 'backend.builtin' }),
+          options: builtInBackends
+        });
+      }
+
+      if (customBackends && customBackends.length > 0) {
+        options.push({
+          label: intl.formatMessage({ id: 'backend.custom' }),
+          options: customBackends
+        });
+      }
+
       if (res?.items) {
-        setBackendOptions(list || []);
+        setBackendOptions(options);
       }
       return list || [];
     } catch (error) {