小豌豆

01-15 16:57 阅读: 61 点赞: 2 评论: 2

2020前端智能化趋势:tensorflow.js生态

前端开发有哪些新的智能化趋势呢?今天重点整理tensorflow.js相关的内容。有非常多的基于tensorflow.js二次封装的js库,比如face-api.jsml5.js等等。

应用场景方面,发现图像方面的应用比较多,文本反而少,可能大家还不知道tensorflowjs有哪些文字场景吧。详细请往下翻看:

tensorflow.js

  • 前端AI基础库

TensorFlow.js 是一个 JavaScript 库,用于在浏览器和 Node.js 训练和部署机器学习模型。

l57wng2r68.jpeg

face-api.js

  • 人脸应用必备

Face-api.js是一个JavaScript API,是基于tensorflow.js核心API的人脸检测和人脸识别的浏览器实现。前端人脸识别相关的应用,推荐用face-api.js~

wskccrr7sa.gif

ml5.js

  • 创意编程必备

ml5.js旨在为创意编程提供开箱即用的机器学习算法。该库封装了常用的机器学习算法预训练模型,基于TensorFlow.js,可单独使用,也可搭配p5.js使用。

目前可以实现哪些功能?

图像

krpsdstaw8.jpeg

imageClassifier

用于识别图像内容,可用于图像与文字的匹配

poseNet

用于识别人体姿势的关键点,可用于动作识别

bodyPix、UNET

用于人体与背景分割,可用于自动抠图

styleTransfer

风格迁移,可用于图片艺术滤镜

pix2pix、CVAE、DCGAN

图像生成,可用于手绘图生成实景图、根据文本生成图像

SketchRNN

图像生成的另一种方式,可用于基于初始笔画生成图案

YOLO

物体检测,可用于追踪物体

声音

bg9zjdy8vb.jpeg

soundClassifier

音频分类,可用于语音控制

pitchDetection

音调检测,可用于说话人识别

文本

pe0m50102u.jpeg

CharRNN

文本生成,可用于输入法联想

Sentiment

情绪预测,可用于文本的情感判断

Word2vec

词转向量,可用于把文本转化为向量,在向量空间中进行计算

辅助功能

5or6qnx4lj.jpeg

featureExtractor

图像特征提取,可用于以图搜图、迁移学习

KNNClassifier

K-Nearest Neighbors算法创建分类器,可用于图像分类

17个功能建议一个个进行尝试,练习,掌握。

ml5.js的详细介绍可看: 3行代码玩转AI,ml5.js前端机器学习简明指南

magenta.js

  • 音乐创作工具

magenta.js是一个基于TensorFlow.js构建的,在浏览器中使用WebGL加速运行的,用于通过Magenta模型生成音乐和艺术的JS框架。包括MusicVAEMelodyRNNDrumsRNNImprovRNN

oxrj6aurnp.gif

不满足于代码库,最近,还推出了Magenta Studio (v1.0)一个音乐作曲工具软件包。

eiafv44199.jpeg

这会,音乐创作可以AI人机协作了~~

以上是相关的前端AI库~接下来再介绍一些相关的技术。

BodyPix

BodyPix是谷歌发布人体图像分割工具,可直接在浏览器中运行,仅需使用几行代码即可调用。BodyPix能将图像像素分割为属于人的和不属于人的部分,属于人的部分则可以进一步分类为24个身体部位之一。试验了下,BodyPix可以在15寸MacBook Pro上以25 fps的速度运行,渲染人和身体部位的分割,而在iPhone X上,BodyPix能以21 fps的速度运行,还不错。

除了tensorflow.js的封装,我们还可以使用mljs,更为简便的使用bodypix

MobileNet

Efficient Convolutional Neural Networks for Mobile Vision Applications

MobileNet是一个轻量化的神经网络模型,它极大地压缩模型文件大小,非常适合移动端使用。可以识别生活中常见的大部分物品。在前端的应用主要是搭配迁移学习,利用预训练好的MobileNet,为用户训练新的图像提供支持。

可以尝试下效果:

4cezg2m9y1.jpeg

除此之外,我们还可以,训练一个简单的分类器来对花朵图像进行分类;训练一个没有感情的“剪刀石头布”识别器;或者是用来训练一个方向控制器控制游戏里的角色。

比如谷歌的一个实验:

akd7xlt1as.jpeg

通过浏览器加载预训练的MobileNet模型,用户可以为上、下、左、右4个方向分别设置不同的类别,只需使用浏览器调用电脑的摄像头拍摄若干的照片,即可训练用户自己的模型。

Yolo

You Only Look Once: Unified, Real-Time Object Detection提出的方法,简称YOLO。使用tensorflow.js我们可以在浏览器用摄像头实现目标检测。比如我们可以识别以下图片里的物体:

kf8bpa8onj.jpeg

前端可以很容易的调用相关的tensorflow.js模型实现目标检测。目标检测可以用来干什么?

ql10okid0w.jpeg

比如你可以为你的浏览器加上防偷窥功能,自动识别除你以外的人(偷偷站在你背后的人),自动把网页隐藏,保护隐私。

PoseNet

用于实时估计人体的姿势,返回17个关键节点,如下图

f42c1ovqkt.jpeg

此模型称为PoseNet,可以估计照片中人体的鼻子、眼睛、耳朵、手臂、腿关节等17个关键点,关键可以达到实时的效果,并且我们可以很方便地在web浏览器中体验这项技术。

如何使用,可以查看: 10行代码用tensorflowJS实现人体关键点检测

KuroNet

这是日本人做的,利用TensorFlow.js,轻松阅读古草体文字。

12msiurhur.jpeg

本质上是一种OCR识别技术,那么什么是古草体呢?

是近现代日语中很流行一种类似于“草书”的书法形式,这在个人信件和诗歌中很常见。该系统利用深度学习来学习国家文献研究博物馆所拥有的“古草体”的数据,然后将“古草体”翻刻为现代日语。

利用TensorFlow.js,能够在web线上对“古草体”文字逐字识别。

借此,我们还可以用tensorflow.js实现验证码的识别,让浏览器自动帮我们输入验证码~

Text classification

tensorflow.js的案例很多都是图像上的应用,少见有文本的应用。这个文本分类的示例可以给我们不少启发。该案例在浏览器实现了攻击性语言的检测,我们可以给任何一句话打上分类标签。我试验了下,目前仅支持英文。我们可以自行训练中文的。

bwbrebbp0d.jpeg

应用场景有哪些呢?我们可以在浏览器实现自动提示广告文章,过滤攻击性的文字等等。

综上,前端的tensorflow.js生态我觉得已经比较丰富了,推荐face-api.jsml5.jsmagenta.js都值得一玩。除此之外,6项前端智能技术作为前端工程师,都应该玩一遍~

热点文章