feat: add context length

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

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