ml5.js 是基於 TensorFlow 開發的函式庫，用較為簡單的 API 就能在 web 上面做一些關於機器學習的事情。
能做到：
- 執行模型
- 重新訓練模型
- 開發基於 javaScript 的機器學習
用最最最少的 code 來體驗一下 ml5 吧。
只要有一頁靜態網頁。
- index.html
index.html 的內容 這段網頁內容是在開發者工具的consloe裡面顯示ml5的版本號。
<!DOCTYPE html>
<html lang="en">
<head>
<title>Getting Started with ml5.js</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://unpkg.com/ml5@latest/dist/ml5.min.js"></script>
</head>
<body>
<script>
// Your code will go here
// open up your console - if everything loaded properly you should see the correct version number
console.log('ml5 version:', ml5.version);
</script>
</body>
</html>
利用 CDN 的方式引入 添加這一段程式碼就能在網頁中使用ml5。
<script src="https://unpkg.com/ml5@latest/dist/ml5.min.js"></script>
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<title>Getting Started with ml5.js</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- p5 -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.0.0/p5.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.0.0/addons/p5.sound.min.js"></script>
<!-- ml5 -->
<script src="https://unpkg.com/ml5@latest/dist/ml5.min.js"></script>
</head>
<body>
<script>
// Your code will go here
// open up your console - if everything loaded properly you should see the latest ml5 version
console.log('ml5 version:', ml5.version);
function setup() {
createCanvas(400, 400);
}
function draw() {
background(200);
}
</script>
</body>
</html>
imageClassifier 用來載入模型（圖片或者影片），創建一組可用來做分類的物件實體。
基本用法
// 初始化圖片分類方法語與模型
const classifier = ml5.imageClassifier('MobileNet', modelLoaded);
// 當模型載入之後要執行的 function
function modelLoaded() {
console.log('Model Loaded!');
}
// 用指定的圖像來進行圖片預測
classifier.classify(document.getElementById('image'), (err, results) => {
console.log(results);
});範例是在網頁上開啟webcam，並提供錄像顯示（於是能看到自己被拍攝）。
我們需要
- index.html -> 一頁用來顯示的網頁
- sketch.js -> 做繪圖的 js 腳本
index.html 的內容
<html>
<head>
<meta charset="UTF-8">
<title>Webcam Image Classification using MobileNet and p5.js</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"></script>
</head>
<body>
<h1>Webcam Image Classification using MobileNet and p5.js</h1>
<script src="sketch.js"></script>
</body>
</html>
sketch.js 的內容
// 初始化變數
let classifier;
let video;
let resultsP;
// 開始
function setup() {
// 創建一個攝影機
video = createCapture(VIDEO);
// 創建 classify 實體
classifier = ml5.imageClassifier('MobileNet', video, modelReady);
// 在網頁上添加一個<p>標籤並給予內容 -> 是網頁載入影片之前要顯示的文字
resultsP = createP('Loading model and video...');
}
function modelReady() {
console.log('Model Ready');
classifyVideo();
}
// 當取得結果時要做的事
function gotResult(err, results) {
// 暫時還不明白是在做什麼的程式碼
resultsP.html(`Label: ${results[0].label } ${nf(results[0].confidence, 0, 2)}`);
classifyVideo();
}sketch.js 看完整體之後，來拆解一下：
- 初始化變數
- 入口
function setup() - 取得結果
function gotResult()
有做些許調整，想一想還是創一個 repo 來放程式碼好了。 範例的模型是用來偵測 webcam 被阻擋的程度，鏡頭全部都被擋住就會顯示 1。
一樣兩個檔案：
- index.html -> 一頁用來顯示的網頁
- sketch.js -> 做繪圖的 js 腳本
index.html
<html>
<head>
<meta charset="UTF-8">
<title>Webcam Image Classification using a pre-trianed customized model and p5.js</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"></script>
</head>
<body>
<h1>Webcam Image Classification using a pre-trianed customized model and p5.js</h1>
<p>If you cover your webcam, this model will classify it as "1", otherwise will classify anything else else "0" </p>
<script src="sketch.js"></script>
</body>
</html>
sketch.js
// 載入模型
const checkpoint =
"./model/image-model.json";
// 初始化變數
let classifier;
let video;
let resultsP;
// 載入之前的預處理
function preload() {
// 創建相機
video = createCapture(VIDEO);
// 用imageClassifier()載入 checkpoint (模型)
classifier = ml5.imageClassifier(checkpoint);
}
// 開始
function setup() {
// noCanvas() 清除畫布，用意是確保 setup() 之前沒有殘留上一偵的畫布
noCanvas();
// 在網頁上添加一個<p>標籤並給予內容 -> 是網頁載入影片之前要顯示的文字
resultsP = createP('Loading model and video...');
classifyVideo();
}
// 取得當時的影像，創建 classify 實體
function classifyVideo() {
classifier.classify(video, gotResult);
}
// 當取得結果時要做的事
function gotResult(err, results) {
// 暫時還不明白是在做什麼的程式碼
resultsP.html(`Label: ${results[0].label } ${nf(results[0].confidence, 0, 2)}`);
classifyVideo();
}學會 ml5.js 做影像分析的初步的使用方式。將模型丟進 ml5.imageClassifier 就能夠創造能被運算的目標的影像或者圖片，之後在使用 classify 取得運算結果。
ml5.js 與 p5.js 配合得相當好，一次能知道兩個函式庫還不錯。
ml5.js -> 做機器學習（基於 TensorFlow) p5.js -> 做繪圖（基於 HTML5 API - canvas)
個人學習用筆記，歡迎指教，指正錯誤。