index.html

<link href="https://fonts.googleapis.com/css2?family=Carter+One&display=swap" rel="stylesheet">
<div style="padding-bottom: 1em; padding-top: 0.25em; text-align: center; background-color: #cccccc9f">
  <h3 style="font-family: 'Carter One', cursive;">If you're happy and you know it,<br/>press the button!</h3>
  <button id="btn" type="button" onclick="init()">Start 👏</button>
</div>
<script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs@1.3.1/dist/tf.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@tensorflow-models/speech-commands@0.4.0/dist/speech-commands.min.js"></script>

<script type="text/javascript">
  // more documentation available at
  // https://github.com/tensorflow/tfjs-models/tree/master/speech-commands

  // the link to your model provided by Teachable Machine export panel
  const URL = "https://teachablemachine.withgoogle.com/models/CW7ZZU1uE/";
  const { ipcRenderer } = require('electron');
  const tolerance = 0.90;

  async function createModel() {
    const checkpointURL = URL + "model.json"; // model topology
    const metadataURL = URL + "metadata.json"; // model metadata

    const recognizer = speechCommands.create(
      "BROWSER_FFT", // fourier transform type, not useful to change
      undefined, // speech commands vocabulary feature, not useful for your models
      checkpointURL,
      metadataURL);

    // check that model and metadata are loaded via HTTPS requests.
    await recognizer.ensureModelLoaded();

    return recognizer;
  }

  async function init() {
    let button = document.getElementById("btn");
    button.innerHTML = "Loading 🔄"
    let recognizer = await createModel();
    let classLabels = recognizer.wordLabels(); // get class labels

    // listen() takes two arguments:
    // 1. A callback function that is invoked anytime a word is recognized.
    // 2. A configuration object with adjustable fields
    recognizer.listen(result => {
      let scores = result.scores; // probability of prediction for each class
      if(result.scores[0].toFixed(2) > tolerance) {
        ipcRenderer.send('clap', 'clap')
      }
    }, {
      includeSpectrogram: true, // in case listen should return result.spectrogram
      probabilityThreshold: 0.75,
      invokeCallbackOnNoiseAndUnknown: true,
      overlapFactor: 0.50 // probably want between 0.5 and 0.75. More info in README
    });
    button.innerHTML = "Stop ❌"
    button.onclick = function() {
      recognizer.stopListening()
      button.onclick = init;
      button.innerHTML = "Start 👏"
    }
  }
</script>