建立一個Custom Vision的Service

首先建立出一個Service叫做：CustomVisionService，這個class目的是把Custom Vision的REST Api包住，方便在C#呼叫。

首先，這個class能夠注入Project Id以及Prediction Key：

public string ProjectId { get; }
public string PredictionKey { get; }

public string PredictionBaseUrl
{
	get
	{
		return $"https://southcentralus.api.cognitive.microsoft.com/customvision/v2.0/Prediction/{ProjectId}";
	}
}

public string PredictionImageUrl
{
	get
	{
		return $"{PredictionBaseUrl}/image";
	}
}

public string PredictionImageUrlUrl
{
	get
	{
		return $"{PredictionBaseUrl}/url";
	}
}

public CustomVisionService(string projectId, string predictionKey)
{
	ProjectId = projectId;
	PredictionKey = predictionKey;
}

接下來，在這個class裡面建立一個method叫做GetTag，這個方法有兩個版本：

1. 接受string - 代表url類型圖片的服務
2. 接受stream - 代表實體檔案上傳的服務

public async Task<string> GetTag(string imageUrl)
	{
		var result = string.Empty;

		var client = new HttpClient();

		client.DefaultRequestHeaders
			.Add("Prediction-Key", PredictionKey);

		string url = PredictionImageUrlUrl;

		HttpResponseMessage response;

		using (var content = 
			new StringContent($"{{ \"Url\": \"{imageUrl}\"}}"))
		{
			content.Headers.ContentType = 
				new MediaTypeHeaderValue("application/json");
			response = await client.PostAsync(url, content);
			var json = await response.Content.ReadAsStringAsync();
			result = GetMostPossibleTagName(json);
		}

		return result;
	}

public async Task<string> GetTag(Stream stream)
{
	var result = string.Empty;

	var client = new HttpClient();

	client.DefaultRequestHeaders
		.Add("Prediction-Key", PredictionKey);

	string url = PredictionImageUrl;

	HttpResponseMessage response;

	byte[] byteData = GetStreamAsByteArray(stream);

	using (var content = new ByteArrayContent(byteData))
	{
		content.Headers.ContentType = 
			new MediaTypeHeaderValue("application/octet-stream");
		response = await client.PostAsync(url, content);
		var json = await response.Content.ReadAsStringAsync();
		result = GetMostPossibleTagName(json);
	}

	return result;
}

在這兩個方法裡面，有使用到兩個Helper方法：

1. GetMostPossibleTagName - 回傳的結果包含多個tag，我們只要判斷最高那個即可。這個方法處理這個事情
2. GetStreamAsByteArray - 把Stream轉換成爲byte[]，方便呼叫服務

private string GetMostPossibleTagName(string json)
{
	var model = JsonConvert.DeserializeObject
		<PredicationResponse>(json);

	return $"{model.predictions.
		FirstOrDefault().tagName}";
}

private byte[] GetStreamAsByteArray(Stream stream)
{
	var ms = new MemoryStream();
	stream.CopyTo(ms);
	return ms.ToArray();
}

最後，當服務呼叫完了，回傳的是一個JSON的内容，因此有個C#的class對應這個JSON，稱之爲PredicationResponse：

public class PredicationResponse
{
	public string id { get; set; }
	public string project { get; set; }
	public string iteration { get; set; }
	public DateTime created { get; set; }
	public Prediction[] predictions { get; set; }
}

public class Prediction
{
	public float probability { get; set; }
	public string tagId { get; set; }
	public string tagName { get; set; }
}

建立一個處理Custom Vision的Dialog

接下來建立一個Dialog叫做DrinkPriceCheckerDialog，這個Dialog作用很簡單，把圖片透過CustomVisionService取得判斷，然後在返回物品名稱以及價錢。

首先是Dialog裡面的一些boilerplate的程式碼，這個Dialog需要傳入CustomVisionService，然後進入的時候有一段文字説明：

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

	context.Wait(MessageReceivedAsync);
}

接下來是重點的邏輯，呼叫CustomVisionService來判斷屬於什麽飲料，然後在把價錢返回去：

private async Task MessageReceivedAsync
	(IDialogContext context, 
		IAwaitable<IMessageActivity> result)
{
	var CustomVisionServiceInstance = 
        	new CustomVisionService
                    (ConfigurationManager
		    	.AppSettings["CustomVision.ProjectId"],
                    ConfigurationManager
		    	.AppSettings["CustomVision.Key"]);

	var messageResult = await result;

	var connector = messageResult.GetConnector();

	var finalResult = string.Empty;

	var imageAttachment = messageResult
		.Attachments
		?.FirstOrDefault
			(a => a.ContentType.Contains("image"));

	if (imageAttachment != null)
	{
		using (var stream = await connector
			.GetImageStream(imageAttachment))
		{
			finalResult = 
				await CustomVisionServiceInstance
					.GetTag(stream);
		}
	}
	else if (Uri.IsWellFormedUriString
		(messageResult.Text, UriKind.Absolute))
	{
		finalResult = 
			await CustomVisionServiceInstance
				.GetTag(messageResult.Text);
	}

	switch (finalResult)
	{
		case "coke":
			finalResult = "可樂：20元";
			break;
		case "sprite":
			finalResult = "雪碧：10元";
			break;
		case "pepsi":
			finalResult = "百事可樂：50元";
			break;
		default:
			finalResult = "找不到對應的飲料，請重新拍照";
			break;
	}

	context.Done(finalResult);
}

調整LUIS加入查價錢的intent以及修改dialog

邏輯都准備好了，接下來就是整合的部分。

首先，先到LUIS增加一個Intent叫做CheckDrinkPrice。

再來，調整RootLuisDialog加入這個intent的處理：

[LuisIntent("CheckDrinkPrice")]
public Task CheckDrinkPrice
	(IDialogContext context, LuisResult result)
{
	context.Call(new DrinkPriceCheckerDialog(),
		CheckDrinkPriceAfterAsync);

	return Task.CompletedTask;
}

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

	await context.PostAsync(finalResult);

	context.Wait(MessageReceived);
}