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

hi，大家好~我是shadow， 一枚设计师/全栈工程师/算法研究员 ，目前主要研究方向是人工智能写作和人工智能设计，当然偶尔也会跨界到人工智能艺术及其他各种AI产品。

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

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

欢迎有兴趣的朋友添加我 （ 文末有福利 ），进一步交流哈~

–  tensorflow.js？

– 前端AI基础库

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

– face-api.js

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

– ml5.js

– 创意编程必备

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

目前可以实现哪些功能？

图像

imageClassifier

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

poseNet

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

bodyPix、UNET

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

styleTransfer

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

pix2pix、CVAE、DCGAN

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

SketchRNN

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

YOLO

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

—–

声音

soundClassifier

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

pitchDetection

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

—–

文本

CharRNN

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

Sentiment

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

Word2vec

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

—–

辅助功能

featureExtractor

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

KNNClassifier

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

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

ml5.js的详细介绍可看：

3行代码玩转AI，ml5.js前端机器学习简明指南

– magenta.js

– 音乐创作工具

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

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

Magenta Studio is a collection of music plugins built on Magenta’s open source tools and models. They use cutting-edge machine learning techniques for music generation.

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

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

– 前端智能技术01

– BodyPix

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

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

BodyPix可以用来干什么？

我尝试利用谷歌的bodyPix，DIY了一个fastmask功能。

除此外，还可以用来 自动抠图 。

– 前端智能技术02

–  MobileNet

Efficient Convolutional Neural Networks for Mobile Vision Applications

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

可以尝试下效果：

下面案例是使用预训练的MobileNet模型专门用来识别美洲驼…

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

比如谷歌的一个实验：

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

往期，我写过一篇关于MobileNet的使用教程，对代码感兴趣的，可以点击以下链接查看：

TensorFlow.js、迁移学习与AI产品创新之道

– 前端智能技术03

–  Yolo

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

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

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

– 前端智能技术04

–   PoseNet

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

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

如何使用，可以查看：

10行代码用tensorflowJS实现人体关键点检测

– 前端智能技术05

–   KuroNet

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

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

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

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

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

– 前端智能技术06

–   Text classification

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

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

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

近期热文推荐：

2020工具产品智能化趋势

欢迎读者跟我进一步交流探讨（ 下方阅读原文 ）