</ script><br></pre><p>鏈接：https://github.com/justadudewhohacks/face-api.js/tree/master/dist</p><p>如果你使用npm：</p><pre>npm i face-api.js<br></pre><p>加載模型數據</p><p>根據應用程序的要求，你可以專門加載所需的模型，但要運行完整的端到端示例，我們需要加載人臉檢測，人臉標識和人臉識別模型。模型文件在repo上可用，下方鏈接中找到。</p><p>https://github.com/justadudewhohacks/face-api.js/tree/master/weights</p><p>已經量化了模型權重，將模型文件大小減少了75％，以便使你的客戶端僅加載所需的最小數據。此外，模型權重被分割成最大4MB的塊，以允許瀏覽器緩存這些文件，使得它們只需加載一次。</p><p>模型文件可以簡單地作為靜態資源（static asset）提供給你的Web應用程序，可以在其他地方託管它們，可以通過指定文件的路徑或url來加載它們。假設你在models目錄中提供它們並且資源在public/models下：</p><pre>const MODEL_URL = '/models'<br>await faceapi.loadModels(MODEL_URL)<br></pre><p>或者，如果你只想加載特定模型：</p><pre>const MODEL_URL = '/models'<br>await faceapi.loadFaceDetectionModel(MODEL_URL)<br>await faceapi.loadFaceLandmarkModel(MODEL_URL)<br>await faceapi.loadFaceRecognitionModel(MODEL_URL)<br></pre><p>從輸入圖像接收所有面孔的完整描述</p><p>神經網絡接受HTML圖像，畫布或視頻元素或張量作為輸入。要使用score> minScore檢測輸入的人臉邊界框，我們只需聲明：</p><pre>const minConfidence = 0.8<br>const fullFaceDescriptions = await faceapi.allFaces(input, minConfidence)<br></pre><p>完整的人臉描述檢測結果(邊界框+分數)、人臉標誌以及計算出的描述符。正如你所看到的，faceapi.allFaces在前面討論過的所有內容都適用於我們。但是，你也可以手動獲取人臉位置和標誌。如果這是你的目標，github repo上有幾個示例。</p><p>請注意，邊界框和標誌位置是相對於原始圖像/媒體大小。如果顯示的圖像尺寸與原始圖像尺寸不一致，則可以調整它們的尺寸：</p><pre>const resized = fullFaceDescriptions.map(fd => fd.forSize(width, height))<br></pre><p>我們可以通過將邊界框繪製到畫布中來可視化檢測結果：</p><pre>fullFaceDescription.forEach((fd, i) => {<br> faceapi.drawDetection(canvas, fd.detection, { withScore: true })<br>})<br></pre><div class="pgc-img"><img class="lazy" src="//p2.ttnews.xyz/loading.gif" data-original="http://p3.pstatp.com/large/pgc-image/153017761175365f12ea2c5" img_width="600" img_height="334" style="height:334px" alt="JS使用者福音：在瀏覽器中運行人臉識別" inline="0"><p class="pgc-img-caption"></p></div><p>臉部可 以顯示如下：</p><pre>fullFaceDescription.forEach((fd, i) => {<br> faceapi.drawLandmarks(canvas, fd.landmarks, { drawLines: true })<br>})<br></pre><div class="pgc-img"><img class="lazy" src="//p2.ttnews.xyz/loading.gif" data-original="http://p1.pstatp.com/large/pgc-image/1530177611906df56d85038" img_width="888" img_height="331" alt="JS使用者福音：在瀏覽器中運行人臉識別" inline="0"><p class="pgc-img-caption"></p></div><p>通常，我所做的可視化工作是在img元素的頂部覆蓋一個絕對定位的畫布，其寬度和高度相同（參閱github示例以獲取更多信息）。</p><p>人臉識別</p><p>現在我們知道如何在給定輸入圖像的情況下檢索所有人臉的位置和描述符，即，我們將得到一些圖像，分別顯示每個人並計算他們的人臉描述符。這些描述符將成為我們的參考數據。</p><p>假設我們有一些可用的示例圖像，我們首先從url獲取圖像，然後使用faceapi.bufferToImage從其數據緩衝區創建HTML圖像元素：</p><pre>// fetch images from url as blobs<br>const blobs = await Promise.all(<br> ['sheldon.png' 'raj.png', 'leonard.png', 'howard.png'].map(<br> uri => (await fetch(uri)).blob()<br> )<br>)<br>// convert blobs (buffers) to HTMLImage elements<br>const images = await Promise.all(blobs.map(<br> blob => await faceapi.bufferToImage(blob)<br>))<br></pre><p>接下來，對於每個圖像，我們定位主體的面部並計算人臉描述符，就像我們之前在輸入圖像時所做的那樣：</p><pre>const refDescriptions = await Promsie.all(images.map(<br> img => (await faceapi.allFaces(img))[0]<br>))<br>const refDescriptors = refDescriptions.map(fd => fd.descriptor)<br></pre><p>現在，我們要做的一切就是遍歷輸入圖像的人臉描述，並在參考數據中找到距離最近的描述符：</p><pre>const sortAsc = (a, b) => a - b<br>const labels = ['sheldon', 'raj', 'leonard', 'howard']<br>const results = fullFaceDescription.map((fd, i) => {<br> const bestMatch = refDescriptors.map(<br> refDesc => ({<br> label: labels[i],<br> distance: faceapi.euclideanDistance(fd.descriptor, refDesc)<br> })<br> ).sort(sortAsc)[0]<br> <br> return {<br> detection: fd.detection,<br> label: bestMatch.label,<br> distance: bestMatch.distance<br> }<br>})<br></pre><p>如前所述，我們在此使用歐氏距離作為相似性度量，結果表明工作得很好。我們最終得到了在輸入圖像中檢測到的每個人臉的最佳匹配。</p><p>最後，我們可以將邊界框與標籤一起繪製到畫布中以顯示結果：</p><pre>// 0.6 is a good distance threshold value to judge<br>// whether the descriptors match or not<br>const maxDistance = 0.6<br>results.forEach(result => {<br> faceapi.drawDetection(canvas, result.detection, { withScore: false })<br> <br> const text = `${result.distance < maxDistance ? result.className : 'unkown'} (${result.distance})`<br> const { x, y, height: boxHeight } = detection.getBox()<br> faceapi.drawText(<br> canvas.getContext('2d'),<br> x,<br> y + boxHeight,<br> text<br> )<br>})<br></pre><div class="pgc-img"><img class="lazy" data-original="http://p3.pstatp.com/large/pgc-image/1530177611916ca5ecd7cdf" img_width="1000" img_height="397" alt="JS使用者福音：在瀏覽器中運行人臉識別" inline="0"><p class="pgc-img-caption"></p></div><p>以上我希望你首先了解如何使用api。另外，我建議查看repo中的其他示例。</p><p>來自：ATYUN</p></div>
閱讀更多 AiTechYun 的文章
