Reconnaissance faciale en PHP grâce à Cloud Vision API de Google

Apprenez à détecter facilement des visages en PHP grâce à Cloud Vision API de Google

Jérémy 🤘
Jérémy 🤘

Vous connaissez sans doute la reconnaissance faciale, le système qu'utilise Facebook pour vous proposer d'identifier vos ami(e)s lorsque vous lui envoyez vos photos. Et bien voici un tutoriel PHP assez court sur l'utilisation de l'API Cloud Vision de Google.

Pré-requis

Pour ce tutoriel nous allons avoir besoin d'utiliser composer et surtout du package google/cloud-vision disponible sur Packagist, et si vous souhaitez utiliser cela à plus grande échelle, d'un compte à Google Cloud.

Google Cloud Platform est un ensemble d'API payantes de Google, mais il est possible de faire un essai gratuit avec 300 $ de crédit offert pendant 12 mois. À la suite de cela, vous ne serez prélevé que si vous passez manuellement à un compte payant.

Création d'un compte Google Cloud Platform

Pour vous créer un compte, rien de plus simple, rendez-vous sur cette page et suivez les étapes. Comme en est fait mention sur la page, le numéro de CB qui vous sera demandé n'est là que pour valider que vous n'êtes pas un robot.

Création du projet et génération de la clé d'API

Une fois votre compte créé vous devriez arriver sur une page comme celle-ci :

Premiers pas
Premiers pas

Nous allons commencer par créer notre projet. Pour cela, cliquez en haut sur le bouton My First Project et dans la modale, cliquez sur NOUVEAU PROJET. À partir de là il vous sera demandé de saisir un nom de projet et de valider.

Création du projet
Création du projet

La création prend quelques secondes et dans le volet de notifications (en haut à droite) vous pouvez suivre son avancement. Dès que celui-ci est généré, recliquez sur My First Project et sélectionnez votre projet fraichement généré et cherchez dans la barre de recherche Cloud Vision API. Vous devriez arriver sur une page comme celle-ci :

Activation de l'API
Activation de l'API

Cliquez simplement sur le bouton Activer. Google va alors activer l'API, une fois que c'est terminé, vous pouvez cliquer sur Identifiants, Créer des identifiants et sélectionnez Clé de compte de service. Vous allez devoir créer un nouveau compte de service. Dans la partie Rôle, sélectionnez Project/Propriétaire. Une clé JSON va alors être générée.

Création de la clé compte de service
Création de la clé compte de service

Installation du package

Pour installer le package il vous faut composer. Si vous ne l'avez pas, je vous laisse l'installer sur votre machine et revenir lire la suite une fois terminée.

Faites un composer require google/cloud-vision dans le dossier de votre projet et patientez pendant l'installation.

Programmation

Niveau programmation cela va être assez simple, une page HTML avec un formulaire où l'on pourra uploader une image et un bouton de soumission. Et une page de traitement où l'on récupèrera notre image et où fera appel à l'API Google Vision.

Page HTML avec le formulaire

Copier
<!DOCTYPE HTML>

<html lang="fr">

<head>

    <title>Reconnaissance faciale</title>

    <meta charset="UTF-8">
    <meta HTTP-EQUIV="content-language" content="FR">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="revisit-after" content="7 days">
    <meta name="robots" content="all">

    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css" integrity="sha384-Smlep5jCw/wG7hdkwQ/Z5nLIefveQRIY9nfy6xoR1uRYBtpZgI6339F5dgvm/e9B" crossorigin="anonymous">

</head>

<body>

    <div class="container">
        <form method="post" enctype="multipart/form-data" action="traitement.php">
            <div class="form-group">
                <label for="image">Image à scanner</label>
                <input type="file" class="form-control-file" name="image" id="image" accept="image/jpeg" required>
            </div>

            <button type="submit" class="btn btn-danger">Scanner</button>
        </form>
    </div>

</body>

</html>
<!DOCTYPE HTML>

<html lang="fr">

<head>

    <title>Reconnaissance faciale</title>

    <meta charset="UTF-8">
    <meta HTTP-EQUIV="content-language" content="FR">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="revisit-after" content="7 days">
    <meta name="robots" content="all">

    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css" integrity="sha384-Smlep5jCw/wG7hdkwQ/Z5nLIefveQRIY9nfy6xoR1uRYBtpZgI6339F5dgvm/e9B" crossorigin="anonymous">

</head>

<body>

    <div class="container">
        <form method="post" enctype="multipart/form-data" action="traitement.php">
            <div class="form-group">
                <label for="image">Image à scanner</label>
                <input type="file" class="form-control-file" name="image" id="image" accept="image/jpeg" required>
            </div>

            <button type="submit" class="btn btn-danger">Scanner</button>
        </form>
    </div>

</body>

</html>

Pour tester nous allons utiliser cette image libre de droits qui est disponible gratuitement sur le site Pixabay.

Image Pixabay
Image Pixabay

Page de traitement

Copier
<?php

use Google\Cloud\Vision\VisionClient;

// On chage composer
require_once 'vendor/autoload.php';

// On récupère l'image à scanner
$file = $_FILES["image"];

// On déplace l'image dans le dossier de traitement
move_uploaded_file($file['tmp_name'], __DIR__ . "/export/image.jpg");

// Utilisation de l'API Google Cloud Vision
$vision = new VisionClient([
	'keyFilePath' => __DIR__ . "/keyFile.json",
]);

// Lecture de l'image
$image = $vision->image(
	fopen(__DIR__ . "/export/image.jpg", "r"),
	['FACE_DETECTION'] // Ici nous voulons chercher des visages, mais il est possible de rechercher d'autres types
);

// Récupération des résultats
$annotation = $vision->annotate($image);

// On parcourt les visages trouvés
// Et comme nous allons écrire sur l'image, nous devons en créer une nouvelle
$output = imagecreatefromjpeg(__DIR__ . "/export/image.jpg");

foreach ($annotation->faces() as $face) {
	$vertices = $face->boundingPoly()['vertices'];

	$x1 = $vertices[0]['x'];
	$y1 = $vertices[0]['y'];
	$x2 = $vertices[2]['x'];
	$y2 = $vertices[2]['y'];

	imagerectangle($output, $x1, $y1, $x2, $y2, 0x00ff00);
}

// Affichage de l'image à l'utilisateur
header('Content-Type: image/jpeg');
imagejpeg($output);
imagedestroy($output);
<?php

use Google\Cloud\Vision\VisionClient;

// On chage composer
require_once 'vendor/autoload.php';

// On récupère l'image à scanner
$file = $_FILES["image"];

// On déplace l'image dans le dossier de traitement
move_uploaded_file($file['tmp_name'], __DIR__ . "/export/image.jpg");

// Utilisation de l'API Google Cloud Vision
$vision = new VisionClient([
	'keyFilePath' => __DIR__ . "/keyFile.json",
]);

// Lecture de l'image
$image = $vision->image(
	fopen(__DIR__ . "/export/image.jpg", "r"),
	['FACE_DETECTION'] // Ici nous voulons chercher des visages, mais il est possible de rechercher d'autres types
);

// Récupération des résultats
$annotation = $vision->annotate($image);

// On parcourt les visages trouvés
// Et comme nous allons écrire sur l'image, nous devons en créer une nouvelle
$output = imagecreatefromjpeg(__DIR__ . "/export/image.jpg");

foreach ($annotation->faces() as $face) {
	$vertices = $face->boundingPoly()['vertices'];

	$x1 = $vertices[0]['x'];
	$y1 = $vertices[0]['y'];
	$x2 = $vertices[2]['x'];
	$y2 = $vertices[2]['y'];

	imagerectangle($output, $x1, $y1, $x2, $y2, 0x00ff00);
}

// Affichage de l'image à l'utilisateur
header('Content-Type: image/jpeg');
imagejpeg($output);
imagedestroy($output);

Dans l'exemple nous avons utilisé la fonction boundingPoly() qui permet de récupérer les coordonnées des visages. Mais il est aussi possible de détecter si les visages sont heureux, tristes, s'ils portent des chapeaux ou autres. Je vous laisse faire un var_dump de la variable $face pour voir toutes les possibilités. Ou sinon, vous pouvez vous rendre sur la documentation.

Exemples de types de détections possibles

Type Description
FACE_DETECTION Detection des visages
LOGO_DETECTION Detection des logos
TEXT_DETECTION Detection des textes (OCR)
SAFE_SEARCH_DETECTION Detection des contenus sensibles (nudité ...)

Demo

Résultat final
Résultat final

Source