手把手 | 30行JavaScript代码,教你分分钟创建神经网络

自己搭建神经网络太复杂?

别怕!

今天我们将手把手教你如何用30行代码轻松创建一个神经网络。

在本篇文章中,你将学到

如何使用Synaptic.js(https://synaptic.juancazala.com/#/ )创建和训练神经网络。

利用这款工具,我们可以在浏览器中用Node.js进行深度学习。

今天我们要讲的例子是一个非常简单的神经网络,我们将用它来学习逻辑异或方程(XOR equation)。

同时,我也在Scrimba上创建了一个交互式屏幕录像。你也可以通过观看视频来学习本教程。(https://scrimba.com/casts/cast-1980

在开始编程之前,让我们先快速浏览神经网络的一些基本概念。

神经元和突触

神经网络的第一个模块,是神经元。

神经元类似一个函数,你输入一些值,它就会输出返回值。

神经元有各种不同的类型。我们的神经网络将用到sigmoid神经元(https://en.wikipedia.org/wiki/Sigmoid_function ),将任何输入的给定值,压缩到0到1之间。

下图中的圆圈就代表一个sigmoid神经元。它的输入值是5,输出值是1。箭头则代表的是神经元的突触,用来连接神经网络中其它层的神经元。

为什么会有一个红色的数字5呢?它是连接到神经元的三个突触(左边3个箭头)的值之和。

在最左边,我们看到有两个值与所谓的偏差值进行了加法运算。数值1和0是绿色的,而偏差值-2是棕色的。

首先,两个输入值与他们的权重分别相乘,权重就是蓝色数字7和3。

然后,我们把他们和偏差值加起来,所得的结果是5,对应红色数字。这个红色数字就是我们人工神经元的输入值。

由于我们的神经元是sigmoid神经元,它会将任何值压缩到0到1的区间范围内,所以输出值被压缩到1。

如果将这些神经元的网络连接起来,就形成了一个神经网络。通过神经元间的突触连接,从输入到输出进行正向传播。如下图所示:

神经网络的目标是训练其泛化能力,例如识别手写的数字或者垃圾邮件。做到好的泛化重要的是通过神经网络找到合适的权重和偏差值。如上述例子中的蓝色和棕色数字。

当训练神经网络时,我们只需要加载大量示例数据,如手写的数字,然后让神经网络来预测正确的数字。

在每次预测后,你需要计算预测的偏差程度,然后调整权重和偏差值使得神经网络在下一次运算中可以预测的更加准确。这种学习过程被称为反向传播。如此重复上千次,你的神经网络很快会精于泛化。

本教程不包括反向传播的工作原理介绍,但是我找到了3个好的教程帮助大家理解:

分步介绍反向传播案例(https://mattmazur.com/2015/03/17/a-step-by-step-backpropagation-example/) – 作者:Matt Mazur

神经网路骇客指南(http://karpathy.github.io/neuralnets/) – 作者:Andrej Karpathy

神经网络和深度学习(http://neuralnetworksanddeeplearning.com/chap1.html) – 作者:Michael Nielsen

用代码搭建神经网络

现在,你应该已经对神经网络有了基础概念,那就让我们进入代码部分吧。

1.创建神经网络层

在synaptic中我们使用new layer()函数来创建。函数中传递的数字表示的是每一层会有多少个神经元。

接下来我们将这些层进行连接并实例化一个神经网络,代码如下,

这是一个2-3-1结构的神经网络,可视化表示如下:

2.训练神经网络

我们共进行了20,000次的训练,每一次都进行四次正向传播和反向传播运算,分别传递四个可能的输入到神经网络:[0,0] [0,1] [1,0] [1,1] 。
我们从myNetwork.activate([0,0])激活函数开始,[0,0]是神经网络的输入值,这个过程是正向传播,也被称为激活网络。在每一次正向传播后我们需要做一次反向传播,从而更新神经网络的权重和偏差值。

反向传播通过下面这行代码实现

myNetwork.propagate(learningRate, [0])

learningRate是一个常数,用来告诉神经网络每次应该对权重值进行多大程度的调整。第二个参数0表示的是当输入为[0,0]时,正确的输出参数是0.

然后,神经网络将预测值和真实值进行对比,来判断预测是否正确。

它将比较的结果作为调整权重和偏差值的基础,以便下次的预测可以更加准确。

在执行这个过程20,000次后,我们可以通过传递四个可能的输入到激活网络,从而判断目前神经网络的预测情况:

如果我们将这些值四舍五入到最近的整数,就将得到异或方程的正确结果。万岁!

以上就是教程的全部内容了。

虽然我们只了解了神经网络的皮毛,但这已经足够支持你开始使用Synaptic,并继续学习。另外,Synaptic的wiki中有很多好的教程,你可以点击以下链接浏览(https://github.com/cazala/synaptic/wiki )。

最后,当你学了新知识的时候,一定要去进行分享,比如创建一个Scrimba(https://scrimba.com/ )的屏幕录像或者写一篇文章!

来源:https://medium.freecodecamp.org/how-to-create-a-neural-network-in-javascript-in-only-30-lines-of-code-343dafc50d49

时间: 2024-09-15 21:55:25

手把手 | 30行JavaScript代码,教你分分钟创建神经网络的相关文章

30行JavaScript代码,教你分分钟创建神经网络

自己搭建神经网络太复杂? 别怕! 今天我们将手把手教你如何用30行代码轻松创建一个神经网络. 在本篇文章中,你将学到: 如何使用Synaptic.js(https://synaptic.juancazala.com/#/)创建和训练神经网络. 利用这款工具,我们可以在浏览器中用Node.js进行深度学习. 今天我们要讲的例子是一个非常简单的神经网络,我们将用它来学习逻辑异或方程(XOR equation). 同时,我也在Scrimba上创建了一个交互式屏幕录像.你也可以通过观看视频来学习本教程.

不到30行JS代码实现Excel表格的方法_javascript技巧

本文实例讲述了不到30行JS代码实现Excel表格的方法,可见jQuery并非不可替代.分享给大家供大家参考.具体分析如下: 某国外程序员展示了一个由原生JS写成不依赖第三方库的,Excel表格应用,有以下特性: ① 由不足30行的原生JavaScript代码实现 ② 不依赖第三方库 ③ Excel风格的语义分析 (公式以 "=" 开头) ④ 支持任意表达式 (=A1+B2*C3) ⑤ 防止循环引用 ⑥ 基于localStorage的自动本地持久化存储 效果展示如下图所示: 代码分析:

9行javascript代码获取QQ群成员具体实现_javascript技巧

昨天看到一条微博:「22 行 JavaScript 代码实现 QQ 群成员提取器」. 本着好奇心点击进去,发现没有达到效果,一是 QQ 版本升级了,二是博客里面的代码也有些繁琐. 于是自己试着写了一个,算上空行才 9 行,麻雀虽小,五脏俱全. 复制代码 代码如下: var ids = document.querySelectorAll(".member_id"); var names = document.querySelectorAll(".member_name"

只有20行Javascript代码!手把手教你写一个页面模板引擎

AbsurdJS 作者写的一篇教程,一步步教你怎样用 Javascript 实现一个纯客户端的模板引擎.整个引擎实现只有不到 20 行代码.如果你能从头看到尾的话,还能有不少收获的.你甚至可以跟随大牛的脚步也自己动手写一个引擎.以下是全文. 不知道你有木有听说过一个基于Javascript的Web页面预处理器,叫做AbsurdJS.我是它的作者,目前我还在不断地完善它.最初我只是打算写一个CSS的预处理器,不过后来扩展到了CSS和HTML,可以用来把Javascript代码转成CSS和HTML代

仅利用30行Python代码来展示X算法_python

假如你对数独解法感兴趣,你可能听说过精确覆盖问题.给定全集 X 和 X 的子集的集合 Y ,存在一个 Y 的子集 Y*,使得 Y* 构成 X 的一种分割. 这儿有个Python写的例子.   X = {1, 2, 3, 4, 5, 6, 7} Y = { 'A': [1, 4, 7], 'B': [1, 4], 'C': [4, 5, 7], 'D': [3, 5, 6], 'E': [2, 3, 6, 7], 'F': [2, 7]} 这个例子的唯一解是['B', 'D', 'F']. 精确覆

30行代码,带你分分钟创建神经网络!(附工具&教程)

本文含大量代码,如需原文请从文末来源链接获取. 自己搭建神经网络太复杂? 使用Synaptic.js(https://synaptic.juancazala.com/#/ )创建和训练神经网络. 利用这款工具,我们可以在浏览器中用Node.js进行深度学习. 今天我们要讲的例子是一个非常简单的神经网络,我们将用它来学习逻辑异或方程(XOR equation). 同时,我也在Scrimba上创建了一个交互式屏幕录像.你也可以通过观看视频来学习本教程.(https://scrimba.com/cas

12行javascript代码绘制一个八卦图_javascript技巧

一句话说明:用有限的代码构建一个1024*1024的颜色矩阵,秀出你的编程&艺术之美 起源于 stackexchange 上的一个问题, 这里稍微做了一下扩展,支持更多编程语言,并放宽了代码长度的限制. 规则 目标: 通过实现 模版 中的一个函数 get_color_at(x, y) ,在一个 1024*1024 的画布上画出尽可能 "有意思" 的图案. 参数: int x, int y ,取值均为 0 - 1023,对应画布上坐标点,左上角为起始点 (0,0) 返回: int

12行javascript代码绘制一个八卦图

 一句话说明:用有限的代码构建一个1024*1024的颜色矩阵,秀出你的编程&艺术之美 起源于 stackexchange 上的一个问题, 这里稍微做了一下扩展,支持更多编程语言,并放宽了代码长度的限制. 规则 目标: 通过实现 模版 中的一个函数 get_color_at(x, y) ,在一个 1024*1024 的画布上画出尽可能 "有意思" 的图案. 参数: int x, int y ,取值均为 0 - 1023,对应画布上坐标点,左上角为起始点 (0,0) 返回: in

18 行 JS 代码编一个倒时器

有时候在生活中,你需要一个JavaScript倒计时时钟,而不是一个末日装置设备.不管你是否有一次约会,销售.促销.或者游戏,你可以受益于使用原生JavaScript构建一个时钟,而不是拿到一个现成的插件.虽然有许多很棒的时钟插件,但如果使用原生 JavaScript 实现,那你将得到以下好处: 代码将是轻量级的,因为它没有依赖关系. 你的网站会表现得更好,因为你不需要加载外部脚本和样式表. 你将会有更高的可控性,因为你将按照想要的时钟行为的方式来创建它(而不是找一个趋向你想法的插件). 所以事