supachaic

import React, { Component } from 'react';
import { Route, Router } from 'react-router-dom';
import createHistory from 'history/createBrowserHistory';
import './App.css';

import Home from './views/Home';
import ImageInput from './views/ImageInput';
import VideoInput from './views/VideoInput';

class App extends Component {

supachaic

import React, { Component } from 'react';
import { withRouter } from 'react-router-dom';
import Webcam from 'react-webcam';
import { loadModels, getFullFaceDescription, createMatcher } from '../api/face';

// Import face profile
const JSON_PROFILE = require('../descriptors/bnk48.json');

const WIDTH = 420;
const HEIGHT = 420;

supachaic

import React, { Component } from 'react';
import { Route, Router } from 'react-router-dom';
import createHistory from 'history/createBrowserHistory';
import './App.css';

import Home from './views/Home';
import ImageInput from './views/ImageInput';
import VideoInput from './views/VideoInput';

class App extends Component {

supachaic

import React, { Component } from 'react';
import { withRouter } from 'react-router-dom';
import { loadModels, getFullFaceDescription, createMatcher } from '../api/face';

// Import image to test API
const testImg = require('../img/test.jpg');

// Import face profile
const JSON_PROFILE = require('../descriptors/bnk48.json');

supachaic

// face.js code...

const maxDescriptorDistance = 0.5;
export async function createMatcher(faceProfile) {
  // Create labeled descriptors of member from profile
  let members = Object.keys(faceProfile);
  let labeledDescriptors = members.map(
    member =>
      new faceapi.LabeledFaceDescriptors(
        faceProfile[member].name,

supachaic

{
  "Cherprang": {
    "name": "เฌอปราง",
    "descriptors": [
      [-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,

supachaic

import React, { Component } from 'react';
import { withRouter } from 'react-router-dom';
import { loadModels, getFullFaceDescription } from '../api/face';

// Import image to test API
const testImg = require('../img/test.jpg');

// Initial State
const INIT_STATE = {
  imageURL: testImg,

supachaic

import React, { Component } from 'react';
import { Route, Router } from 'react-router-dom';
import createHistory from 'history/createBrowserHistory';
import './App.css';

import Home from './views/Home';
import ImageInput from './views/ImageInput';

class App extends Component {
  render() {

supachaic

import React, { Component } from 'react';
import { withRouter } from 'react-router-dom';
import { loadModels, getFullFaceDescription } from '../api/face';

// Import image to test API
const testImg = require('../img/test.jpg');

// Initial State
const INIT_STATE = {
  imageURL: testImg,

supachaic

import * as faceapi from 'face-api.js';

// Load models and weights
export async function loadModels() {
  const MODEL_URL = process.env.PUBLIC_URL + '/models';
  await faceapi.loadTinyFaceDetectorModel(MODEL_URL);
  await faceapi.loadFaceLandmarkTinyModel(MODEL_URL);
  await faceapi.loadFaceRecognitionModel(MODEL_URL);
}