vueRhino - Vue Quick Start

Platforms

  • Chrome & Chromium-based browsers
  • Edge
  • Firefox
  • Safari

Requirements

Picovoice Account & AccessKey

Signup or Login to Picovoice Console to get your AccessKey. Make sure to keep your AccessKey secret.

Quick Start

Setup

  1. Install Node.js.

  2. Install the npm packages:

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

Usage

Create a Vue Mixin that infers intent from spoken commands within a given context:

<script lang="ts">
import rhinoMixin from "@picovoice/rhino-web-vue";
import { RhinoWorkerFactoryEn } from "@picovoice/rhino-web-en-worker";
const RHN_CONTEXT_CLOCK_64 = ${RHN_MODEL_B64}; /* Base64 representation of English language clock_wasm.rhn, omitted for brevity */
const rhinoFactoryArgs = {
accessKey: '${ACCESS_KEY}',
context: {
base64: RHN_CONTEXT_CLOCK_64
},
start: true,
};
export default {
name: "App",
mixins: [rhinoMixin],
data: function() {
return {
factory: RhinoWorkerFactoryEn,
factoryArgs: rhinoFactoryArgs
};
},
async created() {
await this.$rhino.init(
this.factoryArgs,
this.factory,
this.rhnInferenceFn,
this.rhnInfoFn,
this.rhnReadyFn,
this.rhnErrorFn
);
},
methods: {
rhnReadyFn: function() {
// do something after load
},
rhnInferenceFn: function(inference) {
if (inference.isUnderstood) {
const intent = inference.intent
const slots = inference.slots
// take action based on inferred intent and slot values
} else {
// handle unsupported commands
}
},
rhnInfoFn: function(info) {
// do something with info
},
rhnErrorFn: function(error) {
// handle error
},
},
};
</script>

The Rhino library is by default a "Push-to-talk" experience. Calling the pushToTalk function will trigger Rhino to listen and process frames of microphone audio until it reaches a conclusion:

this.$rhino.pushToTalk()

Custom Contexts

Create custom contexts in the Picovoice Console using the Rhino Grammar. Train the Rhino context for the target platform WebAssembly (WASM). Inside the .zip file, there is a _b64.txt file which contains the binary model encoded with Base64. Copy the base64 and provide it as an argument to Rhino.

const CUSTOM_CONTEXT_64 = "${CUSTOM_CONTEXT_MODEL_B64}"
const rhinoFactoryArgs = {
accessKey: '${ACCESS_KEY}',
context: {
base64: CUSTOM_CONTEXT_64
},
start: true,
};

Non-English Languages

Import { RhinoWorkerFactory } from the @picovoice/rhino-web-xx-worker series of packages, where xx is the two-letter language code:

import { RhinoWorkerFactory } from "@picovoice/rhino-web-xx-worker";

These worker packages are compatible with the Vue SDK:

Demo

For the Rhino Vue SDK, there is a Vue demo project available on the Rhino GitHub repository.

Setup

Clone the Rhino repository from GitHub:

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

Usage

  1. Install dependencies and run:
cd rhino/demo/vue
npm install
npm run start
  1. Open http://localhost:8080 to view it in the browser.

Resources

Packages

API

GitHub

Benchmark


Issue with this doc? Please let us know.