昨天我們把 Hugging Face 的 model 部署到 Azure 上了，也成功用 Web API 來跑文本生成，今天我們就來用這支 API，串接到聊天機器人吧！

Bot Framework Composer

我們今天要使用的是 Bot Framework Composer，這是一套開源免費的圖形化介面聊天機器人製作工具，可以到這裡下載並安裝。一步步安裝完成後，我們就來開始做聊天機器人吧！

1. 打開 Bot Framework Composer，我們點擊左上角的 Create New。如下圖。
   
2. 我們建議選 C#，然後選 Empty Bot，再點 Next。如下圖。
   
3. 接著輸入你要名稱、路徑、runtime 建議選 azure web app 會比較好部署。然後 Create 會等待一段時間。
   
4. 我們先選到主對話流程，然後選右邊的 Language Understanding，點 Change，我們改成 Regular expression。這裡它是原本可以串接其他自然語言處理工具，不過我們就直接用 Regex。如下圖。
   
5. 接著我們點擊在主對話流程右邊的三個點點，選 Add new trigger。如下圖。
   
6. 會跳出一個視窗，我們選 intent recognized，然後輸入名稱和 pattern，再點 submit。如下圖。
   
7. 接著就會建立一個新的 trigger ，而中間的畫布就是這個 trigger 的對話流程，我們點那個加號 add。如下圖。
   
8. 我們選 Ask a question，text。如下圖。
   
9. 接著就會跳出問問題的對話流程模版，我們選到 prompt for text，在右下角輸入我們想要的問題，這裡就輸入 Please input phrase you want to do text generation.。如下圖。
   
10. 接著我們點畫布下面那個 User input 方框，在右邊的 User Input tab 裡的 Property，輸入 user.text，這個是把 user.text 設定為輸入的內容。如下圖。
    
11. 接著我們再按一個加號，選 Access external resources 裡面的 send an HTTP request。這個是 Bot Framework Composer 最厲害的地方，透過 Web API 我們可以達到類似前後端分離的架構。如下圖。
    
12. 然後我們在右邊的選單，依序輸入 POST、你的 url、Body 那裡要注意一下 JSON 的寫法，然後還有 header 和 content-type。而 Result property 那裡就保留預設的 turn.results 即可。如下圖。
    
13. 接著再點擊加號，選 send response。如下圖。
    
14. 然後在 send response 的右邊，輸入 ${turn.results}如下圖。
    
15. 接著我們按右上角的 Start bot，等它 compile 一下，會跳出叫你用 web chat 還是 emulator 的選項，如果你是 Mac ，因為會衝突，要去這裡另外安裝 emulator。不是 Mac 的話選 Open Web Chat 即可。
    
16. 我是用 Mac ，所以用 emulator 做範例。我們輸入 trigger 的關鍵字 textgen，就可以輸入我們想要生成的文本開頭了。如下圖。
    
17. 我們再把這個 JSON 處理一下，把 Send a response 裡改為 ${turn.results.content[0].generated_text}，然後 restart bot 再試一次，可以看到結果好很多了！如下圖。
    

Deploy 到 Azure

Bot Framework Composer 內建可以讓你快速 deploy 到 Azure，真的是很方便。但是注意這是 Azure 收費的服務哦！

1. 點選左邊選單的雲符號，再選 Publishing profile 這個 tab，點 add new。如下圖。
   

2. 我們會先建一個 Publish profile ，我們可以按照下圖做設定。
   

3. 接著我們選 Create new resources ，直接在 Azure 上建立一個新的資源，再點 Next。如下圖。
   

4. 接著登入你的 Azure，如下圖。
   

5. 接著設定好你的 Subscription、Resource Group（建議不要跟建endpoint時一樣的RG），還有 Details，再點 Next。如下圖。
   

6. 接著可以考慮把 Optional 的服務都取消掉，因為我們只是 demo 性質，但是您可以視您的實際需求保留。如下圖。
   

7. 接著在最後這個畫面，按下 Create，就會開始建立啦！會花一小點時間來建立。
   

8. 建立好之後，重新點左邊的雲符號，把這個 Bot 的 Publish target 設定為剛剛建立的 profile，然後點上面的 Publish selected bots。如下圖。
   

9. 接著加入你的 comment，點 Okay，就會開始部署囉！如下圖。
   

Azure Bot Service

上面的動作會在 Azure 幫你建立 Bot Service 的服務，我們就回到 Azure 去看吧！

1. 我們先進到 Bot Service，會發現剛剛的資源已經被建立了。如下圖。
   

2. 點進去後，我們選 Blade 上的 Channel，可看到 Bot Service 已經預建好許多對話應用程式的 Channel 了，連我們台灣人最熟悉的 LINE 都有哦！如果你會串接 LINE 的話，也可以在這裡輸入 secret 就快速把 LINE 接起來！如下圖。
   

3. 我們選已經建好的 Web Chat，點進去 Default site ，會跳出右邊的選單，可以看到我們只要一個 iframe 和 key，就可以在網頁裡嵌入聊天機器人了。
   

4. 接著我們到 https://jbt.github.io/markdown-editor/ 這個網站，他是可以快速寫 Markdown 的好用工具，當然也支持 HTML。把 iframe 和 key 貼上後，馬上就可以玩了。如下圖
   

5. 因為是收費服務，記得進到該 resource group 裡把資源刪乾淨，才不會繼續花錢，尤其這個是會開一台 APP service 起來的哦！

以上就是今天我們把 Hugging Face model 串進聊天機器人的內容啦！用 Bot Framework Composer 和 Azure Bot Service，真的很方便！

本次的遺珠之憾

Hugging Face 是目前全球最受歡迎的 NLP 工具，其社群相當的龐大，套件也眾多，也因此很多 Hugging Face 部份內容並沒有時間包含到。筆者列出以下的方向，如果有興趣的朋友可以自行去學習。

1. Accelerate：這個套件可以加速你的 model 訓練
2. Diffusers：Hugging Face 處理單純的 NLP 之外，也發展了聲音、影像的全新套件，像是 Diffusers 這套就可以做最近最流行的寫文字讓 AI 畫圖。
3. Huggingface_hub ：這裡面很多和 Hugging Face Hub 互動的 API ，包含你可以在裡面部署你的模型等等。
4. 更多的 Optimum：前幾天介紹的 optimum，是去年中才推出、今年才比較堪用的 Library。但是發展很快，除了 ONNX、Quantization 等功能外，還有 Pruning、Distilled、不同 AI 晶片的加強支持等等的功能，很值得進一步學習。

希望這個系列文能對要做 NLP 應用的你有所幫助，感謝大家 30 天的閱讀。