Merge pull request #161 from deiteris/perf-metrics-improve

Improve performance metrics UI
deiteris · Jul 31, 2024 · 45063ad · 45063ad
2 parents 80e3800 + acde204
commit 45063ad
Show file tree

Hide file tree

Showing 4 changed files with 16 additions and 12 deletions.
diff --git a/client/demo/dist/index.js b/client/demo/dist/index.js
diff --git a/client/demo/src/components/demo/components2/101-0_Portrait.tsx b/client/demo/src/components/demo/components2/101-0_Portrait.tsx
@@ -44,6 +44,14 @@ export const Portrait = (_props: PortraitProps) => {
         const chunkTime = ((serverSetting.serverSetting.serverReadChunkSize * 128 * 1000) / 48000);
         const totalLatencyTime = Math.ceil(chunkTime + performance.responseTime + serverSetting.serverSetting.crossFadeOverlapSize * 1000);
 
+        if (performance.mainprocessTime > chunkTime) {
+            elPerfRef.current.style.color = '#ff4a4a';
+        } else if (performance.mainprocessTime * 1.2 > chunkTime) {
+            elPerfRef.current.style.color = '#ffff00';
+        } else {
+            elPerfRef.current.style.color = '#00ff00';
+        }
+
         elVolRef.current.innerHTML = volumeDb.toString();
         elChunkTimeRef.current.innerHTML = chunkTime.toFixed(1);
         elPingRef.current.innerHTML = performance.responseTime.toString();
@@ -78,17 +86,14 @@ export const Portrait = (_props: PortraitProps) => {
                         <p>
                             vol(in): <span ref={elVolRef}>-90</span> dB
                         </p>
-                        <p>
-                            buf: <span ref={elChunkTimeRef}>0</span> ms
-                        </p>
                         <p>
                             ping: <span ref={elPingRef}>0</span> ms
                         </p>
                         <p>
                             total: <span ref={elTotalRef}>0</span> ms
                         </p>
                         <p>
-                            perf: <span ref={elPerfRef}>0</span> ms
+                            perf: <span ref={elPerfRef}>0</span> of <span style={{ display: 'inline-block' }}><span ref={elChunkTimeRef}>0</span> ms</span>
                         </p>
                     </div>
                     <div className="portrait-area-terms-of-use">{selectedTermOfUseUrlLink}</div>

diff --git a/client/demo/src/css/App.css b/client/demo/src/css/App.css
@@ -1310,7 +1310,7 @@ body {
             }
             .portrait-area-status {
                 width: 5.5rem;
-                background: rgba(100, 100, 100, 0.5);
+                background: var(--company-color2);
                 color: white;
                 position: absolute;
                 padding: 0px 0px 0px 3px;
@@ -1320,7 +1320,7 @@ body {
                 border-radius: 2px;
                 .portrait-area-status-vctype {
                     font-weight: 800;
-                    color: #866;
+                    color: #FFF;
                 }
             }
             .portrait-area-terms-of-use {

diff --git a/client/lib/worklet/src/voice-changer-worklet-processor.ts b/client/lib/worklet/src/voice-changer-worklet-processor.ts
@@ -43,8 +43,8 @@ class VoiceChangerWorkletProcessor extends AudioWorkletProcessor {
     }
 
     trancateBuffer = (start: number, end?: number) => {
+        console.log(`[worklet] Play buffer size ${this.playBuffer.length}. Truncating with offset ${start}`);
         this.playBuffer = this.playBuffer.slice(start, end)
-        console.log("[worklet] Buffer truncated");
     };
     handleMessage(event: any) {
         const request = event.data as VoiceChangerWorkletProcessorRequest;
@@ -80,10 +80,9 @@ class VoiceChangerWorkletProcessor extends AudioWorkletProcessor {
 
         const f32Data = request.voice;
         const chunkSize = Math.floor(f32Data.length / this.BLOCK_SIZE);
-        const bufferCutoff = chunkSize * 1.25;
-        if (this.playBuffer.length > bufferCutoff) {
-            console.log(`[worklet] Truncate ${this.playBuffer.length} > ${bufferCutoff}`);
-            this.trancateBuffer(this.playBuffer.length - bufferCutoff);
+        if (this.playBuffer.length > chunkSize) {
+            console.log(`[worklet] Truncate ${this.playBuffer.length} > ${chunkSize}`);
+            this.trancateBuffer(this.playBuffer.length - chunkSize);
         }
 
         for (let i = 0; i < chunkSize; i++) {