DEV Community

Pallavi Ratra for WinkJS

Posted on • Originally published at winkjs.org

How to run NLP in the browser?

While winkNLP was initially made to run in NodeJS, it can just as easily be used in the browser. To do this, we need to use the web version of the English lite model — wink-eng-lite-web-model. We'll also need a tool that can bundle all the required modules, something like Webpack or Browserify. For the purpose of this tutorial we'll use Browserify. First, lets install the required packages:

We'll be installing Broswerify globally, refer to its documentation for more details.

npm install wink-nlp --save
npm install wink-eng-lite-web-model --save
npm install -g browserify
Enter fullscreen mode Exit fullscreen mode

Next, we'll write our JavaScript as we normally would. Here, we'll make a new file called token-counter.js and require winkNLP, some helpers, and the web model:

const winkNLP = require( 'wink-nlp' );
const its = require( 'wink-nlp/src/its.js' );
const as = require( 'wink-nlp/src/as.js' );
const model = require( 'wink-eng-lite-web-model' );
const nlp = winkNLP( model )

const text = `Its quarterly profits jumped 76% to $1.13 billion 
for the three months to December, from $639 million of previous 
year.`;
const doc = nlp.readDoc( text );

doc.entities().each((e) => e.markup());
document.getElementById("result").innerHTML = doc.out(its.markedUpText);
Enter fullscreen mode Exit fullscreen mode

Now, we'll use Broswerify to bundle all the required modules into a single file:

browserify token-counter.js -o bundle.js
Enter fullscreen mode Exit fullscreen mode

This will create a new file called bundle.js which you can include in your HTML as you would any other:

<div id="result"></div>
<script src="bundle.js" charset="utf-8"></script>
Enter fullscreen mode Exit fullscreen mode

This will create the following output:

Its quarterly profits jumped 76% to $1.13 billion for the three months to December, from $639 million of previous year.

Performance considerations

It is important to note that this is a fully-featured English language model. Make sure to use gzip when you serve it on the web. This will reduce its size to under 1MB (from the uncompressed 3.5MB). Also, setting an appropriate cache header will ensure that the client doesn't have to download it multiple times.

Top comments (0)