sonic-widget 2.7.21 → 2.7.52

package/README.md

@@ -1,391 +1,399 @@
-# SONIC WIDGET
-
-[![version](https://img.shields.io/npm/v/sonic-widget?style=flat)](https://www.npmjs.com/package/sonic-widget)
-[![downloads](https://img.shields.io/npm/dm/sonic-widget?style=flat)](https://www.npmjs.com/package/sonic-widget)
-[![jsdelivr](https://data.jsdelivr.com/v1/package/npm/sonic-widget/badge)](https://www.jsdelivr.com/package/npm/sonic-widget)
-[![NPM](https://img.shields.io/npm/l/sonic-widget)](https://www.jsdelivr.com/package/npm/sonic-widget)
-
-## Installation:
-
-**Sonic Widget** - _used to show the onboard kyc at your web page itself._
-
-Use this script tag to get access to the widget:
-
-```html
-<script src="https://cdn.jsdelivr.net/npm/sonic-widget@2.7.21/dist/index.min.js"></script>
-```
-
-or 
-
-in **Angular** can be used by installing package from npm
-
-```shell
-npm install sonic-widget
-```
-
-and adding path in `angular.json`
-
-```json
-"scripts": [ "node_modules/sonic-widget/dist/index.js" ]
-```
-
-
-## Implementation Details for Angular TypeScript:
-
-**Steps:-**
-
-1. Create or open an angular TS project.
-
-2. Use this script tag to get access to the widget at initial html page:
-
-```html
-<script src="https://cdn.jsdelivr.net/npm/sonic-widget@2.7.21/dist/index.min.js"></script>
-```
-
-or 
-
-it can be added in `angular.json` by installing the npm package
-
-```json
-"scripts": [ "node_modules/sonic-widget/dist/index.js" ]
-```
-
-3. At `app.component.html`, Add a button with the id **`xxxx`**. It is used to call the widget by on click event.
-
-```html
-<button id="xxxx">Open</button>
-```
-
-4. Add a div tag with the id **`sonic-web-widget`** at the specific place. It is used to display the sonic module with the help of this id.
-
-```html
-<div id="sonic-web-widget"></div>
-```
-
-5. Add a declaration for var *sonic* at TS file `app.component.ts`.
-
-```ts
-declare var sonic: any;
-```
-
-6. Next, add the functionality to call widget in the base of onInit.
-
-```ts
-ngOnInit(): void {
-	
-	const config = {
-		baseurl: string, // the base url of the backend server
-		docModelPath: string, // the doc model url of the document recognition process 
-		maskModelPath: string, // the mask model url of the mask detect process
-		faceModelUrl: string, // the face model url of the face recognition process
-      	handModelUrl: string, // the hand model url of the hand recognition process
-      	objectModelUrl: string, // the object model url of the object recognition process
-		ipInfoKey: string, 
-		googleMapKey: string,
-		showPage: boolean, // used to show the page or not
-		speedCheckURL: string, // public URL of the internet speed check
-		videoURL: string, // url of video to do (e.g: demo doing kyc) (Optional)
-		appId: string, // application policy identifier
-		accountId: string, // account can be taken from operator axiom account
-		appName: string, // representing name of the application (Optional)
-		userName: string, // user prospective data
-		userId: string, // user document number to identity
-		email: string, // user prospective data
-		phone: string, // user prospective data
-		applicationNo: string, // user prospective data
-		isMalay: boolean, //used to change the default language english to malay
-		branchId: string, //used to identify the bank branch
-		sendLogsEmail: boolean, //used to send logs through email
-		blinkThreshold: number, // used for blink threshold
-		eyeOpenThreshold: number, // used for eye open threshold
-		disableUploadDocs: boolean, // used to show/hide the upload docs option.
-		objectPersonThreshold: number, // used for object Person score threshold
-		objectPhoneThreshold: number, // used for object Phone score threshold
-		grayscalePercentageThreshold: number, // used for black&white percentage score threshold
-		onMessage: function (data) {}, // callback function, when api response message or error or any other actions
-	};
-
-	// get the element used in the action button 
-	var container = document.getElementById('xxxx');
-	// on click of element widget works
-	container?.addEventListener('click', function () {
-		sonic?.SonicWidget(config);
-	});
-}
-```
-
-7. Add service worker for widget to protect the multiple calls for tensorflow. So, it will have cache to reuse it. Here, I'm adding `service-worker.js` file at `src/assets` folder. So, below steps will be based on this file path.
-
-```javascript
-const CACHE_NAME = 'demo-app-ai-tensorflow-models-cache-v1';
-const urlsToCache = [
-    // coco ssd - tensorflow model
-    // document model - teachable machine drive link or folder path 
-    // mask model - teachable machine drive link or folder path 
-    // face landmark model - mediapipe tasks-vision
-    // hand landmark model - mediapipe tasks-vision
-    // Add more model files if necessary
-  ]
-
-self.addEventListener('install', function(event) {
-  // Perform install steps
-  event.waitUntil(
-    caches.open(CACHE_NAME)
-      .then(function(cache) {
-        return cache.addAll(urlsToCache);
-      })
-  );
-});
-
-self.addEventListener('fetch', function(event) {
-    const request = event.request;
-  
-    // Skip caching for requests from browser extensions
-    if (request.url.startsWith('chrome-extension://')) {
-      return;
-    }
-  
-    event.respondWith(
-      caches.match(request)
-        .then(function(response) {
-          // Cache hit - return response
-          if (response) {
-            return response;
-          }
-  
-          // Clone the request
-          const fetchRequest = request.clone();
-  
-          return fetch(fetchRequest).then(
-            function(response) {
-              // Check if we received a valid response
-              if(!response || response.status !== 200 || response.type !== 'basic') {
-                return response;
-              }
-  
-              // Clone the response
-              const responseToCache = response.clone();
-              // Save the response for future matching
-              caches.open(CACHE_NAME)
-                .then(function(cache) {
-                  cache.put(request, responseToCache);
-                });
-  
-              return response;
-            }
-          );
-        })
-    );
-});
-```
-8. Use this script tag to get access to the service worker at initial html page:
-
-```html
-<script src="src/assets/service-worker.js"></script>
-```
-
-or 
-
-it can be added in `angular.json` by installing the npm package
-
-```json
-"scripts": [ ..., "src/assets/service-worker.js" ]
-```
-
-9. Register the service worker at your required place:
-```ts
-	ngAfterViewInit(): void {
-		if ('serviceWorker' in navigator) {
-			window.addEventListener('load', () => {
-				navigator.serviceWorker.register('/demo-app/assets/service-worker.js').then(
-					(registration) => {
-						console.log(
-							'ServiceWorker registered with scope: ',
-							registration.scope
-						);
-					},
-					(err) => {
-						console.error('ServiceWorker registration failed: ', err);
-					}
-				);
-			});
-		}
-	}
-```
-
-&nbsp;
-
-## Implementation Details for Vanilla JavaScript:
-
-**Steps:-**
-
-1. Create or open an html file.
-
-2. Add a button with the id **`xxxx`**. It is used to call the widget by on click event.
-
-```html
-<button id="xxxx">Open</button>
-```
-
-3. Add a div tag with the id **`sonic-web-widget`** at the last or beginning of the body tag. It is used to display the sonic module with the help of this id.
-
-```html
-<div id="sonic-web-widget"></div>
-```
-
-4. Add a Script tag to the head tag or body tag. And use the latest version.
-
-```html
-<script src="https://cdn.jsdelivr.net/npm/sonic-widget@2.7.21/dist/index.min.js"></script>
-```
-
-5. Next, add the script tag at a necessary place. But add below the widget script.
-
-```html
-<script>
-	const config = {
-		baseurl: string, // the base url of the backend server
-		docModelPath: string, // the doc model url of the document recognition process
-		maskModelPath: string, // the mask model url of the mask detect process
-		faceModelUrl: string, // the face model url of the face recognition process
-      	handModelUrl: string, // the hand model url of the hand recognition process
-      	objectModelUrl: string, // the object model url of the object recognition process
-		ipInfoKey: string, 
-		googleMapKey: string,
-		showPage: boolean, // used to show the page or not
-		speedCheckURL: string, // public URL of the internet speed check
-		videoURL: string, // url of video to do (e.g: demo doing kyc) (Optional)
-		appId: string, // application policy identifier
-		appName: string, // representing name of the application (Optional)
-		accountId: string, // account can be taken from operator axiom account
-		userName: string, // user prospective data
-		userId: string, // user document number to identity
-		email: string, // user prospective data
-		phone: string, // user prospective data
-		applicationNo: string, // user prospective data
-		isMalay: boolean, //used to change the default language english to malay
-		branchId: string, // branch id to identify the branch of the bank
-		sendLogsEmail: boolean, //used to send logs through email
-		blinkThreshold: number, // threshold used to calculate the user's eye blinked or not, with range limit 0-1(default value is 0.35)
-		eyeOpenThreshold: number, // threshold used to calculate the user's eye open or not, with range limit 0-1(default value is 0.2)
-		disableUploadDocs: boolean, // used to pass a boolean value. It is used to disable the upload option the document process
-		objectPersonThreshold: number, // used for object Person score threshold with range limit 0-1(default value is 0.925)
-		objectPhoneThreshold: number, // used for object Phone score threshold with range limit 0-1(default value is 0.5)
-		grayscalePercentageThreshold: number, // used for black&white percentage score threshold with range limit 0-100(default value is 80)
-		onMessage: function (data) {}, // callback function, when api response message or error or any other actions
-	};
-	// get the element used in the action button 
-	var container = document.getElementById('xxxx');
-	// on click of element widget works
-	container.addEventListener('click', function () {
-		sonic.SonicWidget(config);
-	});
-</script>
-```
-
-_Here, the config variable is used to pass the data. And the container variable is to get the dom element of the id **`xxxx`** button and add it to the event listener. It checks if the button is clicked and sends the config object data to the **`sonic`** module.
-**`sonic.SonicWidget(config)`**_
-
-_You can get the logs with **`onMessage`** for all actions and stages.
-Check with **`data.code`**_
-
-```
-0 - info message from application 
-1 - success api call
--1 - failed api call
--2 - error message from application 
--3 - configuration error message 
-2 - on close application
-```
-
-**Note:-**
-
-<!-- - _**`serviceWorkerPath`** should pass as a string value. It is used as the service worker path and its default path is **`/demo-app/assets/service-worker.js`** and Cache name should be different to fix conflict._ -->
-- _**`baseurl`** should pass as a string value. It is used as the base URL for API calls._
-- _**`docModelPath`** should pass as a string value. It is used as the base URL for document model._
-- _**`maskModelPath`** should pass as a string value. It is used as the base URL for mask model._
-- _**`faceModelUrl`** should pass as a string value. It is used as the base URL for task vision face model._
-- _**`handModelUrl`** should pass as a string value. It is used as the base URL for task vision hand model._
-- _**`objectModelUrl`** should pass as a string value. It is used as the base URL for coco-ssd object model._
-- _**`showPage`** is used to pass a boolean value ( **`true`** or **`false`** ). To toggle the widget page open or close._
-- _**`speedCheckURL`** should pass as a string value. It is used to detect internet speed and intimate the user._
-- _**`videoURL`** should pass as a string value as url. It is used to show the video onboard sonic kyc and it is optional._
-- _**`accountId`** should pass as a string value. It is used to get the JWT token and proceed with the operator account._
-- _**`isMalay`** is used to pass a boolean value ( **`true`** or **`false`** ). To toggle the widget default language english or malay._
-- _**`branchId`** should pass as a string value. It is used to find bank branch available for operator account for onboard sonic kyc._
-- _**`appId`** should pass as a string value. It is used to find an application policy for onboard sonic kyc._
-- _**`appName`** should pass as a string value. It is used for onboard kyc application name. it is optional and default **`Sonic`** ._
-- _**`userName`** should pass as a string value. It is used to create an application for onboard sonic kyc._
-- _**`userId`** should pass as a string value. It is used to create an application for onboard sonic kyc and to compare your identity with the document._
-- _**`email`** should pass as a string value. It is used to create an application for onboard sonic kyc._
-- _**`phone`** should pass as a string value. It is used to create an application for onboard sonic kyc._
-- _**`applicationNo`** should pass as a string value. It is used to create an application for onboard sonic kyc._
-- _**`sendLogsEmail`** is used to pass a boolean value. It is used to send logs to client email address._
-- _**`blinkThreshold`** is used to pass a numerical value. It is used to check the user blinking (range 0-1 and default 0.35). Above the threshold consider to be blinking or eye closed._
-- _**`disableUploadDocs`** is used to pass a boolean value. It is used to disable the upload option the document process._
-- _**`eyeOpenThreshold`** is used to pass a numerical value. It is used to check the user eyes are open (range 0-1 and default 0.2). Below the threshold consider to be eyes are open._
-- _**`objectPersonThreshold`** is used to pass a numerical value. It is used to check the image person as object found with required score as threshold (range 0-1 and default 0.925)._
-- _**`objectPhoneThreshold`** is used to pass a numerical value. It is used to check the image phone/laptop as object found with required score as threshold (range 0-1 and default 0.5)._
-- _**`grayscalePercentageThreshold`** is used to pass a numerical value for percentage. It is used to check the image color as black&white found with required percentage as threshold (range 0-100 and default 80)._
-- _**`onMessage`** is a callback function. It is getting called when the API gives a message or at any configuration error. Return data is an object with its API endpoint and result._
-
-
-<!-- ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ DEVELOPER info ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ -->
-
-<!-- use node 18 and install packages using yarn and do yarn dev -->
-
-<!-- env -->
-
-<!-- 
-VITE_APP_DOCUMENT_DETECT_PATH=""
-VITE_APP_MASK_DETECT_PATH=""
-VITE_APP_COCO_SSD_OBJECT_URL="https://storage.googleapis.com/tfjs-models/savedmodel/ssdlite_mobilenet_v2/model.json"
-VITE_APP_TASK_VISION_WASM_PATH="https://cdn.jsdelivr.net/npm/@mediapipe/tasks-vision/wasm"
-VITE_APP_TASK_VISION_FACE_URL="https://storage.googleapis.com/mediapipe-models/face_landmarker/face_landmarker/float16/1/face_landmarker.task"
-VITE_APP_TASK_VISION_HAND_URL="https://storage.googleapis.com/mediapipe-models/hand_landmarker/hand_landmarker/float16/1/hand_landmarker.task"
-
-VITE_APP_THIRD_PARTY_GET_IP_URL="https://ipv4.icanhazip.com"
- -->
-
-<!-- ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ GrayScale info ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ -->
-
-<!-- GrayScale Suggestions
-
-1. RGB Difference Threshold for Grayscale Detection:
-
-Low Threshold: A low threshold (e.g., 5-10) is good if you want to consider any slight variation in color as an indication that the image is colored. This is more sensitive to minor color differences.
-
-Moderate Threshold: A threshold of around 10-20 is a more balanced approach. It allows for small variations due to noise or minor imperfections in grayscale images but still classifies them as black and white.
-
-High Threshold: A higher threshold (e.g., 20-50) will classify images as grayscale even if there are noticeable color variations, which might be acceptable for images that are predominantly black and white but have some color noise or artifacts.
-
-2. Percentage of Grayscale Pixels:
-
-After detecting grayscale pixels, you need to determine the percentage of grayscale pixels required to classify the image as black and white.
-
-80-90% Grayscale Pixels: This threshold means that if 80-90% of the pixels are grayscale, the image will be classified as black and white. This works well for documents and images that are mostly grayscale but may have some minor color elements (e.g., stamps, logos).
-
-90-100% Grayscale Pixels: This is a stricter threshold, ensuring that the image is classified as black and white only if nearly all pixels are grayscale. -->
-
-<!-- ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ Selfie info ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ -->
-
-<!-- 
-1.blinkThreshold: number
-
-Description : The blinkThreshold is used to determine whether the user's eye is considered blinked. It represents the sensitivity to eye closure during a blink.
-Range : 0-1 (default: 0.35)
-Functionality :
-* If either of the user's eyes exceeds the specified threshold (i.e., the eye closure ratio is greater than the blinkThreshold), the eye is detected as "blinked."
-* This helps identify blinks during facial detection or tracking processes.
-
-2.eyeOpenThreshold: number
-
-Description : The eyeOpenThreshold is used to detect whether the user's eyes are open or not. It determines the sensitivity to eye openness by checking the openness ratio.
-Range : 0-1 (default: 0.25)
-Functionality :
-* If both eyes fall below the defined threshold, the system interprets that the eyes are open.
-* This value helps differentiate between an open eye and a partially closed
-
-Both thresholds work together to archive ekyc selfie process. 
--->
-
+# SONIC WIDGET
+
+[![version](https://img.shields.io/npm/v/sonic-widget?style=flat)](https://www.npmjs.com/package/sonic-widget)
+[![downloads](https://img.shields.io/npm/dm/sonic-widget?style=flat)](https://www.npmjs.com/package/sonic-widget)
+[![jsdelivr](https://data.jsdelivr.com/v1/package/npm/sonic-widget/badge)](https://www.jsdelivr.com/package/npm/sonic-widget)
+[![NPM](https://img.shields.io/npm/l/sonic-widget)](https://www.jsdelivr.com/package/npm/sonic-widget)
+
+## Installation:
+
+**Sonic Widget** - _used to show the onboard kyc at your web page itself._
+
+Use this script tag to get access to the widget:
+
+```html
+<script src="https://cdn.jsdelivr.net/npm/sonic-widget@2.7.52/dist/index.min.js"></script>
+```
+
+or 
+
+in **Angular** can be used by installing package from npm
+
+```shell
+npm install sonic-widget
+```
+
+and adding path in `angular.json`
+
+```json
+"scripts": [ "node_modules/sonic-widget/dist/index.js" ]
+```
+
+
+## Implementation Details for Angular TypeScript:
+
+**Steps:-**
+
+1. Create or open an angular TS project.
+
+2. Use this script tag to get access to the widget at initial html page:
+
+```html
+<script src="https://cdn.jsdelivr.net/npm/sonic-widget@2.7.52/dist/index.min.js"></script>
+```
+
+or 
+
+it can be added in `angular.json` by installing the npm package
+
+```json
+"scripts": [ "node_modules/sonic-widget/dist/index.js" ]
+```
+
+3. At `app.component.html`, Add a button with the id **`xxxx`**. It is used to call the widget by on click event.
+
+```html
+<button id="xxxx">Open</button>
+```
+
+4. Add a div tag with the id **`sonic-web-widget`** at the specific place. It is used to display the sonic module with the help of this id.
+
+```html
+<div id="sonic-web-widget"></div>
+```
+
+5. Add a declaration for var *sonic* at TS file `app.component.ts`.
+
+```ts
+declare var sonic: any;
+```
+
+6. Next, add the functionality to call widget in the base of onInit.
+
+```ts
+ngOnInit(): void {
+	
+	const config = {
+		baseurl: string, // the base url of the backend server
+		docModelPath: string, // the doc model url of the document recognition process 
+		maskModelPath: string, // the mask model url of the mask detect process
+		faceModelUrl: string, // the face model url of the face recognition process
+      	handModelUrl: string, // the hand model url of the hand recognition process
+      	objectModelUrl: string, // the object model url of the object recognition process
+		ipInfoKey: string, // the ip info key
+		googleMapKey: string, // the google map key
+		googleCaptchaKey: string, // the google reCAPTCHA site key
+  		passphrase: string, // the encryption key
+		showPage: boolean, // used to show the page or not
+		speedCheckURL: string, // public URL of the internet speed check
+		videoURL: string, // url of video to do (e.g: demo doing kyc) (Optional)
+		appId: string, // application policy identifier
+		accountId: string, // account can be taken from operator axiom account
+		appName: string, // representing name of the application (Optional)
+		userName: string, // user prospective data
+		userId: string, // user document number to identity
+		email: string, // user prospective data
+		phone: string, // user prospective data
+		applicationNo: string, // user prospective data
+		isMalay: boolean, //used to change the default language english to malay
+		branchId: string, //used to identify the bank branch
+		sendLogsEmail: boolean, //used to send logs through email
+		blinkThreshold: number, // used for blink threshold
+		eyeOpenThreshold: number, // used for eye open threshold
+		disableUploadDocs: boolean, // used to show/hide the upload docs option.
+		objectPersonThreshold: number, // used for object Person score threshold
+		objectPhoneThreshold: number, // used for object Phone score threshold
+		grayscalePercentageThreshold: number, // used for black&white percentage score threshold
+		onMessage: function (data) {}, // callback function, when api response message or error or any other actions
+	};
+
+	// get the element used in the action button 
+	var container = document.getElementById('xxxx');
+	// on click of element widget works
+	container?.addEventListener('click', function () {
+		sonic?.SonicWidget(config);
+	});
+}
+```
+
+7. Add service worker for widget to protect the multiple calls for tensorflow. So, it will have cache to reuse it. Here, I'm adding `service-worker.js` file at `src/assets` folder. So, below steps will be based on this file path.
+
+```javascript
+const CACHE_NAME = 'demo-app-ai-tensorflow-models-cache-v1';
+const urlsToCache = [
+    // coco ssd - tensorflow model
+    // document model - teachable machine drive link or folder path 
+    // mask model - teachable machine drive link or folder path 
+    // face landmark model - mediapipe tasks-vision
+    // hand landmark model - mediapipe tasks-vision
+    // Add more model files if necessary
+  ]
+
+self.addEventListener('install', function(event) {
+  // Perform install steps
+  event.waitUntil(
+    caches.open(CACHE_NAME)
+      .then(function(cache) {
+        return cache.addAll(urlsToCache);
+      })
+  );
+});
+
+self.addEventListener('fetch', function(event) {
+    const request = event.request;
+  
+    // Skip caching for requests from browser extensions
+    if (request.url.startsWith('chrome-extension://')) {
+      return;
+    }
+  
+    event.respondWith(
+      caches.match(request)
+        .then(function(response) {
+          // Cache hit - return response
+          if (response) {
+            return response;
+          }
+  
+          // Clone the request
+          const fetchRequest = request.clone();
+  
+          return fetch(fetchRequest).then(
+            function(response) {
+              // Check if we received a valid response
+              if(!response || response.status !== 200 || response.type !== 'basic') {
+                return response;
+              }
+  
+              // Clone the response
+              const responseToCache = response.clone();
+              // Save the response for future matching
+              caches.open(CACHE_NAME)
+                .then(function(cache) {
+                  cache.put(request, responseToCache);
+                });
+  
+              return response;
+            }
+          );
+        })
+    );
+});
+```
+8. Use this script tag to get access to the service worker at initial html page:
+
+```html
+<script src="src/assets/service-worker.js"></script>
+```
+
+or 
+
+it can be added in `angular.json` by installing the npm package
+
+```json
+"scripts": [ ..., "src/assets/service-worker.js" ]
+```
+
+9. Register the service worker at your required place:
+```ts
+	ngAfterViewInit(): void {
+		if ('serviceWorker' in navigator) {
+			window.addEventListener('load', () => {
+				navigator.serviceWorker.register('/demo-app/assets/service-worker.js').then(
+					(registration) => {
+						console.log(
+							'ServiceWorker registered with scope: ',
+							registration.scope
+						);
+					},
+					(err) => {
+						console.error('ServiceWorker registration failed: ', err);
+					}
+				);
+			});
+		}
+	}
+```
+
+&nbsp;
+
+## Implementation Details for Vanilla JavaScript:
+
+**Steps:-**
+
+1. Create or open an html file.
+
+2. Add a button with the id **`xxxx`**. It is used to call the widget by on click event.
+
+```html
+<button id="xxxx">Open</button>
+```
+
+3. Add a div tag with the id **`sonic-web-widget`** at the last or beginning of the body tag. It is used to display the sonic module with the help of this id.
+
+```html
+<div id="sonic-web-widget"></div>
+```
+
+4. Add a Script tag to the head tag or body tag. And use the latest version.
+
+```html
+<script src="https://cdn.jsdelivr.net/npm/sonic-widget@2.7.52/dist/index.min.js"></script>
+```
+
+5. Next, add the script tag at a necessary place. But add below the widget script.
+
+```html
+<script>
+	const config = {
+		baseurl: string, // the base url of the backend server
+		docModelPath: string, // the doc model url of the document recognition process
+		maskModelPath: string, // the mask model url of the mask detect process
+		faceModelUrl: string, // the face model url of the face recognition process
+      	handModelUrl: string, // the hand model url of the hand recognition process
+      	objectModelUrl: string, // the object model url of the object recognition process
+		ipInfoKey: string, // the ip info key
+		googleMapKey: string, // the google map key
+		googleCaptchaKey: string, // the google reCAPTCHA site key
+  		passphrase: string, // the encryption key
+		showPage: boolean, // used to show the page or not
+		speedCheckURL: string, // public URL of the internet speed check
+		videoURL: string, // url of video to do (e.g: demo doing kyc) (Optional)
+		appId: string, // application policy identifier
+		appName: string, // representing name of the application (Optional)
+		accountId: string, // account can be taken from operator axiom account
+		userName: string, // user prospective data
+		userId: string, // user document number to identity
+		email: string, // user prospective data
+		phone: string, // user prospective data
+		applicationNo: string, // user prospective data
+		isMalay: boolean, //used to change the default language english to malay
+		branchId: string, // branch id to identify the branch of the bank
+		sendLogsEmail: boolean, //used to send logs through email
+		blinkThreshold: number, // threshold used to calculate the user's eye blinked or not, with range limit 0-1(default value is 0.35)
+		eyeOpenThreshold: number, // threshold used to calculate the user's eye open or not, with range limit 0-1(default value is 0.2)
+		disableUploadDocs: boolean, // used to pass a boolean value. It is used to disable the upload option the document process
+		objectPersonThreshold: number, // used for object Person score threshold with range limit 0-1(default value is 0.925)
+		objectPhoneThreshold: number, // used for object Phone score threshold with range limit 0-1(default value is 0.5)
+		grayscalePercentageThreshold: number, // used for black&white percentage score threshold with range limit 0-100(default value is 80)
+		onMessage: function (data) {}, // callback function, when api response message or error or any other actions
+	};
+	// get the element used in the action button 
+	var container = document.getElementById('xxxx');
+	// on click of element widget works
+	container.addEventListener('click', function () {
+		sonic.SonicWidget(config);
+	});
+</script>
+```
+
+_Here, the config variable is used to pass the data. And the container variable is to get the dom element of the id **`xxxx`** button and add it to the event listener. It checks if the button is clicked and sends the config object data to the **`sonic`** module.
+**`sonic.SonicWidget(config)`**_
+
+_You can get the logs with **`onMessage`** for all actions and stages.
+Check with **`data.code`**_
+
+```
+0 - info message from application 
+1 - success api call
+-1 - failed api call
+-2 - error message from application 
+-3 - configuration error message 
+2 - on close application
+```
+
+**Note:-**
+
+<!-- - _**`serviceWorkerPath`** should pass as a string value. It is used as the service worker path and its default path is **`/demo-app/assets/service-worker.js`** and Cache name should be different to fix conflict._ -->
+- _**`baseurl`** should pass as a string value. It is used as the base URL for API calls._
+- _**`docModelPath`** should pass as a string value. It is used as the base URL for document model._
+- _**`maskModelPath`** should pass as a string value. It is used as the base URL for mask model._
+- _**`faceModelUrl`** should pass as a string value. It is used as the base URL for task vision face model._
+- _**`handModelUrl`** should pass as a string value. It is used as the base URL for task vision hand model._
+- _**`objectModelUrl`** should pass as a string value. It is used as the base URL for coco-ssd object model._
+- _**`showPage`** is used to pass a boolean value ( **`true`** or **`false`** ). To toggle the widget page open or close._
+- _**`speedCheckURL`** should pass as a string value. It is used to detect internet speed and intimate the user._
+- _**`videoURL`** should pass as a string value as url. It is used to show the video onboard sonic kyc and it is optional._
+- _**`accountId`** should pass as a string value. It is used to get the JWT token and proceed with the operator account._
+- _**`isMalay`** is used to pass a boolean value ( **`true`** or **`false`** ). To toggle the widget default language english or malay._
+- _**`branchId`** should pass as a string value. It is used to find bank branch available for operator account for onboard sonic kyc._
+- _**`appId`** should pass as a string value. It is used to find an application policy for onboard sonic kyc._
+- _**`appName`** should pass as a string value. It is used for onboard kyc application name. it is optional and default **`Sonic`** ._
+- _**`ipInfoKey`** should pass as a string value. It is used for location details and paid api key for VPN restriction. For more details visit **`https://ipinfo.io/`**._
+- _**`googleMapKey`** should pass as a string value. It is used for location details and geo fence. For more details visit **`https://developers.google.com/maps`**._
+- _**`googleCaptchaKey`** should pass as a string value. It is used for spam/bot attack. For more details visit **`https://developers.google.com/recaptcha`**._
+- _**`passphrase`** should pass as a string value. It is used for encrypting the string with this special key and same key need to be used at backend also for decrypting the data._
+- _**`userName`** should pass as a string value. It is used to create an application for onboard sonic kyc._
+- _**`userId`** should pass as a string value. It is used to create an application for onboard sonic kyc and to compare your identity with the document._
+- _**`email`** should pass as a string value. It is used to create an application for onboard sonic kyc._
+- _**`phone`** should pass as a string value. It is used to create an application for onboard sonic kyc._
+- _**`applicationNo`** should pass as a string value. It is used to create an application for onboard sonic kyc._
+- _**`sendLogsEmail`** is used to pass a boolean value. It is used to send logs to client email address._
+- _**`blinkThreshold`** is used to pass a numerical value. It is used to check the user blinking (range 0-1 and default 0.35). Above the threshold consider to be blinking or eye closed._
+- _**`disableUploadDocs`** is used to pass a boolean value. It is used to disable the upload option the document process._
+- _**`eyeOpenThreshold`** is used to pass a numerical value. It is used to check the user eyes are open (range 0-1 and default 0.2). Below the threshold consider to be eyes are open._
+- _**`objectPersonThreshold`** is used to pass a numerical value. It is used to check the image person as object found with required score as threshold (range 0-1 and default 0.925)._
+- _**`objectPhoneThreshold`** is used to pass a numerical value. It is used to check the image phone/laptop as object found with required score as threshold (range 0-1 and default 0.5)._
+- _**`grayscalePercentageThreshold`** is used to pass a numerical value for percentage. It is used to check the image color as black&white found with required percentage as threshold (range 0-100 and default 80)._
+- _**`onMessage`** is a callback function. It is getting called when the API gives a message or at any configuration error. Return data is an object with its API endpoint and result._
+
+
+<!-- ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ DEVELOPER info ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ -->
+
+<!-- use node 18 and install packages using yarn and do yarn dev -->
+
+<!-- env -->
+
+<!-- 
+VITE_APP_DOCUMENT_DETECT_PATH=""
+VITE_APP_MASK_DETECT_PATH=""
+VITE_APP_COCO_SSD_OBJECT_URL="https://storage.googleapis.com/tfjs-models/savedmodel/ssdlite_mobilenet_v2/model.json"
+VITE_APP_TASK_VISION_WASM_PATH="https://cdn.jsdelivr.net/npm/@mediapipe/tasks-vision/wasm"
+VITE_APP_TASK_VISION_FACE_URL="https://storage.googleapis.com/mediapipe-models/face_landmarker/face_landmarker/float16/1/face_landmarker.task"
+VITE_APP_TASK_VISION_HAND_URL="https://storage.googleapis.com/mediapipe-models/hand_landmarker/hand_landmarker/float16/1/hand_landmarker.task"
+VITE_APP_DEFAULT_PASS_PHRASE=""
+VITE_APP_THIRD_PARTY_GET_IP_URL="https://ipv4.icanhazip.com"
+ -->
+
+<!-- ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ GrayScale info ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ -->
+
+<!-- GrayScale Suggestions
+
+1. RGB Difference Threshold for Grayscale Detection:
+
+Low Threshold: A low threshold (e.g., 5-10) is good if you want to consider any slight variation in color as an indication that the image is colored. This is more sensitive to minor color differences.
+
+Moderate Threshold: A threshold of around 10-20 is a more balanced approach. It allows for small variations due to noise or minor imperfections in grayscale images but still classifies them as black and white.
+
+High Threshold: A higher threshold (e.g., 20-50) will classify images as grayscale even if there are noticeable color variations, which might be acceptable for images that are predominantly black and white but have some color noise or artifacts.
+
+2. Percentage of Grayscale Pixels:
+
+After detecting grayscale pixels, you need to determine the percentage of grayscale pixels required to classify the image as black and white.
+
+80-90% Grayscale Pixels: This threshold means that if 80-90% of the pixels are grayscale, the image will be classified as black and white. This works well for documents and images that are mostly grayscale but may have some minor color elements (e.g., stamps, logos).
+
+90-100% Grayscale Pixels: This is a stricter threshold, ensuring that the image is classified as black and white only if nearly all pixels are grayscale. -->
+
+<!-- ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ Selfie info ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ -->
+
+<!-- 
+1.blinkThreshold: number
+
+Description : The blinkThreshold is used to determine whether the user's eye is considered blinked. It represents the sensitivity to eye closure during a blink.
+Range : 0-1 (default: 0.35)
+Functionality :
+* If either of the user's eyes exceeds the specified threshold (i.e., the eye closure ratio is greater than the blinkThreshold), the eye is detected as "blinked."
+* This helps identify blinks during facial detection or tracking processes.
+
+2.eyeOpenThreshold: number
+
+Description : The eyeOpenThreshold is used to detect whether the user's eyes are open or not. It determines the sensitivity to eye openness by checking the openness ratio.
+Range : 0-1 (default: 0.25)
+Functionality :
+* If both eyes fall below the defined threshold, the system interprets that the eyes are open.
+* This value helps differentiate between an open eye and a partially closed
+
+Both thresholds work together to archive ekyc selfie process. 
+-->
+