Translated/Ali Tao is F(X) Team – Painting North
Natural Language Processing in the Browser
It is already possible to build a chatbot for a website without relying on third-party services such as Dialogflow or Watson, and without a server. Next I’ll show you how to build a chatbot that runs entirely in a browser.
This article requires some familiarity with JavaScript and an understanding of how natural language processing works, but no advanced machine learning knowledge or experience is required.
Machine learning in a browser that uses JavaScript sounds crazy, but you’re about to see a chatbot come into being.
We will be developing based on NLP. Js (version 4). NLP is an open source library for natural language processing written in JavaScript. The library will allow you to train NLP directly in the browser using the corpus and add hooks to any intention to programmatically change the answer
The final project can be found on the GitHub repository. You can download it, open index.html, and talk to the final bot.
Every real developer should have some experience with ARTIFICIAL intelligence these days, which sounds more like science fiction than talking to your computer using something you’ve developed yourself.
Install the suite
Create a new NPM project in any folder and install the NLP package:
npm i -D @nlpjs/core @nlpjs/lang-en-min @nlpjs/nlp @nlpjs/request-rn@nlpjs/request-rn
Copy the codeWe also need Browserify and Terser to be able to build NLP for use in browsers:
npm i -D browserify terser
Copy the codeEnjoy the smell of a new project with a freshly installed package.
Establish a NLP
The first step is to build NLP using Browserify and Terser. To do this, we just need to create a basic setting in buildable. Js:
const core = require('@nlpjs/core');
const nlp = require('@nlpjs/nlp');
const langenmin = require('@nlpjs/lang-en-min');
const requestrn = require('@nlpjs/request-rn');
window.nlpjs = { ... core, ... nlp, ... langenmin, ... requestrn };Copy the codeWe only use NLP’s core and small English packages. To build everything, simply add the build command to package.json:
{
"name": "nlpjs-web"."version": "1.0.0"."scripts": {
"build": "browserify ./buildable.js | terser --compress --mangle > ./dist/bundle.js",},"devDependencies": {
"@nlpjs/core": "^ 4.14.0"."@nlpjs/lang-en-min": "^ 4.14.0"."@nlpjs/nlp": "^ 4.15.0"."@nlpjs/request-rn": "^ 4.14.3"."browserify": "^ 17.0.0"."terser": "^ 5.3.8"}}Copy the codeNow run the build:
npm run build
Copy the codeThe resulting./dist/bundle.js is only about 137 KB. It should also be noted that NLP has an impressive list of supported languages. However, only English has a browser-optimized version.
Train NLP in the browser
Now that you’ve created the package, you can train NLP in a browser. Create index.html first:
<html>
<head>
<title>NLP in a browser</title>
<script src='./dist/bundle.js'></script>
<script>
const {containerBootstrap, Nlp, LangEn, fs} = window.nlpjs;
const setupNLP = async corpus => {
const container = containerBootstrap();
container.register('fs', fs);
container.use(Nlp);
container.use(LangEn);
const nlp = container.get('nlp');
nlp.settings.autoSave = false;
await nlp.addCorpus(corpus);
nlp.train();
return nlp;
};
(async() = > {const nlp = await setupNLP('https://raw.githubusercontent.com/jesus-seijas-sp/nlpjs-examples/master/01.quickstart/02.filecorpus/corpus-en.json'); }) ();</script>
</head>
<body>
<h1>NLP in a browser</h1>
<div id="chat"></div>
<form id="chatbotForm">
<input type="text" id="chatInput" />
<input type="submit" id="chatSubmit" value="send" />
</form>
</body>
</html>
Copy the codeThe function setupNLP for us will take care of the setup and training of the library. The corpus is a JSON file that defines how our chatbot talks in the following format:
- The “intent” is a unique identifier of the session node, and its name should indicate the intent of the user to whom the bot responded.
- The “utterances” are a series of training examples in which the user can utter the trigger intent.
- The “answers” are a series of responses that the chatbot will choose at random.
{
"name": "Corpus"."locale": "en-US"."data": [{"intent": "agent.acquaintance"."utterances": [
"say about you"."why are you here"."what is your personality"."describe yourself"."tell me about yourself"."tell me about you"."what are you"."who are you"."I want to know more about you"."talk about yourself"]."answers": [
"I'm a virtual agent"."Think of me as a virtual agent"."Well, I'm not a person, I'm a virtual agent"."I'm a virtual being, not a real person"."I'm a conversational app"] {},"intent": "agent.age"."utterances": [
"your age"."how old is your platform"."how old are you"."what's your age"."I'd like to know your age"."tell me your age"]."answers": [
"I'm very young"."I was created recently"."Age is just a number. You're only as old as you feel"]]}}Copy the codeTo train our chatbot, we borrowed a larger corpus from the library example
But for use cases, feel free to create your own corpus. Just remember that the library wants to read the corpus from a URL. When index.html opens in your browser, you should see a simple chat table that doesn’t do anything yet.
However, if you open the browser console, you can already see the successful training output:
The training is very fast and makes the trained model usable for chatbots in browsers. This is a more efficient approach because the corpus file is much smaller than the generated model.
Training the first machine learning code feels good. You just became a legend, and one of the few people on the planet who can say, “Yeah, I trained AI once, no big deal.”
Chatbot HTML
Now we’ll make the Chatbot form work. And add the onChatSubmit function to index.html
<html>
<head>
<title>NLP in a browser</title>
<script src='./dist/bundle.js'></script>
<script>
const {containerBootstrap, Nlp, LangEn, fs} = window.nlpjs;
const setupNLP = async corpus => {
const container = containerBootstrap();
container.register('fs', fs);
container.use(Nlp);
container.use(LangEn);
const nlp = container.get('nlp');
nlp.settings.autoSave = false;
await nlp.addCorpus(corpus);
nlp.train();
return nlp;
};
const onChatSubmit = nlp= > async event => {
event.preventDefault();
const chat = document.getElementById('chat');
const chatInput = document.getElementById('chatInput');
chat.innerHTML = chat.innerHTML + `<p>you: ${chatInput.value}</p>`;
const response = await nlp.process('en', chatInput.value);
chat.innerHTML = chat.innerHTML + `<p>chatbot: ${response.answer}</p>`;
chatInput.value = ' ';
};
(async() = > {const nlp = await setupNLP('https://raw.githubusercontent.com/jesus-seijas-sp/nlpjs-examples/master/01.quickstart/02.filecorpus/corpus-en.json');
const chatForm = document.getElementById('chatbotForm');
chatForm.addEventListener('submit', onChatSubmit(nlp)); }) ();</script>
</head>
<body>
<h1>NLP in a browser</h1>
<div id="chat"></div>
<form id="chatbotForm">
<input type="text" id="chatInput" />
<input type="submit" id="chatSubmit" value="send" />
</form>
</body>
</html>
Copy the codeNow you can use the new chatbot:
Browse the corpus in this JSON to see which conversation topics are supported. Now you can show it to your friends in the bar and easily gain their admiration because you are now a real hacker.
Add a Hook to the intent
You might want the chatbot to be able to call some other code with each intent, or replace some of the answers with some API calls. Let’s extend index.html to the final version.
<html>
<head>
<title>NLP in a browser</title>
<script src='./dist/bundle.js'></script>
<script>
const {containerBootstrap, Nlp, LangEn, fs} = window.nlpjs;
function onIntent(nlp, input) {
console.log(input);
if (input.intent === 'greetings.hello') {
const hours = new Date().getHours();
const output = input;
if(hours < 12) {
output.answer = 'Good morning! ';
} else if(hours < 17) {
output.answer = 'Good afternoon! ';
} else {
output.answer = 'Good evening! ';
}
return output;
}
return input;
}
const setupNLP = async corpus => {
const container = containerBootstrap();
container.register('fs', fs);
container.use(Nlp);
container.use(LangEn);
const nlp = container.get('nlp');
nlp.onIntent = onIntent;
nlp.settings.autoSave = false;
await nlp.addCorpus(corpus);
nlp.train();
return nlp;
};
const onChatSubmit = nlp= > async event => {
event.preventDefault();
const chat = document.getElementById('chat');
const chatInput = document.getElementById('chatInput');
chat.innerHTML = chat.innerHTML + `<p>you: ${chatInput.value}</p>`;
const response = await nlp.process('en', chatInput.value);
chat.innerHTML = chat.innerHTML + `<p>chatbot: ${response.answer}</p>`;
chatInput.value = ' ';
};
(async() = > {const nlp = await setupNLP('https://raw.githubusercontent.com/jesus-seijas-sp/nlpjs-examples/master/01.quickstart/02.filecorpus/corpus-en.json');
const chatForm = document.getElementById('chatbotForm');
chatForm.addEventListener('submit', onChatSubmit(nlp)); }) ();</script>
</head>
<body>
<h1>NLP in a browser</h1>
<div id="chat"></div>
<form id="chatbotForm">
<input type="text" id="chatInput" />
<input type="submit" id="chatSubmit" value="send" />
</form>
</body>
</html>
Copy the codeAdd a line to setupNLP:
nlp.onIntent = onIntent;
Copy the codeThen create the onIntent function. Note that onIntent displays the returned result object in the console for each intent. Also, in greetings. Hello, add logic to the intent by replacing the user’s output with an answer based on the user’s current time. As far as I’m concerned, it’s afternoon:
Isn’t that great? If you’re starting your own AI startup, give it a high five.
Known limitations
Note that the browser version of NLP does not support some common natural language processing features, such as named entities or entity extraction available in the full library.
NLP as a library does not currently support more complex functionality either. These are part of the current development of the Chatbot business process, but at the time of this writing, the functionality is still experimental.
Security and privacy considerations
When using this solution, remember that anyone who visits your site can use the entire corpus and its functionality in a browser. This also makes it easy for anyone to download your corpus, manipulate it, and use it in other ways. Make sure your browser doesn’t expose any private information.
Using a browser-only solution has some advantages, but it also eliminates some opportunities, because you still need some back-end solution to be able to record what users are talking about with your chatbot. Also, if you record entire conversations, consider privacy concerns, especially in legislation like the GDPR.
