@picovoice/picovoice-web-angular
    TypeScript icon, indicating that this package has built-in type declarations

    1.0.2 • Public • Published

    picovoice-web-angular

    Angular service for Picovoice for Web.

    To use the Porcupine or Rhino engines individually with Angular, see @picovoice/porcupine-web-angular and @picovoice/porcupine-rhino-angular, respectively.

    Introduction

    This library provides a unified wake word and follow-on naturally spoken command engine in-browser, offline. This allows a complete Voice AI interaction loop, such as the following:

    "Picovoice, set a timer for two minutes"

    Where "Picovoice" is the wake word to start the interaction, and the follow-on command is processed and directly converted from speech into structured data:

    {
      "isUnderstood": true,
      "intent": "setTimer",
      "slots": {
        "minutes": "2"
      }
    }

    The natural commands are domain-specific. In this case, a clock. It will only understand what you program it to understand, resulting in dramatic efficiency and accuracy improvements over generic Speech-to-Text approaches:

    "Picovoice, tell me a joke"

    {
      "isUnderstood": false
    }

    All processing is done via WebAssembly and Workers in a separate thread. Speech results are converted into inference directly, without intermediate Speech-to-Text.

    Underneath, Picovoice SDK wake word and inference detection is powered by the Porcupine and Rhino engines, respectively. If you wish to use those engines individually, you can use the npm packages specific to them.

    Compatibility

    The Picovoice SDKs for Web are powered by WebAssembly (WASM), the Web Audio API, and Web Workers.

    All modern browsers (Chrome/Edge/Opera, Firefox, Safari) are supported, including on mobile. Internet Explorer is not supported.

    Using the Web Audio API requires a secure context (HTTPS connection), with the exception of localhost, for local development.

    Installation

    Use npm or yarn to install the package and its peer dependencies. Each spoken language (e.g. 'en', 'de') is a separate package. For this example we'll use English ('en'):

    yarn add @picovoice/picovoice-web-angular @picovoice/picovoice-web-en-worker

    (or)

    npm install @picovoice/picovoice-web-angular @picovoice/picovoice-web-en-worker

    Usage

    In your Angular component, add the PicovoiceService. The PicovoiceService has keyword and inference events to which you can subscribe:

    import { Subscription } from "rxjs"
    import { PicovoiceService } from "@picovoice/picovoice-web-angular"
    
    ...
    
      constructor(private picovoiceService: PicovoiceService) {
        // Subscribe to Picovoice Keyword detections
        // Store each detection so we can display it in an HTML list
        this.keywordDetection = picovoiceService.keyword$.subscribe(
          keywordLabel => this.detections = [...this.detections, keywordLabel])
        // Subscribe to Rhino Inference events
        // Show the latest one in the widget
        this.inferenceDetection = picovoiceService.inference$.subscribe(
          inference => this.latestInference = inference)
      }

    We need to initialize Picovoice to tell it which keyword and context we want to listen to (and at what sensitivity). We can use the Angular lifecycle hooks ngOnInit and ngOnDestroy to start up and later tear down the Picovoice engines.

    Imports

    Using static imports for the picovoice-web-xx-worker packages is straightforward, but will impact your initial bundle size with an additional ~6MB. Depending on your requirements, this may or may not be feasible. If you require a small bundle size, see dynamic importing below.

    Static Import

    import {PicovoiceWorkerFactory as pvFactoryEn } from '@picovoice/picovoice-web-en-worker'
    
    async ngOnInit() {
        const pvFactoryEn =
        // Initialize Picovoice Service
        try {
          await this.picovoiceService.init(pvFactoryEn,
            {
              // Built-in wake word
              porcupineKeyword: {builtin: "Hey Google", sensitivity: 0.6},
              // Rhino context (Base64 representation of a `.rhn` file)
              rhinoContext: { base64: RHINO_CLOCK_64 },
              start: true
            })
        }
        catch (error) {
          console.error(error)
        }
      }
    
      ngOnDestroy() {
        this.keywordDetection.unsubscribe()
        this.inferenceDetection.unsubscribe()
        this.picovoiceService.release()
      }

    Dynamic Import

      async ngOnInit() {
        // Load Picovoice worker chunk with specific language model (large ~4-6MB chunk; dynamically imported)
        const pvFactoryEn = (await import('@picovoice/picovoice-web-en-worker')).PicovoiceWorkerFactory
        // Initialize Picovoice Service
        try {
          await this.picovoiceService.init(pvFactoryEn,
            {
              // Built-in wake word
              porcupineKeyword: {builtin: "Hey Google", sensitivity: 0.6},
              // Rhino context (Base64 representation of a `.rhn` file)
              rhinoContext: { base64: RHINO_CLOCK_64 },
              start: true
            })
        }
        catch (error) {
          console.error(error)
        }
      }
    
      ngOnDestroy() {
        this.keywordDetection.unsubscribe()
        this.inferenceDetection.unsubscribe()
        this.picovoiceService.release()
      }

    Install

    npm i @picovoice/picovoice-web-angular

    DownloadsWeekly Downloads

    4

    Version

    1.0.2

    License

    Apache-2.0

    Unpacked Size

    126 kB

    Total Files

    17

    Last publish

    Collaborators

    • dynamix70
    • kyeo
    • kenarsa
    • dbartle
    • ilavery