AI手写数字识别（二）

理解代码

上文主要介绍了人工智能模型的集成过程。人工智能模型的正确集成，是我们案例中人工智能应用开发的核心步骤。但要让一个人工智能应用顺利地被使用，除了集成模型之外的一些工作也是必不可少的，比如处理输入的数据，进行界面交互等。

应用的主体逻辑都在 MNIST.App 项目的 文件中，该文件包括了界面联动、数据预处理两部分的代码，以及一行推理预测的代码。剩下的都是自动生成的代码。界面联动是为了实现手写输入时的良好体验；而数据预处理部分是在推理前，将用户输入的笔迹变为模型所需要输入的浮点数组。MainWindow.cs

小提示

代码中包含了非常详尽的注释。建议在读完本章节后，再通读代码中的注释，以便更深入地理解整个代码逻辑。

界面联动

1. 展开 MNIST.App 项目，找到 文件。所有的界面设计和代码都在这里。先双击它，打开设计界面。可以看到，设计界面和程序实际运行起来的效果非常像。窗体上包含了三个控件：，，以及 。稍后会介绍控件对应的变量名称，以及绑定的控件事件响应函数、这些控件用途等。MainWindow.csPictureBoxLabelButton

2. 在窗体的设计界面上右击，并选择 查看代码，可以看到核心的代码。如图所示。

1. 打开代码后，可以看到，几乎每一行代码都有对应的注释。除了类里的 等几个变量外，剩下的逻辑几乎都在事件响应函数中。这些响应函数是在控件属性的事件面板中添加的。每个控件都在代码中可以通过变量名称来使用。界面逻辑的一些重要信息如下：ImageSize

变量名称	控件类型	绑定的事件响应函数	控件的用途
Form1	Form	Form1_Load	主窗体。加载时会一次性初始化部分变量。
writeArea	PictureBox	writeArea_MouseDown、 writeArea_MouseMove writeArea_MouseUp	手写区域。 在鼠标操作时，响应鼠标的按下（MouseDown）、移动（MouseMove）、释放（MouseUp）事件。 在触摸屏操作时，与鼠标操作类似，会响应手指的接触屏幕、在屏幕上移动、离开屏幕的事件。
outputText	Label		文本标签。显示推理结果的数字。
clean	Button	clean_Click	清除按钮。在每次推理前清除手写区内容，及文本标签显示的数字。

数据预处理

数据预处理是 AI 应用的重要一环。在大部分 AI 应用中，特别是本文的图片分类应用中，通过监督学习来训练模型。即先提供一些标记过分类的图片来训练出模型，然后输入未知的图片，推理预测出此图片的类别。因此，在训练和推理过程中，每次输入模型的数据格式必须完全一致，这样才能保证预测推理的效果。

本示例已知了训练数据的输入形式，所以按图索骥就能写出代码。在 AI 的实际应用中，一定要了解模型输入数据的格式细节，严格的实现它。如果数据格式细节不一致，通常会降低推理结果的正确率。而这类问题几乎不会产生编译或运行错误，而且数据是不易直观理解的浮点数组，所以对此类问题的诊断和修正较困难。

下面会介绍一下本例中的数据预处理过程，从而体会一下数据预处理中的细节问题。

1. 数据预处理的第一步，在窗体设计时，手写区域调整为了正方形，和训练数据的形状保持一致。

2. 定义了类变量 常量等于 。这是训练数据的实际图片尺寸。界面上的正方形最终会缩小为 。ImageSize2828x28

private const int ImageSize &