[{"data":1,"prerenderedAt":2028},["ShallowReactive",2],{"news-item-\u002Fja\u002Fnews\u002Fface-api-js":3},{"id":4,"title":5,"body":6,"category":2017,"created by":2018,"date":2019,"description":12,"extension":2020,"meta":2021,"navigation":252,"path":2022,"sections":2023,"seo":2024,"stem":2025,"thumbnail":2026,"__hash__":2027},"content_ja\u002Fja\u002Fnews\u002Fface-api-js.md","face-api.jsによる顔検出・認識",{"type":7,"value":8,"toc":2012},"minimark",[9,13,16,22,30,35,41,44,51,60,68,72,77,81,84,87,90,93,96,186,189,198,201,599,602,622,628,769,775,778,1146,1151,1161,1168,1433,1439,1964,1967,1975,1978,1981,1984,1990,1996,2002,2009],[10,11,12],"p",{},"顔認識システムは、デジタル画像またはライブ画像内の顔から、顔面画像データベースと照合して人物を識別するための技術として知られています。現在、研究者たちは顔認識システムが機能する様々な方法を開発しています。ID検証サービスを用いることで利用者を認証する際にも使われる最先端の顔認識方法は、顔画像から目立つ特徴を測定・特定することで機能しています。",[10,14,15],{},"そもそも、顔認識システムがコンピューター用アプリケーションでしたが、最近、スマホや、ロボット工学などのテクノロジーで広く使われるようになりました。コンピューター化された顔認識は、人間の身体特徴を測定することに関係するため、バイオメトリックスという生体認証として分類されました。生体認証としての顔認識システムは精度が虹彩認識や指紋認識より低いものの、ヒューマン・コンピューター・インタラクションや監視カメラや画像の自動索引生成といった分野で広く適用されています。",[10,17,18],{},[19,20,21],"em",{},"(Wikipediaより引用)",[10,23,24,25,29],{},"この顔認識ためのアルゴリズムをサポートしてくれるライブラリが沢山ありますが、この記事では",[26,27,28],"strong",{},"face-api.js","ライブラリを使用して紹介させて頂きます。",[31,32,34],"h2",{"id":33},"face-apijsとは","FACE-API.JSとは？",[10,36,37,40],{},[26,38,39],{},"Face-api.js","は、ブラウザおよびNodeJSで顔を検出し認識するための、Tensorflow.jsを活用したJavaScript APIです。",[10,42,43],{},"以下に、幾つかの主な機能を示します。",[45,46,47],"ul",{},[48,49,50],"li",{},"顔認識",[52,53],"img",{"className":54,"alt":57,"src":58,"style":59},[55,56],"block","mx-auto","","https:\u002F\u002Fhomepage-media.s3.ap-southeast-1.amazonaws.com\u002Fwp-content\u002Fuploads\u002F2020\u002F11\u002F18092618\u002FMinAn.png","width: 50%;",[45,61,62,65],{},[48,63,64],{},"顔ランドマーク検出",[48,66,67],{},"顔表情の認識",[52,69],{"className":70,"alt":57,"src":71,"style":59},[55,56],"https:\u002F\u002Fhomepage-media.s3.ap-southeast-1.amazonaws.com\u002Fwp-content\u002Fuploads\u002F2020\u002F11\u002F18092717\u002FMinAn_3.png",[45,73,74],{},[48,75,76],{},"年齢性別の推定",[52,78],{"className":79,"alt":57,"src":80,"style":59},[55,56],"https:\u002F\u002Fhomepage-media.s3.ap-southeast-1.amazonaws.com\u002Fwp-content\u002Fuploads\u002F2020\u002F11\u002F18092647\u002FMinAn_2.png",[10,82,83],{},"この記事では、顔認識機能を紹介させて頂きます。",[10,85,86],{},"顔認識には顔検出と顔認識を含めます。",[10,88,89],{},"簡単にいうと、我々のやりたい目的としては、提供してくれた顔の画像を基に人物を識別できることです。そのため、認識したい人の名前をラベル付けした画像（参照データ）を、各人につき1枚（または複数枚）与えます。そして、入力画像と参照データを比較して、一番似ている参照画像を見つけます。画像が十分に類似していれば、その人物の名前を出力します。それに対して、判断できない場合は不特定として出力します。",[10,91,92],{},"以下の例を見てみましょう。",[10,94,95],{},"まず、管理するためのディレクトリ構造を作成します。",[97,98,102],"pre",{"className":99,"code":100,"language":101,"meta":57,"style":57},"language-bash shiki shiki-themes material-theme-lighter material-theme-lighter material-theme-palenight","mkdir face\ntouch index.html\ntouch script.js\nmkdir data \u002F\u002F 入力画像データのドロップに使われる\nmkdir images \u002F\u002F テストに使われる画像\nmkdir models \u002F\u002F pre-trainedモデルが含まれる\nface-api-js.min.js \u002F\u002F githubからダウンロード\n","bash",[103,104,105,118,127,135,149,162,175],"code",{"__ignoreMap":57},[106,107,110,114],"span",{"class":108,"line":109},"line",1,[106,111,113],{"class":112},"s52Pk","mkdir",[106,115,117],{"class":116},"sGFVr"," face\n",[106,119,121,124],{"class":108,"line":120},2,[106,122,123],{"class":112},"touch",[106,125,126],{"class":116}," index.html\n",[106,128,130,132],{"class":108,"line":129},3,[106,131,123],{"class":112},[106,133,134],{"class":116}," script.js\n",[106,136,138,140,143,146],{"class":108,"line":137},4,[106,139,113],{"class":112},[106,141,142],{"class":116}," data",[106,144,145],{"class":116}," \u002F\u002F",[106,147,148],{"class":116}," 入力画像データのドロップに使われる\n",[106,150,152,154,157,159],{"class":108,"line":151},5,[106,153,113],{"class":112},[106,155,156],{"class":116}," images",[106,158,145],{"class":116},[106,160,161],{"class":116}," テストに使われる画像\n",[106,163,165,167,170,172],{"class":108,"line":164},6,[106,166,113],{"class":112},[106,168,169],{"class":116}," models",[106,171,145],{"class":116},[106,173,174],{"class":116}," pre-trainedモデルが含まれる\n",[106,176,178,181,183],{"class":108,"line":177},7,[106,179,180],{"class":112},"face-api-js.min.js",[106,182,145],{"class":116},[106,184,185],{"class":116}," githubからダウンロード\n",[10,187,188],{},"つぎ、face-api.jsが提供してくれるモデルをダウンロードします。",[10,190,191,197],{},[192,193,194],"a",{"href":194,"rel":195},"https:\u002F\u002Fgithub.com\u002Fjustadudewhohacks\u002Fface-api.js\u002Ftree\u002Fmaster\u002Fweights",[196],"nofollow","からモデルのデータをダウンロードします。",[10,199,200],{},"以下のように、htmlファイルに、画像を入れて、バウンディングボックスという枠線で顔を囲むためのcanvasタグを追加します。",[97,202,206],{"className":203,"code":204,"language":205,"meta":57,"style":57},"language-html shiki shiki-themes material-theme-lighter material-theme-lighter material-theme-palenight","\u003C!DOCTYPE html>\n\u003Chtml lang=\"en\">\n\n\u003Chead>\n    \u003Cmeta charset=\"UTF-8\">\n    \u003Cmeta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n    \u003Cmeta http-equiv=\"X-UA-Compatible\" content=\"ie=edge\">\n    \u003Cscript src=\".\u002Fface-api.min.js\">\u003C\u002Fscript>\n    \u003Cscript src=\".\u002Fscript.js\">\u003C\u002Fscript>\n    \u003Ctitle>Face Recognition\u003C\u002Ftitle>\n    \u003Cstyle>\n        canvas {\n            position: absolute;\n            top: 0;\n            left: 0;\n        }\n    \u003C\u002Fstyle>\n\u003C\u002Fhead>\n\n\u003Cbody>\n    \u003Cimg id=\"myImg\" src=\"images\u002Fhuu.jpg\" \u002F>\n    \u003Ccanvas id=\"myCanvas\">\n\u003C\u002Fbody>\n\n\u003C\u002Fhtml>\n","html",[103,207,208,225,248,254,263,285,317,348,375,399,421,431,440,456,470,482,488,498,507,512,522,555,576,585,590],{"__ignoreMap":57},[106,209,210,214,218,222],{"class":108,"line":109},[106,211,213],{"class":212},"sDfIl","\u003C!",[106,215,217],{"class":216},"sRlkE","DOCTYPE",[106,219,221],{"class":220},"smZ93"," html",[106,223,224],{"class":212},">\n",[106,226,227,230,232,235,238,241,244,246],{"class":108,"line":120},[106,228,229],{"class":212},"\u003C",[106,231,205],{"class":216},[106,233,234],{"class":220}," lang",[106,236,237],{"class":212},"=",[106,239,240],{"class":212},"\"",[106,242,243],{"class":116},"en",[106,245,240],{"class":212},[106,247,224],{"class":212},[106,249,250],{"class":108,"line":129},[106,251,253],{"emptyLinePlaceholder":252},true,"\n",[106,255,256,258,261],{"class":108,"line":137},[106,257,229],{"class":212},[106,259,260],{"class":216},"head",[106,262,224],{"class":212},[106,264,265,268,271,274,276,278,281,283],{"class":108,"line":151},[106,266,267],{"class":212},"    \u003C",[106,269,270],{"class":216},"meta",[106,272,273],{"class":220}," charset",[106,275,237],{"class":212},[106,277,240],{"class":212},[106,279,280],{"class":116},"UTF-8",[106,282,240],{"class":212},[106,284,224],{"class":212},[106,286,287,289,291,294,296,298,301,303,306,308,310,313,315],{"class":108,"line":164},[106,288,267],{"class":212},[106,290,270],{"class":216},[106,292,293],{"class":220}," name",[106,295,237],{"class":212},[106,297,240],{"class":212},[106,299,300],{"class":116},"viewport",[106,302,240],{"class":212},[106,304,305],{"class":220}," content",[106,307,237],{"class":212},[106,309,240],{"class":212},[106,311,312],{"class":116},"width=device-width, initial-scale=1.0",[106,314,240],{"class":212},[106,316,224],{"class":212},[106,318,319,321,323,326,328,330,333,335,337,339,341,344,346],{"class":108,"line":177},[106,320,267],{"class":212},[106,322,270],{"class":216},[106,324,325],{"class":220}," http-equiv",[106,327,237],{"class":212},[106,329,240],{"class":212},[106,331,332],{"class":116},"X-UA-Compatible",[106,334,240],{"class":212},[106,336,305],{"class":220},[106,338,237],{"class":212},[106,340,240],{"class":212},[106,342,343],{"class":116},"ie=edge",[106,345,240],{"class":212},[106,347,224],{"class":212},[106,349,351,353,356,359,361,363,366,368,371,373],{"class":108,"line":350},8,[106,352,267],{"class":212},[106,354,355],{"class":216},"script",[106,357,358],{"class":220}," src",[106,360,237],{"class":212},[106,362,240],{"class":212},[106,364,365],{"class":116},".\u002Fface-api.min.js",[106,367,240],{"class":212},[106,369,370],{"class":212},">\u003C\u002F",[106,372,355],{"class":216},[106,374,224],{"class":212},[106,376,378,380,382,384,386,388,391,393,395,397],{"class":108,"line":377},9,[106,379,267],{"class":212},[106,381,355],{"class":216},[106,383,358],{"class":220},[106,385,237],{"class":212},[106,387,240],{"class":212},[106,389,390],{"class":116},".\u002Fscript.js",[106,392,240],{"class":212},[106,394,370],{"class":212},[106,396,355],{"class":216},[106,398,224],{"class":212},[106,400,402,404,407,410,414,417,419],{"class":108,"line":401},10,[106,403,267],{"class":212},[106,405,406],{"class":216},"title",[106,408,409],{"class":212},">",[106,411,413],{"class":412},"sZSNi","Face Recognition",[106,415,416],{"class":212},"\u003C\u002F",[106,418,406],{"class":216},[106,420,224],{"class":212},[106,422,424,426,429],{"class":108,"line":423},11,[106,425,267],{"class":212},[106,427,428],{"class":216},"style",[106,430,224],{"class":212},[106,432,434,437],{"class":108,"line":433},12,[106,435,436],{"class":112},"        canvas",[106,438,439],{"class":212}," {\n",[106,441,443,447,450,453],{"class":108,"line":442},13,[106,444,446],{"class":445},"spFsF","            position",[106,448,449],{"class":212},":",[106,451,452],{"class":412}," absolute",[106,454,455],{"class":212},";\n",[106,457,459,462,464,468],{"class":108,"line":458},14,[106,460,461],{"class":445},"            top",[106,463,449],{"class":212},[106,465,467],{"class":466},"sYRBq"," 0",[106,469,455],{"class":212},[106,471,473,476,478,480],{"class":108,"line":472},15,[106,474,475],{"class":445},"            left",[106,477,449],{"class":212},[106,479,467],{"class":466},[106,481,455],{"class":212},[106,483,485],{"class":108,"line":484},16,[106,486,487],{"class":212},"        }\n",[106,489,491,494,496],{"class":108,"line":490},17,[106,492,493],{"class":212},"    \u003C\u002F",[106,495,428],{"class":216},[106,497,224],{"class":212},[106,499,501,503,505],{"class":108,"line":500},18,[106,502,416],{"class":212},[106,504,260],{"class":216},[106,506,224],{"class":212},[106,508,510],{"class":108,"line":509},19,[106,511,253],{"emptyLinePlaceholder":252},[106,513,515,517,520],{"class":108,"line":514},20,[106,516,229],{"class":212},[106,518,519],{"class":216},"body",[106,521,224],{"class":212},[106,523,525,527,529,532,534,536,539,541,543,545,547,550,552],{"class":108,"line":524},21,[106,526,267],{"class":212},[106,528,52],{"class":216},[106,530,531],{"class":220}," id",[106,533,237],{"class":212},[106,535,240],{"class":212},[106,537,538],{"class":116},"myImg",[106,540,240],{"class":212},[106,542,358],{"class":220},[106,544,237],{"class":212},[106,546,240],{"class":212},[106,548,549],{"class":116},"images\u002Fhuu.jpg",[106,551,240],{"class":212},[106,553,554],{"class":212}," \u002F>\n",[106,556,558,560,563,565,567,569,572,574],{"class":108,"line":557},22,[106,559,267],{"class":212},[106,561,562],{"class":216},"canvas",[106,564,531],{"class":220},[106,566,237],{"class":212},[106,568,240],{"class":212},[106,570,571],{"class":116},"myCanvas",[106,573,240],{"class":212},[106,575,224],{"class":212},[106,577,579,581,583],{"class":108,"line":578},23,[106,580,416],{"class":212},[106,582,519],{"class":216},[106,584,224],{"class":212},[106,586,588],{"class":108,"line":587},24,[106,589,253],{"emptyLinePlaceholder":252},[106,591,593,595,597],{"class":108,"line":592},25,[106,594,416],{"class":212},[106,596,205],{"class":216},[106,598,224],{"class":212},[10,600,601],{},"プロジェクトへモデルをロードします。ここで、以下の3つの主なモデルを使います。",[45,603,604,610,616],{},[48,605,606,609],{},[26,607,608],{},"ssdMobilenetV1 Model","：顔検出に使われるpre-trainedモデル",[48,611,612,615],{},[26,613,614],{},"faceLandmark68Net Model","：顔のポイントの表示に使われるpre-trainedモデル",[48,617,618,621],{},[26,619,620],{},"FaceRecognitionNet Model","：顔認識に使われるpre-trainedモデル",[10,623,624,627],{},[103,625,626],{},"script.js","ファイルにて、以下のの3つのモデルをロードしておきます。",[97,629,633],{"className":630,"code":631,"language":632,"meta":57,"style":57},"language-javascript shiki shiki-themes material-theme-lighter material-theme-lighter material-theme-palenight","(async () => {\n  \u002F\u002F Load model\n  await faceapi.nets.ssdMobilenetv1.loadFromUri(\"\u002Fmodels\");\n  await faceapi.nets.faceRecognitionNet.loadFromUri(\"\u002Fmodels\");\n  await faceapi.nets.faceLandmark68Net.loadFromUri(\"\u002Fmodels\");\n})();\n","javascript",[103,634,635,651,657,697,728,759],{"__ignoreMap":57},[106,636,637,640,643,646,649],{"class":108,"line":109},[106,638,639],{"class":412},"(",[106,641,642],{"class":220},"async",[106,644,645],{"class":212}," ()",[106,647,648],{"class":220}," =>",[106,650,439],{"class":212},[106,652,653],{"class":108,"line":120},[106,654,656],{"class":655},"sWuyu","  \u002F\u002F Load model\n",[106,658,659,663,666,669,672,674,677,679,683,685,687,690,692,695],{"class":108,"line":129},[106,660,662],{"class":661},"s8R28","  await",[106,664,665],{"class":412}," faceapi",[106,667,668],{"class":212},".",[106,670,671],{"class":412},"nets",[106,673,668],{"class":212},[106,675,676],{"class":412},"ssdMobilenetv1",[106,678,668],{"class":212},[106,680,682],{"class":681},"s3cPz","loadFromUri",[106,684,639],{"class":216},[106,686,240],{"class":212},[106,688,689],{"class":116},"\u002Fmodels",[106,691,240],{"class":212},[106,693,694],{"class":216},")",[106,696,455],{"class":212},[106,698,699,701,703,705,707,709,712,714,716,718,720,722,724,726],{"class":108,"line":137},[106,700,662],{"class":661},[106,702,665],{"class":412},[106,704,668],{"class":212},[106,706,671],{"class":412},[106,708,668],{"class":212},[106,710,711],{"class":412},"faceRecognitionNet",[106,713,668],{"class":212},[106,715,682],{"class":681},[106,717,639],{"class":216},[106,719,240],{"class":212},[106,721,689],{"class":116},[106,723,240],{"class":212},[106,725,694],{"class":216},[106,727,455],{"class":212},[106,729,730,732,734,736,738,740,743,745,747,749,751,753,755,757],{"class":108,"line":151},[106,731,662],{"class":661},[106,733,665],{"class":412},[106,735,668],{"class":212},[106,737,671],{"class":412},[106,739,668],{"class":212},[106,741,742],{"class":412},"faceLandmark68Net",[106,744,668],{"class":212},[106,746,682],{"class":681},[106,748,639],{"class":216},[106,750,240],{"class":212},[106,752,689],{"class":116},[106,754,240],{"class":212},[106,756,694],{"class":216},[106,758,455],{"class":212},[106,760,761,764,767],{"class":108,"line":164},[106,762,763],{"class":212},"}",[106,765,766],{"class":412},")()",[106,768,455],{"class":212},[10,770,771,774],{},[103,772,773],{},"detectSingleFace()","関数を使って画像の顔を検出します。",[10,776,777],{},"対象モデルをロードしたら、以下のように顔検出の処理を実装します。",[97,779,781],{"className":630,"code":780,"language":632,"meta":57,"style":57},"(async () => {\n  \u002F\u002F Load model\n  await faceapi.nets.ssdMobilenetv1.loadFromUri(\"\u002Fmodels\");\n  await faceapi.nets.faceRecognitionNet.loadFromUri(\"\u002Fmodels\");\n  await faceapi.nets.faceLandmark68Net.loadFromUri(\"\u002Fmodels\");\n\n  \u002F\u002F Detect Face\n  const input = document.getElementById(\"myImg\");\n  const result = await faceapi\n    .detectSingleFace(input, new faceapi.SsdMobilenetv1Options())\n    .withFaceLandmarks()\n    .withFaceDescriptor();\n  const displaySize = { width: input.width, height: input.height };\n  \u002F\u002F resize the overlay canvas to the input dimensions\n  const canvas = document.getElementById(\"myCanvas\");\n  faceapi.matchDimensions(canvas, displaySize);\n  const resizedDetections = faceapi.resizeResults(result, displaySize);\n  console.log(resizedDetections);\n})();\n",[103,782,783,795,799,829,859,889,893,898,929,944,973,983,995,1036,1041,1068,1090,1119,1138],{"__ignoreMap":57},[106,784,785,787,789,791,793],{"class":108,"line":109},[106,786,639],{"class":412},[106,788,642],{"class":220},[106,790,645],{"class":212},[106,792,648],{"class":220},[106,794,439],{"class":212},[106,796,797],{"class":108,"line":120},[106,798,656],{"class":655},[106,800,801,803,805,807,809,811,813,815,817,819,821,823,825,827],{"class":108,"line":129},[106,802,662],{"class":661},[106,804,665],{"class":412},[106,806,668],{"class":212},[106,808,671],{"class":412},[106,810,668],{"class":212},[106,812,676],{"class":412},[106,814,668],{"class":212},[106,816,682],{"class":681},[106,818,639],{"class":216},[106,820,240],{"class":212},[106,822,689],{"class":116},[106,824,240],{"class":212},[106,826,694],{"class":216},[106,828,455],{"class":212},[106,830,831,833,835,837,839,841,843,845,847,849,851,853,855,857],{"class":108,"line":137},[106,832,662],{"class":661},[106,834,665],{"class":412},[106,836,668],{"class":212},[106,838,671],{"class":412},[106,840,668],{"class":212},[106,842,711],{"class":412},[106,844,668],{"class":212},[106,846,682],{"class":681},[106,848,639],{"class":216},[106,850,240],{"class":212},[106,852,689],{"class":116},[106,854,240],{"class":212},[106,856,694],{"class":216},[106,858,455],{"class":212},[106,860,861,863,865,867,869,871,873,875,877,879,881,883,885,887],{"class":108,"line":151},[106,862,662],{"class":661},[106,864,665],{"class":412},[106,866,668],{"class":212},[106,868,671],{"class":412},[106,870,668],{"class":212},[106,872,742],{"class":412},[106,874,668],{"class":212},[106,876,682],{"class":681},[106,878,639],{"class":216},[106,880,240],{"class":212},[106,882,689],{"class":116},[106,884,240],{"class":212},[106,886,694],{"class":216},[106,888,455],{"class":212},[106,890,891],{"class":108,"line":164},[106,892,253],{"emptyLinePlaceholder":252},[106,894,895],{"class":108,"line":177},[106,896,897],{"class":655},"  \u002F\u002F Detect Face\n",[106,899,900,903,906,909,912,914,917,919,921,923,925,927],{"class":108,"line":350},[106,901,902],{"class":220},"  const",[106,904,905],{"class":412}," input",[106,907,908],{"class":212}," =",[106,910,911],{"class":412}," document",[106,913,668],{"class":212},[106,915,916],{"class":681},"getElementById",[106,918,639],{"class":216},[106,920,240],{"class":212},[106,922,538],{"class":116},[106,924,240],{"class":212},[106,926,694],{"class":216},[106,928,455],{"class":212},[106,930,931,933,936,938,941],{"class":108,"line":377},[106,932,902],{"class":220},[106,934,935],{"class":412}," result",[106,937,908],{"class":212},[106,939,940],{"class":661}," await",[106,942,943],{"class":412}," faceapi\n",[106,945,946,949,952,954,957,960,963,965,967,970],{"class":108,"line":401},[106,947,948],{"class":212},"    .",[106,950,951],{"class":681},"detectSingleFace",[106,953,639],{"class":216},[106,955,956],{"class":412},"input",[106,958,959],{"class":212},",",[106,961,962],{"class":212}," new",[106,964,665],{"class":412},[106,966,668],{"class":212},[106,968,969],{"class":681},"SsdMobilenetv1Options",[106,971,972],{"class":216},"())\n",[106,974,975,977,980],{"class":108,"line":423},[106,976,948],{"class":212},[106,978,979],{"class":681},"withFaceLandmarks",[106,981,982],{"class":216},"()\n",[106,984,985,987,990,993],{"class":108,"line":433},[106,986,948],{"class":212},[106,988,989],{"class":681},"withFaceDescriptor",[106,991,992],{"class":216},"()",[106,994,455],{"class":212},[106,996,997,999,1002,1004,1007,1010,1012,1014,1016,1019,1021,1024,1026,1028,1030,1033],{"class":108,"line":442},[106,998,902],{"class":220},[106,1000,1001],{"class":412}," displaySize",[106,1003,908],{"class":212},[106,1005,1006],{"class":212}," {",[106,1008,1009],{"class":216}," width",[106,1011,449],{"class":212},[106,1013,905],{"class":412},[106,1015,668],{"class":212},[106,1017,1018],{"class":412},"width",[106,1020,959],{"class":212},[106,1022,1023],{"class":216}," height",[106,1025,449],{"class":212},[106,1027,905],{"class":412},[106,1029,668],{"class":212},[106,1031,1032],{"class":412},"height",[106,1034,1035],{"class":212}," };\n",[106,1037,1038],{"class":108,"line":458},[106,1039,1040],{"class":655},"  \u002F\u002F resize the overlay canvas to the input dimensions\n",[106,1042,1043,1045,1048,1050,1052,1054,1056,1058,1060,1062,1064,1066],{"class":108,"line":472},[106,1044,902],{"class":220},[106,1046,1047],{"class":412}," canvas",[106,1049,908],{"class":212},[106,1051,911],{"class":412},[106,1053,668],{"class":212},[106,1055,916],{"class":681},[106,1057,639],{"class":216},[106,1059,240],{"class":212},[106,1061,571],{"class":116},[106,1063,240],{"class":212},[106,1065,694],{"class":216},[106,1067,455],{"class":212},[106,1069,1070,1073,1075,1078,1080,1082,1084,1086,1088],{"class":108,"line":484},[106,1071,1072],{"class":412},"  faceapi",[106,1074,668],{"class":212},[106,1076,1077],{"class":681},"matchDimensions",[106,1079,639],{"class":216},[106,1081,562],{"class":412},[106,1083,959],{"class":212},[106,1085,1001],{"class":412},[106,1087,694],{"class":216},[106,1089,455],{"class":212},[106,1091,1092,1094,1097,1099,1101,1103,1106,1108,1111,1113,1115,1117],{"class":108,"line":490},[106,1093,902],{"class":220},[106,1095,1096],{"class":412}," resizedDetections",[106,1098,908],{"class":212},[106,1100,665],{"class":412},[106,1102,668],{"class":212},[106,1104,1105],{"class":681},"resizeResults",[106,1107,639],{"class":216},[106,1109,1110],{"class":412},"result",[106,1112,959],{"class":212},[106,1114,1001],{"class":412},[106,1116,694],{"class":216},[106,1118,455],{"class":212},[106,1120,1121,1124,1126,1129,1131,1134,1136],{"class":108,"line":500},[106,1122,1123],{"class":412},"  console",[106,1125,668],{"class":212},[106,1127,1128],{"class":681},"log",[106,1130,639],{"class":216},[106,1132,1133],{"class":412},"resizedDetections",[106,1135,694],{"class":216},[106,1137,455],{"class":212},[106,1139,1140,1142,1144],{"class":108,"line":509},[106,1141,763],{"class":212},[106,1143,766],{"class":412},[106,1145,455],{"class":212},[10,1147,1148,1150],{},[103,1149,773],{},"関数からは、顔検出の結果を返却し、顔のパーツの座標をも返却します。",[10,1152,1153,1156,1157,1160],{},[103,1154,1155],{},"FaceMatcher()","関数と",[103,1158,1159],{},"findBestMatch()","関数を使って顔を認識します。",[10,1162,1163,1164,1167],{},"顔検出を実装した後、顔を認識する",[103,1165,1166],{},"detectFace()","関数を実装しましょう。",[97,1169,1171],{"className":630,"code":1170,"language":632,"meta":57,"style":57},"async function detectFace() {\n  const label = \"Huu\";\n  const numberImage = 5;\n  const descriptions = [];\n  for (let i = 1; i \u003C= numberImage; i++) {\n    const img = await faceapi.fetchImage(\n      `\u002Fdata\u002FHuu\u002F${i}.jpg`\n    );\n    const detection = await faceapi\n      .detectSingleFace(img)\n      .withFaceLandmarks()\n      .withFaceDescriptor();\n    descriptions.push(detection.descriptor);\n  }\n  return new faceapi.LabeledFaceDescriptors(label, descriptions);\n}\n",[103,1172,1173,1187,1206,1220,1234,1276,1298,1320,1327,1340,1354,1362,1372,1396,1401,1428],{"__ignoreMap":57},[106,1174,1175,1177,1180,1183,1185],{"class":108,"line":109},[106,1176,642],{"class":220},[106,1178,1179],{"class":220}," function",[106,1181,1182],{"class":681}," detectFace",[106,1184,992],{"class":212},[106,1186,439],{"class":212},[106,1188,1189,1191,1194,1196,1199,1202,1204],{"class":108,"line":120},[106,1190,902],{"class":220},[106,1192,1193],{"class":412}," label",[106,1195,908],{"class":212},[106,1197,1198],{"class":212}," \"",[106,1200,1201],{"class":116},"Huu",[106,1203,240],{"class":212},[106,1205,455],{"class":212},[106,1207,1208,1210,1213,1215,1218],{"class":108,"line":129},[106,1209,902],{"class":220},[106,1211,1212],{"class":412}," numberImage",[106,1214,908],{"class":212},[106,1216,1217],{"class":466}," 5",[106,1219,455],{"class":212},[106,1221,1222,1224,1227,1229,1232],{"class":108,"line":137},[106,1223,902],{"class":220},[106,1225,1226],{"class":412}," descriptions",[106,1228,908],{"class":212},[106,1230,1231],{"class":216}," []",[106,1233,455],{"class":212},[106,1235,1236,1239,1242,1245,1248,1250,1253,1256,1258,1261,1263,1265,1267,1270,1273],{"class":108,"line":151},[106,1237,1238],{"class":661},"  for",[106,1240,1241],{"class":216}," (",[106,1243,1244],{"class":220},"let",[106,1246,1247],{"class":412}," i",[106,1249,908],{"class":212},[106,1251,1252],{"class":466}," 1",[106,1254,1255],{"class":212},";",[106,1257,1247],{"class":412},[106,1259,1260],{"class":212}," \u003C=",[106,1262,1212],{"class":412},[106,1264,1255],{"class":212},[106,1266,1247],{"class":412},[106,1268,1269],{"class":212},"++",[106,1271,1272],{"class":216},") ",[106,1274,1275],{"class":212},"{\n",[106,1277,1278,1281,1284,1286,1288,1290,1292,1295],{"class":108,"line":164},[106,1279,1280],{"class":220},"    const",[106,1282,1283],{"class":412}," img",[106,1285,908],{"class":212},[106,1287,940],{"class":661},[106,1289,665],{"class":412},[106,1291,668],{"class":212},[106,1293,1294],{"class":681},"fetchImage",[106,1296,1297],{"class":216},"(\n",[106,1299,1300,1303,1306,1309,1312,1314,1317],{"class":108,"line":177},[106,1301,1302],{"class":212},"      `",[106,1304,1305],{"class":116},"\u002Fdata\u002FHuu\u002F",[106,1307,1308],{"class":212},"${",[106,1310,1311],{"class":412},"i",[106,1313,763],{"class":212},[106,1315,1316],{"class":116},".jpg",[106,1318,1319],{"class":212},"`\n",[106,1321,1322,1325],{"class":108,"line":350},[106,1323,1324],{"class":216},"    )",[106,1326,455],{"class":212},[106,1328,1329,1331,1334,1336,1338],{"class":108,"line":377},[106,1330,1280],{"class":220},[106,1332,1333],{"class":412}," detection",[106,1335,908],{"class":212},[106,1337,940],{"class":661},[106,1339,943],{"class":412},[106,1341,1342,1345,1347,1349,1351],{"class":108,"line":401},[106,1343,1344],{"class":212},"      .",[106,1346,951],{"class":681},[106,1348,639],{"class":216},[106,1350,52],{"class":412},[106,1352,1353],{"class":216},")\n",[106,1355,1356,1358,1360],{"class":108,"line":423},[106,1357,1344],{"class":212},[106,1359,979],{"class":681},[106,1361,982],{"class":216},[106,1363,1364,1366,1368,1370],{"class":108,"line":433},[106,1365,1344],{"class":212},[106,1367,989],{"class":681},[106,1369,992],{"class":216},[106,1371,455],{"class":212},[106,1373,1374,1377,1379,1382,1384,1387,1389,1392,1394],{"class":108,"line":442},[106,1375,1376],{"class":412},"    descriptions",[106,1378,668],{"class":212},[106,1380,1381],{"class":681},"push",[106,1383,639],{"class":216},[106,1385,1386],{"class":412},"detection",[106,1388,668],{"class":212},[106,1390,1391],{"class":412},"descriptor",[106,1393,694],{"class":216},[106,1395,455],{"class":212},[106,1397,1398],{"class":108,"line":458},[106,1399,1400],{"class":212},"  }\n",[106,1402,1403,1406,1408,1410,1412,1415,1417,1420,1422,1424,1426],{"class":108,"line":472},[106,1404,1405],{"class":661},"  return",[106,1407,962],{"class":212},[106,1409,665],{"class":412},[106,1411,668],{"class":212},[106,1413,1414],{"class":681},"LabeledFaceDescriptors",[106,1416,639],{"class":216},[106,1418,1419],{"class":412},"label",[106,1421,959],{"class":212},[106,1423,1226],{"class":412},[106,1425,694],{"class":216},[106,1427,455],{"class":212},[106,1429,1430],{"class":108,"line":484},[106,1431,1432],{"class":212},"}\n",[10,1434,1435,1436,1438],{},"それから、",[103,1437,1166],{},"関数を使って顔を認識して枠線で顔を囲むように実装します。",[97,1440,1442],{"className":630,"code":1441,"language":632,"meta":57,"style":57},"(async () => {\n  \u002F\u002F Load model\n  await faceapi.nets.ssdMobilenetv1.loadFromUri(\"\u002Fmodels\");\n  await faceapi.nets.faceRecognitionNet.loadFromUri(\"\u002Fmodels\");\n  await faceapi.nets.faceLandmark68Net.loadFromUri(\"\u002Fmodels\");\n\n  \u002F\u002F Detect Face\n  const input = document.getElementById(\"myImg\");\n  const result = await faceapi\n    .detectSingleFace(input, new faceapi.SsdMobilenetv1Options())\n    .withFaceLandmarks()\n    .withFaceDescriptor();\n  const displaySize = { width: input.width, height: input.height };\n  \u002F\u002F resize the overlay canvas to the input dimensions\n  const canvas = document.getElementById(\"myCanvas\");\n  faceapi.matchDimensions(canvas, displaySize);\n  const resizedDetections = faceapi.resizeResults(result, displaySize);\n  console.log(resizedDetections);\n\n  \u002F\u002F Recognize Face\n  const labeledFaceDescriptors = await detectFace();\n  const faceMatcher = new faceapi.FaceMatcher(labeledFaceDescriptors, 0.7);\n  if (result) {\n    const bestMatch = faceMatcher.findBestMatch(result.descriptor);\n    const box = resizedDetections.detection.box;\n    const drawBox = new faceapi.draw.DrawBox(box, { label: bestMatch.label });\n    drawBox.draw(canvas);\n  }\n})();\n",[103,1443,1444,1456,1460,1490,1520,1550,1554,1558,1584,1596,1618,1626,1636,1670,1674,1700,1720,1746,1762,1766,1771,1788,1820,1833,1861,1883,1932,1950,1955],{"__ignoreMap":57},[106,1445,1446,1448,1450,1452,1454],{"class":108,"line":109},[106,1447,639],{"class":412},[106,1449,642],{"class":220},[106,1451,645],{"class":212},[106,1453,648],{"class":220},[106,1455,439],{"class":212},[106,1457,1458],{"class":108,"line":120},[106,1459,656],{"class":655},[106,1461,1462,1464,1466,1468,1470,1472,1474,1476,1478,1480,1482,1484,1486,1488],{"class":108,"line":129},[106,1463,662],{"class":661},[106,1465,665],{"class":412},[106,1467,668],{"class":212},[106,1469,671],{"class":412},[106,1471,668],{"class":212},[106,1473,676],{"class":412},[106,1475,668],{"class":212},[106,1477,682],{"class":681},[106,1479,639],{"class":216},[106,1481,240],{"class":212},[106,1483,689],{"class":116},[106,1485,240],{"class":212},[106,1487,694],{"class":216},[106,1489,455],{"class":212},[106,1491,1492,1494,1496,1498,1500,1502,1504,1506,1508,1510,1512,1514,1516,1518],{"class":108,"line":137},[106,1493,662],{"class":661},[106,1495,665],{"class":412},[106,1497,668],{"class":212},[106,1499,671],{"class":412},[106,1501,668],{"class":212},[106,1503,711],{"class":412},[106,1505,668],{"class":212},[106,1507,682],{"class":681},[106,1509,639],{"class":216},[106,1511,240],{"class":212},[106,1513,689],{"class":116},[106,1515,240],{"class":212},[106,1517,694],{"class":216},[106,1519,455],{"class":212},[106,1521,1522,1524,1526,1528,1530,1532,1534,1536,1538,1540,1542,1544,1546,1548],{"class":108,"line":151},[106,1523,662],{"class":661},[106,1525,665],{"class":412},[106,1527,668],{"class":212},[106,1529,671],{"class":412},[106,1531,668],{"class":212},[106,1533,742],{"class":412},[106,1535,668],{"class":212},[106,1537,682],{"class":681},[106,1539,639],{"class":216},[106,1541,240],{"class":212},[106,1543,689],{"class":116},[106,1545,240],{"class":212},[106,1547,694],{"class":216},[106,1549,455],{"class":212},[106,1551,1552],{"class":108,"line":164},[106,1553,253],{"emptyLinePlaceholder":252},[106,1555,1556],{"class":108,"line":177},[106,1557,897],{"class":655},[106,1559,1560,1562,1564,1566,1568,1570,1572,1574,1576,1578,1580,1582],{"class":108,"line":350},[106,1561,902],{"class":220},[106,1563,905],{"class":412},[106,1565,908],{"class":212},[106,1567,911],{"class":412},[106,1569,668],{"class":212},[106,1571,916],{"class":681},[106,1573,639],{"class":216},[106,1575,240],{"class":212},[106,1577,538],{"class":116},[106,1579,240],{"class":212},[106,1581,694],{"class":216},[106,1583,455],{"class":212},[106,1585,1586,1588,1590,1592,1594],{"class":108,"line":377},[106,1587,902],{"class":220},[106,1589,935],{"class":412},[106,1591,908],{"class":212},[106,1593,940],{"class":661},[106,1595,943],{"class":412},[106,1597,1598,1600,1602,1604,1606,1608,1610,1612,1614,1616],{"class":108,"line":401},[106,1599,948],{"class":212},[106,1601,951],{"class":681},[106,1603,639],{"class":216},[106,1605,956],{"class":412},[106,1607,959],{"class":212},[106,1609,962],{"class":212},[106,1611,665],{"class":412},[106,1613,668],{"class":212},[106,1615,969],{"class":681},[106,1617,972],{"class":216},[106,1619,1620,1622,1624],{"class":108,"line":423},[106,1621,948],{"class":212},[106,1623,979],{"class":681},[106,1625,982],{"class":216},[106,1627,1628,1630,1632,1634],{"class":108,"line":433},[106,1629,948],{"class":212},[106,1631,989],{"class":681},[106,1633,992],{"class":216},[106,1635,455],{"class":212},[106,1637,1638,1640,1642,1644,1646,1648,1650,1652,1654,1656,1658,1660,1662,1664,1666,1668],{"class":108,"line":442},[106,1639,902],{"class":220},[106,1641,1001],{"class":412},[106,1643,908],{"class":212},[106,1645,1006],{"class":212},[106,1647,1009],{"class":216},[106,1649,449],{"class":212},[106,1651,905],{"class":412},[106,1653,668],{"class":212},[106,1655,1018],{"class":412},[106,1657,959],{"class":212},[106,1659,1023],{"class":216},[106,1661,449],{"class":212},[106,1663,905],{"class":412},[106,1665,668],{"class":212},[106,1667,1032],{"class":412},[106,1669,1035],{"class":212},[106,1671,1672],{"class":108,"line":458},[106,1673,1040],{"class":655},[106,1675,1676,1678,1680,1682,1684,1686,1688,1690,1692,1694,1696,1698],{"class":108,"line":472},[106,1677,902],{"class":220},[106,1679,1047],{"class":412},[106,1681,908],{"class":212},[106,1683,911],{"class":412},[106,1685,668],{"class":212},[106,1687,916],{"class":681},[106,1689,639],{"class":216},[106,1691,240],{"class":212},[106,1693,571],{"class":116},[106,1695,240],{"class":212},[106,1697,694],{"class":216},[106,1699,455],{"class":212},[106,1701,1702,1704,1706,1708,1710,1712,1714,1716,1718],{"class":108,"line":484},[106,1703,1072],{"class":412},[106,1705,668],{"class":212},[106,1707,1077],{"class":681},[106,1709,639],{"class":216},[106,1711,562],{"class":412},[106,1713,959],{"class":212},[106,1715,1001],{"class":412},[106,1717,694],{"class":216},[106,1719,455],{"class":212},[106,1721,1722,1724,1726,1728,1730,1732,1734,1736,1738,1740,1742,1744],{"class":108,"line":490},[106,1723,902],{"class":220},[106,1725,1096],{"class":412},[106,1727,908],{"class":212},[106,1729,665],{"class":412},[106,1731,668],{"class":212},[106,1733,1105],{"class":681},[106,1735,639],{"class":216},[106,1737,1110],{"class":412},[106,1739,959],{"class":212},[106,1741,1001],{"class":412},[106,1743,694],{"class":216},[106,1745,455],{"class":212},[106,1747,1748,1750,1752,1754,1756,1758,1760],{"class":108,"line":500},[106,1749,1123],{"class":412},[106,1751,668],{"class":212},[106,1753,1128],{"class":681},[106,1755,639],{"class":216},[106,1757,1133],{"class":412},[106,1759,694],{"class":216},[106,1761,455],{"class":212},[106,1763,1764],{"class":108,"line":509},[106,1765,253],{"emptyLinePlaceholder":252},[106,1767,1768],{"class":108,"line":514},[106,1769,1770],{"class":655},"  \u002F\u002F Recognize Face\n",[106,1772,1773,1775,1778,1780,1782,1784,1786],{"class":108,"line":524},[106,1774,902],{"class":220},[106,1776,1777],{"class":412}," labeledFaceDescriptors",[106,1779,908],{"class":212},[106,1781,940],{"class":661},[106,1783,1182],{"class":681},[106,1785,992],{"class":216},[106,1787,455],{"class":212},[106,1789,1790,1792,1795,1797,1799,1801,1803,1806,1808,1811,1813,1816,1818],{"class":108,"line":557},[106,1791,902],{"class":220},[106,1793,1794],{"class":412}," faceMatcher",[106,1796,908],{"class":212},[106,1798,962],{"class":212},[106,1800,665],{"class":412},[106,1802,668],{"class":212},[106,1804,1805],{"class":681},"FaceMatcher",[106,1807,639],{"class":216},[106,1809,1810],{"class":412},"labeledFaceDescriptors",[106,1812,959],{"class":212},[106,1814,1815],{"class":466}," 0.7",[106,1817,694],{"class":216},[106,1819,455],{"class":212},[106,1821,1822,1825,1827,1829,1831],{"class":108,"line":578},[106,1823,1824],{"class":661},"  if",[106,1826,1241],{"class":216},[106,1828,1110],{"class":412},[106,1830,1272],{"class":216},[106,1832,1275],{"class":212},[106,1834,1835,1837,1840,1842,1844,1846,1849,1851,1853,1855,1857,1859],{"class":108,"line":587},[106,1836,1280],{"class":220},[106,1838,1839],{"class":412}," bestMatch",[106,1841,908],{"class":212},[106,1843,1794],{"class":412},[106,1845,668],{"class":212},[106,1847,1848],{"class":681},"findBestMatch",[106,1850,639],{"class":216},[106,1852,1110],{"class":412},[106,1854,668],{"class":212},[106,1856,1391],{"class":412},[106,1858,694],{"class":216},[106,1860,455],{"class":212},[106,1862,1863,1865,1868,1870,1872,1874,1876,1878,1881],{"class":108,"line":592},[106,1864,1280],{"class":220},[106,1866,1867],{"class":412}," box",[106,1869,908],{"class":212},[106,1871,1096],{"class":412},[106,1873,668],{"class":212},[106,1875,1386],{"class":412},[106,1877,668],{"class":212},[106,1879,1880],{"class":412},"box",[106,1882,455],{"class":212},[106,1884,1886,1888,1891,1893,1895,1897,1899,1902,1904,1907,1909,1911,1913,1915,1917,1919,1921,1923,1925,1928,1930],{"class":108,"line":1885},26,[106,1887,1280],{"class":220},[106,1889,1890],{"class":412}," drawBox",[106,1892,908],{"class":212},[106,1894,962],{"class":212},[106,1896,665],{"class":412},[106,1898,668],{"class":212},[106,1900,1901],{"class":412},"draw",[106,1903,668],{"class":212},[106,1905,1906],{"class":681},"DrawBox",[106,1908,639],{"class":216},[106,1910,1880],{"class":412},[106,1912,959],{"class":212},[106,1914,1006],{"class":212},[106,1916,1193],{"class":216},[106,1918,449],{"class":212},[106,1920,1839],{"class":412},[106,1922,668],{"class":212},[106,1924,1419],{"class":412},[106,1926,1927],{"class":212}," }",[106,1929,694],{"class":216},[106,1931,455],{"class":212},[106,1933,1935,1938,1940,1942,1944,1946,1948],{"class":108,"line":1934},27,[106,1936,1937],{"class":412},"    drawBox",[106,1939,668],{"class":212},[106,1941,1901],{"class":681},[106,1943,639],{"class":216},[106,1945,562],{"class":412},[106,1947,694],{"class":216},[106,1949,455],{"class":212},[106,1951,1953],{"class":108,"line":1952},28,[106,1954,1400],{"class":212},[106,1956,1958,1960,1962],{"class":108,"line":1957},29,[106,1959,763],{"class":212},[106,1961,766],{"class":412},[106,1963,455],{"class":212},[10,1965,1966],{},"これでJavaScriptで開発した簡単な認識システムの完成です！",[10,1968,1969,1974],{},[192,1970,1973],{"href":1971,"rel":1972},"https:\u002F\u002Fgitlab.com\u002Fbwv-hp\u002Fface-api-js.git",[196],"Gitlab","へアクセスしてソースコードを参照することができます。",[31,1976,1977],{"id":1977},"結論",[10,1979,1980],{},"この記事では簡単にface-api.js及びその使い方について紹介させて頂いたものです。できれば、この記事に言及していない、年齢や性別、気分（表情）といった顔認識機能の調査も可能です。なお、顔認識システムは、pre-trainedモデルからのデータを転送する等の処理なしでpre-trainedモデルをそのまま流用するので、精度が相対的になります。",[31,1982,1983],{"id":1983},"参照元",[10,1985,1986],{},[192,1987,1988],{"href":1988,"rel":1989},"https:\u002F\u002Fen.wikipedia.org\u002Fwiki\u002FFacial_recognition_system",[196],[10,1991,1992],{},[192,1993,1994],{"href":1994,"rel":1995},"https:\u002F\u002Fgithub.com\u002Fjustadudewhohacks\u002Fface-api.js#getting-started",[196],[10,1997,1998],{},[192,1999,2000],{"href":2000,"rel":2001},"https:\u002F\u002Fitnext.io\u002Fface-api-js-javascript-api-for-face-recognition-in-the-browser-with-tensorflow-js-bcc2a6c4cf07",[196],[10,2003,2004,2005],{},"画像出典元：",[192,2006,2007],{"href":2007,"rel":2008},"https:\u002F\u002Fwww.pexels.com\u002Flicense\u002F",[196],[428,2010,2011],{},"html pre.shiki code .s52Pk, html code.shiki .s52Pk{--shiki-light:#E2931D;--shiki-default:#E2931D;--shiki-dark:#FFCB6B}html pre.shiki code .sGFVr, html code.shiki .sGFVr{--shiki-light:#91B859;--shiki-default:#91B859;--shiki-dark:#C3E88D}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .sDfIl, html code.shiki .sDfIl{--shiki-light:#39ADB5;--shiki-default:#39ADB5;--shiki-dark:#89DDFF}html pre.shiki code .sRlkE, html code.shiki .sRlkE{--shiki-light:#E53935;--shiki-default:#E53935;--shiki-dark:#F07178}html pre.shiki code .smZ93, html code.shiki .smZ93{--shiki-light:#9C3EDA;--shiki-default:#9C3EDA;--shiki-dark:#C792EA}html pre.shiki code .sZSNi, html code.shiki .sZSNi{--shiki-light:#90A4AE;--shiki-default:#90A4AE;--shiki-dark:#BABED8}html pre.shiki code .spFsF, html code.shiki .spFsF{--shiki-light:#8796B0;--shiki-default:#8796B0;--shiki-dark:#B2CCD6}html pre.shiki code .sYRBq, html code.shiki .sYRBq{--shiki-light:#F76D47;--shiki-default:#F76D47;--shiki-dark:#F78C6C}html pre.shiki code .sWuyu, html code.shiki .sWuyu{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#90A4AE;--shiki-default-font-style:italic;--shiki-dark:#676E95;--shiki-dark-font-style:italic}html pre.shiki code .s8R28, html code.shiki .s8R28{--shiki-light:#39ADB5;--shiki-light-font-style:italic;--shiki-default:#39ADB5;--shiki-default-font-style:italic;--shiki-dark:#89DDFF;--shiki-dark-font-style:italic}html pre.shiki code .s3cPz, html code.shiki .s3cPz{--shiki-light:#6182B8;--shiki-default:#6182B8;--shiki-dark:#82AAFF}",{"title":57,"searchDepth":120,"depth":120,"links":2013},[2014,2015,2016],{"id":33,"depth":120,"text":34},{"id":1977,"depth":120,"text":1977},{"id":1983,"depth":120,"text":1983},"tech talk","Briswell Vietnam Co Ltd","2020-12-23","md",{},"\u002Fja\u002Fnews\u002Fface-api-js",null,{"title":5,"description":12},"ja\u002Fnews\u002Fface-api-js","https:\u002F\u002Fhomepage-media.s3.ap-southeast-1.amazonaws.com\u002Fwp-content\u002Fuploads\u002F2020\u002F11\u002F16133339\u002Fxacthuc.jpg","qujkq3dpa_PqH1uLD2zmwj20sNHYhLuxMv65bceQq1U",1785320530568]