fix: completion response handler

src/components/charts/column-bar.tsx

@@ -83,14 +83,15 @@ const BarChart: React.FC<BarChartProps> = (props) => {
     },
 
     style: {
-      fill: (params: any) => {
-        return (
-          params.color ||
-          'linear-gradient(90deg,rgba(84, 204, 152,0.8) 0%,rgb(0, 168, 143,.7) 100%)'
-        );
-      },
-      radiusTopLeft: 12,
-      radiusTopRight: 12,
+      // fill: (params: any) => {
+      //   return (
+      //     params.color ||
+      //     'linear-gradient(90deg,rgba(84, 204, 152,0.8) 0%,rgb(0, 168, 143,.7) 100%)'
+      //   );
+      // },
+      // radiusTopLeft: 12,
+      // radiusTopRight: 12,
+      fill: 'rgba(84, 204, 152,0.8)',
       align: 'center',
       width: 20
     }

src/components/charts/h-bar.tsx

@@ -64,7 +64,7 @@ const BarChart: React.FC<BarChartProps> = (props) => {
     title: {
       title,
       style: {
-        align: 'center',
+        align: 'start',
         titleFontSize: 14,
         titleFill: 'rgba(0,0,0,0.88)',
         titleFontWeight: 500
@@ -86,8 +86,8 @@ const BarChart: React.FC<BarChartProps> = (props) => {
           'linear-gradient(90deg,rgba(84, 204, 152,0.8) 0%,rgb(0, 168, 143,.7) 100%)'
         );
       },
-      radiusTopLeft: 12,
-      radiusTopRight: 12,
+      // radiusTopLeft: 12,
+      // radiusTopRight: 12,
       height: 20
     }
   };

src/locales/zh-CN/menu.ts

@@ -1,6 +1,6 @@
 export default {
   'menu.dashboard': '概览',
-  'menu.playground': '对话',
+  'menu.playground': '试验场',
   'menu.models': '模型',
   'menu.resources': '资源',
   'menu.apikeys': 'API 密钥',

src/locales/zh-CN/playground.ts

@@ -1,6 +1,6 @@
 export default {
   'playground.system.tips': '在这里输入系统消息...',
-  'playground.title': '对话',
+  'playground.title': '试验场',
   'playground.system': '系统',
   'playground.user': '用户',
   'playground.assistant': '助手',

src/pages/dashboard/components/system-load.tsx

@@ -65,19 +65,19 @@ const SystemLoad = () => {
               <Row style={{ height: largeChartHeight, width: '100%' }}>
                 <Col span={12} style={{ height: smallChartHeight }}>
                   <UitilBar
-                    title="GPU Compute Utilization"
+                    title="GPU Utilization"
                     percent={_.round(data.gpu?.utilization_rate || 0, 1)}
                   ></UitilBar>
                 </Col>
                 <Col span={12} style={{ height: smallChartHeight }}>
                   <UitilBar
-                    title="GPU Memory Utilization"
+                    title="VRAM Utilization"
                     percent={_.round(data.gpu_memory?.utilization_rate || 0, 1)}
                   ></UitilBar>
                 </Col>
                 <Col span={12} style={{ height: smallChartHeight }}>
                   <UitilBar
-                    title="CPU Compute Utilization"
+                    title="CPU Utilization"
                     percent={_.round(data.cpu?.utilization_rate || 0, 1)}
                   ></UitilBar>
                 </Col>

src/pages/dashboard/components/usage.tsx

@@ -134,8 +134,7 @@ const Usage = () => {
       tokenList.push({
         time: dayjs(item.timestamp * 1000).format('YYYY-MM-DD'),
         name: 'completion_token',
-        color:
-          'linear-gradient(90deg,rgba(84, 204, 152,0.8) 0%,rgb(0, 168, 143,.7) 100%)',
+        color: 'rgba(84, 204, 152,0.8)',
         value: item.value
       });
     });
@@ -143,8 +142,7 @@ const Usage = () => {
       tokenList.push({
         time: dayjs(item.timestamp * 1000).format('YYYY-MM-DD'),
         name: 'prompt_token',
-        color:
-          'linear-gradient(90deg,rgba(0, 170, 173, 0.8) 0%,rgba(0, 109, 193, 0.7) 100%)',
+        color: 'rgba(0, 170, 173, 0.8)',
         value: item.value
       });
     });
@@ -153,15 +151,13 @@ const Usage = () => {
       userList.push({
         name: item.username,
         type: 'completion_token',
-        color:
-          'linear-gradient(90deg,rgba(84, 204, 152,0.8) 0%,rgb(0, 168, 143,.7) 100%)',
+        color: 'rgba(84, 204, 152,0.8)',
         value: item.completion_token_count
       });
       userList.push({
         name: item.username,
         type: 'prompt_token',
-        color:
-          'linear-gradient(90deg,rgba(0, 170, 173, 0.8) 0%,rgba(0, 109, 193, 0.7) 100%)',
+        color: 'rgba(0, 170, 173, 0.8)',
         value: item.prompt_token_count
       });
     });

src/pages/llmodels/index.tsx

@@ -374,14 +374,15 @@ const Models: React.FC = () => {
     fetchData();
     // createModelsDataByFetch();
     createModelEvent();
+    createModelsChunkRequest();
+
+    return () => {
+      chunkRequedtRef.current?.current?.cancel?.();
+    };
   }, [queryParams]);
 
   useEffect(() => {
     // watch models list
-    createModelsChunkRequest();
-    return () => {
-      chunkRequedtRef.current?.current?.cancel?.();
-    };
   }, [queryParams]);
 
   const renderChildren = (list: any) => {

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

@@ -66,12 +66,7 @@ const MessageList: React.FC<MessageProps> = (props) => {
     setActiveIndex(messageList.length - 1);
   };
 
-  const joinMessage = (str: any) => {
-    let data = str;
-    if (data.startsWith('data:')) {
-      data = data.substring('data:'.length);
-    }
-    const chunk = JSON.parse(data?.trim());
+  const joinMessage = (chunk: any) => {
     if (_.get(chunk, 'choices.0.finish_reason')) {
       setTokenResult({
         ...chunk?.usage
@@ -80,7 +75,7 @@ const MessageList: React.FC<MessageProps> = (props) => {
       return true;
     }
     contentRef.current =
-      contentRef.current + _.get(chunk, 'choices.0.delta.content');
+      contentRef.current + _.get(chunk, 'choices.0.delta.content', '');
     setMessageList([
       ...messageList,
       {
@@ -120,11 +115,12 @@ const MessageList: React.FC<MessageProps> = (props) => {
       }
       const { reader, decoder } = result;
 
-      await readStreamData(reader, decoder, (data: any) => {
-        joinMessage(data);
+      await readStreamData(reader, decoder, (chunk: any) => {
+        joinMessage(chunk);
       });
       setLoading(false);
     } catch (error) {
+      console.log('error=====', error);
       setLoading(false);
     }
   };

src/request-config.ts

@@ -17,7 +17,7 @@ export const requestConfig: RequestConfig = {
         message.error(errMsg);
       }
       console.log('errorHandler+++++++++++++++', error, opts);
-      if (response.status === 401) {
+      if (response?.status === 401) {
         clearAtomStorage(userAtom);
 
         history.push('/login', { replace: true });

src/utils/fetch-chunk-data.ts

@@ -1,5 +1,26 @@
 import qs from 'query-string';
 
+const extractJSON = (dataStr: string) => {
+  const regex = /data:\s*({.*?})(?=\n|$)/g;
+  let match;
+  const results: any[] = [];
+
+  if (!dataStr) {
+    return results;
+  }
+
+  while ((match = regex.exec(dataStr)) !== null) {
+    try {
+      results.push(JSON.parse(match[1]));
+    } catch (error) {
+      console.error('JSON parse error:', error, 'for match:', match[1]);
+
+      continue;
+    }
+  }
+
+  return results;
+};
 /**
  *
  * @param params data: for post request, params: for get request
@@ -48,6 +69,9 @@ export const readStreamData = async (
 
   let chunk = decoder.decode(value, { stream: true });
   console.log('chunk==========', chunk);
-  callback(chunk);
+  extractJSON(chunk).forEach((data) => {
+    callback?.(data);
+  });
+  // callback(chunk);
   await readStreamData(reader, decoder, callback);
 };