rom:SenseTime 編譯:T.R

面部圖像操作是計(jì)算機(jī)視覺和計(jì)算機(jī)圖形學(xué)里十分重要的研究方向，包括自動(dòng)表情生成和面部風(fēng)格遷移方向都離不開它的身影，也成為了美妝app里重要的AI技術(shù)。面部操作主要分為語義和幾何兩個(gè)方向，但目前的方法大多局限于一系列預(yù)定義屬性的操作方法，限制了用戶隨心所欲變換人臉屬性的自由。

為了克服目前系統(tǒng)缺乏自由操作的缺陷，來自商湯、港中文和港大的研究人員們提出了一種支持用戶自由交互、多樣性操作的新方法MaskGAM，它利用人臉的語義掩膜作為人臉操作和人臉信息的有效中介，在mask空間中進(jìn)行的操作代替了直接在像素空間中對(duì)圖像進(jìn)行的操作，使得生成的結(jié)果具有更豐富的多樣性，也為用戶提供了更加直觀的方式來對(duì)面部的各個(gè)屬性進(jìn)行修飾和編輯。

MaskGAN

MaskGAN主要有兩方面的構(gòu)成，一方面是負(fù)責(zé)學(xué)習(xí)從語義掩膜到輸出圖像間映射的稠密映射網(wǎng)絡(luò)(DenseMappingNetwork,DMN)，另一部分是負(fù)責(zé)為用戶對(duì)源圖像掩膜進(jìn)行建模的編輯行為模擬訓(xùn)練部分(Editing Behavior Simulated Training)。

稠密映射網(wǎng)絡(luò)DMN 由一個(gè)生成器主干網(wǎng)絡(luò)和一個(gè)空間注意力風(fēng)格編碼器構(gòu)成。空間注意力編碼器利用圖像和對(duì)應(yīng)的語義掩膜作為輸入，并將得到的空間注意力特征編碼送入圖像生成主干網(wǎng)絡(luò)，隨后圖像生成網(wǎng)絡(luò)基于空間注意力特征和語義掩膜編碼的特征生成對(duì)應(yīng)的面部圖像。這一稠密映射網(wǎng)絡(luò)可以學(xué)習(xí)出用戶編輯掩膜與目標(biāo)圖像間的細(xì)粒度風(fēng)格映射。

DMN采用了Pix2PixHD 作為主干網(wǎng)絡(luò)，并增加了空間注意力編碼器來融合目標(biāo)圖像與掩膜間信息。隨后生成器將這一部分的信息融合生成出逼真的真實(shí)圖像。

空間注意力特征編碼器和對(duì)應(yīng)的空間特征轉(zhuǎn)換層SFT

在編碼器中，研究人員采用了空間特征轉(zhuǎn)移層來將學(xué)習(xí)出仿射變換參數(shù)，并給予參數(shù)來對(duì)特征圖進(jìn)行逐通道和空間調(diào)制，最終得到包含空間注意力風(fēng)格的仿射參數(shù)信息。隨后研究人員使用自適應(yīng)實(shí)例歸一化來將得到的空間注意力信息轉(zhuǎn)移到主干網(wǎng)絡(luò)上。

最終生成器部分的解碼器在輸入掩膜以及掩膜與圖像構(gòu)成的空間信息編碼下共同生成最終的圖像。空間注意力可以有效地將目標(biāo)圖像的風(fēng)格通過目標(biāo)掩膜的信息傳遞給源圖掩膜與輸出間的映射關(guān)系。

值得注意的是，在訓(xùn)練時(shí)使用的掩膜來自于目標(biāo)圖像，而在實(shí)際時(shí)主干網(wǎng)絡(luò)的掩膜則是源圖像（或用戶編輯后的源圖掩膜）。

而編輯行為模擬訓(xùn)練部分則用于為用戶的編輯行為建模，使得生成模型對(duì)于各式各樣的編輯具有更好的魯棒性。它主要由先前得到的稠密映射網(wǎng)絡(luò)DMN、預(yù)訓(xùn)練的MaskVAE、以及alpha 通道的融合子網(wǎng)絡(luò)共同構(gòu)成。

其中MaskVAE 由編碼器-解碼器構(gòu)成，主要負(fù)責(zé)幾何結(jié)構(gòu)先驗(yàn)的流型建模；而alpha融合子網(wǎng)絡(luò)主要用于融合圖像來幫助網(wǎng)絡(luò)保持操作過程中的連續(xù)性。通過這些子模塊的聯(lián)合訓(xùn)練將為生成模型在面對(duì)多樣性的用戶編輯、輸入時(shí)提供更好的魯棒性。

MaskVAE與自編碼器很類似，主要用于處理結(jié)構(gòu)的先驗(yàn)信息，其損失函數(shù)包括了重建語義掩膜的逐像素?fù)p失和在隱空間中控制語義標(biāo)簽平滑的KL散度項(xiàng)。MaskVAE可以對(duì)語義標(biāo)簽進(jìn)行平滑的轉(zhuǎn)換，在隱空間中的線性插值結(jié)果如下圖所示。

整個(gè)變分自編碼器通過下面的結(jié)構(gòu)來進(jìn)行訓(xùn)練，并最小化重建誤差。

訓(xùn)練好的MaskVAE在整個(gè)方法流程中的主要目的是為輸入掩膜分別生成內(nèi)插和外插新掩膜，為后續(xù)的融合提供條件。

AlphaBlender的主要作用是保證圖像操作的連續(xù)性，它可以維持融合結(jié)果與目標(biāo)結(jié)果檢測連續(xù)性。研究人員通過深度學(xué)習(xí)AlphaBlender來學(xué)習(xí)出融合參數(shù)合成最終圖像。融合模型在訓(xùn)練過程中與與兩個(gè)DMN進(jìn)行聯(lián)合優(yōu)化。這一部分的模型被定義為融合生成器GB。

訓(xùn)練過程

模型的訓(xùn)練過程一共分為兩個(gè)階段，分別是對(duì)于稠密映射網(wǎng)絡(luò)的預(yù)訓(xùn)練和針對(duì)用戶編輯行為模擬的增強(qiáng)訓(xùn)練以提高生成器魯棒性。

第一階段的訓(xùn)練。首先需要利用基準(zhǔn)圖像It 和對(duì)應(yīng)的掩膜Mt 訓(xùn)練稠密映射網(wǎng)絡(luò)，使得模型學(xué)會(huì)從掩膜到圖像的映射過程。隨后利用預(yù)訓(xùn)練的映射模型DMN、MaskVAE，以及聯(lián)合訓(xùn)練和AlphaBlender來實(shí)現(xiàn)。

第二階段的訓(xùn)練。一張輸入的掩膜通過MaskVAE (在隱空間中)經(jīng)過內(nèi)插和外插得到了兩張不同的掩膜，而后與對(duì)應(yīng)的GT圖像與掩膜分別送入到兩個(gè)稠密映射網(wǎng)絡(luò)中生成出外插圖像和內(nèi)插圖像；將兩幅圖像再輸入到Blender模型中學(xué)習(xí)出融合參數(shù)的權(quán)重圖，將圖像進(jìn)行最后的融合生成結(jié)果。在第二階段的訓(xùn)練中，MaskVAE 的參數(shù)固定，而兩個(gè)DMN 生成器和Blender 權(quán)重網(wǎng)絡(luò)進(jìn)行聯(lián)合優(yōu)化。

最終整個(gè)模型將通過多目標(biāo)學(xué)習(xí)來進(jìn)行聯(lián)合優(yōu)化，其目標(biāo)函數(shù)包含了生成器的對(duì)抗損失、特征匹配損失和感知損失等，聯(lián)合優(yōu)化損失函數(shù)如下圖所示。

CelebAMask-HQ

為了為人臉語義分割和屬性操作打下更好的研究基礎(chǔ)，研究人員在CelebA-HQ的基礎(chǔ)上構(gòu)建了包含30000張高分辨率512x512的人臉圖片，包含了面部19類詳細(xì)的信息標(biāo)注。針對(duì)被部分遮擋的面部區(qū)域，標(biāo)注員還進(jìn)行了推斷補(bǔ)全了語義標(biāo)簽。與先前的Helen 數(shù)據(jù)集相比，圖像的數(shù)量擴(kuò)大十多倍，同時(shí)標(biāo)簽的數(shù)量了也增加了近兩倍。

最后研究人員從語義、幾何、分布以及人類感知等方面對(duì)比了MaskGAN 和先前的算法，顯示了在人臉屬性遷移和風(fēng)格復(fù)制任務(wù)上的性能差異。下面這張圖顯示了MaskGAN對(duì)于人臉特定屬性（如笑容）的遷移能力，在視覺感知和幾何層面都很強(qiáng)。

MaskGAN對(duì)于風(fēng)格復(fù)制也可以很好勝任，相比于先前的方法它可以對(duì)于性別和妝容有更強(qiáng)的遷移能力。

此外還可以通過修改圖像的語義掩膜來為圖中的人物添加配飾、眼鏡，改變發(fā)型、臉型和各種面部屬性。

消融性分析顯示，對(duì)于稠密映射網(wǎng)絡(luò)，空間注意力風(fēng)格編碼器可以通過先驗(yàn)信息保持模型不受用于對(duì)mask修改的過度影響，同時(shí)也提高了從目標(biāo)圖像風(fēng)格遷移的準(zhǔn)確性。

而對(duì)于編輯行為模擬訓(xùn)練來說，有效地改善了模型對(duì)于人臉屬性保持的魯棒性，使得人類感知得分得到了大幅提升。下表中帶十字的結(jié)果為增加了編輯行為模擬訓(xùn)練的增強(qiáng)結(jié)果。

上手玩

在作者的demo演示中可以看到，隨意修改語義mask就可以改變生成圖像的臉型、發(fā)型、面部各個(gè)部分的屬性，還能添加耳環(huán)、改變眼睛，生成結(jié)果十分自然。

作者表示不久將放出人臉屬性操作的源碼，稍作等待就將在github上發(fā)布：

https://github.com

寫CSS的常用套路（下篇）...

點(diǎn)擊觀看——我寫CSS的常用套路（上篇）...

box-shadow

為盒子添加陰影，增加盒子的立體感，可以多層疊加，并且會(huì)使陰影更加絲滑

本demo地址：Pagination

內(nèi)發(fā)光

注意到box-shadow還有個(gè)inset，用于盒子內(nèi)部發(fā)光

利用這個(gè)特性我們可以在盒子內(nèi)部的某個(gè)范圍內(nèi)設(shè)定顏色，做出一個(gè)新月形

再加點(diǎn)動(dòng)畫和濾鏡效果，“猩紅之月”閃亮登場！

注意到它散發(fā)著淡淡的紅光，其實(shí)就是2個(gè)偽元素應(yīng)用了模糊濾鏡所產(chǎn)生的效果

本demo地址：Crimson Crescent Loading

text-shadow

文本陰影，本質(zhì)上和box-shadow相同，只不過是相對(duì)于文本而言，常用于文本發(fā)光，也可通過多層疊加來制作霓虹文本和偽3D文本等效果

發(fā)光文本

本demo地址：Staggered GlowIn Text

霓虹文本

本demo地址：Neon Text

偽3D文本

本demo地址：Staggered Bouncing 3D Loading

background-clip:text

能將背景裁剪成文字的前景色，常用來和color: transparent配合生成漸變文本

本demo地址：Menu Hover Fill Text

gradient

漸變可以作為背景圖片的一種，具有很強(qiáng)的色彩效果，甚至可以用來模擬光

linear-gradient

線性漸變是筆者最常用的漸變

這個(gè)作品用到了HTML的dialog標(biāo)簽，線性漸變背景，動(dòng)畫以及overflow障眼法，細(xì)心的你看出來了嗎:)

本demo地址：Confirm Modal

radial-gradient

徑向漸變常用于生成圓形背景，上面例子中Snow的背景就是一個(gè)橢圓形的徑向漸變

此外，由于背景可以疊加，我們可以疊加多個(gè)不同位置大小的徑向漸變來生成圓點(diǎn)群，再加上動(dòng)畫就產(chǎn)生了一種微粒效果，無需多余的div元素

本demo地址：Particle Button

conic-gradient

圓錐漸變可以用于制作餅圖

用一個(gè)偽元素疊在餅圖上面，并將content設(shè)為某個(gè)值（這個(gè)值通過CSS變量計(jì)算出來），就能制作出度量計(jì)的效果，障眼法又一次完成了它的使命

本demo地址：Gauge (No SVG)

filter

PS里的濾鏡，blur最常用

融合效果

當(dāng)blur濾鏡和contrast濾鏡一起使用時(shí)，會(huì)產(chǎn)生一種融合（gooey）的奇特效果

本demo地址：Snow Scratch

backdrop-filter

對(duì)背景應(yīng)用濾鏡，產(chǎn)生毛玻璃的效果

本demo地址：Frosted Glass

mix-blend-mode

PS里的混合模式，常用于文本在背景下的特殊效果

以下利用濾色模式（screen）實(shí)現(xiàn)文本視頻蒙版效果

本demo地址：Video Mask Text

clip-path

PS里的裁切，可以制作各種不規(guī)則形狀。如果和動(dòng)畫結(jié)合也會(huì)相當(dāng)有意思

本demo地址：Name Card Hover Expand

故障效果

由于clip-path有裁切功能，因此可以將多個(gè)文字疊在一起，并按比例裁切成多分，再應(yīng)用交錯(cuò)動(dòng)畫，就能制作出酷炫的故障效果（glitch）。

本demo地址：Cross Bar Glitch Text

mask

PS里的遮罩。所謂遮罩，就是原始圖片只顯示遮罩圖片非透明的部分

鏤空效果

雖然clip-path能裁切出形狀，但它無法鏤空，因?yàn)樾螤畹睦锩嫠懿恢?/p>

可能有人（包括我）會(huì)用偽元素來“模擬”鏤空（通過設(shè)置同樣的背景色），但這樣并非真的鏤空，換了個(gè)背景或浮在圖片上就會(huì)暴露出來，這時(shí)我們就要求助于遮罩了

假設(shè)，你想制作一個(gè)空心的圓環(huán)，那么你只需將一個(gè)徑向漸變作為元素的遮罩，并且第一個(gè)color-stop設(shè)置為透明，其他的color-stop設(shè)置為其他顏色即可，因?yàn)檎谡值亩x就是只顯示遮罩圖片非透明的部分

注意：為了消除鋸齒，這個(gè)徑向漸變的中間需要有一個(gè)額外的color-stop用于緩沖，長度設(shè)置為原長度加0.5px即可

本demo地址：Circle Arrow Nav

-webkit-box-reflect

投影效果，不怎么常用，適合立體感強(qiáng)的作品

本demo地址：Card Flip Reflection

web animations

雖然這并不是一個(gè)CSS特性，但是它經(jīng)常用于完成那些CSS所做不到的事情

那么何時(shí)用它呢？當(dāng)CSS動(dòng)畫中有屬性無法從CSS中獲取時(shí)，自然就會(huì)使用到它了

跟蹤鼠標(biāo)的位置

目前CSS還尚未有獲取鼠標(biāo)位置的API，因此考慮用JS來進(jìn)行

通過查閱相關(guān)的DOM API，發(fā)現(xiàn)在監(jiān)聽鼠標(biāo)事件的API中，可通過e.clientX和e.clientY來獲得鼠標(biāo)當(dāng)前的位置

既然能夠獲取鼠標(biāo)的位置，那么跟蹤鼠標(biāo)的位置也就不是什么難事了：通過監(jiān)聽mouseenter和mouseleave事件，來獲取鼠標(biāo)出入一個(gè)元素時(shí)的位置，并用此坐標(biāo)來當(dāng)作鼠標(biāo)的位移距離，監(jiān)聽mousemove事件，來獲取鼠標(biāo)在元素上移動(dòng)時(shí)的位置，同樣地用此坐標(biāo)來當(dāng)作鼠標(biāo)的位移距離，這樣一個(gè)跟蹤鼠標(biāo)的效果就實(shí)現(xiàn)了

本demo地址：Menu Hover Image

CSS Houdini

CSS Houdini是CSS的底層API，它使我們能夠通過這套接口來擴(kuò)展CSS的功能

讓漸變動(dòng)起來

目前來說，我們無法直接給漸變添加動(dòng)畫，因?yàn)闉g覽器不理解要改變的值是什么類型

這時(shí)，我們就可以利用CSS.registerProperty()來注冊我們的自定義變量，并聲明其語法類型（syntax）為顏色類型<color>，這樣瀏覽器就能理解并對(duì)顏色應(yīng)用插值方法來進(jìn)行動(dòng)畫

還記得上文提到的圓錐漸變conic-gradient()嗎？既然它可以用來制作餅圖，那么我們能不能讓餅圖動(dòng)起來呢？答案是肯定的，定義三個(gè)變量：--color1、--color2和--pos，其中--pos的語法類型為長度百分比<length-percentage>，將其從0變?yōu)?00%，餅圖就會(huì)順時(shí)針旋轉(zhuǎn)出現(xiàn)

利用絕對(duì)定位和層疊上下文，我們可以疊加多個(gè)從小到大的餅圖，再給它們設(shè)置不同的顏色，應(yīng)用交錯(cuò)動(dòng)畫，就有了下面這個(gè)炫麗的效果

本demo地址：Mawaru

彩蛋

將交錯(cuò)動(dòng)畫和偽類偽元素結(jié)合起來寫出來的慎重勇者風(fēng)格的菜單

本demo地址：Shinchou Menu

者：明明

轉(zhuǎn)發(fā)鏈接：https://mp.weixin.qq.com/s/BehjH5xVXFWohQXFl3u-kQ