专栏首页MixLab科技+设计实验室2020前端智能化趋势:tensorflow.js生态

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项前端智能技术作为前端工程师,都应该玩一遍~

本文分享自微信公众号 - 无界社区mixlab(mix-lab),作者:shadow chi

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2019-12-27

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • Javascript也可以玩机器学习

    前端工程师们~js也可以用来玩机器学习的。 今天看到这些相关的资源,分享给大家~~ 数据可视化这块应该都算比较熟悉的了,建议从通用机器学习库开始学习。 既然有这...

    mixlab
  • 帮B站开启圣诞节模式~

    这样的话,在网页加载的时候,就可以通过content_script.js,调用face-api,并注入js代码至b站。

    mixlab
  • 人工智能作曲、算法作曲指南

    为了探索AI自动生成音效的方法,我“抓”了limber一块完成了此篇内容,给大家介绍算法作曲相关的技术,涉及生成艺术相关的技术、产品、体验,着重梳理了核心技术及...

    mixlab
  • smartClient 1--框架介绍

        快速构建 大型企业应用开发(无需过多关注UI),适合基于云技术的应用,主要关注业务的发展和营销,加快开发进程

    用户1148399
  • 使用php-js-ext在PHP内解析javascript脚本

    用户1272546
  • RequireJS实例分析

      随着JS越来越庞大,已经不仅仅是以前复制粘贴做特效的时代了,JS越来越偏向于业务逻辑与应用。恰逢Node的流行,JS在web开发中占有越来越重要的地位。由...

    用户1154259
  • 前端缓存

    https://juejin.im/post/5a098b5bf265da431a42b227

    城市中的游牧民族
  • 如何动态加载js?

    第三方的js文件,自己写的js文件,js越来越多了怎么办? 提出问题: 1、js文件太多了,每个页面都写<script src="...">太麻烦。 2、如果路...

    用户1174620
  • 利用js文件反弹shell

    前两天在freebuf上看到一个利用Ink文件触发攻击链的文章,确实佩服作者的脑洞。

    洛米唯熊
  • 独家 | 在浏览器中使用TensorFlow.js和Python构建机器学习模型(附代码)

    本文首先介绍了TensorFlow.js的重要性及其组件,并介绍使用其在浏览器中构建机器学习模型的方法。然后,构建使用计算机的网络摄像头检测身体姿势的应用程序。

    数据派THU

扫码关注云+社区

领取腾讯云代金券