style: framework options

src/components/label-selector/label-item.tsx

@@ -1,4 +1,5 @@
 import SealInput from '@/components/seal-form/seal-input';
+import { Global } from '@/config/global';
 import { MinusOutlined } from '@ant-design/icons';
 import { useIntl } from '@umijs/max';
 import { Button, Tooltip } from 'antd';
@@ -99,6 +100,7 @@ const LabelItem: React.FC<LabelItemProps> = ({
       <div className="label-value">
         {valueAddon ?? (
           <SealInput.Input
+            trim={false}
             disabled={disabled}
             checkStatus={label.value ? 'success' : ''}
             label={intl.formatMessage({ id: 'common.input.value' })}

src/components/seal-form/seal-input.tsx

@@ -67,7 +67,7 @@ const SealInput: React.FC<InputProps & SealFormItemProps> = (props) => {
       setIsFocus(false);
     }
     if (!trim) {
-      e.target.value = e.target.value?.trimRight?.();
+      e.target.value = e.target.value?.trim?.();
       props.onChange?.(e);
     }
     props.onBlur?.(e);

src/config/global.d.ts

@@ -1,3 +1,5 @@
+import { PageActionType } from './types';
+
 declare namespace Global {
   type WithFalse<T> = T | false;
   interface Pagination {
@@ -61,7 +63,7 @@ declare namespace Global {
 
   interface ScrollerModalProps<T = unknown, U = unknown> {
     title?: string;
-    action?: 'create' | 'update' | 'view' | 'edit';
+    action?: PageActionType;
     open: boolean;
     currentData?: T | null;
     onOk?: (values: U) => void;

src/locales/en-US/backends.ts

@@ -20,7 +20,7 @@ export default {
   'backend.form.healthCheckPath': 'Health Check Path',
   'backend.form.defaultExecuteCommand': 'Default Execution Command',
   'backend.form.defaultExecuteCommand.tips':
-    '{{model_path}} is the model path, and {{port}} is the service port. These variable names cannot be modified.',
+    '{{model_path}} is the model path, {{port}} is the service port, and {{model_name}} is the model name. Do not change these variables.',
   'backend.form.defaultBackendParameters': 'Default Backend Parameters',
   'backend.form.versionConfig': 'Versions Config',
   'backend.form.addParameter': 'Add Parameter',

src/locales/en-US/models.ts

@@ -187,7 +187,7 @@ export default {
   'models.form.performance': 'Performance',
   'models.form.gpus.notfound': 'No GPUs found',
   'models.form.extendedkvcache': 'Enable Extended KV Cache',
-  'models.form.chunkSize': 'Size Of Cache Chunks',
+  'models.form.chunkSize': 'Size of Cache Chunks',
   'models.form.maxCPUSize': 'Maximum CPU Cache Size (GiB)',
   'models.form.remoteURL': 'Remote Storage URL',
   'models.form.remoteURL.tips':

src/locales/ja-JP/backends.ts

@@ -20,7 +20,7 @@ export default {
   'backend.form.healthCheckPath': 'Health Check Path',
   'backend.form.defaultExecuteCommand': 'Default Execution Command',
   'backend.form.defaultExecuteCommand.tips':
-    '{{model_path}} is the model path, and {{port}} is the service port. These variable names cannot be modified.',
+    '{{model_path}} is the model path, {{port}} is the service port, and {{model_name}} is the model name. Do not change these variables.',
   'backend.form.defaultBackendParameters': 'Default Backend Parameters',
   'backend.form.versionConfig': 'Versions Config',
   'backend.form.addParameter': 'Add Parameter',

src/locales/ja-JP/models.ts

@@ -187,7 +187,7 @@ export default {
   'models.form.performance': 'Performance',
   'models.form.gpus.notfound': 'No GPUs found',
   'models.form.extendedkvcache': 'Enable Extended KV Cache',
-  'models.form.chunkSize': 'Size Of Cache Chunks',
+  'models.form.chunkSize': 'Size of Cache Chunks',
   'models.form.maxCPUSize': 'Maximum CPU Cache Size (GiB)',
   'models.form.remoteURL': 'Remote Storage URL',
   'models.form.remoteURL.tips':
@@ -279,7 +279,7 @@ export default {
 // 20. 'models.form.performance': 'Performance',
 // 21. 'models.form.gpus.notfound': 'No GPUs found',
 // 22. 'models.form.extendedkvcache': 'Enable Extended KV Cache',
-// 23. 'models.form.chunkSize': 'Size Of Cache Chunks',
+// 23. 'models.form.chunkSize': 'Size of Cache Chunks',
 // 24. 'models.form.maxCPUSize': 'Maximum CPU Cache Size (GiB)',
 // 25. 'models.form.remoteURL': 'Remote Storage URL',
 // 26. 'models.form.runCommandPlaceholder': 'e.g., vllm serve Qwen/Qwen2.5-1.5B-Instruct',

src/locales/ru-RU/backends.ts

@@ -20,7 +20,7 @@ export default {
   'backend.form.healthCheckPath': 'Путь проверки здоровья',
   'backend.form.defaultExecuteCommand': 'Команда выполнения по умолчанию',
   'backend.form.defaultExecuteCommand.tips':
-    '{{model_path}} is the model path, and {{port}} is the service port. These variable names cannot be modified.',
+    '{{model_path}} is the model path, {{port}} is the service port, and {{model_name}} is the model name. Do not change these variables.',
   'backend.form.defaultBackendParameters': 'Параметры бэкенда по умолчанию',
   'backend.form.versionConfig': 'Конфигурация версий',
   'backend.form.addParameter': 'Добавить параметр',

src/locales/zh-CN/backends.ts

@@ -20,7 +20,7 @@ export default {
   'backend.form.healthCheckPath': '健康检查路径',
   'backend.form.defaultExecuteCommand': '默认执行命令',
   'backend.form.defaultExecuteCommand.tips':
-    '{{model_path}} 为模型文件路径，{{port}} 为服务端口，这两个变量名不可更改。',
+    '{{model_path}} 为模型文件路径，{{port}} 为服务端口，{{model_name}} 为模型名称，这三个变量名不可更改。',
   'backend.form.defaultBackendParameters': '默认后端参数',
   'backend.form.versionConfig': '版本配置',
   'backend.form.addParameter': '添加参数',

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.ASCEND]: 'vendor.ascend',
-  [GPUDriverMap.HYGON]: 'Hygon',
+  [GPUDriverMap.HYGON]: 'vendor.hygon',
-  [GPUDriverMap.MOORE_THREADS]: 'Moore Threads',
+  [GPUDriverMap.MOORE_THREADS]: 'vendor.moorthreads',
-  [GPUDriverMap.ILUVATAR]: 'Iluvatar',
+  [GPUDriverMap.ILUVATAR]: 'vendor.iluvatar',
-  [GPUDriverMap.CAMBRICON]: 'Cambricon',
+  [GPUDriverMap.CAMBRICON]: 'vendor.cambricon',
-  [GPUDriverMap.METAX]: 'MetaX'
+  [GPUDriverMap.METAX]: 'vendor.metax'
 };
 
 export const GPUsConfigs: Record<