Author: DNS-404

This author has written 15 articles

How does SUSI AI web bot plugin work

   In this blog, we’ll learn how SUSI AI web plugin works. Normally, for any bot like Kik bot, we don’t have to worry about the chat boxes or the way chatbot is rendered on screen because all of that is handled by the service on which we are building our bot. So, for these bots, we simply take the text input from user, send a GET request to SUSI server, receive the response and display it. This is not the case with SUSI AI Web Bot plugin. In this case, there is not Bot platform. Hence, there are a lot of other things that we need to take care of here. Let’s explore the main ones among them. Adding bot to website: The final product that we’re going to provide to the client is going to be just a JavaScript code. Hence the HTML code of bot widget needs to be added to the <body> of the website. This is done usingappend() method of jQuery. The html() method sets or returns the content (innerHTML) of selected elements. Syntax: $(selector).append(content) So we store the HTML code of bot widget in a variable and then returns the content of that variable to the body tag using: $("body").append(mybot); Here “mybot” is the variable containing HTML code of bot widget. The text boxes of user texts and bot texts are added to a HTML element in the same way. Event handling: JavaScript's interaction with HTML is handled through events that occur when the user or the browser manipulates a page. Loading of the page, clicking, pressing a key, closing a window, resizing the window etc are all examples of events. In the SUSI AI web bot, there are two major events. Clicking a button This is required for allowing clicks on send button. Clicking of a button can be done in many ways. There are two major ways that are used in SUSI AI web bot. Some elements already exist on the webpage. For example - the HTML code of web bot. It is added to the body tag as soon as webpage loads. For these elements we use click(). The click() binding is called “direct” binding which can be attached to the elements that already exists. Syntax: $(selector).click(function); Selector - Class, ID or name of HTML element. Function - Specifies the function to run when click event occurs. Some elements are dynamically generated. This means that they are added at a later point of time. For example - the text messages are added when user types in. This happens after loading of page. For this, we have to create “delegated” binding by using on() method. Syntax: $(selector).on(event,childSelector,data,function); Selector - Class, ID or name of HTML element Event - (Required) Specifies one or more event(s) or namespaces to attach to the selected elements. childSelector - (Optional) Specifies that the event handler should only be attached to the specified child elements Data - (Optional) Specifies additional data to pass along to the function Function - Specifies the function to run when click event occurs. Pressing the enter key For identifying which key…

Continue ReadingHow does SUSI AI web bot plugin work

How to make SUSI AI Twitch Bot

In this blog post, we’ll learn how to make SUSI AI Twitch bot. SUSI.AI is an intelligent Open Source personal assistant. SUSI AI Bots are built to enable users to chat with SUSI on different clients. Twitch is a live streaming video platform. We can integrate SUSI AI to the live chat on any of its channels. Pre-requisites: A Main Twitch account (This is the account on whose channel users would be able to talk to SUSI) A separate Twitch account for SUSI. GitHub Account Create a GitHub from here - Sign up on GitHub Heroku Account To create Heroku account, go to Heroku and click on Sign Up. Node.js Install Node.js from https://nodejs.org/en/ if it isn’t installed already on your computer. To check if node is already installed or not, open terminal and type the command: node -v If you see something like this - (version can be different) v9.4.0 Then Node.js is installed on your computer and you can follow along. Procedure: You can either fork susi_twitchbot repository and then simply deploy it on Heroku to create SUSI AI Twitch bot or you can create a new repository on your account then deploy it. The following section will describe how to create a new repository for SUSI AI Twitch bot. If you want to deploy susi_twitchbot directly then skip this section and directly move on to the deployment section. Creating the SUSI AI Twitch codebase: 1. Create a folder on your computer with any name. Open terminal and change your current directory to the new folder that you just created. 2. Type npm init command and enter details like name, version etc. (preferably just keep pressing enter key and let the values stay default) 3. Create a file with the same name that you wrote in entry point (index.js by default). NOTE - It should be in the same folder that you created earlier. 4. In the same folder, type the following commands in command line - npm i -s tmi.js We need tmi.js module to easily interact with Twitch messaging interface. For more details, visit https://www.tmijs.org/. npm i -s request We need request module to make a GET request to the SUSI API and retrieve JSON data for a particular query. npm i -s express We need express module to create successful connection with Heroku through the port provided by it. 5. Open package.json file. It should look like this: (Adding “start” script is necessary for deploying the app on Heroku) {   "name": "susi_twitchbot",   "version": "1.0.0",   "description": "SUSI.AI Twitchbot",   "main": "index.js",   "scripts": {     "start": "node index.js"   },   "author": "",   "license": "ISC",   "dependencies": {     "express": "^4.16.3",     "request": "^2.86.0",     "tmi.js": "^1.2.1"   } } 6. Copy the following code into the file that you created i.e. index.js var tmi = require('tmi.js'); var request = require('request'); const express = require('express'); const app = express(); const userChannel = process.env.CHANNEL; var ans; var options = {         options: {                 debug: true         },         connection: {                 reconnect: true         },         identity: {                 username: process.env.USERNAME,                 password: process.env.OAUTH_TOKEN         },         channels: [userChannel] }; var client = new tmi.client(options); // Connect the client to the server client.connect(); client.on('chat', function(channel, userstate, message, self){         if(message.includes("@"+process.env.USERNAME)){ // checking if SUSI is tagged                 var u = message.split("@" + process.env.USERNAME + " ");                 // Setting options to make a successful call to SUSI API                 var options1 = {                         method: 'GET',                         url: 'http://api.susi.ai/susi/chat.json',                         qs:                         {                                 timezoneOffset: '-300',                                 q: u[1]                         }                 };                 request(options1, function(error, response, body) {                         if (error) throw new Error(error);                         if((JSON.parse(body)).answers[0])                                 ans = userstate['display-name'] + " " + (JSON.parse(body)).answers[0].actions[0].expression;                         else                                 ans = userstate['display-name'] + " Sorry, I could not understand what you just said."                 …

Continue ReadingHow to make SUSI AI Twitch Bot

How does live preview work on SUSI AI chatbot wizard

Live preview is an important feature for the chatbot building process in SUSI.AI botbuilder. It tells the bot creator how the bot looks and behaves at any time. We use iframe for creating a live preview. What is iframe? Frames allow browser window to be split into separate segments. All these segments can be used for displaying a different webpage within the browser window. is an HTML tag. iframe stands for “inline frame”. It places another HTML document in a frame. The content of the element is used as an alternative text to be displayed if the browser does not support inline frames. This was first introduced by Microsoft Internet Explorer in 1997, standardized in HTML 4.0 transitional and allowed in HTML5. Syntax: <iframe src=”URL”></iframe> Some attributes: Height Width Name Id Code used for preview of chatbot screen: <iframe title="botPreview" name="frame-1" id="frame-1" src={locationBot} height="600px" style={styles.iframe}></iframe> Code used for preview of chatbot avatar: <iframe title="botAvatarPreview" name="frame-2" id="frame-2" src={locationAvatar} height="100px" style={styles.iframe}></iframe> Preview bot fetches the current theme status and skill status from SUSI server and then applies it to the chatbot. Now, this details will be unique to the user logged in. Hence, we need to somehow identify the person logged in. This is done using access token stored in the cookies which is accessed through cookies.get(‘loggedIn’). How to pass access token to iframe? This is the major issue faced when creating preview using iframe because even though the HTML window in iframe is rendered on the same parent page, we can not access the elements of HTML page inside iframe. This is because iframe loads dynamically. There are few solutions for this problem. One of them is to create a script in iframe that would run when iframe is loaded. Now this script can access the elements of parent window (the one containing iframe) using window.parent.document.getElementById('#target') The best solution is however to pass the access token in the URL of the source of iframe. Then this can be accessed by HTML page in frame using location.href . Code sample to pass access token in url: src = '/BotPreview.html?access='+cookies.get('loggedIn') Now, we have to split this URL and get the access token. This can be easily done using the following script. var url = location.href.split(‘?’)[1].split(‘=’); var access_token = url[1]; Here in this example, the url variable firstly splits the URL at ‘?’. This creates an array with two elements. [‘url.com/BotPreview.html’, ‘access=abcdef123’] Then we access the element on index 1, i.e. ‘access=abcdef123’ and split it at the ‘=’. This further creates an array of two elements. [‘access’, ‘abcdef123’] Now, we can access the access token which is at index 1 in this array. References Wikipedia article on Frames: https://en.wikipedia.org/wiki/HTML_element#Frames

Continue ReadingHow does live preview work on SUSI AI chatbot wizard

How to deploy SUSI AI bots on ngrok for debugging

For production purposes, bots can be deployed in cloud services such as Heroku, Google App Engine or Amazon Web Services - or in their own data center infrastructure. However, for development purposes you can use ngrok to provide access to your bot running in your local network. Ngrok is easy to setup and use. To learn more about it, you can refer to its documentation. Ngrok is a handy tool and service that allows you tunnel requests from the wide open Internet to your local machine when it's behind a NAT or firewall. It's commonly used to develop web services and webhooks. In this blog, you’ll learn how to deploy SUSI AI bots on ngrok. We’re going to demonstrate the process for SUSI AI Kik bot. However it is the same for rest of the bots as well. First of all, you need to configure a bot on Kik. To configure a Kik bot, follow the first few steps of this blog post till you get an API key for the bot that you created using Botsworth. Now, follow these steps: In order to run SUSI AI kik bot on ngrok, you have to make some changes to the index.js file after forking susi_kikbot repository and cloning it to your local machine. Open index.js and change the information in ‘bot’ object. Write username of your kik bot in front of username and api key that you got for your bot in front of apiKey in quotations and leave the baseUrl blank for now. It will look like this: (Don’t copy the API key shown below. It’s invalid and only for demonstration purposes.) var bot = new Bot({     username: 'susi.ai',     apiKey: 'b5a5238b-b764-45fe-a4c5-629fsd1851bd',     baseUrl: '' }); Now save the file. No need to commit it. Go to https://ngrok.com/ and sign up. Next, you’ll be redirected to the setup and installation page. Follow the instructions there to setup ngrok on your local machine. Now open terminal and use ‘cd’ command to go to the susi_kikbot directory. While deploying on ngrok, we set the port for listening to http requests. Hence remove “process.env.PORT” from index.js or else this will cause an error in the next step. After removing, it should look like this: (Now save the index.js file) http.createServer(bot.incoming()).listen(8080); Also, comment out setInterval function in index.js. Now type the command ngrok http 8080 in terminal. In case ‘ngrok’ command doesn’t run, copy the ngrok file that you downloaded in step 5 and paste it in the susi_kikbot directory. Then enter ./ngrok http 8080 in terminal. When it launches, you’ll see a screen similar to the following: Copy the “forwarding” address (https://d36f0add.ngrok.io), and paste it in front of ‘baseUrl’ in the ‘bot’ object in index.js file. Add “/incoming” after it and save it. Now the ‘bot’ object should look similar to this: var bot = new Bot({     username: 'susi.ai',     apiKey: 'b5a5238b-b764-45fe-a4c5-629fsd1851bd',     baseUrl: 'https://d36f0add.ngrok.io/incoming' }); Launch another terminal window and cd into the susi_kikbot directory in your local machine. Then type node index.js command. Congratulations! You’ve successfully deployed SUSI AI Kik bot on ngrok. Now try sending a message to your SUSI AI…

Continue ReadingHow to deploy SUSI AI bots on ngrok for debugging

How to make SUSI AI LINE Bot

  (The blog previously written for “How to make SUSI AI Line Bot” is no longer valid as a lot has changed since then. SUSI API, LINE developer menu etc has changed. This blog post describes the updated procedure for creating SUSI AI LINE Bot. The previous blog can be found here - https://blog.fossasia.org/how-to-make-susi-ai-line-bot/) Susi AI is an intelligent Open Source personal assistant. SUSI AI Bots are built to enable users to chat with SUSI on different clients. Pre-requisites - 1. In order to integrate SUSI’s API with Line bot, you will need to have a Line account first. Download LINE Messenger app from here - Google Play Store Apple App Store 2. GitHub Account Create a GitHub from here - Sign up on GitHub 3. Heroku Account To create Heroku account, go to Heroku and click on Sign Up. 4. Node.js Install Node.js from https://nodejs.org/en/ if it isn’t installed already on your computer. To check if node is already installed or not, open terminal and type the command - node -v If you see something like this - (version can be different) v9.4.0 Then Node.js is installed on your computer and you can follow along. Procedure: Now that you have created a LINE account, GitHub account, Heroku account and installed Node.js, we can move to the creating the SUSI AI bot. You can either deploy susi_linebot repository to create SUSI AI LINE bot or you can create a new repository on your account then deploy it to Heroku. The next section will describe how to create a new repository for deploying SUSI AI Line bot. If you want to just deploy susi_linebot then skip the next section. Creating the SUSI AI LINE bot codebase: 1. Create a folder on your computer with any name. Open terminal and change your current directory to the new folder you just created. 2. Type npm init command and enter details like name, version etc. (preferably just keep pressing enter key and let the values stay default) 3. Create a file with the same name that you wrote in entry point (index.js by default). NOTE - It should be in the same folder that you created earlier. 4. Type the following commands in command line - npm i -s @line/bot-sdk npm i -s express npm i -s request 5. Open package.json file. It should look like this: {  "name": "susi_linebot",  "version": "1.0.0",  "description": "SUSI AI LINE bot",  "main": "index.js",  "scripts": {    "start": "node index.js",    "test": "echo \"Error: no test specified\" && exit 1"  },  "author": "",  "license": "ISC",  "dependencies": {    "@line/bot-sdk": "^6.0.1",    "express": "^4.16.3",    "request": "^2.85.0"  } } You should see “@line/bot-sdk”, “express” and “request” under dependencies. Versions can change. Make sure to add “start” under scripts or else deploying on Heroku will cause an error. 6. Copy the following code into the file that you created i.e. index.js 'use strict'; const line = require('@line/bot-sdk'); const express = require('express'); var request = require("request"); // create LINE SDK config from env variables const config =…

Continue ReadingHow to make SUSI AI LINE Bot