大家好，我是章北海
Python是機器學(xué)習(xí)和深度學(xué)習(xí)的首選編程語言，但絕不是唯一。訓(xùn)練機器學(xué)習(xí)/深度學(xué)習(xí)模型并部署對外提供服務(wù)（尤其是通過瀏覽器）JavaScript 是一個不錯的選擇，市面上也出現(xiàn)了很多 JavaScript 機器學(xué)習(xí)庫，比較著名的就是谷歌的 TensorFlow.js。我在《用瀏覽器玩機器學(xué)習(xí)，贊！》一文中已詳細(xì)介紹TensorFlow.js的用法，感興趣的同學(xué)可以去看看。
今天要向大家介紹一個功能更加強大的 JavaScript 機器學(xué)習(xí)庫——ML5.js。它構(gòu)建在 Tensorflow 之上，可進一步簡化直接從 JavaScript訪問機器學(xué)習(xí)模型的過程。
ml5.js
ml5.js是一個javascript實現(xiàn)的，能在瀏覽器里面運行的機器學(xué)習(xí)框架，它封裝了tensorflow.js的API，給開發(fā)者提供一個更簡單的使用環(huán)境，降低了機器學(xué)習(xí)編碼的成本。
ml5js官方提供的機器學(xué)習(xí)案例類型有圖像、聲音和文本三個類別.
[圖片上傳失敗...(image-bc28bf-1649153571808)]
每個模型都有初始化，參數(shù)，屬性，方法的詳細(xì)介紹，以ml5.imageClassifier() 為例，大家去對應(yīng)目錄查看即可：
其實大家完全不用擔(dān)心難以使用，因為ml5.js，太簡單了。有多簡化？我們看一下核心代碼：
// Step 1: 使用MobileNet創(chuàng)建圖像分類模型
const classifier = ml5.imageClassifier('MobileNet', onModelReady);
// Step 2: 選擇一張圖片
const img = document.querySelector("#myImage")
// Step 3: 預(yù)測圖片分類結(jié)果
let prediction = classifier.predict(img, gotResults);
// Step 4: 對結(jié)果進行操作
function gotResults(err, results) {
console.log(results);
}
html中使用ml5.js更簡單了，只需一行：
<script src="https://unpkg.com/ml5@0.10.5/dist/ml5.min.js" type="text/javascript"></script>
是不是及其簡單？
ml5js 如何入門
學(xué)習(xí)ml5.js最佳方式是從官方實例入手：examples.ml5js.org
大家可以通過 p5.js web editor查看案例，不但可以實時看到效果，還有具體代碼：
p5.js 是一個JavaScript的函數(shù)庫，是一個對初學(xué)者非常友好的編程環(huán)境，能夠?qū)⒅谱鞒鰜淼挠袆?chuàng)意，有趣的東西呈現(xiàn)在任何的瀏覽器上。
[圖片上傳失敗...(image-2a2a4f-1649153571808)]
[圖片上傳失敗...(image-842eca-1649153571808)]
不過我更推薦克隆整個項目，然后在本地運行這些案例，步驟如下：
# 1:克隆項目
git clone https://github.com/ml5js/ml5-library.git
cd ml5-library
# 2:安裝依賴
npm install
# 3:運行本地服務(wù)
npm run develop
# 4:瀏覽器訪問 localhost:8081
ml5js 實例
以圖形識別為例，一個項目必須包含一個html頁面，代碼如下：
<html>
<head>
<meta charset="UTF-8">
<title>Image Classification Example</title>
<script src="https://unpkg.com/ml5@0.10.5/dist/ml5.min.js" type="text/javascript"></script>
</head>
<body>
<h1>Image classification using MobileNet</h1>
<p>The MobileNet model labeled this as <span id="result">...</span> with a confidence of <span id="probability">...</span>.</p>
<img src="images/dog.jpeg" id="image" width="400" />
<script src="sketch.js"></script>
</body>
</html>
模型實現(xiàn)在 sketch.js，代碼如下：
const image = document.getElementById('image'); // 需要識別的圖片
const result = document.getElementById('result'); // html中的結(jié)果標(biāo)簽
const probability = document.getElementById('probability'); // 識別概率標(biāo)簽
// 用MobileNet初始化imageClassifier
ml5.imageClassifier('MobileNet')
.then(classifier => classifier.classify(image))
.then(results => {
result.innerText = results[0].label;
probability.innerText = results[0].confidence.toFixed(4);
});
在image目錄下放我們要識別的圖片，本例中就是dog.jpeg
[圖片上傳失敗...(image-f655ae-1649153571808)]
建議VsCode運行，記得安裝 Live Server 插件
[圖片上傳失敗...(image-51ca40-1649153571808)]
用 Live Server 打開index.html，瀏覽器會自動彈出
[圖片上傳失敗...(image-1d3cdf-1649153571808)]
