DEV Community

Cover image for OK Google, Add Hotword Detection to Chrome
Dilek Karasoy for Picovoice

Posted on

OK Google, Add Hotword Detection to Chrome

Today is day 25 and we'll learn how to add hotword detection to web browsers with Porcupine Wake Word Web SDK.

Setup the Project
Initialize an NPM project:

npm init
Enter fullscreen mode Exit fullscreen mode

Install the dependencies:

npm install @picovoice/web-voice-processor @picovoice/porcupine-web
Enter fullscreen mode Exit fullscreen mode

Install http-server as a development dependency:

npm install http-server --save-dev
Enter fullscreen mode Exit fullscreen mode

Download Porcupine (i.e. Deep Neural Network).
Run the following to turn the binary model into a base64 string, from the project folder.

npx pvbase64 -i ${DOWNLOADED_MODEL_PATH} -o porcupine_params.js
Enter fullscreen mode Exit fullscreen mode

Don't forget to replace ${DOWNLOADED_MODEL_PATH} with yours (e.g. ~/Downloads/porcupine_params.pv).
Create a boilerplate HTML file called index.html with the content below:

<!DOCTYPE html>
<html lang="en">
<head>
  <script src=
    "node_modules/@picovoice/web-voice-processor/dist/iife/index.js">
  </script>
  <script src=
    "node_modules/@picovoice/porcupine-web/dist/iife/index.js">
  </script>
  <script src="porcupine_params.js"></script>
</head>
<body>
<h1>Porcupine Web Demo</h1>
</body>
</html>
Enter fullscreen mode Exit fullscreen mode

Run the local server to load the page:

yarn run http-server -a localhost -p 5000
Enter fullscreen mode Exit fullscreen mode

Check the page at http://localhost:5000.

Train "OK Google"

  1. Sign up for Picovoice Console for free
  2. Go to the Porcupine Page.
  3. Select English as the language for your model.
  4. Type in "OK Google" and click on the train button.
  5. Select Web (WASM) as the platform and click on Download.
  6. Unzip the .zip file (which is probably in your download folder now.) You see a file with the suffix .ppn. That's the hotword model. Transform it into a base64 string.
npx pvbase64 \
-i ${DOWNLOADED_PPN_PATH} \
-o ok_google.js \
-n OK_GOOGLE_KEYWORD_MODEL
Enter fullscreen mode Exit fullscreen mode

Wire it up

  1. Copy your AccessKey from Picovoice Console.
  2. Add the base64 keyword model as a script:

<script src="ok_google.js"></script>

  1. Add div elements for debugging and showing the result:
<div id="status"></div>
<div id="result"></div>
Enter fullscreen mode Exit fullscreen mode
  1. Initialize Porcupine. Don't forget to replace ${ACCESS_KEY} with yours.
<script type="application/javascript">
function porcupineErrorCallback(error) {
  console.log(error);
  document.getElementById("status").innerHTML = error;
}
function porcupineKeywordCallback(detection) {
  const time = new Date();
  const message = `Detection at ${time.toLocaleTimeString()}`
  console.log(message);
  document.getElementById("result").innerHTML = message;
}

async function startPorcupine() {
  try {
    let porcupine = await PorcupineWeb.PorcupineWorker.create(
      ${ACCESS_KEY},
      [{label: "OK Google", base64: OK_GOOGLE_KEYWORD_MODEL}],
      porcupineKeywordCallback,
      {base64: modelParams},
    );
    await window.WebVoiceProcessor.
      WebVoiceProcessor.subscribe(porcupine);
  } catch (err) {
    porcupineErrorCallback(err);
  }
}
</script>
Enter fullscreen mode Exit fullscreen mode

Top comments (0)