angularRhino - Angular 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-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

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

Resources

Packages

API

GitHub

Benchmark

Further Reading


Issue with this doc? Please let us know.