cleanup & fixes

binding/react/README.md

@@ -47,7 +47,7 @@ npm install --save @picovoice/cheetah-react @picovoice/web-voice-processor
 
 ## Usage
 
-Cheetah requires a model file (`.pv`) at initialization. Use one of the default language models found in [lib/common](../../lib/common), or create a custom Cheetah model (`.pv`) in the [Picovoice Console](https://console.picovoice.ai/) for the target platform `Web (WASM)`.
+Cheetah requires a model file (`.pv`) at initialization. Use the default language model found in [lib/common](../../lib/common), or create a custom Cheetah model (`.pv`) in the [Picovoice Console](https://console.picovoice.ai/) for the target platform `Web (WASM)`.
 
 There are two methods to initialize Cheetah.
 

binding/react/cypress/support/commands.ts

@@ -1,28 +1,31 @@
 import { WebVoiceProcessor } from '@picovoice/web-voice-processor';
 import { act } from '@testing-library/react-hooks/dom';
 
-Cypress.Commands.add("wrapHook", (fn: () => Promise<any>) => {
-  return cy.wrap(null).then(async () => {
+Cypress.Commands.add('wrapHook', (fn: () => Promise<any>) =>
+  cy.wrap(null).then(async () => {
     await act(async () => {
       await fn();
     });
-  });
-});
+  })
+);
 
-Cypress.Commands.add("mockRecording", (path: string, delayMs = 1000) => {
+Cypress.Commands.add('mockRecording', (path: string, delayMs = 1000) => {
   // @ts-ignore
   const instance = WebVoiceProcessor.instance();
 
   instance._microphoneStream?.getAudioTracks().forEach((track: any) => {
     track.enabled = false;
   });
 
-  cy.fixture(path, 'base64').then(Cypress.Blob.base64StringToBlob).then(async blob => {
-    const data = new Int16Array(await blob.arrayBuffer());
-    for (let i = 0; i < data.length; i += 512) {
-      instance.recorderCallback(data.slice(i, i + 512));
-    }
-  }).wait(delayMs);
+  cy.fixture(path, 'base64')
+    .then(Cypress.Blob.base64StringToBlob)
+    .then(async blob => {
+      const data = new Int16Array(await blob.arrayBuffer());
+      for (let i = 0; i < data.length; i += 512) {
+        instance.recorderCallback(data.slice(i, i + 512));
+      }
+    })
+    .wait(delayMs);
 
   instance._microphoneStream?.getAudioTracks().forEach((track: any) => {
     track.enabled = true;

binding/react/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@picovoice/cheetah-react",
-  "version": "1.0.0",
+  "version": "1.1.0",
   "description": "React hook for Cheetah Web SDK",
   "entry": "src/index.ts",
   "module": "dist/esm/index.js",
@@ -15,8 +15,11 @@
     "recognition",
     "ai",
     "speech-to-text",
+    "real-time",
     "transcription",
     "offline",
+    "hooks",
+    "react",
     "dom"
   ],
   "author": "Picovoice Inc",

binding/react/rollup.config.js

@@ -28,7 +28,7 @@ console.log(iifeBundleName);
 
 export default {
   input: [path.resolve(__dirname, pkg.entry)],
-  external: ['react', 'react-dom'],
+  external: ['react', 'react-dom', '@picovoice/web-voice-processor'],
   output: [
     {
       file: path.resolve(__dirname, pkg['module']),
@@ -47,9 +47,10 @@ export default {
       name: iifeBundleName,
       sourcemap: false,
       globals: {
-        'react': 'React',
+        react: 'React',
         'react-dom': 'ReactDOM',
-      }
+        '@picovoice/web-voice-processor': 'WebVoiceProcessor',
+      },
     },
     {
       file: path.resolve(__dirname, 'dist', 'iife', 'index.min.js'),
@@ -58,9 +59,10 @@ export default {
       sourcemap: false,
       plugins: [terser()],
       globals: {
-        'react': 'React',
+        react: 'React',
         'react-dom': 'ReactDOM',
-      }
+        '@picovoice/web-voice-processor': 'WebVoiceProcessor',
+      },
     },
   ],
   plugins: [

binding/react/test/use_cheetah.test.ts

@@ -106,9 +106,9 @@ describe('Cheetah binding', () => {
       expect(result.current.isListening).to.be.false;
 
       let completeTranscript = '';
-      result.all.forEach(resultObg => {
-        if ('result' in resultObg && resultObg.result !== null) {
-          completeTranscript += resultObg.result.partialTranscript;
+      result.all.forEach(resultObj => {
+        if ('result' in resultObj && resultObj.result !== null) {
+          completeTranscript += resultObj.result.partialTranscript;
         }
       });
 

demo/react/.gitignore

@@ -25,5 +25,5 @@ yarn-error.log*
 src/lib/*
 !src/lib/.gitkeep
 
-# Leopard params
+# Cheetah params
 public/models/*

demo/react/README.md

@@ -1,8 +1,8 @@
 # cheetah-web-react-demo
 
-This demo application consists of a `VoiceWidget` component which uses the `useCheetah` react hook to perform real-time speech-to-text. It instantiates a Cheetah worker engine and uses it with the [@picovoice/web-voice-processor](https://www.npmjs.com/package/@picovoice/web-voice-processor) to access (and automatically downsample) microphone audio. You can also directly upload an audio file to be transcribed.
+This demo application consists of a `VoiceWidget` component which uses the `useCheetah` react hook to perform real-time speech-to-text. It instantiates a Cheetah worker engine and uses it with the [@picovoice/web-voice-processor](https://www.npmjs.com/package/@picovoice/web-voice-processor) to access (and automatically downsample) microphone audio.
 
-If you choose to record audio and decline microphone permission in the browser, or another such issue prevents Cheetah from starting, the error will be displayed.
+If you decline microphone permission in the browser, or another such issue prevents Cheetah from starting, the error will be displayed.
 
 The demo also shows the various loading and error states, as well as mounting/unmounting the `VoiceWidget` with a toggle, demonstrating the complete lifecycle of Cheetah within a React app.
 

demo/react/package.json

@@ -1,6 +1,6 @@
 {
   "name": "cheetah-react-demo",
-  "version": "1.0.0",
+  "version": "1.1.0",
   "private": true,
   "description": "Cheetah React demo (made with Create React App)",
   "dependencies": {

demo/react/src/VoiceWidget.tsx

@@ -9,7 +9,7 @@ export default function VoiceWidget() {
   const { result, isLoaded, isListening, error, init, start, stop, release } =
     useCheetah();
 
-  const [transcript, setTranscript] = useState("");
+  const [transcript, setTranscript] = useState<string>("");
 
   useEffect(() => {
     if (result !== null) {