Deploy on the browser

The goal is to run the skill directly in the browser to achieve a conversational system

1. Type npx webpack in the terminal

2. You find the generated file in dist

3. Create an index.html file:

<script src="https://unpkg.com/newbot@latest/dist/newbot.min.js"></script>
<script src="path/dist/browser"></script>

<script>
const converse = new NewBot(MainSkill)
converse.exec('Hey', (output, done) => {
    console.log(output)
    done()
})
</script>

MainSkill is a global variable in the generated file.

On browser, setting the user ID as the second parameter of the exec () method is optional

With the native NLP

<script src="https://unpkg.com/newbot@latest/dist/newbot.with-nlp.min.js"></script>
<script src="skill.js"></script> <!-- you skill -->
<div>
    <input type="text" id="text">
    <button id="submit">Ok</button>
    <pre id="result"></pre>
</div>
<script>
    var converse = new NewBot(MainSkill, {
        model: '/model/model.nlp'
    })
    document.getElementById('submit').addEventListener('click', function() {
        var text = document.getElementById('text').value
        var result = document.getElementById('result')
        converse.exec(text, (output, done) => {
            result.innerText = JSON.stringify(output, null, 2)
            done()
        })
    })
</script>

1. Put the newbot.with-nlp.min.js file

2. Set the path to model.nlp

NLP in other languages (other than English)

Please, follow this tutorial : Web NLP

1. Install dependencies

npm i newbot @nlpjs/lang-fr

1. Use the modelLangs property

import { NewBot } from 'newbot/bootstrap/browser-with-nlp'
import MainSkill from '<path to your skill>'
import { LangFr } from '@nlpjs/lang-fr'

const converse = new NewBot(MainSkill, {
    model: '/model/model.nlp',
    modelLangs: [LangFr]
})

On-the-fly training

import { NewBot } from 'newbot/bootstrap/browser-with-nlp'
import { train } from 'newbot/packages/train'
import { LangFr } from '@nlpjs/lang-fr'
import MainSkill from '<path to your skill>';

(async function() {
    const converse = new NewBot(MainSkill)
    // second parameter is optional if only english
    const model = await train(converse, [LangFr])
    await converse.setModelNlp(model, [LangFr])
    converse.exec('hey', (output, done) => {
        console.log(output)
        done()
    })
})()

Use a bundler like webpack, parcel, rollup, etc. to read imports and generate a file

Use the parser

If you want to test uncompiled code directly in the browser, integrate the newbot.with-parser.min.js file instead

<script src="https://unpkg.com/newbot@latest/dist/newbot.with-parser.min.js"></script>

<script>
const converse = new NewBot()

converse.code(`
    @Event('start')
    start() {
        > Hello World
    }
`)

converse.exec('Hey', (output, done) => {
    console.log(output)
    done()
})
</script>

Beware, the newbot.with-parser.min.js file is much heavier than thenewbot.min.js file. Prefer the latter if reading uncompiled code is not necessary.