fix: calc log lines

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

@@ -31,22 +31,24 @@ const LogsPagination: React.FC<LogsPaginationProps> = (props) => {
 
   return (
     <div className="pagination">
-      <Tooltip
+      {page > 1 && (
-        placement="left"
+        <Tooltip
-        title={intl.formatMessage(
+          placement="left"
-          { id: 'models.logs.pagination.prev' },
+          title={intl.formatMessage(
-          { lines: pageSize }
+            { id: 'models.logs.pagination.prev' },
-        )}
+            { lines: pageSize }
-      >
+          )}
-        <Button
-          onClick={handleOnPrev}
-          type="text"
-          shape="circle"
-          style={{ color: 'rgba(255,255,255,.7)' }}
         >
-          <UpOutlined />
+          <Button
-        </Button>
+            onClick={handleOnPrev}
-      </Tooltip>
+            type="text"
+            shape="circle"
+            style={{ color: 'rgba(255,255,255,.7)' }}
+          >
+            <UpOutlined />
+          </Button>
+        </Tooltip>
+      )}
       <span className="pages">
         <span className="curr">{page}</span> /{' '}
         <span className="total">{total}</span>

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

@@ -23,8 +23,7 @@ const parseAnsi = (input: string, setId: () => number) => {
   let cursorCol = 0;
   let screen = [['']];
   let lastIndex = 0;
-
+  let rawDataRows = 1;
-  // let input = inputStr.replace(replaceLineRegex, '\n');
 
   // handle the \r and \n characters in the text
   const handleText = (text: string) => {
@@ -33,6 +32,7 @@ const parseAnsi = (input: string, setId: () => number) => {
       if (char === '\r') {
         cursorCol = 0; // move to the beginning of the line
       } else if (char === '\n') {
+        rawDataRows++;
         cursorRow++; // move to the next line
         cursorCol = 0; // move to the beginning of the line
         screen[cursorRow] = screen[cursorRow] || ['']; // create a new line if it does not exist
@@ -138,20 +138,25 @@ const parseAnsi = (input: string, setId: () => number) => {
     uid: setId()
   });
 
-  return result;
+  return {
+    data: result,
+    lines: rawDataRows
+  };
 };
 
 self.onmessage = function (event) {
   const { inputStr } = event.data;
 
-  const parsedData = Array.from(parseAnsi(inputStr, setId));
+  const { data: parsedData, lines } = parseAnsi(inputStr, setId);
 
   const result = parsedData.map((item) => ({
     content: item.content,
     uid: item.uid
   }));
-  console.log('result===', result);
+  self.postMessage({
-  self.postMessage(result);
+    result,
+    lines
+  });
 };
 
 self.onerror = function (event) {

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

@@ -50,7 +50,8 @@ const LogsViewer: React.FC<LogsViewerProps> = forwardRef((props, ref) => {
     pos: 'bottom',
     page: 1
   });
-  const dataLenRef = useRef(0);
+  const dataLengthRef = useRef(0);
+  const lineCountRef = useRef(0);
 
   useImperativeHandle(ref, () => ({
     abort() {
@@ -71,9 +72,9 @@ const LogsViewer: React.FC<LogsViewerProps> = forwardRef((props, ref) => {
     );
 
     logParseWorker.current.onmessage = (event: any) => {
-      const res = event.data;
+      const { result, lines } = event.data;
-      console.log('res===', res);
+      lineCountRef.current = lines;
-      setLogs(res);
+      setLogs(result);
     };
 
     return () => {
@@ -100,7 +101,6 @@ const LogsViewer: React.FC<LogsViewerProps> = forwardRef((props, ref) => {
     let result = '';
 
     const totalPage = Math.ceil(list.length / pageSize);
-    console.log('loading== getLastPage ========', isLoadingMoreRef.current);
 
     pageRef.current = totalPage;
     totalPageRef.current = totalPage;
@@ -122,7 +122,6 @@ const LogsViewer: React.FC<LogsViewerProps> = forwardRef((props, ref) => {
   const getCurrentPage = () => {
     const list = _.split(cacheDataRef.current.trim(), '\n');
     const totalPage = Math.ceil(list.length / pageSize);
-    console.log('loading== getCurrentPage ========', isLoadingMoreRef.current);
     let newPage = pageRef.current;
     if (newPage < 1) {
       newPage = 1;
@@ -208,7 +207,8 @@ const LogsViewer: React.FC<LogsViewerProps> = forwardRef((props, ref) => {
       pos: 'bottom',
       page: newPage
     };
-    pageRef.current = newPage;
+    pageRef.current = totalPage;
+    totalPageRef.current = totalPage;
     logParseWorker.current.postMessage({
       inputStr: nextPage
     });
@@ -216,7 +216,6 @@ const LogsViewer: React.FC<LogsViewerProps> = forwardRef((props, ref) => {
 
   const updateContent = (inputStr: string) => {
     const data = inputStr.replace(replaceLineRegex, '\n');
-    dataLenRef.current = data.length;
     if (isClean(data)) {
       cacheDataRef.current = data;
     } else {
@@ -259,7 +258,8 @@ const LogsViewer: React.FC<LogsViewerProps> = forwardRef((props, ref) => {
         isBottom,
         loadMoreDone: loadMoreDone.current,
         loading: loading,
-        loglen: dataLenRef.current
+        lineCount: lineCountRef.current,
+        dataLength: dataLengthRef.current
       });
       if (isBottom) {
         scrollPosRef.current = {
@@ -280,7 +280,7 @@ const LogsViewer: React.FC<LogsViewerProps> = forwardRef((props, ref) => {
       if (
         loading ||
         (logs.length > 0 &&
-          dataLenRef.current < pageSize &&
+          lineCountRef.current < pageSize &&
           !loadMoreDone.current) ||
         !enableScorllLoad
       ) {

src/pages/playground/components/ground-stt.tsx

@@ -412,7 +412,8 @@ const GroundLeft: React.FC<MessageProps> = forwardRef((props, ref) => {
                       padding: '8px 14px',
                       lineHeight: '20px',
                       display: 'flex',
-                      justifyContent: 'center'
+                      justifyContent: 'center',
+                      wordBreak: 'break-word'
                     }}
                   >
                     {messageList.length ? (

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

@@ -36,7 +36,7 @@ const METAKEYS: Record<string, any> = {
   top_p: 'top_p',
   n_ctx: 'n_ctx',
   n_slot: 'n_slot',
-  max_model_len: 'max_tokens'
+  max_model_len: 'max_model_len'
 };
 
 const ParamsSettings: React.FC<ParamsSettingsProps> = ({
@@ -114,18 +114,21 @@ const ParamsSettings: React.FC<ParamsSettingsProps> = ({
 
     if (obj.n_ctx && obj.n_slot) {
       defaultMaxTokens = _.divide(obj.n_ctx / 2, obj.n_slot);
+    } else if (obj.max_model_len) {
+      defaultMaxTokens = obj.max_model_len / 2;
     }
 
     form.setFieldsValue({
-      ..._.omit(obj, ['n_ctx', 'n_slot']),
+      ..._.omit(obj, ['n_ctx', 'n_slot', 'max_model_len']),
       max_tokens: defaultMaxTokens
     });
+
     setMetaData({
       ...obj,
-      max_tokens: _.divide(obj.n_ctx, obj.n_slot)
+      max_tokens: obj.max_model_len || _.divide(obj.n_ctx, obj.n_slot)
     });
     return {
-      ..._.omit(obj, ['n_ctx', 'n_slot']),
+      ..._.omit(obj, ['n_ctx', 'n_slot', 'max_model_len']),
       max_tokens: defaultMaxTokens
     };
   };