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();

Non-English Languages

In order to use Cheetah with other languages, you need to use the corresponding model file (.pv) for the desired language. The model files for all supported languages are available on the Cheetah GitHub repository.

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 with a language code to start a local web server hosting the demo in the language of your choice (e.g. de -> German, es -> Spanish). 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 Cheetah. Once Cheetah Speech-to-Text has loaded, upload an audio file or record audio with a microphone to begin transcribing speech-to-text.

Resources