在瀏覽器中實現 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 爲我們的團隊提供了必要的工具,有助我們爲客戶打造美妙的體驗,憑藉歐萊雅專業知識的加持,“美”將變得越來越數字化。

親自嘗試

立即在自己的 Web 瀏覽器上嘗試 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.aspx

  • NYX Cosmetics
    https://www.nyxcosmetics.com/try-it-on

— 推薦閱讀 —

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章