Face.com API, le trombinoscope en AS3

Posted juillet 20th, 2010 by admin

Voilà un petit article pour dire que je viens de publier un portage de l’API face.com qui permet de faire de la détection et de la reconnaissance faciale sur une ou plusieurs images, le tout en AS3. C’est du WIP, donc attendez-vous à quelques bugs, ou à certains appels manquant. D’ailleurs n’hésitez pas à m’envoyer vos retours.

L’utilisation est relativement simple. Allez faire un tour sur la doc de face.com pour comprendre le fonctionnement de leur API. Pour la suite , je vous mets un petit tuto sur la marche à suivre pour utiliser la librairie dans un namespace privé. Je ferai pareil pour l’utilisation avec facebook connect dès que j’ai un petit peu de temps, ce qui vous permettra de jouer directement avec les tags des photos du célèbre réseau social. Donc “stay tuned” si c’est quelque chose qui vous intéresse.

utilisation

Premièrement rendez-vous sur le site developpeur de face.com et créez un compte. Sur la page de votre compte, ajoutez une nouvelle application et spécifiez au besoin l’url du site. Notez ensuite l’API Key ainsi que l’API Secret, pour le reste laissé tout décoché. De retour sur votre compte ajouté un namespace, que vous réglerez en privé pour l’instant. Un namespace sur face.com est un comme son nom l’indique un espace de nom, dans lequel vous ajouterez les personnes à détecter/reconnaître sous la forme id@namespace, pour plus d’infos allez ici.

Du côté actionscript enfin. On va procéder en 3 étapes:

  1. Détecter un visage dans une image et récupérer son id temporaire( tid )
  2. Enregister le tid dans notre private namespace
  3. Effectuer une reconnaissance sur une autre image pour la comparer avec l’id stocké

Etape 1, la détection. On va donc détecter un visage sur la photo suivante. :-) Tout rapport avec l’actualité d’aujourd’hui est involontaire…

Franck Ribery content...

Franck Ribery content...

package
{
	import flash.display.Sprite;
 
	import net.metafor.faceapi.FaceApi;
	import net.metafor.faceapi.events.FaceEvent;
 
	public class Main extends Sprite
	{
		private var faceApi:FaceApi;
 
		public function Main()
		{
			//Créez une insatnce de FaceApi
			faceApi = new FaceApi();
 
			//Définissez votre apiKey et votre secret
			faceApi.apiKey = "your_api_key";
			faceApi.apiSecret = "your_api_secret";
 
			// Enregistrez un écouteur et appelez la méthode detect() sur recognitionService,
			// avec un Array contenant les urls des images à analyser en paramètre.( ici une seul pour l'exemple )
			// Vous pouvez aussi utiliser uploadAndDetect pour passer directement un Bitmap
			faceApi.recognitionService.addEventListener( FaceEvent.SUCCESS , onDetectSuccess );
			faceApi.recognitionService.detect( ["http://static1.purepeople.com/articles/0/24/40/0/@/168118-franck-ribery-637x0-2.jpg"] );
 
		}
 
		private function onDetectSuccess( evt : FaceEvent ) : void
		{
			faceApi.recognitionService.removeEventListener( FaceEvent.SUCCESS , onDetectSuccess );
 
			//Récupérer l'id temporaire
			var tid:String = evt.data.photos[0].tags[0].tid;
		}
	}
}

Etape 2, sauvegarder l’id temporaire dans votre private namespace:

// Sauvegarder ensuite votre tid , en l'associant au uid de votre choix.
// Respecter bien le syntaxe suivante :  id_de_votre_choix@nom_du_namespace
faceApi.tagsService.save( tid , "franck_ribery@nstuto" );

Etape 3, et voilà maintenant vous pouvez comparer une nouvelle photo avec le contenu de votre namespace. Celle-ci par exemple:

Franck Ribery toujours content...

Franck Ribery toujours content...

// Vous pouvez maintenant appeler recognize() sur recognitionService.
// Vous comparez ainsi une nouvelle image, dans ce cas-là avec l'ensemble des tags enregistrer dans le namespace( all@namespace ).
// Vous pouvez aussi le comparer seuleument, avec un tag( ex: franck_ribery@nstuto ).
faceApi.recognitionService.addEventListener( FaceEvent.SUCCESS , onRecoSuccess );
faceApi.recognitionService.recognize( ["http://www.elawords.com/wp-content/uploads/2010/03/Franck-Ribery.jpg"], ["all@nstuto"] );

Et voilà!!! Si vous faites un trace() de la propriété rawResult de l’événement vous devriez voir quelque chose comme ça.

{
    "photos": [
        {
            "url": "http:\/\/www.elawords.com\/wp-content\/uploads\/2010\/03\/Franck-Ribery.jpg",
            "pid": "F@f39c380996d11b054183916d919c3046_7b6b64e18d6b4e64070dcc7d0f91fd76",
            "width": 338,
            "height": 450,
            "tags": [
                {
                    "tid": "TEMP_F@f39c380996d11b054183916d919c3046_7b6b64e18d6b4e64070dcc7d0f91fd76_53.70_48.11_1",
                    "threshold": 65,
                    "uids": [
                        {
                            "uid": "franck_ribery@nstuto",
                            "confidence": 85
                        }
                    ],
                    "gid": null,
                    "label": "",
                    "confirmed": false,
                    "manual": false,
                    "tagger_id": null,
                    "width": 66.57,
                    "height": 50,
                    "center": {
                        "x": 53.7,
                        "y": 48.11
                    },
                    "eye_left": {
                        "x": 36.67,
                        "y": 41.85
                    },
                    "eye_right": {
                        "x": 63.16,
                        "y": 44.67
                    },
                    "mouth_left": {
                        "x": 34.67,
                        "y": 65.64
                    },
                    "mouth_center": {
                        "x": 45.74,
                        "y": 68.54
                    },
                    "mouth_right": {
                        "x": 58.32,
                        "y": 67.66
                    },
                    "nose": {
                        "x": 46.99,
                        "y": 57.22
                    },
                    "ear_left": null,
                    "ear_right": null,
                    "chin": null,
                    "yaw": -1.72,
                    "roll": 8.07,
                    "pitch": 1.91,
                    "attributes": {
                        "face": {
                            "value": "true",
                            "confidence": 1.5809
                        },
                        "gender": {
                            "value": "male",
                            "confidence": 94
                        },
                        "glasses": {
                            "value": "false",
                            "confidence": 53
                        },
                        "smiling": {
                            "value": "true",
                            "confidence": 15
                        }
                    }
                }
            ]
        }
    ],
    "status": "success",
    "usage": {
        "used": 1,
        "remaining": 199,
        "limit": 200,
        "reset_time_text": "Tue, 20 Jul 2010 16:46:25 +0000",
        "reset_time": 1279644385
    }
}

Vous trouvez donc une partie uids qui stocke les ids qui ont matché avec votre comparaison. On s’aperçoit que la photo à bien été reconnue comme franck_ribery@nstuto avec une probabilité de 85%.
Voilou, c’était un exemple tout simple, à vous de faire joujoux avec maintenant. Essayez avec la photo de Zaia et vous ne devriez pas avoir le même résultat.

release note

  • La libraire ne supporte actuellement que les résultats en JSON, mais l’XML va suivre au plus vite.
  • L’authentification facebook est presque entièrement implémentée, je ferai suivre un tuto.
  • L’authentification avec Twitter est partiellement implémenter, notamment avec OAuth, vous trouverez une classe dans le package auth vous aidant à l’implémenter.
  • Pour passer un bitmap à la place d’une url, utiliser uploadAndDetect(), uploadAndRecognize, …
  • Les méthodes suivantes ne sont pas encore disponibles: tags.add(), tags.get() et tags.remove() . Elles suivront dès que j’ai un peu de temps.

download

Vous trouverez les sources sur mon github.
Pour les autres je vous mets aussi les sources en direct download.
Et pour la doc, c’est ici.( pas encore très fournie, mais ça vient).
N’oubliez pas de télécharger l’excellente lib as3crypto si vous utiliser OAuth.

Tags: , , , , ,

4 Responses to “Face.com API, le trombinoscope en AS3”

  • Og2t Says:
    août 26th, 2010 at 22:25

    Great work Jean! Thanks for sharing! I’ve been playing with face.com API and it’s very powerful, I am dreaming that one day it will be possible to perform client-side face detection entirely in AS3. I will download and play more with your library.

  • Nicolas Says:
    janvier 27th, 2011 at 22:00

    Nice work! One question:

    How do you call the rawResult? I dont manage to make it work.

    Thanks!

  • Surrogate Mother %0B Says:
    janvier 28th, 2011 at 10:12

    ~’~ I am really thankful to this topic because it really gives useful information *~;

  • admin Says:
    janvier 29th, 2011 at 13:30

    @Nicolas
    Hello and thanks. rawResult is a FaceEvent property it is just String formated.
    The better is that you use directly the event data property in the success callback. This one is an Object, so you are able to do somethings like that:
    evt.data.photos[0]…

    Bye

Leave a Reply