v2.1 react

.github/workflows/react-demos.yml

@@ -39,13 +39,15 @@ jobs:
       - name: Pre-build dependencies
         run: npm install yarn
 
+      # ************** REMOVE AFTER RELEASE ********************
       - name: Build Local Web SDK
         run: yarn && yarn copywasm && yarn build
         working-directory: binding/web
 
       - name: Build Local React SDK
         run: yarn && yarn build
         working-directory: binding/react
+        # ********************************************************
 
       - name: Install dependencies
         run: yarn install

.github/workflows/react.yml

@@ -44,9 +44,11 @@ jobs:
       - name: Pre-build dependencies
         run: npm install yarn
 
+      # ************** REMOVE AFTER RELEASE ********************
       - name: Build Local Web SDK
         run: yarn && yarn copywasm && yarn build
         working-directory: binding/web
+      # ********************************************************
 
       - name: Install dependencies
         run: yarn install

binding/react/README.md

@@ -183,10 +183,12 @@ If any arguments require changes, call `release`, then `init` again to initializ
 
 You do not need to call `release` when your component is unmounted - the hook will clean up automatically on unmount.
 
-## Non-English Languages
+### Language Model
 
-In order to detect non-English wake words you need to use the corresponding model file (`.pv`). The model files for all
-supported languages are available [here](https://github.com/Picovoice/cheetah/tree/master/lib/common).
+Default models for supported languages can be found in [lib/common](../../lib/common).
+
+Create custom language models using the [Picovoice Console](https://console.picovoice.ai/). Here you can train
+language models with custom vocabulary and boost words in the existing vocabulary.
 
 ## Demo
 

binding/react/package.json

@@ -36,7 +36,7 @@
     "test": "cypress run --component"
   },
   "dependencies": {
-    "@picovoice/cheetah-web": "=2.0.0"
+    "@picovoice/cheetah-web": "../web"
   },
   "devDependencies": {
     "@babel/core": "^7.21.3",

binding/react/scripts/setup_test.js

@@ -15,6 +15,16 @@ const paramsSourceDirectory = join(
   'common'
 );
 
+const testDataSource = join(
+  __dirname,
+  '..',
+  '..',
+  '..',
+  'resources',
+  '.test',
+  'test_data.json'
+);
+
 const sourceDirectory = join(__dirname, '..', '..', '..', 'resources');
 
 try {
@@ -27,6 +37,8 @@ try {
     );
   });
 
+  fs.copyFileSync(testDataSource, join(testDirectory, 'test_data.json'));
+
   fs.mkdirSync(join(fixturesDirectory, 'audio_samples'), { recursive: true });
   fs.readdirSync(join(sourceDirectory, 'audio_samples')).forEach(file => {
     fs.copyFileSync(

binding/react/test/use_cheetah.test.ts

@@ -5,16 +5,10 @@ import { useCheetah } from '../src';
 // @ts-ignore
 import cheetahParams from '@/cheetah_params.js';
 
-const ACCESS_KEY = Cypress.env('ACCESS_KEY');
+// @ts-ignore
+import testData from './test_data.json';
 
-const testParam = {
-  language: 'en',
-  audio_file: 'test.wav',
-  transcript:
-    'Mr. Quilter is the apostle of the middle classes and we are glad to welcome his gospel.',
-  punctuations: ['.'],
-  error_rate: 0.025,
-};
+const ACCESS_KEY = Cypress.env('ACCESS_KEY');
 
 const levenshteinDistance = (words1: string[], words2: string[]) => {
   const res = Array.from(
@@ -46,14 +40,14 @@ const wordErrorRate = (
   useCER = false
 ): number => {
   const splitter = useCER ? '' : ' ';
-  const ed = levenshteinDistance(
-    reference.split(splitter),
-    hypothesis.split(splitter)
-  );
-  return ed / reference.length;
+  const refWords = reference.split(splitter);
+  const hypWords = hypothesis.split(splitter);
+  const ed = levenshteinDistance(refWords, hypWords);
+  return ed / refWords.length;
 };
 
 const runProcTest = async (
+  audioFile: string,
   punctuations: string[],
   expectedTranscript: string,
   expectedErrorRate: number,
@@ -67,7 +61,7 @@ const runProcTest = async (
   const {
     accessKey = ACCESS_KEY,
     model = { publicPath: '/test/cheetah_params.pv', forceWrite: true },
-    enablePunctuation = true,
+    enablePunctuation = false,
     useCER = false,
   } = params;
   const { result } = renderHook(() => useCheetah());
@@ -87,11 +81,11 @@ const runProcTest = async (
     expect(result.current.isListening).to.be.true;
   });
 
-  cy.mockRecording('audio_samples/test.wav');
+  cy.mockRecording(audioFile);
 
   cy.wrapHook(result.current.stop).then(() => {
     let normalizedTranscript = expectedTranscript;
-    if (enablePunctuation) {
+    if (!enablePunctuation) {
       for (const punctuation of punctuations) {
         normalizedTranscript = normalizedTranscript.replaceAll(punctuation, '');
       }
@@ -192,22 +186,42 @@ describe('Cheetah binding', () => {
     });
   });
 
-  it(`should be able to process (${testParam.language})`, () => {
-    runProcTest(
-      testParam.punctuations,
-      testParam.transcript,
-      testParam.error_rate,
-      {
-        enablePunctuation: true,
-      }
-    );
-  });
+  for (const testParam of testData.tests.language_tests) {
+    const suffix = testParam.language === 'en' ? '' : `_${testParam.language}`;
+
+    it(`should be able to process (${testParam.language})`, () => {
+      cy.wrap(null).then(async () => {
+        await runProcTest(
+          `audio_samples/${testParam.audio_file}`,
+          testParam.punctuations,
+          testParam.transcript,
+          testParam.error_rate,
+          {
+            model: {
+              publicPath: `/test/cheetah_params${suffix}.pv`,
+              forceWrite: true,
+            },
+          }
+        );
+      });
+    });
 
-  it(`should be able to process with punctuation (${testParam.language})`, () => {
-    runProcTest(
-      testParam.punctuations,
-      testParam.transcript,
-      testParam.error_rate
-    );
-  });
+    it(`should be able to process with punctuation (${testParam.language})`, () => {
+      cy.wrap(null).then(async () => {
+        await runProcTest(
+          `audio_samples/${testParam.audio_file}`,
+          testParam.punctuations,
+          testParam.transcript,
+          testParam.error_rate,
+          {
+            model: {
+              publicPath: `/test/cheetah_params${suffix}.pv`,
+              forceWrite: true,
+            },
+            enablePunctuation: true,
+          }
+        );
+      });
+    });
+  }
 });

binding/react/yarn.lock

@@ -1110,12 +1110,10 @@
     "@nodelib/fs.scandir" "2.1.5"
     fastq "^1.6.0"
 
-"@picovoice/cheetah-web@=2.0.0":
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/@picovoice/cheetah-web/-/cheetah-web-2.0.0.tgz#d4415c25e324726356f979bed3761a94e884198e"
-  integrity sha512-WqxHUznNS7Rf8XfJCp0m0l+xeYFDSFhzOTg+b2DJn06x1slhpJA4CiK4egiH7FzhHiJtvqjLF0dO14LA8e1Gpg==
+"@picovoice/cheetah-web@../web":
+  version "2.1.0"
   dependencies:
-    "@picovoice/web-utils" "=1.3.1"
+    "@picovoice/web-utils" "=1.4.3"
 
 "@picovoice/web-utils@=1.3.1":
   version "1.3.1"
@@ -1124,6 +1122,13 @@
   dependencies:
     commander "^9.2.0"
 
+"@picovoice/web-utils@=1.4.3":
+  version "1.4.3"
+  resolved "https://registry.yarnpkg.com/@picovoice/web-utils/-/web-utils-1.4.3.tgz#1de0b20d6080c18d295c6df37c09d88bf7c4f555"
+  integrity sha512-7JN3YYsSD9Gtce6YKG3XqpX49dkeu7jTdbox7rHQA/X/Q3zxopXA9zlCKSq6EIjFbiX2iuzDKUx1XrFa3d8c0w==
+  dependencies:
+    commander "^10.0.1"
+
 "@picovoice/web-voice-processor@~4.0.8":
   version "4.0.8"
   resolved "https://registry.yarnpkg.com/@picovoice/web-voice-processor/-/web-voice-processor-4.0.8.tgz#95247a5393cac4d16490a53feb0f413c902ee5fa"
@@ -1723,6 +1728,11 @@ combined-stream@^1.0.6, combined-stream@~1.0.6:
   dependencies:
     delayed-stream "~1.0.0"
 
+commander@^10.0.1:
+  version "10.0.1"
+  resolved "https://registry.yarnpkg.com/commander/-/commander-10.0.1.tgz#881ee46b4f77d1c1dccc5823433aa39b022cbe06"
+  integrity sha512-y4Mg2tXshplEbSGzx7amzPwKKOCGuoSRP/CjEdwwk0FOGlUbq6lKuoyDZTNZkmxHdJtp54hdfY/JUrdL7Xfdug==
+
 commander@^2.20.0:
   version "2.20.3"
   resolved "https://registry.npmjs.org/commander/-/commander-2.20.3.tgz"

demo/react/README.md

@@ -16,22 +16,20 @@ Signup or Login to [Picovoice Console](https://console.picovoice.ai/) to get you
 
 ## Install and Run
 
-Use `yarn` or `npm` to install the dependencies. Run `start` to start the demo.
+Use `yarn` or `npm` to install the dependencies, and 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, `ko` -> Korean).
+To see a list of available languages, run `start` without a language code.
 
 ```console
 yarn
-yarn start
+yarn start ${LANGUAGE}
 ```
 
 (or)
 
 ```console
 npm install
-npm run start
+npm run start ${LANGUAGE}
 ```
 
 Open `http://localhost:3000` to view it in the browser.
-
-The page will reload if you make edits. You will also see any lint errors in the console.
-
-Wait until Cheetah has initialized. Start recording audio to see the real-time transcription.

demo/react/package.json

@@ -4,7 +4,7 @@
   "private": true,
   "description": "Cheetah React demo (made with Create React App)",
   "dependencies": {
-    "@picovoice/cheetah-react": "~2.0.0",
+    "@picovoice/cheetah-react": "../../binding/react",
     "@picovoice/web-voice-processor": "~4.0.8",
     "@types/node": "^18.11.9",
     "@types/react": "^18.0.17",

demo/react/scripts/run_demo.js

@@ -1,8 +1,33 @@
 const child_process = require("child_process");
 const fs = require("fs");
 const path = require("path");
+const testData = require("../../../resources/.test/test_data.json");
 
-const args = process.argv.slice(2, 3);
+const availableLanguages = testData["tests"]["language_tests"].map(
+  (x) => x["language"]
+);
+
+const args = process.argv.slice(2, -1);
+const language = process.argv.slice(-1)[0];
+if (!language) {
+  console.error(
+    `Choose the language you would like to run the demo in with "yarn start [language]".\nAvailable languages are ${availableLanguages.join(
+      ", "
+    )}`
+  );
+  process.exit(1);
+}
+
+if (!availableLanguages.includes(language)) {
+  console.error(
+    `'${language}' is not an available demo language.\nAvailable languages are ${availableLanguages.join(
+      ", "
+    )}`
+  );
+  process.exit(1);
+}
+
+const suffix = language === "en" ? "" : `_${language}`;
 const rootDir = path.join(__dirname, "..", "..", "..");
 
 const libDirectory = path.join(__dirname, "..", "src", "lib");
@@ -16,7 +41,7 @@ if (fs.existsSync(publicDirectory)) {
 }
 
 const modelDir = path.join(rootDir, "lib", "common");
-const modelName = "cheetah_params.pv";
+const modelName = `cheetah_params${suffix}.pv`;
 fs.copyFileSync(
   path.join(modelDir, modelName),
   path.join(publicDirectory, modelName)
@@ -37,7 +62,7 @@ fs.writeFileSync(
 
 const command = process.platform === "win32" ? "npx.cmd" : "npx";
 
-child_process.execSync(`${command} react-scripts ${args.join(" ")}`, {  
+child_process.execSync(`${command} react-scripts ${args.join(" ")}`, {
   shell: true,
   stdio: 'inherit'
 });

demo/react/yarn.lock

@@ -1616,19 +1616,21 @@
     "@nodelib/fs.scandir" "2.1.5"
     fastq "^1.6.0"
 
-"@picovoice/cheetah-react@~2.0.0":
+"@picovoice/cheetah-react@../../binding/react":
   version "2.0.0"
-  resolved "https://registry.yarnpkg.com/@picovoice/cheetah-react/-/cheetah-react-2.0.0.tgz#00bdd9377f2d141d07e6a08a9d57183cda7c9090"
-  integrity sha512-t6x3RVzmeUpm4+r/0+b6VMJhmzSVuoyXgvquU/K4HpM0gsJIfIruZOzTOEDsnVae/rmw61v98spxT9NjorZZ8g==
   dependencies:
-    "@picovoice/cheetah-web" "=2.0.0"
+    "@picovoice/cheetah-web" "../web"
 
-"@picovoice/cheetah-web@=2.0.0":
+"@picovoice/cheetah-web@../../binding/web":
+  version "2.1.0"
+  dependencies:
+    "@picovoice/web-utils" "=1.4.3"
+
+"@picovoice/cheetah-web@../web":
   version "2.0.0"
-  resolved "https://registry.yarnpkg.com/@picovoice/cheetah-web/-/cheetah-web-2.0.0.tgz#d4415c25e324726356f979bed3761a94e884198e"
-  integrity sha512-WqxHUznNS7Rf8XfJCp0m0l+xeYFDSFhzOTg+b2DJn06x1slhpJA4CiK4egiH7FzhHiJtvqjLF0dO14LA8e1Gpg==
   dependencies:
-    "@picovoice/web-utils" "=1.3.1"
+    "@picovoice/cheetah-web" "../../binding/web"
+    "@picovoice/web-voice-processor" "~4.0.8"
 
 "@picovoice/web-utils@=1.3.1":
   version "1.3.1"
@@ -1637,6 +1639,13 @@
   dependencies:
     commander "^9.2.0"
 
+"@picovoice/web-utils@=1.4.3":
+  version "1.4.3"
+  resolved "https://registry.yarnpkg.com/@picovoice/web-utils/-/web-utils-1.4.3.tgz#1de0b20d6080c18d295c6df37c09d88bf7c4f555"
+  integrity sha512-7JN3YYsSD9Gtce6YKG3XqpX49dkeu7jTdbox7rHQA/X/Q3zxopXA9zlCKSq6EIjFbiX2iuzDKUx1XrFa3d8c0w==
+  dependencies:
+    commander "^10.0.1"
+
 "@picovoice/web-voice-processor@~4.0.8":
   version "4.0.8"
   resolved "https://registry.npmjs.org/@picovoice/web-voice-processor/-/web-voice-processor-4.0.8.tgz"
@@ -3209,6 +3218,11 @@ combined-stream@^1.0.8:
   dependencies:
     delayed-stream "~1.0.0"
 
+commander@^10.0.1:
+  version "10.0.1"
+  resolved "https://registry.yarnpkg.com/commander/-/commander-10.0.1.tgz#881ee46b4f77d1c1dccc5823433aa39b022cbe06"
+  integrity sha512-y4Mg2tXshplEbSGzx7amzPwKKOCGuoSRP/CjEdwwk0FOGlUbq6lKuoyDZTNZkmxHdJtp54hdfY/JUrdL7Xfdug==
+
 commander@^2.20.0:
   version "2.20.3"
   resolved "https://registry.npmjs.org/commander/-/commander-2.20.3.tgz"