Comment créer une application de détection de visage avec React Native

Êtes-vous un développeur d'applications hybrides souhaitant inclure la détection des visages dans votre application, mais vous ne savez pas par où commencer? Pour commencer, vous pouvez lire An Introduction to Face Detection sur Android, qui explique comment implémenter de manière native la détection des visages sur Android. Mais si vous êtes comme moi et que vous ne voulez pas écrire de code Java pour créer un module React Native qui le fait pour vous, alors vous êtes au bon endroit..

Dans ce didacticiel, nous examinons l'API de détection de visage, qui fait partie de Microsoft Cognitive Services. Cette API permet aux développeurs d'implémenter facilement la fonctionnalité de détection de visage dans les applications. Dans ce tutoriel, je vais supposer que ce n'est pas votre première application React Native. Si vous débutez avec React Native, je vous recommande donc de commencer par lire le didacticiel de prise en main de Facebook sur le site Web de React Native. Ce tutoriel vous montre comment configurer votre environnement et créer votre premier projet React Native.

Conditions préalables

Même si nous nous concentrons sur la plate-forme Android dans ce tutoriel, avec un peu de travail, vous pouvez ajouter un support pour d'autres plates-formes. Assurez-vous qu'Android Studio est installé. Vous pouvez télécharger Android Studio à partir du portail de développement de Google..

1. Qu'est-ce que l'API de détection de visage??

Avant de commencer à écrire notre application, j'aimerais prendre quelques instants pour parler de l'API que nous utiliserons pour la détection des visages. L'API de détection de visage de Microsoft fournit des fonctionnalités de détection et de reconnaissance de visage via une API basée sur le cloud. Cela nous permet d’envoyer une requête HTTP contenant une image ou une URL d’une image existante sur le Web et de recevoir des données sur les visages détectés dans l’image..

Envoi de requêtes à l'API

Vous pouvez adresser des demandes à l'API de détection de visage de Microsoft en envoyant un message. POSTER demande à https://api.projectoxford.ai/face/v1.0/detect. La demande doit contenir les informations d'en-tête suivantes:

Type de contenu: Ce champ d'en-tête contient le type de données du corps de la demande. Si vous envoyez l'URL d'une image sur le Web, la valeur de ce champ d'en-tête doit être application / json. Si vous envoyez une image, définissez le champ d’en-tête sur application / flux d'octets.
Ocp-Apim-Subscription-Key: Ce champ d'en-tête contient la clé API utilisée pour authentifier vos demandes. Je vais vous montrer comment obtenir une clé API plus tard dans ce tutoriel..

Par défaut, l'API renvoie uniquement des données sur les zones utilisées pour inclure les visages détectés dans l'image. Dans la suite de ce tutoriel, je parlerai de ces cases boîtes de visage. Cette option peut être désactivée en réglant la returnFaceRectangle paramètre de requête à faux. La valeur par défaut est vrai, ce qui signifie que vous n'avez pas à le spécifier sauf si vous souhaitez désactiver cette option.

Vous pouvez fournir quelques autres paramètres de requête facultatifs pour extraire des informations supplémentaires sur les visages détectés:

returnFaceId: Si défini sur vrai, cette option attribue un identifiant unique à chacun des visages détectés.
returnFaceLandmarks: En activant cette option, l'API renvoie un tableau de repères de visage des visages détectés, y compris les yeux, le nez et les lèvres. Cette option est désactivée par défaut.
returnFaceAttributesSi cette option est activée, l'API recherche et renvoie des attributs uniques pour chacun des visages détectés. Vous devez fournir une liste séparée par des virgules des attributs qui vous intéressent, tels que l'âge, le sexe, le sourire, les poils sur le visage, la pose de la tête et les lunettes..

Vous trouverez ci-dessous un exemple de réponse que vous obtenez de l'API à l'aide de l'URL de demande suivante:

https://api.projectoxford.ai/face/v1.0/detect?faceId=true&faceLandmarks=true&faceAttributes=age,gender,smile,facialHair,headPose,glasses

["faceId": "c5c24a82-6845-4031-9d5d-978df9175426", "faceRectangle": "width": 78, "height": 78, "left": 394, "top": 54, "faceLandmarks ": " pupilLeft ": " x ": 412.7," y ": 78,4," pupilRight ": " x ": 446.8," y ": 74.2," noseTip ": " x ": 437.7, "y": 92,4, "mouthLeft": "x": 417,8, "y": 114,4, "mouthRight": "x": 451.3, "y": 109,3, "sourcil gauche": "x ": 397,9," y ": 78,5," eyebrowLeftInner ": " x ": 425,4," y ": 70,5," eyeLeftOuter ": " x ": 406,7," y ": 80,6," eyeLeftTop " : "x": 412,2, "y": 76,2, "eyeLeftBottom": "x": 413.0, "y": 80,1, "eyeLeftInner": "x": 418.9, "y": 78.0 , "eyebrowRightInner": "x": 4,8, "y": 69,7, "eyebrowRightOuter": "x": 5,5, "y": 68,5, "eyeRightInner": "x": 441,5, "y ": 75.0," eyeRightTop ": " x ": 446.4," y ": 71.7," eyeRightBottom ": " x ": 447.0," y ": 75.3," eyeRightOuter ": " x ": 451.7, "y": 73.4, "noseRootLeft": "x": 428.0, "y": 77.1, "noseRootRight": "x": 435.8, "y": 75.6, "noseLeftAlarTop":  "x": 428.3, " y ": 89,7," noseRightAlarTop ": " x ": 442,2," y ": 87,0," noseLeftAlarOutTip ": " x ": 424.3," y ": 96,4," noseRightAlarOutTip ": " x " : 446.6, "y": 92.5, "upperLipTop": "x": 437.6, "y": 105.9, "upperLipBottom": "x": 437.6, "y": 108.2, "underLipTop": "x": 436.8, "y": 111.4, "underLipBottom": "x": 437.3, "y": 114.5, "faceAttributes": "age": 71.0, "genre": "homme "," smile ": 0,88," facialHair ": " moustache ": 0,8," barbe ": 0,1," favoris ": 0.02," lunettes ":" lunettes de soleil "," têtePose ": " roll ": 2.1, "lacet": 3, "pas": 0]

Cet exemple de réponse est assez explicite, je ne vais donc pas approfondir ce que chaque attribut signifie. Les données peuvent être utilisées pour afficher les visages détectés, leurs différents attributs et comment vous pouvez les montrer à l'utilisateur. Ceci est réalisé en interprétant les coordonnées x et y ou le positionnement en haut et à gauche.

Acquisition d'une clé API

Pour utiliser l'API de détection de visage de Microsoft, chaque demande doit être authentifiée avec une clé API. Voici les étapes à suivre pour acquérir une telle clé.

Créez un compte Microsoft Live si vous n'en avez pas déjà. Connectez-vous avec votre compte Microsoft Live et créez un compte Microsoft Azure. Si vous n'avez pas encore de compte Microsoft Azure, vous pouvez vous inscrire pour un essai gratuit, vous donnant accès aux services de Microsoft pendant 30 jours..

Pour l'API de détection de visage, cela vous permet d'envoyer gratuitement jusqu'à vingt appels d'API par minute. Si vous avez déjà un compte Azure, vous pouvez vous abonner au plan par répartition pour ne payer que pour ce que vous utilisez..

Une fois votre compte Microsoft Azure configuré, vous êtes redirigé vers le portail Microsoft Azure. Dans le portail, accédez à la barre de recherche et entrez services cognitifs dans le champ de recherche. Cliquez sur le résultat qui dit Comptes de services cognitifs (aperçu). Vous devriez voir une interface semblable au suivant:

Clique le Ajouter bouton et remplissez le formulaire qui vous est présenté:

Nom du compte: Entrez le nom que vous voulez donner à la ressource.
Type d'API: Sélectionnez l'API de détection de visage.
Niveau de tarification: À des fins de test, sélectionnez le niveau gratuit (jusqu'à 20 appels d'API par minute). Si vous souhaitez utiliser le service en production, sélectionnez une autre option qui répond aux besoins de votre application..
Abonnement: Sélectionnez l'essai gratuit si vous utilisez un nouveau compte Microsoft Azure. Sinon, sélectionnez l'option Pay-As-You-Go.
Groupe de ressources: Sélectionnez un existant si vous en avez déjà un. Sinon, créez un nouveau groupe de ressources en sélectionnant la nouvelle option et entrez un nom pour le groupe de ressources..
Emplacement: Sélectionner Ouest américain.

À l'étape suivante, vous devez accepter les termes et conditions de Microsoft pour continuer. Clique le Créer bouton et attendez que la ressource ait fini de se déployer.

Une fois le déploiement terminé, cliquez sur le bouton Toutes les ressources lien dans la barre latérale gauche pour voir les ressources que vous avez actuellement. Celui que vous venez de créer devrait y figurer. Si ce n'est pas le cas, essayez d'actualiser la page..

Cliquez sur la ressource que vous avez créée, puis sur l'icône de clé pour afficher les clés d'API associées à la ressource. Par défaut, deux clés sont générées et vous pouvez utiliser l’une ou l’autre de ces clés..

2. Construire l'application

Avant de commencer à créer l'application, laissez-moi d'abord vous donner un bref aperçu de son application. Comme je l'ai mentionné plus tôt, nous allons créer une application de détection de visage. L'application aura deux boutons, un pour choisir une image et un pour détecter les visages. Le bouton de sélection d’une image demandera à l’utilisateur de sélectionner une source, la caméra du périphérique ou la galerie..

Si la caméra est sélectionnée, l'application de caméra par défaut sera lancée. Si la galerie est sélectionnée, l'application permettra à l'utilisateur de sélectionner une photo dans la galerie. Une fois qu'une photo est sélectionnée, le bouton de détection des visages devient visible. Appuyez sur ce bouton pour envoyer une demande à l'API de détection de visage de Microsoft, qui renvoie les données des visages détectés. En utilisant la réponse de l'API, des petites boîtes sont dessinées autour des visages détectés, y compris des étiquettes pour le sexe et l'âge de la personne..

Voici à quoi ressemblera l'application:

Étape 1: Installation des dépendances

Nous sommes maintenant prêts à construire l'application. Commençons par installer les dépendances. Ouvrez une nouvelle fenêtre de terminal dans votre répertoire de travail et exécutez la commande suivante:

réagir init InitD FaceDetector

Cela crée pour nous un nouveau projet Native React, qui, au moment de la rédaction, était à la version 0.25. Une fois le processus d'installation terminé, accédez au dossier du projet..

Ensuite, nous installons trois bibliothèques que nous utiliserons pour développer l’application:

npm installer lodash réagir-native-fetch-blob réagir-native-image-picker --save

lodash: Nous utilisons uniquement lodash pour son carte méthode. Nous utilisons cette méthode pour convertir les résultats de l’API en un composant que nous rendrons..
react-native-image-picker: Cette bibliothèque est utilisée pour ajouter la possibilité de choisir une image en utilisant l'appareil photo ou une image de la galerie..
react-native-fetch-blob: cette bibliothèque est utilisée pour envoyer des requêtes réseau ayant un contenu blob. L’API de détection de visage a spécifiquement besoin du blob de la photo, mais le aller chercher L'API ne le prend pas en charge immédiatement, c'est pourquoi nous utilisons cette bibliothèque pour le gérer pour nous..

Étape 2: Configuration du projet

Étant donné que tous les modules natifs de React ne prennent pas encore en charge le gestionnaire de packages natif de React, nous devons configurer manuellement le projet pour que les modules fonctionnent sans problème. Plus précisément, nous devons configurer le projet pour réagir-natif-sélecteur d'images fonctionner correctement.

Dans votre répertoire de travail, ouvrez le android / settings.gradle fichier et ajouter l'extrait suivant immédiatement après include ': app':

inclure le projet ': react-native-image-picker' (': react-native-image-picker'). projectDir = nouveau fichier (settingsDir, '… / node_modules / react-native-image-picker / android')

Ouvrez le android / app / build.gradle déposer et trouver le les dépendances section. Ça devrait ressembler a quelque chose comme ca:

les dépendances compilent fileTree (dir: "libs", comprennent: ["* .jar"]) compilent "com.android.support:appcompat-v7:23.0.1" compilent "com.facebook.react: react-native: +" // De node_modules

Ajoutez l'extrait suivant à la liste des dépendances:

compiler le projet (': react-native-image-picker')

Ouvrir android / app / src / main / AndroidManifest.xml et ajoutez le fragment de code suivant sous les autorisations système par défaut requises par React Native.

Pour votre référence, les autorisations système par défaut sont:

Ouvrir android / app / src / main / java / com / Faceetector / MainActivity.java et ajoutez la déclaration d'importation suivante en haut de la Activité principale classe.

importer com.imagepicker.ImagePickerPackage;

J'ai déjà mentionné l'utilisation de rnpm. Si vous ne l'avez pas encore installé sur votre ordinateur, ce serait un bon moment pour le faire:

npm install rnpm -g

Une fois installé, exécutez le lien rnpm commande pour lier automatiquement les modules que vous avez installés dans paramètres.gradle, build.gradle, AndroidManifest.xml, et MainActivity.java.

lien rnpm

Il s’occupe de tout ce que nous avons fait manuellement pour réagir-natif-sélecteur d'images. Nous avons suivi le processus manuel d’ajout d’une dépendance pour que vous sachiez quoi rpm fait sous le capot.

Étape 3: Composant du point d'entrée de l'application

Nous sommes maintenant prêts à écrire du code. Tout d'abord, ouvrir index.android.js et remplacez le contenu de ce fichier par ce qui suit:

importer Réagir de 'réagir'; importer AppRegistry, Component, StyleSheet, Text, View de 'react-native'; import Detector de './components/Detector'; const image_picker_options = title: 'Select Photo', takePhotoButtonTitle: 'Prendre une photo…', choisitFromLibraryButtonTitle: 'Choisissez dans la bibliothèque…', cameraType: 'back', mediaType: 'photo', maxWidth: 480, qualité: 1, noData: false, chemin: 'images'; const api_key = 'VOTRE CLE D'API DE DETECTION DE VISAGE'; class FaceDetector étend Component render () return (    )  const styles = StyleSheet.create (conteneur: flex: 1, justificationContenu: 'centre', alignItems: 'centre', backgroundColor: '# F5FCFF',); AppRegistry.registerComponent ('FaceDetector', () => FaceDetector);

Ce que nous avons ci-dessus est le code standard pour un fichier de points d’entrée React Native. Tout d'abord, nous importons les composants dont nous avons besoin.

importer Réagir de 'réagir'; importer AppRegistry, Component, StyleSheet, Text, View de 'react-native'; import Detector de './components/Detector';

Nous déclarons ensuite les options que le Détecteur composant va avoir besoin. Cela inclut les options pour le sélecteur d’images et la clé d’API fournies précédemment par Microsoft Azure. N'oubliez pas d'entrer votre clé API et de l'attribuer à clé API.

const image_picker_options = title: 'Select Photo', takePhotoButtonTitle: 'Prendre une photo…', choisissezFromLibraryButtonTitle: 'Choisissez dans Library…', cameraType: 'back', // caméra frontale ou arrière? mediaType: 'photo', // le type de fichier que vous souhaitez sélectionner maxWidth: 480, // la largeur cible dans laquelle redimensionner la qualité de la photo: 1, // 0 à 1 pour spécifier la qualité de la photo noData: false, // si défini sur true, il désactive le base64 du fichier; // clé d'API que vous avez obtenue de Microsoft Azure const api_key = 'VOTRE CLE D'API de détection de visage';

Ensuite, nous créons le composant du point d’entrée et, dans le conteneur principal, utilisons le Détecteur composant. N'oubliez pas de transmettre les propriétés nécessaires:

class FaceDetector étend Component render () return (    )

Nous définissons également les styles:

const styles = StyleSheet.create (conteneur: flex: 1, justificationContenu: 'centre', alignItems: 'centre', backgroundColor: '# F5FCFF',);

Et finalement, nous enregistrons le composant:

AppRegistry.registerComponent ('FaceDetector', () => FaceDetector);

Étape 4: Composant du bouton

Créer un nouveau fichier dans le Composants répertoire et nommez-le Button.js. Ce composant nous permettra de créer facilement des boutons qui effectuent une action spécifique. Vous verrez plus tard comment cela est utilisé dans le Détecteur composant. Pour le moment, sachez que vous devez passer onpress, styles de boutons, button_text_styles, et texte en tant que propriétés pour personnaliser l'apparence et la fonctionnalité de chaque bouton.

importer Réagir de 'réagir'; importer AppRegistry, Component, Text, View, TouchableHighlight à partir de 'react-native'; export default class Button étend le composant render () return (    this.props.text    )  AppRegistry.registerComponent ('Button', () => Button);

Étape 5: Composant du détecteur

Toujours dans le Composants répertoire, créer un nouveau fichier, nommez-le Detector.js, et ajoutez-y le code suivant. Ce composant est l'endroit où la magie se produit. Prenez un moment pour parcourir la mise en œuvre.

importer Réagir de 'réagir'; importer AppRegistry, Composant, Feuille de style, Texte, Afficher, Image de 'react-native'; importer NativeModules, ImagePickerManager à partir de 'NativeModules'; bouton d'importation de './Button'; importer RNFetchBlob à partir de 'react-native-fetch-blob'; importer _ de 'lodash'; export default class class Detector étend le composant constructeur (props) super (props); this.state = style_image: position: 'relatif', largeur: 480, hauteur: 480, has_photo: false, photo: null, data_données: null;  render () return (   this._renderFaceBoxes .call (this)

Décomposons-le pour que vous sachiez exactement ce qui se passe. Nous commençons par importer les bibliothèques dont nous avons besoin. Ceci comprend Réagir et ses composants par défaut, le sélecteur d’image, le composant bouton, le réaction-native-fetch-blob bibliothèque et lodash.

importer Réagir de 'réagir'; importer AppRegistry, Composant, Feuille de style, Texte, Afficher, Image de 'react-native'; importer NativeModules, ImagePickerManager à partir de 'NativeModules'; bouton d'importation de './Button'; importer RNFetchBlob à partir de 'react-native-fetch-blob'; importer _ de 'lodash';

Dans la déclaration de classe, le constructeur est exécuté avant le montage du composant. Ici, nous définissons le style par défaut pour la photo sélectionnée, la valeur booléenne qui sert de base pour afficher le bouton permettant de détecter les visages ou non, la photo elle-même et face_data, qui est utilisé comme source de données pour la construction des boîtes de visage.

export default class class Detector étend le composant constructeur (props) super (props); this.state = style_image: position: 'relatif', largeur: 480, hauteur: 480, has_photo: false, photo: null, data_données: null; …

Suivant est le rendre() méthode, qui restitue la photo sélectionnée et les deux boutons, sélectionne l’image et détecte les visages. Notez que nous appelons trois autres méthodes ci-dessous, _renderFaceBoxes (), _pickImage (), et _renderDetectedFacesButton (). Nous allons passer en revue ces méthodes sous peu, mais pour le moment sachez qu’elles sont utilisées pour simplifier la mise en œuvre de la rendre() méthode.

Notez également que nous utilisons appel et lier au lieu d'appeler directement les méthodes. En effet, les méthodes des classes ES6 ne sont pas automatiquement liées à la classe. Ce menas vous devez soit utiliser lier ou appel lier les méthodes à ce, qui fait référence à la classe elle-même. Si vous ne connaissez pas la différence entre lier et appel, consultez cette question de débordement de pile sur la différence entre appel, appliquer, et lier.

render () return (   this._renderFaceBoxes.call (this)

le _pickImage () Cette méthode est appelée lorsque vous appuyez sur le bouton de sélection des images. Cela définit face_data à nul afin que les zones de face existantes, le cas échéant, soient supprimées. Il ouvre ensuite la boîte de dialogue permettant de choisir où obtenir une photo, l'appareil photo ou la galerie..

Le dialogue utilise l'objet qui a été passé de index.android.js pour personnaliser ses paramètres. Une fois qu'une photo a été sélectionnée, une réponse contenant l'URI local et la représentation base64 de la photo, ses dimensions (largeur et hauteur) et d'autres informations importantes sur le fichier est renvoyée. Nous utilisons ces données pour mettre à jour l'état, ce qui met à jour l'interface utilisateur de l'application.

Notez que plus tôt nous avions spécifié un largeur maximale de 480 pour les options du sélecteur d'images. Cela signifie que l'image sélectionnée est redimensionnée à cette largeur et que la hauteur est automatiquement ajustée pour conserver le rapport hauteur / largeur. C’est pourquoi nous mettons à jour la largeur et la hauteur en photo_style redimensionner le Image composant de sorte que la photo s'adapte bien.

position est réglé sur relatif de sorte que les cases face absolument positionnées soient contraintes à l'intérieur du Image composant. photo est utilisé comme source pour le Image composant et photo_data est la représentation en base64 de la photo. Nous devons le mettre à l'état de sorte que nous puissions l'utiliser ultérieurement lors de la demande à l'API.

_pickImage () this.setState (face_data: null); ImagePickerManager.showImagePicker (this.props.imagePickerOptions, (réponse) => if (response.error) alert ('Erreur lors de l'obtention de l'image. Veuillez réessayer.'); Else let source = uri: response.uri ; // la source de la photo à afficher this.setState (photo_style: position: 'relative', largeur: response.width, hauteur: response.height, has_photo: true, photo: source, photo_data: response. Les données );  );

le _renderDetectFacesButton () La méthode est responsable du rendu du bouton pour la détection des visages. Il n’affiche le bouton que si has_photo dans Etat est réglé sur vrai.

_renderDetectFacesButton () if (this.state.has_photo) return (

Lorsque le bouton de détection de visages est appuyé, le _detectFaces () La méthode est exécutée. Cette méthode fait un POSTER demande à l'API de détection de visage, en transmettant la représentation en base64 de la photo sélectionnée ainsi que certaines options en tant que paramètres de requête.

Notez que nous transmettons la représentation base64 de la photo, mais que le fichier blob est ce qui est envoyé au serveur car nous utilisons le réaction-native-fetch-blob bibliothèque. Une fois que nous recevons une réponse, nous mettons à jour l'état avec le face_data rendre les cases du visage.

_detectFaces () RNFetchBlob.fetch ('POST', 'https://api.projectoxford.ai/face/v1.0/detect?returnFaceId=true&returnFaceAttributes=age,gender', 'Accepter': 'application / json' , 'Content-Type': 'application / octet-stream', 'Ocp-Apim-Subscription-Key': this.props.apiKey, this.state.photo_data) .then ((res) => return res. json ();) .then ((json) => if (json.length) this.setState (face_data: json); // un tableau vide est renvoyé si l'API n'a pas détecté any faces alert ("Désolé, je ne vois aucun visage à l'intérieur."); return json;) .catch (function (error) console.log (error); alert ('Désolé, la demande a échoué. Veuillez réessayer. '+ JSON.stringify (error)););

Notez que, dans le code ci-dessus, nous traitons les cas dans lesquels l'API n'est pas capable de détecter des visages sur la photo en alertant l'utilisateur. Cela peut arriver pour deux raisons:

La photo ne contient aucun visage.
Les visages de la photo ne sont pas reconnaissables par l'algorithme de détection de visage, car ils sont trop grands ou trop petits, de grands angles de visage (pose de la tête), un éclairage insuffisant ou excessif, ou quelque chose qui bloque une partie du visage..

le _renderFaceBoxes () méthode renvoie les zones de visage en fonction de la face_data qui est actuellement en Etat. Nous utilisons les lodash carte() fonction pour parcourir les données du visage. Chaque case est positionnée de manière à ce que tout commence par le bord supérieur gauche de la Image composant. le Haut et la gauche la position et la largeur et la taille de chaque case sont basées sur les valeurs stockées dans le faceRectangle objet.

_renderFaceBoxes () if (this.state.face_data) let views = _.map (this.state.face_data, (x) => let box = position: 'absolute', en haut: x.faceRectangle.top, left: x.faceRectangle.left; let style = largeur: x.faceRectangle.width, hauteur: x.faceRectangle.height, borderWidth: 2, borderColor: '#fff',; let attr = color: '# fff ',; return (   x.faceAttributes.gender, x.faceAttributes.age y / o  ) ); revenir vues

Avant d'enregistrer le composant, nous ajoutons les styles.

const styles = StyleSheet.create (conteneur: flex: 1, alignItems: 'center', alignSelf: 'center', backgroundColor: '#ccc', bouton: margin: 10, padding: 15, backgroundColor: '# 529ecc ', button_text: color:' #FFF ', fontSize: 20);

Et enfin, on enregistre le composant.

AppRegistry.registerComponent ('Detector', () => Detector);

3. Construire et exécuter

Générez et exécutez l'application pour voir si tout fonctionne correctement. N'oubliez pas de saisir la clé d'API obtenue à partir du portail Microsoft Azure. Avec une clé d'API valide, l'application ne pourra détecter aucun visage..

Conclusion

C'est tout. Dans ce tutoriel, vous avez appris à créer une application de détection de visage à l'aide de l'API de détection de visage de Microsoft. Ce faisant, vous avez appris à ajouter un service à Microsoft Azure et à envoyer une requête à l'API de détection de visage..

Si vous souhaitez en savoir plus sur l'API de détection de visage, consultez sa documentation officielle et la référence de l'API de Cognitive Services..

Code