vuePicovoice - Vue Web 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/picovoice-web-vue @picovoice/picovoice-web-en-worker @picovoice/web-voice-processor

Usage

Create a Vue Component that detects a wake word and infers intent from spoken commands using a Porcupine keyword file (.ppn), and a Rhino context file (.rhn):

<script lang="ts">
import picovoiceMixin from "@picovoice/picovoice-web-vue";
import { PicovoiceWorkerFactoryEn } from "@picovoice/picovoice-web-en-worker";
const PPN_KEYWORD_PICOVOICE_64 = ${PPN_MODEL_B64}; /* Base64 representation of English language picovoice.ppn, omitted for brevity */
const RHN_CONTEXT_CLOCK_64 = ${RHN_MODEL_B64}; /* Base64 representation of English language clock_wasm.rhn, omitted for brevity */
const picovoiceFactoryArgs = {
accessKey: '${ACCESS_KEY}',
porcupineKeyword: {
base64: PPN_KEYWORD_PICOVOICE_64
custom: 'picovoice'
},
rhinoContext: {
base64: RHN_CONTEXT_CLOCK_64
},
start: true,
};
export default {
name: "App",
mixins: [picovoiceMixin],
data: function() {
return {
factory: PicovoiceWorkerFactoryEn,
factoryArgs: picovoiceFactoryArgs
};
},
async create() {
await this.$picovoice.init(
this.factoryArgs,
this.factory,
this.ppnKeywordFn,
this.rhnInferenceFn,
this.rhnInfoFn,
this.ppnReadyFn,
this.ppnErrorFn
);
},
methods: {
ppnReadyFn: function() {
// do something after load
},
ppnKeywordFn: function(label) {
if (label === 'picovoice') {
// keyword picovoice detected
}
},
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
},
ppnErrorFn: function(error) {
// handle error
},
},
};
</script>

The Hook will take care of microphone access and audio downsampling ( via @picovoice/web-voice-processor).

To start microphone recording:

this.$picovoice.start()

To stop microphone recording:

this.$picovoice.stop()

Custom Models

Create custom keywords and contexts using the Picovoice Console. Train the Porcupine and Rhino models for the target platform WebAssembly (WASM). Download the custom model files. Inside the .zip files, there is a _b64.txt file which contains the binary model encoded with Base64 for both Porcupine and Rhino. Copy the base64 and provide them as arguments to Picovoice:

const PPN_CUSTOM_KEYWORD = ${PPN_MODEL_B64};
const RHN_CUSTOM_CONTEXT = ${RHN_MODEL_B64};
const picovoiceFactoryArgs = {
accessKey: '${ACCESS_KEY}',
porcupineKeyword: {
base64: PPN_CUSTOM_KEYWORD
custom: 'custom word'
},
rhinoContext: {
base64: RHN_CUSTOM_CONTEXT
},
start: true,
};

Non-English Languages

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

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

These worker packages are compatible with the Vue SDK:

Demo

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

Setup

Clone the Picovoice repository from GitHub:

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

Usage

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

Resources

Packages

API

GitHub

Benchmark

Further Reading


Issue with this doc? Please let us know.