How to on

无论你是刚开始深度学习，亦或是个老练的老手，建立一个神经网络的训练环境有时都会很痛苦。让神经网络的训练像加载一个网页，然后点击几下，然后你就准备好马上进行推理，会不会是件很棒的事呢？（那必须棒）

在本教程中，我将向你展示如何使用浏览器上的框架 .js 构建一个模型，其中包含从你的网络摄像头收集到的数据，并在你的浏览器上进行训练。为了使模型有用，我们将把一个摄像头变成一个游戏 - Pong。

来玩个游戏先！

准备工作：

下载dist.zip [1] 并将其解压缩到你的本地机器上。安装一个HTTP服务器，我的建议是通过 npm 在全球范围内安装http-。

npm install -g http-server

你会问什么是 npm？它是Node.js的包安装程序，就像 的 pip 一样，可以在 [2] 获得。

在dist文件夹所在的命令行中运行以下命令，以便在端口上为本地计算机上的Web应用程序提供服务，例如1234。

http-server dist --cors -p 1234 -s

将浏览器窗口指向:1234 ，我已经在和上进行了测试。

当页面完成加载后，开始收集三个动作的训练图像，左、中、右。在这里有一个提示，平衡训练样本，每个case可能大约有20个样本。

点击“”，开始训练，并显示loss。

如果loss没有变化了，那么训练结束，现在点击“PLAY”开始游戏。

如果想重新开始，点击“”。

让我们来看看游戏是如何构建的。本教程中使用了两种模型，第一种是一个预先训练过的卷积网络，它是从导出的，它负责从网络摄像头图像中提取图像特征。第二个模型在你的浏览器上建立和训练，用图像特征对游戏控制进行预测。它是一个回归模型，预测值在-1~1之间，以控制玩家的速度。它本质上是一个迁移学习任务。更多关于迁移学习的主题，请参考 [3]。这里不做进一步的讨论，可以从我 [4]上下载源代码。

将预训练模型到处到tfjs

如果你只想学习web应用程序部分，可以跳过本节。

让我们首先将一个预先训练过的卷积网络导出到 .js(tfjs) 格式。我选择使用本教程中的 数据集训练的 ，但是你可以使用其他模型，如。尽量避免像 和 VGGs 这样的大型深度卷积网络，尽管它们可能提供更高的精度，但不适合像我们这样运行在浏览器上的边缘设备。

第一步是在脚本中将经过预先训练的 的 模型保存到一个.h5文件中。

from keras.applications.densenet import DenseNet121
model = DenseNet121(input_shape=(224, 224, 3), 
                    weights='imagenet')
model.save('./tfjs-densenet/model.h5')

然后运行转换脚本将.h5文件转换为浏览器缓存优化的tfjs文件。在继续之前，通过pip3安装转换脚本包。

pip3 install tensorflowjs

我们现在可以通过运行生成tfjs文件:

cd ./tfjs-densenet
tensorflowjs_converter --input_format keras 
./model.h5 ./model

你会看到一个名为 的文件夹，里面有几个文件。.json文件定义了模型结构和权重文件的路径。经过预先训练的模型可以为 web 应用程序提供服务。例如，你可以将模型文件夹重命名为 并复制到你的 web app 文件夹，然后可以像这样加载模型：

const modelPath = window.location.origin + 
                    '/serveDenseNet/model.json'
const pretrainedNet = await tf.loadModel(modelPath);
const layer = pretrainedNet.getLayer(
                'conv5_block16_concat');
// Feature extractor model
cnnNet = tf.model({inputs: pretrainedNet.inputs,
                 outputs: layer.output});

.. 是web应用程序url，或者如果你在1234端口本地为其提供服务，它将是 :1234。 语句只允许 Web 应用程序在后台加载模型，而不冻结主用户界面。

另外，由于我们加载的模型是一个图像分类模型，顶层我们不需要，我们只需要模型的特征提取部分，解决方案是定位最顶层的卷积层，并截断前面代码片段中显示的模型。

从网络摄像头生成训练数据

为了准备回归模型的训练数据，我们将从网络摄像头抓取一些图像，并在Web应用程序中用预先训练的模型提取它们的特征。为了简化用于获取训练数据的用户界面，我们仅用三个值中的一个标记[-1, 0, 1 ]。

对于通过网络摄像头获取的每一幅图像，它都会被输入预先训练的 中提取特征并保存为训练样本。在通过特征提取器模型传递图像后，224×224彩色图像的维数将降为图像特征张量 [7，7，1024]，大小取决于你所选择的预训练模型，并且可以通过在前面一节中选择的图层调用来获得，如下所示。

modelLayerShape = layer.outputShape.slice(1)

将提取的图像特征作为训练数据而不是原始图像的原因有两方面：一是节省了存储训练数据的内存，二是不运行特征提取模型，减少了训练时间。

下面的片段显示了一个图像是如何被网络摄像头捕获、提取和聚合的。请注意，所有图像特征都是以张量的形式保存的，这意味着如果你的模型运行在浏览器的后端，那么它一次可以在GPU内存中安全地包含多少个训练样本是有限制的。因此，不要期望使用数千甚至数百个图像样本来训练你的模型，这取决于你的硬件。

const img = webcam.capture();
controllerDataset.addExample(cnnNet.predict(img), 
                            CONTROLS_VALUES[label]);

神经网络的建立与训练

在不上传到任何云服务的情况下，建立和训练你的神经网络保护了你的隐私，因为数据永远不会离开你的设备，在你的浏览器上观察它的发生，让它变得更酷。

回归模型以图像特征作为输入，将其压平到一个向量，然后接着两个全连接层，生成一个浮点数来控制游戏。最后一个全连接层不需要激活函数，因为我们希望它产生实数在-1到1之间。我们选择的损失函数是训练过程中的均方误差，以最小化损失。更多选择可以阅读我的帖子，比如如何选择最后一层激活和损失函数[5]。

下面的代码将构建、编译和匹配模型。看起来非常类似于的工作流，对吗？

model = tf.sequential({
   layers: [
     tf.layers.flatten({inputShape: modelLayerShape}),
     // Layer 1
     tf.layers.dense({
       units: 100,
       activation: 'relu',
       kernelInitializer: 'varianceScaling',
       useBias: true
     }),
     // Layer 2.
     tf.layers.dense({
       units: 1,
       kernelInitializer: 'varianceScaling',
       useBias: false,
     })
   ]
});
// Creates the optimizers which drives training of 
//the model.const optimizer = tf.train.adam(
                               ui.getLearningRate());
model.compile({optimizer: optimizer, 
             loss: 'meanSquaredError'});
let batchSize = 32
// Train the model! Model.fit() will shuffle xs & ys
//so we don't have to.
model.fit(controllerDataset.xs, controllerDataset.ys,
 {
   batchSize,
   epochs: 10
});

将摄像头变成Pong控制器

你可能期望使用类似于语法的图像进行预测。该图像首先被转换成图像特征，然后传递到经过训练的回归神经网络，该神经网络输出控制器值在-1到1之间。

// Capture the frame from the webcam.
const img = webcam.capture();
// Make a prediction through mobilenet, 
//getting the internal activation of
// the mobilenet model.
const activation = cnnNet.predict(img);
// Make a prediction through our newly-trained model
//using the activation
// from mobilenet as input.
const predictions = model.predict(activation);
// The predicted value between -1~1.
predictions.as1D();

一旦你对模型进行了训练，游戏开始运行，预测值就会通过这个调用 pong.() 来控制玩家向左或向右移动的速度。你可以通过调用一下函数来启动和停止游戏：

pong.()：按下Play按钮该函数将被调用

pong.()：按下按钮该函数将被调用

可以通过调用 pong.() 来调整 运动的侵略性，在Pong类构造函数中，当前的值设置为12。

结论与探讨

在本教程中，你已经学习了如何在带有.js的浏览器上训练神经网络，并将你的网络摄像头转换为识别你的动作的Pong控制器。可以自由地查看我的源代码并对其进行实验、修改，比如激活函数、损失函数和切换另一个预训练模型等等，看看结果如何。用即时反馈在浏览器上训练神经网络的美妙之处，使我们能够更快地尝试新的想法，并为我们的原型获得更快的结果。