Skip to content

Latest commit

 

History

History
205 lines (170 loc) · 7.18 KB

webandreact.md

File metadata and controls

205 lines (170 loc) · 7.18 KB
Raw

Web and React Native

Preparing to generate a bundle

NLP.js is developed to be a Node.js project, but even with that it can be compiled to run in both Web and React Native applications. In fact, the libraries of NLP.js take this into account and the core libraries don't use anything that cannot be executed on web, like the file system. But to generate the web bundle it needs to install two development libraries: browserify and terser.

To do that run this in your project folder:

npm i -D browserify terser

Now you will need a script to generate the bundle. Open your package.json and add this in the scripts section:

    "browserdist": "browserify ./index.js | terser --compress --mangle > ./bundle.js"

From this moment, you can generate a file bundle.js containing the browser bundle by executing this:

npm run browserdist

Your first web NLP

You can download the code for this example here: https://github.com/jesus-seijas-sp/nlpjs-examples/tree/master/02.web/01.bundle

Now you will need some HTML to run the code in the browser, we will start with this simple example:

<html>
<head>
  <title>Test</title>
  <script src='./bundle.js'></script>
</head>
<body>
</body>
</html>

Install the libraries that will be needed to run the nlp:

npm i @nlpjs/core @nlpjs/lang-en-min @nlpjs/nlp

The @nlpjs/core is the one that installs the container system and basic architecture. The @nlpjs/nlp installs the nlp related things, and finally @nlpjs/lang-en-min installs the English language but without the sentiment dictionaries. That's because the sentiment analysis dictionaries are big in size.

Now create an index.js with this content:

const { containerBootstrap } = require('@nlpjs/core');
const { Nlp } = require('@nlpjs/nlp');
const { LangEn } = require('@nlpjs/lang-en-min');

(async () => {
  const container = await containerBootstrap();
  container.use(Nlp);
  container.use(LangEn);
  const nlp = container.get('nlp');
  nlp.settings.autoSave = false;
  nlp.addLanguage('en');
  // Adds the utterances and intents for the NLP
  nlp.addDocument('en', 'goodbye for now', 'greetings.bye');
  nlp.addDocument('en', 'bye bye take care', 'greetings.bye');
  nlp.addDocument('en', 'okay see you later', 'greetings.bye');
  nlp.addDocument('en', 'bye for now', 'greetings.bye');
  nlp.addDocument('en', 'i must go', 'greetings.bye');
  nlp.addDocument('en', 'hello', 'greetings.hello');
  nlp.addDocument('en', 'hi', 'greetings.hello');
  nlp.addDocument('en', 'howdy', 'greetings.hello');
  
  // Train also the NLG
  nlp.addAnswer('en', 'greetings.bye', 'Till next time');
  nlp.addAnswer('en', 'greetings.bye', 'see you soon!');
  nlp.addAnswer('en', 'greetings.hello', 'Hey there!');
  nlp.addAnswer('en', 'greetings.hello', 'Greetings!');
  await nlp.train();
  const response = await nlp.process('en', 'I should go now');
  console.log(response);
})();

This creates a model equal to the first example you can find in the quickstart. This line is very important because by default the nlp plugin tries to save the model after training, but in case, this will generate an exception.

nlp.settings.autoSave = false

Now you can generate the bundle running

npm run browserdist

The bundle size will be 111KB, compared to 3MB for version 3.x which is much better for the browser. Open the index.html in a browser and take a look in the console.

Creating a distributable version

You can download the source code for this example here: https://github.com/jesus-seijas-sp/nlpjs-examples/tree/master/02.web/02.dist

The problem with the previous example, is that every time that you have to modify your bot or build a new bot, you have to create the bundle again. But, what if we can compile and expose the classes and functions of the NLP.js modules that we want? That way we can create a bundle that can be reusable between different bots, while separating what is NLP.js from our bot logic.

First modify the index.js to not include our bot logic and to simply import everything from the NLP.js libraries and expose them using the window object:

const core = require('@nlpjs/core');
const nlp = require('@nlpjs/nlp');
const langenmin = require('@nlpjs/lang-en-min');

window.nlpjs = { ...core, ...nlp, ...langenmin };

Second, compile the bundle:

npm run browserdist

Third, move your bot logic to the index.html:

<html>
<head>
  <title>Test</title>
  <script src='./bundle.js'></script>
  <script>
  const { containerBootstrap, Nlp, LangEn } = window.nlpjs;

  (async () => {
    const container = await containerBootstrap();
    container.use(Nlp);
    container.use(LangEn);
    const nlp = container.get('nlp');
    nlp.settings.autoSave = false;
    nlp.addLanguage('en');
    // Adds the utterances and intents for the NLP
    nlp.addDocument('en', 'goodbye for now', 'greetings.bye');
    nlp.addDocument('en', 'bye bye take care', 'greetings.bye');
    nlp.addDocument('en', 'okay see you later', 'greetings.bye');
    nlp.addDocument('en', 'bye for now', 'greetings.bye');
    nlp.addDocument('en', 'i must go', 'greetings.bye');
    nlp.addDocument('en', 'hello', 'greetings.hello');
    nlp.addDocument('en', 'hi', 'greetings.hello');
    nlp.addDocument('en', 'howdy', 'greetings.hello');
    
    // Train also the NLG
    nlp.addAnswer('en', 'greetings.bye', 'Till next time');
    nlp.addAnswer('en', 'greetings.bye', 'see you soon!');
    nlp.addAnswer('en', 'greetings.hello', 'Hey there!');
    nlp.addAnswer('en', 'greetings.hello', 'Greetings!');
    await nlp.train();
    const response = await nlp.process('en', 'I should go now');
    console.log(response);
  })();
  </script>
</head>
<body>
</body>
</html>

Load corpus from URL

You can download the source code of this example here: https://github.com/jesus-seijas-sp/nlpjs-examples/tree/master/02.web/03.filecorpus

Previously, the corpus was manually loaded into the nlp, but what if we want a corpus in a json file, like in the backend and to load it from an URL? First, we need to register a valid file system into our container, in our case a request plugin that uses axios. First install the package:

npm i @nlpjs/request-rn

Now we need to expose it in our index.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 };

And compile the bundle:

npm run browserdist

The new bundle will be 126KB, that is 15KB more than without this plugin.

And in our index.html we change our script:

  const { containerBootstrap, Nlp, LangEn, fs } = window.nlpjs;

  (async () => {
    const container = await containerBootstrap();
    container.register('fs', fs);
    container.use(Nlp);
    container.use(LangEn);
    const nlp = container.get('nlp');
    nlp.settings.autoSave = false;
    await nlp.addCorpus('https://raw.githubusercontent.com/jesus-seijas-sp/nlpjs-examples/master/01.quickstart/02.filecorpus/corpus-en.json');
    await nlp.train();
    const response = await nlp.process('en', 'who are you');
    console.log(response);
  })();