ESP32-S3-BOX-3 部署 Home Assistant 本地化語音助理、3 種個性化方式教學 – Home Assistant 手把手教學 EP 10

透過語音控制智慧家庭大家應該再熟悉不過了，甚至在手機上大家也很常用 Hey Siri 或是 OK Google…等方式呼叫語音助理，延續上一篇：

真正「有腦」的智慧家庭！Home Assistant 自訂 AI 語音助理 ChatGPT, Gemini 讓你的智慧家庭活起來 – Home Assistant 手把手教學 EP 9

neiltw.com

我們將 Home Assistant 的語音助理更換成 Google Gemini 或是 ChatGPT，讓 Home Assistant 語音助理的回應不會像 Siri 這麼生硬也更聰明，甚至可以依照自己的喜好賦予人設，但不過當時還只能打字互動。

今天帶大家使用 ESP32-S3-BOX-3 來建置 Home Assistant 自家語音助理，這比起透過 HomeKit Bridge 或 Google Home 整合將裝置同步到 HomeKit 或 Google Home，再使用 Siri 或是 Google Assistant 語音控制來得更直接，也更可以依照自己的喜好打造更適合的語音助理 👍

先讓大家看看最終的效果：

很棒吧！這麼簡單就可以體驗古代皇帝的生活 🤣

不囉唆，我們開始吧！

ESP32-S3-BOX-3 開箱

內容物：

1. ESP32-S3-BOX-3 本人：這就是主機，不管其他配件插上電也可以直接使用。
2. DOCK：底座，上面有接口可以再串接其他的裝置。
3. SENSOR：和 DOCK 差不多作用，但多了溫濕度傳感器、紅外線發射器\接收器、雷達傳感器、充電電池插槽、MicroSD 插槽，雖然今天都用不到，但因為比較帥所以我用這個 🤣
4. BRACKET：轉接用配件，可以用這個把主機安裝在其他裝置上。
5. BREAD：轉接用配件，用來和麵包板 (Breadboard) 連接。
6. 傳輸線
7. RGD 模組、杜邦線

以今天我們要做的事，其實可以買「ESP32-S3-BOX-3B」就好，包含主機和 DOCK，其他的都不會用到，你要買的時候考慮一下。

Step 1. 安裝並啟動 ESPHome 附加元件

Step 1-1. Home Assistant 左側「設定」 ➜ 「附加元件」

Step 1-2. 安裝「ESPHome」

1. 右下角點選「附加元件商店」

2. 找到「ESPHome」並點擊

3. 安裝「ESPHome」

4. 開啟 Watchdog、自動更新、於側邊欄顯示
5. 點擊「啟動」

6. 「ESPHome」啟動完成！

Step 2. 安裝 openWakeWord 附加元件

Step 2-1. Home Assistant 左側「設定」 ➜ 「附加元件」

Step 2-2. 安裝「openWakeWord」

1. 右下角點選「附加元件商店」

2. 找到「openWakeWord」並點擊

3. 安裝「openWakeWord」

4. 開啟 Watchdog、自動更新
5. 點擊「啟動」

6. 「openWakeWord」啟動完成！

Step 3. 新增「openWakeWord」整合

Step 3-1. Home Assistant 左側「設定」 ➜ 「裝置與服務」

Step 3-2. 設定「openWakeWord」整合

1. 這時候會在「已掃描」區塊出現「openWakeWord」，點擊「設定」
2. 系統會詢問是否使用 Wyoming Protocal，點擊「傳送」
3. 在成功訊息視窗點擊「完成」

Step 4. 設定語音助理喚醒詞

Step 4-1. Home Assistant 左側「設定」 ➜ 「語音助理」

Step 4-2. 選擇語音助理

Step 4-3. 設定喚醒詞

1. 喚醒詞引擎選擇「openwakeword」
2. 喚醒詞選一個你自己喜歡的，這裡示範選擇「ok nabu」

到這裡就把喚醒詞設定好啦～接下來進行 ESP32-S3-BOX-3 的安裝和設置！

Step 5. 安裝、設置 ESP32-S3-BOX-3

⚠️ 注意！如果過去有安裝過 S3 BOX，務必先到「設定 > 裝置與服務 > ESPHome」找到 S3 BOX 並刪除 ⚠️

Step 5-1. 刷 ESP32-S3-BOX-3 韌體

1. 前往 ESPHome 專案網站：https://esphome.io/projects/index.html
2. 選擇「Voice assistant」
3. 選擇「ESP32-S3-BOX-3」
4. 點擊「Connect」

5. 將 ESP32-S3-BOX-3 透過傳輸線連接到你的電腦
6. 選擇 ESP32-S3-BOX-3 裝置
7. 點擊「連線」

8. 選擇「Install ESP32 S3 Box 3」
9. 點擊「Install」
10. 點擊「Next」

Step 5-2. 設定 WiFi 連線

輸入家中的 WiFi 連線資訊並點擊「Connect」

Step 5-3. 將裝置加入 Home Assistant

1. 點擊「Add to Home Assistant」

2. 確認 Home Assistant 實體位址
   預設是 “http://homeassistant.local:8123″，如果你在安裝 Home Assistant 時有自己變更，記得這裡要換成可以連接到 Home Assistant 的 URL！
3. 點擊「Open Link」

4. 這時候你會自動被帶到 Home Assistant 整合列表中，在彈跳視窗中選擇「好」
5. 在新增所發現的裝置選單中選擇「ESP32 S3 Box 3」
6. 彈跳視窗中選擇「傳送」

Step 6. 檢查 ESP32-S3-BOX-3 整合是否成功

1. Home Assistant 左側欄「設定」>「裝置與服務」
2. 找到 ESPHome 點擊裝置數

這時候有看到 ESP32-S3-BOX-3 相關裝置資訊，並可以進行靜音、螢幕開關那你就整合成功啦！

試著和語音助理對話吧！

同場加映 – 個性化你的語音助理

只是換成有腦的語音助理肯定還是太無聊對吧？！試試看更改人設、自訂顯示圖片和自訂喚醒詞吧！

更改人設

1. 點擊對話助理選單右側 ⚙️
2. 在指示中新增你想要它扮演的角色
3. 點擊「傳送」

這樣就可以更換成各式各樣你喜歡的人設啦！跟我分享你喜歡換成什麼人設？🤣

自訂語音助理顯示圖片

坦白說預設的顯示圖片真的太無聊了對吧！那就換張圖試試吧！你甚至可以換成你自己的照片 (如果你夠自戀 🤣)，就好像有另外一個自己在幫你處理大小事，帥吧～

在開始之前，先看下圖了解 Home Assistant 語音助理的 6 種狀態：

① 進入 ESPHome web UI

通常會在側邊欄，如果沒有就到「設定 > 附加元件」找找

② 將 ESP32-S3-BOX-3 納入管理 (ADOPT)

這會讓你可以調整各種設定，完成後你會看到右上角的狀態從 DISCOVERED 變為 ONLINE

③ 選擇圖片素材或製作圖片素材

在 Home Assistant 的 Github repository 裡有分享給大家取用的素材，如果你像我一樣沒什麼美術天份，可以直接從裡面找一個你喜歡的。

當然你也可以自己畫，或是讓 AI 幫你畫，並參考格式和規範產出相關圖片素材檔案：

1. 尺寸：320×240，如果提供的素材不是 4:3 比例，那剩下的區域會用背景色 (background color) 填滿。
2. 圖片格式：PNG, JPEG, SVG。
3. 在圖片裡，你可以使用兩種背景色，用以大致區分語音助理處於活躍或非活躍狀態：
   • loading、idle 狀態：深色背景。
   • listening、thinking、replyig 狀態：淺色背景。
   • error 狀態：深色或淺色背景都行。
4. 如果你的圖片背景留透明，後面步驟可以在 configuration 中設定背景色 (background color)。
5. 將 6 張圖做好放到一個資料夾裡
6. 將包含 6 張圖的資料夾放到 config/ESPHome 的資料夾中

④ 編輯 ESP32-S3-BOX-3 設定檔

在 ESPHome web UI 中找到 ESP32-S3-BOX-3 並點擊「EDIT」

這時候你會看到 yaml 編輯器，像這樣：

如果你是選用 Home Assistant Github repository 素材庫，將下列代碼放到 substitutions 區塊中：
※ 記得把路徑換成你想要的素材路徑

substitutions:
  loading_illustration_file: https://github.com/jlpouffier/home-assistant-s3-box-community-illustrations/raw/main/jarvis_female/illustrations/loading.png
  idle_illustration_file: https://github.com/jlpouffier/home-assistant-s3-box-community-illustrations/raw/main/jarvis_female/illustrations/idle.png
  listening_illustration_file: https://github.com/jlpouffier/home-assistant-s3-box-community-illustrations/raw/main/jarvis_female/illustrations/listening.png
  thinking_illustration_file: https://github.com/jlpouffier/home-assistant-s3-box-community-illustrations/raw/main/jarvis_female/illustrations/thinking.png
  replying_illustration_file: https://github.com/jlpouffier/home-assistant-s3-box-community-illustrations/raw/main/jarvis_female/illustrations/replying.png
  error_illustration_file: https://github.com/jlpouffier/home-assistant-s3-box-community-illustrations/raw/main/jarvis_female/illustrations/error.png

如果你是自製素材，將下列代碼放到 substitutions 區塊中，並設定各狀態的背景顏色 (如果圖片是透明背景)：
※ 將範例中的 voice_assistant_gfx 更換為你的素材資料夾名稱
※ 記得更換各狀態的背景顏色 (下面範例中 line 8~13)

substitutions:
  loading_illustration_file: voice_assistant_gfx/loading.png
  idle_illustration_file: voice_assistant_gfx/idle.png
  listening_illustration_file: voice_assistant_gfx/listening.png
  thinking_illustration_file: voice_assistant_gfx/thinking.png
  replying_illustration_file: voice_assistant_gfx/replying.png
  error_illustration_file: voice_assistant_gfx/error.png
  loading_illustration_background_color: '000000'
  idle_illustration_background_color: '000000'
  listening_illustration_background_color: 'FFFFFF'
  thinking_illustration_background_color: 'FFFFFF'
  replying_illustration_background_color: 'FFFFFF'
  error_illustration_background_color: '000000'

⑤ 儲存並安裝

這個步驟會依據你使用的硬體環境而安裝時間會有所不同，耐心等待一下吧！完成後就可以在螢幕上看到新的顯示圖片啦！～

※ 我使用樹莓派 4 + 8G RAM (Raspberry Pi 4 Model B/8G) 大概跑了 30 分鐘

意外發現這樣蠻適合我的桌面搭配的 🤣

ESP32-S3-BOX-3 還有很多可以玩的，也有國外大神自製韌體讓 BOX 的觸控螢幕有更多功能，未來也會找時間來試試。

希望今天這篇可以對已經加入 Home Assistant 的你在建置本地化語音助理有幫助，也歡迎在下方留言和我互動囉！👋