Créer une application Web de reconnaissance faciale avec React – Smashing Magazine


A propos de l’auteur

Adeneye David Abiodun est un amoureux de JavaScript et un passionné de technologie, a fondé @corperstechhub et est actuellement conférencier / technologue informatique @critm_ugep. Je construis …
Plus à propos
Adeneye

Dans cet article, Adeneye David Abiodun explique comment créer une application Web de reconnaissance faciale avec React en utilisant l’API Face Recognition, ainsi que le modèle Face Detection et l’API Predict. L’application intégrée à cet article est similaire à la boîte de détection de visage sur une caméra contextuelle dans un téléphone mobile – elle est capable de détecter un visage humain dans n’importe quelle image récupérée sur Internet.

Veuillez noter que pour suivre cet article en détail, vous devrez connaître le principes fondamentaux de React.

Si vous envisagez de créer une application Web de reconnaissance faciale, cet article vous présentera un moyen facile de les intégrer. Dans cet article, nous examinerons le modèle de détection de visage et l’API Predict pour notre application Web de reconnaissance faciale avec React.

Qu’est-ce que la reconnaissance faciale et pourquoi est-ce important?

La reconnaissance faciale est une technologie qui implique la classification et la reconnaissance des visages humains, principalement en cartographiant les caractéristiques faciales individuelles et en enregistrant mathématiquement le rapport unique et en stockant les données sous forme d’impression de visage. La détection des visages de votre caméra mobile utilise cette technologie.

Fonctionnement de la technologie de reconnaissance faciale

La reconnaissance faciale est une application améliorée logiciel bio-métrique qui utilise un algorithme d’apprentissage en profondeur pour comparer une capture en direct ou une image numérique à l’impression de visage stockée pour vérifier l’identité individuelle. cependant, l’apprentissage en profondeur est une classe d’algorithmes d’apprentissage automatique qui utilise plusieurs couches pour extraire progressivement des fonctionnalités de niveau supérieur de l’entrée brute. Par exemple, dans le traitement d’image, les couches inférieures peuvent identifier les bords, tandis que les couches supérieures peuvent identifier les concepts pertinents pour un être humain tels que les chiffres, les lettres ou les visages.

La détection faciale est le processus d’identification d’un visage humain dans une image numérisée; le processus d’extraction consiste à obtenir une région faciale telle que l’espacement des yeux, la variation, l’angle et le rapport pour déterminer si l’objet est humain.

Remarque: La portée de ce didacticiel est bien au-delà de cela; vous pouvez en savoir plus sur ce sujet dans «Application mobile avec fonction de reconnaissance faciale: comment la concrétiser». Dans l’article d’aujourd’hui, nous ne créerons qu’une application Web qui détecte un visage humain dans une image.

Une brève introduction à Clarifai

Dans ce tutoriel, nous utiliserons Clarifai, une plateforme de reconnaissance visuelle qui offre un niveau gratuit aux développeurs. Ils offrent un ensemble complet d’outils qui vous permettent de gérer vos données d’entrée, d’annoter les entrées pour la formation, de créer de nouveaux modèles, de prévoir et de rechercher vos données. Cependant, il existe d’autres API de reconnaissance faciale que vous pouvez utiliser, vérifiez ici pour en voir une liste. Leur documentation vous aidera à les intégrer dans votre application, car ils utilisent tous presque le même modèle et le même processus pour détecter un visage.

Premiers pas avec l’API Clarifai

Dans cet article, nous nous concentrons uniquement sur l’un des modèles Clarifai appelé Détection facial. Ce modèle particulier renvoie des scores de probabilité sur la probabilité que l’image contienne des visages humains et coordonne les emplacements où ces visages apparaissent avec un cadre de sélection. Ce modèle est idéal pour quiconque crée une application qui surveille ou détecte l’activité humaine. le API de prédiction analyse vos images ou vos vidéos et vous indique ce qu’elles contiennent. L’API renvoie une liste de concepts avec les probabilités correspondantes de la probabilité que ces concepts soient contenus dans l’image.

Vous pourrez intégrer tout cela à React au fur et à mesure que nous poursuivons le didacticiel, mais maintenant que vous en avez brièvement appris plus sur l’API Clarifai, vous pouvez en approfondir davantage ici.

Ce que nous construisons dans cet article est similaire à la boîte de détection de visage sur une caméra pop-up dans un téléphone mobile. L’image présentée ci-dessous donnera plus de précisions:

Sample-App
Sample-App. (Grand aperçu)

Vous pouvez voir une boîte rectangulaire détectant un visage humain. C’est le genre d’application simple que nous allons créer avec React.

Définition de l’environnement de développement

La première étape consiste à créer un nouveau répertoire pour votre projet et à démarrer un nouveau projet React, vous pouvez lui donner le nom de votre choix. J’utiliserai le npm gestionnaire de paquets pour ce projet, mais vous pouvez utiliser du fil selon votre choix.

Remarque: Node.js est requis pour ce didacticiel. Si vous ne l’avez pas, rendez-vous sur Site officiel de Node.js à télécharger et à installer avant de continuer.

Ouvrez votre terminal et créez un nouveau projet React.

Nous utilisons create-react-app qui est un environnement confortable pour apprendre à réagir et est la meilleure façon de commencer à construire un nouveau une seule pageapplication à React. Il s’agit d’un package global que nous installerions à partir de npm. il crée un projet de démarrage qui contient webpack, babel et beaucoup de fonctionnalités intéressantes.

/* install react app globally */
npm install -g create-react-app

/* create the app in your new directory */
create-react-app face-detect

/* move into your new react directory */
cd face-detect

/* start development sever */
npm start

Permettez-moi d’abord d’expliquer le code ci-dessus. Nous utilisons npm install -g create-react-app pour installer le create-react-app package globalement afin que vous puissiez l’utiliser dans n’importe lequel de vos projets. create-react-app face-detect créera l’environnement du projet pour vous car il est disponible dans le monde entier. Après ça, cd face-detect vous emmènera dans notre répertoire de projets. npm start va démarrer notre serveur de développement. Nous sommes maintenant prêts à commencer à créer notre application.

Vous pouvez ouvrir le dossier du projet avec n’importe quel éditeur de votre choix. J’utilise du code Visual Studio. C’est un IDE gratuit avec des tonnes de plugins pour vous faciliter la vie, et il est disponible pour toutes les principales plates-formes. Vous pouvez le télécharger sur le site officiel site Internet.

À ce stade, vous devriez avoir la structure de dossiers suivante.

FACE-DETECT TEMPLATE
├── node_modules
├── public 
├── src
├── .gitignore
├── package-lock.json
├── package.json
├── README.md

Remarque: React nous fournit un modèle d’application React d’une seule page, débarrassons-nous de ce dont nous n’aurons pas besoin. Tout d’abord, supprimez le logo.svg déposer dans src dossier et remplacez le code que vous avez dans src / app.js ressembler à ça.

import React, { Component } from "react";
import "./App.css";
class App extends Component {
  render() {
    return (
      
    );
  }
}
export default App;
src /App.js

Ce que nous avons fait, c’était d’effacer le composant en supprimant le logo et tout autre code inutile que nous n’utiliserons pas. Remplacez maintenant votre src / App.css avec le CSS minimal ci-dessous:

.App {
  text-align: center;
}
.center {
  display: flex;
  justify-content: center;
}

Nous utiliserons Tachyons pour ce projet, c’est un outil qui vous permet de créer des interfaces à chargement rapide, très lisibles et 100% réactives avec le moins de CSS possible.

Vous pouvez installer des tachyons sur ce projet via npm:

# install tachyons into your project
npm install tacyons

Une fois l’installation terminée, ajoutons les Tachyons dans notre projet ci-dessous à src / index.js fichier.

import React from "react";
import ReactDOM from "react-dom";
import "./index.css";
import App from "./App";
import * as serviceWorker from "./serviceWorker";
// add tachyons below into your project, note that its only the line of code you adding here
import "tachyons";

ReactDOM.render(, document.getElementById("root"));
// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
// Learn more about service workers: https://bit.ly/CRA-PWA
serviceWorker.register();

Le code ci-dessus n’est pas différent de ce que vous aviez auparavant, tout ce que nous avons fait était d’ajouter la déclaration d’importation pour tachyons.

Donnons donc à notre interface un style à src / index.css fichier.


body {
  margin: 0;
  font-family: "Courier New", Courier, monospace;
  -webkit-font-smoothing: antialiased;
  -Moz-osx-font-smoothing: grayscale;
  background: #485563; /* fallback for old browsers */
  background: linear-gradient(
    to right,
    #29323c,
    #485563
  ); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
}
button {
  cursor: pointer;
}
code {
  font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New",
    monospace;
}
src / index.css

Dans le bloc de code ci-dessus, j’ai ajouté une couleur d’arrière-plan et un pointeur de curseur à notre page, à ce stade, nous avons notre configuration d’interface, laissez-nous commencer à créer nos composants dans la prochaine session.

Construire nos composants React

Dans ce projet, nous allons avoir deux composants, nous avons une zone de saisie URL pour récupérer des images pour nous à partir d’Internet – ImageSearchForm, nous aurons également un composant d’image pour afficher notre image avec une boîte de détection de visage – FaceDetect. Commençons par construire nos composants ci-dessous:

Créez un nouveau dossier appelé Composants à l’intérieur de src annuaire. Créez deux autres dossiers appelés ImageSearchForm et FaceDetect à l’intérieur de src / Composants après cette ouverture ImageSearchForm dossier et créer deux fichiers comme suit ImageSearchForm.js et ImageSearchForm.css.

Ouvrez ensuite FaceDetect répertoire et créer deux fichiers comme suit FaceDetect.js et FaceDetect.css.

Lorsque vous avez terminé toutes ces étapes, la structure de votre dossier devrait ressembler à ceci ci-dessous dans src / Composants annuaire:

src/Components TEMPLATE

├── src
  ├── Components 
    ├── FaceDetect
      ├── FaceDetect.css 
      ├── FaceDetect.js 
    ├── ImageSearchForm
      ├── ImageSearchForm.css 
      ├── ImageSearchForm.js

À ce stade, nous avons notre structure de dossiers Composants, maintenant importons-les dans notre App composant. Ouvrez votre src / App.js dossier et le faire ressembler à ce que j’ai ci-dessous.

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 (
      
{/* */}
); } } export default App;
src /App.js

Dans le code ci-dessus, nous avons monté nos composants aux lignes 10 et 11, mais si vous remarquez FaceDetect est commenté parce que nous n’y travaillons pas encore jusqu’à notre prochaine section et pour éviter les erreurs dans le code, nous devons y ajouter un commentaire. Nous avons également importé nos composants dans notre application.

Pour commencer à travailler sur notre ImageSearchForm fichier, ouvrez le ImageSearchForm.js fichier et laissez-nous créer notre composant ci-dessous.
Cet exemple ci-dessous est notre composant ImageSearchForm qui contiendra un formulaire d’entrée et le bouton.

import React from "react";
import "./ImageSearchForm.css";

// imagesearch form component

const ImageSearchForm = () => {
  return (
    
); }; export default ImageSearchForm;
ImageSearchForm.js

Dans le composant de ligne ci-dessus, nous avons notre formulaire de saisie pour récupérer l’image sur le Web et un Détecter bouton pour effectuer une action de détection de visage. J’utilise Tachyons CSS ici qui fonctionne comme bootstrap; il vous suffit d’appeler className. Vous pouvez trouver plus de détails sur leur site Internet.

Pour styliser notre composant, ouvrez le ImageSearchForm.css fichier. Maintenant, stylisons les composants ci-dessous:

.form {
  width: 700px;
  background: radial-gradient(
      circle,
      transparent 20%,
      slategray 20%,
      slategray 80%,
      transparent 80%,
      transparent
    ),
    radial-gradient(
        circle,
        transparent 20%,
        slategray 20%,
        slategray 80%,
        transparent 80%,
        transparent
      )
      50px 50px,
    linear-gradient(#a8b1bb 8px, transparent 8px) 0 -4px,
    linear-gradient(90deg, #a8b1bb 8px, transparent 8px) -4px 0;
  background-color: slategray;
  background-size: 100px 100px, 100px 100px, 50px 50px, 50px 50px;
}

La propriété de style CSS est un modèle CSS pour notre arrière-plan de formulaire juste pour lui donner un beau design. Vous pouvez générer le modèle CSS de votre choix ici et l’utiliser pour le remplacer par.

Ouvrez à nouveau votre terminal pour exécuter votre application.

/* To start development server again */
npm start

Nous avons notre ImageSearchForm affichage des composants dans l’image ci-dessous.

Page de recherche d'images
Page de recherche d’images. (Grand aperçu)

Maintenant, notre application fonctionne avec nos premiers composants.

API de reconnaissance d’image

Il est temps de créer des fonctionnalités où nous saisissons une URL d’image, appuyez sur Détecter et une image apparaît avec un boîte de détection de visage si un visage existe dans l’image. Avant cela, configurons notre compte Clarifai pour pouvoir intégrer l’API dans notre application.

Comment configurer un compte Clarifai

Cette API permet d’utiliser son application ou ses services d’apprentissage automatique. Pour ce didacticiel, nous utiliserons le niveau disponible pour gratuit aux développeurs avec 5000 opérations par mois. Vous pouvez lire plus ici et s’inscrire, après se connecter cela vous amènera à votre compte tableau de bord cliquez sur ma première application ou créez une application pour obtenir votre clé API que nous utiliserons dans cette application au fur et à mesure de notre progression.

Remarque: Vous ne pouvez pas utiliser le mien, vous devez obtenir le vôtre.

Clarifai-Dashboard
Clarifai-Dashboard. (Grand aperçu)

Voici à quoi devrait ressembler votre tableau de bord ci-dessus. Votre clé API vous donne accès aux services Clarifai. La flèche sous l’image pointe vers une icône de copie pour copier votre clé API.

Si vous allez à Modèle Clarifai vous verrez qu’ils utilisent l’apprentissage automatique pour former ce qu’on appelle des modèles, ils forment un ordinateur en lui donnant de nombreuses images, vous pouvez également créer votre propre modèle et l’enseigner avec vos propres images et concepts. Mais ici, nous ferions usage de leur Modèle de détection de visage.

Le modèle de détection de visage possède une API de prédiction à laquelle nous pouvons appeler (en savoir plus dans la documentation ici).

Installons donc le clarifai paquet ci-dessous.

Ouvrez votre terminal et exécutez ce code:

/* Install the client from npm */
npm install clarifai

Une fois l’installation terminée clarifai, nous devons importer le package dans notre application avec l’installation ci-dessus que nous avons apprise plus tôt.

Cependant, nous devons créer des fonctionnalités dans notre boîte de recherche d’entrée pour détecter ce que l’utilisateur entre. Nous avons besoin d’une valeur d’état pour que notre application sache ce que l’utilisateur a entré, s’en souvienne et le met à jour chaque fois qu’il reçoit des modifications.

Vous devez avoir votre clé API à partir de Clarifai et doit également avoir installé clarifai jusqu’à npm.

L’exemple ci-dessous montre comment nous importons clarifai dans l’application et également implémenter notre clé API.

Notez qu’en tant qu’utilisateur, vous devez récupérer n’importe quelle URL d’image claire sur le Web et la coller dans le champ de saisie; cette URL sera la valeur d’état de imageUrl au dessous de.

import React, { Component } from "react";
// Import Clarifai into our App
import Clarifai from "clarifai";
import ImageSearchForm from "./components/ImageSearchForm/ImageSearchForm";
// Uncomment FaceDetect Component
import FaceDetect from "./components/FaceDetect/FaceDetect";
import "./App.css";

// You need to add your own API key here from Clarifai.
const app = new Clarifai.App({
  apiKey: "ADD YOUR API KEY HERE",
});

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

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

// Perform a function when submitting with onSubmit
  onSubmit = () => {
        // set imageUrl state
    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);
        /* data needed from the response data from clarifai API, 
           note we are just comparing the two for better understanding 
           would to delete the above console*/ 
        console.log(
          response.outputs[0].data.regions[0].region_info.bounding_box
        );
      },
      function (err) {
        // there was an error
      }
    );
  };
  render() {
    return (
      
// update your component with their state // uncomment your face detect app and update with imageUrl state
); } } export default App;

Dans le bloc de code ci-dessus, nous avons importé clarifai afin que nous puissions avoir accès à Clarifai services et également ajouter notre clé API. Nous utilisons state pour gérer la valeur de input et le imageUrl. Nous avons une onSubmit fonction qui est appelée lorsque le Détecter bouton est cliqué, et nous définissons l’état de imageUrl et aussi récupérer l’image avec Clarifai MODÈLE DE DÉTECTION DU VISAGE qui renvoie une donnée de réponse ou une erreur.

Pour l’instant, nous enregistrons les données que nous obtenons de l’API sur la console; nous l’utiliserons à l’avenir pour déterminer le modèle de détection de visage.

Pour l’instant, il y aura une erreur dans votre terminal car nous devons mettre à jour le ImageSearchForm et FaceDetect Fichiers composants.

Mettre à jour le ImageSearchForm.js fichier avec le code ci-dessous:

import React from "react";
import "./ImageSearchForm.css";
// update the component with their parameter
const ImageSearchForm = ({ onInputChange, onSubmit }) => {
  return (
    
); }; export default ImageSearchForm;

Dans le bloc de code ci-dessus, nous avons passé onInputChange des accessoires comme une fonction à appeler quand un onChange l’événement se produit sur le champ de saisie, nous faisons de même avec onSubmit fonction que nous attachons à la onClick un événement.

Créons maintenant notre FaceDetect composant que nous avons commenté src / App.js au dessus de. Ouvert FaceDetect.js fichier et entrez le code ci-dessous:

Dans l’exemple ci-dessous, nous avons créé le FaceDetect composant pour passer les accessoires imageUrl.

import React from "react";
// Pass imageUrl to FaceDetect component
const FaceDetect = ({ imageUrl }) => {
  return (
  # This div is the container that is holding our fetch image and the face detect box
    
# we set our image SRC to the url of the fetch image
); }; export default FaceDetect;

Ce composant affichera l’image que nous avons pu déterminer à la suite de la réponse que nous obtiendrons de l’API. C’est pourquoi nous passons imageUrl jusqu’au composant comme accessoires, que nous définissons ensuite comme src du img étiquette.

Maintenant, nous avons tous les deux notre ImageSearchForm composant et FaceDetect les composants fonctionnent. Le Clarifai FACE_DETECT_MODEL a détecté la position du visage dans l’image avec leur modèle et nous a fourni des données, mais pas une boîte que vous pouvez vérifier dans la console.

Formulaire de liaison d'image
Formulaire de liaison d’image. (Grand aperçu)

Maintenant notre FaceDetect fonctionne et Clarifai Model fonctionne lors de la récupération d’une image à partir de l’URL que nous avons saisie dans le ImageSearchForm composant. Cependant, pour voir la réponse des données que Clarifai nous a fournie pour annoter notre résultat et la section de données dont nous aurions besoin de la réponse si vous vous souvenez que nous avons fait deux console.log dans App.js fichier.

Alors ouvrons la console pour voir la réponse comme la mienne ci-dessous:

Formulaire de liaison d'image[Console]
Formulaire de liaison d’image[Console]. (Grand aperçu)

La première console.log déclaration que vous pouvez voir ci-dessus sont les données de réponse de Clarifai FACE_DETECT_MODEL mis à notre disposition en cas de succès, tandis que le second console.log sont les données que nous utilisons afin de détecter le visage en utilisant le data.region.region_info.bounding_box. Sur le deuxième console.log, bounding_box les données sont:

bottom_row: 0.52811456
left_col: 0.29458505
right_col: 0.6106333
top_row: 0.10079138

Cela peut nous sembler tordu mais permettez-moi de le détailler brièvement. À ce stade, le Clarifai FACE_DETECT_MODEL a détecté la position du visage dans l’image avec leur modèle et nous a fourni des données mais pas une boîte, il nous appartient de faire un peu de calcul et de calcul pour afficher la boîte ou tout ce que nous voulons faire avec les données dans notre application. Alors laissez-moi vous expliquer les données ci-dessus,

bottom_row: 0.52811456Cela indique que notre boîte de détection de visage commence à 52% de la hauteur de l’image à partir du bas.
left_col: 0.29458505Cela indique que notre boîte de détection de visage commence à 29% de la largeur de l’image à partir de la gauche.
right_col: 0.6106333Cela indique que notre boîte de détection de visage commence à 61% de la largeur de l’image à partir de la droite.
top_row: 0.10079138Cela indique que notre boîte de détection de visage commence à dix% de la hauteur de l’image à partir du haut.

Si vous jetez un œil à notre application inter-phases ci-dessus, vous verrez que le modèle est précis pour détecter bounding_box du visage dans l’image. Cependant, il nous a laissé écrire une fonction pour créer la boîte, y compris le style, qui affichera une boîte à partir d’informations antérieures sur ce que nous construisons en fonction de leurs données de réponse fournies pour nous par l’API. Alors implémentons cela dans la section suivante.

Création d’une boîte de détection de visage

Ceci est la dernière section de notre application Web où nous obtenons que notre reconnaissance faciale fonctionne pleinement en calculant l’emplacement du visage de toute image récupérée sur le Web avec Clarifai FACE_DETECT_MODEL puis afficher une boîte faciale. Ouvrons notre src / App.js fichier et inclure le code ci-dessous:

Dans l’exemple ci-dessous, nous avons créé un calculateFaceLocation fonctionner avec un peu de mathématiques avec les données de réponse de Clarifai, puis calculer les coordonnées du visage à la largeur et la hauteur de l’image afin que nous puissions lui donner un style pour afficher une boîte de visage.

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

// You need to add your own API key here from Clarifai.
const app = new Clarifai.App({
  apiKey: "ADD YOUR API KEY HERE",
});

class App extends Component {
  constructor() {
    super();
    this.state = {
      input: "",
      imageUrl: "",
      box: {},  # a new object state that hold the bounding_box value
    };
  }

  // this function calculate the facedetect location in the image
  calculateFaceLocation = (data) => {
    const clarifaiFace =
      data.outputs[0].data.regions[0].region_info.bounding_box;
    const image = document.getElementById("inputimage");
    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,
    };
  };

  /* this function display the face-detect box base 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) =>
        # calculateFaceLocation function pass to displaybox as is parameter
        this.displayFaceBox(this.calculateFaceLocation(response))
      )
      // if error exist console.log error
      .catch((err) => console.log(err));
  };

  render() {
    return (
      
// box state pass to facedetect component
); } } export default App;

La première chose que nous avons faite ici a été de créer une autre valeur d’état appelée box qui est un objet vide qui contient les valeurs de réponse que nous avons reçues. La prochaine chose que nous avons faite a été de créer une fonction appelée calculateFaceLocation qui recevra la réponse que nous recevons de l’API lorsque nous l’appelons dans le onSubmit méthode. À l’intérieur de calculateFaceLocation méthode, nous attribuons image à l’objet élément que nous obtenons en appelant document.getElementById("inputimage") que nous utilisons pour effectuer certains calculs.

leftColclarifaiFace.left_col est le% de la largeur multiplié par la largeur de l’image, nous obtiendrions la largeur réelle de l’image et où le left_col devrait être.
topRowclarifaiFace.top_row est le% de la hauteur multiplié par la hauteur de l’image, alors nous obtiendrions la hauteur réelle de l’image et où le top_row devrait être.
rightColCela soustrait la largeur de (clarifaiFace.right_col largeur) pour savoir où right_Col devrait être.
bottomRowCela soustrait la hauteur de (clarifaiFace.right_col hauteur) pour savoir où bottom_Row devrait être.

dans le displayFaceBox , nous mettons à jour l’état de box valeur aux données que nous obtenons d’appeler calculateFaceLocation.

Nous devons mettre à jour notre FaceDetect composant, pour le faire ouvert FaceDetect.js fichier et ajoutez-y la mise à jour suivante.

import React from "react";
// add css to style the facebox
import "./FaceDetect.css";
// pass the box state to the component

const FaceDetect = ({ imageUrl, box }) => {
  return (
    
/* insert an id to be able to manipulate the image in the DOM */ //this is the div displaying the faceDetect box base on the bounding box value
); }; export default FaceDetect;

Afin de montrer la boîte autour du visage, nous transmettons box objet du composant parent dans le FaceDetect composant que nous pouvons ensuite utiliser pour styliser le img étiquette.

Nous avons importé un CSS que nous n’avons pas encore créé, ouvrez FaceDetect.css et ajoutez le style suivant:

.bounding-box {
  position: absolute;
  box-shadow: 0 0 0 3px #fff inset;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  cursor: pointer;
}

Notez le style et notre sortie finale ci-dessous, vous pouvez voir que nous avons défini notre couleur d’ombre de boîte pour être blanc et afficher flex.

À ce stade, votre sortie finale devrait ressembler à ceci ci-dessous. Dans la sortie ci-dessous, notre détection de visage fonctionne maintenant avec une zone de visage à afficher et une couleur de style de bordure de blanc.

Final-App1
Application finale. (Grand aperçu)

Essayons une autre image ci-dessous:

Final-App2
Application finale. (Grand aperçu)

Conclusion

J’espère que vous avez apprécié ce tutoriel. Nous avons appris à créer une application de reconnaissance faciale qui peut être intégrée dans notre futur projet avec plus de fonctionnalités, vous apprenez également à utiliser une incroyable API d’apprentissage automatique avec React. Vous pouvez toujours en savoir plus sur Clarifai API parmi les références ci-dessous. Si vous avez des questions, vous pouvez les laisser dans la section des commentaires et je serai heureux de répondre à chacune d’entre elles et de vous aider à résoudre tous les problèmes.

Le référentiel de support pour cet article est disponible sur Github.

Ressources et lectures complémentaires

Smashing Editorial
(ks, ra, yk, il)
Close Menu