fix: re-request catalog specs after changing cluster

src/components/icon-font/iconfont/iconfont.css

@@ -1,8 +1,8 @@
 @font-face {
   font-family: iconfont; /* Project id 4613488 */
-  src: url('iconfont.woff2?t=1755160439217') format('woff2'),
+  src: url('iconfont.woff2?t=1763436184844') format('woff2'),
-       url('iconfont.woff?t=1755160439217') format('woff'),
+       url('iconfont.woff?t=1763436184844') format('woff'),
-       url('iconfont.ttf?t=1755160439217') format('truetype');
+       url('iconfont.ttf?t=1763436184844') format('truetype');
 }
 
 .iconfont {
@@ -13,6 +13,174 @@
   -moz-osx-font-smoothing: grayscale;
 }
 
+.icon-basic::before {
+  content: "\e6bb";
+}
+
+.icon-settings::before {
+  content: "\e6b8";
+}
+
+.icon-speed::before {
+  content: "\e6ba";
+}
+
+.icon-permission::before {
+  content: "\e6b6";
+}
+
+.icon-captive_portal::before {
+  content: "\e6b7";
+}
+
+.icon-lock_open_right::before {
+  content: "\e6b3";
+}
+
+.icon-lock_person::before {
+  content: "\e6b4";
+}
+
+.icon-lock_open::before {
+  content: "\e6b5";
+}
+
+.icon-question::before {
+  content: "\e6b2";
+}
+
+.icon-aws::before {
+  content: "\e616";
+}
+
+.icon-aws1::before {
+  content: "\e62f";
+}
+
+.icon-manage_user::before {
+  content: "\e6b1";
+}
+
+.icon-private::before {
+  content: "\e6b0";
+}
+
+.icon-stop3::before {
+  content: "\e6af";
+}
+
+.icon-version::before {
+  content: "\e6ae";
+}
+
+.icon-edit-content::before {
+  content: "\e6ab";
+}
+
+.icon-code_block::before {
+  content: "\e6ac";
+}
+
+.icon-parameters::before {
+  content: "\e6ad";
+}
+
+.icon-backend-filled::before {
+  content: "\e6a9";
+}
+
+.icon-backend::before {
+  content: "\e6aa";
+}
+
+.icon-down2::before {
+  content: "\e6a7";
+}
+
+.icon-nvidia2::before {
+  content: "\e60d";
+}
+
+.icon-centos::before {
+  content: "\e6cd";
+}
+
+.icon-redhat::before {
+  content: "\ec7b";
+}
+
+.icon-ubuntu::before {
+  content: "\edd3";
+}
+
+.icon-debian::before {
+  content: "\eb74";
+}
+
+.icon-alma-linux::before {
+  content: "\e6a8";
+}
+
+.icon-fedora::before {
+  content: "\e61a";
+}
+
+.icon-rocky-linux::before {
+  content: "\e620";
+}
+
+.icon-nvidia1::before {
+  content: "\e980";
+}
+
+.icon-nvidia::before {
+  content: "\e60c";
+}
+
+.icon-amd::before {
+  content: "\e6a6";
+}
+
+.icon-huawei::before {
+  content: "\e615";
+}
+
+.icon-metax::before {
+  content: "\e6a4";
+}
+
+.icon-ascend::before {
+  content: "\e6a3";
+}
+
+.icon-huaweicloud::before {
+  content: "\e614";
+}
+
+.icon-alicloud::before {
+  content: "\e784";
+}
+
+.icon-tencentcloud::before {
+  content: "\e609";
+}
+
+.icon-cluster2-outline::before {
+  content: "\e6a1";
+}
+
+.icon-cluster2-filled::before {
+  content: "\e6a2";
+}
+
+.icon-cluster-filled::before {
+  content: "\e69f";
+}
+
+.icon-cluster-outline::before {
+  content: "\e6a0";
+}
+
 .icon-admin-user::before {
   content: "\e69d";
 }
@@ -21,7 +189,7 @@
   content: "\e69e";
 }
 
-.icon-quick_reference_24dp_1F1F1F_FILL0_wght300_GRAD0_op::before {
+.icon-detail-info::before {
   content: "\e69b";
 }
 

src/components/icon-font/iconfont/iconfont.json

@@ -5,6 +5,300 @@
   "css_prefix_text": "icon-",
   "description": "",
   "glyphs": [
+    {
+      "icon_id": "46055620",
+      "name": "basic",
+      "font_class": "basic",
+      "unicode": "e6bb",
+      "unicode_decimal": 59067
+    },
+    {
+      "icon_id": "46055265",
+      "name": "settings",
+      "font_class": "settings",
+      "unicode": "e6b8",
+      "unicode_decimal": 59064
+    },
+    {
+      "icon_id": "46055263",
+      "name": "speed",
+      "font_class": "speed",
+      "unicode": "e6ba",
+      "unicode_decimal": 59066
+    },
+    {
+      "icon_id": "46039838",
+      "name": "permission",
+      "font_class": "permission",
+      "unicode": "e6b6",
+      "unicode_decimal": 59062
+    },
+    {
+      "icon_id": "46039837",
+      "name": "captive_portal",
+      "font_class": "captive_portal",
+      "unicode": "e6b7",
+      "unicode_decimal": 59063
+    },
+    {
+      "icon_id": "46001737",
+      "name": "lock_open_right",
+      "font_class": "lock_open_right",
+      "unicode": "e6b3",
+      "unicode_decimal": 59059
+    },
+    {
+      "icon_id": "46001736",
+      "name": "lock_person",
+      "font_class": "lock_person",
+      "unicode": "e6b4",
+      "unicode_decimal": 59060
+    },
+    {
+      "icon_id": "46001735",
+      "name": "lock_open",
+      "font_class": "lock_open",
+      "unicode": "e6b5",
+      "unicode_decimal": 59061
+    },
+    {
+      "icon_id": "45937227",
+      "name": "question_mark_24dp_1F1F1F_FILL0_wght300_GRAD0_opsz",
+      "font_class": "question",
+      "unicode": "e6b2",
+      "unicode_decimal": 59058
+    },
+    {
+      "icon_id": "10786885",
+      "name": "aws",
+      "font_class": "aws",
+      "unicode": "e616",
+      "unicode_decimal": 58902
+    },
+    {
+      "icon_id": "12014352",
+      "name": "aws",
+      "font_class": "aws1",
+      "unicode": "e62f",
+      "unicode_decimal": 58927
+    },
+    {
+      "icon_id": "45704693",
+      "name": "manage_accounts_24dp_1F1F1F_FILL1_wght300_GRAD0_op",
+      "font_class": "manage_user",
+      "unicode": "e6b1",
+      "unicode_decimal": 59057
+    },
+    {
+      "icon_id": "45702717",
+      "name": "private",
+      "font_class": "private",
+      "unicode": "e6b0",
+      "unicode_decimal": 59056
+    },
+    {
+      "icon_id": "45702697",
+      "name": "stop",
+      "font_class": "stop3",
+      "unicode": "e6af",
+      "unicode_decimal": 59055
+    },
+    {
+      "icon_id": "45688107",
+      "name": "version",
+      "font_class": "version",
+      "unicode": "e6ae",
+      "unicode_decimal": 59054
+    },
+    {
+      "icon_id": "45631011",
+      "name": "contract_edit_24dp_1F1F1F_FILL0_wght300_GRAD0_opsz",
+      "font_class": "edit-content",
+      "unicode": "e6ab",
+      "unicode_decimal": 59051
+    },
+    {
+      "icon_id": "45631010",
+      "name": "code_blocks_24dp_1F1F1F_FILL0_wght300_GRAD0_opsz24",
+      "font_class": "code_block",
+      "unicode": "e6ac",
+      "unicode_decimal": 59052
+    },
+    {
+      "icon_id": "45631009",
+      "name": "settings_applications_24dp_1F1F1F_FILL0_wght300_GR",
+      "font_class": "parameters",
+      "unicode": "e6ad",
+      "unicode_decimal": 59053
+    },
+    {
+      "icon_id": "45623375",
+      "name": "bolt_24dp_1F1F1F_FILL1_wght300_GRAD0_opsz24",
+      "font_class": "backend-filled",
+      "unicode": "e6a9",
+      "unicode_decimal": 59049
+    },
+    {
+      "icon_id": "45623374",
+      "name": "bolt_24dp_1F1F1F_FILL0_wght300_GRAD0_opsz24",
+      "font_class": "backend",
+      "unicode": "e6aa",
+      "unicode_decimal": 59050
+    },
+    {
+      "icon_id": "45554217",
+      "name": "arrow_down",
+      "font_class": "down2",
+      "unicode": "e6a7",
+      "unicode_decimal": 59047
+    },
+    {
+      "icon_id": "11155543",
+      "name": "nvidia",
+      "font_class": "nvidia2",
+      "unicode": "e60d",
+      "unicode_decimal": 58893
+    },
+    {
+      "icon_id": "11425971",
+      "name": "centos",
+      "font_class": "centos",
+      "unicode": "e6cd",
+      "unicode_decimal": 59085
+    },
+    {
+      "icon_id": "15378743",
+      "name": "redhat",
+      "font_class": "redhat",
+      "unicode": "ec7b",
+      "unicode_decimal": 60539
+    },
+    {
+      "icon_id": "6808499",
+      "name": "Ubuntu",
+      "font_class": "ubuntu",
+      "unicode": "edd3",
+      "unicode_decimal": 60883
+    },
+    {
+      "icon_id": "15378275",
+      "name": "debian",
+      "font_class": "debian",
+      "unicode": "eb74",
+      "unicode_decimal": 60276
+    },
+    {
+      "icon_id": "38395859",
+      "name": "almalinux",
+      "font_class": "alma-linux",
+      "unicode": "e6a8",
+      "unicode_decimal": 59048
+    },
+    {
+      "icon_id": "43280042",
+      "name": "linux-fedora",
+      "font_class": "fedora",
+      "unicode": "e61a",
+      "unicode_decimal": 58906
+    },
+    {
+      "icon_id": "43280143",
+      "name": "linux-rocky_linux",
+      "font_class": "rocky-linux",
+      "unicode": "e620",
+      "unicode_decimal": 58912
+    },
+    {
+      "icon_id": "36227448",
+      "name": "nvidia",
+      "font_class": "nvidia1",
+      "unicode": "e980",
+      "unicode_decimal": 59776
+    },
+    {
+      "icon_id": "40723469",
+      "name": "nvidia",
+      "font_class": "nvidia",
+      "unicode": "e60c",
+      "unicode_decimal": 58892
+    },
+    {
+      "icon_id": "45463937",
+      "name": "amd",
+      "font_class": "amd",
+      "unicode": "e6a6",
+      "unicode_decimal": 59046
+    },
+    {
+      "icon_id": "24164616",
+      "name": "华为",
+      "font_class": "huawei",
+      "unicode": "e615",
+      "unicode_decimal": 58901
+    },
+    {
+      "icon_id": "45461362",
+      "name": "metax",
+      "font_class": "metax",
+      "unicode": "e6a4",
+      "unicode_decimal": 59044
+    },
+    {
+      "icon_id": "45459906",
+      "name": "ascend",
+      "font_class": "ascend",
+      "unicode": "e6a3",
+      "unicode_decimal": 59043
+    },
+    {
+      "icon_id": "8152996",
+      "name": "HUAWEI",
+      "font_class": "huaweicloud",
+      "unicode": "e614",
+      "unicode_decimal": 58900
+    },
+    {
+      "icon_id": "34290284",
+      "name": "alicloud",
+      "font_class": "alicloud",
+      "unicode": "e784",
+      "unicode_decimal": 59268
+    },
+    {
+      "icon_id": "36654764",
+      "name": "tencent",
+      "font_class": "tencentcloud",
+      "unicode": "e609",
+      "unicode_decimal": 58889
+    },
+    {
+      "icon_id": "45310241",
+      "name": "cluster2-outline",
+      "font_class": "cluster2-outline",
+      "unicode": "e6a1",
+      "unicode_decimal": 59041
+    },
+    {
+      "icon_id": "45310242",
+      "name": "cluster2-filled",
+      "font_class": "cluster2-filled",
+      "unicode": "e6a2",
+      "unicode_decimal": 59042
+    },
+    {
+      "icon_id": "45310070",
+      "name": "cluster-filled",
+      "font_class": "cluster-filled",
+      "unicode": "e69f",
+      "unicode_decimal": 59039
+    },
+    {
+      "icon_id": "45310069",
+      "name": "cluster-outline",
+      "font_class": "cluster-outline",
+      "unicode": "e6a0",
+      "unicode_decimal": 59040
+    },
     {
       "icon_id": "45240470",
       "name": "admin-user",
@@ -21,8 +315,8 @@
     },
     {
       "icon_id": "45221182",
-      "name": "quick_reference_24dp_1F1F1F_FILL0_wght300_GRAD0_op",
+      "name": "detail-info",
-      "font_class": "quick_reference_24dp_1F1F1F_FILL0_wght300_GRAD0_op",
+      "font_class": "detail-info",
       "unicode": "e69b",
       "unicode_decimal": 59035
     },

src/layouts/Exception.tsx

@@ -3,6 +3,7 @@
 import { history, useIntl, type IRoute } from '@umijs/max';
 import { Button, Result } from 'antd';
 import React from 'react';
+import { PageContainerInner } from '../pages/_components/page-box';
 
 const Exception: React.FC<{
   children: React.ReactNode;
@@ -21,20 +22,22 @@ const Exception: React.FC<{
     (props.route?.unaccessible && (props.unAccessible || props.noAccessible)) ||
     // render default exception
     ((!props.route || props.route?.unaccessible) && (
-      <Result
+      <PageContainerInner>
-        status={props.route ? '403' : '404'}
+        <Result
-        title={props.route ? '403' : '404'}
+          status={props.route ? '403' : '404'}
-        subTitle={
+          title={props.route ? '403' : '404'}
-          props.route
+          subTitle={
-            ? intl.formatMessage({ id: 'common.permission.403' })
+            props.route
-            : intl.formatMessage({ id: 'common.permission.404' })
+              ? intl.formatMessage({ id: 'common.permission.403' })
-        }
+              : intl.formatMessage({ id: 'common.permission.404' })
-        extra={
+          }
-          <Button type="primary" onClick={() => history.push('/')}>
+          extra={
-            {intl.formatMessage({ id: 'common.button.back' })}
+            <Button type="primary" onClick={() => history.push('/')}>
-          </Button>
+              {intl.formatMessage({ id: 'common.button.back' })}
-        }
+            </Button>
-      />
+          }
+        />
+      </PageContainerInner>
     )) ||
     // normal render
     props.children

src/locales/en-US/models.ts

@@ -254,5 +254,5 @@ export default {
   'models.form.generic_proxy.button': 'Generic Proxy',
   'models.accessControlModal.includeusers': 'Include Users',
   'models.table.genericProxy':
-    'Refer to the curl example below. The proxy forwards requests with the /model/proxy prefix to the corresponding model. You need to specify the model name either in the <span class="bold-text">X-GPUStack-Model</span> request header or in the "model" property of the JSON body.'
+    'Use the following path prefix, and set the model name in either the <span class="bold-text">X-GPUStack-Model</span> request header or the model field in the request body. All requests under this path prefix will be forwarded to the inference backend.'
 };

src/locales/ja-JP/models.ts

@@ -254,7 +254,7 @@ export default {
   'models.form.generic_proxy.button': 'Generic Proxy',
   'models.accessControlModal.includeusers': 'Include Users',
   'models.table.genericProxy':
-    'Refer to the curl example below. The proxy forwards requests with the /model/proxy prefix to the corresponding model. You need to specify the model name either in the <span class="bold-text">X-GPUStack-Model</span> request header or in the "model" property of the JSON body.'
+    'Use the following path prefix, and set the model name in either the <span class="bold-text">X-GPUStack-Model</span> request header or the model field in the request body. All requests under this path prefix will be forwarded to the inference backend.'
 };
 
 // ========== To-Do: Translate Keys (Remove After Translation) ==========
@@ -331,7 +331,7 @@ export default {
 // 54. 'models.form.generic_proxy.tips': 'After enabling the generic proxy, you can access URI paths that do not follow the OpenAI API standard.',
 // 55. 'models.form.generic_proxy.button': 'Generic Proxy',
 // 56. 'models.accessControlModal.includeusers': 'Include Users',
-// 57. 'models.table.genericProxy': 'Refer to the curl example below. The proxy forwards requests with the /model/proxy prefix to the corresponding model. You need to specify the model name either in the <span class="bold-text">X-GPUStack-Model</span> request header or in the "model" property of the JSON body.'
+// 57. 'models.table.genericProxy': 'Use the following path prefix, and set the model name in either the <span class="bold-text">X-GPUStack-Model</span> request header or the model field in the request body. All requests under this path prefix will be forwarded to the inference backend.'
 // 58. 'models.form.backend.vllm': 'Built-in support for NVIDIA, AMD, Ascend, Hygon, Iluvatar, and MetaX devices.',
 // 59. 'models.form.backend.voxbox': 'Only supports NVIDIA GPUs and CPUs.',
 // 60.  models.form.backend.mindie': 'Only supports Ascend NPUs.',

src/locales/ru-RU/models.ts

@@ -254,12 +254,12 @@ export default {
   'models.form.generic_proxy.button': 'Универсальный прокси',
   'models.accessControlModal.includeusers': 'Включить пользователей',
   'models.table.genericProxy':
-    'Refer to the curl example below. The proxy forwards requests with the /model/proxy prefix to the corresponding model. You need to specify the model name either in the <span class="bold-text">X-GPUStack-Model</span> request header or in the "model" property of the JSON body.'
+    'Use the following path prefix, and set the model name in either the <span class="bold-text">X-GPUStack-Model</span> request header or the model field in the request body. All requests under this path prefix will be forwarded to the inference backend.'
 };
 
 // ========== To-Do: Translate Keys (Remove After Translation) ==========
 // 1. 'models.catalog.button.explore': 'Explore More Models',
-// 2. 'models.table.genericProxy': 'Refer to the curl example below. The proxy forwards requests with the /model/proxy prefix to the corresponding model. You need to specify the model name either in the <span class="bold-text">X-GPUStack-Model</span> request header or in the "model" property of the JSON body.'，
+// 2. 'models.table.genericProxy': 'Use the following path prefix, and set the model name in either the <span class="bold-text">X-GPUStack-Model</span> request header or the model field in the request body. All requests under this path prefix will be forwarded to the inference backend.',
 // 3. 'models.form.backend.vllm': 'Built-in support for NVIDIA, AMD, Ascend, Hygon, Iluvatar, and MetaX devices.',
 // 4. 'models.form.backend.voxbox': 'Only supports NVIDIA GPUs and CPUs.',
 // 5. 'models.form.backend.mindie': 'Only supports Ascend NPUs.',

src/locales/zh-CN/models.ts

@@ -240,5 +240,5 @@ export default {
   'models.form.generic_proxy.button': '通用代理',
   'models.accessControlModal.includeusers': '显示用户',
   'models.table.genericProxy':
-    '参考下面 curl 的方式，代理会将 /model/proxy 前缀的请求转发到对应的模型，需要在 <span class="bold-text">X-GPUStack-Model</span> 请求头或 JSON 请求体 "model" 属性设置模型名称。'
+    '使用以下路径前缀，并在请求头 <span class="bold-text">X-GPUStack-Model</span> 或请求体中的 model 字段设置模型名称后访问该模型。该路径的所有子路径请求会被转发到推理后端。'
 };

src/pages/backends/config/index.ts

@@ -1,6 +1,7 @@
 import MindIELogo from '@/assets/logo/ascend.png';
 import SGLangLogo from '@/assets/logo/sglang.png';
 import vLLMLogo from '@/assets/logo/vllm.png';
+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';
@@ -22,7 +23,7 @@ export const builtInBackendLogos: Record<string, string> = {
   [backendOptionsMap.SGLang]: SGLangLogo,
   [backendOptionsMap.vllm]: vLLMLogo,
   [backendOptionsMap.ascendMindie]: MindIELogo,
-  [backendOptionsMap.voxBox]: ''
+  [backendOptionsMap.voxBox]: VoxBoxLogo
 };
 
 export const backendActions = [

src/pages/llmodels/apis/index.ts

@@ -368,7 +368,7 @@ export async function queryCatalogList(
 }
 
 export async function queryCatalogItemSpec(
-  params: { id: number },
+  params: { id: number; cluster_id: number },
   options?: any
 ) {
   return request<Global.PageResponse<CatalogSpec>>(

src/pages/llmodels/components/api-access-info.tsx

@@ -136,22 +136,6 @@ const ApiAccessInfo = ({ open, data, onClose }: ApiAccessInfoProps) => {
       maskClosable={false}
       onOk={handleClose}
       onCancel={handleClose}
-      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}
     >
       <Tips>
@@ -159,15 +143,17 @@ const ApiAccessInfo = ({ open, data, onClose }: ApiAccessInfoProps) => {
           <dt>
             <BulbOutlined />
           </dt>
-          <dd>
+          <dd
-            {data.generic_proxy
+            dangerouslySetInnerHTML={{
-              ? intl.formatMessage({
+              __html: data.generic_proxy
-                  id: 'models.table.genericProxy'
+                ? intl.formatMessage({
-                })
+                    id: 'models.table.genericProxy'
-              : intl.formatMessage({
+                  })
-                  id: 'models.table.button.apiAccessInfo.tips'
+                : intl.formatMessage({
-                })}
+                    id: 'models.table.button.apiAccessInfo.tips'
-          </dd>
+                  })
+            }}
+          ></dd>
         </dl>
       </Tips>
       <ApiAccessInfoWrapper>
@@ -175,7 +161,7 @@ const ApiAccessInfo = ({ open, data, onClose }: ApiAccessInfoProps) => {
           {intl.formatMessage({ id: 'models.table.apiAccessInfo.endpoint' })}
         </span>
         <span className="value">
-          <AutoTooltip ghost maxWidth={180}>
+          <AutoTooltip ghost maxWidth={data.generic_proxy ? 300 : 180}>
             {endPoint}
           </AutoTooltip>
           {!data.generic_proxy && (

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

@@ -179,21 +179,22 @@ const AddModal: React.FC<AddModalProps> = (props) => {
     handleCheckFormData();
   };
 
-  const initClusterId = () => {
+  const initClusterId = (): number => {
-    const cluster_id =
+    const cluster_id = clusterList?.find(
-      clusterList?.find((item) => item.state === ClusterStatusValueMap.Ready)
+      (item) => item.state === ClusterStatusValueMap.Ready
-        ?.value || '';
+    )?.value;
 
-    return cluster_id;
+    return cluster_id as number;
   };
 
-  const fetchSpecData = async () => {
+  const fetchSpecData = async (clusterId: number) => {
     try {
       axiosToken.current?.cancel?.();
       axiosToken.current = createAxiosToken();
       const res: any = await queryCatalogItemSpec(
         {
-          id: current.id
+          id: current.id,
+          cluster_id: clusterId
         },
         {
           token: axiosToken.current.token
@@ -224,24 +225,18 @@ const AddModal: React.FC<AddModalProps> = (props) => {
 
       const list = _.sortBy(res.items, 'size');
 
-      hasF16Ref.current = _.some(res.items, (item: CatalogSpec) => {
-        return AscendNPUQuant_F16.includes(_.toUpper(item.quantization));
-      });
-
       const defaultSpec = _.find(
         list,
         (item: CatalogSpec) => item.mode === modeDataList[0]?.value
       );
 
-      console.log('default spec:', defaultSpec);
-
       selectSpecRef.current = defaultSpec;
 
       setModeList(modeDataList);
       setSourceList(sources);
       initFormDataBySource({
         ...defaultSpec,
-        cluster_id: initClusterId()
+        cluster_id: clusterId
       });
 
       const name = _.toLower(current.name).replace(/\s/g, '-') || '';
@@ -255,7 +250,7 @@ const AddModal: React.FC<AddModalProps> = (props) => {
       const allValues = generateSubmitData({
         ...defaultSpec,
         categories: _.get(current, 'categories.0', null),
-        cluster_id: initClusterId(),
+        cluster_id: clusterId,
         name
       });
       handleCheckCompatibility(allValues);
@@ -280,6 +275,10 @@ const AddModal: React.FC<AddModalProps> = (props) => {
     handleCheckFormData();
   };
 
+  const handleOnClusterChange = async (clusterId: number) => {
+    await fetchSpecData(clusterId);
+  };
+
   const handleOk = async (values: FormData) => {
     const data = {
       ..._.omit(selectSpecRef.current, ['name']),
@@ -297,15 +296,20 @@ const AddModal: React.FC<AddModalProps> = (props) => {
     return warningStatus.show && warningStatus.type !== 'success';
   }, [warningStatus.show, warningStatus.type]);
 
+  useEffect(() => {
+    getClusterList();
+  }, []);
+
   useEffect(() => {
     if (open) {
       setTimeout(() => {
-        fetchSpecData();
+        const clusterId = initClusterId();
+        fetchSpecData(clusterId);
         form.current?.getGPUOptionList?.({
-          clusterId: initClusterId()
+          clusterId: clusterId
         });
         form.current?.getBackendOptions?.({
-          cluster_id: initClusterId()
+          cluster_id: clusterId
         });
       }, 100);
     }
@@ -320,10 +324,6 @@ const AddModal: React.FC<AddModalProps> = (props) => {
     };
   }, [open, current]);
 
-  useEffect(() => {
-    getClusterList();
-  }, []);
-
   return (
     <GSDrawer
       title={title}
@@ -415,6 +415,7 @@ const AddModal: React.FC<AddModalProps> = (props) => {
                 sourceDisable={false}
                 sourceList={sourceList}
                 clusterList={clusterList}
+                onClusterChange={handleOnClusterChange}
                 onBackendChange={handleBackendChange}
                 onSourceChange={handleSourceChange}
                 onValuesChange={onValuesChange}

src/pages/llmodels/components/model-tag.tsx

@@ -15,7 +15,7 @@ export const categoryConfig = {
   },
   [modelCategoriesMap.embedding]: {
     icon: <IconFont type="icon-cube" />,
-    color: 'purple',
+    color: 'magenta',
     label: 'Embedding'
   },
   [modelCategoriesMap.text_to_speech]: {

src/pages/llmodels/forms/index.tsx

@@ -69,12 +69,13 @@ interface DataFormProps {
   sourceDisable?: boolean;
   sourceList?: Global.BaseOption<string>[];
   clusterList: Global.BaseOption<number>[];
-  fields?: string[];
+  fields?: string[]; // control some fields to show in the form
   clearCacheFormValues?: () => void;
   onValuesChange?: (changedValues: any, allValues: any) => void;
   onSourceChange?: (value: string) => void;
   onOk: (values: FormData) => void;
   onBackendChange?: (value: string) => void;
+  onClusterChange?: (value: number) => void;
 }
 
 const TABKeysMap = {
@@ -99,6 +100,7 @@ const DataForm: React.FC<DataFormProps> = forwardRef((props, ref) => {
     onBackendChange,
     onSourceChange,
     onValuesChange,
+    onClusterChange,
     onOk
   } = props;
   const {
@@ -259,6 +261,7 @@ const DataForm: React.FC<DataFormProps> = forwardRef((props, ref) => {
   };
 
   const handleClusterChange = async (value: number) => {
+    await onClusterChange?.(value);
     getGPUOptionList({ clusterId: value });
     getBackendOptions({ cluster_id: value });
     if (scheduleType === ScheduleValueMap.Manual) {