.NET Walker

最近由於一些因緣際會，又得回頭寫一點asp.net WebForm相關的東西，但，時代在這5年中實在有了不少的改變，因此一些過去的做法，最近有了不同的實作方式，其實我也是久久沒用怕忘記，紀錄一下。 我們最近碰到一個需求，非常單純，就是希望在網頁上用非同步的方式上傳檔案。 這需求沒啥好說嘴的，對吧。 但環境是這樣的，我們用的開發工具是asp.net WebForm，頁面需要盡可能保持單純，因為我自己不喜歡任何從伺服器端render html到前端的解決方案，因此一開始就盡可能的少用 web control之類的東西。由於現在有jQuery可用，瀏覽器的支援也比當年好了不知多少倍，因此，asp.net AJAX那種龐然大物自然也被排除在選用範圍之外。 為何不用asp.net MVC? 一則因為網站必須和過去開發環境(人員)相容，另外asp.net MVC中的Razor view也會從伺服器端render html到前端，route的對應方式和過去webForm的路徑作法不同，在一個專案裡面同時出現實在太不直覺，因此也不在考慮範圍內。 但專案中我們會用asp.net WebApi，如果需要的話(這表示我們不用Web/WCF Services了)。 簡單的說，就是這雖然用asp.net WebForm技術，但頁面前端盡可能的只有 html 與 js，而後端用C#，盡量不用任何WebControls。OK，背景交代完畢。 怎麼實現，先看前端要怎麼上傳檔案，很簡單，放一個file upload，和一個上傳button，寫一點js做非同步上傳用: 我覺得大部分的程式碼都不需要解釋，留意31行body之後，雖然該頁面是asp.net webform，但除了預設的form tag之外，其他的control我們都是用html而非asp.net web controls，在button click時候，我們呼叫第6行的UploadFileAsync，裡面透過很標準的post方法把用戶選擇的檔案上傳。 就這樣。 那伺服器端怎麼接這個檔案呢? 也容易: 就上面這區區幾行… ㄟ…我承認，放在Page_Load裡面看起來有點low，但，這是最簡單單純的做法了，整個過程中不需要使用任何第三方套件或工具，頁面也盡可能保持乾淨。 結案，收工。 喔，程式碼在 https://g...

讓你的電腦說話早已經不是新鮮事了，早期WP7.x的時代，我們就寫過程式碼讓手機說話，適當的採用語音輸出，對於用戶來說也是個不錯的互動體驗。 透過Cognitive Services中的Speech API讓電腦說話，用起來也相當簡單，它可以直接在雲端為你產生你指定的語音，並且將語音檔案binary傳回用戶端。 整體來說，使用該API的方式可參考底下: Bing Text To Speech API 同樣的，使用時你會用到一組Key，這個Key與先前我們做 語音辨識 的時候使用的Key相同。呼叫 API前，我們需要先透過這組Key取得一個token (底下是postman呼叫畫面): 取得Token時，請用POST呼叫底下URL : https://oxford-speech.cloudapp.net/token/issueToken 傳入的body是 : grant_type=client_credentials&client_id=< Your subscription key >&client_secret=< Your subscription key > &scope=https://speech.platform.bing.com 其中的 Your subscription key 是我們前面說到的 key。 取得後的token應該是類似上圖中一長串的文數字。 接著，請組出底下這樣的XML，這組XML是用來告知Speech API我們要取得什麼語音: <speak version="1.0" xmlns=" http://www.w3.org/2001/10/synthesis" xmlns:mstts=" http://www.w3.org/2001/mstts" xml:lang="zh-TW"> <voice name="Microsoft Server Speech Text to Speech Voice (zh-TW, Yating, Apollo)"> 哈囉，今天天氣不錯啊 </voice> </speak> 這組XML是以body...

好不容易透過bot framework建立好了一個bot，要讓用戶和我們的bot chatting，最簡單的方式當然就是透過內建的Web Chat。 你會發現，在後台的管理畫面上，有一個內建的Weh Chat: 要啟動該Web Chat，只需要點選上圖中的Edit，並且產生一個secret key即可: 有了這組secret key，你可以直接透過底下這樣的網址，讓不特定用戶來與你建立好的bot聊天: https://webchat.botframework.com/embed/test20160826?s=x4fT4xmsjNw.cwA.lLc.MfO35JmnXsxKxihkLaMptAlwTqGwOJFP1kLim174nFh8 畫面大致如下，這個Web Chat UI除了可以文字聊天，還可以上傳圖片，其實蠻好用的: 但問題來了，文件上開宗明義地就說，這組secret如果洩漏出去了，那任何人都可以用iframe指令把你的bot embbed在他們家的網頁裡，這或許你不在意，但還有另一個問題。每一個得知這樣的網址連進來的用戶，對談時都是以匿名的方式進來的，如果將來要查詢聊天紀錄，很不方便。 那麼除了用Skype或是FB Messanger來串這個bot，有沒有什麼方式可以解決這個問題呢? 有的，而且還一石二鳥。 首先，你確實不應該用後台產生的這組secret key作為使用WebChat UI的參數，而是該改用一個token。本來的WebChat網址 https://webchat.botframework.com/embed/botName?s=x4fT4xmsjNw.cwA.lLc.MfO35JmnXsxKxihkLaMptAlwTqGwOJFP1kLim174nFh8 應該改為 https://webchat.botframework.com/embed/botName?t=token 這樣的型式。 那這token怎麼來呢，你可以透過底下這個API取得: https://webchat.botframework.com/api/conversations 當你用POST呼叫上面這組API，在headers中傳入Authorization(value是BotConnector 加上你的secret ...

時代真的不一樣了。 我還記得剛使用iPhone的時候，那個著名的Siri，辨識我說話的效果不是很好，但因為我常常需要做語音筆記，並且轉到待辦事項或是行事曆紀錄裡面。因此，我下載了另一個叫做Dragon Dictation的app，哇，用起來驚為天人，辨識率出奇的好，讓我 龍心大悅 大開眼界。這，已經是幾年前的事情了。 直到最近，自己有需要在開發App時導入語音辨識，才開始又survey起相關的套件，萬萬沒想到，怎麼現在做語音辨識可以簡單成這樣? 語音辨識真的不是新玩意兒了，早幾年前微軟就已經推出過text/speech之間的轉換工具，但辨識率(特別是對中文的支援)依舊是大家是否會採用的關鍵，沒想到幾年不見，現在Cognitive Services中的Speech Recognition已經有非常好的成效，不僅僅辨識率高，也支援中文，還有提供C#、android、iOS、javascript…等等等的sdk，都開放成這樣了，如果再不用那就是對不起自己了。 現在要使用此服務，非常的簡單，參考本系列 第一篇 ，先申請好key之後，在你的專案中引入nuget package，然後就可以直接用了: 接著，我們來看程式碼的寫法: 請先建立一個全域的micClient物件，該物件可以從SpeechRecognitionServiceFactory靜態類別的CreateMicrophoneClient方法產生，可用來直接access我們電腦的麥克風，並進行收音並且開始辨識。 記得建立該物件的instance時要傳入辨識方法(SpeechRecognitionMode.LongDictation)與語言地區(zh-TW)等參數，當然也少不了key。 接著，我們hook幾個事件，分別是: OnMicrophoneStatus : micClient狀態發生改變時 OnPartialResponseReceived : 部分辨識完成時 OnResponseReceived : 整段語句辨識完成時 OnConversationError : 發生錯誤時 顯而易見的，你可以在OnResponseReceived 事件發生時，抓取辨識結果，因此我們聚焦在這個事件的Event handler(其他幾個事件你不hook也行)。 別忘了最後要呼叫StartMicAndR...

在你知道了LUIS的功能之後，接著我們就來看看如何透過程式碼叫用LUIS。 你知道LUIS是一個服務，且用的通訊方式是http與JSON，因此你當然也知道可以透典型的http get來抓取，並且把JSON轉成js或c#看得懂的類別來操作。 不過，如果你使用VS2015、寫C#或VB，以前沒有適合的nuget package可用，從上一周開始，你可以直接從nuget上使用底下這個套件，來呼叫LUIS的功能: 安裝此套件之後，使用起來非常簡單: //建立LuisClient Microsoft.Cognitive.LUIS.LuisClient lc = new Microsoft.Cognitive.LUIS.LuisClient( LUIS AppID, key); this.textBoxResult.Text = "分析中..."; //Call Luis API 查詢 var ret = await lc.Predict(textBoxQuery.Text); if (ret.Intents.Count() <= 0) return; var msg = ""; foreach (var item in ret.Intents)　//顯示intent { msg += $"\n intent: {item.Name} score:{item.Score} "; } msg += "\n\n"; foreach (var item in ret.Entities) //Entities { msg += $"\n Entities: {item.Value[0].Name} {item.Value[0].Value} score:{ item.Value[0].Score} "; } //顯示於TextBox this.textBoxResult.Text = msg; 這幾乎不用解釋了。 你可以使用LuisClient 建立一個instance，記得傳入LUIS AppID與key，透過Predict以非同步方式呼叫，把要查詢的句子(Query)傳...

LUIS全名是Language Understanding Intelligent Services，顧名思義，是一個提供語句理解能力的服務，請留意，LUIS並非去分析語句(這是Text Analytics的功能)，而是去嘗試理解一個句子的意義，找出用戶的企圖(intents)與相關聯的entities。 而這個功能，對於我們的chatting bot，非常的重要。由於文字bot的輸入介面，用戶往往可以自由隨興的打字輸入，你根本無法限制用戶輸入什麼，而且人很有趣，只要沒有限制，就會竭盡所能地嘗試，你只要開放一個text chatting bot，就會有人手ㄐㄧㄢˋ的亂打一些有的沒的，然後bot沒理解出他的意思，他就笑這個bot很笨。(這樣很有成就感?) 因此，就對談機器人來說，首要目標之一就是理解用戶輸入的內容，而LUIS是實現這個功能的重點服務。 首先，我們需要知道一些概念，LUIS的基本功能(以後有空再說複雜的)，就是區分出用戶的意圖和相關的entities。 拿點餐來說，如果我們要點一個早餐，用語大概會是: 我要點一份燒餅油條 麻煩你我需要一份蛋餅 給我來個大亨堡 三明治帶走 上面這四句話，基本上intent都是點餐，而其中的entities則是餐點，具體的內容是燒餅油條、蛋餅、大亨堡、三明治。而LUIS的目的，是幫我們在雲端分析各種不同的句型，找出用戶的意圖，並且抓出entities。 因為，用戶不可能只用上面這四種說法點餐，有時候可能會換成: 今天請幫我來一個飯糰 這個句型就跟上面四種截然不同，但LUIS能夠從雲端大量的語句資料庫中，幫我們進行歸納，判斷(猜測)這個句型的意圖，一開始可能判斷不對，這時人工可以介入，指導LUIS，讓它理解上面這個句型就是點餐，這樣下次LUIS就知道了。而其中的entities也是，餐點種類繁多，第一次LUIS肯定不知道有個餐點叫做『飯糰』，所以它抓不出這個entity，但你可以指導它，它就知道下次看到飯糰，就可以將其視為entity。 有了這個基礎之後，我們就可以透程式碼，把從bot接收到的語句，丟給LUIS進行判斷，LUIS就會告訴我們，用戶所輸入的這個語句，其意圖intent與entities為何。 好，概念交代完畢，接著來實作，首先，請用Microsoft Account登入，登入後到底下網址註...

前陣子，MS把bot framework稍微簡化了一下( 其實是偷渡了Skype bot整合 )，主要的調整是bot connector這一段(OS:啊這段不就是核心的部分…這改了實際也不算小改)，連同註冊頁面整個都做了調整。 現在，如果你要建立一個新的bot，依舊可以用自己的Microsoft Account，到底下網址: https://dev.botframework.com/bots 點選畫面上的register a bot，可以註冊一個新的bot: 不過，請回憶一下先前我們在v1談過的這張圖: 嚴格說起來，我們所謂的 註冊一個bot ，意義上 是跟微軟的bot framework註冊一個Bot Connector ，我們將來可以透過這個bot connector來串接不同的bot client(channels)，預設狀況下，最基本的bot client就是Web chat，也就是bot connector自帶的一個對談介面(用戶端)。 而左邊的Your bot，其實才是我們要撰寫的對談機器人的核心，也就是chatting對談邏輯(Business Logic)的主要實作部分，這個實作(如果用C#實作的話)基本上是一個WebApi網站，提供restful的API讓bot connector來呼叫。如此一來，我們的bot kernel不需要跟每一個機器人用戶端打交道，開發人員只需要專注在對談訊息邏輯的撰寫即可，也多了一個最基本的Web對談介面(WebChat)。 因此，有了這個概念之後，你就知道，最左邊的your bot’s web service，是一個我們要先建立好的WebSite，因此，建議開發人員可以先建立好一個對外連線的網站(用Azure WebSite是一個好的選擇)。要快速地建立這個WebSite，你可以下載一個VS2015的專案範本，位於: http://aka.ms/bf-bc-vstemplate 下載之後的檔案請放在 "%USERPROFILE%\Documents\Visual Studio 2015\Templates\ProjectTemplates\Visual C#\" 然後關閉Visual Studio 2015重新開啟，你會看到在C#專案範本底下多了這個: 請用它建立一個專案，你會發現結構上就是一個We...