###### tags: `FM628A`

# [FM628A]使用 face-api.js 進行人臉辨識與表情辨識

[face-api.js](https://justadudewhohacks.github.io/face-api.js/docs/index.html) 是一個網頁端的 JavaScript 程式庫, 可以讓網頁具有表情辨識、年齡辨識、人臉辨識等相關功能, 我們提供有事先準備好的網頁範例, 可以讓您將 face-api.js 透過 Blynk 與你的智慧屋串接在一起。

## 架設個人網站

為了使用 face-api.js 提供的人臉辨識, 必須要建置個人網站, 放置要辨識的人臉照片, 提供網頁內的程式訓練後建立辨識模型。我們選擇採用免費的 GitHub Pages 服務架設網站, 請先依照以下文章註冊並建置個人網站：

- [使用 GitHub Pages 架設個人網站](/sqF4oJISSNi8LeaCFEOugQ)

## Lab 12 是誰回來了

本實驗要實作人臉辨識, 請依照以下步驟完成：

1. 準備人臉照片：在範例檔中 www\FM628A\door_lock\images 資料夾下, 可依照要辨識的人名建立個別的資料夾, 在範例檔中預設有 Teddy 與 Chuan 兩個人的資料夾：


你可以依據自己的需要建立額外的資料夾。

每個資料夾中必須放置 3 張 jpg 或是 png 格式的人臉照片, 並分別取名為 1、2、3, 以下就是範例檔中個別資料夾內的範例照片：



範例網頁中的程式預設只會讀取 3 張照片, 如果你希望提高辨識成功率, 可以依循遞增數值的命名方式增加照片, 並修改範例檔 www\FM628A\door_lock\script.js 檔中第 161 行的程式：

          for (let i = 1; i <= 3; i++) {

將程式中的 3 改成你的照片張數即可。
:::danger
:fire: 由於這是人臉辨識, 所以請不要用其他動物的照片, 否則會因為提取不出人臉特徵導致網頁無法正常載入。
:::

1. 移到你的 GitHub 網頁, 執行『**Add file/Upload files**』功能表命令：


將範例檔中 www 下的 FM628A 資料夾整個拖放到 GitHub 頁面上：


確認檔案全部上傳完畢後, 按一下下方的 **Commit changes** 鈕提交上傳的檔案：


確認整個資料夾已經加入 GitHub：


1. 在你的手機上開啟瀏覽器, 輸入以下網址開啟人臉辨識網頁：

    https://使用者名稱.github.io/FM628A/door_lock

請記得將上述網址中的『使用者名稱』替換成你自己的使用者名稱, 會看到以下的畫面：


請用逗號隔開輸入人臉照片資料夾的名稱, 預設就是範例檔中的 "Teddy,Chuan"。填入後按**確定**會看到下個畫面：


表示網頁程式正在讀取照片, 這個階段會需要一點時間, 請耐心等候, 就會看到如下畫面：


請先在下方輸入 Blynk 的認證權杖, 接著就可以對著要辨識的人臉按下**辨識按鈕**, 它會在畫面上以藍色方框標示人臉位置以及名稱, 名稱後方會標註畫面中的人臉與資料夾中的照片差距, 以 0~1 表示, 數值越大越不像, 範例網頁只會在距離小於 0.4 時才會當成辨識成功, 並傳送結果到 Blynk。

如果你想調整距離條件, 可以修改範例檔中 www\FM628A\door_lock\script.js 檔中第 123 行的程式：

        if (lab != "unknown" && dis < 0.4) {

將 0.4 改成合適的數值即可。

如果辨識不到認識的人臉, 它會顯示為 "unknown", 例如：


## Lab 13 自動打開門

上一個實驗已經可以辨識人臉, 而且在辨識成功時會傳送指令到 Blynk, 只要沿用 Lab 04 的程式, 就可以完成人臉辨識解鎖的功能。

## Lab 15 心情好音樂

本實驗 Blynk 與 MicroPython 程式都和手冊上一樣, 請在最後實測時依照以下步驟：

1. 用手機瀏覽器開啟以下網址：

    https://使用者名稱.github.io/FM628A/emotion

請記得將上述網址中的『使用者名稱』替換成你自己的使用者名稱, 會看到以下的畫面：


這個模型比較小, 很快就會讀取完畢。

2. 在下一個畫面底部輸入 Blynk 的認證權杖：


即可按**偵測按鈕**辨識表情, 一樣會在畫面上以藍色方框框出人臉位置, 並標示辨識出的表情英文名稱, 名稱後面會標示 0~100 的信心度, 數值越高越可信。總共有以下幾種表情, 範例網頁會依據不同表情送出不同數值給 Blynk：

|表情|數值|說明|
|---|---|---|
|neutral|20|自然|
|happy|40|快樂|
|angry|60|生氣
|disgusted|60|厭惡|
|fearful|60|恐懼|
|sad|60|傷心|
|surprised|80|驚訝|

MicroPython 這一端的程式會在收到數值 60 的時候播放音樂。