تشخیص چهره با جاوا اسکریپت و ری اکت — راهنمای کاربردی

1npx create-react-app react-face-recognition
2cd react-face-recognition
3npm i react-router-dom
4npm start

1import React, { Component } from 'react';
2import { Route, Router } from 'react-router-dom';
3import createHistory from 'history/createBrowserHistory';
4import './App.css';
5
6import Home from './views/Home';
7
8class App extends Component {
9  render() {
10    return (
11      <div className="App">
12        <Router history={createHistory()}>
13          <div className="route">
14            <Route exact path="/" component={Home} />
15          </div>
16        </Router>
17      </div>
18    );
19  }
20}
21
22export default App;

1import React, { Component } from 'react';
2import { Link } from 'react-router-dom';
3
4export default class Home extends Component {
5  render() {
6    return (
7      <div>
8        <h2>BNK48 Facial Recognition App</h2>
9        <li>
10          <Link to="/photo">Photo Input</Link>
11        </li>
12        <li>
13          <Link to="/camera">Video Camera</Link>
14        </li>
15      </div>
16    );
17  }
18}

1npm i face-api.js

1import * as faceapi from 'face-api.js';
2
3// Load models and weights
4export async function loadModels() {
5  const MODEL_URL = process.env.PUBLIC_URL + '/models';
6  await faceapi.loadTinyFaceDetectorModel(MODEL_URL);
7  await faceapi.loadFaceLandmarkTinyModel(MODEL_URL);
8  await faceapi.loadFaceRecognitionModel(MODEL_URL);
9}
10
11export async function getFullFaceDescription(blob, inputSize = 512) {
12  // tiny_face_detector options
13  let scoreThreshold = 0.5;
14  const OPTION = new faceapi.TinyFaceDetectorOptions({
15    inputSize,
16    scoreThreshold
17  });
18  const useTinyModel = true;
19
20  // fetch image to api
21  let img = await faceapi.fetchImage(blob);
22
23  // detect all faces and generate full description from image
24  // including landmark and descriptor of each face
25  let fullDesc = await faceapi
26    .detectAllFaces(img, OPTION)
27    .withFaceLandmarks(useTinyModel)
28    .withFaceDescriptors();
29  return fullDesc;
30}

1import React, { Component } from 'react';
2import { withRouter } from 'react-router-dom';
3import { loadModels, getFullFaceDescription } from '../api/face';
4
5// Import image to test API
6const testImg = require('../img/test.jpg');
7
8// Initial State
9const INIT_STATE = {
10  imageURL: testImg,
11  fullDesc: null
12};
13
14class ImageInput extends Component {
15  constructor(props) {
16    super(props);
17    this.state = { ...INIT_STATE };
18  }
19
20  componentWillMount = async () => {
21    await loadModels();
22    await this.handleImage(this.state.imageURL);
23  };
24
25  handleImage = async (image = this.state.imageURL) => {
26    await getFullFaceDescription(image).then(fullDesc => {
27      console.log(fullDesc);
28      this.setState({ fullDesc });
29    });
30  };
31
32  render() {
33    const { imageURL } = this.state;
34    return (
35      <div>
36        <img src={imageURL} alt="imageURL" />
37      </div>
38    );
39  }
40}
41
42export default withRouter(ImageInput);

1import React, { Component } from 'react';
2import { Route, Router } from 'react-router-dom';
3import createHistory from 'history/createBrowserHistory';
4import './App.css';
5
6import Home from './views/Home';
7import ImageInput from './views/ImageInput';
8
9class App extends Component {
10  render() {
11    return (
12      <div className="App">
13        <Router history={createHistory()}>
14          <div className="route">
15            <Route exact path="/" component={Home} />
16            <Route exact path="/photo" component={ImageInput} />
17          </div>
18        </Router>
19      </div>
20    );
21  }
22}
23
24export default App;

1import React, { Component } from 'react';
2import { withRouter } from 'react-router-dom';
3import { loadModels, getFullFaceDescription } from '../api/face';
4
5// Import image to test API
6const testImg = require('../img/test.jpg');
7
8// Initial State
9const INIT_STATE = {
10  imageURL: testImg,
11  fullDesc: null,
12  detections: null
13};
14
15class ImageInput extends Component {
16  constructor(props) {
17    super(props);
18    this.state = { ...INIT_STATE };
19  }
20
21  componentWillMount = async () => {
22    await loadModels();
23    await this.handleImage(this.state.imageURL);
24  };
25
26  handleImage = async (image = this.state.imageURL) => {
27    await getFullFaceDescription(image).then(fullDesc => {
28      if (!!fullDesc) {
29        this.setState({
30          fullDesc,
31          detections: fullDesc.map(fd => fd.detection)
32        });
33      }
34    });
35  };
36
37  handleFileChange = async event => {
38    this.resetState();
39    await this.setState({
40      imageURL: URL.createObjectURL(event.target.files[0]),
41      loading: true
42    });
43    this.handleImage();
44  };
45
46  resetState = () => {
47    this.setState({ ...INIT_STATE });
48  };
49
50  render() {
51    const { imageURL, detections } = this.state;
52
53    let drawBox = null;
54    if (!!detections) {
55      drawBox = detections.map((detection, i) => {
56        let _H = detection.box.height;
57        let _W = detection.box.width;
58        let _X = detection.box._x;
59        let _Y = detection.box._y;
60        return (
61          <div key={i}>
62            <div
63              style={{
64                position: 'absolute',
65                border: 'solid',
66                borderColor: 'blue',
67                height: _H,
68                width: _W,
69                transform: `translate(${_X}px,${_Y}px)`
70              }}
71            />
72          </div>
73        );
74      });
75    }
76
77    return (
78      <div>
79        <input
80          id="myFileUpload"
81          type="file"
82          onChange={this.handleFileChange}
83          accept=".jpg, .jpeg, .png"
84        />
85        <div style={{ position: 'relative' }}>
86          <div style={{ position: 'absolute' }}>
87            <img src={imageURL} alt="imageURL" />
88          </div>
89          {!!drawBox ? drawBox : null}
90        </div>
91      </div>
92    );
93  }
94}
95
96export default withRouter(ImageInput);

1{
2  "Cherprang": {
3    "name": "เฌอปราง",
4    "descriptors": [
5      [-0.08113786578178406,0.05256778374314308,0.009473100304603577,-0.10561250895261765,-0.1783013790845871,-0.04459364339709282,-0.09838695079088211,-0.11281408369541168,0.15290355682373047,-0.12802188098430634,0.22490034997463226,-0.0876401960849762,-0.20344389975070953,-0.06546909362077713,-0.09518688917160034,0.21771210432052612,-0.1978156566619873,-0.20811164379119873,-0.005263347178697586,0.022171149030327797,0.08166252076625824,-0.024958046153187752,-0.008690833114087582,0.07264935970306396,-0.09877212345600128,-0.32639357447624207,-0.07010464370250702,-0.05077863112092018,-0.06450583040714264,-0.08223631232976913,0.03569770231842995,0.0591503381729126,-0.19877424836158752,0.005495572462677956,0.032966941595077515,0.10699400305747986,0.00043915724381804466,-0.10360816866159439,0.17986394464969635,-0.040484149008989334,-0.30697202682495117,0.03211132436990738,0.08842744678258896,0.19950658082962036,0.15933744609355927,-0.03205663338303566,0.0013319365680217743,-0.16289959847927094,0.14904619753360748,-0.15430817008018494,0.0096973218023777,0.14715969562530518,0.08346439152956009,0.031750328838825226,-0.016189731657505035,-0.1357622593641281,0.03173140063881874,0.1332130879163742,-0.1280241757631302,-0.03812456876039505,0.10302945971488953,-0.06710688769817352,-0.0045883068814873695,-0.18414227664470673,0.19671869277954102,0.05899167060852051,-0.13076898455619812,-0.2127394676208496,0.09676400572061539,-0.15055659413337708,-0.1203978881239891,0.0671667754650116,-0.15655417740345,-0.21337451040744781,-0.33455413579940796,0.0025228180456906557,0.32778817415237427,0.12706099450588226,-0.18636029958724976,0.077443927526474,0.04969285428524017,0.0199972465634346,0.04955039545893669,0.18967756628990173,-0.0021310225129127502,0.10583700984716415,-0.09680759161710739,-0.0061607323586940765,0.237107053399086,-0.07061111927032471,-0.0200827457010746,0.20259839296340942,-0.025431372225284576,0.097686767578125,0.024423770606517792,-0.0027051493525505066,-0.05065762251615524,0.05029483884572983,-0.18550457060337067,0.04197317361831665,-0.06792200356721878,0.0047242967411875725,-0.020428016781806946,0.061017416417598724,-0.0777672529220581,0.09362616389989853,-0.018073776736855507,0.00793382991105318,-0.11228518187999725,0.011685803532600403,-0.09283971041440964,-0.05933531001210213,0.12439746409654617,-0.177815243601799,0.20367340743541718,0.12916350364685059,0.16568998992443085,0.14472319185733795,0.18697629868984222,0.07876216620206833,-0.025242770090699196,-0.02333880588412285,-0.17500267922878265,0.011992575600743294,0.09926775842905045,-0.05089148133993149,0.1372077465057373,0.017258809879422188]
6    ]
7  }
8}

1// face.js code...
2
3const maxDescriptorDistance = 0.5;
4export async function createMatcher(faceProfile) {
5  // Create labeled descriptors of member from profile
6  let members = Object.keys(faceProfile);
7  let labeledDescriptors = members.map(
8    member =>
9      new faceapi.LabeledFaceDescriptors(
10        faceProfile[member].name,
11        faceProfile[member].descriptors.map(
12          descriptor => new Float32Array(descriptor)
13        )
14      )
15  );
16
17  // Create face matcher (maximum descriptor distance is 0.5)
18  let faceMatcher = new faceapi.FaceMatcher(
19    labeledDescriptors,
20    maxDescriptorDistance
21  );
22  return faceMatcher;
23}

1import React, { Component } from 'react';
2import { withRouter } from 'react-router-dom';
3import { loadModels, getFullFaceDescription, createMatcher } from '../api/face';
4
5// Import image to test API
6const testImg = require('../img/test.jpg');
7
8// Import face profile
9const JSON_PROFILE = require('../descriptors/bnk48.json');
10
11// Initial State
12const INIT_STATE = {
13  imageURL: testImg,
14  fullDesc: null,
15  detections: null,
16  descriptors: null,
17  match: null
18};
19
20class ImageInput extends Component {
21  constructor(props) {
22    super(props);
23    this.state = { ...INIT_STATE, faceMatcher: null };
24  }
25
26  componentWillMount = async () => {
27    await loadModels();
28    this.setState({ faceMatcher: await createMatcher(JSON_PROFILE) });
29    await this.handleImage(this.state.imageURL);
30  };
31
32  handleImage = async (image = this.state.imageURL) => {
33    await getFullFaceDescription(image).then(fullDesc => {
34      if (!!fullDesc) {
35        this.setState({
36          fullDesc,
37          detections: fullDesc.map(fd => fd.detection),
38          descriptors: fullDesc.map(fd => fd.descriptor)
39        });
40      }
41    });
42
43    if (!!this.state.descriptors && !!this.state.faceMatcher) {
44      let match = await this.state.descriptors.map(descriptor =>
45        this.state.faceMatcher.findBestMatch(descriptor)
46      );
47      this.setState({ match });
48    }
49  };
50
51  handleFileChange = async event => {
52    this.resetState();
53    await this.setState({
54      imageURL: URL.createObjectURL(event.target.files[0]),
55      loading: true
56    });
57    this.handleImage();
58  };
59
60  resetState = () => {
61    this.setState({ ...INIT_STATE });
62  };
63
64  render() {
65    const { imageURL, detections, match } = this.state;
66
67    let drawBox = null;
68    if (!!detections) {
69      drawBox = detections.map((detection, i) => {
70        let _H = detection.box.height;
71        let _W = detection.box.width;
72        let _X = detection.box._x;
73        let _Y = detection.box._y;
74        return (
75          <div key={i}>
76            <div
77              style={{
78                position: 'absolute',
79                border: 'solid',
80                borderColor: 'blue',
81                height: _H,
82                width: _W,
83                transform: `translate(${_X}px,${_Y}px)`
84              }}
85            >
86              {!!match && !!match[i] ? (
87                <p
88                  style={{
89                    backgroundColor: 'blue',
90                    border: 'solid',
91                    borderColor: 'blue',
92                    width: _W,
93                    marginTop: 0,
94                    color: '#fff',
95                    transform: `translate(-3px,${_H}px)`
96                  }}
97                >
98                  {match[i]._label}
99                </p>
100              ) : null}
101            </div>
102          </div>
103        );
104      });
105    }
106
107    return (
108      <div>
109        <input
110          id="myFileUpload"
111          type="file"
112          onChange={this.handleFileChange}
113          accept=".jpg, .jpeg, .png"
114        />
115        <div style={{ position: 'relative' }}>
116          <div style={{ position: 'absolute' }}>
117            <img src={imageURL} alt="imageURL" />
118          </div>
119          {!!drawBox ? drawBox : null}
120        </div>
121      </div>
122    );
123  }
124}
125
126export default withRouter(ImageInput);

1npm i react-webcam

1import React, { Component } from 'react';
2import { Route, Router } from 'react-router-dom';
3import createHistory from 'history/createBrowserHistory';
4import './App.css';
5
6import Home from './views/Home';
7import ImageInput from './views/ImageInput';
8import VideoInput from './views/VideoInput';
9
10class App extends Component {
11  render() {
12    return (
13      <div className="App">
14        <Router history={createHistory()}>
15          <div className="route">
16            <Route exact path="/" component={Home} />
17            <Route exact path="/photo" component={ImageInput} />
18            <Route exact path="/camera" component={VideoInput} />
19          </div>
20        </Router>
21      </div>
22    );
23  }
24}
25
26export default App;

1import React, { Component } from 'react';
2import { withRouter } from 'react-router-dom';
3import Webcam from 'react-webcam';
4import { loadModels, getFullFaceDescription, createMatcher } from '../api/face';
5
6// Import face profile
7const JSON_PROFILE = require('../descriptors/bnk48.json');
8
9const WIDTH = 420;
10const HEIGHT = 420;
11const inputSize = 160;
12
13class VideoInput extends Component {
14  constructor(props) {
15    super(props);
16    this.webcam = React.createRef();
17    this.state = {
18      fullDesc: null,
19      detections: null,
20      descriptors: null,
21      faceMatcher: null,
22      match: null,
23      facingMode: null
24    };
25  }
26
27  componentWillMount = async () => {
28    await loadModels();
29    this.setState({ faceMatcher: await createMatcher(JSON_PROFILE) });
30    this.setInputDevice();
31  };
32
33  setInputDevice = () => {
34    navigator.mediaDevices.enumerateDevices().then(async devices => {
35      let inputDevice = await devices.filter(
36        device => device.kind === 'videoinput'
37      );
38      if (inputDevice.length < 2) {
39        await this.setState({
40          facingMode: 'user'
41        });
42      } else {
43        await this.setState({
44          facingMode: { exact: 'environment' }
45        });
46      }
47      this.startCapture();
48    });
49  };
50
51  startCapture = () => {
52    this.interval = setInterval(() => {
53      this.capture();
54    }, 1500);
55  };
56
57  componentWillUnmount() {
58    clearInterval(this.interval);
59  }
60
61  capture = async () => {
62    if (!!this.webcam.current) {
63      await getFullFaceDescription(
64        this.webcam.current.getScreenshot(),
65        inputSize
66      ).then(fullDesc => {
67        if (!!fullDesc) {
68          this.setState({
69            detections: fullDesc.map(fd => fd.detection),
70            descriptors: fullDesc.map(fd => fd.descriptor)
71          });
72        }
73      });
74
75      if (!!this.state.descriptors && !!this.state.faceMatcher) {
76        let match = await this.state.descriptors.map(descriptor =>
77          this.state.faceMatcher.findBestMatch(descriptor)
78        );
79        this.setState({ match });
80      }
81    }
82  };
83
84  render() {
85    const { detections, match, facingMode } = this.state;
86    let videoConstraints = null;
87    let camera = '';
88    if (!!facingMode) {
89      videoConstraints = {
90        width: WIDTH,
91        height: HEIGHT,
92        facingMode: facingMode
93      };
94      if (facingMode === 'user') {
95        camera = 'Front';
96      } else {
97        camera = 'Back';
98      }
99    }
100
101    let drawBox = null;
102    if (!!detections) {
103      drawBox = detections.map((detection, i) => {
104        let _H = detection.box.height;
105        let _W = detection.box.width;
106        let _X = detection.box._x;
107        let _Y = detection.box._y;
108        return (
109          <div key={i}>
110            <div
111              style={{
112                position: 'absolute',
113                border: 'solid',
114                borderColor: 'blue',
115                height: _H,
116                width: _W,
117                transform: `translate(${_X}px,${_Y}px)`
118              }}
119            >
120              {!!match && !!match[i] ? (
121                <p
122                  style={{
123                    backgroundColor: 'blue',
124                    border: 'solid',
125                    borderColor: 'blue',
126                    width: _W,
127                    marginTop: 0,
128                    color: '#fff',
129                    transform: `translate(-3px,${_H}px)`
130                  }}
131                >
132                  {match[i]._label}
133                </p>
134              ) : null}
135            </div>
136          </div>
137        );
138      });
139    }
140
141    return (
142      <div
143        className="Camera"
144        style={{
145          display: 'flex',
146          flexDirection: 'column',
147          alignItems: 'center'
148        }}
149      >
150        <p>Camera: {camera}</p>
151        <div
152          style={{
153            width: WIDTH,
154            height: HEIGHT
155          }}
156        >
157          <div style={{ position: 'relative', width: WIDTH }}>
158            {!!videoConstraints ? (
159              <div style={{ position: 'absolute' }}>
160                <Webcam
161                  audio={false}
162                  width={WIDTH}
163                  height={HEIGHT}
164                  ref={this.webcam}
165                  screenshotFormat="image/jpeg"
166                  videoConstraints={videoConstraints}
167                />
168              </div>
169            ) : null}
170            {!!drawBox ? drawBox : null}
171          </div>
172        </div>
173      </div>
174    );
175  }
176}
177
178export default withRouter(VideoInput);

1npm i gh-pages

1import React, { Component } from 'react';
2import { Route, Router } from 'react-router-dom';
3import createHistory from 'history/createBrowserHistory';
4import './App.css';
5
6import Home from './views/Home';
7import ImageInput from './views/ImageInput';
8import VideoInput from './views/VideoInput';
9
10class App extends Component {
11  render() {
12    return (
13      <div className="App">
14        <Router history={createHistory({ basename: process.env.PUBLIC_URL })}>
15          <div className="route">
16            <Route exact path="/" component={Home} />
17            <Route exact path="/photo" component={ImageInput} />
18            <Route exact path="/camera" component={VideoInput} />
19          </div>
20        </Router>
21      </div>
22    );
23  }
24}
25
26export default App;

1"homepage": "http://YOUR_GITHUB_ACCOUNT.github.io/react-face-recognition"

1"scripts": {
2  "start": "react-scripts start",
3  "build": "react-scripts build",
4  "test": "react-scripts test",
5  "eject": "react-scripts eject",
6  "predeploy": "npm run build",
7  "deploy": "gh-pages -d build"
8}

1git add .
2git commit -m "make something good"
3git remote add origin https://github.com/YOUR_GITHUB_ACCOUNT/react-face-recognition.git
4git push -u origin master
5
6npm run deploy