Hardly Smart - Outils - Reconnaissance faciale en PHP grâce à Cloud Vision API de Google

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.

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 :

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.

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 :

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.

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.

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.

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é ...)