정보실

웹학교

정보실

javascript JavaScript API를 사용한 얼굴 인식-face-api.js

본문

1*TrN6eJDQf3n2nLLyKPvg3g.gif 


이 기사에서는 웹 브라우저에서 face-api.js를 사용한 얼굴 감지 (나이 / 성별 / 얼굴 위치 / 무드) 및 coco-ssd 모델을 사용한 주변 물체 감지 (개인 / 전화 등)에 대해 알아 봅니다.


https://towardsdatascience.com/face-recognition-using-javascript-api-face-api-js-75af10bc3dee 


face-api.jsis는 tensorflow.js 코어 위에 구축 된 자바 스크립트 모듈로, 웹과 모바일 장치에 최적화 된 얼굴 감지, 얼굴 인식 및 얼굴 랜드 마크 감지를 해결하기 위해 여러 CNN (Convolutional Neural Networks)을 구현합니다.


전제 조건 : 

  1. React.js에 대한 기본 이해 (선택한 라이브러리 또는 프론트 엔드 프레임 워크를 선택할 수 있음)
  2. p5.js 라이브러리에 대한 기본 이해
  3. create-react-app 및 Node.js 버전> = 10.15.1 설치

React 프로젝트를 만들어 봅시다. 


npx create-react-app object_face_detection
cd object_face_detection 


이제 아래의 의존성을 설치하십시오 


npm install @tensorflow-models/coco-ssd
npm install @tensorflow/tfjs-converter
npm install @tensorflow/tfjs-core
npm install face-api.js
npm install p5
npm install react-p5-wrapper 


각각의 의존성을 하나씩 이해해 봅시다.


1. @ tensorflow-models/coco-ssd — 얼굴 주위의 전화, 벽 등과 같은 다른 물체 감지에 사용됩니다. Coco-ssd는 이미 많은 일반 이미지로 훈련 된 TensorFlow 모델이며 브라우저. 당신은 여기를 읽을 수 있습니다 — https://github.com/tensorflow/tfjs-models/tree/master/coco-ssd


2. @ tensorflow / tfjs-converter —TensorFlow는 모델과 keras 모델을 tensorflow.js에서 직접 사용하도록 저장했습니다. 즉, 파이썬이나 R을 사용하여 이미 만들거나 훈련 한 모델이 많이 있지만 모델 저장 형식은 TensorFlow.js가 사용 / 소비하는 것과 다릅니다. 따라서 다른 모델을 TensorFlow의 소모품 형식으로 변환하려면 이 종속성이 필요합니다.


3. @ tensorflow / tfjs-core — Tensorflow 핵심 자바 스크립트 라이브러리. https://www.tensorflow.org/js/tutorials/setup을 읽어보십시오. face-api.js는 이 의존성 위에 만들어졌습니다.


4. face-api.js —이 기사의 핵심 API이며 얼굴 인식에 사용됩니다. 자세한 내용은 다음을 참조하십시오 — https://github.com/justadudewhohacks/face-api.js?files=1


5. P5 — 이것은 최근에 진화한 또 다른 훌륭한 라이브러리입니다. 우리의 맥락에서 우리는 웹캠 비디오와 감지 된 얼굴과 물체 주위에 빨간색 상자를 그리는 데 사용할 것입니다. 당신은 읽을 수 있습니다 — https://p5js.org/reference/#/p5/createCapture


6. react-p5-wrapper — p5js 기능으로 작성된 reactjs 래퍼입니다. 따라서 하나를 작성하는 대신 시간을 절약하기 위해 사용합니다.


이제 코딩에 대해 알아 보겠습니다 💻 


시작하기 전에 face-api.js 모델을 다운로드 해야 합니다 (얼굴 및 기분 감지를 위해 이미 구축) https://github.com/justadudewhohacks/face-api.js/tree/master/weights에 공개 폴더 내에 models이라는 폴더를 만들고 다운로드 하십시오.


모델 폴더는 다음과 같습니다


1*aCT0DyRYYsJ4kf1iDhGyOA.png 

이제 src 폴더 안에 ObjectDetectionSketch.js라는 파일을 만들 것입니다. 이 파일에는 모든 논리가 있습니다.


파일은 아래와 같이 import 문을 가질 것입니다


import * as p5 from 'p5'import "p5/lib/addons/p5.dom";import * as cocoSsd from '@tensorflow-models/coco-ssd';import * as faceapi from 'face-api.js';


  1. p5와 p5.dom — p5js를 다루고 나에게 견딜 필요가 있었습니다. 몇 단락 후에는 정확한 사용법을 이해할 것입니다.
  2. cocoSsd와 faceapi— 이미 알고 있습니다.

다음으로 face-API 모델 URL을 정의하겠습니다.


const MODEL_URL = '/models'
// this will pick public folder by default 


이제 sketch라는 함수 (모든 논리를 갖는 래퍼 함수)를 만듭니다.


export default function sketch (p) {} 


스케치 함수 내에서, 우리는 setup과 draw라는 p5.js에서 두 개의 변수와 네 개의 함수, 두 개의 커스텀과 두 개의 함수를 정의 할 것입니다.


변수 


// Variables// save current camera image
let capture = null;
// save cocossd Model
let cocossdModel = null;
// to save the result of cocossd and face-api results
let cocoDrawings = [];
let faceDrawings = [];


Custom Functions 


// Custom Function// Used to store the result of coco-ssd model
function showCocoSSDResults(results) {
const id = capture.id();
cocoDrawings = results;
}
// used to store the result for the face-api.js model
function showFaceDetectionData(data) {
faceDrawings = data;
}


P5.js Functions 


// P5.js Functions
p.setup = async function() {}
p.draw = function() {} 


두 가지 p5 함수를 자세히 이해하겠습니다. 🚀


Setup function 


페이지가 로드 되면 p5.js 설정이 자동으로 호출됩니다. 우리는 p5 내장 설정 함수를 재정의하여 필요한 세부 사항을 시작합니다. 다음은 설정 함수에서 수행 할 단계입니다.


1. 얼굴 인식에 사용할 세 가지 face-api.js 모델을 로드 합니다.


await faceapi.loadSsdMobilenetv1Model(MODEL_URL);
await faceapi.loadAgeGenderModel(MODEL_URL);
await faceapi.loadFaceExpressionModel(MODEL_URL); 


2. p5.js 캔버스 만들기 


p.createCanvas(1280, 720); 


3. 캔버스에 카메라 캡처 기능을 구현합니다. 


const constraints = {
video: {
mandatory: {
minWidth: 1280,
minHeight: 720
},
optional: [{ maxFrameRate: 10 }]
},
audio: false
};
capture = p.createCapture(constraints, () => {});


4. 비디오 ID 및 크기를 설정하십시오. 


capture.id("video_element");
capture.size(1280, 720);
capture.hide(); // this is require as we don't want to show the deafault video input 


5. cocoSsd 모델을 로드하고 로컬로 저장하십시오. 


cocoSsd.load().then((model) => {
try {
cocossdModel = model;
} catch(e) {
console.log(e);
}
}).catch((e) => {
console.log("Error occured : ", e);
}); 


Draw function 


p5js 캔버스 위에 무언가를 그리면 p5js의 그리기 함수가 호출됩니다. 사용자 정의 그리기 함수 내에서 다음 단계를 수행합니다.


1. 배경을 흰색으로 설정하고 그 위에 이미지를 그립니다. 또한 투명도를 추가하여 캔버스에 추가로 그려지는 것이 투명 해 지도록 합니다.


p.background(255);
p.image(capture, 0, 0);
p.fill(0,0,0,0); 


2. cocos-ssd 모델 결과를 렌더링 하기 위한 코드. 


cocoDrawings.map((drawing) => {
if (drawing) {
p.textSize(20);
p.strokeWeight(1);
const textX = drawing.bbox[0]+drawing.bbox[2];
const textY = drawing.bbox[1]+drawing.bbox[3];

const confidenetext = "Confidence: "+ drawing.score.toFixed(1);
const textWidth = p.textWidth(confidenetext);

const itemTextWidth = p.textWidth(drawing.class);
p.text(drawing.class, textX-itemTextWidth-10, textY-50);
p.text(confidenetext, textX-textWidth-10, textY-10);
p.strokeWeight(4);
p.stroke('rgb(100%,100%,100%)');
p.rect(drawing.bbox[0], drawing.bbox[1], drawing.bbox[2], drawing.bbox[3]);
}
});


여기에 coco-ssd 모델에 의해 감지 된 현재 객체 세부 정보가 포함 된 cocoDrawings 객체가 있습니다. 객체의 모양은 다음과 같습니다


{
"bbox": [
6.165122985839844,
2.656116485595703,
1034.7143936157227,
712.3482799530029
],
"class": "person",
"score": 0.9296618103981018
} 


이 개체 데이터를 사용하여 감지 된 이름 (위의 경우 사람)의 이름과 점수로 현재 개체의 위치를 ​​정의하는 사각형을 그립니다.


텍스트와 사각형을 그리는 기본 p5js 코드입니다. 이해하기 어렵다면 p5.js 문서에 샷을 제공하면 1 시간 내에 완료됩니다. — https://p5js.org/


감지 될 때 캔버스에 그려 질 객체가 여러 개 있을 수 있습니다.


3. face-api.js 모델 결과를 렌더링 하기 위한 코드. 


faceDrawings.map((drawing) => {
if (drawing) {
p.textSize(15);
p.strokeWeight(1);
const textX = drawing.detection.box._x+drawing.detection.box._width;
const textY = drawing.detection.box._y+drawing.detection.box._height;

const confidenetext = "Gender: "+ drawing.gender;
const textWidth = p.textWidth(confidenetext);
p.text(confidenetext, textX-textWidth, textY-60);
const agetext = "Age: "+ drawing.age.toFixed(0);
const ageTextWidth = p.textWidth(agetext);
p.text(agetext, textX-ageTextWidth, textY-30);
const copiedExpression = drawing.expressions;
const expressions = Object.keys(copiedExpression).map((key) => {
const value = copiedExpression[key];
return value;
})
const max = Math.max(...expressions);

const expression_value = Object.keys(copiedExpression).filter((key) => {
return copiedExpression[key] === max;
})[0];
const expressiontext = "Mood: "+ expression_value;
const expressionWidth = p.textWidth(expressiontext);
p.text(expressiontext, textX-expressionWidth, textY-10);

p.strokeWeight(4);
p.stroke('rgb(100%,0%,10%)');
p.rect(drawing.detection.box._x, drawing.detection.box._y, drawing.detection.box._width, drawing.detection.box._height);
}
});


여기에서 텍스트 크기를 정의하고 face-api.js에서 가져온 데이터를 p5.js 캔버스에 그립니다.


이제 감지 된 각 얼굴은 face-api.js 모델에 의해 반환 된 데이터 아래에 있습니다.


{
"detection": {
"_imageDims": {
"_width": 1280,
"_height": 720
},
"_score": 0.6889822483062744,
"_classScore": 0.6889822483062744,
"_className": "",
"_box": {
"_x": 121.50997161865234,
"_y": 15.035667419433594,
"_width": 507.80059814453125,
"_height": 531.7609024047852
}
},
"gender": "male",
"genderProbability": 0.9683359265327454,
"age": 30.109874725341797,
"expressions": {
"neutral": 0.9950351715087891,
"happy": 0.0000017113824242187547,
"sad": 0.000005796719960926566,
"angry": 0.00000466804613097338,
"fearful": 1.3292748013427058e-9,
"disgusted": 3.015825145169515e-9,
"surprised": 0.004952521994709969
}
} 


얼굴이 직사각형 좌표, 연령 및 표현 데이터와 함께 성별로 표시되는 것을 볼 수 있습니다


detection._box에서 가져올 수 있는 사각형 좌표와 표현식의 경우 모든 표현식과 해당 점수가 있습니다. 그래서,

const copiedExpression = drawing.expressions;
const expressions = Object.keys(copiedExpression).map((key) => {
const value = copiedExpression[key];
return value;
})
const max = Math.max(...expressions);const expression_value = Object.keys(copiedExpression).filter((key) => {
return copiedExpression[key] === max;
})[0];


위의 코드를 사용하여 높이 스코어러 표현식을 추정하고 직사각형 안에 표시합니다.


가장 어려운 부분은 사각형 안에 텍스트를 맞추는 것이므로 구현이 좋지는 않지만 작동합니다.


따라서 상자의 x 좌표 에서 이 너비를 제거하고 왼쪽 테두리에서 약간의 여백을 두고 텍스트를 표시합니다.


const ageTextWidth = p.textWidth(agetext);
p.text(agetext, textX-ageTextWidth, textY-30); 


그러나 🤔을 기다립니다.이 모든 것이 좋지만 얼굴과 다른 물체를 감지하는 코드는 어디에 있습니까?


자 여기 있습니다👇


4. 얼굴과 다른 메타 객체를 감지하는 코드. 


faceapi.detectAllFaces(capture.id())
.withAgeAndGender()
.withFaceExpressions()
.then((data) => {
showFaceDetectionData(data);
});
if(capture.loadedmetadata) {
if (cocossdModel) {
cocossdModel
.detect(document.getElementById("video_element"))
.then(showCocoSSDResults)
.catch((e) => {
console.log("Exception : ", e);
});
}
}


그리고 우리는 시험을 마쳤습니다.


터미널 내부


cd object_face_detection
npm start 


시도한 결과는 다음과 같습니다.


0*1M7T7BniInpxDTnk 


https://github.com/overflowjs-com/object_face_detection_webcam_react —이 기사와 함께 진행하기 어려운 경우 코드 저장소입니다.


참고 :이 모델은 브라우저에서 모든 모델을 로드하고 실시간으로 수행하므로 속도가 느립니다.



페이지 정보

조회 199회 ]  작성일19-10-25 22:34

웹학교