Rhino - Vue Quick Start

Compatibility

Chrome, Edge
Firefox
Safari

Requirements

yarn (or npm)
Secure browser context (i.e. HTTPS or localhost)

Installation

Using Rhino with Vue requires installing three packages: the binding package, @picovoice/rhino-web-vue, 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-vue @picovoice/rhino-web-en-worker @picovoice/web-voice-processor

(or)

npm install @picovoice/rhino-web-vue @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 Vue CLI. See the Configuration Reference.

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:

yarn
yarn serve

(or)

npm install
npm run serve

Open http://localhost:8080 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)"