Teachable Machineを用いてクラッピーの拍手認識

はじめに

#クラッピーチャレンジ Advent Calendar 2020 3日目の記事です。
過去にも拍手認識をしてきたのですが、今回はTeachable Machineを使って拍手認識していきます。

• Azure ML Studioを用いてクラッピーの拍手認識
• クラッピーの拍手をカウントしてみた（物理）

開発環境

• Windows 10 PC

プライムデーで安かったので、予備PC
【基本スペック】
OS：Windows 10 Home 64bit、CPU：インテル Core i7-9750H、GPU：NVIDIA GeForce GTX 1650 Ti Max-Q デザイン 4GB GDDR5、メモリ：16GB（8GB ×2）、SSD：512GB、液晶パネル：15.6インチ、フルHD（1,920×1,080）、リフレッシュレート120Hz pic.twitter.com/S8RIsayFPY

— 藤本賢志(ガチ本)@XRKaigi (@sotongshi) October 18, 2020

- Chromeブラウザ

導入

1．Teachable Machineを開きます

2．「使ってみる」から、音声プロジェクトをクリックします。

3．バックグラウンドノイズをマイクから録音しましょう。

4．生活音などを20秒間録音し、「サンプルを抽出」をクリックすると、学習用のデータが溜まります。

5．次に実際に認識させたい拍手音を2秒間録音し、サンプルを抽出していきます。クラッピーが手元にある人はパチパチしてください。僕は手元になかったので、過去の動画から学習データを作成しました。

6．バックグラウンドノイズが20個以上、認識させたい音が8個以上、サンプルが集まったら、トレーニングします。

7．トレーニングできたら、マイク入力がオンになっているので、拍手して認識できるか確認してみましょう！

実行結果

実行結果の動画をご覧ください。

TeachableMachineを用いて拍手認識 #クラッピーチャレンジ #TeachableMachine pic.twitter.com/06DuzTlI3N

— 藤本賢志(ガチ本)@XRKaigi (@sotongshi) December 3, 2020

モデルのエクスポートや共有もできます。今回のモデルはこちらから利用できます。

JavaScriptのサンプルコード

<div>Teachable Machine Audio Model</div>
<button type="button" onclick="init()">Start</button>
<div id="label-container"></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/Ic-n9CMI8/";

    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() {
        const recognizer = await createModel();
        const classLabels = recognizer.wordLabels(); // get class labels
        const labelContainer = document.getElementById("label-container");
        for (let i = 0; i < classLabels.length; i++) {
            labelContainer.appendChild(document.createElement("div"));
        }

        // 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 => {
            const scores = result.scores; // probability of prediction for each class
            // render the probability scores per class
            for (let i = 0; i < classLabels.length; i++) {
                const classPrediction = classLabels[i] + ": " + result.scores[i].toFixed(2);
                labelContainer.childNodes[i].innerHTML = classPrediction;
            }
        }, {
            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
        });

        // Stop the recognition in 5 seconds.
        // setTimeout(() => recognizer.stopListening(), 5000);
    }
</script>

p5.jsのサンプルコード

p5.js

<div>Teachable Machine Audio Model - p5.js and ml5.js</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.9.0/p5.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.9.0/addons/p5.dom.min.js"></script>
<script src="https://unpkg.com/ml5@latest/dist/ml5.min.js"></script>
<script type="text/javascript">
  // Global variable to store the classifier
let classifier;

// Label
let label = 'listening...';

// Teachable Machine model URL:
let soundModel = 'https://teachablemachine.withgoogle.com/models/Ic-n9CMI8/';


function preload() {
  // Load the model
  classifier = ml5.soundClassifier(soundModel + 'model.json');
}

function setup() {
  createCanvas(320, 240);
  // Start classifying
  // The sound model will continuously listen to the microphone
  classifier.classify(gotResult);
}

function draw() {
  background(0);
  // Draw the label in the canvas
  fill(255);
  textSize(32);
  textAlign(CENTER, CENTER);
  text(label, width / 2, height / 2);
}


// The model recognizing a sound will trigger this event
function gotResult(error, results) {
  if (error) {
    console.error(error);
    return;
  }
  // The results are in an array ordered by confidence.
  // console.log(results[0]);
  label = results[0].label;
}
</script>

tflite浮動小数点モデルに変換し、ダウンロードも可能です。

まとめ

Teachable Machineを用いて簡単に拍手の認識を行うことができました！
割と打音ならなんでも検知しちゃう感じなので学習データをもっと工夫していく必要がありそうです。
あとは、PythonからリアルタイムでTensorflow Liteを使いたいですね。
お疲れ様でした。