The goal is to run the skill directly in the browser to achieve a conversational system
Type npx webpack
in the terminal
You find the generated file in dist
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>
Put the newbot.with-nlp.min.js
file
Set the path to model.nlp
NLP in other languages (other than English)
Please, follow this tutorial : Web NLP
npm i newbot @nlpjs/lang-fr
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.