Add hide your mess behind demo (background blurring JS demo) (#26)

* adding simple app to handle webcam

* gitignore update for nodeJs purposes

* detecting devices done

* Updated view

* tidying renderer and simplifying start/stop button

* Further code cleaning

* attempts to change webcam handler to node-webcam | webcam.capture not a function problem | mock runModel function

* Added icon

* New application UI

* Updated UI

* Hide menu bar

* back to streaming from mediaDevices, but with new GUI (testing version - need to switch to node-webcam or other)

* Removed unnecessary forge config

* Added app info

* Added more linux targets

* streaming using single frames done

* deleting node-webcam from package json

* size of camera image corrected

* path from runModel in renderer to runModel in ov jobs built | problem with passing the image (local resource)

* changing the quality of webcam video

* Added black webcam placeholder

* choosing video source (webcams)

* Small UI fixes

* passing image to ov jobs

* do not toggle sign on button if not clicking the button

* Pass device to the function

* Added cache for the OV models

* raporting inference time: work in progress

* raporting inference time: done

* bug with black placeholder not showing up taken care of

* processing time 0 when not processing | not declaring variable in handler

* converting base64 to mat

* work on image processing | subtraction of processing time from delay

* convertion to mat from imageData, skipping base64, more efficient way

* async taking time function

* Added FPSs

* processing time -> inference time

* FIXED: Error occurred in handler for 'run-model'

* Deleted debugging redundance

* FIXED: RangeError: offset is out of bounds

* small corrections

* work on README

* work on README

* New name in README

* Preprocessing mat function

* Fixing error in padding

* Conversion cv.Mat to ov.Tensor

* preparation to interference

* work on model inference - program stops after a few loops

* semaphore to handle async functions

* cleaning code

* results of inference

* preparation to postprocessing

* normalize data in tensor (0-1) | work in progress on postprocessing

* mask postprocessing

* gausian blur function corrected | minor changes

* 2 options mat resizing | work on blurring

* mat resize:  5.1266000010073185

* mat and array resize time in comment

* everything mock implemented | error occured & really not efficiant

* logging | took inverseConditionMat to global | bitwise_and causes problems

* TODO: optimization, blurred/org merging, displaying the final image

* stop counting when display stopped

* condition mat to be changed - too time consuming and not working properly

* deleted kernel errors file

* displaying the mat - work in progress

* mask threshold

* ImageData object transferred to renderer

* EOD | nothing valuable, just saving my effort

* ImageData declared in front, DISPLAYING IMAGE WORKS

* Cleaning code | Faster mat to tensor conversion

* mat resizing back to OpenCV

* deleting kernel error + git ignore

* not using helpers

* Small code refactor

* work on postprocessing: softmax analysis

* Small renderer refactor

* mask and blurring done

* merging images works

* all functionalities implemented

* code cleaning

* counting average time inference from 50 last inferences

* taking blurring to seperate function

* access to blurring from frontend

* async inference + blur

* blur -> resize ( time saving 150 -> 70)

* deleting kernel errors file + typo in gitignore

* contribution to demos README

* adding photo to demos readme

* updating README and changing the app name

* changing the way of uploading image in demos README

* check if it's compiled before reading model

* check for mat size (enabling change for webcam with different quality)

* fixing the oversight in previous commit

* adding inference switch

* First inference done before changing the switch

* small visual changes

* new photo in demos readme

* hide your mess README

* maybe stackblur canvas?

* attempts to create a model for blurring

* PostProcModel working

* converting model to OpenVINO

* creating model with flexible input

* version without padding | back to OpenCV blur

* OV blurring model creation fixed and testing functions deleted

* blurring changed to model

* changing the folder name

* back to MVP

* Preparing for publishing

* readme update

* readme mistake fixed

* updated photos in hymb demo README

* updated images in demos readme

* small changes in UI

* preparing code for publishing | code rewiev with Adrian

* semaphore moved to ov jobs

* new ideas | code rewiev with Adrian

* Small code changes

---------

Co-authored-by: Adrian Boguszewski <[email protected]>

.gitignore

@@ -112,3 +112,7 @@ pipcache_openvino/
 
 # PySpelling generated dictionary
 .ci/spellcheck/dictionary
+
+# NodeJS 
+demos/*/node_modules/**
+**/kernel.errors.txt

demos/README.md

@@ -46,6 +46,18 @@ The demo works as a virtual healthcare assistant, whose task is to greet the pat
 | Platforms                                         | Client (CPU, GPU, NPU), Cloud (CPU, GPU)                   |
 | Owner                                             | [@adrianboguszewski](https://github.com/adrianboguszewski) |
 
+### 🔮 Hide Your Mess Behind
+
+The demo blurs the background behind a person on a webcam. The app is built using NodeJS and Electron technologies. It can be run from the compiled exe file or using npm.
+
+[![image](https://github.com/user-attachments/assets/e6925e6b-0d81-41da-b9b0-c4f21f173681)](hide_your_mess_behind_demo)
+
+| [Hide Your Mess Behind](hide_your_mess_behind_demo) |                                                                                       |
+|--------------------------------------|------------------------------------------------------------------------------------------------------|
+| Related AI concepts                  | image segmentation                                                                                   |
+| Platforms                            | Client (CPU, GPU, NPU), Edge (CPU)                                                                   |
+| Owner                                | [@Roszczyk](https://github.com/Roszczyk), [@adrianboguszewski](https://github.com/adrianboguszewski) |
+
 ### 💃 Strike a pose
 
 The demo estimates poses of all people standing in front of the webcam.

demos/hide_your_mess_behind_demo/.gitignore

@@ -0,0 +1,92 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+lerna-debug.log*
+
+# Diagnostic reports (https://nodejs.org/api/report.html)
+report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json
+
+# Runtime data
+pids
+*.pid
+*.seed
+*.pid.lock
+.DS_Store
+
+# Directory for instrumented libs generated by jscoverage/JSCover
+lib-cov
+
+# Coverage directory used by tools like istanbul
+coverage
+*.lcov
+
+# nyc test coverage
+.nyc_output
+
+# node-waf configuration
+.lock-wscript
+
+# Compiled binary addons (https://nodejs.org/api/addons.html)
+build/Release
+
+# Dependency directories
+node_modules/
+jspm_packages/
+
+# TypeScript v1 declaration files
+typings/
+
+# TypeScript cache
+*.tsbuildinfo
+
+# Optional npm cache directory
+.npm
+
+# Optional eslint cache
+.eslintcache
+
+# Optional REPL history
+.node_repl_history
+
+# Output of 'npm pack'
+*.tgz
+
+# Yarn Integrity file
+.yarn-integrity
+
+# dotenv environment variables file
+.env
+.env.test
+
+# parcel-bundler cache (https://parceljs.org/)
+.cache
+
+# next.js build output
+.next
+
+# nuxt.js build output
+.nuxt
+
+# vuepress build output
+.vuepress/dist
+
+# Serverless directories
+.serverless/
+
+# FuseBox cache
+.fusebox/
+
+# DynamoDB Local files
+.dynamodb/
+
+# Webpack
+.webpack/
+
+# Vite
+.vite/
+
+# Electron-Forge
+out/

demos/hide_your_mess_behind_demo/README.md

@@ -0,0 +1,47 @@
+# Hide Your Mess Behind
+
+## Description
+
+This demo demonstrates how to use the OpenVINO toolkit in NodeJS to blur the background of video. 
+
+## Requirements
+
+Ensure that you have Node.js (with npm) installed on your system. The app was developed and tested using *node v20.15.0* and *npm 10.8.2*.
+
+## Getting started
+
+Before running the app you have to initialize the electron project and install the required packages. Do it by running the following commands in the app folder:
+
+```bash
+npm init -y
+npm install
+```
+
+## Running the Demo
+
+Once you've completed the initial setup, you can start the app anytime by running the following command in the app folder:
+
+```bash
+npm start
+```
+
+### Turn on the video
+
+When you open the app, the following view will appear:
+
+![image](https://github.com/user-attachments/assets/b9852e1e-3fa7-4375-afb9-8976cd9cf325)
+
+Select the chosen video source from the control panel. Then click _Start_ button to start the streaming.
+
+![image](https://github.com/user-attachments/assets/cd5a86e2-8865-4736-93e6-e2e0eb9b37f2)
+
+Later you can turn off streaming by clicking _Stop_ button.
+
+
+### Turn on the inference
+
+To turn on blurring you have to turn on inference using the _Inference_ switch. Below it, you can notice a panel, where you can choose the inference device (e.g. AUTO, GPU, CPU, NPU). 
+
+![image](https://github.com/user-attachments/assets/e6925e6b-0d81-41da-b9b0-c4f21f173681)
+
+You can change the inference device or video source, and turn on and off inference, and streaming anytime.