在浏览器中实现 AR 试妆
客座博文 / Modiface Inc. 首席运营官 Jeff Houghton
十几年来，ModiFace 一直致力于在美容行业中融入人工智能技术，并在“增强现实”一词家喻户晓之前便已开启自己的 AR 体验之旅。随着智能手机的普及，ModiFace 看到了契机，借助移动平台的优势，实现了从 2D 图像虚拟试妆到 3D 视频实时虚拟试妆的转换。2018 年，ModiFace 被欧莱雅集团 (L'Oreal Group) 收购。从那时起，我们便利用 TensorFlow.js 拓展了网络的覆盖范围，进而使得实时虚拟试妆更加接近大众。
TensorFlow.js
https://tensorflow.google.cn/js
访问巴黎欧莱雅公司网站的产品页面，即可轻松进行虚拟试妆
用户访问欧莱雅品牌产品页面后，不仅仅局限于浏览产品图片，还可以在购买前看到自己试用产品的效果。挑选口红色号的过程变得更加有趣，而且您只需舒服地坐在家里就能体验。目前已经有 10 个品牌在超过 50 个国家/地区采用了这款解决方案，且这一数量还在不断增加，这对消费者带来的好处显而易见。它不仅会让消费者在购买产品时更加笃定，大幅提升购买转化率，同时还能增进与用户之间的互动。
前期解决方案的实现
要打造快速、精准且又便捷轻松的 AR 体验，我们要面临重重挑战。几秒钟的加载时间可能就能决定用户是能保持兴趣继续等待体验，还是点击离开转而去查看图片。
面部追踪器的模型体积历来非常大，通过改进实现方案，压缩后的模型大小也在 5 MB 左右。
这些解决方案利用随机森林方法来查找与面部的最佳匹配，因此想要获得的模型越小，精度也随之降低。尽管我们已经想尽一切办法来改进模型结构，降至现在的 5M，但在网速较慢的情况下仍需要一段时间才能完成加载。在未连接 WiFi 的移动设备上加载时模型，则更为缓慢。
在模型精度下降时，不同脸型的边缘区域也变得更加难以追踪。我们通过 Web 推出虚拟试妆的初衷是为了方便大家体验妆容效果，但事与愿违，这反而提升了它可访问的难度。
为提高精度，并构造一款可以持续改进的产品，我们开始寻求更先进的解决方案，如利用 CNN 来定位用户面部。但目前的主流架构（包括我们在其他平台上使用的那些架构）都面临我们之前遇到的相同问题：体积庞大，并且计算成本高昂。
全新的解决方案
我们将开发重点放在网络结构上，希望利用较少的算力实现最大精度。通过使用 MobileNetV2，我们大幅减少了网络中的运算量，而性能损失几乎可以忽略不计。我们还使用了类似于 ResNet 的残差设计，这种设计也解决了在较大结构中训练网络的一些问题。
我们的两阶段网络架构
MobileNetV2
https://github.com/tensorflow/tfjs-models/tree/master/mobilenet
我们的结构支持利用体积极小且计算成本低廉的热力图来重点处理图像的相关区域，从而能够在降低成本的同时提高精度。此外，ROI 还能将我们关注的面部特征对齐“放大”，便于我们处理高分辨率图像，同时降低对速度的影响。
掌握了神经网络这一强大工具后，我们需要将其部署到生产中。我们通常会将在 Web 上部署神经网络与服务器端计算联系起来。但由于每帧图像传输到后端都会有网络延迟，无法应用于实际场景。因此，我们需要一个能够在 Web 浏览器中运行神经网络的框架。
其中一种解决办法就是采用传统的 C++ 执行框架，将其编译为 asm.js 或 WASM 。但这样做的结果是编译后的框架往往较大，并且神经网络执行起来相对较慢。
另一种方法是使用诸如 TensorFlow.js 等为在 Web 上执行为构建的框架。TensorFlow.js 具备大量的算子支持，可确保与我们的模型兼容。另外，TensorFlow.js 还借助了 WebGL 的优势，通过 GPU 加速神经网络执行，从而缩短推理时间。整个应用的二进制文件大小也会得到大幅缩减。
最终，我们将实时体验所需模型体积压缩到了 3 MB 以下，在用户的照相机启动之前已准备就绪。此外，各边缘区域和面部表情的精度也得到了大幅提升。我们在部署时还加入了更多特征，由此扩展了当前渲染图的功能。有了这一全新结构，我们无需重新搭建整体架构，仅通过一些额外训练就能进一步提升试妆效果。
TensorFlow.js 不仅支持之前仅可在功能强大的设备上才能实现的应用客户端渲染，还带来了众多其他优势。该工具无需后端支持，即可让我们低成本地对欧莱雅品牌多个产品线轻松部署试妆功能。这也意味着用户的照片完全由自己掌控，从而保护隐私。在试妆前，自己的照片和视频仅在本地使用，无需发送到其他地方。这一解决方案不仅为用户带来了值得信赖的试妆体验，还与欧莱雅面向消费者透明的品牌目标完美契合。
ModiFace 专注于研究和创新，这不仅能够扩大消费者的权益，还可提供简单易用的流畅服务。展望下一代美容科技产品，我们希望 TensorFlow.js 能够成为此项技术的核心依托。TensorFlow.js 为我们的团队提供了必要的工具，有助我们为客户打造美妙的体验，凭借欧莱雅专业知识的加持，“美”将变得越来越数字化。
亲自尝试
美宝莲 (Maybelline)支持您使用全套产品打造自己的形象。 阿玛尼美妆 (Giorgio Armani Beauty)允许您在同一位置查看所有支持试妆的产品。点击产品页面来试用每个色号吧！ 在 Urban Decay’s Vice Lipstick 网站上，只需悬停鼠标即可试用 100 多种不同的色号。 巴黎欧莱雅提供了各种各样的试妆产品。快快探索各类不同的眼影吧。 NYX Cosmetics 提供即时试妆功能，可助您轻轻松松找到一套适合您的产品。
如果您想详细了解 TensorFlow 的相关内容，请参阅以下文档。这些文档深入探讨了这篇文章中提及的许多主题：
TensorFlow.js
https://tensorflow.google.cn/js美宝莲
https://www.maybelline.com/virtual-try-on-makeup-tools阿玛尼美妆
https://www.giorgioarmanibeauty-usa.com/makeup/tools-more/virtual-try-on/Urban Decay’s Vice Lipstick
https://www.urbandecay.com/vice-lipstick-by-urban-decay/ud771.html巴黎欧莱雅
https://www.lorealparisusa.com/products/makeup/eye/eye-shadow/colour-riche-eyeshadow.aspxNYX Cosmetics
https://www.nyxcosmetics.com/try-it-on
— 推荐阅读 —