ML5.js 神經網路 開發圖像辨識

/

機器學習的JS Library

前幾天看到文章,說Google有一套機器學習,是有給JavaScript用的版本,叫作「TensorFlow」,昨天打開網頁來看,有看到教學的第一個就寫:

想要開始機器學習,同時不用擔心任何類似張量或優化器的低級細節嗎?
ml5.js 庫構建在TensorFlow.js 之上,通過簡潔的、可利用的API,可以在瀏覽器中訪問機器學習算法和模型。

看到第二句就心動了,又再打開ml5.js的頁面後,第一個的教學就是圖像辨識。

教學頁面是用ml5.js,加上p5.js去把抓到的圖片給丟到頁面上。不過Augustus想了一下,覺得可以不用透過p5.js,就能把使用者上傳的圖片給丟到頁面上了,就是之前寫過的這篇:

File API 客製上傳檔案按鈕(input file)

把抓到的圖片塞進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載完

一開始就踩了一個坑,就是頁面一開啟,Augustus就按了選擇檔案的案鈕,然後就報錯了,說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未載入完時就選擇了檔案開始call API。

考慮到使用者也會有一樣的情況,就在頁面上加了一層loading的效果。在model載入完後移掉蓋住的loading就可以了。loading效果選用了一個看上去有點AI感的(自己講),如下圖:

loading effect
loading effect

第二個坑:沒給圖片寬高

接著又踩了第二個坑,model在讀圖的時候,必須要有圖片的尺寸,不能只是把img src放進去,報錯會報一個圖片尺寸是0 x 0的錯誤,所以無法判斷。

這部份就用vue.js的refs去處理,Augustus寫的如下:

<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/


Summary
ml5.js 開發神經網路圖像辨識
Article Name
ml5.js 開發神經網路圖像辨識
Description
本篇大綱:機器學習的JS Library、vue.js抓input file、ml5.js 圖像辨識API、第一個坑 沒等model載完、第二個坑 沒給圖片寬高、補充 關於圖片辨識模組、原始碼。本篇筆記主要寫用vue.js,搭配file API、ml5.js,做一個簡單的圖像識別頁面來玩。
Augustus
Let's Write
Let's Write
https://letswrite.tw/wp-content/uploads/2020/08/logo_512.jpg

隨選筆記文

Google Others

Youtube Iframe API 常用功能

Front-End

Auth0 Universal Login,做一個自己的會員註冊、登入功能

PWA

PWA學習筆記-1:cache、workbox基本使用

Google Maps

Google Maps API 學習筆記 – 2:在地圖上畫個日本結界

Bot LINE

用 LINE Push Messaging API 推播每日氣象預報

WordPress

如何用 MAMP 在本機安裝 WordPress

Bot Telegram

Telegram Bot 學習筆記 – 2:用 Google Apps Script 接收 / 推播訊息

Front-End

OSM + Leaflet 學習筆記2:移動中心點、抓目前地點

Google Maps

Google Maps API 學習筆記 – 5:抓目前位置、計算到各點距離

Vue

Vue.js 3 Composition API 基本學習筆記-2:fetch data、export / import

以下是留言,但關於留言的部份必需先讓你們知道:

本站的文章都是 Augustus 因為覺得有趣,才會實作並整理成筆記文而後進行發表。

如果留言是希望把 Demo 改成「你想要」的樣子,或是把功能改成「符合你需求」的樣子,

Sorry~ 除非那修改是 Augustus 也有興趣的,不然不會幫你們寫程式去面對工作或是交作業。

未來這類的留言不會再主動回覆。😎

另外,公開信箱是為了讓金流驗證用,

因為之前遇過幾次回信協助解決問題後,對方卻一聲謝謝也沒有,就這樣拿去幫工作交差。

因此決定不再回覆信件,有疑問就利用留言功能囉。

訂閱
通知
guest
1 Comment
最舊
最新
Inline Feedbacks
看所有留言
Nathan Cheng 鄭柏昇
Nathan Cheng 鄭柏昇
2 月 之前

給正在尋找使用Vue proj + cdn引入的朋友們參考: 由於p5.js、ml5.js 在npm的支援度不高,若是使用Vue專案建置的人, 引入p5.js、ml5.js cdn的方式可以如下: 1… 繼續閱讀 »

Let's Write

前端工程師 Augustus 的學習筆記 — solving problems, in simple ways.