建站
咨詢
售后
建站咨詢
新聞中心
譯者 | 布加迪
成都創(chuàng)新互聯(lián)是一家專注網(wǎng)站建設(shè)、網(wǎng)絡(luò)營銷策劃、微信小程序定制開發(fā)、電子商務(wù)建設(shè)、網(wǎng)絡(luò)推廣、移動(dòng)互聯(lián)開發(fā)、研究、服務(wù)為一體的技術(shù)型公司。公司成立十載以來，已經(jīng)為成百上千家隧道混凝土攪拌車各業(yè)的企業(yè)公司提供互聯(lián)網(wǎng)服務(wù)?，F(xiàn)在，服務(wù)的成百上千家客戶與我們一路同行，見證我們的成長；未來，我們一起分享成功的喜悅。
審校 | 孫淑娟
機(jī)器學(xué)習(xí)是現(xiàn)代世界的一項(xiàng)基礎(chǔ)技術(shù)。計(jì)算機(jī)可以學(xué)習(xí)識(shí)別圖像、創(chuàng)作藝術(shù)品，甚至自行編寫代碼，所有這些基本上不需要人的干預(yù)。
但機(jī)器學(xué)習(xí)是如何工作的？你自己又如何使用它呢？
一、機(jī)器學(xué)習(xí)簡介
機(jī)器學(xué)習(xí)是相對簡單的概念。計(jì)算機(jī)系統(tǒng)可以通過分析信息池中的現(xiàn)有數(shù)據(jù)模式來學(xué)習(xí)和適應(yīng)。這通常在沒有人類明確指示的情況下完成。
虛擬助手工具就是一個(gè)典例。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是一個(gè)開源項(xiàng)目，將機(jī)器學(xué)習(xí)交到JavaScript開發(fā)人員的手中。
只需在HTML中包含單單一段外部腳本，你就可以開始將ml5.js用于自己的Web應(yīng)用程序。
三、機(jī)器學(xué)習(xí)入門：學(xué)習(xí)過程
訓(xùn)練機(jī)器學(xué)習(xí)算法需要時(shí)間。計(jì)算機(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頁面包含一個(gè)用于選擇圖像的文件輸入字段。上傳的圖像在準(zhǔn)備好的HTML元素中顯示，使ml5.js能夠掃描和識(shí)別它們。
1.包含ml5.js庫
這個(gè)項(xiàng)目需要兩個(gè)庫來運(yùn)作：ml5.js和p5.js。ml5.js是機(jī)器學(xué)習(xí)庫，而p5.js使用戶可以正確處理圖像。你需要兩行HTML代碼來添加這些庫：
2.創(chuàng)建一些HTML元素
接下來，該創(chuàng)建一些HTML元素了。最重要的是帶有ID和標(biāo)記為imageResult的類的div，它將存儲(chǔ)最終結(jié)果：
MakeUseOf Image Classifier
Click "Choose File" to Add an Image
之后，添加一個(gè)文件輸入元素，以收集供程序分類的圖像。
notallow="uploadedImage.src=window.URL.createObjectURL(this.files[0]); startImageScan()">
輸入則負(fù)責(zé)監(jiān)聽oninput事件，并執(zhí)行兩條由分號(hào)分隔的語句，作為響應(yīng)。第一個(gè)語句為圖像創(chuàng)建對象URL，這讓你可以處理數(shù)據(jù)，不必將數(shù)據(jù)上傳到服務(wù)器。第二個(gè)語句調(diào)用startImageScan()函數(shù)，你將在下一步創(chuàng)建該函數(shù)。
最后，添加img元素來顯示用戶上傳的圖像：
3.創(chuàng)建掃描圖像的JavaScript函數(shù)
現(xiàn)在你已有了一些HTML，是時(shí)候添加一些JavaScript了。先添加一個(gè)const變量來存儲(chǔ)你在上一步中創(chuàng)建的imageResult元素。
const element = document.getElementById("imageResult");接下來，添加一個(gè)名為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ù)
還需要一個(gè)函數(shù)來顯示所執(zhí)行的圖像分類的結(jié)果。這個(gè)函數(shù)包含一個(gè)簡單的if語句，用于檢查任何錯(cuò)誤。
function imageScanResult(error, results) {
if (error) {
element.innerHTML = error;
} else {
let num = results[0].confidence * 100;
element.innerHTML = results[0].label + "
Confidence: " + num.toFixed(0) + "%";
}
}
5.組合起來
最后，是時(shí)候?qū)⑺羞@些代碼組合起來。留意
、MakeUseOf Image Classifier
Click "Choose File" to Add an Image
notallow="uploadedImage.src=window.URL.createObjectURL(this.files[0]); startImageScan()">