From 0f7a475ec91c630adfe07344e3382a324eeba26d Mon Sep 17 00:00:00 2001
From: jialin <jialinkuang@126.com>
Date: Sun, 4 Jan 2026 16:34:34 +0800
Subject: [PATCH] feat: add context length

---
 package.json                                  |  2 ++
 pnpm-lock.yaml                                | 12 +++++---
 src/components/seal-form/seal-slider.tsx      |  6 ++--
 src/components/seal-form/simple-select.tsx    |  2 +-
 src/components/seal-form/wrapper/index.tsx    |  7 ++++-
 src/components/seal-form/wrapper/slider.ts    |  5 +++-
 src/config/theme/dark.ts                      |  7 ++---
 src/config/theme/light.ts                     |  7 ++---
 src/locales/en-US/models.ts                   |  3 +-
 src/locales/ja-JP/models.ts                   |  6 ++--
 src/locales/ru-RU/models.ts                   |  8 ++---
 src/locales/zh-CN/models.ts                   |  3 +-
 .../backends/components/backend-card.tsx      | 21 +++++++++++--
 src/pages/llmodels/apis/index.ts              | 17 +++++++++++
 .../llmodels/components/deploy-modal.tsx      |  2 --
 .../components/incompatiable-info.tsx         |  2 +-
 .../llmodels/components/instance-item.tsx     |  2 +-
 src/pages/llmodels/config/form-context.ts     |  1 +
 src/pages/llmodels/config/index.ts            |  3 +-
 src/pages/llmodels/forms/advance-config.tsx   | 27 +++++++++++++----
 src/pages/llmodels/forms/index.tsx            | 30 ++++++++++++++++++-
 .../llmodels/hooks/use-models-columns.tsx     |  2 +-
 .../services/use-query-context-length.ts      | 29 ++++++++++++++++++
 23 files changed, 164 insertions(+), 40 deletions(-)
 create mode 100644 src/pages/llmodels/services/use-query-context-length.ts

diff --git a/package.json b/package.json
index 853215e0..e4e4538a 100644
--- a/package.json
+++ b/package.json
@@ -78,6 +78,7 @@
     "remark-breaks": "^4.0.0",
     "remark-gfm": "^4.0.1",
     "remark-math": "^6.0.0",
+    "semver": "^7.7.3",
     "simplebar-react": "^3.2.6",
     "styled-components": "^6.1.15",
     "tinycolor2": "^1.6.0",
@@ -88,6 +89,7 @@
   "devDependencies": {
     "@types/react": "^18.3.1",
     "@types/react-dom": "^18.3.0",
+    "@types/semver": "^7.7.1",
     "@umijs/case-sensitive-paths-webpack-plugin": "^1.0.1",
     "@umijs/plugins": "^4.4.11",
     "babel-plugin-named-asset-import": "^0.3.8",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 2eec9ffa..843c4d90 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -195,6 +195,9 @@ dependencies:
   remark-math:
     specifier: ^6.0.0
     version: 6.0.0
+  semver:
+    specifier: ^7.7.3
+    version: 7.7.3
   simplebar-react:
     specifier: ^3.2.6
     version: 3.3.2(react@18.3.1)
@@ -221,6 +224,9 @@ devDependencies:
   '@types/react-dom':
     specifier: ^18.3.0
     version: 18.3.7(@types/react@18.3.27)
+  '@types/semver':
+    specifier: ^7.7.1
+    version: 7.7.1
   '@umijs/case-sensitive-paths-webpack-plugin':
     specifier: ^1.0.1
     version: 1.0.1
@@ -4110,7 +4116,7 @@ packages:
     resolution: {integrity: sha512-hy8b7Y1J8OGe6LbAjj3xniQrj3v6lsivCcrmf4TzSgPzLkhIeKgc5IZnT7ReIqmEuodjfO8EYAuoFvIrHi/+jQ==, tarball: https://registry.npmjs.org/@types/history/-/history-5.0.0.tgz}
     deprecated: This is a stub types definition. history provides its own type definitions, so you do not need this installed.
     dependencies:
-      history: 4.10.1
+      history: 5.3.0
 
   /@types/hoist-non-react-statics@3.3.7(@types/react@18.3.27):
     resolution: {integrity: sha512-PQTyIulDkIDro8P+IHbKCsw7U2xxBYflVzW/FgWdCAePD9xGSidgA76/GeJ6lBKoblyhf9pBY763gbrN+1dI8g==, tarball: https://registry.npmjs.org/@types/hoist-non-react-statics/-/hoist-non-react-statics-3.3.7.tgz}
@@ -4234,7 +4240,7 @@ packages:
       '@types/history': 4.7.11
       '@types/react': 18.3.27
       '@types/react-router': 5.1.20
-      redux: 3.7.2
+      redux: 4.2.1
 
   /@types/react-router@5.1.20:
     resolution: {integrity: sha512-jGjmu/ZqS7FjSH6owMcD5qpq19+1RS9DeVRqfl1FeBMxTDQAGwlMWOcs52NDoXaNKyG3d1cYQFMs9rCrb88o9Q==, tarball: https://registry.npmjs.org/@types/react-router/-/react-router-5.1.20.tgz}
@@ -4254,7 +4260,6 @@ packages:
 
   /@types/semver@7.7.1:
     resolution: {integrity: sha512-FmgJfu+MOcQ370SD0ev7EI8TlCAfKYU+B4m5T3yXc1CiRN94g/SZPtsCkk506aUDtlMnFZvasDwHHUcZUEaYuA==, tarball: https://registry.npmjs.org/@types/semver/-/semver-7.7.1.tgz}
-    dev: false
 
   /@types/stylis@4.2.5:
     resolution: {integrity: sha512-1Xve+NMN7FWjY14vLoY5tL3BVEQ/n42YLwaqJIPYhotZ9uBHt87VceMwWQpzmdEt2TNXIorIFG+YeCUUW7RInw==, tarball: https://registry.npmjs.org/@types/stylis/-/stylis-4.2.5.tgz}
@@ -9400,7 +9405,6 @@ packages:
     resolution: {integrity: sha512-ZqaKwjjrAYUYfLG+htGaIIZ4nioX2L70ZUMIFysS3xvBsSG4x/n1V6TXV3N8ZYNuFGlDirFg32T7B6WOUPDYcQ==, tarball: https://registry.npmjs.org/history/-/history-5.3.0.tgz}
     dependencies:
       '@babel/runtime': 7.28.4
-    dev: false
 
   /hmac-drbg@1.0.1:
     resolution: {integrity: sha512-Tti3gMqLdZfhOQY1Mzf/AanLiqh1WTiJgEj26ZuYQ9fbkLomzGchCws4FyrSd4VkpBfiNhaE1On+lOz894jvXg==, tarball: https://registry.npmjs.org/hmac-drbg/-/hmac-drbg-1.0.1.tgz}
diff --git a/src/components/seal-form/seal-slider.tsx b/src/components/seal-form/seal-slider.tsx
index c605e6b0..99161f8c 100644
--- a/src/components/seal-form/seal-slider.tsx
+++ b/src/components/seal-form/seal-slider.tsx
@@ -48,7 +48,7 @@ const SealSlider: React.FC<SealSliderProps> = (props) => {
     props.onChange?.(newValue);
   };
 
-  const renderLabel = React.useMemo(() => {
+  const renderLabel = () => {
     return (
       <span
         className="slider-label"
@@ -70,13 +70,13 @@ const SealSlider: React.FC<SealSliderProps> = (props) => {
         )}
       </span>
     );
-  }, [label, labelWidth, description, value, max, min, step, defaultValue]);
+  };
   return (
     <SliderWrapper className="slider-wrapper">
       <Wrapper
         required={required}
         status={checkStatus || status}
-        label={renderLabel}
+        label={renderLabel()}
         isFocus={true}
         variant="borderless"
       >
diff --git a/src/components/seal-form/simple-select.tsx b/src/components/seal-form/simple-select.tsx
index 55425b5f..5c9e73f4 100644
--- a/src/components/seal-form/simple-select.tsx
+++ b/src/components/seal-form/simple-select.tsx
@@ -175,7 +175,7 @@ const SimpleSelect: React.FC<SelectProps & { ref?: any; showTags?: boolean }> =
 
       return (
         <TagWrapper
-          bordered={false}
+          variant="filled"
           closable={props.closable}
           onClose={props.onClose}
           style={{
diff --git a/src/components/seal-form/wrapper/index.tsx b/src/components/seal-form/wrapper/index.tsx
index d3f3dae9..13604265 100644
--- a/src/components/seal-form/wrapper/index.tsx
+++ b/src/components/seal-form/wrapper/index.tsx
@@ -231,7 +231,12 @@ const Wrapper: FC<WrapperProps> = ({
         onClick={onClick}
       >
         {label && (
-          <Label $isFocus={isFocus} $hasPrefix={hasPrefix} onClick={onClick}>
+          <Label
+            $isFocus={isFocus}
+            $hasPrefix={hasPrefix}
+            onClick={onClick}
+            className="label-wrapper"
+          >
             <LabelInfo
               label={label}
               required={required}
diff --git a/src/components/seal-form/wrapper/slider.ts b/src/components/seal-form/wrapper/slider.ts
index 1a3a8a8e..6d97ff63 100644
--- a/src/components/seal-form/wrapper/slider.ts
+++ b/src/components/seal-form/wrapper/slider.ts
@@ -6,6 +6,9 @@ const SliderWrapper = styled.div`
     height: 100%;
     justify-content: center;
   }
+  .label-wrapper {
+    width: 100%;
+  }
 
   .borderless {
     background-color: transparent;
@@ -38,7 +41,7 @@ const SliderWrapper = styled.div`
     .label-val {
       position: absolute !important;
       top: -14px;
-      right: -10px;
+      right: 0px;
       width: 80px;
       border-radius: var(--border-radius-base);
       text-align: center;
diff --git a/src/config/theme/dark.ts b/src/config/theme/dark.ts
index 7c7137b4..febcecb6 100644
--- a/src/config/theme/dark.ts
+++ b/src/config/theme/dark.ts
@@ -2,7 +2,6 @@ import { COLOR_PRIMARY } from './index';
 
 export default {
   'root-entry-name': 'variable',
-  // cssVar: true,
   hashed: false,
   components: {
     Input: {
@@ -72,9 +71,9 @@ export default {
       optionSelectedFontWeight: 400
     },
     Slider: {
-      handleSize: 10,
-      handleSizeHover: 10,
-      railSize: 5,
+      handleSize: 8,
+      handleSizeHover: 8,
+      railSize: 4,
       handleActiveOutlineColor: '#646464', // disable default outline
       handleActiveColor: '#656565', // same as the rail color
       handleColor: '#474747', // same as the rail color
diff --git a/src/config/theme/light.ts b/src/config/theme/light.ts
index 66773c2f..45b21e83 100644
--- a/src/config/theme/light.ts
+++ b/src/config/theme/light.ts
@@ -2,7 +2,6 @@ import { COLOR_PRIMARY } from './index';
 
 export default {
   'root-entry-name': 'variable',
-  // cssVar: true,
   hashed: false,
   components: {
     Input: {
@@ -70,9 +69,9 @@ export default {
       optionSelectedFontWeight: 400
     },
     Slider: {
-      handleSize: 10,
-      handleSizeHover: 10,
-      railSize: 5,
+      handleSize: 8,
+      handleSizeHover: 8,
+      railSize: 4,
       handleActiveOutlineColor: '#B4B4B4', // disable default outline
       handleActiveColor: '#D0D0D0', // same as the rail color
       handleColor: '#D0D0D0', // same as the rail color
diff --git a/src/locales/en-US/models.ts b/src/locales/en-US/models.ts
index ccedb2ea..f8bbee08 100644
--- a/src/locales/en-US/models.ts
+++ b/src/locales/en-US/models.ts
@@ -272,5 +272,6 @@ export default {
   'models.catalog.nogpus.tips':
     'No compatible GPUs are available in the selected cluster for this model.',
   'models.form.modelfile.notfound': `The model file path you specified does not exist on the GPUStack server. It's recommended to place the model file at the same path on both the GPUStack server and GPUStack workers. This helps GPUStack make better decisions.`,
-  'models.form.readyWorkers': 'workers ready'
+  'models.form.readyWorkers': 'workers ready',
+  'models.form.maxContextLength': 'Maximum Context Length'
 };
diff --git a/src/locales/ja-JP/models.ts b/src/locales/ja-JP/models.ts
index fb6be85c..52146c7c 100644
--- a/src/locales/ja-JP/models.ts
+++ b/src/locales/ja-JP/models.ts
@@ -272,7 +272,8 @@ export default {
   'models.catalog.nogpus.tips':
     'No compatible GPUs are available in the selected cluster for this model.',
   'models.form.modelfile.notfound': `The model file path you specified does not exist on the GPUStack server. It's recommended to place the model file at the same path on both the GPUStack server and GPUStack workers. This helps GPUStack make better decisions.`,
-  'models.form.readyWorkers': 'workers ready'
+  'models.form.readyWorkers': 'workers ready',
+  'models.form.maxContextLength': 'Maximum Context Length'
 };
 
 // ========== To-Do: Translate Keys (Remove After Translation) ==========
@@ -367,5 +368,6 @@ export default {
 // 72. 'models.form.backendVersions.tips': `To use more versions, go to the {link} page and edit the backend to add versions.`,
 // 73. 'models.catalog.nogpus.tips': 'No compatible GPUs are available in the selected cluster for this model.',
 // 74. 'models.form.modelfile.notfound': `The model file path you specified does not exist on the GPUStack server. It's recommended to place the model file at the same path on both the GPUStack server and GPUStack workers. This helps GPUStack make better decisions.`,
-// 75. 'models.form.readyWorkers': 'workers ready'
+// 75. 'models.form.readyWorkers': 'workers ready',
+// 76. 'models.form.maxContextLength': 'Maximum Context Length'
 // ========== End of To-Do List ==========
diff --git a/src/locales/ru-RU/models.ts b/src/locales/ru-RU/models.ts
index 3187ccbb..0f4804f1 100644
--- a/src/locales/ru-RU/models.ts
+++ b/src/locales/ru-RU/models.ts
@@ -267,8 +267,7 @@ export default {
   'models.table.genericProxy':
     'Используйте следующий префикс пути и укажите имя модели либо в заголовке запроса <span class="bold-text">X-GPUStack-Model</span>, либо в поле model в теле запроса. Все запросы с этим префиксом пути будут перенаправлены в бэкенд вывода.',
   'models.form.backendVersion.deprecated': 'Устаревший',
-  'models.accessSettings.public.desc':
-    'Доступно всем без аутентификации.',
+  'models.accessSettings.public.desc': 'Доступно всем без аутентификации.',
   'models.accessSettings.authed.tips':
     'Доступно всем аутентифицированным пользователям платформы.',
   'models.accessSettings.allowedUsers.tips':
@@ -277,9 +276,10 @@ export default {
   'models.catalog.nogpus.tips':
     'В выбранном кластере нет доступных GPU, совместимых с этой моделью.',
   'models.form.modelfile.notfound': `Указанный путь к файлу модели не существует на сервере GPUStack. Рекомендуется размещать файл модели по одному и тому же пути как на сервере GPUStack, так и на воркерах GPUStack. Это поможет системе принимать лучшие решения по распределению ресурсов.`,
-  'models.form.readyWorkers': 'воркеров готово'
+  'models.form.readyWorkers': 'воркеров готово',
+  'models.form.maxContextLength': 'Maximum Context Length'
 };
 
 // ========== To-Do: Translate Keys (Remove After Translation) ==========
-
+// 1. 'models.form.maxContextLength': 'Maximum Context Length'
 // ========== End of To-Do List ==========
diff --git a/src/locales/zh-CN/models.ts b/src/locales/zh-CN/models.ts
index 6f3e2950..8d992a7b 100644
--- a/src/locales/zh-CN/models.ts
+++ b/src/locales/zh-CN/models.ts
@@ -256,5 +256,6 @@ export default {
   'models.catalog.nogpus.tips': '所选集群中没有兼容该模型的 GPU。',
   'models.form.modelfile.notfound':
     '你指定的模型文件路径在 GPUStack 服务器上不存在。建议在 GPUStack 服务器和 GPUStack 节点上使用相同的模型文件路径，这有助于 GPUStack 做出更优的调度与决策。',
-  'models.form.readyWorkers': '节点就绪'
+  'models.form.readyWorkers': '节点就绪',
+  'models.form.maxContextLength': '最大上下文长度'
 };
diff --git a/src/pages/backends/components/backend-card.tsx b/src/pages/backends/components/backend-card.tsx
index 39ce2bca..ed5e7271 100644
--- a/src/pages/backends/components/backend-card.tsx
+++ b/src/pages/backends/components/backend-card.tsx
@@ -8,6 +8,8 @@ import { useIntl } from '@umijs/max';
 import { Button, Tag } from 'antd';
 import _ from 'lodash';
 import { useMemo } from 'react';
+import semverCoerce from 'semver/functions/coerce';
+import semverGt from 'semver/functions/gt';
 import styled from 'styled-components';
 import {
   backendActions,
@@ -140,7 +142,7 @@ const BackendCard: React.FC<BackendCardProps> = ({ data, onSelect }) => {
     const icon = customIcons[data.id % customIcons.length];
 
     return (
-      <TagInner color={color} bordered={false}>
+      <TagInner color={color} variant="filled">
         {icon}
       </TagInner>
     );
@@ -157,13 +159,28 @@ const BackendCard: React.FC<BackendCardProps> = ({ data, onSelect }) => {
     e.stopPropagation();
   };
 
+  const sortVersions = (v2: string, v1: string) => {
+    const sv1 = semverCoerce(v1);
+    const sv2 = semverCoerce(v2);
+
+    if (!sv1 && !sv2) return 0;
+    if (!sv1) return 1;
+    if (!sv2) return -1;
+
+    if (semverGt(sv1, sv2)) return -1;
+    return 1;
+  };
+
   const renderTag = (item: any) => {
     return (
       <AutoTooltip
         ghost
         minWidth={20}
         showTitle
-        title={_.join(data.framework_index_map?.[item], ', ') || false}
+        title={
+          _.join(data.framework_index_map?.[item].sort(sortVersions), ', ') ||
+          false
+        }
       >
         <ThemeTag
           key={item}
diff --git a/src/pages/llmodels/apis/index.ts b/src/pages/llmodels/apis/index.ts
index 68802287..e3a1866e 100644
--- a/src/pages/llmodels/apis/index.ts
+++ b/src/pages/llmodels/apis/index.ts
@@ -454,3 +454,20 @@ export async function queryDraftModelList(params?: Global.SearchParams) {
     params
   });
 }
+
+export async function queryModelContextLength(params: {
+  model: {
+    source: string;
+    model_scope_model_id?: string;
+    huggingface_repo_id?: string;
+    local_path?: string;
+  };
+}) {
+  return request<{ native: number; scaled: number }>(
+    `${MODELS_API}/context-length`,
+    {
+      method: 'POST',
+      data: params
+    }
+  );
+}
diff --git a/src/pages/llmodels/components/deploy-modal.tsx b/src/pages/llmodels/components/deploy-modal.tsx
index 6f8db0df..1238bd11 100644
--- a/src/pages/llmodels/components/deploy-modal.tsx
+++ b/src/pages/llmodels/components/deploy-modal.tsx
@@ -575,7 +575,6 @@ const AddModal: FC<AddModalProps> = (props) => {
                     modelSource={props.source}
                     setIsGGUF={handleSetIsGGUF}
                   ></ModelCard>
-
                   {isGGUF && (
                     <HFModelFile
                       ref={modelFileRef}
@@ -590,7 +589,6 @@ const AddModal: FC<AddModalProps> = (props) => {
               </ColWrapper>
             </>
           )}
-
         <FormWrapper>
           <ColumnWrapper
             styles={{
diff --git a/src/pages/llmodels/components/incompatiable-info.tsx b/src/pages/llmodels/components/incompatiable-info.tsx
index f90f86ab..d7d666b0 100644
--- a/src/pages/llmodels/components/incompatiable-info.tsx
+++ b/src/pages/llmodels/components/incompatiable-info.tsx
@@ -82,7 +82,7 @@ const IncompatiableInfo: React.FC<IncompatiableInfoProps> = (props) => {
 
   if (isEvaluating) {
     return (
-      <CompatibleTag color="blue" bordered={false}>
+      <CompatibleTag color="blue" variant="filled">
         <Tooltip title={intl.formatMessage({ id: 'models.form.evaluating' })}>
           <LoadingOutlined />
         </Tooltip>
diff --git a/src/pages/llmodels/components/instance-item.tsx b/src/pages/llmodels/components/instance-item.tsx
index 573f4b27..e82c3d24 100644
--- a/src/pages/llmodels/components/instance-item.tsx
+++ b/src/pages/llmodels/components/instance-item.tsx
@@ -695,7 +695,7 @@ const InstanceItem: React.FC<InstanceItemProps> = ({
             </Col>
             <Col span={4}>
               <span
-                style={{ paddingLeft: '50px', gap: 4 }}
+                style={{ paddingLeft: '40px', gap: 4 }}
                 className="flex-center"
               >
                 <InstanceStatusTag
diff --git a/src/pages/llmodels/config/form-context.ts b/src/pages/llmodels/config/form-context.ts
index e2dacdd2..e4eae078 100644
--- a/src/pages/llmodels/config/form-context.ts
+++ b/src/pages/llmodels/config/form-context.ts
@@ -22,6 +22,7 @@ interface FormContextProps {
   workerLabelOptions: CascaderOption[];
   backendOptions: BackendOption[];
   initialValues?: FormData; // for editing model
+  modelContextData?: Record<string, any>;
   clearCacheFormValues?: () => void;
   onValuesChange?: (changedValues: any, allValues: any) => void;
   onBackendChange: (backend: string, option: any) => void;
diff --git a/src/pages/llmodels/config/index.ts b/src/pages/llmodels/config/index.ts
index 09ed31b1..72262e47 100644
--- a/src/pages/llmodels/config/index.ts
+++ b/src/pages/llmodels/config/index.ts
@@ -358,7 +358,8 @@ export const DO_NOT_TRIGGER_CHECK_COMPATIBILITY = [
   'extended_kv_cache.enabled',
   'extended_kv_cache.ram_size',
   'speculative_config.enabled',
-  'speculative_config.draft_model'
+  'speculative_config.draft_model',
+  'max_context_len'
 ];
 
 // ignore to compare old and new data when these fields change in updating model
diff --git a/src/pages/llmodels/forms/advance-config.tsx b/src/pages/llmodels/forms/advance-config.tsx
index 4d8b3f7d..89283f62 100644
--- a/src/pages/llmodels/forms/advance-config.tsx
+++ b/src/pages/llmodels/forms/advance-config.tsx
@@ -17,7 +17,8 @@ const AdvanceConfig = () => {
   const form = Form.useFormInstance();
   const EnviromentVars = Form.useWatch('env', form);
   const backend = Form.useWatch('backend', form);
-  const { onValuesChange, backendOptions, formKey } = useFormContext();
+  const { onValuesChange, backendOptions, isGGUF, modelContextData } =
+    useFormContext();
 
   const currentBackendOptions = useMemo(() => {
     return backendOptions?.find((item) => item.value === backend);
@@ -46,6 +47,10 @@ const AdvanceConfig = () => {
     onValuesChange?.({}, form.getFieldsValue());
   };
 
+  const handleContextLengthChange = _.debounce((value: number) => {
+    onValuesChange?.({}, form.getFieldsValue());
+  }, 300);
+
   return (
     <>
       <Form.Item<FormData>
@@ -63,10 +68,22 @@ const AdvanceConfig = () => {
           options={modelCategories}
         ></SealSelect>
       </Form.Item>
-      <Form.Item<FormData> name="max_context_len">
-        <SealSlider label="Max Context Length" inputnumber></SealSlider>
-      </Form.Item>
-
+      {!isGGUF && modelContextData?.native && (
+        <Form.Item<FormData> name="max_context_len">
+          <SealSlider
+            label={intl.formatMessage({ id: 'models.form.maxContextLength' })}
+            inputnumber={true}
+            onChange={handleContextLengthChange}
+            included={true}
+            max={modelContextData?.scaled || 163840}
+            tooltip={{}}
+            marks={{
+              [modelContextData?.native]: 'native',
+              [modelContextData?.scaled]: 'scaled'
+            }}
+          ></SealSlider>
+        </Form.Item>
+      )}
       <BackendParametersList></BackendParametersList>
       <Form.Item<FormData> name="env">
         <LabelSelector
diff --git a/src/pages/llmodels/forms/index.tsx b/src/pages/llmodels/forms/index.tsx
index b3b8e429..8f9cd1f0 100644
--- a/src/pages/llmodels/forms/index.tsx
+++ b/src/pages/llmodels/forms/index.tsx
@@ -8,7 +8,12 @@ import { useIntl } from '@umijs/max';
 import useMemoizedFn from 'ahooks/lib/useMemoizedFn';
 import { Form } from 'antd';
 import _ from 'lodash';
-import React, { forwardRef, useImperativeHandle, useMemo } from 'react';
+import React, {
+  forwardRef,
+  useEffect,
+  useImperativeHandle,
+  useMemo
+} from 'react';
 import styled from 'styled-components';
 import {
   DeployFormKeyMap,
@@ -29,6 +34,7 @@ import { generateGPUIds } from '../config/utils';
 import useFieldScroll from '../hooks/use-field-scroll';
 import { useGenerateGPUOptions } from '../hooks/use-form-initial-values';
 import useQueryBackends from '../hooks/use-query-backends';
+import { useQueryContextLength } from '../services/use-query-context-length';
 import AdvanceConfig from './advance-config';
 import BasicForm from './basic';
 import Performance from './performance';
@@ -103,6 +109,10 @@ const DataForm: React.FC<DataFormProps> = forwardRef((props, ref) => {
   const intl = useIntl();
   const [activeKey, setActiveKey] = React.useState<string[]>([]);
   const [target, setTarget] = React.useState<string>(TABKeysMap.BASIC);
+  const { modelContextData, fetchContextLength } = useQueryContextLength();
+  const localPath = Form.useWatch('local_path', form);
+  const modelScopeModelId = Form.useWatch('model_scope_model_id', form);
+  const huggingfaceRepoId = Form.useWatch('huggingface_repo_id', form);
 
   const segmentOptions = [
     {
@@ -390,6 +400,23 @@ const DataForm: React.FC<DataFormProps> = forwardRef((props, ref) => {
     };
   });
 
+  useEffect(() => {
+    if (isGGUF || (!localPath && !modelScopeModelId && !huggingfaceRepoId)) {
+      return;
+    }
+    let params = {};
+    if (source === modelSourceMap.local_path_value) {
+      params = { local_path: localPath };
+    } else if (source === modelSourceMap.modelscope_value) {
+      params = { model_scope_model_id: modelScopeModelId };
+    } else if (source === modelSourceMap.huggingface_value) {
+      params = { huggingface_repo_id: huggingfaceRepoId };
+    }
+
+    // TODO
+    // fetchContextLength({ ...params, source });
+  }, [isGGUF, source, localPath, modelScopeModelId, huggingfaceRepoId]);
+
   return (
     <FormContext.Provider
       value={{
@@ -401,6 +428,7 @@ const DataForm: React.FC<DataFormProps> = forwardRef((props, ref) => {
         backendOptions: backendOptions,
         workerLabelOptions: workerLabelOptions,
         initialValues: initialValues,
+        modelContextData: modelContextData,
         clearCacheFormValues: clearCacheFormValues,
         onValuesChange: onValuesChange,
         onBackendChange: handleBackendChange
diff --git a/src/pages/llmodels/hooks/use-models-columns.tsx b/src/pages/llmodels/hooks/use-models-columns.tsx
index ee97aa39..d5e74d3a 100644
--- a/src/pages/llmodels/hooks/use-models-columns.tsx
+++ b/src/pages/llmodels/hooks/use-models-columns.tsx
@@ -115,7 +115,7 @@ const useModelsColumns = ({
           title: intl.formatMessage({ id: 'models.table.replicas.edit' })
         },
         render: (text: number, record: ListItem) => (
-          <span style={{ paddingLeft: 10, minWidth: '33px' }}>
+          <span style={{ minWidth: '23px' }}>
             {record.ready_replicas} / {record.replicas}
           </span>
         )
diff --git a/src/pages/llmodels/services/use-query-context-length.ts b/src/pages/llmodels/services/use-query-context-length.ts
new file mode 100644
index 00000000..9487f417
--- /dev/null
+++ b/src/pages/llmodels/services/use-query-context-length.ts
@@ -0,0 +1,29 @@
+import { useState } from 'react';
+import { queryModelContextLength } from '../apis';
+
+export const useQueryContextLength = () => {
+  const [modelContextData, setModelContextData] = useState<{
+    native: number;
+    scaled: number;
+  }>({} as any);
+  const fetchContextLength = async (params: {
+    source: string;
+    model_scope_model_id?: string;
+    huggingface_repo_id?: string;
+    local_path?: string;
+  }) => {
+    try {
+      const res = await queryModelContextLength({
+        model: params
+      });
+      setModelContextData(res);
+    } catch (error) {
+      setModelContextData({} as any);
+    }
+  };
+
+  return {
+    modelContextData,
+    fetchContextLength
+  };
+};