AI 入门 | 手写识别应用开发初战
丹棱君有话说：作为一名刚入门的 AI 小白，你是否在反复搜寻资料以后被一个个的报错拦住了前进的脚步？不用着急，这里有一系列来自“微软 AI 实践营”的研究员和工程师精心打造的教程。上一课带领大家从零搭建了 AI 开发环境，本课将带你写出第一个手写识别应用，还有进阶挑战哦~
手写体识别的应用已经非常流行了，如输入法，图片中的文字识别等。但对于大多数开发人员来说，如何实现这样的一个应用，还是会感觉无从下手。本文从简单的 MNIST 训练出来的模型开始，和大家一起入门手写体识别。
在本教程结束后，会得到一个能用的 AI 应用，也许是你的第一个 AI 应用。虽然离实际使用还有较大的距离（具体差距在文章后面会分析），但会让你对 AI 应用有一个初步的认识，有能力逐步搭建出能够实际应用的模型。
准备工作
使用 win10 64 位操作系统的计算机
参考上一篇教程AI 入门 | 从零开始搭建开发环境。在电脑上训练并导出 MNIST 模型。
思路
通过上一篇文章搭建环境的介绍后，就能得到一个能识别单个手写数字的模型了，并且识别的准确度会在 98%，甚至 99% 以上了。那么我们要怎么使用这个模型来搭建应用呢？
大致的步骤如下：
实现简单的界面，将用户用鼠标或者触屏的输入变成图片。
将生成的模型包装起来，成为有公开数据接口的类。
将输入的图片进行规范化，成为数据接口能够使用的格式。
最后通过模型来推理 (inference) 出图片应该是哪个数字，并显示出来。
是不是很简单？
动手
获取手写的数字
我们可以写一个简单的 WinForm 画图程序，让我们可以用鼠标手写数字，然后把图片保存下来。
首先，我们打开 Visual Studio，选择文件->新建->项目。
在弹出的窗口里选择 Visual C#->Windows 窗体应用，项目名称不妨叫做 DrawDigit，解决方案名称不妨叫做 MnistForm，点击确定。
此时，Visual Studio 也自动弹出了一个窗口的设计图。
在 DrawDigit 项目上点击右键，选择属性，在生成一栏将平台目标从 Any CPU 改为 x64。
否则，DrawDigit（首选32位）与它引用的 MnistForm（64位）的编译平台不一致会引发System.BadImageFormatException的异常。
然后我们对这个窗口做一些简单的修改：
首先我们打开 VS 窗口左侧的工具箱，这个窗口程序需要以下三种组件：
PictureBox：用来手写数字，并且把数字保存成图片
Label：用来显示模型的识别结果
Button：用来清理 PictureBox 的手写结果
那经过一些简单的选择与拖动还有调整大小，这个窗口现在是这样的：
一些注意事项：
这些组件都可以通过右键 -> 查看属性，在属性里修改它们的设置
为了方便把 PictureBox 里的图片转化成 Mnist 能识别的格式，PictureBox 的需要是正方形
可以给这些控件起上有意义的名称。
可以调整一下 label 控件大小、字体等，让它更美观。
经过一些简单的调整，这个窗口现在是这样的：
现在来让我们愉快地给这些组件添加事件！
还是在属性窗口，我们选择某个组件，右键->查看属性，点击闪电符号，给组件绑定对应的事件。每次绑定后，会跳到代码部分，生成一个空函数。点回设计视图继续操作即可。
| 组件类型 | 事件 |
|---|---|
| pictureBox1 | 在 Mouse 下双击 MouseDown、MouseUp、MouseMove 来生成对应的响应事件函数。 |
| button1 | 在 Action 下双击 Click。 |
| Form1 | 如上，在 Behavior 下双击 Load。 |
然后我们开始补全对应的函数体内容。
注意：如果在上面改变了控件的名称，下面的代码需要做对应的更改。
废话少说上代码！（代码显示不全可以左右滑动）
using System;
using System.Collections.Generic;
using System.ComponentModel;
using System.Data;
using System.Drawing;
using System.Drawing.Drawing2D;//用于优化绘制的结果
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using System.Windows.Forms;
using MnistModel;
namespace DrawDigit
{
public partial class Form1 : Form
{
public Form1()
{
InitializeComponent();
}
private Bitmap digitImage;//用来保存手写数字
private Point startPoint;//用于绘制线段，作为线段的初始端点坐标
private Mnist model;//用于识别手写数字
private const int MnistImageSize = 28;//Mnist模型所需的输入图片大小
private void Form1_Load(object sender, EventArgs e)
{
//当窗口加载时，绘制一个白色方框
model = new Mnist();
digitImage = new Bitmap(pictureBox1.Width, pictureBox1.Height);
Graphics g = Graphics.FromImage(digitImage);
g.Clear(Color.White);
pictureBox1.Image = digitImage;
}
private void clean_click(object sender, EventArgs e)
{
//当点击清除时，重新绘制一个白色方框，同时清除label1显示的文本
digitImage = new Bitmap(pictureBox1.Width, pictureBox1.Height);
Graphics g = Graphics.FromImage(digitImage);
g.Clear(Color.White);
pictureBox1.Image = digitImage;
label1.Text = "";
}
private void pictureBox1_MouseDown(object sender, MouseEventArgs e)
{
//当鼠标左键被按下时，设置isPainting为true，并记录下需要绘制的线段的起始坐标
startPoint = (e.Button == MouseButtons.Left) ? e.Location : startPoint;
}
private void pictureBox1_MouseMove(object sender, MouseEventArgs e)
{
//当鼠标在移动，且当前处于绘制状态时，根据鼠标的实时位置与记录的起始坐标绘制线段，同时更新需要绘制的线段的起始坐标
if (e.Button == MouseButtons.Left)
{
Graphics g = Graphics.FromImage(digitImage);
Pen myPen = new Pen(Color.Black, 40);
myPen.StartCap = LineCap.Round;
myPen.EndCap = LineCap.Round;
g.DrawLine(myPen,startPoint, e.Location);
pictureBox1.Image = digitImage;
g.Dispose();
startPoint = e.Location;
}
}
private void pictureBox1_MouseUp(object sender, MouseEventArgs e)
{
//当鼠标左键释放时
//同时开始处理图片进行推理
//暂时不处理这里的代码
}
}
}
把模型包装成一个类
将模型包装成一个C#是整个过程中比较麻烦的一步。所幸的是，Tools for AI 对此提供了很好的支持。进一步了解，可以看 这里。
首先，我们在解决方案 MnistForm 下点击鼠标右键，选择添加 -> 新建项目，在弹出的窗口里选择 AI Tools -> Inference -> 模型推理类库，名称不妨叫做 MnistModel，点击确定，于是我们又多了一个项目：
然后自己配置好这个项目的名称、位置，点击确定。
然后弹出一个模型推理类库创建向导，这个时候就需要我们选择自己之前训练好的模型了~
首先在模型路径里选择保存的模型文件的路径。这里我们使用在AI 入门 | 从零开始搭建开发环境中训练并导出的模型。
note：模型可在
/samples-for-ai/examples/tensorflow/MNIST 目录下找到，其中 output 文件夹保存了检查点文件，export 文件夹保存了模型文件。
对于TensorFlow，我们可以选择检查点的 .meta 文件，或者是保存的模型的 .pb 文件。
这里我们选择在AI 入门 | 从零开始搭建开发环境最后生成的 export 目录下的检查点的 SavedModel.pb 文件，这时程序将自动配置好配置推理接口，见下图：
类名可以自己定义，因为我们用的是 MNIST，那么类名就叫 Mnist 好了，然后点击确定。
这样，在解决方案资源管理器里，在解决方案资源管理器里，在解决方案 MnistForm 下，就多了一个 MnistModel：
双击 Mnist.cs，我们可以看到项目自动把模型进行了封装，生成了一个公开的 infer 函数。
然后我们在 MnistModel 上右击，再选择生成，等待一会，这个项目就可以使用了~
连接两个部分
这一步差不多就是这么个感觉：
I have an apple , I have a pen. AH~ , Applepen
首先，我们来给 DrawDigit 添加引用，让它能使用 MnistModel。在 DrawDigit 项目的引用上点击添加引用，在弹出的窗口中选择 MnistModel，点击确定。
然后，由于MNIST的模型的输入是一个 28×28 的白字黑底的灰度图，因此我们首先要对图片进行一些处理。
首先将图片转为 28×28 的大小。然后将 RGB 图片转化为灰阶图，将灰阶标准化到 [-0.5,0.5] 区间内，转换为黑底白字。最后将图片用 mnist 模型要求的格式包装起来，并传送给它进行推理。
于是，我们在 pictureBox1_MouseUp 中添加上这些代码，并且在文件最初添加上 "using MnistModel;" ：（代码显示不全可以左右滑动）
private void pictureBox1_MouseUp(object sender, MouseEventArgs e)
{
//当鼠标左键释放时
//同时开始处理图片进行推理
if (e.Button == MouseButtons.Left)
{
// 复制pictureBox中的图片并缩放到28*28成为新的图片(tmpBmp)
Bitmap tmpBmp = new Bitmap(digitImage, MinstImageSize, MinstImageSize);
//将图片转为灰阶图，并将图片的像素信息保存在list中
var imageData = new List<float>(MnistImageSize * MnistImageSize);
for (var y = 0; y < MnistImageSize; y++)
{
for (var x = 0; x < MnistImageSize; x++)
{
var color = tmpBmp.GetPixel(x, y);
var pixel = (float)(0.5 - (color.R + color.G + color.B) / (3.0 * 255));
imageData.Add(pixel);
}
}
//将图片信息包装为mnist模型规定的输入格式
var batchData = new List<IEnumerable<float>>();
batchData.Add(imageData);
//将图片传送给mnist模型进行推理
var result = model.Infer(batchData);
//将推理结果输出
label1.Text = result.First().First().ToString();
}
}
最后让我们尝试一下运行
效果展示
现在我们就有了一个简单的小程序，可以识别手写的数字了。赶紧试试效果怎么样~
注意：路径中不能有中文字符，否则可能找不到模型。
扩展
尝试识别多个数字
我们已经支持了单个手写数字的识别，那能不能支持多个手写数字的识别呢？同时写下多个数字，正是现实中更为常见的情形。相比之下，如果只能一次识别一个手写数字，应用就会有比较大的局限性。
首先，我们可以尝试在现有的应用里一次写下两个数字，看看识别效果（为了更好的展示效果，将笔画的宽度由 40 调整为 20。这一改动对单个数字的识别并无大的影响）：
识别效果不尽人意。
右上角展示的结果准确地反应了模型对我们手写输入的推理结果（即 result.First().First().ToString()），然而这一结果并不像我们期望的那样是 “42”。
了解MNIST数据集的读者们可能已经意识到了，这是“理所当然”的。归根结底，这一问题的症结在于：作为我们 AI 应用核心的 AI 模型，本身并不具备识别多个数字的能力——当前案例中我们使用的AI模型是基于 MNIST 数据集训练的（训练过程请回顾AI 入门 | 从零开始搭建开发环境），而 MNIST 数据集只覆盖了单个的手写数字；并且，我们并未对笔迹图形作额外的处理。
结果是在写下多个数字的情况下，我们实际上在“强行”让 AI 模型做超出其适应性范围的判断。这属于 AI 模型的误用。其结果自然难以令人满意。
那么，为了增强应用的可用性，我们能不能改善它、让它能识别多个数字呢？我们很自然地想到，既然 MNIST 模型已经能很好地识别单个数字，那我们只需要把多个数字分开，一个一个地让 MNIST 模型进行识别就好了。这样，我们就引入了一个新的子问题，即是“多个手写数字的分割”。
分割多个手写数字
我们注意到本文介绍的应用有一个特点，那就是最终用作输入的图形，是用户当场写下的，而非通过图片文件导入的静态图片，即我们拥有笔画产生过程中的全部动态信息，比如笔画的先后顺序，笔画的重叠关系等等。考虑到这些信息，我们可以设计一种基本的分割规则：在水平面上的投影相重叠的笔画，我们就认为它们同属于一个数字。
笔画和水平方向上投影的关系示意如下图：
因此书写时，就要求不同的数字之间尽量隔开。当然为了尽可能处理不经意的重叠，我们还可以为重叠部分相对每一笔画的位置设定一个阈值，如至少进入笔画一端的 10% 以内。
应用这样的规则后，我们就能比较好的把多个手写数字分割开，并能利用 Visual Studio Tools for AI 提供的批量推理功能，一次性对所有分割出的图形做推理。
多个手写数字识别的最终效果如图：
当然，我们对问题的定义还是非常理想化，分割算法也比较简单。在实际应用中，我们还经常要考虑非二值图形、噪点、非数字的判别等等。并且对手写数字的分割可能比我们设定的规则要复杂，因为在现实场景中，水平方向上的重叠可能会影响图形的涵义。
将两个手写数字分割开这一问题，实际上和经典的图像分割问题非常类似。虽然本文示例中的图像非常简单，但仍然可能具有相当复杂的语义需要处理。为此，我们可能需要引入更多的模型，或者扩展现有的模型来正确判断多个图形之间的关系。
进阶
那么，如果要识别多个连写的数字，或支持字母该怎么做呢？大家多用用也会发现，如果数字写得很小，或者没写到正中，识别起来正确率也会不高。要解决这些问题，做成真正的产品，就不止这一个模型了。比如在多个数字识别中，可能要根据经验来切分图，或者训练另一个模型来检测并分割数字。要支持字母，则需要重新训练一个包含手写字母的模型，并准备更多的字母的数据。要解决字太小的问题，还要检测一下字的大小，做合适的放大等等。
我们可以看到，一个训练出来的模型本身到一个实际的应用之间还有不少的功能要实现。希望我们这一系列的介绍，能够帮助大家将机器学习的概念带入到传统的编程领域中，做出更聪明的产品。
学习了这么多，还没过瘾怎么办？欢迎加入“微软 AI 应用开发实战交流群”，跟大家一起畅谈AI，答疑解惑。扫描下方二维码，回复“申请入群”，即刻邀请你入群哦~
了解更多：
后台入驻微软小冰
如果你很萌，请跟她一决高下！