---
# System prepended metadata

title: '[FM628A]使用 face-api.js 進行人臉辨識與表情辨識'
tags: [FM628A]

---

###### 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 兩個人的資料夾：

    ![](https://i.imgur.com/96znUy7.png)

    你可以依據自己的需要建立額外的資料夾。
    
    每個資料夾中必須放置 3 張 jpg 或是 png 格式的人臉照片, 並分別取名為 1、2、3, 以下就是範例檔中個別資料夾內的範例照片：
    
    ![](https://i.imgur.com/Hv9Zgge.png)

    ![](https://i.imgur.com/8wjJyws.png)

    範例網頁中的程式預設只會讀取 3 張照片, 如果你希望提高辨識成功率, 可以依循遞增數值的命名方式增加照片, 並修改範例檔 www\FM628A\door_lock\script.js 檔中第 161 行的程式：
    
    ```javascript=161
          for (let i = 1; i <= 3; i++) {
    ```
    
    將程式中的 3 改成你的照片張數即可。
    :::danger
    :fire: 由於這是人臉辨識, 所以請不要用其他動物的照片, 否則會因為提取不出人臉特徵導致網頁無法正常載入。
    :::
    
1. 移到你的 GitHub 網頁, 執行『**Add file/Upload files**』功能表命令：

    ![](https://i.imgur.com/Y9m8YRf.png)

    將範例檔中 www 下的 FM628A 資料夾整個拖放到 GitHub 頁面上：
    
    ![](https://i.imgur.com/xyMHPvT.png)

    確認檔案全部上傳完畢後, 按一下下方的 **Commit changes** 鈕提交上傳的檔案：
    
    ![](https://i.imgur.com/7X6N1KZ.png)

    確認整個資料夾已經加入 GitHub：
    
    ![](https://i.imgur.com/9zZdtOV.png)

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

    ```
    https://使用者名稱.github.io/FM628A/door_lock
    ```
    
    請記得將上述網址中的『使用者名稱』替換成你自己的使用者名稱, 會看到以下的畫面： 
    
    ![](https://i.imgur.com/x7OXNp6.png =360x)
    
    請用逗號隔開輸入人臉照片資料夾的名稱, 預設就是範例檔中的 "Teddy,Chuan"。填入後按**確定**會看到下個畫面： 
    
    ![](https://i.imgur.com/cIMESf3.jpg =360x)
    
    表示網頁程式正在讀取照片, 這個階段會需要一點時間, 請耐心等候, 就會看到如下畫面：
    
    ![](https://i.imgur.com/9KH2Kjb.png =360x)

    請先在下方輸入 Blynk 的認證權杖, 接著就可以對著要辨識的人臉按下**辨識按鈕**, 它會在畫面上以藍色方框標示人臉位置以及名稱, 名稱後方會標註畫面中的人臉與資料夾中的照片差距, 以 0~1 表示, 數值越大越不像, 範例網頁只會在距離小於 0.4 時才會當成辨識成功, 並傳送結果到 Blynk。
    
    如果你想調整距離條件, 可以修改範例檔中 www\FM628A\door_lock\script.js 檔中第 123 行的程式：
    
    ```javascript=161
        if (lab != "unknown" && dis < 0.4) {
    ```

    將 0.4 改成合適的數值即可。
    
    如果辨識不到認識的人臉, 它會顯示為 "unknown", 例如：
    
    ![](https://i.imgur.com/oVLAO3d.jpg =360x)
    
## Lab 13 自動打開門

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

## Lab 15 心情好音樂

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

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

    ```
    https://使用者名稱.github.io/FM628A/emotion
    ```
    
    請記得將上述網址中的『使用者名稱』替換成你自己的使用者名稱, 會看到以下的畫面：
    
    ![](https://i.imgur.com/L8M9urw.jpg =360x)
    
    這個模型比較小, 很快就會讀取完畢。
    
2. 在下一個畫面底部輸入 Blynk 的認證權杖：

    ![](https://i.imgur.com/YsVs0yv.png =360x)
    
    即可按**偵測按鈕**辨識表情, 一樣會在畫面上以藍色方框框出人臉位置, 並標示辨識出的表情英文名稱, 名稱後面會標示 0~100 的信心度, 數值越高越可信。總共有以下幾種表情, 範例網頁會依據不同表情送出不同數值給 Blynk：
    
    |表情|數值|說明|
    |---|---|---|
    |neutral|20|自然|
    |happy|40|快樂|
    |angry|60|生氣
    |disgusted|60|厭惡|
    |fearful|60|恐懼|
    |sad|60|傷心|
    |surprised|80|驚訝|

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