Rhino Speech-to-Intent
React Quick Start

Platforms

• Chrome & Chromium-based browsers
• Edge
• Firefox
• Safari

Requirements

• Picovoice Account and AccessKey
• Node.js 16+
• React 17+
• npm

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:

   • @picovoice/rhino-react
   • @picovoice/web-voice-processor

npm install @picovoice/rhino-react @picovoice/web-voice-processor

Usage

To initialize Rhino Speech-to-Intent, you'll need a context file (.rhn) as well as a model file (.pv). Place these files in the project's public directory or generate base64 representations of the files using the built-in script:

npx pvbase64 -i ${RHINO_PARAMS_PATH} -o ${OUTPUT_FILE_PATH}

Create a rhinoContext and a rhinoModel object with either of the methods above:

const RHINO_CONTEXT_BASE64 = /* Base64 representation of the `.rhn` context file*/;

const rhinoContext = {
  publicPath: "${CONTEXT_FILE_PATH}",
  // or
  base64: RHINO_CONTEXT_BASE64,
}

const RHINO_MODEL_BASE64 = /* Base64 representation of the `.pv` model file*/;

const rhinoModel = {
  publicPath: "${MODEL_FILE_PATH}",
  // or
  base64: RHINO_MODEL_BASE64,
}

Import and call the useRhino Hook, and initialize Rhino Speech-to-Intent with your AccessKey, rhinoContext, and rhinoModel:

import React, { useEffect } from 'react';
import { useRhino } from '@picovoice/rhino-react';

function VoiceWidget(props) {
  const {
    inference,
    contextInfo,
    isLoaded,
    isListening,
    error,
    init,
    process,
    release,
  } = useRhino();

  const rhinoContext = { publicPath: "${CONTEXT_FILE_PATH}" }
  const rhinoModel = { publicPath: "${MODEL_FILE_PATH}" }
  
  useEffect(() => {
    init(
      "${ACCESS_KEY}",
      rhinoContext,
      rhinoModel
    );
  }, [])

  useEffect(() => {
    if (inference !== null) {
      // ... use inference detection result
    }
  }, [inference])
  
  // ... render component
}

To start detecting for an inference, run the process function:

await process();

The process function initializes WebVoiceProcessor. Rhino Speech-to-Intent will then listen and process frames of microphone audio until it reaches a conclusion, then return the result via the inference variable. Once a conclusion is reached, Rhino will enter a paused state. From the paused state, process will need to be called again to detect another inference.

Allocated resources are automatically freed on unmount, but can also be done explicitly:

await release();

Custom Contexts

Create custom contexts in the Picovoice Console using the Rhino Speech-to-Intent Grammar. Train and download a Rhino context file (.rhn) for the target platform Web (WASM). This model file can be used directly with publicPath, but, if base64 is preferable, convert the .rhn file to a base64 JavaScript variable using the built-in pvbase64 script:

npx pvbase64 -i ${CONTEXT_FILE}.rhn -o ${CONTEXT_BASE64}.js -n ${CONTEXT_BASE64_VAR_NAME}

Similar to the model file (.pv), context files (.rhn) are saved in IndexedDB to be used by Web Assembly. Either base64 or publicPath must be set for the context to instantiate Rhino. If both are set, Rhino Speech-to-Intent will use the base64 model.

const contextModel = {
  publicPath: "${CONTEXT_FILE_PATH}",
  // or
  base64: "${CONTEXT_BASE64_STRING}",
}

Non-English Languages

In order to use Rhino Speech-to-Intent with different languages you need to use the corresponding model file (.pv) for the desired language. The model files for all supported languages are available in the Rhino GitHub repository.

Demo

For the Rhino Speech-to-Intent React SDK, there is a React demo project available on the Rhino GitHub repository.

Setup

Clone the Rhino Speech-to-Intent repository from GitHub:

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

Usage

1. Install dependencies:

cd rhino/demo/react
npm install

2. Run the demo with the start script with a language code to start a local web server hosting the demo in the language of your choice (e.g. de -> German, ko -> Korean). To see a list of available languages, run start without a language code.

npm run start ${LANGUAGE}

3. Open http://localhost:3000 to view it in the browser.

4. Enter your access key and press on Init Rhino to start the demo.

Resources