新聞中心
譯者 | 布加迪

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


咨詢
建站咨詢