Sonic-widget NPM

Installation:

Sonic Widget - used to show the onboard kyc at your web page itself.

Use this script tag to get access to the widget:

<script src="https://cdn.jsdelivr.net/npm/sonic-widget@2.5.0/dist/index.min.js"></script>

in Angular can be used by installing package from npm

npm install sonic-widget

and adding path in angular.json

"scripts": [ "node_modules/sonic-widget/dist/index.js" ]

Implementation Details for Angular TypeScript:

Steps:-

Create or open an angular TS project.
Use this script tag to get access to the widget at initial html page:

<script src="https://cdn.jsdelivr.net/npm/sonic-widget@2.5.0/dist/index.min.js"></script>

it can be added in angular.json by installing the npm package

"scripts": [ "node_modules/sonic-widget/dist/index.js" ]

At app.component.html, Add a button with the id xxxx. It is used to call the widget by on click event.

<button id="xxxx">Open</button>

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.

<div id="sonic-web-widget"></div>

Add a declaration for var sonic at TS file app.component.ts.

declare var sonic: any;

Next, add the functionality to call widget in the base of onInit.

ngOnInit(): void {
	
	const config = {
		baseurl: string, // the base url of the backend server
		docModelUrl: string, // the doc model url of the document recognition process 
		maskModelUrl: string, // the mask model url of the mask detect process
		showPage: boolean, // used to show the page or not
		ipInfoKey: string, // api key to detect vpn used or not from "ipInfo.io" (Optional)
		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
		objectPersonThreshold: number, // used for object Person score threshold
		objectPhoneThreshold: number, // used for object Phone 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);
	});
}

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.

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;
            }
          );
        })
    );
});

Use this script tag to get access to the service worker at initial html page:

<script src="src/assets/service-worker.js"></script>

it can be added in angular.json by installing the npm package

"scripts": [ ..., "src/assets/service-worker.js" ]

	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);
					}
				);
			});
		}
	}

Implementation Details for Vanilla JavaScript:

Steps:-

Create or open an html file.
Add a button with the id xxxx. It is used to call the widget by on click event.

<button id="xxxx">Open</button>

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.

<div id="sonic-web-widget"></div>

Add a Script tag to the head tag or body tag. And use the latest version.

<script src="https://cdn.jsdelivr.net/npm/sonic-widget@2.5.0/dist/index.min.js"></script>

Next, add the script tag at a necessary place. But add below the widget script.

<script>
	const config = {
		baseurl: string, // the base url of the backend server
		docModelUrl: string, // the doc model url of the document recognition process
		maskModelUrl: string, // the mask model url of the mask detect process
		showPage: boolean, // used to show the page or not
		ipInfoKey: string, // api key to detect vpn used or not from "ipInfo.io" (Optional)
		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 blinked or not, with range limit 0-1(default value is 0.35)
		objectPersonThreshold: number, // used for object Person score threshold with range limit 0-1(default value is 0.35)
		objectPhoneThreshold: number, // used for object Phone score threshold with range limit 0-1(default value is 0.35)
		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:-

baseurl should pass as a string value. It is used as the base URL for API calls.
docModelUrl should pass as a string value. It is used as the base URL for document model.
maskModelUrl should pass as a string value. It is used as the base URL for mask model.
showPage is used to pass a boolean value ( true or false ). To toggle the widget page open or close.
ipInfoKey should pass as a string value. It is used to detect whether vpn is used or not from "ipInfo.io" with this api key and it is optional.
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 blinks (range 0-1 and default 0.5).
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).
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.