本文经AI新媒体量子位（公众号ID：QbitAI）授权转载，转载请联系出处。随着深度学习技术的不断普及，越来越多的语言可以用于深度学习项目的开发，甚至包括JavaScript这种以往只能运行在浏览器中处理轻任务的脚本语言。TensorFlow.js是谷歌推出的基于JavaScript的深度学习框架。它提供的高级API可以轻松开发可直接在浏览器中运行的深度学习算法。这不，美国老人GantLaborde使用TensorFlow.js开发了一款利用深度学习技术识别浏览器中“石头剪刀布”游戏手势的Web应用，发布了一个demo并开源了Github上的代码优越。对于JavaScript开发者来说，这是一本打开深度学习之门的优秀入门教材。只需10分钟，即可训练出相当准确率的手势识别模型，并调用摄像头识别实时视频中的手势。△使用运行在浏览器中的深度学习模型识别手势在一切开始之前，在打开新世界的大门之前，我们总是需要做一些准备工作。在这里，我将简要介绍一个典型的深度学习算法的开发步骤。目的是希望读者在接下来的操作中清楚地知道自己在做什么，而不是点几个按钮而已。这里不会涉及到高难度的数学公式，请放心食用。我们通常所说的深度学习算法，更准确地说，应该是基于深度神经网络的算法（或模型）。在这里你不需要知道什么是深度神经网络（你可能需要多花一百倍的时间才能理解它的具体原理），你只需要知道它可以看成是一个函数f，这很难使用由简单公式表示的函数。一个函数有一个自变量x和一个因变量y。自变量x，我们通常称之为输入，在这种情况下是一只手做出“石头”、“剪刀”或“布”手势的图像。因变量y，也就是我们一般所说的output，在这道题中有0到1的三个取值，分别对应输入手势为“石头”、“剪刀”、“布”的概率。我们依靠这个函数f来得到我们想要的结果，但是f并不是从天上掉下来的，它是由人为选择的模型和（大量的）模型参数组成的。其中，模型参数往往是从大量数据中学习得到的。这个让模型学习参数的过程称为模型训练（train），这是深度学习算法发展中最关键的一步。在这个问题中，我们需要大量的(x,y)数据对进行训练，即大量的(image,gesture)数据对，比如(image1,scissors),(image2,rock),(image3,cloth)...这些数据对通常需要手动收集和标记。我们可以通过一些评价指标来衡量模型的好坏，比如在这个问题中，手势识别的准确率。通过这些评价指标，我们可以验证（validation）模型是否训练充分，效果是否达到我们的预期。如果是，我们可以将其部署到生产环境中并在实际情况下测试其性能。综上所述，一个深度学习算法的开发需要经历四个阶段：数据准备、模型选择与训练、模型效果评估、模型测试。现在，正式开始！数据准备前面我们提到，模型训练需要大量的（图像、手势）数据对。收集这样的数据无疑是一项繁琐的工作，拍照和标注……幸运的是，谷歌工程师LaurenceMoroney为我们提供了这样一个数据集，其中总共包含2892张白底三种手势的图片以及对应的Gesture标签，someexamples:△Moroney提供的数据集的一些例子数据集网址：http://www.laurencemoroney.com/rock-paper-scissors-dataset/一切似乎都是那么顺利。等等，我们如何将如此混乱的图像输入浏览器？在浏览器中执行JavaScript似乎无法读取本地文件。一个显而易见的想法是，我们将训练数据作为网页中的图片读取到DOM的img元素中。我们首先将训练数据中的每张图像“拉直”成一个1像素高的图像，然后将所有图像逐行堆叠。比如我们原图的尺寸是64x64，“拉直”后的尺寸是1x4096。将训练集中的2520张图片堆叠在一起，形成了一张巨大的图片，尺寸为4096x2520（虽然在视觉上已经失去了意义），如下图。这个巨大的图像称为sprite-sheet，包含许多小图像。此Web应用程序的作者在github存储库根目录的spritemaker文件夹中提供了用于生成精灵表的Python代码。△生成的sprite-sheet大小为4096x2520在demo页面，点击“LoadandShowExamples（读取数据并显示样本）”按钮，稍等片刻，我们可以看到数据被读取到浏览器中和A边栏显示从数据集中随机选择的42张图像。这个侧边栏是TensorFlowVisor提供的，可以帮助我们直观的观察模型的训练过程。我们可以随时按下键盘左上方的`键来剪切或隐藏面板。△TensorFlowVisor界面显示的数据样本模型选择、训练和效果评估接下来，我们将面临选择。两个按钮出现在我们面前，“创建简单模型”和“创建高级模型”。让我们从简单的开始，让我们点击“创建简单模型”。按`键裁剪出TensorFlowVisor面板，可以看到刚刚创建的简单模型的网络结构。这是一个5层的卷积神经网络模型（Flatten层不算在层数里），你只需要知道它就可以看成是一堆比较简单的函数，而这确实是一个很简单的基础卷积神经网络模型。△TensorFlowVisor界面中显示的网络结构点击“CheckUntrainedModelResults（查看未训练模型结果）”，面板中出现一个Accuracy（准确度）表和一个矩阵，这是我们对本题索引中模型的评价。在准确率表中，每一行是一个手势类别的准确率值；在矩阵中，由手势X的行和手势Y的列确定的单元格表示实际上是手势X并且被算法认为是手势Y的图像的数量，这样我们称这个矩阵为“混淆矩阵”，因为它显示该算法有多么容易混淆两个手势。可以看出，由于我们的模型没有经过训练，所以算法认为输入图像中的所有手势都是“剪刀”，它还是很懵懂。那就开始训练吧！点击“训练你的简单模型”！TensorFlowVisor面板中出现“ModelTraining（模型训练）”一栏，显示训练中的实时准确率（Accuracy）和损失（Loss）值。一般情况下，我们应该可以看到，随着训练的进行，Accuracy不断上升，loss不断下降。训练在12个时期（60个批次）后停止。△TensorFlowVisor界面显示训练过程后，点击“CheckModelAfterTraining（训练后查看模型结果）”。在原始准确率表和混淆矩阵下方，出现训练模型的准确率（TrainedAccuracy）和混淆矩阵（TrainedConfusionMatrix）。惊人的！经过训练，模型对三种手势在验证数据上的识别准确率均超过95%，混淆矩阵也很健康（对角线深，其余浅）。△TensorFlowVisor界面上显示的训练好的模型效果你可能会想，“高级的东西总比简单的东西好吧？高级的模型一定有更好的效果。”其实，这是一个普遍的误解。如果选择“CreateAdvanceModel”并重复上述操作，你会发现高级模型不仅训练时间更长，而且效果也不如简单模型。此外，高级模型如果训练时间过长，可能会出现过度拟合。过拟合是指模型过于注重对训练数据的完美拟合，以至于虽然在训练数据上表现很好，但对于训练数据之外没见过的数据效果就差了，或者我们也会说模型泛化能力差。模型测试现在我们有了一个表现良好的简单模型，让我们马上投入使用吧！点击“LaunchWebcam”，对准一面白墙，对着摄像头做出不同的手势。App会定时抓取视频图像，通过训练好的模型算法告诉你当前手势属于这三个类别的概率。是不是很酷？△使用训练好的模型识别视频中的手势完成！至此，您已经训练了一个完全在浏览器中进行手势分类的深度学习模型，并通过一些指标验证了其有效性，并在真实场景中对其进行了测试。虽然这些步骤很简单，但您明白它们在做什么——欢迎来到深度学习的世界！传送门源码仓库：https://github.com/GantMan/rps_tfjs_demoDemo页面：https://rps-tfjs.netlify.com/
