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

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

什么叫下一代PPT？

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

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

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

那么要制作这种工具，基础技术是什么？

人物图像分割 BodyPix

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

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

我们如何利用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文档

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

效果如下：

可以怎么玩呢？

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

Prezi Next

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

沉浸感的PPT工具,

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

欢迎一起探索~