Deep learning - Artificial Intelligence - Virtual Assistants and Chatbots: December 2015

AIs can be pretty useful when placed inside a webpage. An AI can explain your product to your customers and be your brand ambassador; an AI can act as first customer support or entertain your visitors. In this short tutorial, we will create a simple webpage that will let you text with your AI.

The complete source file can be found here. Before you run it, make sure you replace the ai_ID with your neural network ID you got during the creation process. To get the actual code, view the page source using your browser.

The code behind the page is pretty simple, but in case your are curios the main bits are:

Step 1: Add a link to our hutoma.js file in your page
Open your webpage and add a link to our hutoma.js file. The JS file just simplify a little the syntax needed to interface with our infrastructure.

<script src="http://www.hutoma.com/hutoma.js"></script>

Step 2: Crate an AI
After you linked the huroma.js file you can initiate a connection to your AI.

var ai = new AI({ai_ID: 'YOUR AI ID',user_ID: '1'});

Step 3: Talk to your AI
To talk to your AI, you can call the talk command as follow. The call, invokes the chat session API and pop up a message with the answer

ai.talk(
{
input: <YOUR QUESTION GOES HERE>},
function(data) {
The response from the AI will be in data.output.
Here we just pop up a message
alert(data.output);
}
);

Here's the complete webpage to talk to your deep learning AI:

<!doctype html>
<html>
<head>
<title>Hutoma Chat Example</title>
</head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-alpha1/jquery.min.js"></script>
<script src="http://www.hutoma.com/hutoma.js"></script>

<script>
var ai = new AI({
ai_ID: 'REPLACE THIS WITH YOUR AI ID',
user_ID: '1'
});

$(document).ready(function(){
$("#talkbutton").click(function(e){

var q = $("#yousay").val();
$("#response").append("<b>human</b>:"+q+"<br/>");
ai.talk({
input: q
},
function(data) {
$("#response").append("<b>AI</b>:"+data.output+"<br/>");
});
});
});

</script>
<body>
<h1>Talk to a Hutoma AI</h1>
<form id="talk" class="boxedin" onsubmit="return false;">
<b>You say:</b> <input id="yousay" name="input" size="90" />
<br/>
<input id="talkbutton" type="button" value="talk"/>
</form>
<p id="response"></p>
</body>
</html>

Deep learning - Artificial Intelligence - Virtual Assistants and Chatbots

Sunday, December 6, 2015

How to embed a Hutoma AI into your website