update

README.md

@@ -35,7 +35,9 @@ Cheetah is an on-device streaming speech-to-text engine. Cheetah is:
         - [Node.js](#nodejs-demo)
         - [.Net](#net-demo)
         - [Rust](#rust-demo)
-        - [Web](#web-demo)
+        - [Web](#web-demos)
+          - [Vanilla JavaScript and HTML](#vanilla-javascript-and-html)
+          - [React](#react-demo)
     - [SDKs](#sdks)
         - [Python](#python)
         - [C](#c)
@@ -49,6 +51,8 @@ Cheetah is an on-device streaming speech-to-text engine. Cheetah is:
         - [.Net](#net)
         - [Rust](#rust)
         - [Web](#web)
+          - [Vanilla JavaScript and HTML (ES Modules)](#vanilla-javascript-and-html-es-modules)
+          - [React](#react)
     - [Releases](#releases)
 
 ## AccessKey
@@ -235,7 +239,9 @@ Replace `${ACCESS_KEY}` with your Picovoice `AccessKey`.
 
 For more information about Rust demos, go to [demo/rust](./demo/rust).
 
-### Web Demo
+### Web Demos
+
+#### Vanilla JavaScript and HTML
 
 From [demo/web](./demo/web) run the following in the terminal:
 
@@ -253,6 +259,24 @@ npm run start
 
 Open `http://localhost:5000` in your browser to try the demo.
 
+#### React Demo
+
+From [demo/react](demo/react) run the following in the terminal:
+
+```console
+yarn
+yarn start
+```
+
+(or)
+
+```console
+npm install
+npm run start
+```
+
+Open `http://localhost:3000` in your browser to try the demo.
+
 ## SDKs
 
 ### Python
@@ -682,6 +706,8 @@ Replace `${ACCESS_KEY}` with yours obtained from [Picovoice Console](https://con
 
 ### Web
 
+#### Vanilla JavaScript and HTML (ES Modules)
+
 Install the web SDK using yarn:
 
 ```console
@@ -710,7 +736,7 @@ function transcriptCallback(cheetahTranscript: CheetahTranscript) {
 }
 
 function getAudioData(): Int16Array {
-... // function to get audio data
+  // ... function to get audio data
   return new Int16Array();
 }
 
@@ -729,6 +755,57 @@ cheetah.flush(); // runs transcriptionCallback on remaining data.
 
 Replace `${ACCESS_KEY}` with yours obtained from [Picovoice Console](https://console.picovoice.ai/). Finally, when done release the resources using `cheetah.release()`.
 
+#### React
+
+```console
+yarn add @picovoice/cheetah-react @picovoice/web-voice-processor
+```
+
+(or)
+
+```console
+npm install @picovoice/cheetah-react @picovoice/web-voice-processor
+```
+
+```typescript
+import { useCheetah } from "@picovoice/cheetah-react";
+
+function App(props) {
+  const {
+    result,
+    isLoaded,
+    isListening,
+    error,
+    init,
+    start,
+    stop,
+    release,
+  } = useCheetah();
+
+  const initEngine = async () => {
+    await init(
+      "${ACCESS_KEY}",
+      cheetahModel,
+    );
+  };
+
+  const toggleRecord = async () => {
+    if (isListening) {
+      await stop();
+    } else {
+      await start();
+    }
+  };
+
+  useEffect(() => {
+    if (result !== null) {
+      console.log(result.transcript);
+      console.log(result.isComplete);
+    }
+  }, [result])
+}
+```
+
 ## Releases
 
 ### v1.1.0 — August 11th, 2022

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 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)`.
+Cheetah requires a model file (`.pv`) at initialization. Use the default language model found in [lib/common](https://github.com/Picovoice/cheetah/tree/master/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.
 
@@ -150,14 +150,14 @@ Use the `result` state to get transcription results:
 ```typescript
 useEffect(() => {
   if (result !== null) {
-    console.log(result.partialTranscript);
+    console.log(result.transcript);
     console.log(result.isComplete);
   }
 }, [result])
 ```
 
-- `result.partialTranscript`: transcript returned from Cheetah
-- `result.isComplete`: whether the corresponding `partialTranscript` marks the end of a transcript (i.e. the end of a sentence)
+- `result.transcript`: transcript returned from Cheetah
+- `result.isComplete`: whether the corresponding `transcript` marks the end of a transcript (i.e. the end of a sentence)
 
 ### Stop
 
@@ -190,4 +190,4 @@ supported languages are available [here](https://github.com/Picovoice/cheetah/tr
 
 ## Demo
 
-[//]: # (For example usage refer to our [React demo application](https://github.com/Picovoice/cheetah/tree/master/demo/react).)
+For example usage refer to our [React demo application](https://github.com/Picovoice/cheetah/tree/master/demo/react).

binding/react/src/use_cheetah.ts

@@ -22,7 +22,7 @@ import {
 
 export const useCheetah = (): {
   result: {
-    partialTranscript: string;
+    transcript: string;
     isComplete?: boolean;
   } | null;
   isLoaded: boolean;
@@ -40,7 +40,7 @@ export const useCheetah = (): {
   const cheetahRef = useRef<CheetahWorker | null>(null);
 
   const [result, setResult] = useState<{
-    partialTranscript: string;
+    transcript: string;
     isComplete: boolean | undefined;
   } | null>(null);
   const [isLoaded, setIsLoaded] = useState<boolean>(false);
@@ -58,7 +58,7 @@ export const useCheetah = (): {
       }
 
       setResult({
-        partialTranscript: cheetahTranscript.transcript,
+        transcript: cheetahTranscript.transcript,
         isComplete: cheetahTranscript.isFlushed,
       });
     },

binding/react/test/use_cheetah.test.ts

@@ -100,7 +100,7 @@ const runProcTest = async (
     let completeTranscript = '';
     result.all.forEach(resultObj => {
       if ('result' in resultObj && resultObj.result !== null) {
-        completeTranscript += resultObj.result.partialTranscript;
+        completeTranscript += resultObj.result.transcript;
       }
     });
 

demo/react/src/App.css

@@ -20,6 +20,10 @@ button {
   padding: 2rem;
 }
 
+.transcript {
+  white-space: pre-wrap;
+}
+
 .error-message {
   background-color: maroon;
   color: white;

demo/react/src/VoiceWidget.tsx

@@ -6,7 +6,7 @@ import cheetahModel from "./lib/cheetahModel";
 export default function VoiceWidget() {
   const accessKeyRef = useRef<string>("");
 
-  const [isBusy, setIsBusy] = useState<boolean>(false)
+  const [isBusy, setIsBusy] = useState<boolean>(false);
   const [transcript, setTranscript] = useState<string>("");
 
   const { result, isLoaded, isListening, error, init, start, stop, release } =
@@ -15,10 +15,10 @@ export default function VoiceWidget() {
   useEffect(() => {
     if (result !== null) {
       setTranscript((prev) => {
-        let newTranscript = prev + result.partialTranscript;
+        let newTranscript = prev + result.transcript;
 
         if (result.isComplete) {
-          newTranscript += " ";
+          newTranscript += "\n";
         }
 
         return newTranscript;
@@ -31,21 +31,22 @@ export default function VoiceWidget() {
       return;
     }
 
-    setIsBusy(true)
+    setIsBusy(true);
     await init(accessKeyRef.current, cheetahModel, {
       enableAutomaticPunctuation: true,
     });
-    setIsBusy(false)
+    setIsBusy(false);
   }, [init]);
 
   const toggleRecord = async () => {
-    setIsBusy(true)
+    setIsBusy(true);
     if (isListening) {
       await stop();
     } else {
+      setTranscript("");
       await start();
     }
-    setIsBusy(false)
+    setIsBusy(false);
   };
 
   return (
@@ -87,11 +88,15 @@ export default function VoiceWidget() {
       <label htmlFor="record-audio">Record audio to transcribe: </label>
       <br />
       <br />
-      <button id="record-audio" onClick={toggleRecord} disabled={!isLoaded || isBusy}>
+      <button
+        id="record-audio"
+        onClick={toggleRecord}
+        disabled={!isLoaded || isBusy}
+      >
         {isListening ? "Stop Recording" : "Start Recording"}
       </button>
       <h3>Transcript:</h3>
-      <p>{transcript}</p>
+      <p className="transcript">{transcript}</p>
     </div>
   );
 }