Logo

菜单

发布于 2026-01-06 7 阅读
0

Brain.js DEV 全球展示挑战赛（由 Mux 呈现）——深度学习入门：展示你的项目！

Brain.js 深度学习入门

由 Mux 主办的 DEV 全球展示挑战赛：展示你的项目！

作者：Obinna Ekwuno ✏️

使用Brain.js构建神经网络是一种绝佳的方式。它能够学习输入和输出之间的模式和关系，从而在处理相关问题时做出较为准确的判断。Cloudinary的图像识别插件系统就是一个神经网络的例子。

用于神经网络的 JavaScript？这是什么意思？我第一次阅读 Brain.js 的文档时也感到很震惊，不过，我真的非常兴奋。

太长不看

本文将探讨神经网络工作原理的一些方面。我们将学习前向传播和反向传播等术语，以及机器学习领域常用的其他一些术语。然后，我们将利用 Brain.js 的强大功能，使用神经网络构建一个日常会议安排应用程序。

先决条件

在深入探讨之前，本文需做出以下假设：

LogRocket 免费试用横幅

什么是神经网络？

人工神经网络本质上是生物神经网络工作机制的复制品，它具备学习能力。这类系统通过学习示例来“学习”执行任务，通常无需预先编写特定任务的规则。

这是什么意思？

人类学习的基本原理是通过匹配模式和像素来推断像素组合在一起所代表的视觉含义。这种方法称为多层感知器，它执行梯度下降。其工作原理是：通过神经网络链上的不同节点组合模式，最终将像素匹配到边缘，边缘匹配到模式，模式匹配到图形，从而得出最终结果。要更深入地理解这个概念，请查看此教程。

Brain.js 是什么？

根据官方文件：

Brain.js 是一个基于 JavaScript 的 GPU 加速神经网络库，支持浏览器和 Node.js 平台。它简单、快速且易于使用。该库提供了多种神经网络实现，不同的神经网络可以训练用于不同的任务。

我觉得这真的很棒，尤其因为大多数机器学习资料都主要围绕 Python 展开，这使得来自 Web 开发背景的开发者学习起来有些吃力。Brain.JS 正好解决了这个问题。

Brain.js 并非第一个专注于 JavaScript 的机器学习库。然而，我个人推荐它，因为它使用 JSON 对象，这使得开发者无需创建张量和进行内存管理。

入门

在使用 Node.js 应用程序时，您可以使用以下方法将 Brain.js 安装到您的项目中，我们将在本节中介绍这些方法。

虽然根据文档，在项目中处理库时，NPM 通常是首选：

Brain.js 依赖于一个原生模块headless-gl来实现 GPU 支持。大多数情况下，从 npm 安装 Brain.js 应该就能正常工作。但是，如果遇到问题，则意味着无法从 GitHub 仓库下载预编译的二进制文件，您可能需要自行构建。

1) 使用 NPM 安装

如果你能用npm安装 brain.js ：

npm install brain.js
Enter fullscreen mode Exit fullscreen mode

请确保已安装并更新以下依赖项，然后运行：

npm rebuild
Enter fullscreen mode Exit fullscreen mode

目前，我们将使用 brain.js 和CDN 实现。

2) 通过 CDN 提供服务

<script src="//unpkg.com/brain.js"></script>
Enter fullscreen mode Exit fullscreen mode

构建一个基本的异或门

不过，这并非本文的重点。我更想用这个例子来解释前向传播和反向传播，同时介绍构成 Brain.js 的一些组件。我们可以像搭建普通应用程序一样搭建项目。

异或门是一种逻辑门，0当两个输入值相同时输出“是”，1当两个输入值不同时输出“否”。我们将按以下步骤实现它。

我们通过CDNindex.html导入 Brain.js 库，如下所示：

<html>
  <head>
    <script src="//unpkg.com/brain.js"></script>
    <script src = " index.js"> </script>
  </head>
</html>
Enter fullscreen mode Exit fullscreen mode

然后我们继续index.js实现逻辑：

const net = new.brain.NeuralNetwork({hiddenLayers :[3]});
Const _Data = [
    {input : [0,0], output: [0]},
    {input : [0,1], output: [1]},
    {input : [1,0], output: [1]},
    {input : [1,1], output: [0]}
];
net.train(_Data);
console.log(net.run([0,0]));
console.log(net.run([0,1]));
console.log(net.run([1,0]));
console.log(net.run([0,0]));
Enter fullscreen mode Exit fullscreen mode

从上面的代码块可以看出，我们在本文件的第一行创建了 Brain.js 的一个实例，以便能够使用它。我们还可以注意到一个.train用于训练系统的对象。

注意，这些hiddenLayers设置已启用3。回想一下，我之前提到过，有些图层会将像素匹配成边缘，然后将边缘匹配成图案，最后将图案匹配成图形，这是由隐藏图层完成的。

注意：使用此方法train()可获取训练数据数组来训练网络。必须一次性调用此方法，用所有数据批量训练网络train()。训练样本越多，训练时间可能越长，但通常会使网络更擅长对新样本进行分类。

从控制台结果中我们可以看到，输出结果并非完全是 10和 2。1但这并不意味着机器出错。它会给出一个最接近 10或 2的值1。我们可以看到以下输出：

[0.038714755326509476]
[0.9301425814628601]
[0.9356828331947327]
[0.970003753900528]
Enter fullscreen mode Exit fullscreen mode

现在让我们来看看它是如何做出这些假设的。

前向传播和反向传播

在前面的代码示例中，我们注意到该.train方法接收参数_Data，它在这里处理前向传播和反向传播，以便对输出应该是什么做出一些有根据的猜测。

解释这个概念的一个非常常见的方法是使用球和球门的问题。假设一个足球运动员正在练习任意球，他需要计算出球需要飞多远，以及踢球时需要投入多少能量等等。基本上，他预测了球需要飞多远以及需要投入多少能量，这被称为前向传播。

当我们尝试测量从传播源（球）到传播源（球员）的距离时，这被称为反向传播。如果球员反复练习踢球，他们就会收集更多关于距离和所需能量的数据点。这个过程会不断重复，直到我们达到目标。

在.train方法阶段发生的前向和后向传播过程之后，该.run方法接收输入的实际值，并根据它已经训练的数据给出输出。

神经网络不再需要测量与目标的距离，因为它现在拥有执行判断所需的实际数据（神经网络已经过训练）。它现在可以给出准确的数值。这有点像足球运动员练习任意球。

注意：该程序的实际结构使用了一堆随机数（math.random），这些随机数通过激活函数（sigmoid 或 relu）。

示例：创建会议日程

现在，凭借从上一个例子中获得的知识，我们可以尝试创造一些有趣的东西。我每周都有很多会议，很难记住所有的事情。所以我可以创建一个神经网络来帮忙。

这里我列出了一些待办事项及其目的。我的目标很简单，就是询问神经网络在星期几应该做什么。

const meetings = {
"Stand-up with PM" : "Monday",
"Gym with frank" : "Tuesday",
"Check in with mentees" : "Wednesday"
"Take dogs for a walk" : "Thursday"
"Get drinks with RICO": "Friday"
"Call mom": ""
}
Enter fullscreen mode Exit fullscreen mode

注意：我的训练数据输入是星期几，输出是任务。

如何构建训练数据

同时，index.js我们将实现几行代码，以便能够训练网络。

Const _Data = [];
for(let taskName in meetings ){
  const dayOfWeek = meetings[tasks];
  _Data.push({
    input:{[dayOfWeek] : 1},
    input:{[taskName] : 1},
  });
}
Enter fullscreen mode Exit fullscreen mode

上述代码块遍历会议对象，并将该值添加到训练数据中_Data，以便稍后用于训练网络。它_Data接收一个输入，即星期几，其值被赋值为 1。1这意味着，每当选择一周中的某一天时，该值都会自动为 1，而所有其他值都会被设置为 0，0因为在 Brain.js 中，所有未定义的值都会被设置为 00并作为任务输出。

如何定义神经网络和训练

正如我们之前看到的，我们只需要创建一个新的 Brain.js 实例，如下所示：

const net = new brain.NeuralNetwork({hiddenLayers: [3]});
const stats = net.train(_Data)
console.log(net.run({'Monday': 1}));
Enter fullscreen mode Exit fullscreen mode

上面的代码显示的是每一天发生的概率，所以它会返回一个包含所有日期及其概率的列表。但是，我想要的只是某一天。因此，我们创建一个函数：

function SpecificDay(dayOfWeek){
  const result = net.run({[dayOfWeek] : 1});
  let highestvalue = 0;
  let highestTaskName = '';
  for(let taskName in result){
    if (result[taskName] > highestvalue){
      highestvalue = result[taskName];
      highestTaskName = taskName;
    }
  }
    return highestTaskName ;
}
Enter fullscreen mode Exit fullscreen mode

上面的代码（也可以在codepen上找到）获取神经网络的预测结果，遍历这些结果，然后保存最大值并返回它。

所以如果我们运行以下命令来记录这个信息：

Console.log(SpecificDay("Wednesday"))
Enter fullscreen mode Exit fullscreen mode

我们收到的回复是“与受指导者联系”。

结论

在本文中，我们探讨了机器学习领域常用的一些概念，并重点介绍了 Brain.js 如何运用这些概念。在撰写本文的过程中，我感到非常兴奋，也真心希望能够用 Brain.js 开发更多项目。祝大家编码愉快！😄

编者按：发现本文有误？您可以在这里找到正确版本。

插件：LogRocket，一款用于 Web 应用的 DVR

 
LogRocket 控制面板免费试用横幅
 
LogRocket是一款前端日志工具，可让您重现问题，如同在您自己的浏览器中发生一样。无需猜测错误原因，也无需用户提供屏幕截图和日志转储，LogRocket 即可让您重现会话，快速了解问题所在。它与任何框架的应用程序完美兼容，并提供插件来记录来自 Redux、Vuex 和 @ngrx/store 的额外上下文信息。
 
除了记录 Redux 操作和状态之外，LogRocket 还会记录控制台日志、JavaScript 错误、堆栈跟踪、包含标头和正文的网络请求/响应、浏览器元数据以及自定义日志。它还会对 DOM 进行插桩，记录页面上的 HTML 和 CSS，即使是最复杂的单页应用程序，也能生成像素级精确的视频。
 
免费试用。

这篇文章《使用 Brain.js 进行深度学习入门》最初发表于LogRocket 博客。

文章来源：https://dev.to/bnevilleoneill/an-introduction-to-deep-learning-with-brain-js-136b
你最喜欢的JS面试题是什么？DEV...
我如何重写我的作品集网站 DEV ...