Rhino - Vue Quick Start
Platforms
- Chrome & Chromium-based browsers
- Edge
- Firefox
- Safari
Requirements
- Picovoice Account and AccessKey
- Node.js 12+
- Vue 2.6.11+, 3.0.0+
- npm
Picovoice Account & AccessKey
Signup or Login to Picovoice Console to get your AccessKey
.
Make sure to keep your AccessKey
secret.
Quick Start
Setup
Install Node.js.
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.intentconst 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:
- German: @picovoice/rhino-web-de-worker
- Spanish: @picovoice/rhino-web-es-worker
- French: @picovoice/rhino-web-fr-worker
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
- Install dependencies and run:
cd rhino/demo/vuenpm installnpm run start
- Open http://localhost:8080 to view it in the browser.
Resources
Packages
- @picovoice/rhino-web-vue
- @picovoice/rhino-web-en-worker
- @picovoice/rhino-web-de-worker
- @picovoice/rhino-web-es-worker
- @picovoice/rhino-web-fr-worker
- @picovoice/web-voice-processor