# AI 故事生成 ## 介面平台設定 ### LINE Bot設定流程(網址 https://developers.line.biz/zh-hant/services/bot-designer/) ![image](https://hackmd.io/_uploads/SkoC5nG5Jg.png) 1. 建立聊天機器人(massage API) ![image](https://hackmd.io/_uploads/rJ8NYTGq1e.png) 2. 建立管理者 Admin (massage API) ![image](https://hackmd.io/_uploads/S1ali6G5Jg.png) 3. 建立Bot 介面 ![image](https://hackmd.io/_uploads/Sk67pTzcJg.png) ![image](https://hackmd.io/_uploads/SJaOyAzcke.png) ![image](https://hackmd.io/_uploads/Sy4j1RGckl.png) (綠點欄位必填) ![image](https://hackmd.io/_uploads/SkOJg0f91x.png) ![image](https://hackmd.io/_uploads/Bkdqe0zc1l.png) ![image](https://hackmd.io/_uploads/ByX4bCzckg.png) ![image](https://hackmd.io/_uploads/SJKSbRM9Je.png) ![image](https://hackmd.io/_uploads/BkTUb0zqyx.png) ![image](https://hackmd.io/_uploads/Hk8lMAz9kl.png) ※Issue 產生bot介面資料串流認證權碼(Channel access token)，必需保管儲存※ ### Make.com 註冊流程(網址 https://www.make.com/en/login) ![image](https://hackmd.io/_uploads/rJ2GF0fqJe.png) 1. 建議選用 google 帳號( 2. hosting region: 伺服器位置 (建議 US) 3. 免費資料串流量1000/mo ### Get Gemini API Key(https://ai.google.dev/aistudio?hl=zh-tw) ![image](https://hackmd.io/_uploads/BkZLs1uj1e.png) ![image](https://hackmd.io/_uploads/r1Cp3kdi1x.png) ### motoBlockly 平台設定 1. motoBlockly網頁入口(http://www.motoduino.com/) ![image](https://hackmd.io/_uploads/r1xYZU65Jg.png) 2. motoBlockly編輯環境及下載燒錄軟體(https://www.motoduino.com/wp-content/themes/storefront/moto_broker/motoblockly_broker_v2.6_setup.exe) ![image](https://hackmd.io/_uploads/rJxCiz8T51l.png) ![image](https://hackmd.io/_uploads/SytSt8pqJx.png) 3. 測試範列(LED_Blink) ![image](https://hackmd.io/_uploads/rkBHnIpc1l.png) ### Make.com & Line bot 串流工作佈建 1. scenarios ![image](https://hackmd.io/_uploads/B1sTvRG91g.png) 2. Create a newscenarios ![image](https://hackmd.io/_uploads/SJqUwCG9Jl.png) #### 範例一：學舌鳥 1. 新建newscenarios ![image](https://hackmd.io/_uploads/S1YO1Vh9Jx.png) 1 建立scenarios 2 LINE 工作服務元件 2. 建立LINE 工作服務元件 ![image](https://hackmd.io/_uploads/r19QeNnq1x.png) 1 Watch Events 等待LINE bot 訊息 2 send a Reply Message 回覆至LINE 聊天室 3. 建立 Watch Events元件 ![image](https://hackmd.io/_uploads/H1ZJmEhqJg.png) 1 加入連線LINE bot ![image](https://hackmd.io/_uploads/SJuoVE2q1x.png) ![image](https://hackmd.io/_uploads/HyaLB4n9Jg.png) 2 Watch Events元件接收LINE bot 傳訊息網址，將其複製貼至LINE Developers bot ![image](https://hackmd.io/_uploads/rywYwVncJg.png) 4. 加入send a Reply Message元件 ![image](https://hackmd.io/_uploads/rJxGYVh5ye.png) ![image](https://hackmd.io/_uploads/rkcEFN2c1x.png) ![image](https://hackmd.io/_uploads/HymxgB35Jl.png) ![image](https://hackmd.io/_uploads/BklAgS29Je.png) 5. 執行運作成果 ![image](https://hackmd.io/_uploads/H1UFMBhcJl.png) 1 執行 Run once 2 成果 ![image](https://hackmd.io/_uploads/r1vI7B29kg.png) LINE bot聊天室輸入"你好" ![image](https://hackmd.io/_uploads/B1iaXSh91e.png) LINE bot聊天室回覆"你好" #### 範例二 LINE bot To Mqtt 推播 1. 利用MQTT伺服器媒介推播及訂閱(https://broker.mqttgo.io/) ※mqtt_topic:公告欄名稱 mqtt_payload:公告欄訊息 Subscriptions:訂閱 ![image](https://hackmd.io/_uploads/ByqAqSHj1x.png) 2. 在Make.com->新建newscenarios->Line (Watch Events) 連接 Http(Mark a request) ![image](https://hackmd.io/_uploads/rkohFIHi1e.png) ![image](https://hackmd.io/_uploads/BJx0VoIrj1g.png) 3. Mark a request 設定 ![image](https://hackmd.io/_uploads/rJ_sp8SsJe.png) 4. 測試結果 ![image](https://hackmd.io/_uploads/r11JBvSi1g.png) ![image](https://hackmd.io/_uploads/H1LmrwBi1x.png) ### Line Bot & AI 運作工作架構 ![image](https://hackmd.io/_uploads/SJTwn0z5Jg.png) #### 範例三 LINE bot To Gemini_AI 1. 在Make.com->新建newscenarios->Line(Watch Events) -> Http(Mark a request)->Line(Send a Reply Message) ![image](https://hackmd.io/_uploads/HkX332ojyx.png) 2. Line(Watch Event) 設定 ![image](https://hackmd.io/_uploads/HylNranjjJl.png) 3. Http(Mark a request)設定 ![image](https://hackmd.io/_uploads/Sk0Cg6oi1x.png) ![image](https://hackmd.io/_uploads/S1NmzTojyg.png) 4.Line(Send a Reply Message) ![image](https://hackmd.io/_uploads/H17t7ajike.png) 5. 測試成果 ![image](https://hackmd.io/_uploads/SJN_Nasiye.png) ![image](https://hackmd.io/_uploads/SkAnEpjske.png) ## Line Bot & AI & motoBlockly & NodeMCU-32S 運作工作 ### NodeMCU-32S硬體介紹 ![image](https://hackmd.io/_uploads/SJ7J-_CoJl.png) ![image](https://hackmd.io/_uploads/ryMfbO0s1e.png) #### iMoto ESP32 I/O Board ![image](https://hackmd.io/_uploads/rJ3rZdAsJl.png) ### 硬體組裝 #### MAX98357A接線圖 ![image](https://hackmd.io/_uploads/ByDzfd0iJl.png) ![image](https://hackmd.io/_uploads/rJ6mM_Cjke.png) #### 按鈕+旋鈕接線圖 ![image](https://hackmd.io/_uploads/HkzvfdRjke.png) ### motoBlockly & NodeMCU-32S 運作工作 #### 範例四 WIFI & Google 語音播放 ![image](https://hackmd.io/_uploads/B1YcBdCoyx.png) #### 範例五 音量旋鈕及按鍵控制 ![image](https://hackmd.io/_uploads/HJdC05RjJx.png) #### 範例六 MQTT Publish ![image](https://hackmd.io/_uploads/HyyyhjPhyg.png) #### 範例七 MQTT subscribe ![image](https://hackmd.io/_uploads/Skw8Ohw3ye.png) ### Line Bot & NodeMCU-32S 運作工作 #### 範例八 千里傳音 1. 利用範例二 Line Bot 推播文字至MQTT Publish 2. NodeMCU-32S 接收Subscribe訊息播千里傳音 ![image](https://hackmd.io/_uploads/B1FGMpPnkg.png)