Rhino - React Web Quick Start
Platforms
- Chrome & Chromium-based browsers
- Edge
- Firefox
- Safari
Requirements
- Picovoice Account and AccessKey
- Node.js 12+
- React 16.8+
- 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-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:
- German: @picovoice/rhino-web-de-worker
- Spanish: @picovoice/rhino-web-es-worker
- French: @picovoice/rhino-web-fr-worker
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
- Install dependencies and run:
cd rhino/demo/reactnpm installnpm run start
- Open http://localhost:3000 to view it in the browser.
Resources
Packages
- @picovoice/rhino-web-react
- @picovoice/rhino-web-en-worker
- @picovoice/rhino-web-de-worker
- @picovoice/rhino-web-es-worker
- @picovoice/rhino-web-fr-worker
- @picovoice/web-voice-processor