reactRhino - React Web Quick Start

  • WebAssembly
  • NLU

Compatibility

  • Chrome, Edge
  • Firefox
  • Safari

Install the NPM packages

Using Rhino with React requires installing three packages: the binding package, @picovoice/rhino-web-react, the language-specific web worker package (e.g. @picovoice/rhino-web-en-worker), and the @picovoice/web-voice-processor.

Use yarn or npm to install the packages to your project:

yarn add @picovoice/rhino-web-react @picovoice/rhino-web-en-worker @picovoice/web-voice-processor

(or)

npm install @picovoice/rhino-web-react @picovoice/rhino-web-en-worker @picovoice/web-voice-processor

Demo application

There is a Vue demo project available on the Rhino GitHub repository. The demo project was bootstrapped with Create React App.

Clone Picovoice GitHub repository

If using SSH, clone the Rhino repository with:

git clone --recurse-submodules [email protected]:Picovoice/rhino.git

If using HTTPS, then type:

git clone --recurse-submodules https://github.com/Picovoice/rhino.git

Install dependencies and run

Use yarn or npm to install the demo dependencies and start it:

cd rhino/demo/react
yarn
yarn start

(or)

cd rhino/demo/react
npm install
npm run start

Open http://localhost:3000 to view it in the browser.

Try Rhino

The demo is running a context called "Clock" (available as a .rhn file in the GitHub repository). Press the "Push to Talk" button to start a voice interaction.

Try a phrase that is in the context:

"Set a timer for two minutes"

The results will appear on screen:

{
"isFinalized": true,
"isUnderstood": true,
"intent": "setTimer",
"slots": { "minutes": "10" }
}

Try a phrase that is out-of-context:

"What's my horoscope?"

{
"isFinalized": true,
"isUnderstood": false,
"intent": null,
"slots": {}
}

This command falls outside of the domain of "Alarm Clock" and is therefore not understood.

Demo context source

The Alarm Clock was trained to understand a particular set of expressions. These are built using a simple grammar and grouped together into a YAML file. This file is trained by Picovoice Console to create a .rhn file for the WebAssembly (WASM) platform.

context:
expressions:
setAlarm:
- "set (a, an, the) [alarm, timer] for $pv.TwoDigitInteger:hours [hour, hours] (and) $pv.TwoDigitInteger:minutes [minute, minutes] (and) $pv.TwoDigitInteger:seconds [second, seconds]"
- "set (a, an, the) [alarm, timer] for $pv.TwoDigitInteger:hours [hour, hours] (and) $pv.TwoDigitInteger:minutes [minute, minutes]"
- "set (a, an, the) [alarm, timer] for $pv.TwoDigitInteger:hours [hour, hours] (and) $pv.TwoDigitInteger:seconds [second, seconds]"
- "set (a, an, the) [alarm, timer] for $pv.TwoDigitInteger:hours [hour, hours]"
- "set (a, an, the) [alarm, timer] for $pv.TwoDigitInteger:minutes [minute, minutes] (and) $pv.TwoDigitInteger:seconds [second, seconds]"
- "set (a, an, the) [alarm, timer] for $pv.TwoDigitInteger:minutes [minute, minutes]"
- "set (a, an, the) [alarm, timer] for $pv.TwoDigitInteger:seconds [second, seconds]"
- "$pv.TwoDigitInteger:hours [hour, hours] (and) $pv.TwoDigitInteger:minutes [minute, minutes] (and) $pv.TwoDigitInteger:seconds [second, seconds]"
- "$pv.TwoDigitInteger:hours [hour, hours] (and) $pv.TwoDigitInteger:minutes [minute, minutes]"
- "$pv.TwoDigitInteger:hours [hour, hours] (and) $pv.TwoDigitInteger:seconds [second, seconds]"
- "$pv.TwoDigitInteger:hours [hour, hours]"
- "$pv.TwoDigitInteger:minutes [minute, minutes] (and) $pv.TwoDigitInteger:seconds [second, seconds]"
- "$pv.TwoDigitInteger:minutes [minute, minutes]"
- "$pv.TwoDigitInteger:seconds [second, seconds]"
reset:
- "reset (the) (timer)"
pause:
- "[pause, stop] (the) (timer)"
resume:
- "resume (the) (timer)"

Issue with this doc? Please let us know.