TensorFlow.js制作了一個僅用 200 余行代碼的項目

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

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

項目地址：https://github.com/jasonmayes/Real-Time-Person-Removal

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

目前，該項目異?；馃?，在 Github 上已經(jīng)獲得了 3.4k 的 Star 量。 實時隱身不留痕項目作者：Jason Mayes 我們先來看一下運行的效果。下圖中，上半部分是原始視頻，下半部分是使用 TensorFlow.js 對人像進行消除后的視頻?？梢钥吹剑伺紶枙谶吘壧幜粲袣堄爸?，整體效果還是很不錯的。 為了展現(xiàn)這個程序在復(fù)雜背景下消除人像并重建背景的能力，Mayes 特意在床上放了一臺正在播放視頻的筆記本電腦。當(dāng)他的身體遮擋住筆記本電腦時，可以看到消除算法暫停在電腦被遮擋前的播放畫面，并能在人移開時迅速地重建出當(dāng)前畫面。

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

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

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

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

//Gothroughpixelsandfigureoutboundingboxofbodypixels. for(letx=0;xmaxX){ maxX=x; } if(y>maxY){ maxY=y; } foundBody=true; } } } 為避免人物沒有被檢測完全的現(xiàn)象，這里使用變量額 scale 對檢測區(qū)域進行適當(dāng)放縮。這個 1.3 的參數(shù)是測試出來的，感興趣的讀者可以調(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; 之后對人物 bounding box 之外的區(qū)域進行更新，并且當(dāng)檢測到人物移動時，更新背景區(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(); } } 至此為算法的核心部分，用了這個程序，你也可以像滅霸一樣彈一個響指（單擊一下鼠標）讓人憑空消失。 熱門的「視頻隱身術(shù)」 其實，這并非機器之心報道的第一個消除視頻中人像的項目。 2019 年，我們也曾報道過「video-object-removal」項目。在此項目中，只要畫個邊界框，模型就能自動追蹤邊界框內(nèi)的物體，并在視頻中隱藏它。 項目地址：https://github.com/zllrunning/video-object-removal

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