fix: completion response handler

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);
     }
   };