API’s in SUSI.AI BotBuilder

In this blog, I’ll explain the different API’s involved in the SUSI.AI Bot Builder and its working. Now if you are wondering how the SUSI.AI bot builder works or how drafts are saved, then this is the perfect blog. I’ll be explaining the different API’s grouped by different API endpoints. API Implementation fetchChatBots export function fetchChatBots() { const url = `${API_URL}/${CMS_API_PREFIX}/getSkillList.json`; return ajax.get(url, { private: 1, }); } This API is used to fetch all your saved chatbots, which are displayed on the BotBuilder Page. The API endpoint is getSkillList.json. Same endpoint is used when a user creates a skill, the difference is query parameter private is passed which then returns your chatbots. Now if you are wondering why we have same endpoint for skills and chatbots, the simple plain reason for this is chatbots are your private skills. fetchBotDetails export function fetchBotDetails(payload) { const { model, group, language, skill } = payload; const url = `${API_URL}/${CMS_API_PREFIX}/getSkill.json`; return ajax.get(url, { model, group, language, skill, private: 1, }); } This API is used to fetch details of bot/skill respectively from the API endpoint getSkill.json. Group name, language, skill name, private and model are passed as query parameters. fetchBotImages export function fetchBotImages(payload) { const { name: skill, language, group } = payload; const url = `${API_URL}/${CMS_API_PREFIX}/getSkill.json`; return ajax.get(url, { group, language, skill, private: 1, }); } This API is used to fetch skill and bot images from the API endpoint getSkill.json. Group name, language, skill name and private are passed as query parameters. uploadBotImage export function uploadBotImage(payload) { const url = `${API_URL}/${CMS_API_PREFIX}/uploadImage.json`; return ajax.post(url, payload, { headers: { 'Content-Type': 'multipart/form-data' }, isTokenRequired: false, }); } This API is used to upload the Bot image to the API endpoint uploadImage.json.The Content-Type entity header is used to indicate the media type of the resource. multipart/form-data means no characters will be encoded. This is used when a form requires a binary data like the contents of a file or image to be uploaded. deleteChatBot export function deleteChatBot(payload) { const { group, language, skill } = payload; const url = `${API_URL}/${CMS_API_PREFIX}/deleteSkill.json`; return ajax.get(url, { private: 1, group, language, skill, }); } This API is used to delete Skill and Bot from the API endpoint deleteSkill.json. storeDraft export function storeDraft(payload) { const { object } = payload; const url = `${API_URL}/${CMS_API_PREFIX}/storeDraft.json`; return ajax.get(url, { object }); } This API is used to store draft Bot to the API endpoint storeDraft.json. The object passed as parameter has the properties given by the user such as skill name,group etc., while saving the draft. readDraft export function readDraft(payload) { const url = `${API_URL}/${CMS_API_PREFIX}/readDraft.json`; return ajax.get(url, { ...payload }); } This API is used to fetch draft from the API endpoint readDraft.json. This API is called on the BotBuilder Page where all the saved drafts are shown. deleteDraft export function deleteDraft(payload) { const { id } = payload; const url = `${API_URL}/${CMS_API_PREFIX}/deleteDraft.json`; return ajax.get(url, { id }); } This API is used to delete the saved Draft from the API endpoint…

Continue ReadingAPI’s in SUSI.AI BotBuilder

Demystifying a travis.yml file

In this blog post, we are going to demystify a travis.yml file. For reference, we will be using the travis configuration used in the  SUSI skill CMS project. But before delving into it, I would like to just give a brief introduction about Continuous Integration (CI) and Travis CI. What is CI and Travis ? Continuous Integration represents the practice of integrating a piece of work as early as possible instead of later so that one can receive immediate and frequent feedback on things that are wrong. “ Continuous Integration is the practice of merging all developer working copies to a shared mainline several times a day. ” -Wikipedia Travis CI is a hosted continuous integration platform that is free for all open source projects hosted on Github. With just a file called .travis.yml containing some information about our project, we can trigger automated builds with every change to our code base in the master branch, other branches or even a pull request. sudo: required dist: trusty language: node_js node_js: - 6 script: - npm test after_success: - bash ./pr_deploy.sh - bash ./deploy.sh cache: directories: - node_modules branches: only: - master Travis configuration file of susi_skill_cms Part-wise explanation of the file When specifying sudo: required, Travis CI runs each build in an isolated Google Compute Engine virtual machine that offer a vanilla build environment for every build. This has the advantage that no state persists between builds, offering a clean slate and making sure that the tests run in an environment built from scratch. Builds have access to a variety of services for data storage and messaging, and can install anything that’s required for them to run. The keyword dist represents the virtualization environment that is being used. trusty here refers to the distribution of the Linux environment used. The keyword language represents the programming language that is be used for the project. The language used for the project is nodeJs. Then follows the version details of node_js that is to be used. The node_js version used is 6. This is the step where Travis runs the test script. Unless otherwise specified, it runs the default for the set language. In the case of node, it does node_js. The script stands for the build script that would be executed during the build process. The default build script for nodeJs is npm test. The result of execution of npm test can be found from the package.json file. It executes the npm run lint && react-scripts test --env=jsdom command, which is responsible for checking the linting issues and runs various unit and snapshot tests. We can add multiple lines of command to be executed. The after_success block runs after the entire script is done. It’s the last step in the normal build process has been executed successfully. It has 2 commands to be executed - bash ./pr_deploy.sh : Responsible for making a surge deployment of each PR bash ./deploy.sh : Responsible for making a deployment to master branch Travis CI can cache…

Continue ReadingDemystifying a travis.yml file

Setup interactive charts for data representation

At the end of this blog, you would be able to setup interactive charts using HighCharts and D3.js. As the charts/data-visualisation models will form the backbone of the upcoming SUSI.AI Analytics dashboard, as well as the data representational model for various useful data. For the purpose of integration with the SUSI Skills CMS project, we will be using the react-highcharts and react-tagcloud library. There are various kinds of charts and plots that HighCharts offers. They are - Line charts Area charts Column and Bar Charts Pie Charts Scatter and Bubble Charts Combinations Dynamic Charts Gauges Heat and Tree maps 3D charts Check out this link for the full list. We would be aiming to build up the above charts for analysis of Term Frequency Trends and Trending Clouds. For the Term Frequency Trends, we will need to setup a Basic Line Graph and for the later,  we need a World Cloud. Setting up a Basic Line Graph The aim is to setup a basic line graph and to accomplish that we use a react library called react-highcharts, which makes our work very easier. Firstly, we create an object config that contains the labels and the required data, with the key values as mentioned in the API reference. The object looks like this - const config = { xAxis: { categories: ['01/13', '01/14', '01/15', '01/16', '01/17', '01/18', '01/19', '01/20'] }, series: [{ data: [750, 745, 756, 740, 760, 752, 765] }] }; Secondly, we create a React Component and pass the config object as a property to the ReactHighcharts component. Finally, we render the component in a div of the index.html file, and the following output is achieved. The code for the component that renders the Chart is as follows: import React from 'react'; import ReactHighcharts from 'react-highcharts'; import ReactDOM from 'react-dom'; const config = { xAxis: { categories: ['01/13', '01/14', '01/15', '01/16', '01/17', '01/18', '01/19', '01/20'] }, series: [{ data: [750, 745, 756, 740, 760, 752, 765] }] }; ReactDOM.render(<ReactHighcharts config={config} />, document.getElementById('app')); Setting up a WordCloud Here, we wish to setup a WordCloud that would show the different words that got searched or the top trending words. We would be using the react-tagcloud library for this. Firstly, we create an object data that contains the text along with the count/frequency of search. The object looks like this - const data = [ { value: "JavaScript", count: 38 }, { value: "React", count: 30 }, { value: "Nodejs", count: 28 }, { value: "Express.js", count: 25 }, { value: "HTML5", count: 33 }, { value: "MongoDB", count: 18 }, { value: "CSS3", count: 20 } ]; Secondly, we create a React Component and pass the data object as a property to the TagCloud component. Finally, we render the component in a div of the index.html file, and the following output is achieved. The code for the component that renders the Chart is as follows: import React from 'react'; import React, { Component } from 'react'; import { TagCloud } from…

Continue ReadingSetup interactive charts for data representation

Making a SUSI Skill to get details about bank from IFSC

We are going to make a SUSI skill that fetches information about a bank when the IFSC (Indian Financial System Code) is known. Here is a detailed explanation of how we going about doing this. Getting started with the skill creation API endpoint that returns the bank details Before going to the skill development, we need to find an API that would return the bank details from the IFSC, On browsing through various open source projects. I found an apt endpoint by Razorpay. Razorpay is a payment gateway for India which allows businesses to accept, process and disburse payments with ease. The Github link  to the repository is https://github.com/razorpay/ifsc. API endpoint -  https://ifsc.razorpay.com/<:ifsc> Request type -  GET Response type -  JSON Now, head over to the SUSI Etherpad, which is the current SUSI Skill Development Environment and create a new Pad.  Here, we need to define the skill in the Etherpad. We will now write rules/intents for the skill. An intent represents an action that fulfills a user's spoken request. Intents consist of 2 parts - User query - It contains different patterns of query that user can ask. Answer - It contains the possible answer to the user query. The main intent that our skill focuses on is, returning the bank name and address from the IFSC code. Here is how it looks - Name of bank with IFSC code * | Bank's name with IFSC code * !example:Name of bank with IFSC code SBIN0007245 !expect: The name of bank is State Bank of India !console:The name of bank with IFSC code $1$ is $object$ { "url":"https://ifsc.razorpay.com/$1$", "path":"$.BANK" } eol Part-wise explanation of the intent The first line contains the query pattern that the user can use while querying. You can see that a wildcard character (*) is used in the pattern. It contains the IFSC of the bank that we wish to know, and will later on use to fetch the details via the API. The second line contains an example query, followed by third line that contains the expected answer. Last part of the rule contains the answer that is fetched from an external API -  https://ifsc.razorpay.com/<:ifsc>  ,via the console service  provided by SUSI Skills. Here, <:ifsc> refers to the IFSC that the user wants to know about. We get it from the user query itself, and can access it by the variable name $1$ as it matches with the 1st wildcard present in the query. If there would be 2 wildcards, we could have accessed them by $1$ and $2$ respectively. The console service provides us with an option to enter the url of the API that we want to hit and path of the key we want to use. The sample response of the endpoint looks like this : { "BANK": "Karnataka Bank", "IFSC": "KARB0000001", "BRANCH": "RTGS-HO", "ADDRESS": "REGD. & HEAD OFFICE, P.B.NO.599, MAHAVEER CIRCLE, KANKANADY, MANGALORE - 575002", "CONTACT": "2228222", "CITY": "DAKSHINA KANNADA", "RTGS": true, "DISTRICT": "MANGALORE", "STATE": "KARNATAKA" }   Since, we want…

Continue ReadingMaking a SUSI Skill to get details about bank from IFSC