Wake words are the most-known example for always listening commands. Echo smart speakers and iPhones always listen for the wake words Alexa and Hey Siri to activate the software for listen to further voice commands.
Always listening commands are not limited to wake words. Airlines can add always listening commands such as "Book a Flight" or "Check in" directly to their websites instead of starting with "Hey Airline X".
Setup the Project
- Create:
npx create-react-app porcupine-react
- Install:
npm install @picovoice/porcupine-react @picovoice/web-voice-processor
- Download:
Run the following from the project folder to turn the binary model into a base64 string. Don't forget to replace
${DOWNLOADED_MODEL_PATH}with yours (e.g.~/Downloads/porcupine_params.pv).
npx pvbase64 -i ${DOWNLOADED_MODEL_PATH} -o src/porcupine_params.js
- Run
yarn start
Train Wake Word Models
- Sign up for Picovoice Console
- Visit
Porcupine Pageon Picovoice Console - Select
English - Type in
Hey Jarvisor the phrase you want. - Test it out on your browser.
- When you are happy, click on the train button.
- Select
Web (WASM)as the platform. - Click on Download. A
.zipfile will be downloaded. - Once you unzip, inside the folder, you see a
.ppna file. That's your speech model! Transform it into abase64string. Don't forget to replace${DOWNLOADED_PPN_PATH}with the path to downloaded file (e.g.~/Downloads/Hey-Jarvis_en_wasm_v2_1_0/Hey-Jarvis_en_wasm_v2_1_0.ppn on my Ubuntu machine)
npx pvbase64 \
-i ${DOWNLOADED_PPN_PATH} \
-o src/hey_jarvis.js \
-n heyJarvisKeywordModel
Wire it up
- Copy your
AccessKeyfrom the Picovoice Console - Create a file within
srccalledVoiceWidget.jsand paste the below into it. The code uses Porcupine's hook to create and start the wake word detection. Peplace${ACCESS_KEY}with yours.
import {useEffect, useState} from "react";
import {usePorcupine} from "@picovoice/porcupine-react";
import heyJarvisKeywordModel from "./hey_jarvis"
import modelParams from "./porcupine_params";
export default function VoiceWidget() {
const [keywordDetections, setKeywordDetections] = useState([]);
const {
keywordDetection,
isLoaded,
isListening,
error,
init,
start,
stop,
release
} = usePorcupine();
const initEngine = async () => {
await init(
${ACCESS_KEY},
{
"base64": heyJarvisKeywordModel,
"label": "Hey Jarvis"
},
{base64: modelParams}
);
start()
}
useEffect(() => {
if (keywordDetection !== null) {
setKeywordDetections((oldVal) =>
[...oldVal, keywordDetection.label])
}
}, [keywordDetection])
return (
<div className="voice-widget">
<h3>
<label>
<button
className="init-button"
onClick={() => initEngine()}
>
Start
</button>
</label>
</h3>
{keywordDetections.length > 0 && (
<ul>
{keywordDetections.map((label, index) => (
<li key={index}>{label}</li>
))}
</ul>
)}
</div>
);
}
- Modify the
App.jsto display theVoiceWidgetand click start:
import './App.css';
import VoiceWidget from "./VoiceWidget";
function App() {
return (
<div className="App">
<h1>
Porcupine React Demo
</h1>
<VoiceWidget />
</div>
);
}
export default App;
Looking for more?
Explore other languages on the Picovoice Console and check out for fully-working demos with Porcupine on GitHub.
Top comments (0)