reactRhino - React Web 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-react @picovoice/rhino-web-en-worker @picovoice/web-voice-processor

Usage

Create a useRhino Hook that infers intent from spoken commands within a given context :

import React, { useState } from 'react';
import { RhinoWorkerFactory } from '@picovoice/rhino-web-en-worker';
import { useRhino } from '@picovoice/rhino-web-react';
const ACCESS_KEY = ${ACCESS_KEY};
const RHN_CONTEXT_CLOCK_64 = ${RHN_MODEL_B64}; /* Base64 representation of English language clock_wasm.rhn, omitted for brevity */
function VoiceWidget(props) {
const [latestInference, setLatestInference] = useState(null);
const inferenceEventHandler = (rhinoInference) => {
console.log(`Rhino inferred: ${rhinoInference}`);
setLatestInference(rhinoInference);
};
const {
contextInfo,
isLoaded,
isListening,
isError,
isTalking,
errorMessage,
start,
pause,
pushToTalk,
} = useRhino(
RhinoWorkerFactory,
{ accessKey: ACCESS_KEY, context: { base64: RHN_CONTEXT_CLOCK_64 }, start: true },
inferenceEventHandler
);
return (
<div className="voice-widget">
<button onClick={() => pushToTalk()} disabled={isTalking || isError || !isLoaded}>
Push to Talk
</button>
<p>{JSON.stringify(latestInference)}</p>
</div>
)
}

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.

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

Demo

For the Rhino React SDK, there is a React 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/react
npm install
npm run start
  1. Open http://localhost:3000 to view it in the browser.

Resources

Packages

API

GitHub

Benchmark

Further Reading


Issue with this doc? Please let us know.