Picovoice - Vue Web 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/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:

German: @picovoice/picovoice-web-de-worker
Spanish: @picovoice/picovoice-web-es-worker
French: @picovoice/picovoice-web-fr-worker

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

Install dependencies and run:

cd picovoice/demo/vue
npm install
npm run start

Picovoice - Vue Web Quick Start

Platforms

Requirements

Picovoice Account & AccessKey

Quick Start

Setup

Usage

Custom Models

Non-English Languages

Demo

Setup

Usage

Resources

Packages

API

GitHub

Benchmark

Further Reading