超市、地鐵、車站等很多場景中，人臉識別已經被廣泛應用，但是這個功能究竟是怎么實現的？

在本文中，將以 pico.js 庫為例，分享實現輕量級人臉識別功能的具體開發過程 。

pico.js 是一個只有 200 行純 JavaScript 代碼的人臉檢測庫，具備實時檢測功能（在實際環境中可達到200+ FPS），壓縮后僅 2kB 。

開源代碼地址：https://github.com/tehnokv/picojs；

簡介

本文將介紹pico.js，這一由JavaScript編寫的用于人臉檢測的代碼庫，并展示其工作原理。盡管現已有類似的項目，但我們的目標是提供更小、計算效率更高的替代方案。

在深入考究其細節前，建議各位用計算機的網絡攝像頭體驗一下人臉檢測的實時演示（也適用于移動設備）。注意，所有進程都是在客戶端完成的，即不向服務端發送圖像。因此，各位無需擔心在運行這段代碼時的隱私問題。

在接下來的篇幅里，我將闡述pico.js的理論背景及其工作原理。

Pico對象監測框架

2013年，Markus團隊在一個技術報告中介紹了這一由JavaScript實現的pico.js代碼庫。它是參考C語言實現的，我們可在GitHub上獲取其源碼：https://github.com/nenadmarkus/pico。我們密切關注其實現方法，因為我們不打算復制學習過程，而僅關注它的運行。這背后的原因是，我們最好學習帶有官方代碼的檢測器，將其加載到JavaScript中并執行進程，如此就帶有獨特的優勢（比如跨操作系統與設備的強大的可移植性）。

Pico對象檢測框架是流行的Viola-Jones方法的一個改進。

Viola-Jones方法是基于區域分類的概念。這意味著在圖像的每個合理位置和尺度上都使用分類器。這個區域枚舉過程的可視化如下圖所示：

該分類器試圖判斷當前區域是否存在人臉。最后，獲取到的人臉區域將根據重疊程度進行聚類。鑒于每張圖像都有很多區域，在這實時進程中有兩個小技巧：

1. 將分類器歸類為級聯分類器；
2. 級聯的每個成員都可以在0（1）時間內根據區域的大小進行計算。

分類級聯由一系列分類器組成。這些分類器中的每一個都能正確識別幾乎所有的人臉，并丟棄一小部分非人臉區域。如果一個圖像區域通過了級聯的所有成員，那么它就被認定為人臉。通過(設計)序列中靠前的分類器比靠后的分類器更簡單，這種效果得到了進一步放大。級聯分類算法如下圖所示：

每個階段包括一個分類器Cn，它既可以拒絕圖像區域(R)，也可以接受圖像區域(A)。一旦被拒絕，該區域將不會進入下一級聯成員。如果沒有一個分類器拒絕該區域，我們認為它是一張人臉。

在Viola-Jones框架中，每個分類器Cn都基于Haar-like特性。這使得每個區域可通過名為積分圖像的預算結構來進行O(1)計算時間。

然而，積分圖像也有一些缺點。最明顯的缺點是，這種數據結構需要額外的內存來儲存：通常是unit8輸入圖像的4倍。另外一個問題是構建一個完整的圖像所需的時間(也與輸入的像素數有關)。在功能有限的小型硬件上處理大的圖像也可能會有問題。這種方法的一個更微妙的問題是它的優雅性：隨之而來的問題是我們是否能夠創建一個不需要這種結構、并且具有所有重要屬性的框架。

Pico框架對每個分類器Cn用像素對比測試取代了Haar-like特性，形式如下：

其中R是一個圖像區域，（Xi,Yi）表示用于比較像素值的位置。注意，這種測試可以應用于各種尺寸的區域，而不需要任何專門的數據結構，這與Haar-like的特性不同。這是通過將位置（Xi,Yi）存儲在標準化坐標中（例如，（Xi,Yi）在[?1,1]×[?1,1]中），并乘以當前區域的比例。這就是pico實現多尺度檢測功能的思路。

由于此類測試很簡單，又因混疊和噪聲而存在潛在問題，我們有必要將大量測試應用于該區域，以便對其內容進行推理。在pico框架中，這是通過

1. 將測試組合考慮到決策樹中；
2. 有多個這樣的決策樹,通過對它們的輸出求和，形成級聯成員Cn。

這可以用數學符號表示，如下：

其中Tt(R)表示決策樹Tt在輸入區域R上生成的標量輸出。由于每個決策樹都由若干個像素比較測試組成，這些測試可以根據需要調整大小，因此運行分類階段Cn的計算復雜度與區域大小無關。

每個Cn決策樹都是AdaBoost的變體。接下來以這種方式將閾值設置為Cn的輸出，以獲取期望的真陽率（例如0.995）。所有得分低于這個閾值的區域都不認為是人臉。添加級聯的新成員，直到達到預期的假陽率。請參閱原出版物學習相關細節內容。

正如簡介中說的那樣，我們不會復制pico的學習過程，而僅關注它的運行。如果您想學習自定義對象/人臉檢測器，請使用官方的實現方法。Pico.js能夠加載二進制級聯文件并有效地處理圖像。接下來的小節將解釋如何使用pico.js來檢測圖像中的人臉。

pico.js的組件

庫的組成部分如下：

• 從級聯數據實例化區域分類功能的過程；
• 在圖像上運行此分類器以檢測面部的過程；
• 對獲得的檢測結果進行聚類的過程；
• 時序記憶模塊。

通過<script src="pico.js"></script>（或它的壓縮版本） 引入并進行一些預處理后，就可以使用這些工具了。我們將討論對圖像進行人臉檢測的JS代碼(GitHub repo中的代碼)。但愿這能詳盡說明使用該庫的方法。實時演示也有說明。

實例化區域分類器

區域分類器應識別圖像區域是否為人臉。其思路是在整個圖像中運行這個分類器，以獲得其中的所有面孔(稍后詳細介紹)。Pico.js的區域分類過程封裝在一個函數中，其原型如下:

 
function(r, c, s, pixels, ldim) { /* ... */}
 /*
 ...
 */
}

前三個參數（r、c和s）指定區域的位置（其中心的行和列）及其大小。pixels陣列包含圖像的灰度強度值。參數ldim規定從圖像的一行移動到下一行的方式(在諸如OpenCV的庫中稱為stride)。也就是說，從代碼中可以看出（r，c）位置的像素強度為[r*ldim + c]像素。該函數會返回一個浮點值，表示該區域的得分。如果分數大于或等于0.0，則該區域認定為人臉。如果分數低于0.0，則該區域認定為非人臉，即屬于背景類。

Pico.js中pico.unpack_cascade過程將二進制的級聯作為參數，將其解壓并返回一個帶有分類過程和分類器數據的閉包函數。我們用它初始化區域分類過程，以下是詳細說明。

官方pico的人臉檢測級聯稱為facefinder。它由近450個決策樹組成，每個決策樹的深度為6，它們集成一個25級聯。該級聯將在我們是實驗中用到，它能對正臉圖像以適當的檢測速率進行實時處理，正如實時演示看到的那樣。

facefinder級聯可以直接從官方的github庫上下載，代碼寫為:

 
var facefinder_classify_region=function(r, c, s, pixels, ldim) {return -1.0;};var cascadeurl='https://raw.githubusercontent.com/nenadmarkus/pico/c2e81f9d23cc11d1a612fd21e4f9de0921a5d0d9/rnt/cascades/facefinder';fetch(cascadeurl).then(function(response) { response.arrayBuffer().then(function(buffer) { var bytes=new Int8Array(buffer); facefinder_classify_region=pico.unpack_cascade(bytes); console.log('* cascade loaded'); })})function(r, c, s, pixels, ldim) {return -1.0;};
var cascadeurl='https://raw.githubusercontent.com/nenadmarkus/pico/c2e81f9d23cc11d1a612fd21e4f9de0921a5d0d9/rnt/cascades/facefinder';
fetch(cascadeurl).then(function(response) {
 response.arrayBuffer().then(function(buffer) {
 var bytes=new Int8Array(buffer);
 facefinder_classify_region=pico.unpack_cascade(bytes);
 console.log('* cascade loaded');
 })
})

首先，將facefinder_classify_region初始化，即任何圖像區域先認定為非人臉(它總是返回-1.0)。接下來，我們使用Fetch API從cascadeurl URL中獲取級聯二進制數據。這是一個異步調用，我們不能即刻獲取到數據。最后，在獲取到響應數據后，將其轉換為int8數組并傳遞給pico.unpack_cascade，然后pico.unpack_cascade生成正確的facefinder_classify_region函數。

將facefinder_classify_region函數應用于圖像中每個區域的合理位置和等級以便檢測到所有的人臉。這個過程將在下一小節中解釋。

在圖像上運行分類器

假定HTML body內有一個canvas元素，一個image標簽和一個帶有onclick回調的button標簽。用戶一旦點擊了人臉檢測按鈕，檢測過程就開始了。

下面的JS代碼用于繪制內容和圖像，并獲取原始像素值(紅、綠、藍+ alpha的格式):

 
var img=document.getElementById('image');var ctx=document.getElementById('canvas').getContext('2d');ctx.drawImage(img, 0, 0);var rgba=ctx.getImageData(0, 0, 480, 360).data; // the size of the image is 480x360 (width x height)document.getElementById('image');
var ctx=document.getElementById('canvas').getContext('2d');
ctx.drawImage(img, 0, 0);
var rgba=ctx.getImageData(0, 0, 480, 360).data; // the size of the image is 480x360 (width x height)

下面，我們編寫一個輔助函數，將輸入的RGBA數組轉換為灰度:

 
function rgba_to_grayscale(rgba, nrows, ncols) { var gray=new Uint8Array(nrows*ncols); for(var r=0; r<nrows; ++r) for(var c=0; c<ncols; ++c) // gray=0.2*red + 0.7*green + 0.1*blue gray[r*ncols + c]=(2*rgba[r*4*ncols+4*c+0]+7*rgba[r*4*ncols+4*c+1]+1*rgba[r*4*ncols+4*c+2])/10; return gray;}
 var gray=new Uint8Array(nrows*ncols);
 for(var r=0; r<nrows; ++r)
 for(var c=0; c<ncols; ++c)
 // gray=0.2*red + 0.7*green + 0.1*blue
 gray[r*ncols + c]=(2*rgba[r*4*ncols+4*c+0]+7*rgba[r*4*ncols+4*c+1]+1*rgba[r*4*ncols+4*c+2])/10;
 return gray;
}

現在我們準備調用這個過程，它將在整個圖像中運行facefinder_classify_region函數:

 
image={ "pixels": rgba_to_grayscale(rgba, 360, 480), "nrows": 360, "ncols": 480, "ldim": 480}params={ "shiftfactor": 0.1, // move the detection window by 10% of its size "minsize": 20, // minimum size of a face "maxsize": 1000, // maximum size of a face "scalefactor": 1.1 // for multiscale processing: resize the detection window by 10% when moving to the higher scale}// run the cascade over the image// dets is an array that contains (r, c, s, q) quadruplets// (representing row, column, scale and detection score)dets=pico.run_cascade(image, facefinder_classify_region, params);"pixels": rgba_to_grayscale(rgba, 360, 480),
 "nrows": 360,
 "ncols": 480,
 "ldim": 480
}
params={
 "shiftfactor": 0.1, // move the detection window by 10% of its size
 "minsize": 20, // minimum size of a face
 "maxsize": 1000, // maximum size of a face
 "scalefactor": 1.1 // for multiscale processing: resize the detection window by 10% when moving to the higher scale
}
// run the cascade over the image
// dets is an array that contains (r, c, s, q) quadruplets
// (representing row, column, scale and detection score)
dets=pico.run_cascade(image, facefinder_classify_region, params);

注意，人臉的最小尺寸默認設置為20。這太小了，對于大部分應用程序來說都是不必要的。但還需要注意的是，運行速度在很大程度上取決于此參數。對于實時應用程序，應該將此值設置為100。但是，設置的最小尺寸需匹配示例圖像。

檢測過程完成后，數組dets包含表單(r,c,s,q)，其中r,c,s指定人臉區域的位置(行，列)和大小，q表示檢測分數。該地區得分越高，越有可能是人臉。

我們可以將得到的檢測結果渲染到畫布上:

 
qthresh=5.0for(i=0; i<dets.length; ++i) // check the detection score // if it's above the threshold, draw it if(dets[i][3]>qthresh) { ctx.beginPath(); ctx.arc(dets[i][1], dets[i][0], dets[i][2]/2, 0, 2*Math.PI, false); ctx.lineWidth=3; ctx.strokeStyle='red'; ctx.stroke(); }<dets.length; ++i)
 // check the detection score
 // if it's above the threshold, draw it
 if(dets[i][3]>qthresh)
 {
 ctx.beginPath();
 ctx.arc(dets[i][1], dets[i][0], dets[i][2]/2, 0, 2*Math.PI, false);
 ctx.lineWidth=3;
 ctx.strokeStyle='red';
 ctx.stroke();
 }

我們需要根據經驗設置變量qthresh(5.0剛好，適用于facefinder級聯和靜止圖像中的人臉檢測)。典型的檢測結果是這樣的:

我們可以看到每張臉周圍都有多個探測器。這個問題用非極大值抑制來解決，在下一小節中解釋。

原始檢測的非極大值抑制(聚類)

非極大值抑制聚類的目的是將重疊的人臉區域融合在一起。每個集群的代表是其中得分最高的一次檢測(該方法因此而得名)。它的分數更新為集群中所有檢測分數的總和。

pico.js中的實現方式是：

 
dets=pico.cluster_detections(dets, 0.2); // set IoU threshold to 0.20.2); // set IoU threshold to 0.2

IoU閾值設置為0.2。這意味著兩個重疊大于該值的檢測將合并在一起。

現在的結果是這樣的:

我們已經學習了使用pico.js檢測靜止圖像中人臉的基本知識。值得注意的是，pico方法不如基于深度學習的現代人臉檢測器強大。然而，pico非常快，這使得它成為許多應用程序的首選，比如那些需要實時處理的應用程序。

在視頻中使用pico.js進行實時人臉檢測

由于pico.js產生的檢測噪聲比較大，我們開發了一種時間記憶模塊，在處理實時視頻時可減輕少此問題。該方法用于上述實時演示中，顯著提高了主觀檢測質量。

其思想是將幾個連續幀的檢測結合起來，以準確判斷給定區域是否為人臉。這是通過實例化一個電路緩沖區來實現的，該緩沖區包含從最后一個f幀檢測到的信號:

 
var update_memory=pico.instantiate_detection_memory(5); // f is set to 5 in this example// f is set to 5 in this example

update_memory閉包封裝了電路緩沖區和刷新數據的代碼。返回的數組包含來自最后f幀的檢測。

現在我們不再從單幀中檢測聚類，而是在聚類之前進行累加:

 
dets=pico.run_cascade(image, facefinder_classify_region, params);dets=update_memory(dets); // accumulates detections from last f framesdets=pico.cluster_detections(dets, 0.2); // set IoU threshold to 0.2
dets=update_memory(dets); // accumulates detections from last f frames
dets=pico.cluster_detections(dets, 0.2); // set IoU threshold to 0.2

最終的分類閾值qthresh會顯著提高，這會減少假陽性的數量，而不會顯著影響到真陽率。

轉載自：https://blog.csdn.net/csdnnews/article/details/92841099