React 및 Codesphere를 사용하여 얼굴 인식 웹 응용 프로그램 만들기

We've all probably seen the face detection box that pops up around people's faces when you go to take a photo on your mobile camera. If you've ever wondered how our phones detect human faces, then this article is for you! We are going to be building a web app that recreates just that - an app able to recognize any human face in any image.

무엇이 얼굴 인식입니까? 그것은 어떻게 작동합니까?

우선, 얼굴 인식 시스템은 컴퓨터 알고리즘을 사용하여 얼굴의 서로 다른 특징을 추출하여 얼굴과 디지털 이미지를 일치시킬 수 있는 기술이다.
이 응용 프로그램에서 우리는 Clarifai의 얼굴 검사 모델을 사용할 것이다. 이 모델은 Clarifai Predict API를 사용하고 이미지에 얼굴을 포함하는 확률 점수와 제한 상자에 나타난 위치 좌표를 제공할 것이다.

Codesphere를 사용하여 React 애플리케이션 만들기

이 프로젝트에서 Codesphere는 React 프로그램을 빈틈없이 만들고 배치할 수 있도록 합니다.Codesphere는 온라인 협업 프로그래밍 환경이자 클라우드 공급자입니다.Codesphere를 사용하면 모든 복잡한 설정 없이 웹 응용 프로그램을 구축할 수 있습니다.

우리 시작합시다!

Codesphere에 로그인하면 터미널에서 다음 명령을 실행하여 React 응용 프로그램을 즉시 만들 수 있는 빈 디렉토리가 표시됩니다.npx create-react-app face-detect프로젝트 디렉토리에 들어가서 개발 서버를 시작하려면 다음을 수행할 수 있습니다.cd face-detect && npm start우리는 이 프로젝트에서 사용할 것이다react-bootstrap.npm을 사용하여 React 부트를 설치할 수 있습니다.npm install react-bootstrap bootstrap설치가 완료되면 프로젝트에 안내를 추가할 수 있습니다.React Bootstraphere에 대한 내용을 더 많이 읽을 수 있습니다.

구성 요소 만들기

URL 입력 상자 두 개가 필요합니다. 인터넷에서 온 이미지인 ImageSearchForm을 입력할 수 있고, 다른 이미지 구성 요소는 얼굴 검사 상자인 FaceDetect를 통해 우리의 이미지를 표시할 수 있습니다.
우선, 내부에 'Components' 라는 새 디렉터리 src 를 만듭니다.그리고 ImageSearchForm에 FaceDetect와 src/Components라는 두 개의 폴더를 만들 것입니다.그런 다음 ImageSearchForm 폴더를 열고 두 개의 파일을 생성합니다. -  ImageSearchForm.js 및 ImageSearchForm.css.그리고 FaceDetect.js와 FaceDetect.css를 사용하여FaceDetect 디렉터리에 같은 작업을 수행합니다.
현재 우리는 계속해서 우리의 구성 요소를 응용 프로그램 구성 요소로 가져올 수 있습니다.src/App.js 폴더에 다음 내용을 삽입합니다.참고: FaceDetect는 일시적으로 유지됩니다.

import React, { Component } from "react";
import "./App.css";
import ImageSearchForm from "./components/ImageSearchForm/ImageSearchForm";
// import FaceDetect from "./components/FaceDetect/FaceDetect";


class App extends Component {
  render() {
    return (
      <div className="App">
        <ImageSearchForm />
        {/* <FaceDetect /> */}
      </div>
    );
  }
}
export default App;

다음에, 우리 ImageSearchForm.js 에서 입력 폼과 단추가 있는 구성 요소를 만들 것입니다.

const ImageSearchForm = () => {
  return (
    <div className="ma5 to">
      <div className="center">
        <div className="form center pa4 br3 shadow-5">
          <InputGroup className="mb-3">
            <FormControl className="f4 pa2 w-70 center" id="basic-url" aria-describedby="basic-addon3" />
          </InputGroup>
          <Button variant="secondary"> Detect </Button>
        </div>
      </div>
    </div>
  );
};
export default ImageSearchForm;

이미지 인식 API

이제 핵심 기능에 대해 살펴보겠습니다.우리가 원하는 것은 인터넷에 그림의 URL을 입력하고 단추를 눌렀을 때 얼굴 주위에 그림을 표시하는 것이다. 만약 얼굴 검사 상자가 있다면.
그 전에 API를 사용하려면 Clarifai 계정을 설정해야 합니다.

Clarifai 계정을 설정하는 방법

이 API를 사용하면 사용자가 자신의 머신 러닝 응용 프로그램이나 서비스를 적용할 수 있습니다.너는 더 많이 here 읽고 등록할 수 있다.로그인하면 계정 대시보드로 리디렉션됩니다.내 첫 번째 응용 프로그램을 클릭하거나 API 키를 받을 응용 프로그램을 만듭니다.
중요 팁: API 키가 필요합니다.

여기서 우리는 그들을 이용할 것이다Face Detection model.
Clarifai 패키지를 설치하려면 터미널을 열고 다음을 실행하십시오.npm install clarifai그리고 이 코드를 응용 프로그램에 가져와야 합니다. app.jsimport Clarifai from "clarifai" ;
다음은 사용자가 입력한 내용을 식별하기 위해 입력 검색 상자에 기능을 만들어야 합니다.이를 위해, 프로그램이 사용자가 입력한 내용을 알고 저장하며, 변경할 때 언제든지 업데이트할 수 있도록 상태 값이 필요합니다.
Google (사용자) 은 입력 필드에 웹에서 온 이미지의 URL을 수동으로 입력해야 합니다. 이 URL은 아래 이미지 Url의 상태 값에 있습니다.코드는 app.js에서 다음과 같이 업데이트되어야 합니다.
참고: 이제 FaceDetect 어셈블리에 대한 주석을 취소합니다.

import FaceDetect from "./components/FaceDetect/FaceDetect";
import "./App.css";

const app = new Clarifai.App({
  apiKey: "ADD YOUR OWN API KEY HERE",
});

class App extends Component {
  // Add the State for input and grab image
  constructor() {
    super();
    this.state = {
      input: "",
      imageUrl: "",
    };
  }

  // use onInputChange function to setState for our input 
  onInputChange = (event) => {
    this.setState({ input: event.target.value });
  };


  // execute a function when submitting with onSubmit
  onSubmit = () => {
    this.setState({ imageUrl: this.state.input });
    app.models.predict(Clarifai.FACE_DETECT_MODEL, 
    this.state.input).then(
      function (response) {
        // response data fetch from FACE_DETECT_MODEL 
        console.log(response);
        /* the data needed from the response data from 
 clarifai API, we are just comparing the two*/           
        console.log(
response.outputs[0].data.regions[0].region_info.bounding_box
        );
      },

      function (err) {
        // there was an error
      }
    );
  };

  render() {
    return (
      <div className="App">
      // update your component with their state
        <ImageSearchForm
          onInputChange={this.onInputChange}
          onSubmit={this.onSubmit}
        />
// uncomment your face detect app and update with imageUrl state
        <FaceDetect imageUrl={this.state.imageUrl} />
      </div>
    );
  }
}
export default App;

테스트 버튼을 누르면 onSubmit 기능이 작동합니다.이미지 Url의 상태를 업데이트하고 Clarifai 얼굴 검사 모델로 이미지를 캡처합니다.우리는 지금 우리의 구성 요소를 업데이트해야 한다.ImageSearchForm.js 파일을 업데이트합니다.

// update the component with parameters
const ImageSearchForm = ({ onInputChange, onSubmit }) => {
  return (
    // create an onChange to monitor input state
    <InputGroup className="mb-3">
      <FormControl className="f4 pa2 w-70 center" id="basic-url" aria-describedby="basic-addon3" onChange={onInputChange} 
    />
    </InputGroup>
    // add onClick function to execute task
    <Button variant="secondary" onClick={onSubmit}>
     Detect 
    </Button>

이제 src/App.js에 FaceDetect 구성 요소를 생성합니다.FaceDetect.js 파일에 다음 코드를 작성합니다.
FaceDetect 구성 요소는 props imageUrl을 전달합니다.

import React from "react";

const FaceDetect = ({ imageUrl }) => {
  return (
    <div className="center ma">
     <div className="absolute mt2">
      <img alt="" src={imageUrl} width="500px" heigh="auto" />
     </div>
    </div>
  );
};
export default FaceDetect;

이 구성 요소는 API에서 받은 응답의 URL을 사용하여 이미지를 표시합니다.

얼굴 검사 상자 만들기

마지막으로 우리는 Clarifai face DETECT 모델을 사용하여 얼굴이 이미지에 있는 위치를 계산한 다음에 한 사람의 얼굴 상자를 표시하여 얼굴 식별을 실현해야 한다.src/App.js 파일을 열고 다음 코드를 포함합니다.
다음 예에서는 Clarifai가 반환한 데이터를 가져오고 프레임의 스타일을 설정하기 위해 그림에 대한 좌표를 계산하는 calculateFaceLocation 함수를 만들었습니다.

class App extends Component {
  constructor() {
    super();
    this.state = {
      input: "",
      imageUrl: "",
      box: {},    
};
  }

//This function calculates the FaceDetect location of the image

calculateFaceLocation = (data) => {
    const clarifaiFace =
      data.outputs[0].data.regions[0].region_info.bounding_box;
    const image = document.getElementById("input-image");
    const width = Number(image.width);
    const height = Number(image.height);
    return {
      leftCol: clarifaiFace.left_col * width,
      topRow: clarifaiFace.top_row * height,
      rightCol: width - clarifaiFace.right_col * width,
      bottomRow: height - clarifaiFace.bottom_row * height,
    };
  };

//To show the face-detect box on the state values: 

  displayFaceBox = (box) => {
    this.setState({ box: box });
  };

  onInputChange = (event) => {
    this.setState({ input: event.target.value });
  };

  onSubmit = () => {
    this.setState({ imageUrl: this.state.input });
    app.models
      .predict(Clarifai.FACE_DETECT_MODEL, this.state.input)
      .then((response) =>        
     this.displayFaceBox(this.calculateFaceLocation(response))
      )
      .catch((err) => console.log(err));
  };

  render() {
    return (
      <div className="App">
        <ImageSearchForm onInputChange={this.onInputChange}
          onSubmit={this.onSubmit}
        />
        <FaceDetect box={this.state.box}              
         imageUrl= {this.state.imageUrl} />
      </div>
    );
  }
}
export default App;

여기에 box라는 상태 값을 추가했습니다. 이것은 빈 대상이며 되돌아오는 응답 값을 저장합니다.displayFaceBox 방법에서calculateFaceLocation을 호출하여 얻은 데이터를 저장하기 위해 box value 상태를 업데이트합니다.
그런 다음 FaceDetect 구성 요소를 업데이트해야 합니다.이를 위해 FaceDetect.js 파일을 열고 DOM에서 조작할 수 있도록 이미지에 id를 추가합니다.우리도 스타일을 좀 추가합시다.

const FaceDetect = ({ imageUrl, box }) => {
  return (
  //This div is the container that is holding our fetch image 
 and the face detect box
    <div className="center ma">
      <div className="absolute mt2">
    // we set our image SRC to the url of the fetch image
        <img id="inputimage" alt="" src={imageUrl} 
         width="500px" heigh="auto" />
          <div className="bounding-box"
           style={{
             top: box.topRow,
             right: box.rightCol,
             bottom: box.bottomRow,
             left: box.leftCol,
           }}
          ></div>
      </div>
    </div>
  );
};

마지막으로 출력은 아래 화면 캡처와 같습니다.아래 출력에서, 우리는 현재 얼굴 검사를 통해 한 사람의 얼굴 테두리와 테두리 모양의 흰색을 표시할 수 있다.