Je travaille sur des miroirs connectés depuis plus de 6 ans. C’est un objet qui se prête parfaitement à de nouvelles formes d’interactions naturelles (Native UI) avec les machines. Un donc une suite logique pour SARAH.

• A la maison, il se trouve dans le couloir de l’entrée, dans la salle de bain, …
• En magasin il devient l’expert en affichant notre reflet chez le coiffeur, l’opticien, nos habits lors du shopping,
• Il devient coach en suivant notre posture dans la salle de sport
• Et peut même donner un coup de main aux médecins

Voici un petit résumé de la conférence que j’ai donné lors du Global AI Bootcamp le mois dernier, et qui fait écho à une série d’articles diffusés sur LinkedIn.

Itérer, apprendre, innover

Comme tout projet d’innovation il est important de bien identifier les différentes composantes du problème pour ensuite prendre le temps d’itérer sur chacune d’elle.

Je ne suis pas très fier du design de ce premier essai riche d’enseignements:

• Le cadre doit être robuste, le carton ne tiens pas
• L’infrarouge d’une caméra 3D rebondis sur le miroir
• La teinte du miroir est très importante
• L’écran doit être très lumineux

Une v2, v3, v4 en essayant de « hacker » des meubles ou des miroirs existant afin de rapidement tester ce qui marche ou pas.

De Speaker à Maker

Dans le monde merveilleux de l’innovation, il est très facile de marketer un sujet en synthétisant une série d’articles (souvent plein d’erreurs et de conjectures). D’où l’importance de construire des convictions « en faisant ».

Conception du cadre

La nouvelle itération a été réalisée dans le cadre d’un sujet de stage. Cette fois l’idée était de construire un cadre autour d’un écran.

Premier constat: les entreprises « technologiques » ne sont pas encore équipées pour cette révolution mélangeant hardware et software 🙂

Mais avec les bons outils, une scie à onglet et un établi il est possible de faire des choses sympa !

Le cadre doit épouser les bords de l’écran, être maintenu avec de la colle et des équerres (ou des biscuits). Les vis VESA de l’écran doivent être utilisées pour renforcer la structure.

Le choix de l’écran

Pour obtenir l’effet souhaité, l’écran doit être très lumineux avec des noirs profonds. L’idéal est d’utiliser

• OLED ou IPS (mais pas TN)
• avec au minimum 350 cd/m²
• un écran plat (mais pas courbé)
• sans bordure (pour éviter de le désosser)

Le constructeur AOC propose des modèles ayant un bon rapport qualité/prix.

Le choix du miroir

De nombreux tutos proposent différentes approches. Je ne suis pas du tout convaincu par l’approche plexiglass dont le résultat est très peu qualitatif.

Après avoir commandé des échantillons dans les 4 coins du monde, j’en suis arrivé à la conclusion que les miroirs DIEM de la miroiterie DEWERPE sont un bon compromis. Une autre alternative est d’utiliser un miroirs diélectric.

Pour que l’illusion soit parfaite, le cadre doit être peint en noir et calfeutré afin d’empêcher la lumière de traverser.

Place à la décoration

Dernière étape : la décoration peut être réalisée :

• par un encadreur professionnel (photo de gauche), vraiment cool !
• en faisant de la peinture et de l’impression 3D sur un cadre en plastique.
• en collant (attention aux traces) le miroir sur le cadre afin d’avoir un effet « borderless« .

Design de l’UX

En regardant différents miroirs, à Shenzhen, au CES, etc … nous avons pu constater différentes approches:

• Le « SmartMirror » qui ne fait qu’ajuster la luminosité d’une lampe
• Le miroir tactile cachant une tablette Android permettant d’afficher des vidéos YouTube (sous les traces de doigt)
• La fitting room utilisant une caméra et un modèle 3D.
• L’iPad « maquillé » en miroir qui affiche en réalité augmentée le flux vidéo de la caméra (c’est le choix de L’Oreal et LVMH)
• L’interface naturelle telle qu’on la voit dans les films de science fiction

L’approche réalité augmentée sur iPad est très performante mais implique de rentrer dans l’univers des tablettes iOS/Android. Nous avons fais le choix de travailler sur le reflet d’un vrai miroir en y intégrant une interface conversationnel.

Le choix de la machine

L’écran doit être connecté à un ordinateur dont le rôle sera de traiter toutes les interactions avec l’utilisateur.

• Le ChromeBit est une clef HDMI sous ChromeOS disposant d’un GPU et capable de traiter tous les périphériques web (Webcam, USB, Bluetooth, 3D) et spécialisé dans le Digital Signage
• L’Intel UP est un PC Windows de la taille d’un Raspberry Pi

Plein d’options sont possibles suivant les périphériques avec lesquels s’interfacer (Leap Motion, Bandeau de LED, Azure Kinect DK, …)

Une interface web

La première étape consiste à mettre en place une petite interface web disposant d’une communication bi-directionnelle (websocket) avec un serveur faisant l’orchestration des services.

Node-RED est un outil parfait pour construire ce type de service modulaire. Le VISEO Bot Maker fournit toutes les briques pour concevoir des interfaces conversationnels.

La page web devient alors un portail pour afficher différents type d’informations:

• Les messages de chat
• Les conseils (que dire au miroir ?)
• Une zone d’affichage en dessous du reflet
• Une zone contextuelle à côté du reflet
• Un overlay au niveau du reflet

L’information affichée peut varier suivant les cas d’usage. L’important est de faire oublier la présence d’un écran en affichant des visuels sur fond noir et en utilisant des effets d’animation (motion design).

Le chat est en haut à gauche dans la logique de la lecture en ‘F’ que l’on retrouve sur le web. Mais il n’y a pas eu de profonde réflexion ergonomique sur le sujet et pour répondre a une question qui m’avais été posé: oui il est certain que pour une cible asiatique il faudrait revoir le design.

Interactions Vocales

En théorie, un miroir n’est pas tactile, il ne doit pas être touché pour ne pas laisser de trace de doigt. Une solutions consiste à mettre en place une interaction vocale.

Le choix du microphone

La base pour obtenir une bonne reconnaissance vocale, est d’avoir un bon microphone. En 2012 j’avais été bluffé de la capacité d’un Kinect à entendre une personne à plus de 8 mètres !

De nos jours les réseaux de microphone ont des prix abordables.

• Le Jabra est une solution intéressante qui mélange microphone et speaker en USB sans alimentations supplémentaire.
• Le Kinect est intéressant car il couple la caméra et le microphone. L’astuce étant d’utiliser le speaker de l’écran (si il en a un)

Les acteurs comme Google ou Microsoft proposent maintenant des kits hardware (du même genre que ReSpeaker) pour créer son objet.

Reconnaissance Vocale

A l’époque de SARAH, la reconnaissance vocale se faisait sous windows. De nos jours il existe des solutions comme Mozilla DeepSpeech pour faire le traitement « on Edge ».

Pour avoir une approche générique, nous avons fait le choix d’envoyer l’audio du navigateur vers le serveur Node-RED qui fera le routage vers un service d’un Microsoft, Google ou Amazon qui propose du Speech2Text

L’avantage de cette approche est aussi de profiter des fonctions avancées tel que la reconnaissance du locuteur, l’analyse des sentiments, les modèles acoustiques spécifiques (très utilisé dans les call-center), etc …

Traitement du langage naturel

Une fois que l’audio a été transformé en texte, celui-ci peut être analysé avec un outil de traitement du langage (NLP, NLU, …) tel que LUIS de Microsoft ou DialogFlow de Google. C’est la logique classique des Chatbots.

Le NLU est entraîné à partir d’un grand nombre de phrase afin de reconnaître une intention (on parle de la température) et des entités (une valeur numérique est indiquée)

En pratique l’API va retourner un indice de confiance: Je pense à 92.5% que l’utilisateur avait l’intention de dire « bonjour ». Ce qui permet ensuite de déclencher un scénario et répondre en conséquence.

Conception des dialogues

C’est là, la super force de Node-RED qui propose une interface graphique pour concevoir des dialogues et scénarios dans l’esprit des outils de mind mapping utilisés par les gens qui écrivent des scénarios de fictions, des livres, etc, …

Sauf que cette fois, l’outil fonctionne comme un CMS et permet directement de piloter le miroir via une interface low-code.

Synthèse vocale

Une fois que le miroir reçoit une réponse textuelle, il l’affiche mais doit aussi la vocaliser. Pour cela le code JS va interroger le serveur qui expose un petit webservice REST pour appeler les APIs de Google ou Microsoft

Il est important de distinguer le texte affiché du texte vocalisé qui doit être moins verbeux pour laisser le temps au cerveau d’intégrer les informations.

Par contre il est possible d’ajouter des effets à l’aide du SSML (un langage de balisage permettant de préciser l’intonation, d’ajouter des effets solore, etc …) C’est ce que j’avais utilisé intensivement sur GouGou pour plonger l’utilisateur dans un univers sonore immersif.

Keyword Spotting

Le Keyword Spotting (ou HotWord) est une technique qui permet de détecter localement (on edge) si la personne a bien dit Ok Google, Alexa, etc … Mais cela nécessite (de moins en moins) un entrainement à partir de centaines de sample audio du mot magique.

Ce sont des choses que VISEO a déjà fait dans le contexte de projets client. Mais pour le miroir nous avons décidé de simplement appuyer sur un bouton !

En pratique il faut utiliser des capteurs PIR, bouton, ou conductif, … connectés a un petit Aruduino Leonardo pour simuler une touche de clavier dans le navigateur. Une autre options est d’utiliser un Makey Makey 🙂

Interactions Visuels

En plus des oreilles et de la parole, le miroir possède aussi des yeux lui permettant de mieux comprendre son environnement. Cela peut-être une caméra 2D (webcam) ou une caméra 3D (type Kinect)

Reconnaissance Faciale

Microsoft propose une API de reconnaissance faciale qui permet de regrouper plusieurs photos par visage par groupe. J’utilise AirTable pour debugguer cette structure et surtout pouvoir facilement mettre à jour la base des utilisateurs.

L’API est capable de retourner les caractéristiques et les points clefs (landmarks) du visage. Dans un cas d’usage « beauté » cela permet de proposer des produits adaptés.

Reconnaissance d’Objets

Microsoft propose une API permettant de reconnaître des objets « standard », mais le plus intéressant est l’API Custom Vision qui permet d’entraîner un modèle sur un ensemble d’objets spécifiques.

Dans ce cas d’usage, le miroir est capable de reconnaître une palette de maquillage après avoir dit « Qu’est ce que c’est » pour ensuite fournir une description et proposer un tutoriel.

Si la prédiction de certaines images est trop mauvaise il est possible de re-entraîner le modèle. C’est typiquement ce que j’avais fais avec mon frigo.

Les modèles peuvent être téléchargés et utilisés « on edge ». C’est ce que nous avons fait pour reconnaître des cosmétiques en réalité augmenté sur iOS.

Autres Reconnaissances

Les possibilités sont infinies ! Il y a de plus en plus d’APIs pour effectuer du computer vision en JS directement depuis le navigateur:

• FaceAPI que nous utilisons en complément de Microsoft
• Tracking des mains
• Tracking du corps et estimations des poses couplé à un avatar
• Reconnaissance de caractères
• En théories les modèles custom vison peuvent aussi être utilisés en JS

Pour avoir de bonnes performances, le mieux est quand même de partir sur une caméra 3D ou des objets comme LeapMotion ou TobiiEye.

Next Steps

J’ai commencé un miroir géant à partir d’une TV 55″. Un des soucis étant que l’objet ne se transporte plus … et que tout est proportionnellement plus cher (500€ le miroir …)

Mais c’est cool 🙂
Cette fois je pense brancher mon Azure Kinect DK pour faire du skeleton tracking.

Questions ?

Je crois que 1/3 de ma conférences a été une interaction avec les gens qui avaient plein de questions. Je vais essayer de les centraliser ici. N’hésitez pas à en rajouter dans les commentaires !

Combien ça coûte ?

• En matériel « DIY » pas grand chose, on va dire 1000€
• Il faut rajouter 6 ans d’expertises et un atelier 😉
• Plusieurs dizaines de jours / homme pour bien définir le cas d’usage et l’implémenter.
• Ne pas oublier qu’il faudra le maintenir et le faire grandir

Est-ce que je peux vous en acheter un ?

Il faut discuter avec VISEO, plusieurs entreprise nous en demandent, c’est un projet d’innovation que nous pouvons réaliser.

Est-ce que vous savez en faire en série ?

Ce n’est pas le métier de VISEO de fabriquer industriellement des objets. Néanmoins VISEO est capable d’accompagner ses clients sur ce type de projets, trouver les bons partenaire, etc … C’est quelque chose que nous avons déjà fait.

Pourquoi un miroir ?

• C’est un objet très présent dans notre quotidien
• C’est une belle thématique pour jouer avec la voix, la vision, l’image, etc …
• C’est aussi un propos pour expliquer que les interfaces natives de demain seront dans TOUS les objets.
• Je regarde aussi les tableaux numériques, les hologrammes, les écrans holographiques, les tables connectées, …