拿 ml5 來練習 Teachable Machine (三)

ml5 teachable machine

chenjerfong 2020-10-29 23:09:31 ‧ 3333 瀏覽

分享至

介紹

首先介紹什麼是 Teachable Machine，
Teachable Machine 是一個網頁工具，讓程式設計師將機械學習的專業知識及如何撰寫機械學習的程式碼拋到腦後的情況下，
還能簡單地為網站應用程式訓練機器學習模型。(https://www.ithome.com.tw/news/134117)

備料

接著備料，

瀏覽 Teachable Machine 網站 (https://teachablemachine.withgoogle.com/)，按下 Get Started 按鈕，選擇新增一個 Audio Project 專案，畫面會如下所示。
按下 Background Noise 區塊裡的 Mic，再按下 Record 20 Seconds，瀏覽器會開始記錄背景的聲音20秒。 (會先跳出詢問是否讓此網頁有使用麥克風的權限，請按同意)
錄完後，按下 Extract Sample，會產生20個背景聲音的例子，最好再錄一次，讓 Background Noise 有40個例子可以用。(最少需要有20個例子)
接著前往 Class 2 區塊聚焦，如下圖所示，

按下後，將 Class 2 改名為館長，改名後，再按下此區塊的 Mic 按鈕，畫面會變成如下所示。
按下 Record 2 Seconds 旁的齒輪，將 Duration 改成10秒後，按下 Save Settings，
但是，再按下 Record 10 Seconds 之前，先把館長的聲音放出來 (https://www.youtube.com/watch?v=hd5HOjSlX_4) 之後再按。(錄完後，記得按下 Extract Sample，最好再錄一次，就可得到20個例子，雖然只要有8個例子就可以訓練，但建議準備20個例子)
準備好館長的例子之後，按下 Add a class 區塊，將 Class 3 改名為彭P，改名後，再按下此區塊的 Mic 按鈕，畫面會變成如下所示。
再按下彭P 區塊的 Record 10 Seconds 之前，先把彭P 的聲音放出來 (https://www.youtube.com/watch?v=mJQpW4_bzz0) 之後再按。(一樣準備20個例子)
準備好彭P 的例子之後，按下 Add a class 區塊，將 Class 4 改名為瑩真律師，改名後，再按下此區塊的 Mic 按鈕，再按下瑩真律師區塊的 Record 10 Seconds 之前，先把瑩真律師的聲音放出來 (https://www.youtube.com/watch?v=9GRn5Z-UaIQ) 之後再按。(一樣準備20個例子)
準備好這三個人的例子之後，按下 Training 區塊裡的 Train Model，訓練完成後，會如下圖所示。
按下 Preview 區塊裡的 Export Model，會跳出對話視窗，如下圖所示，點選 Upload my model，

等待上傳完成後，畫面會變成如下所示。(點選 Copy，並請先貼到其他地方，如：記事本)

11. 在 hello-ml5 裡新增兩個檔案，一檔名為 voice.html，另一檔名為 sketch_voice.js，在 voice.html 與 sketch_voice.js 分別輸入以下程式碼。

voice.html 的程式碼如下—

<html>

<head>
    <meta charset="UTF-8">
    <title>Sound classification using pre-trained custom model</title>

    <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" type="text/javascript"></script>
</head>

<body>
    <h1>Sound classification using pre-trained custom model</h1>
    <script src="sketch_voice.js"></script>
</body>

</html>

sketch_voice.js 的程式碼如下—

// Global variable to store the classifier
let classifier;

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

// Teachable Machine model URL:
let soundModel = '**此處貼上剛才複製在記事本上的URL**';


const options = { includeEmbedding: true };

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

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;
}

執行

備料完成後，就可啟動 Live Server，
在 VS Code 裡的 voice.html 程式碼按右鍵，在顯示的內容選單裡，點選 Open with Live Server，
就可顯示如下畫面。(會先跳出詢問是否讓此網頁有使用麥克風的權限，請按同意)

測試

分別在 Youtube 上開啟館長、彭P 、瑩真律師的聲音，看黑布上面是否有比較多次顯示對應聲音的正確名稱。

所以，訓練士兵 (model) 的演習地點 (Teachable Machine)，也可以直接在前線(前端網頁)。

參考資料

https://www.youtube.com/watch?v=TOrVsLklltM
https://ml5js.org/reference/api-soundClassifier/
https://github.com/tensorflow/tfjs-models/tree/master/speech-commands