Hey guys,
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 2
and I have integrated the same source code, shared by him on GitHub (https://github.com/mgechev/angular-tfjs-demo 3) 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:
@tensorflow-models/handpose: 0.0.7
@tensorflow/tfjs-backend-webgl: 3.7.0
@tensorflow/tfjs-converter: 3.7.0
@tensorflow/tfjs-core: 3.7.0
fingerpose: 0.0.2
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 7
and video here: How TensorFlow.js Became a Performance Bottleneck for My App - YouTube 4
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
My app is available online here: https://angular-dynamic-stepper-4a371.web.app 3
The source code is on GitHub here: https://github.com/rakia/ng-dynamic-stepper 5
I appreciate it if you could give me any note that could help me to fix this memory leak. Many thanks!

continuous_increase_heap_snapshot_8-vs-71915×1034 232 KB


continuous_increase_heap_snapshot_14-vs-131921×989 257 KB