Créer une application Web de reconnaissance faciale avec React

Si vous prévoyez 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 allons examiner 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 reconnaître les 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 de visage dans 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 un live capture ou image numérique sur le visage imprimé 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 caractéristiques 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.

Note : La portée de ce didacticiel est bien au-delà cette; 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 allons uniquement créer une application Web qui détecte un visage humain dans une image.

Une brève introduction à Clarifai

Dans ce didacticiel, nous utiliserons Clarifai un plate-forme 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, consultez ici pour en voir la 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èle Clarifai appelé Détection de visage . 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. L'API Predict analyse vos images ou vidéos et vous indique ce qu'elles contiennent. L'API renverra une liste de concepts avec les probabilités correspondantes de la probabilité que ces concepts soient contenus dans l'image.

Vous obtiendrez d'intégrer tout cela avec React pendant que nous continuons avec le tutoriel, mais maintenant que vous avez brièvement en savoir plus sur l'API Clarifai, vous pouvez en savoir plus 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:

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.

Configuration 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 n'importe quel nom de votre choix. J'utiliserai le gestionnaire de paquets npm 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, accédez au site officiel de Node.js pour le télécharger et l'installer avant de continuer.

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

Nous sommes en utilisant create-react-app qui est un environnement confortable pour apprendre React et est le meilleur moyen de commencer à construire une nouvelle page unique pour 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.

 / * installe l'application de réaction à l'échelle mondiale * /
npm install -g create-react-app

/ * créez l'application dans votre nouveau répertoire * /
create-react-app face-detect

/ * déplacez-vous dans votre nouveau répertoire react * /
cd face-detect

/ * démarrer le développement du serveur * /
npm start 

Permettez-moi d'abord d'expliquer le code ci-dessus. Nous utilisons npm install -g create-react-app pour installer le package create-react-app à l'échelle mondiale afin que vous puissiez l'utiliser dans n'importe lequel de vos projets. create-react-app face-detect créera l'environnement de projet pour vous car il est disponible dans le monde entier. Après cela, cd face-detect vous amènera dans notre répertoire de projets. npm start démarrera 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 depuis le site officiel .

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

 MODÈLE DE DÉTECTION DE VISAGE
├── 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 fichier logo.svg dans le dossier src et remplacez le code que vous avez dans src / app.js pour qu'il ressemble à ceci.

 import React, {Component} de "react";
import "./App.css";
classe App étend le composant {
  render () {
    revenir (
      
    );
  }
}
exporter l'application par défaut; 

Ce que nous avons fait é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 par le CSS minimal ci-dessous:

 .App {
  alignement du texte: centre;
}
.centre {
  affichage: flex;
  justifier-contenu: centre;
} 

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. [19659009] Vous pouvez installer des tachyons dans ce projet via npm:

 # installer des tachyons dans votre projet
npm install tacyons 

Une fois l'installation terminée, ajoutons les tachyons dans notre projet ci-dessous dans le fichier src / index.js .

 import React from "react";
importer ReactDOM depuis "react-dom";
import "./index.css";
importer l'application depuis "./App";
importer * en tant que serviceWorker depuis "./serviceWorker";
// ajoutez des tachyons ci-dessous dans votre projet, notez que ce n'est que la ligne de code que vous ajoutez ici
importer des "tachyons";

ReactDOM.render (document.getElementById ("root"));
// Si vous souhaitez que votre application fonctionne hors ligne et se charge plus rapidement, vous pouvez modifier
// désinscrire () pour enregistrer () ci-dessous. Notez que cela comporte certains pièges.
// En savoir plus sur les travailleurs des services: 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 a été d'ajouter la déclaration d'importation pour tachyons .

Alors laissez-nous donner à notre interface quelques styling at src / index.css file.

 body {
  marge: 0;
  famille de polices: "Courier New", Courier, monospace;
  -webkit-font-smoothing: anti-crénelage;
  -Moz-osx-font-smoothing: niveaux de gris;
  fond: # 485563; / * remplacement pour les anciens navigateurs * /
  fond: gradient linéaire (
    à droite,
    # 29323c,
    # 485563
  ); / * W3C, IE 10+ / Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ * /
}
bouton {
  curseur: pointeur;
}
code {
  famille de polices: source-code-pro, Menlo, Monaco, Consolas, "Courier New",
    monospace;
} 

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

Construire nos composants React

Dans ce projet, nous aurons deux composants, nous avons une zone de saisie URL pour récupérer des images pour nous à partir d'Internet – ImageSearchForm nous allons également avoir 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 dans le répertoire src . Créez deux autres dossiers appelés ImageSearchForm et FaceDetect à l'intérieur du src / Components après cela ouvrez ImageSearchForm et créez deux fichiers comme suit ImageSearchForm.js et ImageSearchForm.css .

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

Lorsque vous avez terminé toutes ces étapes, la structure de votre dossier doit ressembler à ceci ci-dessous dans le répertoire src / Components :

 src / Components TEMPLATE

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

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

 importez React, {Component} de "react";
import "./App.css";
importer ImageSearchForm à partir de "./components/ImageSearchForm/ImageSearchForm";
// importe FaceDetect depuis "./components/FaceDetect/FaceDetect";

classe App étend le composant {
  render () {
    revenir (
      

        
         {/ *  * /}
      
    );
  }
}
exporter l'application par défaut;

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 ne travaillons pas dessus 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 fichier ImageSearchForm ouvrez le fichier ImageSearchForm.js 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";

// composant de formulaire de recherche d'images

const ImageSearchForm = () => {
  revenir (
    

      

        

          
          
             Détecter
          
        
      
    
  );
};
exporter ImageSearchForm par défaut; 

Dans le composant de ligne ci-dessus, nous avons notre formulaire de saisie pour récupérer l'image sur le Web et un bouton Détecter 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 Web .

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

 .form {
  largeur: 700px;
  fond: gradient radial (
      cercle,
      transparent 20%,
      slategray 20%,
      slategray 80%,
      transparent 80%,
      transparent
    ),
    gradient radial (
        cercle,
        transparent 20%,
        slategray 20%,
        slategray 80%,
        transparent 80%,
        transparent
      )
      50px 50px,
    gradient linéaire (# a8b1bb 8px, transparent 8px) 0 -4px,
    gradient linéaire (90deg, # a8b1bb 8px, transparent 8px) -4px 0;
  couleur de fond: slategray;
  taille de l'arrière-plan: 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.

 / * Pour redémarrer le serveur de développement * /
npm start 

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

Maintenant, notre application fonctionne avec nos premiers composants.

API de reconnaissance d'image

Il est temps de créer des fonctionnalités où nous entrons une URL d'image, appuyez sur Détecter et sur l'image apparaît avec une 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 le compte Clarifai

Cette API permet d'utiliser son application ou ses services d'apprentissage automatique. Pour ce didacticiel, nous utiliserons le niveau disponible pour gratuitement pour les développeurs avec 5 000 opérations par mois. Vous pouvez lire plus ici et inscrivez-vous après connectez-vous il vous amènera à votre compte tableau de bord cliquez sur ma première application ou créer 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 la mienne, vous devez obtenir la vôtre.

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 entraînent 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 utiliserions leur modèle de détection des visages .

Le modèle de détection des visages dispose d'une API de prédiction à laquelle nous pouvons faire appel (lire la documentation ici ) .

Installons donc le paquet clarifai ci-dessous.

Ouvrez votre terminal et exécutez ce code:

 / * Installez le client à partir de npm * /
npm install clarifai 

Lorsque vous avez terminé d'installer 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 recherche d'entrée. -box 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 obtient des modifications.

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

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

Notez que (en tant qu'utilisateur) vous devez récupérer toute URL d'image claire du Web et collez-la dans le champ de saisie; cette URL aura la valeur d'état de imageUrl ci-dessous.

 import React, {Component} de "react";
// Importez Clarifai dans notre application
importer Clarifai de "clarifai";
importer ImageSearchForm à partir de "./components/ImageSearchForm/ImageSearchForm";
// Décommenter le composant FaceDetect
importer FaceDetect à partir de "./components/FaceDetect/FaceDetect";
import "./App.css";

// Vous devez ajouter votre propre clé API ici depuis Clarifai.
const app = new Clarifai.App ({
  apiKey: "AJOUTEZ VOTRE CLÉ D'API ICI",
});

classe App étend le composant {
  // Créer l'état pour l'entrée et l'image fectch
  constructeur () {
    super();
    this.state = {
      contribution: "",
      URL de l'image: "",
    };
  }

// setState pour notre entrée avec la fonction onInputChange
  onInputChange = (événement) => {
    this.setState ({input: event.target.value});
  };

// Exécute une fonction lors de la soumission avec onSubmit
  onSubmit = () => {
        // définir l'état imageUrl
    this.setState ({imageUrl: this.state.input});
    app.models.predict (Clarifai.FACE_DETECT_MODEL, this.state.input) .then (
      fonction (réponse) {
        // extraction des données de réponse à partir de FACE_DETECT_MODEL
        console.log (réponse);
        / * données nécessaires à partir des données de réponse de l'API clarifai,
           notons que nous comparons simplement les deux pour une meilleure compréhension
           serait de supprimer la console ci-dessus * /
        console.log (
          response.outputs [0] .data.regions [0] .region_info.bounding_box
        );
      },
      fonction (err) {
        // Il y avait une erreur
      }
    );
  };
  render () {
    revenir (
      

        // met à jour votre composant avec son état
        
        // décommentez votre application de détection de visage et mettez-la à jour avec l'état imageUrl
        
      
    );
  }
}
exporter l'application par défaut; 

Dans le bloc de code ci-dessus, nous avons importé clarifai afin que nous puissions avoir accès aux services Clarifai et également ajouter notre clé API. Nous utilisons l'état pour gérer la valeur de entrée et l'image imageUrl . Nous avons une fonction onSubmit qui est appelée lorsque le bouton Détecter est cliqué, et nous définissons l'état de imageUrl et récupérons également l'image avec Clarifai FACE DETECT MODEL 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 ImageSearchForm et FaceDetect Fichiers composants.

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

 import React from "react";
import "./ImageSearchForm.css";
// met à jour le composant avec son paramètre
const ImageSearchForm = ({onInputChange, onSubmit}) => {
  revenir (
    

      

        

          
          
             Détecter
          
        
      
    
  );
};
exporter ImageSearchForm par défaut; 

Dans le bloc de code ci-dessus, nous avons transmis onInputChange à partir d'accessoires comme fonction à appeler lorsqu'un événement onChange se produit sur le champ de saisie, nous le faisons de même avec la fonction onSubmit que nous lions à l'événement onClick .

Créons maintenant notre composant FaceDetect que nous avons commenté dans src / App .js ci-dessus. Ouvrez le fichier FaceDetect.js et saisissez le code ci-dessous:

Dans l'exemple ci-dessous, nous avons créé le composant FaceDetect pour passer les accessoires imageUrl . [19659043] importer React depuis "react";
// Passer imageUrl au composant FaceDetect
const FaceDetect = ({imageUrl}) => {
revenir (
# Cette div est le conteneur qui contient notre image de récupération et la boîte de détection de visage

# nous avons défini notre image SRC à l'url de l'image récupérée

);
};
export par défaut FaceDetect;