13

下一代PPT?尝试利用谷歌的bodyPix,DIY一个fastmask功能

 4 years ago
source link: http://mp.weixin.qq.com/s?__biz=MzA3MDgyMjMwMA%3D%3D&%3Bmid=2649936575&%3Bidx=1&%3Bsn=43c4fb28fb9d0df443a3d62c59b11716
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.

JVNvUf2.jpg!web

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

欢迎有兴趣的朋友添加我微信 (文末) ,进一步交流哈~

什么叫下一代PPT?

最近在收集整理一个系列《 2020工具智能化趋势 》,对PPT有了一些思考。

举一个例子,我经常在外面演讲,现在的投影设备其实很尴尬,当我站在大屏前面的时候,会被后面的内容遮挡住。

如果这个时候, 大屏里的内容能根据前面的人物遮挡情况自动变动位置。 是不是很赞

那么要制作这种工具,基础技术是什么?

人物图像分割 BodyPix

前几天Google更新了使用TensorFlow.js的人体图像分割工具BodyPix 2.0,此工具可以在浏览器上运行,用来分割人物与背景。

Q3yu2ir.gif

aYjQ3mF.gif

作为一项基础技术,应用场景有待我们去探索, 举近期更新的一篇文章里提到的adobe的fastmask功能为例 ,自动把人物与背景分离,我们就可以在人物与背景之间加入其他设计元素。

mia26fn.gif

我们如何利用 tensorflow.js 实现一个类似的功能呢?

为了方便使用,我这边使用了 ml5.js

ml5.js里对bodypix进行了封装,只需几行代码即可快速调用。

const bodypix = ml5.bodyPix(modelReady)


function modelReady() {

// segment the image given

bodypix.segment(img, gotResults)

}


function gotImage(error, result) {

if (error) {

console.log(error);

return;

}

// log the result

console.log(result.maskBackground);

}

详细我们可以自行翻阅官方API文档 (回复ml5获取)

实现的过程比较简单, 我们把人物跟背景分离出来,然后在中间插入字体的图层即可。

效果如下:

iyAfmuQ.gif

可以怎么玩呢?

下一代PPT工具的一个案例:

Prezi Next

在2017年的时候,Prezi Next的概念就出现了。AR+PPT到底是一种什么样的体验,如下图所示,Perzi团队演示了其概念,但是至今我还没搜索到这款产品上线 (如果读者有了解的,欢迎告知)

jqueymm.jpg!web

沉浸感的PPT工具 ,

也是我实验室里的一个试验项目。

欢迎一起探索~

VVNr63f.jpg!web


About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK