JavaScript，实现神经网络应用教程

很多朋友对JavaScript，实现神经网络应用教程不是很了解，每日小编刚好整理了这方面的知识，今天就来带大家一探究竟。

近日，来自德国的Robin Wieruch 发布了一系列关于使用JavaScript 构建机器学习的教程。本文将主要介绍如何使用JavaScript来实现神经网络。

JavaScript 是一种流行的高级编程语言，被世界上绝大多数网站使用，并受到所有主要浏览器的支持。随着深度学习的普及，越来越多的开发者正在探索使用JavaScript来实现人工智能和机器学习算法。近日，来自德国的Robin Wieruch 发布了一系列关于使用JavaScript 构建机器学习的教程。本文将主要介绍如何使用JavaScript来实现神经网络。

近日，原作者发表了一系列关于在JavaScript上实现人工智能和机器学习算法的文章，包括：

线性回归和梯度下降正规方程线性回归Logistic 回归和梯度下降

这些机器学习算法的实现基于线性代数（例如矩阵运算）和微积分以及math.js 库。您可以在GitHub 上找到所有这些内容：

如果您发现任何缺陷，欢迎您对此资源提出改进建议，以帮助后代。我希望继续为Web开发者提供更多、更丰富的机器学习算法。

就我个人而言，我发现在某种程度上实现这些算法是一项非常具有挑战性的任务。特别是当你需要在JavaScript 中实现神经网络的前向和后向传播时。由于我自己也在学习神经网络，因此我开始寻找适合此类工作的库。希望不久的将来我们能够在GitHub 上轻松找到底层实现。然而，现在，根据我使用JavaScript 的经验，我选择了Google 发布的deeplearn.js 来完成这项工作。在本文中，我将分享如何使用deeplearn.js 和JavaScript 实现神经网络来解决网络上的现实问题——。

首先，强烈推荐读者学习著名深度学习学者吴恩达的《机器学习》课程。本文不会详细解释机器学习算法，而只会展示其在JavaScript 中的使用。另一方面，该课程系列在算法的细节和解释方面具有令人惊讶的高质量。在写这篇文章之前，我自己也学习了相关课程，并尝试使用JavaScript实现来内化课程中的相关知识。

神经网络的目的是什么？本文中实现的神经网络需要通过选择与背景颜色相关的适当字体颜色来提高网页的可访问性。例如，深蓝色背景上的字体应为白色，而浅黄色背景上的字体应为黑色。您可能会想：为什么首先需要神经网络来完成任务？根据背景颜色以编程方式计算可用的字体颜色并不难，不是吗？我很快在Stack Overflow 上找到了这个问题的解决方案，并根据我的需要进行了调整，以适应RGB 空间中的颜色。

函数getAccessibleColor(rgb) {let [ r, g, b ]=rgb;let 颜色=[r/255, g/255, b/255];让c=color.map((col)={if (col 0.179 )? [ 0, 0, 0 ]: [ 255, 255, 255 ];}

当已经有可以解决问题的编程方法并且不需要使用机器训练的算法时，使用神经网络对于现实世界的问题没有什么价值。然而，由于这个问题可以通过编程来解决，因此很容易验证神经网络的性能，这可能会解决我们的问题。查看此GitHub 存储库(https://github.com/javascript-machine-learning/color-accessibility-neural-network-deeplearnjs) 中的gif，了解结果如何以及您将在本教程中构建什么。如果你熟悉机器学习，也许你已经注意到这个任务是一个分类问题。该算法应根据输入（背景颜色）决定二进制输出（字体颜色：白色或黑色）。在利用神经网络训练算法的过程中，最终会根据输入的背景颜色输出正确的字体颜色。

以下指南将引导您从头开始设置神经网络的所有部分，然后由您将各个部分放在文件/文件夹设置中。但您可以集成之前引用的GitHub 存储库以获取实现详细信息。

JavaScript 中的数据集生成机器学习中的训练集由输入数据点和输出数据点（标签）组成。它用于训练预测训练集（例如测试集）之外的新输入数据点的输出的算法。在训练阶段，神经网络训练的算法会调整其权重以预测输入数据点的给定标签。总之，经过训练的算法是一种以数据点作为输入并近似输出标签的函数。该算法由神经网络进行训练，以输出不属于训练集的新背景颜色的字体颜色。因此，您稍后将使用测试集来验证训练算法的准确性。由于我们处理的是颜色，因此为神经网络生成输入颜色的样本数据集并不困难。

函数generateRandomRgbColors(m) {const rawInputs=[];for (let i=0; i m; i++) {rawInputs.push(generateRandomRgbColor());}返回rawInputs;}函数generateRandomRgbColor() {return [randomIntFromInterval(0, 255) ),randomIntFromInterval(0, 255),randomIntFromInterval(0, 255),];}函数randomIntFromInterval(min, max) {return Math.floor(Math.random() * (max - min + 1) + min);}

generateRandomRgbColors() 函数创建给定大小m 的部分数据集。数据集中的数据点是RGB 颜色空间中的颜色。每种颜色由矩阵中的一行表示，每一列都是该颜色的一个特征。特征是RGB空间中的R、G、B编码值。数据集还没有任何标签，因此训练集是不完整的，因为它只有输入值而没有输出值。

由于基于已知颜色生成可用字体颜色的编程方法是已知的，因此可以使用该函数的改编版本来为训练集（以及后来的测试集）生成标签。这些标签针对二元分类问题进行了调整，并隐式反映RGB 空间中的黑色和白色。所以，对于黑色，标签是[0,1]；对于白色，标签是[1,0]。

函数getAccessibleColor(rgb) {let [ r, g, b ]=rgb;let color=[r/255, g/255, b/255]; let c=color.map((col)={if (col 0.179 )? [ 0, 1 ] //黑色： [ 1, 0 ]; //白色}

现在您已准备好生成（背景）颜色的随机数据集（训练集、测试集），该数据集被分类为黑色或白色（字体）颜色。

函数generateColorSet(m) {const rawInputs=generateRandomRgbColors(m); const rawTargets=rawInputs.map(getAccessibleColor);return { rawInputs, rawTargets };}

使神经网络中的底层算法变得更好的另一个步骤是特征缩放。在特征缩放的简化版本中，您希望RGB 通道的值介于0 和1 之间。由于您知道最大值，因此您可以简单地导出每个颜色通道的归一化值。

函数normalizeColor(rgb) {return rgb.map(v=v/255);}

您可以将此函数放入神经网络模型中，或作为单独的效用函数。接下来我会将它放入神经网络模型中。

JavaScript 神经网络模型设置阶段现在您可以使用JavaScript 实现神经网络。在开始之前，您需要安装deeplearn.js 库：JavaScript 神经网络的框架。官方宣传称：“deeplearn.js 是一个开源库，为网络带来了高效的机器学习构建块，允许在浏览器中训练神经网络或在推理模式下运行预先训练的模型。”在本文中，您将训练自己的模型，然后在推理模式下运行该模型。使用这个库有两个主要优点：

首先，它使用本地计算机的GPU 来加速机器学习算法中的矢量计算。这些机器学习计算类似于图计算，因此使用GPU 的计算比使用CPU 的计算效率更高。其次，deeplearn.js 的结构与流行的TensorFlow 库（也是由Google 开发，但使用Python）类似。因此，如果您想使用Python 在机器学习方面取得飞跃，deeplearn.js 提供了通往JavaScript 所有领域的捷径。

现在回到你的项目。如果您想使用npm 进行设置，那么您只需从命令行安装deeplearn.js 即可。您还可以查看deeplearn.js 项目的官方安装说明。

npm 安装深度学习

我还没有构建很多神经网络，所以我遵循构建神经网络的一般实践。在JavaScript 中，您可以使用JavaScript ES6 类来推进这一点。此类通过定义神经网络属性和类方法为您的神经网络提供完美的容器。例如，您的颜色标准化函数可以在类中找到一个点作为方法。

类ColorAccessibilityModel {normalizeColor(rgb) {return rgb.map(v=v/255);}}导出默认ColorAccessibilityModel;

也许这也是您的函数生成数据集的地方。就我而言，我仅使用类标准化作为分类方法，让数据集生成独立于类。你可以认为，未来将会有不同的方式来生成不应该在神经网络模型中定义的数据集。无论如何，这只是一个实现细节。

训练和推理阶段都属于机器学习的总括术语会话。您可以在神经网络类别中设置会话。首先，您可以从deeplearn.js 进入NDArrayMathGPU 类，它可以帮助您以计算高效的方式在GPU 上执行数学运算。

import {NDArrayMathGPU,} from 'deeplearn';const math=new NDArrayMathGPU();class ColorAccessibilityModel {.}导出默认ColorAccessibilityModel;

其次，声明分类方法类来设置会话。它的函数签名使用训练集作为参数，使其成为从先前实现的函数生成训练集的完美消费者。

第三步是使用空图初始化会话。然后，该图将反映神经网络的架构。您可以根据需要定义其属性。

从'deeplearn' 导入{Graph,NDArrayMathGPU,};class ColorAccessibilityModel {setupSession(trainingSet) {const graph=new Graph();}.}导出默认ColorAccessibilityModel;

在第四步中，您以张量的形式定义图中输入和输出数据点的形状。张量是不同维度的数组。它可以是向量、矩阵或更高维的矩阵。神经网络将这些张量作为输入和输出。在我们的例子中，有三个输入单元（每个颜色通道一个）和两个输出单元（二元分类，例如黑色和白色）。

class ColorAccessibilityModel {inputTensor;targetTensor;setupSession(trainingSet) {const graph=new Graph();this.inputTensor=graph.placeholder('输入RGB值', [3]);this.targetTensor=graph.placeholder('输出分类器', [2]);}.}导出默认ColorAccessibilityModel;

第五步，神经网络包含隐藏层。奇迹如何发生仍然是一个黑匣子。基本上，神经网络会提出自己的交叉计算参数（在会话期间进行训练）。但是，您可以自由定义隐藏层的尺寸（每单位尺寸、层尺寸）。

class ColorAccessibilityModel {inputTensor;targetTensor;setupSession(trainingSet) {const graph=new Graph();this.inputTensor=graph.placeholder('输入RGB值', [3]);this.targetTensor=graph.placeholder('输出分类器', [2]);letconnectedLayer=this.createConnectedLayer(graph, this.inputTensor, 0, 64);connectedLayer=this.createConnectedLayer(graph,connectedLayer, 1, 32);connectedLayer=this.createConnectedLayer(graph,connectedLayer, 2, 16);}createConnectedLayer(graph,inputLayer,layerIndex,units,) {.}.}导出默认ColorAccessibilityModel;

根据层数，您可以更改图形以展开更多层。创建连接层的分类方法需要一个图、一个变异的连接层、新层的索引以及单元的数量。图的图层属性可用于返回由名称标识的新张量。

class ColorAccessibilityModel {inputTensor;targetTensor;setupSession(trainingSet) {const graph=new Graph();this.inputTensor=graph.placeholder('输入RGB值', [3]);this.targetTensor=graph.placeholder('输出分类器', [2]);letconnectedLayer=this.createConnectedLayer(graph, this.inputTensor, 0, 64);connectedLayer=this.createConnectedLayer(graph,connectedLayer, 1, 32);connectedLayer=this.createConnectedLayer(graph,connectedLayer, 2, 16);}createConnectedLayer(graph,inputLayer,layerIndex,units,) {return graph.layers.dense(`complete_connected_${layerIndex}`,inputLayer,units);}.}导出默认ColorAccessibilityModel;

神经网络中的每个神经元必须具有定义的激活函数。它可以是逻辑激活函数。您可能已经从逻辑回归中了解了这一点，逻辑回归成为神经网络中的逻辑单元。在我们的例子中，神经网络默认使用修正线性单位。

class ColorAccessibilityModel {inputTensor;targetTensor;setupSession(trainingSet) {const graph=new Graph();this.inputTensor=graph.placeholder('输入RGB值', [3]);this.targetTensor=graph.placeholder('输出分类器', [2]);letconnectedLayer=this.createConnectedLayer(graph, this.inputTensor, 0, 64);connectedLayer=this.createConnectedLayer(graph,connectedLayer, 1, 32);connectedLayer=this.createConnectedLayer(graph,connectedLayer, 2, 16);}createConnectedLayer(graph,inputLayer,layerIndex,units,activationFunction) {return graph.layers.dense(`完全连接_${layerIndex}`,inputLayer,units,activationFunction ?activationFunction : (x)=graph.relu( x));}.}导出默认ColorAccessibilityModel;

第六步是创建一个输出二元分类的层。它有两个输出单元，每个输出单元代表一个离散值（黑色、白色）。

class ColorAccessibilityModel {inputTensor;targetTensor;predictionTensor;setupSession(trainingSet) {const graph=new Graph();this.inputTensor=graph.placeholder('输入RGB 值', [3]);this.targetTensor=graph.placeholder('输出分类器', [2]);letconnectedLayer=this.createConnectedLayer(graph, this.inputTensor, 0, 64);connectedLayer=this.createConnectedLayer(graph,connectedLayer, 1, 32);connectedLayer=this.createConnectedLayer(graph, connectedLayer, 2, 16);this.predictionTensor=this.createConnectedLayer(graph,connectedLayer, 3, 2);}.}导出默认ColorAccessibilityModel;

第七步是声明一个成本张量来定义损失函数。在这种情况下，成本张量是均方误差。它使用训练集的目标张量（标签）和训练算法得到的预测张量来计算成本。

class ColorAccessibilityModel {inputTensor;targetTensor;predictionTensor;costTensor;setupSession(trainingSet) {const graph=new Graph();this.inputTensor=graph.placeholder('输入RGB值', [3]);this.targetTensor=graph.placeholder （'输出分类器'，[2]）;让connectedLayer=this.createConnectedLayer（图，this.inputTensor，0, 64）;connectedLayer=this.createConnectedLayer（图，connectedLayer，1, 32）;connectedLayer=this.createConnectedLayer（ graph,connectedLayer,2,16);this.predictionTensor=this.createConnectedLayer(graph,connectedLayer,3,2);this.costTensor=graph.meanSquaredCost(this.targetTensor,this.predictionTensor);}.}导出默认值颜色辅助功能模型；

最后但并非最不重要的一点是，为架构图设置相关会话。之后，您可以开始准备导入训练阶段的训练集。

从'deeplearn' 导入{Graph,Session,NDArrayMathGPU,};class ColorAccessibilityModel {session;inputTensor;targetTensor;predictionTensor;costTensor;setupSession(trainingSet) {const graph=new Graph();this.inputTensor=graph.placeholder('input RGB值', [3]);this.targetTensor=graph.placeholder('输出分类器', [2]);letconnectedLayer=this.createConnectedLayer(graph, this.inputTensor, 0, 64);connectedLayer=this.createConnectedLayer （图，connectedLayer，1，32）;connectedLayer=this.createConnectedLayer（图，connectedLayer，2，16）;this.predictionTensor=this.createConnectedLayer（图，connectedLayer，3，2）;this.costTensor=graph.meanSquaredCost（ this.targetTensor, this.predictionTensor);this.session=new Session(graph, math);this.prepareTrainingSet(trainingSet);}prepareTrainingSet(trainingSet) {.}.}导出默认ColorAccessibilityModel;

然而，在准备神经网络的训练集之前，设置尚未完成。

首先，可以使用回调函数来支持GPU数学计算环境中的计算，但这不是强制性的，可以是可选的。

从'deeplearn' 导入{Graph,Session,NDArrayMathGPU,};const math=new NDArrayMathGPU();class ColorAccessibilityModel {session;inputTensor;targetTensor;predictionTensor;costTensor;prepareTrainingSet(trainingSet) {math.scope(()=

以上知识分享希望能够帮助到大家！