本篇大綱
機器學習的 JavaScript Library
前幾天看到文章，說 Google 有一套機器學習，是有給 JavaScript 用的版本，叫作「TensorFlow」，昨天打開網頁來看，有看到教學的第一個就寫：
想要開始機器學習，同時不用擔心任何類似張量或優化器的低級細節嗎？
ml5.js 庫構建在TensorFlow.js 之上，通過簡潔的、可利用的API，可以在瀏覽器中訪問機器學習算法和模型。
看到第二句就心動了，又再打開 ml5.js 的頁面後，第一個的教學就是圖像辨識。
教學頁面是用 ml5.js，加上 p5.js 去把抓到的圖片給丟到頁面上。不過 August 想了一下，覺得可以不用透過 p5.js，就能把使用者上傳的圖片給丟到頁面上了，就是之前寫過的這篇：
把抓到的圖片塞進 img 的 src 裡，再讓圖像識別模型去抓、去判斷，就省去了再去學 p5.js 的時間。
本篇筆記主要寫用 Vue.js，搭配 File API、ml5.js，做一個簡單的圖像識別頁面來玩。
最後完成的 Demo 頁在這邊：
https://letswritetw.github.io/letswrite-ml5-image-classifier/
Vue.js 抓 input file
原本是這樣子寫：
這是廣告，點擊一下可以幫本站多個一點點的廣告收入，謝謝
<input type="file" v-model="file" @change="getFile(file)">
習慣用 v-model 去抓 input 的值，但這樣寫會一直看到 getFile 抓出來的是檔案的名字，而不是檔案本身。後來查了一下，才知道 Vue.js 在 @change 裡的 method 中就可以抓到 file了，改成這樣寫就行：
<input type="file" @change="getFile">
new Vue({
// 省略
methods: {
getFile(e) {
var file = e.target.files[0];
var img = URL.createObjectURL(file);
}
}
})ml5.js 圖像辨識 API
確定了用 Vue.js 可以抓到 input file 裡的檔案後，接著就是要接 ml5 的圖像辨識 API。
官網的文件在這邊，以下是參考文件改成寫在 Vue.js 裡的：imageClassifier
第一個坑：沒等 model 載完
一開始就踩了一個坑，就是頁面一開啟，August 就按了選擇檔案的案鈕，然後就報錯了，說 classifier 不是一個 function。
回頭看了一下文件後發現，有說因為要載入圖像識別的 model，會花一點時間，所以 API 在載入完後會有一個 callback，確認 model 載入完成：
// Initialize the Image Classifier method with MobileNet
const classifier = ml5.imageClassifier('MobileNet', modelLoaded);
// When the model is loaded
function modelLoaded() {
console.log('Model Loaded!');
}之所以一開始會遇到報錯，就是在 model 未載入完時就選擇了檔案開始調用 API。
考慮到使用者也會有一樣的情況，就在頁面上加了一 層loading 的效果。在 model 載入完後移掉蓋住的 loading 就可以了。loading 效果選用了一個看上去有點 AI 感的（自己講），如下圖：
第二個坑：沒給圖片寬高
接著又踩了第二個坑，model 在讀圖的時候，必須要有圖片的尺寸，不能只是把 img src 放進去，報錯會報一個圖片尺寸 是0 x 0 的錯誤，所以無法判斷。
這部份就用 Vue.js 的 refs 去處理，August 寫的如下：
這是廣告，點擊一下可以幫本站多個一點點的廣告收入，謝謝
<input type="file" @change="getFile" ref="img">
new Vue({
// 省略
methods: {
getFile(e) {
var file = e.target.files[0];
var img = URL.createObjectURL(file);
img.width = this.$refs.img.width; // 設圖片寬
img.height = this.$refs.img.height; // 設圖片高
}
}
})踩過了以上二個坑以後，接著就順利了。
補充：關於圖片辨識模組
文件中有提到，模組的部份除了範例中的「MobileNet」，也還有「Darknet、Darknet-tiny」這二個，或者是可以讀自己的模組。
實測結果後，還是「MobileNet」比較準一點，至少放貓的圖片會回傳是 cat。
原始碼
原始碼的部份整理到 GitHub 上了，可從這邊下載：
https://github.com/letswritetw/letswrite-ml5-image-classifier
最後再放一次 Demo 的連結，可以玩玩看，不過回傳的資料都是英文，請按下 Google 翻譯：
https://letswritetw.github.io/letswrite-ml5-image-classifier/
以下是留言，但關於留言的部份必需先讓你們知道：
本站的文章都是 August 因為覺得有趣，才會實作並整理成筆記文而後進行發表。
如果留言是希望把 Demo 改成「你想要」的樣子，或是把功能改成「符合你需求」的樣子，
Sorry~ 除非那修改是 August 也有興趣的，不然不會幫你們寫程式去面對工作或是交作業。
未來這類的留言不會再主動回覆。😎
另外，公開信箱是為了讓金流驗證用，
因為之前遇過幾次回信協助解決問題後，對方卻一聲謝謝也沒有，就這樣拿去幫工作交差。
因此決定不再回覆信件，有疑問就利用留言功能囉。