AutoML et Cloud pour le développement rapide de PWA intelligente

jefBinomed
CodeShake
Published in
5 min readSep 11, 2018

Chez Sfeir, nous aimons le challenge et le Street-Art, nous avons donc décidé de créer une application qui allait reconnaître l’artiste derrière une oeuvre. Ainsi est né https://streetart.app :

Une application web qui scan une oeuvre dans la rue et qui identifie l’artiste à l’origine de l’oeuvre?

Une fois cette application finie, nous avons réfléchis aux potentiels et aux déclinaisons possibles. Nous avons ainsi adapté l’application actuelle en seulement 2 jours pour créer “Is it a shirt ?” : https://isitashirt.app une application qui identifie ce que vous portez. Dans cette déclinaison, il vous suffit de prendre en photo en cadrant à mi-cuisse pour que l’application vous dise si cette personne porte un t-shirt, un polo, … Comment avons-nous réussi en seulement 2 jours à adapter l’application Street-Art pour changer complètement le domaine fonctionnel ? Cela a été rendu possible grâce à la technologie Google AutoML et à l’offre Cloud de Google. Voici l’architecture utilisée :

Architecture globale :

L’application est pensée pour être serverless. La plateforme Google Cloud Platform (GCP), grâce à son offre variée, nous a permis de trouver une solution pour toutes les problématiques techniques du besoin.

L’application est hébergée sur Firebase (firebase Hosting). L’authentification via les réseaux sociaux (Google, Facebook, Github, Twitter) est assurée avec Firebase Auth. La base de donnée est gérée avec Firebase Realtime Database. Le stockage des photos se fait sur Google Cloud Storage et pour finir les services web dédiés sont disponibles à travers des Cloud Functions.

Google Spreadsheet est utilisé pour nous permettre d’avoir une configuration dynamique de l’application.

La “magie” de la détection des images se fait avec une nouveauté de la GCP : AutoML. Cette brique est capable de sélectionner automatiquement le meilleur modèle de Machine Learning (sorte de recette) pour faire la reconnaissance la plus pertinente en fonction du besoin.

PWA :

PWA ou Progressive Web App est un ensemble de bonnes pratiques visant à rendre une application web Offline / Installable / Réveillable grâce à du push disponible sur mobile. Cette définition est quelque peu incomplète mais permet surtout de comprendre les concepts de bases.

Le choix d’une PWA nous a permis d’adresser les problématiques suivantes :

  • Engagement : avoir une application web permet aux utilisateurs d’essayer plus rapidement l’application et cela ne force pas les utilisateurs à installer l’application pour l’utiliser. De cette manière, la première expérience est bonne et cela n’empêche pas l’utilisateur d’installer l’application si l’expérience lui plaît.
  • Fonctionnalités : Grâce à toutes les API Web proposées par les navigateurs modernes, il était évident et simple de recourir à l’appareil photo de la machine pour prendre les photos, directement depuis le code JavaScript, sans installation de plugins.

AutoML :

AutoML est donc une nouvelle technologie disponible sur la GCP en Beta depuis le mois de Juillet. AutoML est capable de trouver le meilleur modèle de Machine Learning adapté à votre jeux de données. Vos données doivent être préalablement classifiées afin d’aider le moteur à déterminer quel algorithme choisir :

Dans notre cas, nous avons procédé comme suit :

  • Nous avons déposé les images classifiées d’artistes ou de vêtements dans des répertoires dans Google Cloud Storage
  • Nous avons créé des fichiers CSV contenant chacun les informations sur un artiste ou un vêtement afin de permettre à AutoML d’apprendre

Nous donnons à AutoML ces CSV pour créer notre Dataset (données de références permettant à AutoML de créer le bon modèle).

  • Une fois les données enregistrées, nous demandons à AutoML de s’entraîner afin de trouver le meilleur modèle. Cette opération est relativement rapide (moins d’une 1h en version gratuite).
  • AutoML nous fournit un identifiant de modèle à utiliser lors de l’appel vers webservice.

Firebase :

Firebase s’impose comme service serverless grâce aux nombreux produits que la plateforme propose. Nous utilisons 4 services de Firebase pour l’application :

  • Le service de hosting pour l’hébergement sécurisé. De cette manière, nous n’avons pas à nous soucier des problématiques de gestion de charge ni de la gestion du https.
  • Le service d’authentification. En quelques clics nous avons pu permettre à nos utilisateurs de se connecter avec les réseaux sociaux Google, Twitter, Github, Facebook.
  • Le service de base de données en temps réel qui nous permet de stocker d’un côté la configuration dynamique de l’application mais aussi les informations des utilisateurs. Couplé au mécanisme d’authentification, nous avons pu définir des règles de sécurités très rapidement protégeant ainsi les données.
  • Le service de cloud functions. Comme nous n’avons pas de serveur à proprement parlé, la solution cloud functions nous permet d’offrir des web services à notre application qui tiennent la charge sans configuration supplémentaire.

Configuration dynamique :

En utilisant toutes les briques citées précédemment, notre application possède un couplage très faible entre le code et le métier. Ainsi, tout ce qui est : code du projet, modèle de machine learning utilisé, liste des artistes ou vêtements, icônes, … Tout cela est inscrit de façon dynamique ou presque. Nous pouvons donc sortir des variantes de l’application en seulement 1 journée.

Toutes ces informations sont donc toutes inscrites (hors icônes) dans un Google Spreadsheet. Nous avons aussi développé des cloud functions qui récupèrent les informations du fichier pour les écrire dans la base de données.

L’avantage de cette solution est que nous pouvons gérer de façon très rapide les problématiques de droits et de mise à jour des informations. Le tout sans refaire de mise en production de l’application.

--

--

jefBinomed
CodeShake

Jean-Francois Garreau, I’m working for Sfeir and I’m a frontend developper, GDE Web, Organizer of GDG Nantes & WTM Nantes