fix: add a button to last page on logs

config/theme.ts

@@ -29,7 +29,7 @@ export default {
       contentPadding: '12px 16px'
     },
     Tooltip: {
-      colorBgSpotlight: 'rgba(110,110,110,1)'
+      colorBgSpotlight: '#3e3e3e'
       // sizePopupArrow: 0
     },
     Slider: {

src/components/auto-image/single-image.tsx

@@ -1,5 +1,5 @@
 import { CloseCircleOutlined } from '@ant-design/icons';
-import { Progress } from 'antd';
+import { Progress, ProgressProps } from 'antd';
 import classNames from 'classnames';
 import ResizeObserver from 'rc-resize-observer';
 import React, { useCallback } from 'react';
@@ -21,6 +21,7 @@ interface SingleImageProps {
   autoBgColor?: boolean;
   editable?: boolean;
   style?: React.CSSProperties;
+  loadingSize?: ProgressProps['size'];
   progressType?: 'line' | 'circle' | 'dashboard';
   progressColor?: string;
   progressWidth?: number;
@@ -42,10 +43,8 @@ const SingleImage: React.FC<SingleImageProps> = (props) => {
     dataUrl,
     style,
     autoBgColor,
-    progressColor = 'var(--ant-color-primary)',
-    progressWidth = 2,
     preview = true,
-    progressType = 'dashboard'
+    loadingSize = 'default'
   } = props;
 
   const imgWrapper = React.useRef<HTMLSpanElement>(null);
@@ -137,6 +136,7 @@ const SingleImage: React.FC<SingleImageProps> = (props) => {
                 <Progress
                   percent={progress}
                   type="dashboard"
+                  size={loadingSize}
                   steps={{ count: 50, gap: 2 }}
                   format={() => (
                     <span className="font-size-20">{progress}%</span>

src/components/image-editor/index.tsx

@@ -34,6 +34,9 @@ const CanvasImageEditor: React.FC<CanvasImageEditorProps> = ({
   onSave,
   uploadButton
 }) => {
+  const MIN_SCALE = 0.4;
+  const MAX_SCALE = 10;
+  const zoomFactor = 1.1;
   const intl = useIntl();
   const canvasRef = useRef<HTMLCanvasElement>(null);
   const overlayCanvasRef = useRef<HTMLCanvasElement>(null);
@@ -47,25 +50,20 @@ const CanvasImageEditor: React.FC<CanvasImageEditorProps> = ({
   const autoScale = useRef<number>(1);
   const cursorRef = useRef<HTMLDivElement>(null);
   const [imgLoaded, setImgLoaded] = useState(false);
-
-  let scale = 1;
-  let offsetX = 0;
-  let offsetY = 0;
-
-  const MIN_SCALE = 0.5;
-  const MAX_SCALE = 5;
+  const offsetRef = useRef({ x: 0, y: 0 });
+  const originPosition = useRef({ x: 0, y: 0 });
 
   const getTransformedPoint = (event: React.MouseEvent<HTMLCanvasElement>) => {
     const overlayCanvas = overlayCanvasRef.current!;
     const rect = overlayCanvas.getBoundingClientRect();
 
+    // 获取鼠标在画布上的原始坐标
     const x = event.clientX - rect.left;
     const y = event.clientY - rect.top;
 
-    const transformedX = x - overlayCanvas.width / 2;
-    const transformedY = y - overlayCanvas.height / 2;
-
-    console.log('Mouse Coordinates (Transformed):', transformedX, transformedY);
+    // 考虑缩放比例和偏移量
+    const transformedX = (x - offsetRef.current.x) / autoScale.current;
+    const transformedY = (y - offsetRef.current.y) / autoScale.current;
 
     return { x: transformedX, y: transformedY };
   };
@@ -113,6 +111,10 @@ const CanvasImageEditor: React.FC<CanvasImageEditorProps> = ({
     overlayCtx!.translate(ctx!.canvas.width / 2, ctx!.canvas.height / 2);
     ctx!.translate(ctx!.canvas.width / 2, ctx!.canvas.height / 2);
     offscreenCtx!.translate(ctx!.canvas.width / 2, ctx!.canvas.height / 2);
+    originPosition.current = {
+      x: ctx!.canvas.width / 2,
+      y: ctx!.canvas.height / 2
+    };
   }, [canvasRef.current, overlayCanvasRef.current]);
 
   const scaleCanvasSize = useCallback(() => {
@@ -439,8 +441,8 @@ const CanvasImageEditor: React.FC<CanvasImageEditorProps> = ({
           1
         );
 
-        canvas!.width = img.width * scale;
-        canvas!.height = img.height * scale;
+        canvas!.width = img.width;
+        canvas!.height = img.height;
 
         autoScale.current = scale / autoScale.current;
 
@@ -457,6 +459,7 @@ const CanvasImageEditor: React.FC<CanvasImageEditorProps> = ({
           canvas!.width,
           canvas!.height
         );
+        canvas!.style.transform = `scale(${scale})`;
         resolve();
       };
     });
@@ -502,61 +505,102 @@ const CanvasImageEditor: React.FC<CanvasImageEditorProps> = ({
     const y = event.clientY - rect.top;
 
     // 考虑缩放比例和偏移量
-    const transformedX = (x - offsetX) / scale;
-    const transformedY = (y - offsetY) / scale;
+    const transformedX = (x - offsetRef.current.x) / autoScale.current;
+    const transformedY = (y - offsetRef.current.y) / autoScale.current;
 
     return { x: transformedX, y: transformedY };
   };
 
-  const handleOnWheel = (event: WheelEvent) => {
-    event.preventDefault();
+  const getMousePosition = (event: any) => {
+    const canvas = overlayCanvasRef.current!;
+    const rect = canvas.getBoundingClientRect();
+    const mouseX = event.clientX - rect.left;
+    const mouseY = event.clientY - rect.top;
 
-    const zoomFactor = event.deltaY < 0 ? 1.1 : 0.9;
-    const newScale = Math.min(
-      MAX_SCALE,
-      Math.max(MIN_SCALE, scale * zoomFactor)
-    );
+    const { x: originX, y: originY } = originPosition.current;
+    const canvasX = (mouseX - originX) / autoScale.current;
+    const canvasY = (mouseY - originY) / autoScale.current;
+
+    return { x: canvasX, y: canvasY };
+  };
 
-    const rect = canvasRef.current!.getBoundingClientRect();
+  const updateCavasTransform = (event: any) => {
+    const canvas = overlayCanvasRef.current!;
+    const rect = canvas.getBoundingClientRect();
     const mouseX = event.clientX - rect.left;
     const mouseY = event.clientY - rect.top;
 
-    // 计算新的偏移量
-    offsetX = mouseX - (mouseX - offsetX) * (newScale / scale);
-    offsetY = mouseY - (mouseY - offsetY) * (newScale / scale);
+    // 鼠标在中心坐标系中的位置
+    const { x: originX, y: originY } = originPosition.current;
+    const canvasX = (mouseX - originX) / autoScale.current;
+    const canvasY = (mouseY - originY) / autoScale.current;
 
     // 更新缩放比例
-    scale = newScale;
+    // max scale: 2, min scale: 0.3
+    const zoomIn = event.deltaY < 0;
+    let newScale = autoScale.current;
+    if (zoomIn) {
+      newScale = Math.min(MAX_SCALE, autoScale.current * zoomFactor);
+    } else {
+      newScale = Math.max(MIN_SCALE, autoScale.current / zoomFactor);
+    }
+
+    console.log('New Scale:', newScale);
+
+    autoScale.current = newScale;
+    // 更新原点
+    const neworiginX = mouseX - canvasX * newScale;
+    const neworiginY = mouseY - canvasY * newScale;
+    originPosition.current = { x: neworiginX, y: neworiginY };
 
-    // 设置画布的变换
     const overlayCtx = overlayCanvasRef.current!.getContext('2d')!;
-    overlayCtx.setTransform(scale, 0, 0, scale, offsetX, offsetY);
     const canvasCtx = canvasRef.current!.getContext('2d')!;
-    canvasCtx.setTransform(scale, 0, 0, scale, offsetX, offsetY);
-    overlayCanvasRef.current!.style.transform = `scale(${scale})`;
-    canvasRef.current!.style.transform = `scale(${scale})`;
+    // 更新 Canvas 的变换
+    overlayCtx.setTransform(
+      autoScale.current,
+      0,
+      0,
+      autoScale.current,
+      neworiginX,
+      neworiginY
+    );
+    canvasCtx.setTransform(
+      autoScale.current,
+      0,
+      0,
+      autoScale.current,
+      neworiginX,
+      neworiginY
+    );
+  };
 
-    console.log('Zoom:', scale, offsetX, offsetY);
+  const handleOnWheel = (event: WheelEvent) => {
+    event.preventDefault();
+
+    updateCavasTransform(event);
+
+    overlayCanvasRef.current!.style.transform = `scale(${autoScale.current})`;
+    canvasRef.current!.style.transform = `scale(${autoScale.current})`;
   };
 
   useEffect(() => {
     initializeImage();
   }, [initializeImage]);
 
-  // useEffect(() => {
-  //   const container = containerRef.current;
-  //   if (!container) return;
-  //   if (container) {
-  //     resizeObserver.current = new ResizeObserver(
-  //       _.throttle(handleResize, 100)
-  //     );
-  //     resizeObserver.current.observe(container);
-  //   }
-
-  //   return () => {
-  //     resizeObserver.current?.disconnect();
-  //   };
-  // }, [handleResize, containerRef.current]);
+  useEffect(() => {
+    const container = containerRef.current;
+    if (!container) return;
+    if (container) {
+      resizeObserver.current = new ResizeObserver(
+        _.throttle(handleResize, 100)
+      );
+      resizeObserver.current.observe(container);
+    }
+
+    return () => {
+      resizeObserver.current?.disconnect();
+    };
+  }, [handleResize, containerRef.current]);
 
   useEffect(() => {
     createOffscreenCanvas();

src/components/logs-viewer/logs-pagination.tsx

@@ -1,4 +1,8 @@
-import { DownOutlined, UpOutlined } from '@ant-design/icons';
+import {
+  DownOutlined,
+  UpOutlined,
+  VerticalLeftOutlined
+} from '@ant-design/icons';
 import { useIntl } from '@umijs/max';
 import { Button, Tooltip } from 'antd';
 import React from 'react';
@@ -10,10 +14,11 @@ interface LogsPaginationProps {
   pageSize?: number;
   onPrev?: () => void;
   onNext?: () => void;
+  onBackend?: () => void;
 }
 
 const LogsPagination: React.FC<LogsPaginationProps> = (props) => {
-  const { page, total, pageSize, onNext, onPrev } = props;
+  const { page, total, pageSize, onNext, onPrev, onBackend } = props;
   const intl = useIntl();
 
   const handleOnPrev = () => {
@@ -27,6 +32,7 @@ const LogsPagination: React.FC<LogsPaginationProps> = (props) => {
   return (
     <div className="pagination">
       <Tooltip
+        placement="left"
         title={intl.formatMessage(
           { id: 'models.logs.pagination.prev' },
           { lines: pageSize }
@@ -46,21 +52,37 @@ const LogsPagination: React.FC<LogsPaginationProps> = (props) => {
         <span className="total">{total}</span>
       </span>
       {page < total && (
-        <Tooltip
-          title={intl.formatMessage(
-            { id: 'models.logs.pagination.next' },
-            { lines: pageSize }
-          )}
-        >
-          <Button
-            onClick={handleOnNext}
-            type="text"
-            shape="circle"
-            style={{ color: 'rgba(255,255,255,.7)' }}
+        <>
+          <Tooltip
+            placement="left"
+            title={intl.formatMessage(
+              { id: 'models.logs.pagination.next' },
+              { lines: pageSize }
+            )}
+          >
+            <Button
+              onClick={handleOnNext}
+              type="text"
+              shape="circle"
+              style={{ color: 'rgba(255,255,255,.7)' }}
+            >
+              <DownOutlined />
+            </Button>
+          </Tooltip>
+          <Tooltip
+            title={intl.formatMessage({ id: 'models.logs.pagination.last' })}
+            placement="left"
           >
-            <DownOutlined />
-          </Button>
-        </Tooltip>
+            <Button
+              onClick={onBackend}
+              type="text"
+              shape="circle"
+              style={{ color: 'rgba(255,255,255,.7)', marginTop: 10 }}
+            >
+              <VerticalLeftOutlined rotate={90} />
+            </Button>
+          </Tooltip>
+        </>
       )}
     </div>
   );

src/components/logs-viewer/parse-worker.ts

@@ -150,5 +150,10 @@ self.onmessage = function (event) {
     content: item.content,
     uid: item.uid
   }));
+  console.log('result===', result);
   self.postMessage(result);
 };
+
+self.onerror = function (event) {
+  console.error('parse logs error===', event);
+};

src/components/logs-viewer/styles/pagination.less

@@ -11,6 +11,10 @@
     background-color: rgba(71, 71, 71, 100%) !important;
   }
 
+  .ant-btn {
+    background-color: rgba(71, 71, 71, 50%) !important;
+  }
+
   .pages {
     display: flex;
     justify-content: center;

src/components/logs-viewer/virtual-log-list.tsx

@@ -49,6 +49,7 @@ const LogsViewer: React.FC<LogsViewerProps> = forwardRef((props, ref) => {
   useImperativeHandle(ref, () => ({
     abort() {
       chunkRequedtRef.current?.current?.abort?.();
+      logParseWorker.current?.terminate?.();
     }
   }));
 
@@ -65,6 +66,7 @@ const LogsViewer: React.FC<LogsViewerProps> = forwardRef((props, ref) => {
 
     logParseWorker.current.onmessage = (event: any) => {
       const res = event.data;
+      console.log('res===', res);
       setLogs(res);
     };
 
@@ -73,7 +75,7 @@ const LogsViewer: React.FC<LogsViewerProps> = forwardRef((props, ref) => {
         logParseWorker.current.terminate();
       }
     };
-  }, [setLogs, logParseWorker.current]);
+  }, []);
 
   const debounceLoading = _.debounce(() => {
     setLoading(false);
@@ -88,26 +90,26 @@ const LogsViewer: React.FC<LogsViewerProps> = forwardRef((props, ref) => {
 
   const getLastPage = (data: string) => {
     const list = _.split(data.trim(), '\n');
-
+    let result = '';
+    console.log('getlastPage===', list.length, enableScorllLoad, pageSize);
+    setLoading(true);
     if (!enableScorllLoad) {
-      return list.join('\n');
-    }
-
-    if (list.length <= pageSize) {
+      result = list.join('\n');
+    } else if (list.length <= pageSize) {
       setTotalPage(1);
-      return data;
-    }
+      result = data;
+    } else {
+      const totalPage = Math.ceil(list.length / pageSize);
+      setTotalPage(totalPage);
+      setPage(() => totalPage);
+      pageRef.current = totalPage;
+      totalPageRef.current = totalPage;
+      const lastPage = list.slice(-pageSize).join('\n');
 
-    setLoading(true);
-    const totalPage = Math.ceil(list.length / pageSize);
-    setTotalPage(totalPage);
-    setPage(() => totalPage);
-    pageRef.current = totalPage;
-    totalPageRef.current = totalPage;
-    const lastPage = list.slice(-pageSize).join('\n');
-    console.log('list.length===', list.length, totalPage, page);
+      result = lastPage;
+    }
     debounceLoading();
-    return lastPage;
+    return result;
   };
 
   const getCurrentPage = () => {
@@ -116,7 +118,6 @@ const LogsViewer: React.FC<LogsViewerProps> = forwardRef((props, ref) => {
     if (newPage < 1) {
       newPage = 1;
     }
-    console.log('currentpage===', newPage);
     const start = (newPage - 1) * pageSize;
     const end = newPage * pageSize;
     const currentPage = list.slice(start, end).join('\n');
@@ -164,6 +165,20 @@ const LogsViewer: React.FC<LogsViewerProps> = forwardRef((props, ref) => {
     });
   }, [totalPage, page, pageSize]);
 
+  const handleonBackend = useCallback(() => {
+    const list = _.split(cacheDataRef.current.trim(), '\n');
+    let newPage = totalPage;
+    const start = (newPage - 1) * pageSize;
+    const end = newPage * pageSize;
+    const nextPage = list.slice(start, end).join('\n');
+    setPage(() => newPage);
+    setScrollPos(['bottom', newPage]);
+    pageRef.current = newPage;
+    logParseWorker.current.postMessage({
+      inputStr: nextPage
+    });
+  }, [totalPage, page, pageSize]);
+
   const debounceParseData = _.debounce(() => {
     if (pageRef.current === totalPageRef.current) {
       logParseWorker.current.postMessage({
@@ -175,20 +190,25 @@ const LogsViewer: React.FC<LogsViewerProps> = forwardRef((props, ref) => {
   }, 100);
 
   const updateContent = (inputStr: string) => {
-    console.log('inputStr===', inputStr);
     const data = inputStr.replace(replaceLineRegex, '\n');
     if (isClean(data)) {
       cacheDataRef.current = data;
     } else {
       cacheDataRef.current += data;
     }
-    console.log('page===', pageRef.current, totalPageRef.current);
-    debounceParseData();
+    if (pageRef.current === totalPageRef.current) {
+      logParseWorker.current.postMessage({
+        inputStr: getLastPage(cacheDataRef.current)
+      });
+    } else {
+      getCurrentPage();
+    }
   };
 
   const createChunkConnection = async () => {
     cacheDataRef.current = '';
     chunkRequedtRef.current?.current?.abort?.();
+
     chunkRequedtRef.current = setChunkFetch({
       url,
       params: {
@@ -287,6 +307,7 @@ const LogsViewer: React.FC<LogsViewerProps> = forwardRef((props, ref) => {
                 pageSize={pageSize}
                 onNext={getNextPage}
                 onPrev={getPrePage}
+                onBackend={handleonBackend}
               ></LogsPagination>
             </div>
           </div>

src/locales/en-US/models.ts

@@ -74,6 +74,7 @@ export default {
     'More {backend} parameter details',
   'models.logs.pagination.prev': 'Previous {lines} Lines',
   'models.logs.pagination.next': 'Next {lines} Lines',
+  'models.logs.pagination.last': 'Last Page',
   'models.form.localPath': 'Local Path',
   'models.form.filePath': 'Model Path',
   'models.form.backendVersion': 'Backend Version',

src/locales/en-US/playground.ts

@@ -85,7 +85,7 @@ export default {
     'Upload an audio file or start recording',
   'playground.audio.enablemic':
     "Enable microphone access in your browser's settings.",
-  'playground.audio.enablemic.doc': 'Refer to',
+  'playground.audio.enablemic.doc': 'Refer to this link',
   'playground.audio.startrecord': 'Start Recording',
   'playground.audio.stoprecord': 'Stop Recording',
   'playground.audio.generating.tips': 'Generated text will appear here.',

src/locales/en-US/resources.ts

@@ -55,6 +55,5 @@ export default {
     'Select a label to generate the command and copy it using the copy button.',
   'resources.worker.script.install': 'Script Installation',
   'resources.worker.container.install': 'Container Installation(Linux Only)',
-  'resources.worker.cann.tips':
-    'Set <span style="color: #000;font-weight: 600">ASCEND_VISIBLE_DEVICES</span> to 0 for a single GPU or to the index range (e.g., 0-7 for 8 GPUs) for multiple GPUs.'
+  'resources.worker.cann.tips': `Set <span style='color: #000;font-weight: 600'>ASCEND_VISIBLE_DEVICES</span> to the required GPU indices. For GPU0 to GPU3, use <span style='color: #000;font-weight: 600'>ASCEND_VISIBLE_DEVICES=0,1,2,3</span> or <span style='color: #000;font-weight: 600'>ASCEND_VISIBLE_DEVICES=0-3</span>.`
 };

src/locales/zh-CN/models.ts

@@ -71,6 +71,7 @@ export default {
   'models.form.backend_parameters.vllm.tips': '更多 {backend} 参数说明查看',
   'models.logs.pagination.prev': '上一 {lines} 行',
   'models.logs.pagination.next': '下一 {lines} 行',
+  'models.logs.pagination.last': '最后一页',
   'models.form.localPath': '本地路径',
   'models.form.filePath': '模型路径',
   'models.form.backendVersion': '后端版本',

src/locales/zh-CN/resources.ts

@@ -54,5 +54,5 @@ export default {
   'resources.worker.script.install': '脚本安装',
   'resources.worker.container.install': '容器安装(仅支持 Linux)',
   'resources.worker.cann.tips':
-    '若 GPU 数量为 1，则设 ASCEND_VISIBLE_DEVICES=0；若大于 1，则设为索引范围（如 8 张为 0-7）'
+    '按需要挂载的 GPU index 设置 <span style="color: #000;font-weight: 600">ASCEND_VISIBLE_DEVICES</span>，如需挂载 GPU0 - GPU3，则设为 <span style="color: #000;font-weight: 600">ASCEND_VISIBLE_DEVICES=0,1,2,3</span> 或 <span style="color: #000;font-weight: 600">ASCEND_VISIBLE_DEVICES=0-3</span>'
 };

src/pages/dashboard/components/active-table.tsx

@@ -50,7 +50,7 @@ const ActiveTable = () => {
       render: (text: any, record: any) => {
         return (
           <AutoTooltip ghost>
-            <span>{text}</span>
+            <span>{text || 'N/A'}</span>
           </AutoTooltip>
         );
       }

src/pages/llmodels/apis/index.ts

@@ -151,7 +151,7 @@ export async function queryModelScopeModels(
   config?: any
 ) {
   const tagsCriterion = params.tags?.map((tag: string) => {
-    return { category: 'tags', predicate: 'contains', values: [tag] };
+    return { category: 'libraries', predicate: 'contains', values: [tag] };
   });
   const tasksCriterion = params.tasks?.map((task: string) => {
     return { category: 'tasks', predicate: 'contains', values: [task] };

src/pages/llmodels/components/advance-config.tsx

@@ -303,7 +303,6 @@ const AdvanceConfig: React.FC<AdvanceConfigProps> = (props) => {
                     { backend: backendParamsTips.backend || '' }
                   )}{' '}
                   <Typography.Link
-                    style={{ color: 'var(--ant-blue-4)' }}
                     href={backendParamsTips.link}
                     target="_blank"
                   >

src/pages/llmodels/components/hf-model-file.tsx

@@ -125,6 +125,10 @@ const HFModelFile: React.FC<HFModelFileProps> = forwardRef((props, ref) => {
     return [...shardFileListResult, ...newGeneralFileList];
   }, []);
 
+  const hfFileFilter = (file: any) => {
+    return filterRegGGUF.test(file.path) || _.includes(file.path, '.gguf');
+  };
+
   // hugging face files
   const getHuggingfaceFiles = async () => {
     try {
@@ -139,7 +143,7 @@ const HFModelFile: React.FC<HFModelFileProps> = forwardRef((props, ref) => {
       });
 
       const list = _.filter(fileList, (file: any) => {
-        return filterRegGGUF.test(file.path) || _.includes(file.path, '.gguf');
+        return hfFileFilter(file);
       });
 
       return list;
@@ -148,6 +152,10 @@ const HFModelFile: React.FC<HFModelFileProps> = forwardRef((props, ref) => {
     }
   };
 
+  const modelscopeFileFilter = (file: any) => {
+    return filterRegGGUF.test(file.Path) && file.Type === 'blob';
+  };
+
   // modelscope files
   const getModelScopeFiles = async () => {
     try {
@@ -161,7 +169,7 @@ const HFModelFile: React.FC<HFModelFileProps> = forwardRef((props, ref) => {
         }
       );
       const fileList = _.filter(_.get(data, ['Data', 'Files']), (file: any) => {
-        return filterRegGGUF.test(file.Path) && file.Type === 'blob';
+        return modelscopeFileFilter(file);
       });
 
       const list = _.map(fileList, (item: any) => {

src/pages/llmodels/components/view-logs-modal.tsx

@@ -51,6 +51,8 @@ const ViewCodeModal: React.FC<ViewModalProps> = (props) => {
         url: `${MODELS_API}/${props.modelId}/instances`,
         handler: updateHandler
       });
+    } else {
+      logsViewerRef.current?.abort();
     }
     return () => {
       requestRef.current?.current?.cancel?.();

src/pages/playground/components/audio-input.tsx

@@ -302,7 +302,7 @@ const AudioInput: React.FC<AudioInputProps> = (props) => {
               href={`${externalRefer.audioPermission}`}
               target="_blank"
               style={{
-                color: 'var(--ant-blue-5)'
+                paddingInline: 0
               }}
             >
               {intl.formatMessage({ id: 'playground.audio.enablemic.doc' })}

src/pages/playground/components/params-settings.tsx

@@ -6,7 +6,7 @@ import { InfoCircleOutlined } from '@ant-design/icons';
 import { useIntl } from '@umijs/max';
 import { Form, InputNumber, Slider, Tooltip } from 'antd';
 import _ from 'lodash';
-import { memo, useCallback, useEffect, useId } from 'react';
+import { memo, useCallback, useEffect, useId, useState } from 'react';
 import CustomLabelStyles from '../style/custom-label.less';
 
 type ParamsSettingsFormProps = {
@@ -29,12 +29,13 @@ type ParamsSettingsProps = {
   globalParams?: ParamsSettingsFormProps;
 };
 
-const METAKEYS: Record<string, string> = {
+const METAKEYS: Record<string, any> = {
   seed: 'seed',
   stop: 'stop',
   temperature: 'temperature',
   top_p: 'top_p',
-  max_tokens: 'n_ctx'
+  n_slot_ctx: 'max_tokens',
+  max_model_len: 'max_tokens'
 };
 
 const ParamsSettings: React.FC<ParamsSettingsProps> = ({
@@ -56,6 +57,8 @@ const ParamsSettings: React.FC<ParamsSettingsProps> = ({
   };
   const [form] = Form.useForm();
   const formId = useId();
+  const [metaData, setMetaData] = useState<Record<string, any>>({});
+  const [firstLoad, setFirstLoad] = useState(true);
 
   const handleOnFinish = (values: any) => {
     console.log('handleOnFinish', values);
@@ -97,18 +100,16 @@ const ParamsSettings: React.FC<ParamsSettingsProps> = ({
   const handleModelChange = (val: string) => {
     const model = _.find(modelList, { value: val });
     const modelMeta = model?.meta || {};
-    const keys = Object.keys(METAKEYS).map((k: string) => {
-      return METAKEYS[k];
-    });
-    const modelMetaKeys = _.pick(modelMeta, keys);
-    const obj = _.reduce(
-      METAKEYS,
-      (result: any, value: any, key: string) => {
-        result[key] = modelMetaKeys[value];
-        return result;
-      },
-      {}
-    );
+    const modelMetaValue = _.pick(modelMeta, _.keys(METAKEYS));
+    const obj = Object.entries(METAKEYS).reduce((acc: any, [key, value]) => {
+      const val = modelMetaValue[key];
+      if (val && _.hasIn(modelMetaValue, key)) {
+        acc[value] = val;
+      }
+      return acc;
+    }, {});
+    form.setFieldsValue(obj);
+    setMetaData(obj);
     return obj;
   };
 
@@ -127,11 +128,14 @@ const ParamsSettings: React.FC<ParamsSettingsProps> = ({
       ...mergeData,
       model: model
     });
+    setFirstLoad(false);
   }, [modelList, showModelSelector, selectedModel]);
 
   useEffect(() => {
-    form.setFieldsValue(globalParams);
-  }, [globalParams]);
+    if (!firstLoad) {
+      form.setFieldsValue(globalParams);
+    }
+  }, [globalParams, firstLoad]);
 
   const renderLabel = (args: {
     field: string;
@@ -196,7 +200,11 @@ const ParamsSettings: React.FC<ParamsSettingsProps> = ({
                 }
               ]}
             >
-              <SealSelect showSearch={true} options={modelList}></SealSelect>
+              <SealSelect
+                showSearch={true}
+                options={modelList}
+                onChange={handleModelChange}
+              ></SealSelect>
             </Form.Item>
           </>
         )}
@@ -246,7 +254,7 @@ const ParamsSettings: React.FC<ParamsSettingsProps> = ({
           >
             <Slider
               defaultValue={2048}
-              max={16 * 1024}
+              max={metaData.max_tokens || 16 * 1024}
               step={1}
               style={{ marginBottom: 0, marginTop: 16, marginInline: 0 }}
               tooltip={{ open: false }}

src/pages/resources/components/container-install.tsx

@@ -80,7 +80,7 @@ const AddWorker: React.FC<ViewModalProps> = (props) => {
       </ul>
       <h3>1. {intl.formatMessage({ id: 'resources.worker.add.step1' })}</h3>
       <HighlightCode
-        code={addWorkerGuide.mac.getToken}
+        code={addWorkerGuide.container.getToken}
         theme="dark"
       ></HighlightCode>
       <h3>

src/pages/resources/config/index.ts

@@ -56,6 +56,10 @@ export const addWorkerGuide: Record<string, any> = {
     registerWorker(params: { server: string; tag: string; token: string }) {
       return `docker run -d --ipc=host --network=host gpustack/gpustack:${params.tag} --server-url ${params.server} --token ${params.token}`;
     }
+  },
+  container: {
+    getToken:
+      'docker run -it ${gpustack_container_id} cat /var/lib/gpustack/token'
   }
 };