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

Sentry blog image

How to reduce TTFB

In the past few years in the web dev world, we’ve seen a significant push towards rendering our websites on the server. Doing so is better for SEO and performs better on low-powered devices, but one thing we had to sacrifice is TTFB.

In this article, we’ll see how we can identify what makes our TTFB high so we can fix it.

Read more

Top comments (0)

Sentry image

See why 4M developers consider Sentry, “not bad.”

Fixing code doesn’t have to be the worst part of your day. Learn how Sentry can help.

Learn more

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay