AI应用开发实战系列之四 - 定制化视觉服务的使用

本篇教程的目标是学会使用定制化视觉服务，并能在UWP应用中集成定制化视觉服务模型。

零、定制化视觉服务简介

有的时候，在构建应用的过程中，在缺少强大计算资源与高性能算法的情况下，我们不一定需要自己从零开始训练模型。我们需要用的一些轮子，已经有人给我们造好了。

就比如：

微软提供的定制化视觉服务。

在机器学习应用中，任何情况下都需要一个或大或小的模型。而怎么得到这个模型是其中最复杂的部分。定制化视觉服务相当于在云端提供了一个生成模型的方法，把模型相关的复杂的算法都简化了。同时，它不仅能够让用户自己管理训练数据，定义自己的分类问题，而且支持一键训练，一键导出模型；不仅能导出适配所有主流框架的模型，而且可以生成REST接口，让程序通过接口获取图片分类的结果。这样给用户提供了多种集成模型的方法和选择，尽可能满足用户的各种需求，这也正是定制化视觉服务的强大之处。同时，通过定制化服务来生成模型，需要的数据量可以非常少，训练过程相对来说也很快。使用上也是非常的方便。

本篇教程，就教大家如何使用定制化视觉服务。

定制化视觉服务官方地址：https://customvision.ai/

一、准备微软账号

使用该服务需要准备微软账号，可以直接在定制化视觉服务官方地址上创建。

二、创建定制化视觉服务

截图	操作
	进入官方网站，点击`SIGN IN`，目前定制化视觉服务提供了免费试用版，可以体验定制化视觉服务。
	登录后，然后界面会提示要求同意一些条约。条约的大致内容就是，个人必须在微软要求的规则下使用微软提供的这项服务。请勾选agree
	此时，界面会提示注册Azure，因为定制化视觉服务实际上是Azure提供的一项云服务，正式使用这项服务需要有Azure订阅。不过我们现在只是免费试用，所以选择`Continue With trial`，如果在根据这篇博客流程做完了一个小应用之后，你觉得确实需要使用这项服务，那么你可以去注册Azure账号，获取Azure订阅。

三、创建定制化视觉服务项目

点击New Project，填写项目信息。

这里不妨以一个熊的分类模型作为例子来实践吧。

填写好Name和Description，这里Name不妨填写为BearClassification。

随后选择Classification和General(compact)，点击Create

截图	操作
	在`Project Type`一栏，定制化视觉服务提供了识别和分类两种服务，另外提供了多种识别场景，其中末尾带有`(compact)`，也即`压缩`字样的三种。压缩模型，顾名思义，模型占用的空间更少，运行更快，甚至可以放到手机这种移动设备里。当然，会有一个小问题就是精确度会受影响。导出模型后，模型文件的使用是没有任何限制的，而其余的几种场景只能通过调用API来进行预测，由于当前属于免费试用，因此这种方式有10000次调用上限。
	由于分类服务需要准备用来训练的数据集，请自行准备几种不同的熊的照片，将同种的熊放在以这种熊的名字命名的文件夹里，最后再将这些文件夹放在一个data文件夹中。然后点击`Add images`
	选择一种熊的全部照片，然后创建对应的标签，点击`Up load xxx files`
	在添加了所有的数据集和标签之后，点击网页上方的`Train`，开始训练模型。
	一小会之后，点击网页上方的`performance`，就可以看到这次训练的结果了。这里简单解释一下Precision和Recall，这是两个评估模型好坏的主要指标。简单来说，两个数都是越大越好。在这个项目中，以Brown Bear为例： Precision就是识别出来的结果的准确率，即在所有被识别为棕熊的图片中真正有棕熊的图片所占的比例；而Recall则是测试结果中正确识别为棕熊的图片占测试集中所有棕熊图片的比例。
	这时再点击界面右上角的齿轮，可以看到免费用户每个项目能够使用的服务额度：一共可以上传5000张图片，创建50个不同标签，保存10次迭代的结果。这十次迭代有什么用呢？当需要增删标签、给标签添加或删除训练图片时，这次再训练，就会花费掉一次迭代。这些都是当前项目的总数而不是累计值。对于一般的免费用户，这基本上就相当于你可以随意使用这项服务了，如果有大量的训练数据，那么建议您还是订阅Azure云服务，Azure秉持着使用多少，收费多少的原则，即使收费，也仍然良心。
	然后选择刚刚训练好的这次迭代，点击`Export`。视觉认知服务一共提供了适用于四种平台的模型导出，对三大操作系统都能支持。选择ONNX，这个格式由微软、脸书、亚马逊等大厂鼎力支持，点击`Export`，等待服务器把模型导出，然后点击`Download`，即可下载模型。最后得到了一个`.onnx`文件，然后就可以使用它来构建应用了。

如果需要上传大量的图片数据，那么点击鼠标的方式肯定不够方便，微软同时提供了代码的支持，详见官方文档：

https://docs.microsoft.com/en-us/azure/cognitive-services/custom-vision-service/home

四、使用Windows ML构建应用

这次不写Winform程序，而是搭建一个识别熊的UWP的AI应用，通过这个应用来教大家如何使用Windows ML导入模型。

这部分的代码已经完成了，请使用git克隆samples-for-ai到本地，UWP项目的代码在/samples-for-ai/projects/BearClassificationUWPDemo中。

在运行代码之前，请先安装开发UWP所需的工作负载，流程如下:

打开Visual Studio Installer
在工作负载中勾选Universal Windows Platform development
在单个组件一栏中下拉到最下方，确认Windows 10 SDK(10.0.17134.0)已被勾选上，这是使用Windows ML开发的核心组件

另外，请将您的操作系统更新到1803版本，否则本程序将不能安装。

如果您将进行类似的开发，请将UWP项目设置成最低运行目标版本为17134，否则对于版本低于17134的用户，在运行时会出现：

“Requested Windows Runtime type ‘Windows.AI.MachineLearning.Preview.LearningModelPreview’ is not registered.”

详见：https://github.com/MicrosoftDocs/windows-uwp/issues/575

安装需要的时间比较长，可以先看看UWP的视频教程，做一做头脑预热： https://www.bilibili.com/video/av7997007

Visual Studio 和 Windows 更新完毕后，我们打开CustomVisionApp.sln，运行这个程序。

你可以从必应上查找一些熊的图片，复制图片的URL，粘贴到输入框内，然后点击识别按钮；或者，点击浏览按钮，选择一张本地图片，点击确定，你就可以看到识别结果了：

现在来看看这个程序是怎么实现的。

我们来梳理一下这个应用的逻辑，这个应用的逻辑与上一篇博客中的手写数字识别大体上是一样的：

导入模型
按下按钮后，通过某种方式获取要用来识别的图片
将图片交给模型识别
将图片与识别结果展示在界面上

1. 文件结构：

文件结构见下图：

Assets文件夹存放了这个项目的资产文件，比如程序图标等等，在本示例程序中，.onnx文件也存放在其中。
Strings文件夹存放了用于本地化与全球化资源文件，这样可以支持不同的语言。
ViewModel文件夹中则存放了本项目的关键代码，整个程序运行的逻辑都在ResultViewModel.cs中
BearClassification.cs则是系统自动生成的模型包装文件
MainPage.xaml是程序的UI布局文件

2. 核心代码一：BearClassification.cs

这部分的代码是自动生成的，教程详见链接：https://docs.microsoft.com/zh-cn/windows/uwp/machine-learning/

将.onnx文件添加到UWP项目的Assets文件夹中，随后将自动生成一个对应的包装.cs文件，在本例中为BearClassification.cs。
由于目前存在的一些BUG，生成的类名会有乱码，需要将乱码替换为别的字符串。
修改BearClassification.onnx的属性->生成操作，将其改为内容，确保在生成时，能够调用到这个模型。

生成的文件共有三个类：
- BearClassificationModelInput：定义了该模型的输入格式是VideoFrame
- BearClassificationModelOutput：定义了该模型的输出为一个list和一个dict，list存储了所有标签按照probability降序排列，dict则存储了标签与概率的键值对
- BearClassificationModel：定义了该模型的初始化函数与推理函数

// 模型的输入格式为VideoFrame
public sealed class BearClassificationModelInput
{
    public VideoFrame data { get; set; }
}

// 模型的输出格式，其中包含了一个列表：classLabel和一个字典：loss
// 列表中包含每种熊的标签，按照概率降序排列
// 字典中则包含了每种熊的标签和其概率，按照用户在创建模型时的添加顺序排列
public sealed class BearClassificationModelOutput
{
    public IList<string> classLabel { get; set; }
    public IDictionary<string, float> loss { get; set; }
    public BearClassificationModelOutput()
    {
        this.classLabel = new List<string>();
        this.loss = new Dictionary<string, float>(){...}
    }
}

// 模型的包装类，提供了两个函数
// CreateBearClassificationModel：从.onnx文件中创建模型
// EvaluateAsync：对输入对象进行评估，并返回结果
public sealed class BearClassificationModel
{
    private LearningModelPreview learningModel;
    public static async Task<BearClassificationModel> CreateBearClassificationModel(StorageFile file)
    {
        ...
    }

    public async Task<BearClassificationModelOutput> EvaluateAsync(BearClassificationModelInput input)
    {
        ...
    }
}

3. 核心代码二：ResultViewModel.cs

通过之前的运行可以发现：每次识别图片，UI中的内容需要进行频繁地更新，为了简化更新控件内容的代码逻辑，这个程序使用UWP开发中常用的MVVM(model-view-viewmodel)这一组合模式开发，使用“绑定”的方式，将UI控件与数据绑定起来，让数据与界面自动地同步更新，简化了代码逻辑，保证了ResultViewModel职责单一。

绑定源(ResultViewMode.cs)	绑定目标(MainPage.xaml)
string BearUrl	TextBox InputUriBox
ObservableCollection Results	ListView ResultArea
BitmapImage BearImage	Image DisplayArea
string Description	TextBox DescribeArea
ICommand RecognizeCommand	Button RecognizeButton
ICommand BrowseCommand	Button BrowseButton

绑定好之后，程序还需要一系列逻辑才能运行，这里就包括:

导入与初始化模型：

在程序一开始，需要调用LoadModel进行模型初始化工作。

private async void LoadModel()
{
    //导入模型文件，实例化模型对象
    StorageFile modelFile = await StorageFile.GetFileFromApplicationUriAsync(new Uri("ms-appx:///Assets/BearClassification.onnx"));
    model = await BearClassificationModel.CreateBearClassificationModel(modelFile);
}

图片推理：

本程序提供了两种方式访问图片资源：
1. 通过URL访问网络图片
2. 通过文件选取器访问本地图片

private async void EvaluateNetPicAsync()
{
    try
    {
        ...
        //BearClassification要求的输入格式为VideoFrame
        //程序需要以stream的形式从URL中读取数据，生成VideoFrame
        var response = await new HttpClient().GetAsync(BearUrl);
        var stream = await response.Content.ReadAsStreamAsync();
        BitmapDecoder decoder = await BitmapDecoder.CreateAsync(stream.AsRandomAccessStream());
        VideoFrame imageFrame = VideoFrame.CreateWithSoftwareBitmap(await decoder.GetSoftwareBitmapAsync());

        //将videoframe交给函数进行识别
        EvaluateAsync(imageFrame);
    }
    catch (Exception ex){ ... }
}


private async void EvaluateLocalPicAsync()
{
    try
    {
        ...
        // 从文件选取器中获得文件
        StorageFile file = await openPicker.PickSingleFileAsync();
        var stream = await file.OpenReadAsync();
        ...
        // 生成videoframe
        BitmapDecoder decoder = await BitmapDecoder.CreateAsync(stream);
        VideoFrame imageFrame = VideoFrame.CreateWithSoftwareBitmap(await decoder.GetSoftwareBitmapAsync());

        // 将videoframe交给函数进行识别
        EvaluateAsync(imageFrame);
    }
    catch (Exception ex){ ... }
}

private async void EvaluateAsync(VideoFrame imageFrame)
{
    //将VideoFrame包装进BearClassificationModelInput中，交给模型识别
    //模型的输出格式为BearClassificationModelOutput
    //其中包含一个列表，存储了每种熊的标签名称，按照probability降序排列
    //和一个字典，存储了每种熊的标签，和对应的probability
    //这里取出输出中的字典，并对其进行降序排列
    var result = await model.EvaluateAsync(new BearClassificationModelInput() { data = imageFrame });
    var resultDescend = result.loss.OrderByDescending(p => p.Value).ToDictionary(p => p.Key, o => o.Value).ToList();

    //根据结果生成图片描述
    Description = DescribResult(resultDescend.First().Key, resultDescend.First().Value);

    Results.Clear();
    foreach (KeyValuePair<string, float> kvp in resultDescend)
    {
        Results.Add(resourceLoader.GetString(kvp.Key) + " : " + kvp.Value.ToString("0.000"));
    }
}

五、使用其他方法构建应用

同样，用之前使用Visual Studio Tools for AI提供的推理类库生成器也能够构建相似的应用，请看：

【教程】普通程序员一小时入门AI应用——看图识熊(不含公式，包会)

该教程讲解了如何使用模型浏览工具Netron

根据模型浏览工具与推理类库生成器来生成模型调用接口。

六、下一步？

本篇博客我们学会了使用定制化视觉服务与在UWP应用中集成定制化视觉服务模型。这里我提两个课后习题：（想不到吧）

当训练含有多个标签、大量图片数据时，如何做到一键上传图片并训练？

提示：请看看定制化视觉服务给我们提供的API，这一题肯定是要写代码做的
https://docs.microsoft.com/en-us/azure/cognitive-services/custom-vision-service/home

如何通过调用REST接口的方式完成对图片的推理？

加油！

七、内容预告

接下来我们将会陆续推出：
1. 微软认知服务使用教程
2. 模型训练及推理的通常流程及原理
3. 模型转换工具的使用
4. 开放AI平台-大规模计算资源调度系统

请在下方留言，告知我们您最想阅读哪个教程，我们将优先考虑。

如果您有别的想要了解的内容，也可以在评论区留言。