fix: image stream data error

src/components/auto-image/index.tsx

@@ -71,9 +71,6 @@ const AutoImage: React.FC<
   }, [props.onLoad]);
 
   const handleOnError = () => {
-    console.log('error===img=========', {
-      src: props.src
-    });
     setIsError(true);
   };
 

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

@@ -1,6 +1,7 @@
 import { CloseCircleOutlined } from '@ant-design/icons';
 import { Progress, ProgressProps } from 'antd';
 import classNames from 'classnames';
+import { round } from 'lodash';
 import ResizeObserver from 'rc-resize-observer';
 import React, { useCallback } from 'react';
 import AutoImage from './index';
@@ -40,7 +41,7 @@ const SingleImage: React.FC<SingleImageProps> = (props) => {
     progress,
     maxHeight,
     maxWidth,
-    dataUrl,
+    dataUrl = '',
     style,
     autoBgColor,
     preview = true,
@@ -134,12 +135,12 @@ const SingleImage: React.FC<SingleImageProps> = (props) => {
                 }}
               >
                 <Progress
-                  percent={progress}
+                  percent={round(progress, 0)}
                   type="dashboard"
                   size={loadingSize}
                   steps={{ count: 50, gap: 2 }}
                   format={() => (
-                    <span className="font-size-20">{progress}%</span>
+                    <span className="font-size-20">{round(progress, 0)}%</span>
                   )}
                   trailColor="var(--ant-color-fill-secondary)"
                 />
@@ -164,12 +165,14 @@ const SingleImage: React.FC<SingleImageProps> = (props) => {
                 {progress && progress < 100 && (
                   <span className="small-progress-wrap">
                     <Progress
-                      percent={progress}
+                      percent={round(progress, 0)}
                       type="dashboard"
                       size="small"
                       steps={{ count: 25, gap: 3 }}
                       format={() => (
-                        <span className="font-size-12">{progress}%</span>
+                        <span className="font-size-12">
+                          {round(progress, 0)}%
+                        </span>
                       )}
                       strokeColor="var(--color-white-secondary)"
                       trailColor="var(--ant-color-fill-secondary)"

src/components/image-editor/index.tsx

@@ -44,7 +44,7 @@ const CanvasImageEditor: React.FC<CanvasImageEditorProps> = ({
   const canvasRef = useRef<HTMLCanvasElement>(null);
   const overlayCanvasRef = useRef<HTMLCanvasElement>(null);
   const containerRef = useRef<HTMLDivElement>(null);
-  const [lineWidth, setLineWidth] = useState<number>(30);
+  const [lineWidth, setLineWidth] = useState<number>(60);
   const isDrawing = useRef<boolean>(false);
   const currentStroke = useRef<Point[]>([]);
   const resizeObserver = useRef<ResizeObserver | null>(null);

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

@@ -1,11 +1,18 @@
 import AutoTooltip from '@/components/auto-tooltip';
 import PageTools from '@/components/page-tools';
+import { modelCategoriesMap } from '@/pages/llmodels/config';
 import { convertFileSize } from '@/utils';
 import { useIntl } from '@umijs/max';
 import { Col, Row, Table } from 'antd';
 import { memo, useContext } from 'react';
 import { DashboardContext } from '../config/dashboard-context';
 
+const NACategories = [
+  modelCategoriesMap.llm,
+  modelCategoriesMap.embedding,
+  modelCategoriesMap.reranker
+];
+
 const ActiveTable = () => {
   const intl = useIntl();
   const data = useContext(DashboardContext).active_models || [];
@@ -48,9 +55,13 @@ const ActiveTable = () => {
       key: 'token_count',
       ellipsis: true,
       render: (text: any, record: any) => {
+        let val = text;
+        if (!text) {
+          val = NACategories.includes(record.category?.[0]) ? 'N/A' : 0;
+        }
         return (
           <AutoTooltip ghost>
-            <span>{text || 'N/A'}</span>
+            <span>{val}</span>
           </AutoTooltip>
         );
       }

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

@@ -60,6 +60,8 @@ const METAKEYS = [
   'negative_prompt'
 ];
 
+const ODD_STRING = 'AAAABJRU5ErkJgg===';
+
 const advancedFieldsDefaultValus = {
   seed: null,
   sample_method: 'euler_a',
@@ -135,6 +137,10 @@ const GroundImages: React.FC<MessageProps> = forwardRef((props, ref) => {
     };
   });
 
+  const removeBase64Suffix = (str: string, suffix: string) => {
+    return str.endsWith(suffix) ? str.slice(0, -suffix.length) : str;
+  };
+
   const getNewImageSizeOptions = useCallback((metaData: any) => {
     const { max_height, max_width } = metaData || {};
     if (!max_height || !max_width) {
@@ -350,12 +356,12 @@ const GroundImages: React.FC<MessageProps> = forwardRef((props, ref) => {
         chunk?.data?.forEach((item: any) => {
           const imgItem = newImageList[item.index];
           if (item.b64_json && stream_options.chunk_results) {
-            imgItem.dataUrl += item.b64_json;
+            imgItem.dataUrl += removeBase64Suffix(item.b64_json, ODD_STRING);
           } else if (item.b64_json) {
-            console.log('item.b64_json:', item.b64_json, item.index);
+            imgItem.dataUrl = `data:image/png;base64,${removeBase64Suffix(item.b64_json, ODD_STRING)}`;
-            imgItem.dataUrl = `data:image/png;base64,${item.b64_json}`;
           }
-          const progress = _.round(item.progress, 0);
+          const progress = item.progress;
+
           newImageList[item.index] = {
             dataUrl: imgItem.dataUrl,
             height: imgSize[1],

src/pages/playground/components/image-edit.tsx

@@ -62,6 +62,8 @@ const METAKEYS = [
   'strength'
 ];
 
+const ODD_STRING = 'AAAABJRU5ErkJgg===';
+
 const advancedFieldsDefaultValus = {
   seed: null,
   sample_method: 'euler_a',
@@ -150,6 +152,10 @@ const GroundImages: React.FC<MessageProps> = forwardRef((props, ref) => {
     };
   });
 
+  const removeBase64Suffix = (str: string, suffix: string) => {
+    return str.endsWith(suffix) ? str.slice(0, -suffix.length) : str;
+  };
+
   const updateCacheFormData = (values: Record<string, any>) => {
     cacheFormData.current = {
       ...cacheFormData.current,
@@ -383,11 +389,11 @@ const GroundImages: React.FC<MessageProps> = forwardRef((props, ref) => {
         chunk?.data?.forEach((item: any) => {
           const imgItem = newImageList[item.index];
           if (item.b64_json && params.stream_options_chunk_result) {
-            imgItem.dataUrl += item.b64_json;
+            imgItem.dataUrl += removeBase64Suffix(item.b64_json, ODD_STRING);
           } else if (item.b64_json) {
-            imgItem.dataUrl = `data:image/png;base64,${item.b64_json}`;
+            imgItem.dataUrl = `data:image/png;base64,${removeBase64Suffix(item.b64_json, ODD_STRING)}`;
           }
-          const progress = _.round(item.progress, 0);
+          const progress = item.progress;
 
           newImageList[item.index] = {
             dataUrl: imgItem.dataUrl,
@@ -832,7 +838,8 @@ const GroundImages: React.FC<MessageProps> = forwardRef((props, ref) => {
                         style={{
                           height: 125,
                           maxWidth: 125,
-                          maxHeight: 125
+                          maxHeight: 125,
+                          overflow: 'hidden'
                         }}
                         key={item.uid}
                       >

src/utils/fetch-chunk-data.ts

@@ -210,7 +210,6 @@ const processBuffer = async (buffer: string, callback: (data: any) => void) => {
       const jsonStr = trimmedLine.slice(6).trim();
       try {
         if (jsonStr !== '[DONE]') {
-          console.log('jsonStr>>>>>>>>>>>>>done:', jsonStr);
           const jsonData = JSON.parse(jsonStr);
           callback(jsonData);
         }
@@ -219,7 +218,6 @@ const processBuffer = async (buffer: string, callback: (data: any) => void) => {
       }
     } else if (trimmedLine.startsWith('error:')) {
       const errorStr = trimmedLine.slice(7).trim();
-      console.log('jsonStr>>>>>>>>>>>>>error:', errorStr);
       try {
         const jsonData = JSON.parse(errorStr);
         callback({ error: jsonData });
@@ -308,6 +306,8 @@ export const readLargeStreamData = async (
       const lines = buffer.split('\n');
       buffer = lines.pop() || ''; // Keep last line (may be incomplete)
 
+      console.log('buffer>>>>>>>>>>>>>:', buffer);
+
       for (const line of lines) {
         bufferManager.add(line);
       }