拿 ml5 来练习 Teachable Machine (三)

介绍

首先介绍什麽是 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

<<: 零信任即存取控制2.0 (Zero Trust as Access Control 2.0)

>>: JS LHS与 RHS DAY46

拿 ml5 来练习 Teachable Machine (三)

介绍

备料

执行

测试

参考资料

[Day11] 函式 function

day11 : argo gitops服务以及ingress (上)

Day 22 [Python ML、资料视觉化] 散布图

Day 23：将你的 Hexo 使用 Git 指令备份到 Github 储存库另一个分支

Day2 线性回归(Linear Regression)

Day027-透过Vuex-实作简易部落格-列举及删除文章

ISO 27001 资讯安全管理系统【解析】(十二)

[Day 15] 小整理

DAY28: 光速了解与操作NVM

使用Visual studio code (vscode) 一键执行编译C++ compiler 超简单