Rhino - Angular Quick Start

Platforms

Chrome & Chromium-based browsers
Edge
Firefox
Safari

Requirements

Picovoice Account and AccessKey
Node.js 12+
Angular 11+
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-angular @picovoice/rhino-web-en-worker @picovoice/web-voice-processor

Usage

Add the RhinoService that infers intent from spoken commands within a given context to an Angular component. Subscribe to the inference event:

import { Subscription } from "rxjs"
import { RhinoService } from "@picovoice/rhino-web-angular"
import { RhinoWorkerFactory } from "@picovoice/rhino-web-en-worker"

export class VoiceWidget {
  private inferenceDetection: Subscription

  constructor(private rhinoService: RhinoService) {
    this.inferenceDetection = rhinoService.inference$.subscribe(
      inference => console.log(`Inferred intent: "${inference}"`)
    )
  }

  async ngOnInit() {
    const accessKey = ${ACCESS_KEY};

    const rhnContextB64 = ${RHN_MODEL_B64}; /* Base64 representation of English language clock_wasm.rhn, omitted for brevity */

    await this.rhinoService.init(
      RhinoWorkerFactory,
      {
        accessKey,
        context: {
          base64: rhnContextB64
        },
      }
    )
  }

  public pushToTalk() {
    this.rhinoService.pushToTalk()
  }

  ngOnDestroy() {
    this.inferenceDetection.unsubscribe()
    this.rhinoService.release()
  }
}

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.

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

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.

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 Angular SDK:

Demo

For the Rhino Angular SDK, there is a Angular 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/angular
npm install
npm run start

Rhino - Angular Quick Start

Platforms

Requirements

Picovoice Account & AccessKey

Quick Start

Setup

Usage

Custom Contexts

Non-English Languages

Demo

Setup

Usage

Resources

Packages

API

GitHub

Benchmark

Further Reading