In the last months, I’ve used the same HandPose model used by Minko Gechev, software engineer at Google Angular team, in his demo here: Controlling an Angular app with a camera via hand gestures - YouTube
and I have integrated the same source code, shared by him on GitHub (https://github.com/mgechev/angular-tfjs-demo) in my Angular application with a slight change in order to be able to navigate between the different steps (or order-creation & product-creation processes) instead of “open/close menu & choose a menu-item”.
Here are the dependencies that I’ve added to my project for the hand gestures feature:
But I’ve faced a performance problem: there is a continuous increase of memory consumption throughout using my application (even after the loading of the hand tracking model is completed and started working). I’ve published an article regarding this topic: https://betterprogramming.pub/web-performance-and-tensorflow-js-3db05b1de958?source=friends_link&sk=3dd881c15f43896d947023b402a9375d
I’ve taken many Heap Snapshots and noticed that whenever I go to the view of editing an order or product where the hand gestures tracking is present and then come back to the products list view (where there is no hand tracking), the size of the snapshot increases by almost 20 MB as you can see in the attached screenshots.
I’m using MacBook Pro 13", Version: macOS 11.5.2
I appreciate it if you could give me any note that could help me to fix this memory leak. Many thanks!