Modiface 如何在生产环境中使用 TensorFlow.js 在浏览器中实现 AR 化妆试妆
2020 年 2 月 24 日
Modiface 公司首席运营官 Jeff Houghton 的客座文章。

ModiFace 已经为美容行业创建人工智能技术超过十年,并且在“增强现实”成为家喻户晓的词之前就开始研究 AR 体验。随着智能手机的上市,ModiFace 迅速利用该平台将虚拟试穿从 2D 图像转变为 3D 视频直播虚拟试穿。2018 年,ModiFace 被欧莱雅集团收购,此后,我们通过使用 TensorFlow.js 将我们的直播虚拟试穿扩展到网页,使其更加易于访问。

欧莱雅巴黎提供的虚拟试穿,可以从其网站的产品页面轻松访问。
用户只需访问欧莱雅品牌的商品页面,便可以实际查看产品在购买之前的效果,而不是仅仅浏览商品照片。这个过程让找到合适的口红颜色变得更加有趣,而且可以在家中舒适地完成。该解决方案已在 10 个品牌中上线,覆盖 50 多个国家,并且仍在不断扩展,其对消费者的益处是显而易见的。它不仅帮助消费者充满信心地进行购买,并明显提高了转化率,而且还提高了用户参与度。

我们之前的实现

尝试创建快速、准确且轻量级的 AR 体验可能非常具有挑战性。几秒钟的加载时间可以决定体验是否能抓住用户的兴趣,或者他们是否会点击离开,转而查看照片。

面部追踪器历来非常庞大,我们最好的实现方案在压缩后仍然约为 5 MB。这些解决方案使用 随机森林 来查找与面部匹配的项目,因此,实现方案越小,牺牲的准确性就越多。虽然体积很小,但我们已经将结构推到了极限,而且它仍然具有一个大小,在较慢的网络上加载需要一段时间 - 特别是在没有 WiFi 的移动设备上。准确性降低后,不同脸型的边缘案例就更难追踪了。我们最初通过网页推出虚拟试穿的目标是让体验变得触手可及,但结果却变成了一个并非对所有人包容的体验。

为了提高准确性并创建一个能够持续改进的产品,我们转向了更先进的解决方案,例如使用 CNN 来查找用户的面部。但是,当前流行的架构(包括我们在其他平台上使用的架构)存在与我们之前体验中相同的问题;它们体积庞大,计算量大。

我们的新解决方案

我们将开发重点放在网络结构上,该结构旨在以较少的可用计算能力最大限度地提高准确性。使用 MobileNetV2,我们在仅略微牺牲性能的情况下,大幅减少了网络中的操作次数。使用类似于 ResNet 的残差设计还改善了在较大结构中训练网络时遇到的问题。
我们的两级网络架构
我们的结构使我们能够使用极其小巧且计算成本低的热图,将处理集中在图像中相关的区域,从而以较低的成本提高准确性。此外,ROI 对齐“放大”我们感兴趣的面部特征点,使我们能够以较小的速度影响处理高分辨率图像。


有了强大的神经网络,我们需要将其部署到生产环境中。通常,当你想到在网页上部署神经网络时,你会想到服务器端计算。由于将每帧传输到后端的网络延迟,这对于实时体验来说并不实用。因此,需要一个能够在网页浏览器中运行神经网络的框架。

一种方法是采用传统的 C++ 执行框架,并将其编译为 asm.js 或 WASM。但是,这样做会导致编译后的框架体积庞大,执行神经网络的速度相对较慢。

另一种方法是使用为网页执行而构建的框架,例如 TensorFlow.js。TensorFlow.js 具有广泛的操作符支持,以确保与我们的模型兼容。TensorFlow.js 还利用 WebGL 加速使用 GPU 执行神经网络,从而缩短推理时间。总体应用程序二进制文件的大小也明显减小。

最终产品是一个不到 3 MB(压缩)的体验,在大多数用户启动相机之前就已经准备好了。此外,我们对各种边缘案例和面部表情的准确性有了很大提高。我们还使用更多特征点进行了部署,从而扩展了我们当前渲染功能。这种新的结构为我们在不重新设计整体架构的情况下,通过额外训练进一步改进提供了基础。

TensorFlow.js 不仅允许为以前只能在功能强大的设备上存在的应用程序进行客户端渲染,而且还带来了一系列其他好处。由于没有后端来支持该工具,它使我们能够以低成本跨多个欧莱雅品牌轻松部署试穿功能。这也意味着用户的图像完全由他们控制,同时还能保护隐私。要试穿化妆品,无需将照片和视频发送到任何地方。这不仅创造了用户可以信赖的体验,而且也与欧莱雅品牌为消费者提供透明度的目标完全一致。

ModiFace 重点关注研究和创新,这些研究和创新不仅能够赋能消费者,还能提供简单易用的无缝服务。随着我们展望下一代美容科技产品,我们预计 TensorFlow.js 将为这项技术提供基础。TensorFlow.js 为我们的团队提供了构建出色体验所需的工具,与欧莱雅的知识相结合,美容将日益数字化。

自己试试看

现在就在您的网页浏览器中尝试一些由 TensorFlow.js 提供支持的基于网页的演示。从以下任何一个开始
  • 美宝莲 使您能够在整个产品目录中创建自己的妆容。
  • 阿玛尼美妆 允许您在一个地方看到所有支持试穿的产品。点击商品页面试穿每种色号!
  • 对于 Urban Decay 的 Vice 口红,悬停即可试穿 100 多种不同的色号。
  • 巴黎欧莱雅 拥有大量支持试穿的产品。探索他们各种眼影。
  • NYX 化妆品 提供即时妆容,让寻找产品套装变得超级简单。
nyx makeup tryon
下一篇文章
How Modiface utilized TensorFlow.js in production for AR makeup try on in the browser

Modiface 公司首席运营官 Jeff Houghton 的客座文章。

ModiFace 已经为美容行业创建人工智能技术超过十年,并且在“增强现实”成为家喻户晓的词之前就开始研究 AR 体验。随着智能手机的上市,ModiFace 迅速利用该平台将虚拟试穿从 2D 图像转变为 3D 视频直播虚拟试穿。2018 年,ModiFace 被欧莱雅集团收购,此后,我们通过使用 TensorFlow.js 将我们的直播虚拟试穿扩展到网页,使其更加易于访问。