hi，大家好~我是shadow，一枚设计师/全栈工程师/算法研究员，目前主要研究方向是人工智能写作和人工智能设计，当然偶尔也会跨界到人工智能艺术及其他各种AI产品。
前端开发有哪些新的智能化趋势呢？今天重点整理tensorflow.js相关的内容。有非常多的基于tensorflow.js二次封装的js库，比如face-api.js、ml5.js等等。
应用场景方面，发现图像方面的应用比较多，文本反而少，可能大家还不知道tensorflowjs有哪些文字场景吧。详细请往下翻看：
欢迎有兴趣的朋友添加我（文末有福利），进一步交流哈~
- tensorflow.js？
- 前端AI基础库
TensorFlow.js 是一个 JavaScript 库，用于在浏览器和 Node.js 训练和部署机器学习模型。
[图片上传失败...(image-4335dc-1587734388051)]
- face-api.js
-人脸应用必备
Face-api.js是一个JavaScript API，是基于tensorflow.js核心API的人脸检测和人脸识别的浏览器实现。前端人脸识别相关的应用，推荐用face-api.js~
[图片上传失败...(image-15f0f5-1587734388051)]
- ml5.js
- 创意编程必备
ml5.js旨在为创意编程提供开箱即用的机器学习算法。该库封装了常用的机器学习算法和预训练模型，基于TensorFlow.js，可单独使用，也可搭配p5.js使用。
目前可以实现哪些功能？
图像
[图片上传失败...(image-2c130c-1587734388051)]
imageClassifier
用于识别图像内容，可用于图像与文字的匹配
poseNet
用于识别人体姿势的关键点，可用于动作识别
bodyPix、UNET
用于人体与背景分割，可用于自动抠图
styleTransfer
风格迁移，可用于图片艺术滤镜
pix2pix、CVAE、DCGAN
图像生成，可用于手绘图生成实景图、根据文本生成图像
SketchRNN
图像生成的另一种方式，可用于基于初始笔画生成图案
YOLO
物体检测，可用于追踪物体
声音
[图片上传失败...(image-da21ed-1587734388051)]
soundClassifier
音频分类，可用于语音控制
pitchDetection
音调检测，可用于说话人识别
文本
[图片上传失败...(image-fc4df3-1587734388051)]
CharRNN
文本生成，可用于输入法联想
Sentiment
情绪预测，可用于文本的情感判断
Word2vec
词转向量，可用于把文本转化为向量，在向量空间中进行计算
-----
辅助功能
[图片上传失败...(image-dc287d-1587734388051)]
featureExtractor
图像特征提取，可用于以图搜图、迁移学习
KNNClassifier
K-Nearest Neighbors算法创建分类器，可用于图像分类
17个功能建议一个个进行尝试，练习，掌握。
ml5.js的详细介绍可看：
- magenta.js
- 音乐创作工具
magenta.js是一个基于TensorFlow.js构建的，在浏览器中使用WebGL加速运行的，用于通过Magenta模型生成音乐和艺术的JS框架。包括MusicVAE，MelodyRNN，DrumsRNN和ImprovRNN。
[图片上传失败...(image-811e42-1587734388051)]
不满足于代码库，最近，还推出了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.
[图片上传失败...(image-cd99ad-1587734388051)]
这会，音乐创作可以AI人机协作了~~
以上是相关的前端AI库~接下来再介绍一些相关的技术。
- 前端智能技术01
- BodyPix
[图片上传失败...(image-365395-1587734388051)]
BodyPix是谷歌发布人体图像分割工具，可直接在浏览器中运行，仅需使用几行代码即可调用。BodyPix能将图像像素分割为属于人的和不属于人的部分，属于人的部分则可以进一步分类为24个身体部位之一。试验了下，BodyPix可以在15寸MacBook Pro上以25 fps的速度运行，渲染人和身体部位的分割，而在iPhone X上，BodyPix能以21 fps的速度运行，还不错。
除了tensorflow.js的封装，我们还可以使用mljs，更为简便的使用bodypix。
BodyPix可以用来干什么？
我尝试利用谷歌的bodyPix，DIY了一个fastmask功能。
[图片上传失败...(image-aac80-1587734388051)]
除此外，还可以用来自动抠图。
- 前端智能技术02
- MobileNet
Efficient Convolutional Neural Networks for Mobile Vision Applications
MobileNet是一个轻量化的神经网络模型，它极大地压缩模型文件大小，非常适合移动端使用。可以识别生活中常见的大部分物品。在前端的应用主要是搭配迁移学习，利用预训练好的MobileNet,为用户训练新的图像提供支持。
可以尝试下效果：
[图片上传失败...(image-a70f57-1587734388050)]
下面案例是使用预训练的MobileNet模型专门用来识别美洲驼…
[图片上传失败...(image-980603-1587734388050)]
除此之外，我们还可以，训练一个简单的分类器来对花朵图像进行分类；训练一个没有感情的“剪刀石头布”识别器；或者是用来训练一个方向控制器控制游戏里的角色。
比如谷歌的一个实验：
[图片上传失败...(image-d6af66-1587734388050)]
通过浏览器加载预训练的MobileNet模型，用户可以为上、下、左、右4个方向分别设置不同的类别，只需使用浏览器调用电脑的摄像头拍摄若干的照片，即可训练用户自己的模型。
往期，我写过一篇关于MobileNet的使用教程，对代码感兴趣的，可以点击以下链接查看：
- 前端智能技术03
- Yolo
You Only Look Once: Unified, Real-Time Object Detection提出的方法，简称YOLO。使用tensorflow.js我们可以在浏览器用摄像头实现目标检测。比如我们可以识别以下图片里的物体：
[图片上传失败...(image-8843c2-1587734388050)]
前端可以很容易的调用相关的tensorflow.js模型实现目标检测。目标检测可以用来干什么？
[图片上传失败...(image-41dded-1587734388050)]
比如你可以为你的浏览器加上防偷窥功能，自动识别除你以外的人（偷偷站在你背后的人），自动把网页隐藏，保护隐私。
- 前端智能技术04
- PoseNet
用于实时估计人体的姿势，返回17个关键节点，如下图
[图片上传失败...(image-f6137d-1587734388050)]
此模型称为PoseNet，可以估计照片中人体的鼻子、眼睛、耳朵、手臂、腿关节等17个关键点，关键可以达到实时的效果，并且我们可以很方便地在web浏览器中体验这项技术。
如何使用，可以查看：
- 前端智能技术05
- KuroNet
这是日本人做的，利用TensorFlow.js，轻松阅读古草体文字。
[图片上传失败...(image-354c08-1587734388050)]
本质上是一种OCR识别技术，那么什么是古草体呢？
是近现代日语中很流行一种类似于“草书”的书法形式，这在个人信件和诗歌中很常见。该系统利用深度学习来学习国家文献研究博物馆所拥有的“古草体”的数据，然后将“古草体”翻刻为现代日语。
利用TensorFlow.js，能够在web线上对“古草体”文字逐字识别。
借此，我们还可以用tensorflow.js实现验证码的识别，让浏览器自动帮我们输入验证码~
- 前端智能技术06
- Text classification
tensorflow.js的案例很多都是图像上的应用，少见有文本的应用。这个文本分类的示例可以给我们不少启发。该案例在浏览器实现了攻击性语言的检测，我们可以给任何一句话打上分类标签。我试验了下，目前仅支持英文。我们可以自行训练中文的。
[图片上传失败...(image-27f83f-1587734388050)]
应用场景有哪些呢？我们可以在浏览器实现自动提示广告文章，过滤攻击性的文字等等。
综上，前端的tensorflow.js生态我觉得已经比较丰富了，推荐face-api.js、ml5.js、magenta.js都值得一玩。除此之外，6项前端智能技术作为前端工程师，都应该玩一遍~
本文分享自微信公众号 - 无界社区mixlab（mix-lab），作者：shadow chi
原文出处及转载信息见文内详细说明，如有侵权，请联系 yunjia_community@tencent.com 删除。
原始发表时间：2019-12-27
本文参与腾讯云自媒体分享计划，欢迎正在阅读的你也加入，一起分享。
网友评论