Introduce performance chart

deiteris · Aug 3, 2024 · 60cfae7 · 60cfae7
1 parent b1aa1c5
commit 60cfae7
Show file tree

Hide file tree

Showing 4 changed files with 152 additions and 2 deletions.
diff --git a/client/demo/package-lock.json b/client/demo/package-lock.json
diff --git a/client/demo/package.json b/client/demo/package.json
@@ -61,7 +61,9 @@
         "@fortawesome/free-regular-svg-icons": "^6.5.1",
         "@fortawesome/free-solid-svg-icons": "^6.5.1",
         "@fortawesome/react-fontawesome": "^0.2.0",
+        "chart.js": "^4.4.3",
         "react": "^18.2.0",
+        "react-chartjs-2": "^5.2.0",
         "react-dom": "^18.2.0",
         "react-toastify": "^10.0.5"
     }

diff --git a/client/demo/src/components/demo/components2/101-0_Portrait.tsx b/client/demo/src/components/demo/components2/101-0_Portrait.tsx
@@ -1,6 +1,30 @@
 import React, { useEffect, useMemo, useRef, useState } from "react";
 import { useAppState } from "../../../001_provider/001_AppStateProvider";
 import { useMessageBuilder } from "../../../hooks/useMessageBuilder";
+import {
+    Chart as ChartJS,
+    CategoryScale,
+    LinearScale,
+    PointElement,
+    LineElement,
+    Title,
+    Tooltip,
+    LineController,
+    Filler,
+  } from 'chart.js';
+import { Chart } from 'react-chartjs-2';
+
+ChartJS.register(
+    CategoryScale,
+    LinearScale,
+    PointElement,
+    LineElement,
+    Title,
+    Tooltip,
+    LineController,
+    Filler,
+);
+
 export type PortraitProps = {};
 
 // @ts-ignore
@@ -9,11 +33,14 @@ export const Portrait = (_props: PortraitProps) => {
     const { serverSetting, performance } = useAppState();
     const messageBuilderState = useMessageBuilder();
 
+    const [perfTooltip, setPerfTooltip] = useState(0);
+    const elPerfChartRef = useRef<ChartJS | null>(null);
     const elVolRef = useRef<HTMLElement | null>(null);
     const elChunkTimeRef = useRef<HTMLElement | null>(null);
     const elPingRef = useRef<HTMLElement | null>(null);
     const elTotalRef = useRef<HTMLElement | null>(null);
     const elPerfRef = useRef<HTMLElement | null>(null);
+    const MAX_DATA_POINTS = 50;
 
     const [lastReport, setLastReport] = useState(Date.now())
 
@@ -30,7 +57,7 @@ export const Portrait = (_props: PortraitProps) => {
     }, [serverSetting.serverSetting.modelSlotIndex, serverSetting.serverSetting.modelSlots]);
 
     useEffect(() => {
-        if (!elVolRef.current || !elChunkTimeRef.current || !elPingRef.current || !elTotalRef.current || !elPerfRef.current) {
+        if (!elVolRef.current || !elPerfChartRef.current || !elChunkTimeRef.current || !elPingRef.current || !elTotalRef.current || !elPerfRef.current) {
             return;
         }
 
@@ -57,8 +84,36 @@ export const Portrait = (_props: PortraitProps) => {
         elPingRef.current.innerHTML = performance.responseTime.toString();
         elTotalRef.current.innerHTML = totalLatencyTime.toString();
         elPerfRef.current.innerHTML = performance.mainprocessTime.toString();
+
+        if (performance.mainprocessTime > 0) {
+            if (elPerfChartRef.current.data.labels!.length > MAX_DATA_POINTS) {
+                elPerfChartRef.current.data.labels!.shift()
+                elPerfChartRef.current.data.datasets[0].data.shift();
+            }
+            elPerfChartRef.current.data.labels!.push(Date.now())
+            elPerfChartRef.current.data.datasets[0].data.push(performance.mainprocessTime)
+            elPerfChartRef.current.update('none')
+        }
     }, [performance, serverSetting.serverSetting.crossFadeOverlapSize, serverSetting.serverSetting.serverReadChunkSize])
 
+    useEffect(() => {
+        if (!elPerfRef.current) {
+            return
+        }
+
+        const chunkTime = ((serverSetting.serverSetting.serverReadChunkSize * 128 * 1000) / 48000);
+
+        if (perfTooltip > chunkTime) {
+            elPerfRef.current.style.color = '#ff4a4a';
+        } else if (perfTooltip * 1.2 > chunkTime) {
+            elPerfRef.current.style.color = '#ffff00';
+        } else {
+            elPerfRef.current.style.color = '#00ff00';
+        }
+
+        elPerfRef.current.innerHTML = perfTooltip.toString();
+    }, [perfTooltip])
+
     const portrait = useMemo(() => {
         if (!selected) {
             return <></>;
@@ -75,6 +130,69 @@ export const Portrait = (_props: PortraitProps) => {
             <></>
         );
 
+        const options = {
+            responsive: true,
+            maintainAspectRatio: true,
+            interaction: {
+                mode: 'nearest',
+                axis: 'x',
+                intersect: false,
+            },
+            layout: {
+                padding: {
+                    left: -10,
+                    bottom: -10,
+                }
+            },
+            plugins: {
+                tooltip: {
+                    enabled: false,
+                    external: (context: any) => {
+                        if (context.tooltip.dataPoints) {
+                            setPerfTooltip(context.tooltip.dataPoints[0].parsed.y)
+                        }
+                    }
+                },
+                title: {
+                    display: false,
+                },
+            },
+            scales: {
+                x: {
+                    ticks: {
+                        display: false,
+                    },
+                    min: 0,
+                    grid: {
+                        display: false
+                    },
+                },
+                y: {
+                    ticks: {
+                        display: false,
+                    },
+                    min: 0,
+                    grid: {
+                        display: false
+                    },
+                }
+            },
+        };
+
+        const data = {
+            labels: [],
+            datasets: [
+                {
+                    data: [],
+                    fill: true,
+                    borderColor: 'rgb(75, 192, 192)',
+                    backgroundColor: 'rgba(75, 192, 192, 0.5)',
+                    pointRadius: 0,
+                    borderWidth: 1,
+                }
+            ]
+        }
+
         return (
             <div className="portrait-area">
                 <div className="portrait-container">
@@ -95,6 +213,9 @@ export const Portrait = (_props: PortraitProps) => {
                         <p>
                             perf: <span ref={elPerfRef}>0</span> of <span style={{ display: 'inline-block' }}><span ref={elChunkTimeRef}>0</span> ms</span>
                         </p>
+                        <div style={{ border: "1px solid #FFF" }}>
+                            <Chart ref={elPerfChartRef} type="line" options={options} data={data} />
+                        </div>
                     </div>
                     <div className="portrait-area-terms-of-use">{selectedTermOfUseUrlLink}</div>
                 </div>

diff --git a/client/demo/src/css/App.css b/client/demo/src/css/App.css
@@ -1313,7 +1313,7 @@ body {
                 background: var(--company-color2);
                 color: white;
                 position: absolute;
-                padding: 0px 0px 0px 3px;
+                padding: 3px;
                 font-size: 0.7rem;
                 left: 5px;
                 top: 5px;