###### tags: `FM611A`
# [FM611A]使用 face-api.js 進行人臉辨識與表情辨識
[face-api.js](https://justadudewhohacks.github.io/face-api.js/docs/index.html) 是一個網頁端的 JavaScript 程式庫, 可以讓網頁具有表情辨識、年齡辨識、人臉辨識等相關功能, 我們提供有事先準備好的網頁範例, 可以讓您將 face-api.js 與 D1 mini 控制板串接在一起。
## 架設個人網站
為了使用 face-api.js 提供的人臉辨識, 必須要建置個人網站, 放置要辨識的人臉照片, 提供網頁內的程式訓練後建立辨識模型。我們選擇採用免費的 GitHub Pages 服務架設網站, 請先依照以下文章註冊並建置個人網站：
- [使用 GitHub Pages 架設個人網站](/sqF4oJISSNi8LeaCFEOugQ)
## 下載最新版本的 FlagsBlock
本實驗必須搭配 V1.3.12 開始的 FlagsBlock, 請至 [FlagsBlock 專屬網頁](https://hackmd.io/@flagmaker/rk33b-qiO)下載。
## Lab 07 刷臉智慧門鎖
本實驗要實作人臉辨識, 請先依照以下步驟完成人臉辨識網頁的建置：
1. 準備人臉照片：在 FlagsBlock 的 www\FM611A\door_lock\images 資料夾下, 可依照要辨識的人名建立個別的資料夾, 在範例檔中預設有 Teddy 與 Chuan 兩個人的資料夾：
你可以依據自己的需要建立額外的資料夾。
每個資料夾中必須放置 3 張 jpg 或是 png 格式的人臉照片, 並分別取名為 1、2、3, 以下就是範例檔中個別資料夾內的範例照片：
範例網頁中的程式預設只會讀取 3 張照片。
:::info
如果你希望提高辨識成功率, 可以依循遞增數值的命名方式增加照片, 並修改範例檔 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**』功能表命令：
將 FlagsBlock 資料夾下 www 內的 FM611A 資料夾整個拖放到 GitHub 頁面上：
確認檔案全部上傳完畢後, 按一下下方的 **Commit changes** 鈕提交上傳的檔案：
確認整個資料夾已經加入 GitHub：
1. 在你的手機上開啟瀏覽器, 輸入以下網址開啟人臉辨識網頁：
```
https://使用者名稱.github.io/FM611A/door_lock
```
請記得將上述網址中的『使用者名稱』替換成你自己的使用者名稱, 會看到以下的畫面：
請用逗號隔開輸入人臉照片資料夾的名稱, 預設就是範例檔中的 "Teddy,Chuan"。填入後按**確定**會看到下個畫面：
表示網頁程式正在讀取照片, 這個階段會需要一點時間, 請耐心等候, 就會看到如下畫面：
請對著要辨識的人臉按下**辨識按鈕**, 它會在畫面上以藍色方框標示人臉位置以及名稱, 名稱後方會標註畫面中的人臉與資料夾中的照片差距, 以 0~1 表示, 數值越大越不像, 範例網頁只會在距離小於 0.4 時才會當成辨識成功。
:::info
如果你想調整距離條件, 可以修改範例檔中 www\FM628A\door_lock\script.js 檔中第 123 行的程式：
```javascript=161
if (lab != "unknown" && dis < 0.4) {
```
將 0.4 改成合適的數值即可。由於檔案是放在 GitHub 上, 修改後要重新上傳提交才會生效, 或是也可以直接在 GitHub 上修改檔案提交。
:::
如果辨識不到認識的人臉, 它會顯示為 "unknown", 例如：
人臉辨識功能無誤後, 我們就要與 D1 mini 結合起來, 我們會在 D1 mini 上建立一個與 Lab 06 相似的網站, 這個網站會幫我們自動載入人臉辨識的網頁, 並且依照辨識結果控制伺服馬達轉動開關門：
1. 請先依照手冊上的接線圖接線。
1. 修改網頁檔案, 請用記事本開啟 FlagsBlock 資料夾下 www 內的 AIxLINE_Lab07_proxy.h 檔：
請記得在『**開啟**』交談窗中要選取**所有檔案**類型, 才能看見 .h 副檔名的檔案。
1. 請將檔案開頭這一行的 "你的 GitHub 使用者名稱" 改成你的 GitHub 使用者名稱, 這樣才能自動載入人臉辨識網頁：
修改後即可存檔。
2. 在 FlagsBlock 中開啟範例檔案 Lab 07, 修改 Wi-Fi 無線網路名稱與密碼, 並將預設的 "IP-" 改成你自己專屬的簡短英文名稱, 避免跟同時進行實驗的其他人名稱重複無法識別：
3. 執行功能表中的『**上傳網頁資料**』命令：
選取剛剛修改過的 AIxLINE_Lab07_proxy.h：
按下**開啟**後在 FlagsBlock 右上角看到訊息即完成：
1. 上傳程式。
4. 上傳程式後看到 D1 mini 控制板上內建的藍燈亮起, 即表示已連上無線網路。假設前面的步驟您修改的簡短英文名稱為 "Tony-", 請用筆電或是手機找尋相同名稱開頭的無線網路：
請注意這個無線網路只是讓我們查詢 D1 mini 的 IP 位址, 不是要讓你連上用的, 本例 IP 即為英文名稱 "Tony-" 後的 192.168.100.11。
5. 開啟 Goolge Chrome 瀏覽器輸入 "https://" 加上剛剛查到的 IP 位址, 以我們的例子來說, 就是輸入 "https\://192.168.100.11"：
請按一下最下方的**進階**：
按一下中間的連結就可以進入網頁, 看到之前我們測試時的人臉辨識畫面：
按**辨識按鈕**辨識出距離值小於 0.4 的人臉時, 網頁會自動傳送指令給 D1 mini, 轉動伺服馬達開啟門鎖後 10 秒再自動關閉。
## Lab 08 智慧心情點播站
本實驗在 GitHub 個人網站上所需的網頁檔案已經在上一個實驗上傳, 只需處理 D1 mini 的部分：
1. 請先依照手冊上的接線圖接線。
3. 修改網頁檔案, 請用記事本開啟 FlagsBlock 資料夾下 www 內的 AIxLINE_Lab08_proxy.h 檔：
請記得在『**開啟**』交談窗中要選取**所有檔案**類型, 才能看見 .h 副檔名的檔案。
1. 請將檔案開頭這一行的 "你的 GitHub 使用者名稱" 改成你的 GitHub 使用者名稱, 這樣才能自動載入人臉辨識網頁：
修改後即可存檔。
2. 在 FlagsBlock 中開啟範例檔案 Lab 08, 修改 Wi-Fi 無線網路名稱與密碼, 並將預設的 "IP-" 改成你自己專屬的簡短英文名稱, 避免跟同時進行實驗的其他人名稱重複無法識別：
3. 執行功能表中的『**上傳網頁資料**』命令：
選取剛剛修改過的 AIxLINE_Lab08_proxy.h：
按下**開啟**後在 FlagsBlock 右上角看到訊息即完成：
1. 上傳程式。
4. 上傳程式後看到 D1 mini 控制板上內建的藍燈亮起, 即表示已連上無線網路。假設前面的步驟您修改的簡短英文名稱為 "Tony-", 請用筆電或是手機找尋相同名稱開頭的無線網路：
請注意這個無線網路只是讓我們查詢 D1 mini 的 IP 位址, 不是要讓你連上用的, 本例 IP 即為英文名稱 "Tony-" 後的 192.168.100.11。
5. 開啟 Goolge Chrome 瀏覽器輸入 "https://" 加上剛剛查到的 IP 位址, 以我們的例子來說, 就是輸入 "https\://192.168.100.11"：
請按一下最下方的**進階**：
按一下中間的連結就可以進入網頁, 首先會載入模型：
接著就會看到表情辨識畫面：
即可按**偵測按鈕**辨識表情, 一樣會在畫面上以藍色方框框出人臉位置, 並標示辨識出的表情英文名稱, 名稱後面會標示 0~100 的信心度, 數值越高越可信。總共有以下幾種表情, 範例網頁會依據不同表情送出不同指令給 D1 minin：
|表情|指令|說明|
|---|---|---|
|neutral|normal|自然|
|happy|good|快樂|
|angry|bad|生氣
|disgusted|bad|厭惡|
|fearful|bad|恐懼|
|sad|bad|傷心|
|surprised|bad|驚訝|
 
D1 mini 這一端的程式會在收到指令時播放對應的音樂。
Sign in with Wallet
Connect another wallet