譯者 | 布加迪
審校 | 孫淑娟
機(jī)器學(xué)習(xí)是現(xiàn)代世界的一項(xiàng)基礎(chǔ)技術(shù)。計算機(jī)可以學(xué)習(xí)識別圖像、創(chuàng)作藝術(shù)品，甚至自行編寫代碼，所有這些基本上不需要人的干預(yù)。
但機(jī)器學(xué)習(xí)是如何工作的？你自己又如何使用它呢？
一、機(jī)器學(xué)習(xí)簡介
機(jī)器學(xué)習(xí)是相對簡單的概念。計算機(jī)系統(tǒng)可以通過分析信息池中的現(xiàn)有數(shù)據(jù)模式來學(xué)習(xí)和適應(yīng)。這通常在沒有人類明確指示的情況下完成。
虛擬助手工具就是一個典例。Siri、Cortana和谷歌Assistant都廣泛使用機(jī)器學(xué)習(xí)來理解人類語言。這始于現(xiàn)有的音頻錄音庫，但這些工具也可以從它們與用戶的交互中學(xué)習(xí)。這使它們能夠自行改進(jìn)。
二、ml5.js簡介
大多數(shù)機(jī)器學(xué)習(xí)算法和工具使用R或Python編寫代碼，但ml5.js不一樣。作為谷歌的Tensorflow.js庫的接口，ml5.js是一個開源項(xiàng)目，將機(jī)器學(xué)習(xí)交到JavaScript開發(fā)人員的手中。
只需在HTML中包含單單一段外部腳本，你就可以開始將ml5.js用于自己的Web應(yīng)用程序。
三、機(jī)器學(xué)習(xí)入門：學(xué)習(xí)過程
訓(xùn)練機(jī)器學(xué)習(xí)算法需要時間。計算機(jī)的學(xué)習(xí)速度比人類快得多，但其學(xué)習(xí)方式也與人類不一樣。不過幸好，ml5.js隨帶一系列預(yù)先訓(xùn)練過的模型，因此你可以跳過這一步。
學(xué)習(xí)機(jī)器學(xué)習(xí)算法如何訓(xùn)練是更好地了解這類工具的好方法。
四、用JavaScript構(gòu)建圖像分類工具
ml5.js讓用戶很容易創(chuàng)建在網(wǎng)站上運(yùn)行的圖像分類工具。本例中的HTML頁面包含一個用于選擇圖像的文件輸入字段。上傳的圖像在準(zhǔn)備好的HTML元素中顯示，使ml5.js能夠掃描和識別它們。
1.包含ml5.js庫
這個項(xiàng)目需要兩個庫來運(yùn)作：ml5.js和p5.js。ml5.js是機(jī)器學(xué)習(xí)庫，而p5.js使用戶可以正確處理圖像。你需要兩行HTML代碼來添加這些庫：
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.0.0/p5.min.js"></script>
<script src="https://unpkg.com/ml5@latest/dist/ml5.min.js"></script>
2.創(chuàng)建一些HTML元素
接下來，該創(chuàng)建一些HTML元素了。最重要的是帶有ID和標(biāo)記為imageResult的類的div，它將存儲最終結(jié)果：
<h1>MakeUseOf Image Classifier</h1>
<h2>Click "Choose File" to Add an Image</h2>
<div class="imageResult" id="imageResult"></div>
之后，添加一個文件輸入元素，以收集供程序分類的圖像。
<div class="imageInput">
<input type="file"
notallow="uploadedImage.src=window.URL.createObjectURL(this.files[0]); startImageScan()">
</div>
輸入則負(fù)責(zé)監(jiān)聽oninput事件，并執(zhí)行兩條由分號分隔的語句，作為響應(yīng)。第一個語句為圖像創(chuàng)建對象URL，這讓你可以處理數(shù)據(jù)，不必將數(shù)據(jù)上傳到服務(wù)器。第二個語句調(diào)用startImageScan()函數(shù)，你將在下一步創(chuàng)建該函數(shù)。
最后，添加img元素來顯示用戶上傳的圖像：
<img class="uploadedImage" id="uploadedImage" />
3.創(chuàng)建掃描圖像的JavaScript函數(shù)
現(xiàn)在你已有了一些HTML，是時候添加一些JavaScript了。先添加一個const變量來存儲你在上一步中創(chuàng)建的imageResult元素。
const element = document.getElementById("imageResult");接下來，添加一個名為startImageScan()的函數(shù)，并在其中使用MobileNet初始化ml5.js圖像分類器。
隨后使用classifier.classify命令。為它傳遞前面添加的uploadedImage元素的引用，以及處理結(jié)果的回調(diào)函數(shù)。
function startImageScan() {
// Create a variable to initialize the ml5.js image classifier with MobileNet
const classifier = ml5.imageClassifier('MobileNet');
classifier.classify(document.getElementById("uploadedImage"), imageScanResult);
element.innerHTML = "...";
}4.創(chuàng)建結(jié)果顯示函數(shù)
還需要一個函數(shù)來顯示所執(zhí)行的圖像分類的結(jié)果。這個函數(shù)包含一個簡單的if語句，用于檢查任何錯誤。
function imageScanResult(error, results) {
if (error) {
element.innerHTML = error;
} else {
let num = results[0].confidence * 100;
element.innerHTML = results[0].label + "<br>Confidence: " + num.toFixed(0) + "%";
}
}5.組合起來
最后，是時候?qū)⑺羞@些代碼組合起來。留意<body>、<script>和<style>這幾個標(biāo)記很重要，確保你的代碼可正常運(yùn)行。
<!DOCTYPE html>
<html>
<head>
<!-- Include the p5.js library -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.0.0/p5.min.js"></script>
<!-- Include the ml5.js library -->
<script src="https://unpkg.com/ml5@latest/dist/ml5.min.js"></script>
<style>
/* Set styles for HTML elements */
h1, h2 {font-family: arial; text-align: center;}
.imageInput {width: 100%; text-align: center;}
.imageResult {font-family: arial; width: 100%; text-align: center; text-transform: uppercase;}
.uploadedImage {width: 50%; height: auto; margin-left: 25%;}
</style>
</head>
<body>
<h1>MakeUseOf Image Classifier</h1>
<h2>Click "Choose File" to Add an Image</h2>
<!-- Container for image classification result -->
<div class="imageResult" id="imageResult"></div>
<div class="imageInput">
<input type="file"
notallow="uploadedImage.src=window.URL.createObjectURL(this.files[0]); startImageScan()">
</div>
<!-- Container for the uploaded image -->
<img class="uploadedImage" id="uploadedImage" />
<script>
// Create a variable containing the result container
const element = document.getElementById("imageResult");
function startImageScan() {
// Create a variable to initialize the ml5.js image classifier with MobileNet
const classifier = ml5.imageClassifier('MobileNet');
// Scan the uploaded image
classifier.classify(document.getElementById("uploadedImage"), imageScanResult);
element.innerHTML = "...";
}
// Check for errors and display the results if there aren't any
function imageScanResult(error, results) {
if (error) {
element.innerHTML = error;
} else {
let num = results[0].confidence * 100;
element.innerHTML = results[0].label + "<br>Confidence: " + num.toFixed(0) + "%";
}
}
</script>
</body>
</html>
現(xiàn)在你可以使用一些圖像測試腳本了！ml5.js非常擅長對動物圖像進(jìn)行分類，比如這只蟋蟀。
遺憾的是，涉及到更復(fù)雜的圖像時，該庫可能會遇到困難。許多移動設(shè)備內(nèi)置這種技術(shù)與設(shè)備的攝像頭配合使用。其圖像分類不如iPhone和安卓手機(jī)上的技術(shù)來得完美，而且不太準(zhǔn)確。但是這種情況會有逐漸改善，因此值得為你的項(xiàng)目使用ml5.js的最新版本。
五、機(jī)器學(xué)習(xí)：計算的未來
正如你所見，在JavaScript中使用機(jī)器學(xué)習(xí)工具比預(yù)期的來得容易。這種技術(shù)很可能是計算界的未來，強(qiáng)人工智能等概念有賴于該技術(shù)。
原文鏈接：https://www.makeuseof.com/image-classification-tool-ml5-js-html/
