# 2021/01/06 Azure AI Cognitive Services (中科大)

線上網頁版請點此：https://hackmd.io/@ccnet-nutc/BJepj9oyd

## 目錄

[toc]

---

## 事前準備：
1. Azure 校內帳號
2. Line 開發人員帳號 https://developers.line.biz
3. .NET Core https://dotnet.microsoft.com/download
4. Visual Studio Code https://code.visualstudio.com
5. ngrok http://arock.blob.core.windows.net/blogdata202101/Ngrok.zip

---

## 1. 建立 Line 開發帳號

我們已於上一篇教學中建立 Azure 雲端平台帳號並熟悉介面使用方法，本篇教學中將透過 Line 作為與使用者溝通的介面負責傳送與接收訊息，並透過串接 Azure 平台進行應用


首先，先至 Line 開發人員網站登入或建立帳號 https://developers.line.biz/


此處可選擇使用個人 Line 進行登入即可，若建立用途會單位營運使用則請以公用 Line 帳號進行登入


首次建立 Line 開發帳號因為了方便管理，需先建立一個專用於特定目的（品牌或單位）群組名稱，點選「Create」即可建立


命名完成後點選「Create」完成命名


進入群組後，可建立各項不同由 Line 提供相關服務，此處點選建立「Messaging API」傳遞訊息用的 API 服務


「Channel type」、「Provider」請保持預設選項即可，「Channel icon」為建立 Line 帳號大頭貼，可自行上傳


「Channel name」為 Line 帳號名稱、「Channel description」為 Line 帳號簡述（同個人帳號狀態）

「Category」選擇 Line 帳號類別，「Subcategory」為前者細項類別


接著「Privacy policy URL」與「Terms of use URL」可維持留空即可，下方勾選同意 Line 使用者條款，按「Create」送出申請


並再次同意相關使用資訊條款


接著即可完成 Line 官方帳號建立，可進行進階應用

---

## 2. 建立 Azure AI 電腦識別服務 Computer Vision（電腦視覺）

Microsof Azure 提供 Azure Cognitive Services（認知服務）提供多種 AI 服務如決策判斷、文字語言分析、語音處理、識別判斷，若是要做一般的識別可以為您節省訓練 AI 模型的時間，若有額外需求則可以考慮使用 Custom vision（自訂視覺）


首先建立服務時先點選首頁中的「建立資源」


並於左側分類中點選「AI+機器學習服務」點擊「電腦視覺」


並如同之前的操作，為這個新的服務建立新的「資源群組」
「區域」則維持選擇在東南亞伺服器建立
「名稱」則可自訂一個該 AI 服務的名稱
「定價層」則選擇 Free F0 使用免費方案，每個月可識別5000次每分鐘可識別20次限制，若有進階需求可使用 S1 付費方案並依照[官方資訊](https://azure.microsoft.com/zh-tw/pricing/details/cognitive-services/computer-vision/)收費
資料輸入完畢後則點選左下方「檢閱+建立」確認填寫資料


確認無誤後再次點擊左下方「建立」即可完成電腦視覺服務建立

---

## 3. 操作實例－串接 Line 識別所傳送照片


本篇將透過使用 Line 訊息 API 在本機端撰寫程式碼，並運作使 Line 伺服器可以讀取本機程式碼進行對應訊息回應

:::warning
**開始本篇操作時，請先完成 [.NET Core](https://dotnet.microsoft.com/download) 、 [Visual Studio Code](https://code.visualstudio.com) 與 [ngrok](http://arock.blob.core.windows.net/blogdata202101/Ngrok.zip) 安裝，避免無法操作！**
:::


先開啟電腦中程式列中的「Windows 系統」內的「命令提示字元」

cd\
dotnet new --install isRock.Template.LineWebHook::1.0.12

md testlinebot
cd testlinebot

dotnet new webapi
dotnet add package linebotsdk
dotnet new linewebhook

code .

首次安裝時請依序輸入1~11行指令，之後要再次編輯時僅輸入第5與11行指令即可


輸入完最後一行指令時，會自動呼叫出 Visual Studio Code 進入專案中，先至左側點選「Startup.cs」編輯將「app.UseHttpsRedirection();」這行程式註解前面加兩條//，用途為關閉 https 功能為方便本篇教學測試用途，正式使用建議將該功能開啟


接著點選「Controllers」中的「LineComputerVisionWebHookController」範例程式進行修改
請參考上圖將相對應 Key 進行輸入，稍後將說明對應 Key 取得處


回到 Azure 首頁中點擊上篇教學所建立的「認知服務」


並於左側選單中點選「金鑰與端點」並會顯示出呼叫使用「認知服務」時連線的伺服器與金鑰，於各欄位右邊可點擊複製按鈕即可複製對應金鑰，將金鑰1與端點複製後即可貼回程式碼中對應位置中，**金鑰請小心保管避免遭他人連接使用**


接著來到 Line 開發者控制台中，點擊參照上篇教學所建立的 Line 官方帳號


進入後的頁面往下滑可找到「Your user ID」將該序號貼回至程式碼對應位置中即可


接著再往上滑點擊「Messaging API」設定分頁


於該頁面最底部可找到「Channel access token」選項，點擊旁邊的產生或補發的按鈕即可產生金鑰，該金鑰用於連接 Line 官方帳號收送訊息的鑰匙，請謹慎保管避免遭他人利用


接著，點擊於 Visual Studio Code 介面左側中的「執行」按鈕並點擊「執行與偵錯」


偵錯環境請選擇「.NET Core」程式即自動建立完成


再點擊左上角綠色「執行」按鈕，程式即開始運作，若沒有出現錯誤代表程式正常且目前在運作狀態


接著開啟 ngrok 程式，請先將完整資料夾先解壓縮再執行


輸入使用 port 為5000並按下Enter


程式則提供轉址服務，產生臨時可連線至本機用的網址


回到 Line 開發者控制台中的「Messaging API」分頁中，尋找「Webhook URL」欄位並將複製的網址貼上並加上「/api/ComputerVision」點即「Update」


再點即「Verify」檢查是否有錯誤


確認訊息為「Success」檢查正常即代表目前程式已與 Line 官方帳號成功連線


此外，記得將「Use webhook」開啟確保 API 之間傳遞訊息正常
下方自動回覆訊息功能記得先關閉避免與程式傳送訊息發生衝突

---

## 4. 操作實例－透過 Line 製作線上翻譯小幫手


依照上一篇操作教學，一樣可以如法炮製，修改專案中「LineTranslatorWebHookController」檔案的程式碼，即使自己創建 Line 官方帳號有語言翻譯的功能了


首先一樣點擊「建立資源」，建立翻譯服務


進入後於上方搜尋列中搜尋「Translator Text」選擇「翻譯工具」


進入「翻譯工具」介紹頁面後點擊「建立」


依照內容填寫，先建立資源群組，再填寫建立工具的名稱
「定價層」請選取免費專案F0，完成後點擊「檢閱+建立」


確認資訊無誤後，再點擊建立，等待服務建立完成


建立完成後，再點擊「前往資源」進入工具控制台


於控制台頁面左側點擊，點擊「金鑰與端點」
複製「金鑰１」與「端點」，準備再貼回程式碼中


並一樣依序貼上，如程式碼中的預設地區不一樣，則也須做相對應修改，Line 序號則同上步驟至 Line 開發者平台網站複製「Your user ID」、「Channel access token」貼上，且序號皆不變

:::warning
請注意：使用 Visual Studio Code 編輯完畢後，請記得按下「Ctrl+S」或「存檔」按鍵避免編輯完後，執行程式時出錯！
:::


接著點選 Visual Studio Code 程式執行按鍵，確認修改後的程式有無出錯


並再次開啟 ngrok 程式，請先將完整資料夾先解壓縮再執行


輸入使用 port 為5000並按下Enter


再次複製程式產生的短網址，請務必每次重新複製並貼回 Line 開發者控制台「Webhook URL」選項中，因程式為亂數產生網址，故每次結束 ngrok 程式原本的網址即失效。


回到 Line 開發者控制台中的「Messaging API」分頁中，尋找「Webhook URL」欄位並將複製的網址貼上並加上「/api/TranslatorBot」點擊「Update」

:::info
於專案資料夾中，有許多不同功能服務程式碼檔案，而要如何指定目前 Line 官方帳號執行哪一個程式呢？
就是透過設定「Webhook URL」網址後面加上的「/api/程式名稱」調整目前執行的程式


仔細看可以發現程式內也有定義名稱為何
:::

---

## 5. 操作實例－建立 LUIS 語意分析


Language Understanding（語言理解技術）是由 Microsoft Azure 提供的 AI 服務用於理解使用者文字中的含意，與傳統的文字識別技術不同，透過建立自然語言處理模型可以簡單的教導機器人學習句型與單詞提升識別率


首先一樣點擊「建立資源」，建立 LUIS 服務


進入後於上方搜尋列中搜尋「LUIS（注意大寫）」選擇「語言理解」


依照內容填寫，先建立資源群組，再填寫建立工具的名稱
比較特別的是，我們選擇同時建立「撰寫（製作）」與「預測資源」故須填寫兩種服務提供的伺服器地點，地區建議選擇「Asia Pacific（澳大利亞東部）」，定價層則選擇「免費F0」即可


確認資料無誤後再點即「建立」送出


等待服務建立完畢後，點擊「前往資源」進入 LUIS 控制台


一開始我們會進入到快速入門的頁面，若不是請點擊左側快速入門連結進入

並點擊網頁中第二步的連結「語言理解入口網站」，進入 LUIS 設定網站


進入時，點擊左上角「新應用」建立新的語意分析專案


首次建立時系統可能會提示選擇「創作資源」於選項中選擇剛剛在 Azure 中建立好的資源名稱，再點擊完成


回到建立專案部分，命名好專案名稱，選擇區域性此處是選擇 LUIS 分析語言選項，建議選擇 Chinese 使 LUIS 可以對中文字進行分析，並選擇剛才建立的預測資源，填寫完畢後點選完成送出


進到專案後，來到「意圖」設定頁面中，點擊「創建」建立一個對話會發生的情境，例如：諮詢、點餐、客訴、意見回饋


來到「示例（範例）」頁面中可輸入該對話情境可能會遇到的對話


再來針對對話中的關鍵字進行圈選，再打上對應識別出實際語意名稱
若有建立相關「實體（目的）」會自動帶出，若無則需點選「創建新實體」


此處可選擇該「實體（目的）」判斷句型的方式，採用預設斷字方式即可


接著就可以看到出現剛才建立的「實體（目的）」可點選


當預設範例建立完畢後，可點擊「訓練」使 AI 對於目前設定句型進行訓練


接著點擊「測試」進行對話測試


於對話框中輸入欲測試對話，可看出目前 LUIS 對於該對話判斷的情境為何


測試完畢後可點擊「發布」正式對外公布目前的語意分析模型


發布曹選擇「生產槽」再點擊完成即可


待處理完畢後，右上角會出現發布通知，可點擊通知中的連結「訪位終結點 URL」


此處的預測資源中的密鑰與終結點 URL請先複製留下備用，稍後將會貼回程式碼中


順帶點擊左側功能列中的「設定」複製「應用ID」供稍後使用


延續上篇步驟，我們可直接透過「Visual Studio Code」編輯專案檔中的「LineLUISWebHookController」程式，可透過下方程式呼叫出專案檔

cd testlinebot

code .

再參考上圖中標記將 LUIS 金鑰、 URL 以及官方帳號 LINE ID 、金鑰貼進程式碼中

:::warning
請注意：貼上 URL 時僅需貼上網域部分即可，即 LUIS 提供 ULR 為 https://luisdemo0001.cognitiveservices.azure.com/ 我們僅需貼上 luisdemo0001.cognitiveservices.azure.com 部分即可
:::


接著點選 Visual Studio Code 程式執行按鍵，確認修改後的程式有無出錯


並再次開啟 ngrok 程式，請先將完整資料夾先解壓縮再執行


輸入使用 port 為5000並按下Enter


一樣複製程式產生隨機網址


回到 Line 開發者控制台中的「Messaging API」分頁中，尋找「Webhook URL」欄位並將複製的網址貼上並加上「/api/LineLUIS」點擊「Update」


再點即「Verify」檢查是否有錯誤


確認訊息為「Success」檢查正常即代表目前程式已與 Line 官方帳號成功連線


接著就可以透過與官方帳號 Line 對話，對話內容會傳送至 LUIS 進行分析，且會對於目前句型猜測目前對話情境為何，以及其次要情境可能性，因一個對話可能含有多個不同問題


回到 LUIS 後台，點擊左側「查看終結點言語」可查看目前 LUIS 分析的語句以及目前分析結果，可看到「我要冰淇淋還有可樂去冰」可以正確識別到目前對話情境為點餐，其副餐為冰淇淋飲料是可樂且要去冰，點擊右邊的打勾圖示將這個正確的語句收錄至「點餐」的範例中強化 LUIS 語意分析，若判斷錯誤也可進行修正
如「大薯一份謝謝」被識別為客訴，因目前沒有新增大薯這個餐點，故 LUIS 不知道這是點餐的需求，可於後台新增大薯這個副餐後重新訓練並發布即可修正這句對話

接著就可逐漸修正 LUIS 語句判斷結果可強化 AI 分析能力，提升判斷效率

---

## 6. 操作實例－建立 QnAMaker 回答知識庫


QnAMaker（回答知識庫）其提供的服務在於可以建立龐大的資料庫蒐集各種問題，並給與相對應的回覆，也可透過平台本身功能匯入現有的文件或連結線上網頁 QnAMaker 可以自動收錄問題與回應內容


首先一樣點擊「建立資源」，建立 LUIS 服務


於搜尋列中搜尋「QnAMaker」，並點選建立


進入建立頁面後先勾選「受控」，並開始進行設定建立「資源群組」以及設定「名稱」，服務位置建議可以選擇亞洲鄰近伺服器，「定價層」可以選擇「標準S0」與「免費F」即可，填寫完畢按下「檢閱+建立」送出


等待服務建立完畢，我們可至 QnAMaker 管理後台：https://www.qnamaker.ai 進行設定


進入後台後點選上方「Create a knowledge base」，建立新的回答知識庫，並跳到第二步設定目前 Azure 有效訂閱以及剛才所建立的 QnA 服務最後設定語系為 Chinese Traditional


第三步設定本回答知識庫專案名稱


第四步此處可選擇是否要先另外匯入現有的文件使用


最後點擊「Create your KB」建立


建立完畢後需稍微等候系統建立


完成後點擊頁面右上角「Add QnA pair」手動建立一個問與答的回應資訊


如圖中，且可新增多種問題可能詢問的方式，增加命中率


問題建立完畢後，點擊右上角「Save and train」保存目前建立或修改的內容


建立完專屬的回答知識庫，可點擊右上角「Test」進行測試確認機器人會如何回應


測試完畢後，我們即可準備發布專案，點擊上方「Publish」發布頁面，並點擊中間的「Publish」確定發布


發布完成後，頁面中將顯示連接 API ，可先將 POST 、 Host 、 Key 複製備用待稍後貼上程式碼


延續上篇步驟，我們可直接透過「Visual Studio Code」編輯專案檔中的「LineQnAWebHookController」程式，可透過下方程式呼叫出專案檔

cd testlinebot

code .

再參考上圖中標記將 QnAMaker Host + POST 、 QnAMaker Key 以及官方帳號 LINE ID 、金鑰貼進程式碼中

:::warning
請注意： QnAMaker Host + POST 部分，需要將網頁中提供的網址 Host 部分與呼叫目錄 POST 部分合併再一起，即 Host 為 https://qnamaker20210203.cognitiveservices.azure.com/qnamaker/v5.0-preview.1
POST為 /knowledgebases/xxxxxxxxxxx/generateAnswer 貼上程式碼的部分為兩者合併 https://qnamaker20210203.cognitiveservices.azure.com/qnamaker/v5.0-preview.1/knowledgebases/xxxxxxxxxxx/generateAnswer
:::


接著點選 Visual Studio Code 程式執行按鍵，確認修改後的程式有無出錯


並再次開啟 ngrok 程式，請先將完整資料夾先解壓縮再執行


輸入使用 port 為5000並按下Enter


一樣複製程式產生隨機網址


回到 Line 開發者控制台中的「Messaging API」分頁中，尋找「Webhook URL」欄位並將複製的網址貼上並加上「/api/TestQnA」點擊「Update」


再點即「Verify」檢查是否有錯誤


確認訊息為「Success」檢查正常即代表目前程式已與 Line 官方帳號成功連線


目前已經成功將 QnAMaker 服務與 Line 官方帳號成功串接，您可以嘗試與官方帳號對話，機器人將會回應對應回應的內容

---

資料參考引用自：
https://hackmd.io/ynhuE2f-QR-yKautAzQg5w?view
Line Bot
http://studyhost.blogspot.com/2018/01/index-clinebot.html
https://andy51002000.blogspot.com/2019/10/line-bot.html
https://www.learncodewithmike.com/2020/06/python-line-bot.html
串接 Line 識別所傳送照片
https://github.com/isdaviddong/Linebot-Demo-FaceRecognition
https://youtu.be/kCga1_E-ijs
透過 Line 製作線上翻譯小幫手
https://github.com/isdaviddong/Linebot-Demo-TranslatorKing
LUIS 語意分析
https://studyhost.blogspot.com/2018/01/clinebot19-luis.html
https://studyhost.blogspot.com/2018/02/clinebot20-codelinebotluis.html
特別感謝 董大偉 老師上課指導教學