建立一個新的Dialog專門處理對發票

建立一個Dialog叫做ReceiptRecognizerDialog。這個Dialog作用很簡單，就是會呼叫OCR的服務，然後返回識別出來的發票號碼。

[Serializable]
public class ReceiptRecognizerDialog : IDialog<string>
{
	public Task StartAsync(IDialogContext context)
	{
		throw new NotImplementedException();
	}
}

目前實作的部分先暫時不理他，等一下再回來處理。

建立一個Service把OCR服務包起來

還記得在上篇介紹API文件的時候有提到，在最下面有提供sample code。而C#的sample code是透過HttpClient直接對接REST Api取得結果。

不過在實際開發上還是希望透過物件的方式來呼叫服務，因此Sample Code的方式最好還是包一層比較好呼叫。

微軟在Computer Vision的部分有提供一個SDK，已經把REST Api包好了，因此將會使用這個SDK作爲基礎。

首先，先安裝nuget套件：Install-Package Microsoft.ProjectOxford.Vision

安裝好了之後，建立出一個OCRService，這個Service提供了兩個方法：

1. 傳入圖片url的方式來辨別
2. 傳入一個Stream，可以用作本地檔案上傳的時候用

public class OCRService
    {
        public OCRService()
        {
            VisionServiceClientInstance =
                 new VisionServiceClient
                    (ConfigurationManager.AppSettings["ComputerVision.Key"],
                    ConfigurationManager.AppSettings["ComputerVision.Url"]);
        }

        public VisionServiceClient VisionServiceClientInstance { get; }

        public async Task GetOcrResultAsync
            (Stream imageStream, string languageCode = "unk")
        {
            return await VisionServiceClientInstance.RecognizeTextAsync(imageStream, languageCode);
        }

        public async Task GetOcrResultAsync
            (string imageUrl, string languageCode = "unk")
        {
            return await VisionServiceClientInstance.RecognizeTextAsync
                (imageUrl, languageCode);
        }

把Dialog和Service結合起來

這邊將整合兩種情況：

1. 如果傳入的是一個網址
2. 直接傳送圖片的方式

首先，調整Dialog裡面的内容：

public async Task StartAsync(IDialogContext context)
{
	await context.PostAsync
		("請上傳發票圖片或者發票圖片的網址");

	context.Wait(MessageReceivedAsync);
}

private async Task MessageReceivedAsync
	(IDialogContext context, 
		IAwaitable<IMessageActivity> result)
{
	var messageResult = await result;

	var cvs = new OCRService();

	var finalResult = string.Empty;

	// 上傳圖片的處理
	if (messageResult.Attachments
			?.Any(a => a.ContentType.Contains("image")) 
				?? false)
	{
		var attachment =
			messageResult.Attachments.FirstOrDefault
				(x => x.ContentType.Contains("image"));

		var imageStream = await
			messageResult.GetConnector()
				.GetImageStream(attachment);

		var ocrResult = await cvs
			.GetOcrResultAsync(imageStream, "zh-Hant");

		finalResult = ProcessImageOcrResult(context, ocrResult);
	}
	// 圖片網址的處理
	else if (Uri.IsWellFormedUriString
				(messageResult.Text, UriKind.Absolute))
	{
		var ocrResult = await cvs
			.GetOcrResultAsync(messageResult.Text, "zh-Hant");

		finalResult = ProcessImageOcrResult(context, ocrResult);
	}

	context.Done(finalResult);
}

上面這段的程式碼有幾個重要的地方：

圖片取得的邏輯

有些channel的圖片直接在Attachment裡面，不過有些要做額外處理。例如Skype就需要用特殊的API才能夠取得圖片。因此，裡面有幾個方法是從Extension Helper來的，分別為：

• GetConnector()
• GetImageStream()

這個程式碼就不貼在部落格裏面了，詳細可以參考github上面。 Helper/IActivityHelper.cs、 Helper/IConnectorClientHelper.cs

處理OCR識別的結果

private string ProcessImageOcrResult(IDialogContext context,
	OcrResults ocrResult)
{
	var result = string.Empty;

	// 偷懶，發票號碼格式是：AA-12345678
	// 因此找出第3個字母是-的就算是發票號碼
	var foundErrorCode = ocrResult.Regions.SelectMany(x => x.Lines)
						.SelectMany(x => x.Words)
						.FirstOrDefault(x => x.Text.Length > 3 
							&& x.Text.Substring(2, 1) == "-");

	if (foundErrorCode != null)
	{
		result = foundErrorCode.Text;
	}

	return result;
}

這邊偷懒了，如果真的是production程式碼，判斷哪裏屬於發票號碼需要更加嚴謹一些。

把RootLuisDialog和對發票結合

到目前爲止，一切都准備好了，剩下就是怎麽觸發對發票的Dialog。

這邊，先去luis.ai上面加入一個新的intent叫做ReceiptRecognizer這個將會觸發剛剛建立的Dialog：

[LuisIntent("ReceiptRecognizer")]
public Task ReceiptRecognizer
	(IDialogContext context, LuisResult result)
{
	context.Call(new ReceiptRecognizerDialog(),
		ReceiptRecognizerAfterAsync);

	return Task.CompletedTask;
}

private async Task ReceiptRecognizerAfterAsync
	(IDialogContext context,
		IAwaitable<string> result)
{
	var finalResult = await result;

	if(string.IsNullOrEmpty(finalResult) == false)
	{
		await context.PostAsync($"您的發票號碼是：{finalResult}");
	}
	else
	{
		await context.PostAsync("識別發票號碼失敗");
	}

	context.Wait(MessageReceived);
}

測試結果

接下來就是測試執行結果，將會使用以下這個發票做測試：

首先測試用圖片上傳的方式：

再來測試用圖片網址的方式：