From 3e61728e860870fac2f8514c4f7c6bcf414ca68d Mon Sep 17 00:00:00 2001
From: AmoebaChant <10319625+AmoebaChant@users.noreply.github.com>
Date: Wed, 18 Sep 2024 14:44:14 -0700
Subject: [PATCH] Debug UI (#53)

---
 packages/demo/src/fhl.ts                     | 33 ++++++++++++++++-
 packages/demo/src/fhl/smartFilterVideoApp.ts | 39 ++++++++++++++++++--
 packages/demo/www/fhl.html                   | 37 ++++++++++++++++++-
 3 files changed, 103 insertions(+), 6 deletions(-)

diff --git a/packages/demo/src/fhl.ts b/packages/demo/src/fhl.ts
index a3e0a649..bab38c06 100644
--- a/packages/demo/src/fhl.ts
+++ b/packages/demo/src/fhl.ts
@@ -5,6 +5,9 @@ import { Observable } from "@babylonjs/core/Misc/observable";
 // Read page elements
 const likeButton = document.getElementById("likeButton") as HTMLButtonElement;
 const outputCanvas = document.getElementById("outputCanvas") as HTMLCanvasElement;
+const debugUi = document.getElementById("debugUi") as HTMLDivElement;
+const avgProcessingTimeDiv = document.getElementById("avgProcessingTime") as HTMLDivElement;
+const fpsDiv = document.getElementById("fps") as HTMLDivElement;
 
 // Register button click handlers
 const onLikeClickedObservable = new Observable<void>();
@@ -12,9 +15,37 @@ likeButton.addEventListener("click", () => {
     onLikeClickedObservable.notifyObservers();
 });
 
+// Debug UI update code
+const onNewAverageFrameProcessingValue: Observable<number> = new Observable<number>();
+onNewAverageFrameProcessingValue.add((value) => {
+    avgProcessingTimeDiv.innerText = `${value.toFixed(2)}ms`;
+});
+const onNewFpsValue: Observable<number> = new Observable<number>();
+onNewFpsValue.add((value) => {
+    fpsDiv.innerText = value.toFixed(2);
+});
+
 // Initialize the SmartFilter Video App
 console.log("Initializing SmartFilter Video App...");
-const videoApp = new SmartFilterVideoApp(outputCanvas, onLikeClickedObservable);
+const videoApp = new SmartFilterVideoApp(
+    outputCanvas,
+    onLikeClickedObservable,
+    onNewAverageFrameProcessingValue,
+    onNewFpsValue
+);
+
+// Set up hidden keystroke approach to showing the debug UI
+document.addEventListener("keydown", (e) => {
+    if (debugUi.style.display === "none") {
+        if (e.key === "d") {
+            debugUi.style.display = "block";
+        }
+    } else {
+        if (e.key === "Escape") {
+            debugUi.style.display = "none";
+        }
+    }
+});
 
 /**
  * Main function to initialize the app.
diff --git a/packages/demo/src/fhl/smartFilterVideoApp.ts b/packages/demo/src/fhl/smartFilterVideoApp.ts
index 906dc6b9..fa245db4 100644
--- a/packages/demo/src/fhl/smartFilterVideoApp.ts
+++ b/packages/demo/src/fhl/smartFilterVideoApp.ts
@@ -10,13 +10,18 @@ import { ReactionsSmartFilter } from "./reactionsSmartFilter";
 import type { IEffect } from "./effects/IEffect";
 import { LikeEffect } from "./effects/likeEffect";
 import type { Observable } from "@babylonjs/core/Misc/observable";
+import { PerfCounter } from "@babylonjs/core/Misc/perfCounter";
 
 export const SMART_FILTER_EFFECT_ID = "f71bd30b-c5e9-48ff-b039-42bc19df95a8";
 export const LOCAL_SMART_FILTER_EFFECT_ID = "fb9f0fab-9eb9-4756-8588-8dc3c6ad04d0";
 
 export class SmartFilterVideoApp {
-    private _outputCanvas: HTMLCanvasElement;
-    private _onLikeClickedObservable: Observable<void>;
+    private readonly _outputCanvas: HTMLCanvasElement;
+    private readonly _onLikeClickedObservable: Observable<void>;
+    private _frameProcessingTimePerfCounter: PerfCounter = new PerfCounter();
+    private _frameCount: number = 0;
+
+    private _timeOfLastDebugUpdate: number = 0;
 
     private _engine: ThinEngine;
     private _internalInputTexture: InternalTexture;
@@ -25,9 +30,19 @@ export class SmartFilterVideoApp {
     private _currentEffect: Nullable<IEffect> = null;
     private _smartFilterRuntime: Nullable<SmartFilterRuntime> = null;
 
-    constructor(outputCanvas: HTMLCanvasElement, onLikeClickedObservable: Observable<void>) {
+    private readonly _onNewAverageFrameProcessingValue: Observable<number>;
+    private readonly _onNewFpsValue: Observable<number>;
+
+    constructor(
+        outputCanvas: HTMLCanvasElement,
+        onLikeClickedObservable: Observable<void>,
+        onNewAverageFrameProcessingValue: Observable<number>,
+        onNewFpsValue: Observable<number>
+    ) {
         this._outputCanvas = outputCanvas;
         this._onLikeClickedObservable = onLikeClickedObservable;
+        this._onNewAverageFrameProcessingValue = onNewAverageFrameProcessingValue;
+        this._onNewFpsValue = onNewFpsValue;
 
         this._engine = new ThinEngine(this._outputCanvas);
 
@@ -72,9 +87,13 @@ export class SmartFilterVideoApp {
             }
         });
         this._currentEffect.start();
+
+        this._frameProcessingTimePerfCounter = new PerfCounter();
     }
 
     async videoFrameHandler(frame: videoEffects.VideoFrameData): Promise<VideoFrame> {
+        this._frameProcessingTimePerfCounter.beginMonitoring();
+        this._frameCount++;
         try {
             const videoFrame = frame.videoFrame as VideoFrame;
 
@@ -98,6 +117,20 @@ export class SmartFilterVideoApp {
         } catch (e) {
             console.error(e);
             throw e;
+        } finally {
+            this._frameProcessingTimePerfCounter.endMonitoring();
+
+            const currentTime = performance.now();
+            const timeSinceLastDebugUpdate = currentTime - this._timeOfLastDebugUpdate;
+
+            if (timeSinceLastDebugUpdate >= 1000) {
+                this._timeOfLastDebugUpdate = currentTime;
+                this._onNewAverageFrameProcessingValue.notifyObservers(
+                    this._frameProcessingTimePerfCounter.lastSecAverage
+                );
+                this._onNewFpsValue.notifyObservers(this._frameCount / (timeSinceLastDebugUpdate / 1000));
+                this._frameCount = 0;
+            }
         }
     }
 
diff --git a/packages/demo/www/fhl.html b/packages/demo/www/fhl.html
index b1f853ff..4694f7ec 100644
--- a/packages/demo/www/fhl.html
+++ b/packages/demo/www/fhl.html
@@ -10,17 +10,23 @@
             body {
                 background-color: #f5f5f5;
                 text-align: center;
+                font-family: Arial, Helvetica, sans-serif;
+                font-size: 10pt;
             }
+
             .topContainer {
                 display: flex;
-                flex-direction: row;
-                justify-content: center;
+                flex-direction: column;
+                align-items: center;
             }
+
             .dialog {
                 border-radius: 4px;
                 background-color: white;
                 filter: drop-shadow(0 0 2px rgba(0, 0, 0, 0.12)) drop-shadow(0 8px 16px rgba(0, 0, 0, 0.14));
                 padding: 14px 16px;
+                display: flex;
+                margin-bottom: 50px;
             }
 
             .reactionCollection {
@@ -62,9 +68,26 @@
                 width: 32px;
                 transform: scale(0.75);
             }
+
             .buttonContainer:hover {
                 transform: unset;
             }
+
+            .debugData {
+                display: grid;
+                width: 150px;
+                grid-template-columns: auto auto;
+            }
+
+            .debugLabel {
+                text-align: right;
+            }
+
+            .debugValue {
+                text-align: left;
+                min-width: 40px;
+                margin-left: 3px;
+            }
         </style>
     </head>
     <body>
@@ -113,6 +136,16 @@
                     </div>
                 </div>
             </div>
+            <div id="debugUi" style="display: none">
+                <div class="dialog">
+                    <div class="debugData">
+                        <div class="debugLabel" style="grid-column: 1; grid-row: 1">FPS:</div>
+                        <div class="debugValue" style="grid-column: 2; grid-row: 1" id="fps"></div>
+                        <div class="debugLabel" style="grid-column: 1; grid-row: 2">Avg proc time:</div>
+                        <div class="debugValue" style="grid-column: 2; grid-row: 2" id="avgProcessingTime"></div>
+                    </div>
+                </div>
+            </div>
         </div>
 
         <canvas height="1080" width="1920" id="inputCanvas" style="display: none"></canvas>