Rhino - React Web Quick Start

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

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>
  )
}

import { RhinoWorkerFactory } from "@picovoice/rhino-web-xx-worker";

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

cd rhino/demo/react
npm install
npm run start