首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >专栏 >前端AI实战——告诉世界前端也能做AI

前端AI实战——告诉世界前端也能做AI

作者头像
IMWeb前端团队
发布于 2019-12-03 10:00:00
发布于 2019-12-03 10:00:00
86200
代码可运行
举报
文章被收录于专栏:IMWeb前端团队IMWeb前端团队
运行总次数:0
代码可运行

本文作者:IMWeb jerryOnlyZRJ 原文出处:IMWeb社区 未经同意,禁止转载

我想大多数人和我一样,第一次听见“人工智能”这个词的时候都会觉得是一个很高大上、遥不可及的概念,特别像我这样一个平凡的前端,和大部分人一样,都觉得人工智能其实离我们很遥远,我们对它的印象总是停留在各种各样神奇而又复杂的算法,这些仿佛都是那些技术专家或者海归博士才有能力去做的工作。我也曾一度以为自己和这个行业没有太多缘分,但自从Tensorflow发布了JS版本之后,这一领域又引起了我的注意。在python垄断的时代,发布JS工具库不就是意味着我们前端工程师也可以参与其中?

当我决定开始投身这片领域做一些自己感兴趣的事情的时候,却发现身边的人投来的都是鄙夷的目光,他们对前端的印象,还总是停留在上个年代那些只会写写页面脚本的切图仔,只有身处这片领域的我们才知道大前端时代早已发生了翻天覆地的变革。

今天,我就带领大家从原理开始,尽可能用最通俗易懂的方式,让JS的爱好者们快速上手人工智能。

具体项目可参照:https://github.com/jerryOnlyZRJ/image-regression

本文就单拿人工智能下的一块小领域——“图像识别”作一些简单介绍和实战指引,当然这些都只是这片大领域下的冰山一角,还有很多很多知识等着你去发掘。

1.CNN卷积神经网络原理剖析

如果我不讲解这部分内容,而是直接教你们怎么使用一个现成的库,那这篇文章就没什么价值了,看完之后给你们留下的也一定都会是“开局一张图,过程全靠编”的错觉。因此,要真正了解人工智能,就应该进入这个黑盒,里面的思想才是精华。

1.1.图像灰度级与灰度图

1.1.1.基本概念

要做图像识别,我们肯定要先从图像下手,大家先理解一个概念——图像灰度级。

众所周知,我们的图片都是由许多像素点组成的,就好像一张100*100像素的图片,就表示它是由10000个像素点呈现的。但你可曾想过,这些像素点可以由一系列的数字表示嘛?

就先不拿彩色的图片吧,彩色太复杂了,我们就先拿一张黑白的图片为例,假设我们以黑色像素的深浅为基准,将白色到黑色的渐变过程分为不同的等级,这样,图片上每一个像素点都能用一个最为临近的等级数字表示出来:

如果我们用1表示白色,用0表示黑色,将图像二值化,最后以矢量(数字)的形式呈现出来,结果大概就是这样:(下图是一张5*5的二值化图像,没有具体表示含义,只作示例)

同理,如果是彩色的图像,那我们是不是可以把R、G、B三个维度的像素单独提取出来分别处理呢?这样,每一个维度不就可以单独视为一张灰度图。

1.1.2.平滑图像与特征点

如果一张图像没有什么像素突变,比如一张全白的图片,如果以数字表示,自然都是0,那我们可以称这张图片的像素点是平滑的。再比如这张全白的图片上有一个黑点,自然,灰度图上就会有一个突兀的数值,我们就把它称作特征点,通常来说,图像的特征点有可能是噪声、边缘或者图片的实际特征。

1.2.神经网络与模型训练

tensorflow在发布了JS版本的工具库后,也同时制作了一个Tensorflow游乐场,打开之后,引入眼帘的网页中央这个东西便是神经网络:

从图中,我们可以看到神经网络有很多不同的层级,就是图中的Layers,每一层都是前一层经过滤波器计算后的结果,越多的层级以及越多的“神经元”经过一次计算过程计算出来的结果误差越小,同时,计算的时间也会增加。神经网络正是模仿了我们人类脑袋里的神经元经过了一系列计算然后学习事物的过程。这里推荐阮一峰的《神经网络入门》这篇文章,能够帮助大家更加浅显地了解神经网络是什么。

在我们的卷积神经网络中,这些层级都有不同的名字:输入层、卷积层、池化层以及输出层。

  • 输入层:我们输入的矢量化之后的图像
  • 卷积层:经过滤波器卷积计算之后的图像
  • 池化层:经过池化滤波器卷积计算之后的图像
  • 输出层:输出数据

Features就是我们的算子,也称为滤波器,但是每种不同的滤波器对最后的输出结果都会有不同的影响,进过训练之后,机器会通过我们赋予的算法(比如激活函数等等)计算出哪些滤波器会对输出结果造成较大的误差,哪些滤波器对输出结果压根没有影响(原理很简单,第一次计算使用所有滤波器,第二次计算拿掉某一个滤波器,然后观察误差值(Training loss)就可以知道这个被拿掉的滤波器所起到的作用了),机器会为比较重要的滤波器赋予较高的权重,我们将这样一个过程称为“训练”。最终,我们将得到的整个带有权重的神经网络称为我们通过机器训练出的“模型”,我们可以拿着这个模型去让机器学习事物。

这就是机器学习中“训练模型”的过程,Tensorflow.js就是为我们提供的训练模型的工具库,当你真正掌握了模型训练的奥义之后,Tensorflow对你而言就像JQuery用起来一般简单。

大家看完这些介绍之后肯定还是一脸茫然,什么是滤波器?什么又是卷积计算?不着急,下一个版块的内容将会为大家揭开所有谜题。

1.3.卷积算法揭秘

1.3.1.卷积算法

还记得我们在1.1.1里说到一张图片可以用矢量的形式表示每个像素点嘛?卷积计算就是在这基础上,使用某些算子对这些像素点进行处理,而这些算子,就是我们刚刚提到的滤波器(比如左边,就是一张经过二值化处理的5*5的图片,中间的就是我们的滤波器):

那计算的过程又是怎样的呢?卷积这东西听起来感觉很复杂,但实际上就是把我们的滤波器套到图像上,乘积求和,然后将图像上位于滤波器中心的值用计算结果替换,大概的效果就是下面这张动图这样:

对,所谓高大上的卷积就是这样一个过程,我们的滤波器每次计算之后就向右移动一个像素,所以我们可以称滤波器的步长为1,以此类推。不过我们发现,经过滤波器处理后的图像,好像“变小了”!原来是5*5的图片这下变成了3*3,这是卷积运算带来的必然副作用,如果不想让图片变小,我们可以为原图像加上一定像素且值均为0的边界(padding)去抵消副作用,就像下面这样:

1.3.2.池化算法

其实在平时训练模型的过程中,我们输入的图像肯定不只有5*5像素这么小,我们最经常见到的图片许多都是100*100像素以上的,这样使用我们的机器去计算起来肯定是比较复杂的,因此,我们常常会使用池化算法进行特征提取或者图像平滑处理,池化的过程其实就是按照某种规律将图片等比缩小,过程就像下面这样:

而池化算法最常用的有两大类:取均值算法和取最大值算法,顾名思义,取均值算法就是取滤波器中的平均值作为结果,取最大值算法就是取滤波器中的最大值作为输出结果:

上图就是取最大值算法的处理过程,大家也能很直观的看出,在池化层中,滤波器的步长大都是等于滤波器自身大小的(比较方便控制缩放比例)。并且,取最大值算法肯定是很容易取到滤波器中的特征点(还记得特征点嘛?忘记的话快回去1.1.2看看哦~),所以我们可以讲取最大值算法的池化处理称为特征提取;同理,取均值算法因为把所有的像素点的灰度级都平均了,所以我们可以称之为平滑处理。

关于卷积神经网络的知识,可以具体参照这篇文章:《卷积神经网络(1)卷积层和池化层学习》。了解了这些知识之后,就可以开始我们的实战啦~

2.图像识别实战

说了那么多理论,也不比实操来得有感觉。在大家了解了卷积神经网络的基本原理之后,就可以使用我们的工具库来帮助我们完成相关工作,这里我推荐ConvNetJS。这款工具库的本质就是我们在1.2中提到的别人训练好的模型,我们只需要拿来“学习”即可。

2.1.使用ConvNetJS

我们可以看到在ConvNetJS的README里有这样一段官方demo,具体的含义我已经用注释在代码里标注:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
// 定义一个神经网络
var layer_defs = [];
// 输入层:即是32*32*3的图像
layer_defs.push({type:'input', out_sx:32, out_sy:32, out_depth:3}); 
// 卷积层 
// filter:用16个5*5的滤波器去卷积
// stride:卷积步长为1
// padding:填充宽度为2(为保证输出的图像大小不会发生变化)
// activation:激活函数为relu(还有Tanh、Sigmoid等等函数,功能不同)
layer_defs.push({type:'conv', sx:5, filters:16, stride:1, pad:2, activation:'relu'});
// 池化层
// 池化滤波器的大小为2*2
// stride:步长为2
// 在这里我们无法看出这个框架池化是使用的Avy Pooling还是Max Pooling算法,先视为后者
layer_defs.push({type:'pool', sx:2, stride:2});
// 反复卷积和池化减小模型误差
layer_defs.push({type:'conv', sx:5, filters:20, stride:1, pad:2, activation:'relu'});
layer_defs.push({type:'pool', sx:2, stride:2});
layer_defs.push({type:'conv', sx:5, filters:20, stride:1, pad:2, activation:'relu'});
layer_defs.push({type:'pool', sx:2, stride:2});
// 输出层
// 分类器:输出10中不同的类别
layer_defs.push({type:'softmax', num_classes:10});

// 实例化一个神经网络
net = new convnetjs.Net();
net.makeLayers(layer_defs);

// 模型训练
const trainer = new convnetjs.SGDTrainer(net, { learning_rate: 0.01, momentum: 0.9, batch_size: 5, l2_decay: 0.0 });
trainer.train(imgVol, classIndex);

// 使用训练好的模型进行图像识别
var x = convnetjs.img_to_vol(document.getElementById('some_image'))
var output_probabilities_vol = net.forward(x)

如果想要更形象点,上述过程可以用这样一幅图表示:

中间的“卷积-池化-卷积-池化……“就是我们定义并训练的神经网络,我们输入矢量化处理后的图像后,先进行卷积运算,不同的滤波器得到了不同的结果,官方demo里是使用了16个不同的滤波器(PS:这里给大家留一个思考的问题,一个3*3的二值化滤波器,能写出多少种可能?),自然能卷积出16种不同的结果,再拿着这些结果池化处理,不断重复这个过程,最终得出图像识别结果:

2.2.实战项目解析

来,我们一起详细梳理一下使用ConvNetJS这个工具库完成整个图像识别的具体流程,

(PS:项目代码具体参照:https://github.com/jerryOnlyZRJ/image-regression

首先,我们必须先有数据供我们的模型去学习,至少你该让这个模型知道啥是啥对吧,在项目里的 net 文件夹里的 car.js 文件,存放的就是我们的学习数据,如果你们感兴趣可以打开看看,里面的数据就是告诉机器什么样的车标对应的是车的什么品牌。

在我们的项目里,是通过这样一段代码完成机器学习的:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
const trainer = new convnetjs.SGDTrainer(net, { learning_rate: 0.01, momentum: 0.9, batch_size: 5, l2_decay: 0.0 });
let imageList = [];
const loadData = i => {
    return function () {
        return new Promise(function (resolve, reject) {
            let image = new Image();
            image.crossOrigin = "anonymous";
             image.src = carList[i].url;
            image.onload = function () {
                let vol = convnetjs.img_to_vol(image);
                // 逐张训练图片
                trainer.train(vol, i);
                    resolve();
            };
                 image.onerror = reject;
        })
    }
}
// 遍历图片资源
for (let j = 0; j < carList.length; j++) {
    imageList.push(loadData(j));
}
var testBtn = document.getElementById("test")
function training(){
    testBtn.disabled = true
    return new Promise((resolve, reject) => {
        Promise.all(imageList.map(imageContainer => imageContainer())).then(() => {
            console.log("模型训练好了!!!?")
            testBtn.disabled = false
            resolve()
        })
    })
}

我们试着去打印一下图像识别的输出结果,得到的是这样一个东西:

从识别结果中我们可以看到,我们得到的是一个数组,这就是经过分类器分类的10个不同类别,对应的自然是我们的车的品牌,值就是每个类别对应的概率。所以,我们只要拿到概率的最大值,就是预测得出的最倾向的结果。

3.结语

随着JS引擎的计算能力不断增强,人工智能领域的不断发展,可以预见的是,在不久的将来,肯定能有一些简单的算法可以被移植到用户前端执行,这样既能减少请求,又能分担后端压力。这一切并不是无稽之谈,为什么tensorflow.js会应运而生,正是因为JS的社区在不断壮大,JS这款便捷的语言也在得到更为普遍的使用。所以,请对你所从事的这份前端事业,有足够的信心!

还是那句老话:

技术从来不会受限于语言,受限你的,永远只是思想。

我并不是什么算法工程师,我也不是CS专业出来的科班生,我只是一枚普普通通的前端,和绝大多数人一样,没有多深厚的基础,但我愿意去学,我享受克服困难的过程,而那份对人工智能的执着,只是来源于那份不满足于现状的倔性和对这片领域一成不变的初心。

如果您觉得这篇文章对您有帮助,还请麻烦您为文章提供的示例demo项目点个star;如果您对我的其他项目感兴趣,也欢迎follow哦~

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2018-10-08 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
暂无评论
推荐阅读
编辑精选文章
换一批
前端AI实战——告诉世界前端也能做AI
我想大多数人和我一样,第一次听见“人工智能”这个词的时候都会觉得是一个很高大上、遥不可及的概念,特别像我这样一个平凡的前端,和大部分人一样,都觉得人工智能其实离我们很遥远,我们对它的印象总是停留在各种各样神奇而又复杂的算法,这些仿佛都是那些技术专家或者海归博士才有能力去做的工作。我也曾一度以为自己和这个行业没有太多缘分,但自从Tensorflow发布了JS版本之后,这一领域又引起了我的注意。在python垄断的时代,发布JS工具库不就是意味着我们前端工程师也可以参与其中?
疯狂的技术宅
2019/03/27
9241
前端AI实战——告诉世界前端也能做AI
卷积:如何成为一个很厉害的神经网络
卷积神经网络(Convolutional Neural Networks, ConvNets or CNNs)是一种在图像识别与分类领域被证明特别有效的神经网络。卷积网络已经成功地识别人脸、物体、交通标志,应用在机器人和无人车等载具。
机器学习AI算法工程
2019/10/28
6060
卷积:如何成为一个很厉害的神经网络
卷积神经网络(CNN)
        CNN,即卷积神经网络,主要用于图像识别,分类。这篇卷积神经网络是前面介绍的多层神经网络的进一步深入,它将深度学习的思想引入到了神经网络当中,通过卷积运算来由浅入深的提取图像的不同层次的特征,而利用神经网络的训练过程让整个网络自动调节卷积核的参数,从而无监督的产生了最适合的分类特征。
Flaneur
2020/03/25
13.5K0
CNN--卷积神经网络从R-CNN到Faster R-CNN的理解(CIFAR10分类代码)
上图中CNN要做的事情是:给定一张图片,是车还是马未知,是什么车也未知,现在需要模型判断这张图片里具体是一个什么东西,总之输出一个结果:如果是车 那是什么车。
mantch
2019/08/14
9610
基于卷积神经网络的图像识别
视觉是人类认识世界非常重要的一种知觉。对于人类来说,通过识别手写体数字、识别图片中的物体或者是找出4%图片中人脸的轮廓都是非常简单的任务。然而对于计算机而言,让计算机识别图片中的内容就不是一件容易的事情了。图像识别问题希望借助计算机程序来处理、分析和理解图片中的内容,使得计算机可以从图片中自动识别各种不同模式的目标和对象。图像识别作为人工智能的一个重要领域,在最近几年已经取得了很多突破性的进展,而神经网络就是这些突破性进展背后的主要技术支持。
狼啸风云
2019/03/05
8K0
卷积神经网络(CNN)
假设给定一张图(可能是字母X或者字母O),通过CNN即可识别出是X还是O,如下图所示
CristianoC
2020/05/31
9760
卷积神经网络(CNN)
深度学习教程 | 卷积神经网络解读
本系列为吴恩达老师《深度学习专项课程(Deep Learning Specialization)》学习与总结整理所得,对应的课程视频可以在这里查看。
ShowMeAI
2022/04/15
4990
深度学习教程 | 卷积神经网络解读
卷积神经网络的特点和应用
本文介绍了卷积神经网络在计算机视觉中的重要性,从浅层卷积神经网络开始,通过分析卷积神经网络的参数、卷积层、池化层、全连接层、ReLU层、案例研究和趋势等方面,深入探讨了卷积神经网络在计算机视觉中的具体应用和操作方法。
管蓉
2017/05/10
6.3K2
卷积神经网络的特点和应用
【深度学习系列】卷积神经网络CNN原理详解(一)——基本原理
本文介绍了CNN的基本原理、卷积神经网络、池化层、激活函数、正则化、损失函数、优化算法、训练技巧、网络结构选择、调参方法、以及总结了一些关于手写数字识别的常见问题和解决方案。
Charlotte77
2018/01/09
2.7K0
【深度学习系列】卷积神经网络CNN原理详解(一)——基本原理
神经网络体系搭建(三)——卷积神经网络
本篇是神经网络体系搭建的第三篇,解决体系搭建的卷积神经网络相关问题,详见神经网络体系搭建(序) 卷积神经网络(CNN) CNN是什么 卷积神经网络是一种空间上共享参数的神经网络。 为什么会有CNN 像
刘开心_1266679
2018/04/17
1.4K0
神经网络体系搭建(三)——卷积神经网络
深度学习大神都推荐入门必须读完这9篇论文
Introduction 卷积神经网络CNN,虽然它听起来就像是生物学、数学和计算机的奇怪混杂产物,但在近些年的机器视觉领域,它是最具影响力的创新结果。随着Alex Krizhevsky开始使用神经网络,将分类错误率由26%降到15%并赢得2012年度ImageNet竞赛(相当于机器视觉界的奥林匹克)时,它就开始声名大噪了。从那时起,一票公司开始在它们的核心服务中使用深度学习技术。例如Facebook用它进行自动的图像标签,google用它做照片检索,amazon用它做产品推荐,Pin
机器学习AI算法工程
2018/03/15
1.3K0
深度学习大神都推荐入门必须读完这9篇论文
Convolutional Neural Networks
计算机视觉(Computer Vision)包含很多不同类别的问题,如图片分类、目标检测、图片风格迁移等等。
小飞侠xp
2018/08/29
5160
【深度学习】卷积神经网络理解
卷积神经网络是深度学习中非常重要的一种神经网络模型,目前在图像识别、语音识别和目标检测等领域应用非常广泛。卷积神经网络(Convolutional Neural Network, CNN)是一种前馈神经网络,使用反向传播(Back Propagation,BP)算法进行训练。
嵌入式视觉
2022/09/05
1.4K0
【深度学习】卷积神经网络理解
CS231n笔记:通俗理解CNN
上图中CNN要做的事情是:给定一张图片,是车是马还是飞机未知,现在需要模型判断这张图片里具体是一个什么东西
mathor
2019/12/30
8040
CS231n笔记:通俗理解CNN
深度学习与CV教程(5) | 卷积神经网络
本系列为 斯坦福CS231n 《深度学习与计算机视觉(Deep Learning for Computer Vision)》的全套学习笔记,对应的课程视频可以在 这里 查看。更多资料获取方式见文末。
ShowMeAI
2022/05/30
7780
深度学习与CV教程(5) | 卷积神经网络
深度 | 语义分割网络DeepLab-v3的架构设计思想和TensorFlow实现
选自Medium 作者:Thalles Silva 机器之心编译 参与:Nurhachu Null、刘晓坤 深度卷积神经网络在各类计算机视觉应用中取得了显著的成功,语义分割也不例外。这篇文章介绍了语义分割的 TensorFlow 实现,并讨论了一篇和通用目标的语义分割最相关的论文——DeepLab-v3。DeepLab-v3 是由谷歌开发的语义分割网络,近日,谷歌还开源了该系列的最新版本——DeepLab-v3+。 GitHub 地址:https://github.com/sthalles/deeplab_
朱晓霞
2018/04/18
1.7K0
深度 | 语义分割网络DeepLab-v3的架构设计思想和TensorFlow实现
听六小桨讲AI | 第1期:卷积概念及计算
在全连接网络[1]中,一张图像上的所有像素点会被展开成一个1维向量输入网络,如图1所示,28 x 28的输入数据被展开成为784 x 1的数据作为输入。
用户1386409
2021/04/20
5630
听六小桨讲AI | 第1期:卷积概念及计算
AIoT应用创新大赛-基于TencentOS Tiny AIoT 手写数字识别
很荣幸这次能拿到AIoT应用创新大赛的初赛资格。 深度学习和机器学习在安防、金融、消费等各个方面有着广泛的应用。随着神经网络算法的发展,模型精度越来越高,但是模型尺寸却越来越大,算法运算量和内存占用使得ANN的算法不适合在嵌入式端进行部署,这严重影响了神经网络算法的应用。因此,本设计尝试使用C++语言进行Lenet-5架构的前向传播,并将其应用于MNIST手写数字识别,从而使得TencentOS Tiny AIoT开发板具有智能识别手写数字的功能。
用户9281026
2022/03/12
6980
AIoT应用创新大赛-基于TencentOS Tiny AIoT 手写数字识别
Python人工智能 | 十八.Keras搭建卷积神经网络及CNN原理详解
从本专栏开始,作者正式研究Python深度学习、神经网络及人工智能相关知识。前一篇文章详细讲解了Keras实现分类学习,以MNIST数字图片为例进行讲解。本篇文章详细讲解了卷积神经网络CNN原理,并通过Keras编写CNN实现了MNIST分类学习案例。基础性文章,希望对您有所帮助!
Eastmount
2022/11/25
1.7K0
吴恩达深度学习 course4 卷积神经网络
传统的神经网络所存在的问题:图片的输入维度比较大,具体如下图所示,这就造成了权重w的维度比较大,那么他所占用的内存也会比较大,计算w的计算量也会很大
Dar_Alpha
2018/09/03
7990
吴恩达深度学习 course4 卷积神经网络
推荐阅读
相关推荐
前端AI实战——告诉世界前端也能做AI
更多 >
LV.1
腾讯前端开发工程师
交个朋友
加入腾讯云官网粉丝站
蹲全网底价单品 享第一手活动信息
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档