Adding Voice Recognition and Artificial Intelligence(AI) to any Application is Easy and Simple

Exploring Artificial Intelligence (AI) in the Evolution of Conversational Systems

Innovation in the field of technology has never been this rapid. Devices interacting with humans has taken the lime light in the market with an increasing demand every day!

Before starting with the development, let’s skim through the technologies we will be discussing.

SAPUI5 - a feature rich UI development toolkit for HTML5 has a broad set of libraries and the framework adjusts itself to the modern web development concepts like responsiveness across browsers and devices, ease of integration of third party libraries, controls for every purpose and many more.

API.AI - an open source SDK available for all platforms like windows, android, iOS/Mac OS X, Ruby, JavaScript, node.js to name a few. This platform lets the developers and non-developers to design and integrate conversational user interfaces into mobile applications, web applications, devices and bots. Wonderful isn’t it?! 

To get started with API.AI, please refer here.

For speech recognition, we are making use of Google speech recognition API.

Now, time to look into technical details.

Integration of API.AI into SAPUI5 application is easy and simple. For example, look at the project structure screenshot below.

Let’s understand the integration with a simple scenario.

           For example, let's say, I want to open the bill history summary and check the bills that were cancelled. Instead of clicking on the Bill history tile and then clicking on the filter button and then selecting “Cancelled bills”, I would just say “Show me cancelled bills” OR “Display cancelled bills” OR “Cancelled bills” and the result would be the same.

Please note that we are restricting the commands as we are using API.AI which will help us achieve the same functionality irrespective of the words used.

Below is the step-by-step procedure of achieving the same.

The basic idea is to use the google speech recognition API to identify the voice and send the recognized speech to the API.AI using an AJAX call and continue the further development logic.

Step 1: Create a .JS file which we will can be used to interact with API.AI.

API.AI provides a base URL that can be used to make AJAX calls, the idea is for every command a request would be triggered and if any of the entities match then we can use the response sent for doing further development.

Note: Please refer to the above mentioned URL for more information on entities, intents and so on.

Step 2: Will use google speech recognition API to identify the speech and send the text to API.AI using an AJAX call.

Step 3: If the text matches any of the indent text, then a response would be returned from the API which will contain all the necessary details.

Step 4: Since I have created the intents based on the functionality, I am directly navigating to the specific page based on the intent name we get back in the response.

Step 5:  Now that you are already navigated to the specific page based on the functionality, go ahead and call the necessary functions and carry out the required tasks.

The “attachRoutePatternMatched ()” function can be used to call the desired function in the target /navigated controller file.

It’s as simple as it looks. Any application can be made a voice enabled application and with a bit of artificial intelligence integrated, your app would be intuitive.

View a demo here!

Authors: Meenakshi Mohanraj, Naveen Kumar C H, and Santosh Kumar J