TensorFlow.js制作了一個(gè)僅用 200 余行代碼的項(xiàng)目

只需網(wǎng)頁端，秒速消失不留痕。

Jason Mayes 是一名在谷歌工作的資深網(wǎng)頁工程師，他長(zhǎng)期致力于運(yùn)用新興技術(shù)提供物聯(lián)網(wǎng)解決方案。近日，充滿奇思妙想的 Mayes 又使用 TensorFlow.js 制作了一個(gè)僅用 200 余行代碼的項(xiàng)目，名為 Real-Time-Person-Removal。它能夠?qū)崟r(shí)將復(fù)雜背景中的人像消除，而且僅基于網(wǎng)頁端。 現(xiàn)在，Mayes 在 GitHub 上開源了他的代碼，并在 Codepen.io 上提供了演示 Demo。從視頻中看到，你現(xiàn)在只需要一臺(tái)能上網(wǎng)的電腦和一個(gè)網(wǎng)絡(luò)攝像頭就能體驗(yàn)它。

項(xiàng)目地址：https://github.com/jasonmayes/Real-Time-Person-Removal

Demo 地址：https://codepen.io/jasonmayes/pen/GRJqgma

目前，該項(xiàng)目異?；馃幔?Github 上已經(jīng)獲得了 3.4k 的 Star 量。 實(shí)時(shí)隱身不留痕項(xiàng)目作者：Jason Mayes 我們先來看一下運(yùn)行的效果。下圖中，上半部分是原始視頻，下半部分是使用 TensorFlow.js 對(duì)人像進(jìn)行消除后的視頻。可以看到，除了偶爾會(huì)在邊緣處留有殘影之外，整體效果還是很不錯(cuò)的。 為了展現(xiàn)這個(gè)程序在復(fù)雜背景下消除人像并重建背景的能力，Mayes 特意在床上放了一臺(tái)正在播放視頻的筆記本電腦。當(dāng)他的身體遮擋住筆記本電腦時(shí)，可以看到消除算法暫停在電腦被遮擋前的播放畫面，并能在人移開時(shí)迅速地重建出當(dāng)前畫面。

此外，Mayes 還在 Codepen.io 上提供了能夠直接運(yùn)行的示例。只需要點(diǎn)擊 Enable Webcam，離開攝像頭一段距離確保算法能夠較全面的收集到背景圖像，之后當(dāng)你再出現(xiàn)在攝像頭前時(shí)就能從下方的預(yù)覽窗口看到「隱形」后的畫面了。

網(wǎng)友表示有了這個(gè)程序，像之前 BBC 直播中孩子闖進(jìn)門來那樣的大型翻車現(xiàn)場(chǎng)就有救了。 項(xiàng)目運(yùn)行機(jī)制 Mayes 開發(fā)的這個(gè)人像消除程序背后的運(yùn)行機(jī)制十分簡(jiǎn)單，他使用了 TensorFlow.js 中提供的一個(gè)預(yù)訓(xùn)練的 MobileNet，用于人像分割。

constbodyPixProperties={ architecture:'MobileNetV1', outputStride:16, multiplier:0.75, quantBytes:4 };

TensorFlow.js 提供的部分計(jì)算機(jī)視覺預(yù)訓(xùn)練模型。 MobileNet 是谷歌在 2017 年針對(duì)移動(dòng)端和嵌入式設(shè)備提出的網(wǎng)絡(luò)，針對(duì)圖像分割。其核心思想是使用深度可分離卷積構(gòu)建快速輕量化的網(wǎng)絡(luò)架構(gòu)。Mayes 選擇使用它的原因也是出于其輕量化的原因，假如使用 YOLO 或者 Fast-RCNN 這類物體檢測(cè)算法的話，在移動(dòng)端就很難做到實(shí)時(shí)性。 通過 MobileNet 的輸出獲得檢測(cè)到人物像素的邊界框。

//Gothroughpixelsandfigureoutboundingboxofbodypixels. for(letx=0;xmaxX){ maxX=x; } if(y>maxY){ maxY=y; } foundBody=true; } } } 為避免人物沒有被檢測(cè)完全的現(xiàn)象，這里使用變量額 scale 對(duì)檢測(cè)區(qū)域進(jìn)行適當(dāng)放縮。這個(gè) 1.3 的參數(shù)是測(cè)試出來的，感興趣的讀者可以調(diào)整試試看。 //Calculatedimensionsofboundingbox. varwidth=maxX-minX; varheight=maxY-minY; //Definescalefactortousetoallowforfalsenegativesaroundthisregion. varscale=1.3; //Definescaleddimensions. varnewWidth=width*scale; varnewHeight=height*scale; //Caculatetheoffsettoplacenewboundingboxsoscaledfromcenterofcurrentboundingbox. varoffsetX=(newWidth-width)/2; varoffsetY=(newHeight-height)/2; varnewXMin=minX-offsetX; varnewYMin=minY-offsetY; 之后對(duì)人物 bounding box 之外的區(qū)域進(jìn)行更新，并且當(dāng)檢測(cè)到人物移動(dòng)時(shí)，更新背景區(qū)域。 //Nowloopthroughupdatebackgoundunderstandingwithnewdata //ifnotinsideaboundingbox. for(letx=0;xnewXMin+newWidth)||(ynewYMin+newHeight)){ //Convertxyco-ordstoarrayoffset. letn=y*canvas.width+x; data[n*4]=dataL[n*4]; data[n*4+1]=dataL[n*4+1]; data[n*4+2]=dataL[n*4+2]; data[n*4+3]=255; }elseif(!foundBody){ //Nobodyfoundatall,updateallpixels. letn=y*canvas.width+x; data[n*4]=dataL[n*4]; data[n*4+1]=dataL[n*4+1]; data[n*4+2]=dataL[n*4+2]; data[n*4+3]=255; } } } ctx.putImageData(imageData,0,0); if(DEBUG){ ctx.strokeStyle="#00FF00" ctx.beginPath(); ctx.rect(newXMin,newYMin,newWidth,newHeight); ctx.stroke(); } } 至此為算法的核心部分，用了這個(gè)程序，你也可以像滅霸一樣彈一個(gè)響指（單擊一下鼠標(biāo)）讓人憑空消失。 熱門的「視頻隱身術(shù)」 其實(shí)，這并非機(jī)器之心報(bào)道的第一個(gè)消除視頻中人像的項(xiàng)目。 2019 年，我們也曾報(bào)道過「video-object-removal」項(xiàng)目。在此項(xiàng)目中，只要畫個(gè)邊界框，模型就能自動(dòng)追蹤邊界框內(nèi)的物體，并在視頻中隱藏它。 項(xiàng)目地址：https://github.com/zllrunning/video-object-removal

但從項(xiàng)目效果來看，也會(huì)有一些瑕疵，例如去掉了行人后，背景內(nèi)的車道線對(duì)不齊等。 與 Mayes 的這個(gè)項(xiàng)目類似，video-object-removal 主要借鑒了 SiamMask 與 Deep Video Inpainting，它們都來自 CVPR 2019 的研究。通過 SiamMask 追蹤視頻中的目標(biāo)，并將 Mask 傳遞給 Deep Video Inpainting，然后模型就能重建圖像，完成最終的修復(fù)了。 對(duì)此類技術(shù)感興趣的讀者可自行運(yùn)行下這兩個(gè)項(xiàng)目，做下對(duì)比。