style: framework options

src/pages/backends/config/index.ts

@@ -5,6 +5,10 @@ import VoxBoxLogo from '@/assets/logo/voxbox.png';
 import icons from '@/components/icon-font/icons';
 import { GPUSTACK_API_BASE_URL } from '@/config/settings';
 import { backendOptionsMap } from '@/pages/llmodels/config/backend-parameters';
+import {
+  GPUDriverMap,
+  ManufacturerMap
+} from '@/pages/resources/config/gpu-driver';
 import jsYaml from 'js-yaml';
 import { trim } from 'lodash';
 
@@ -135,35 +139,51 @@ export const builtInBackendFields = [
 export const frameworks = [
   {
     label: 'CUDA',
-    value: 'cuda'
+    value: GPUDriverMap.NVIDIA,
+    tips: ManufacturerMap[GPUDriverMap.NVIDIA],
+    locale: false
   },
   {
     label: 'ROCm',
-    value: 'rocm'
+    value: GPUDriverMap.AMD,
+    tips: ManufacturerMap[GPUDriverMap.AMD],
+    locale: false
   },
   {
     label: 'CANN',
-    value: 'cann'
+    value: GPUDriverMap.ASCEND,
+    tips: ManufacturerMap[GPUDriverMap.ASCEND],
+    locale: true
   },
   {
     label: 'DTK',
-    value: 'dtk'
+    value: GPUDriverMap.HYGON,
+    tips: ManufacturerMap[GPUDriverMap.HYGON],
+    locale: true
   },
   {
     label: 'MACA',
-    value: 'maca'
+    value: GPUDriverMap.METAX,
+    tips: ManufacturerMap[GPUDriverMap.METAX],
+    locale: true
   },
   {
     label: 'CoreX',
-    value: 'corex'
+    value: GPUDriverMap.ILUVATAR,
+    tips: ManufacturerMap[GPUDriverMap.ILUVATAR],
+    locale: true
   },
   {
     label: 'MUSA',
-    value: 'musa'
+    value: GPUDriverMap.MOORE_THREADS,
+    tips: ManufacturerMap[GPUDriverMap.MOORE_THREADS],
+    locale: true
   },
   {
     label: 'Neuware',
-    value: 'neuware'
+    value: GPUDriverMap.CAMBRICON,
+    tips: ManufacturerMap[GPUDriverMap.CAMBRICON],
+    locale: true
   },
   {
     label: 'CPU',

src/pages/backends/forms/basic.tsx

@@ -62,7 +62,10 @@ const BasicForm: React.FC<AddModalProps> = ({ action, currentData }) => {
               })}
               placeholder={intl.formatMessage(
                 { id: 'common.help.eg' },
-                { content: 'vllm serve {{model_path}} --port {{port}}' }
+                {
+                  content:
+                    'vllm serve {{model_path}} --port {{port}} --served-model-name {{model_name}}'
+                }
               )}
               autoSize={{ minRows: 2, maxRows: 4 }}
               label={intl.formatMessage({

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

@@ -157,6 +157,22 @@ const VersionsForm: React.FC<AddModalProps> = ({
     console.log('Version changed:', e.target.value);
   };
 
+  const optionRender = (option: any) => {
+    const { data } = option;
+    return (
+      <span>
+        {option.label}
+        {data.tips ? (
+          data.locale ? (
+            <span className="text-tertiary m-l-4">{` [${intl.formatMessage({ id: data.tips })}]`}</span>
+          ) : (
+            <span className="text-tertiary m-l-4">{` [${data.tips}]`}</span>
+          )
+        ) : null}
+      </span>
+    );
+  };
+
   return (
     <>
       <Title>
@@ -315,8 +331,10 @@ const VersionsForm: React.FC<AddModalProps> = ({
                     ]}
                   >
                     <SealSelect
+                      listHeight={288}
                       label={intl.formatMessage({ id: 'backend.framework' })}
                       options={frameworks}
+                      optionRender={optionRender}
                       required
                     />
                   </Form.Item>

src/pages/resources/config/gpu-driver.ts

@@ -9,15 +9,15 @@ export const GPUDriverMap = {
   METAX: 'maca'
 };
 
-const ManufacturerMap = {
+export const ManufacturerMap = {
   [GPUDriverMap.NVIDIA]: 'NVIDIA',
   [GPUDriverMap.AMD]: 'AMD',
-  [GPUDriverMap.ASCEND]: 'Huawei',
-  [GPUDriverMap.HYGON]: 'Hygon',
-  [GPUDriverMap.MOORE_THREADS]: 'Moore Threads',
-  [GPUDriverMap.ILUVATAR]: 'Iluvatar',
-  [GPUDriverMap.CAMBRICON]: 'Cambricon',
-  [GPUDriverMap.METAX]: 'MetaX'
+  [GPUDriverMap.ASCEND]: 'vendor.ascend',
+  [GPUDriverMap.HYGON]: 'vendor.hygon',
+  [GPUDriverMap.MOORE_THREADS]: 'vendor.moorthreads',
+  [GPUDriverMap.ILUVATAR]: 'vendor.iluvatar',
+  [GPUDriverMap.CAMBRICON]: 'vendor.cambricon',
+  [GPUDriverMap.METAX]: 'vendor.metax'
 };
 
 export const GPUsConfigs: Record<