Cheetah Speech-to-Text
React Quick Start

Platforms

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

Requirements

• Picovoice Account and AccessKey
• Node.js 16+
• React 17.0+
• 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/cheetah-react
• @picovoice/web-voice-processor

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

Usage

Download a custom model from Picovoice Console or use the default model file. Place the model file in the project's public directory or generate a base64 representation of the file using the built-in script:

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

Create a cheetahModel object with either of the methods above:

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

const cheetahModel = {
  publicPath: "${MODEL_FILE_PATH}",
  // or
  base64: CHEETAH_MODEL_BASE64
}

Import and call the useCheetah Hook, and initialize Cheetah Streaming Speech-to-Text with your AccessKey and cheetahModel:

import React, { useEffect } from "react";
import { useCheetah } from "@picovoice/cheetah-react";

function VoiceWidget(props) {
  const {
    result,
    isLoaded,
    isListening,
    error,
    init,
    start,
    stop,
    release,
  } = useCheetah();

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

  useEffect(() => {
    if (result !== null) {
      // ... use transcript result
    }
  }, [result]);

  // ... render component
}

Cheetah Streaming Speech-to-Text React binding uses WebVoiceProcessor to record audio. To start recording and processing audio, call start:

await start();

Call stop to stop recording and processing audio:

await stop();

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

await release();

Demo

For the Cheetah Streaming Speech-to-Text React SDK, there is a React demo project available on the Cheetah Streaming Speech-to-Text GitHub repository.

Setup

Clone the Cheetah Streaming Speech-to-Text repository from GitHub:

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

Usage

1. Install dependencies:

cd cheetah/demo/react
npm install

2. Run the demo with the start script:

npm run start

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

4. Enter your access key and press on Init Cheetah to start recording for keyword detections.

Resources