fix: do not update logs when viewing pre page

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

@@ -43,6 +43,8 @@ const LogsViewer: React.FC<LogsViewerProps> = forwardRef((props, ref) => {
   const [scrollPos, setScrollPos] = useState<any[]>([]);
   const logListRef = useRef<any>(null);
   const loadMoreDone = useRef(false);
+  const pageRef = useRef<any>(page);
+  const totalPageRef = useRef<any>(totalPage);
 
   useImperativeHandle(ref, () => ({
     abort() {
@@ -84,28 +86,47 @@ const LogsViewer: React.FC<LogsViewerProps> = forwardRef((props, ref) => {
     return command === 'J' && n === 2;
   }, []);
 
-  const getLastPage = useCallback(
+  const getLastPage = (data: string) => {
-    (data: string) => {
+    const list = _.split(data.trim(), '\n');
-      const list = _.split(data.trim(), '\n');
-      if (!enableScorllLoad) {
-        return list.join('\n');
-      }
 
-      if (list.length <= pageSize) {
+    if (!enableScorllLoad) {
-        setTotalPage(1);
+      return list.join('\n');
-        return data;
+    }
-      }
 
-      setLoading(true);
+    if (list.length <= pageSize) {
-      const totalPage = Math.ceil(list.length / pageSize);
+      setTotalPage(1);
-      setTotalPage(totalPage);
+      return data;
-      setPage(totalPage);
+    }
-      const lastPage = list.slice(-pageSize).join('\n');
+
-      debounceLoading();
+    setLoading(true);
-      return lastPage;
+    const totalPage = Math.ceil(list.length / pageSize);
-    },
+    setTotalPage(totalPage);
-    [pageSize, setTotalPage, setPage, debounceLoading, enableScorllLoad]
+    setPage(() => totalPage);
-  );
+    pageRef.current = totalPage;
+    totalPageRef.current = totalPage;
+    const lastPage = list.slice(-pageSize).join('\n');
+    console.log('list.length===', list.length, totalPage, page);
+    debounceLoading();
+    return lastPage;
+  };
+
+  const getCurrentPage = () => {
+    const list = _.split(cacheDataRef.current.trim(), '\n');
+    let newPage = page;
+    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');
+    setPage(() => newPage);
+    setScrollPos(['bottom', newPage]);
+    pageRef.current = newPage;
+    logParseWorker.current.postMessage({
+      inputStr: currentPage
+    });
+  };
 
   const getPrePage = useCallback(() => {
     const list = _.split(cacheDataRef.current.trim(), '\n');
@@ -116,8 +137,10 @@ const LogsViewer: React.FC<LogsViewerProps> = forwardRef((props, ref) => {
     const start = (newPage - 1) * pageSize;
     const end = newPage * pageSize;
     const prePage = list.slice(start, end).join('\n');
-    setPage(newPage);
+    console.log('prePage===', newPage);
+    setPage(() => newPage);
     setScrollPos(['bottom', newPage]);
+    pageRef.current = newPage;
     logParseWorker.current.postMessage({
       inputStr: prePage
     });
@@ -132,29 +155,36 @@ const LogsViewer: React.FC<LogsViewerProps> = forwardRef((props, ref) => {
     const start = (newPage - 1) * pageSize;
     const end = newPage * pageSize;
     const nextPage = list.slice(start, end).join('\n');
-    setPage(newPage);
+    console.log('nextPage===', newPage);
+    setPage(() => newPage);
     setScrollPos(['top', newPage]);
+    pageRef.current = newPage;
     logParseWorker.current.postMessage({
       inputStr: nextPage
     });
   }, [totalPage, page, pageSize]);
 
-  const updateContent = useCallback(
+  const debounceParseData = _.debounce(() => {
-    (inputStr: string) => {
+    if (pageRef.current === totalPageRef.current) {
-      console.log('inputStr===', inputStr);
-      const data = inputStr.replace(replaceLineRegex, '\n');
-      if (isClean(data)) {
-        cacheDataRef.current = data;
-      } else {
-        cacheDataRef.current += data;
-      }
-
       logParseWorker.current.postMessage({
         inputStr: getLastPage(cacheDataRef.current)
       });
-    },
+    } else {
-    [getLastPage]
+      getCurrentPage();
-  );
+    }
+  }, 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();
+  };
 
   const createChunkConnection = async () => {
     cacheDataRef.current = '';
@@ -188,12 +218,20 @@ const LogsViewer: React.FC<LogsViewerProps> = forwardRef((props, ref) => {
         createChunkConnection();
         loadMoreDone.current = true;
       } else if (isTop && page <= totalPage && page > 1) {
-        getPrePage();
+        // getPrePage();
       } else if (isBottom && page < totalPage) {
-        getNextPage();
+        // getNextPage();
       }
     },
-    [loading, logs.length, pageSize, enableScorllLoad, page, totalPage]
+    [
+      loading,
+      logs.length,
+      pageSize,
+      enableScorllLoad,
+      page,
+      totalPage,
+      createChunkConnection
+    ]
   );
 
   const debouncedScroll = useCallback(
@@ -215,9 +253,9 @@ const LogsViewer: React.FC<LogsViewerProps> = forwardRef((props, ref) => {
     };
   }, [url, props.params]);
 
-  // useEffect(() => {
+  useEffect(() => {
-  //   debouncedScroll();
+    debouncedScroll();
-  // }, [scrollPos]);
+  }, [scrollPos]);
 
   return (
     <div className="logs-viewer-wrap-w2">

src/locales/en-US/resources.ts

@@ -54,7 +54,7 @@ export default {
   'resources.worker.select.command':
     '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',
+  '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.'
 };

src/locales/zh-CN/resources.ts

@@ -52,7 +52,7 @@ export default {
   'resources.worker.driver.install':
     '在安装 GPUStack 之前，确保系统上安装了所有必需的驱动程序和库',
   'resources.worker.script.install': '脚本安装',
-  'resources.worker.container.install': '容器安装',
+  'resources.worker.container.install': '容器安装(仅支持 Linux)',
   'resources.worker.cann.tips':
     '若 GPU 数量为 1，则设 ASCEND_VISIBLE_DEVICES=0；若大于 1，则设为索引范围（如 8 张为 0-7）'
 };

src/pages/llmodels/components/table-list.tsx

@@ -23,7 +23,8 @@ import {
   EditOutlined,
   ExperimentOutlined,
   PictureOutlined,
-  SyncOutlined
+  SyncOutlined,
+  WechatWorkOutlined
 } from '@ant-design/icons';
 import { PageContainer } from '@ant-design/pro-components';
 import { Access, useAccess, useIntl, useNavigate } from '@umijs/max';
@@ -651,6 +652,23 @@ const Models: React.FC<ModelsProps> = ({
           </Tag>
         );
       }
+      if (record.categories?.includes(modelCategoriesMap.llm)) {
+        return (
+          <Tag
+            icon={<WechatWorkOutlined />}
+            style={{
+              margin: 0,
+              opacity: 1,
+              paddingInline: 8,
+              borderRadius: 12,
+              transform: 'scale(0.9)'
+            }}
+            color="green"
+          >
+            LLM
+          </Tag>
+        );
+      }
       return null;
     },
     [intl]

src/pages/llmodels/config/index.ts

@@ -248,11 +248,13 @@ export const modelCategoriesMap = {
   text_to_speech: 'text_to_speech',
   speech_to_text: 'speech_to_text',
   embedding: 'embedding',
-  reranker: 'reranker'
+  reranker: 'reranker',
+  llm: 'llm'
 };
 
 export const modelCategories = [
   { label: 'common.options.auto', value: null, locale: true },
+  { label: 'LLM', value: modelCategoriesMap.llm },
   { label: 'Image', value: 'image' },
   { label: 'Text-to-speech', value: 'text_to_speech' },
   { label: 'Speech-to-text', value: 'speech_to_text' },

src/pages/playground/embedding.tsx

@@ -1,5 +1,6 @@
 import IconFont from '@/components/icon-font';
 import HotKeys from '@/config/hotkeys';
+import { modelCategoriesMap } from '@/pages/llmodels/config';
 import { PageContainer } from '@ant-design/pro-components';
 import { useIntl } from '@umijs/max';
 import { Button, Space } from 'antd';
@@ -30,7 +31,7 @@ const PlaygroundEmbedding: React.FC = () => {
     const getModelListByEmbedding = async () => {
       try {
         const params = {
-          categories: 'embedding'
+          categories: modelCategoriesMap.embedding
         };
         const res = await queryModelsList(params);
         const list = _.map(res.data || [], (item: any) => {

src/pages/playground/images.tsx

@@ -2,6 +2,7 @@ import IconFont from '@/components/icon-font';
 import breakpoints from '@/config/breakpoints';
 import HotKeys from '@/config/hotkeys';
 import useWindowResize from '@/hooks/use-window-resize';
+import { modelCategoriesMap } from '@/pages/llmodels/config';
 import { DiffOutlined, HighlightOutlined } from '@ant-design/icons';
 import { PageContainer } from '@ant-design/pro-components';
 import { useIntl } from '@umijs/max';
@@ -85,7 +86,7 @@ const TextToImages: React.FC = () => {
     const getModelList = async () => {
       try {
         const params = {
-          categories: 'image',
+          categories: modelCategoriesMap.image,
           with_meta: true
         };
         const res = await queryModelsList(params);

src/pages/playground/index.tsx

@@ -2,6 +2,7 @@ import IconFont from '@/components/icon-font';
 import breakpoints from '@/config/breakpoints';
 import HotKeys from '@/config/hotkeys';
 import useWindowResize from '@/hooks/use-window-resize';
+import { modelCategoriesMap } from '@/pages/llmodels/config';
 import { MessageOutlined, OneToOneOutlined } from '@ant-design/icons';
 import { PageContainer } from '@ant-design/pro-components';
 import { useIntl } from '@umijs/max';
@@ -79,7 +80,7 @@ const Playground: React.FC = () => {
     const getModelList = async () => {
       try {
         const params = {
-          categories: '',
+          categories: modelCategoriesMap.llm,
           with_meta: true
         };
         const res = await queryModelsList(params);

src/pages/playground/rerank.tsx

@@ -1,5 +1,6 @@
 import IconFont from '@/components/icon-font';
 import HotKeys from '@/config/hotkeys';
+import { modelCategoriesMap } from '@/pages/llmodels/config';
 import { PageContainer } from '@ant-design/pro-components';
 import { useIntl } from '@umijs/max';
 import { Button, Space } from 'antd';
@@ -32,7 +33,7 @@ const PlaygroundRerank: React.FC = () => {
     const getModelListByReranker = async () => {
       try {
         const params = {
-          categories: 'reranker'
+          categories: modelCategoriesMap.reranker
         };
         const res = await queryModelsList(params);
         const list = _.map(res.data || [], (item: any) => {

src/pages/playground/speech.tsx

@@ -2,6 +2,7 @@ import IconFont from '@/components/icon-font';
 import breakpoints from '@/config/breakpoints';
 import HotKeys from '@/config/hotkeys';
 import useWindowResize from '@/hooks/use-window-resize';
+import { modelCategoriesMap } from '@/pages/llmodels/config';
 import { AudioOutlined } from '@ant-design/icons';
 import { PageContainer } from '@ant-design/pro-components';
 import { useIntl, useSearchParams } from '@umijs/max';
@@ -102,7 +103,7 @@ const Playground: React.FC = () => {
     const getTextToSpeechModels = async () => {
       try {
         const params = {
-          categories: 'text_to_speech',
+          categories: modelCategoriesMap.text_to_speech,
           with_meta: true
         };
         const res = await queryModelsList(params);
@@ -122,7 +123,7 @@ const Playground: React.FC = () => {
     const getSpeechToText = async () => {
       try {
         const params = {
-          categories: 'speech_to_text',
+          categories: modelCategoriesMap.speech_to_text,
           with_meta: true
         };
         const res = await queryModelsList(params);

src/pages/resources/components/add-worker.tsx

@@ -41,7 +41,7 @@ const AddWorker: React.FC<ViewModalProps> = (props) => {
       width={600}
       styles={{
         body: {
-          height: 420
+          height: 550
         }
       }}
       footer={null}

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

@@ -1,7 +1,7 @@
 import { GPUStackVersionAtom } from '@/atoms/user';
 import { getAtomStorage } from '@/atoms/utils';
 import HighlightCode from '@/components/highlight-code';
-import { BulbOutlined, WarningOutlined } from '@ant-design/icons';
+import { WarningOutlined } from '@ant-design/icons';
 import { useIntl } from '@umijs/max';
 import { Button, Radio } from 'antd';
 import React from 'react';
@@ -31,13 +31,13 @@ const AddWorker: React.FC<ViewModalProps> = (props) => {
       return commandCode?.registerWorker({
         server: origin,
         tag: version,
-        token: props.token
+        token: '${mytoken}'
       });
     }
     return commandCode?.registerWorker({
       server: origin,
       tag: `${version}-${activeKey}`,
-      token: props.token
+      token: '${mytoken}'
     });
   }, [versionInfo, activeKey, props.token, origin]);
 
@@ -78,6 +78,23 @@ const AddWorker: React.FC<ViewModalProps> = (props) => {
           </Button>
         </li>
       </ul>
+      <h3>1. {intl.formatMessage({ id: 'resources.worker.add.step1' })}</h3>
+      <HighlightCode
+        code={addWorkerGuide.mac.getToken}
+        theme="dark"
+      ></HighlightCode>
+      <h3>
+        2. {intl.formatMessage({ id: 'resources.worker.add.step2' })}{' '}
+        <span
+          className="font-size-12"
+          style={{ color: 'var(--ant-color-text-tertiary)' }}
+          dangerouslySetInnerHTML={{
+            __html: `(${intl.formatMessage({
+              id: 'resources.worker.add.step2.tips'
+            })})`
+          }}
+        ></span>
+      </h3>
       <div className="m-b-20">
         <Radio.Group
           block
@@ -99,9 +116,8 @@ const AddWorker: React.FC<ViewModalProps> = (props) => {
         ></div>
       )}
       <HighlightCode theme="dark" code={code}></HighlightCode>
-      <h3>
+      <h3 className="m-b-0">
-        <BulbOutlined className="m-r-5"></BulbOutlined>
+        3. {intl.formatMessage({ id: 'resources.worker.add.step3' })}
-        {intl.formatMessage({ id: 'resources.worker.add.step3' })}
       </h3>
     </div>
   );

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

@@ -1,5 +1,4 @@
 import HighlightCode from '@/components/highlight-code';
-import { BulbOutlined } from '@ant-design/icons';
 import { useIntl } from '@umijs/max';
 import React from 'react';
 import { addWorkerGuide } from '../config';
@@ -13,11 +12,34 @@ const AddWorker: React.FC<ViewModalProps> = (props) => {
 
   return (
     <div className="script-install">
+      <h3>1. {intl.formatMessage({ id: 'resources.worker.add.step1' })}</h3>
+      <h4>{intl.formatMessage({ id: 'resources.worker.linuxormaxos' })}</h4>
+      <HighlightCode
+        code={addWorkerGuide.mac.getToken}
+        theme="dark"
+      ></HighlightCode>
+      <h4>Windows </h4>
+      <HighlightCode
+        code={addWorkerGuide.win.getToken}
+        theme="dark"
+      ></HighlightCode>
+      <h3>
+        2. {intl.formatMessage({ id: 'resources.worker.add.step2' })}{' '}
+        <span
+          className="font-size-12"
+          style={{ color: 'var(--ant-color-text-tertiary)' }}
+          dangerouslySetInnerHTML={{
+            __html: `(${intl.formatMessage({
+              id: 'resources.worker.add.step2.tips'
+            })})`
+          }}
+        ></span>
+      </h3>
       <h4>{intl.formatMessage({ id: 'resources.worker.linuxormaxos' })}</h4>
       <HighlightCode
         code={addWorkerGuide.mac.registerWorker({
           server: origin,
-          token: props.token
+          token: '${mytoken}'
         })}
         theme="dark"
       ></HighlightCode>
@@ -26,12 +48,11 @@ const AddWorker: React.FC<ViewModalProps> = (props) => {
         theme="dark"
         code={addWorkerGuide.win.registerWorker({
           server: origin,
-          token: props.token
+          token: '${mytoken}'
         })}
       ></HighlightCode>
-      <h3>
+      <h3 className="m-b-0">
-        <BulbOutlined className="m-r-5"></BulbOutlined>
+        3. {intl.formatMessage({ id: 'resources.worker.add.step3' })}
-        {intl.formatMessage({ id: 'resources.worker.add.step3' })}
       </h3>
     </div>
   );