Reflets: un Framework de Miroir Connecté

Reflets est un framework facilitant la conception de miroirs connectés. Il accélère la mise en oeuvre de scénarios en s'appuyant sur des composants d'interactions natives (vocale, visuel, gestuelle, haptic, IoT, …)

Un sujet que j'évoque régulièrement suite à la conception de nombreux miroir depuis des années.

Le Miroir

Un miroir connecté est un écran placé derrière un miroir sans tain et affichant une interface web. Il peut avoir accès à de nombreux périphériques (microphones, cameras, …) et APIs Cloud pour renforcer l'expérience utilisateur.

Un peu de bricolage et d'assemblage sans toucher à l'électronique afin de préserver les normes CE 😉

Le Framework "Reflets"

Le framework "Reflets" est un logiciel qui normalise la manière de concevoir des expériences de miroir connecté. Il propose une interface LowCode/NoCode pour prototyper, accélérer et simplifier la conception de scénarios.

Les navigateur modernes (comme Chrome) peuvent faire des traitement d'Intelligence Artificielle (on Edge) et permettent l'accès aux périphériques Bluetooth et USB (Caméra, Microphone, Speaker, Clavier, …) afin d'enrichir les interactions utilisateur.

Le framework "Reflets" propose de nombreux modules :

• Assistant Conversationnel et Traitement du Langage
• Reconnaissance et Synthèse vocale
• Détection et Reconnaissance Faciale, Visuel, OCR
• Squelette du visage et du corps
• Extensible à toutes API via mécanique de Portlet Web

La Démo

Voici un scénario très simple dans lequel l'utilisateur demande au miroir l'analyse de son visage.

Le miroir est un objet capable de se fondre dans le quotidien pour enrichir votre reflet… On peut imaginer des échanges bien plus complexe dans différents univers B2C comme B2B2C :

• Le coach sportif, connecté aux machines, proposant des exercices sous la forme d'avatar ou d'une plateforme d'experts.
• L'assistant retail, pour conseiller sur le choix de lunettes, de vêtements, de coiffures ou rituels beauté …
• L'assistant domotique qui pilote votre maison
• L'aide médicale qui analyse votre reflet, qualifie la situation avant d'appeler un expert dentiste, dermato, etc …

Comment ça marche ?

Un peu de technique ! Le Framework "Reflets" est un portail web qui communique en WebSocket et HTTP avec un Backend Node-RED et une base AirTable (pour la démo).

Il normalise

• l'accès aux périphériques (caméra, micro, IoT, …)
• l'appel d'API tierces
• les interactions avec l'utilisateur

Initialisation

Le miroir est composé de zones dans lesquels il est possible d'afficher des portlets. Ces composants (html, js, et css) fournissent de nouvelles fonctionnalités pour personnaliser le miroir.

C'est du HTML ! d'où le choix d'afficher le logo, la météo et l'heure quand le miroir est inactif. Mais l'on pourrait mettre un avatar 3D, …

• La zone STATUS est un feedback (caméra, audio, …)
• La zone ADVICE guide l'utilisateur sur ses choix
• La zone CHAT reprends la conversation

Une mécanique permets aux portlets de discuter entre elles et avec le serveur en tenant compte des animations.

Reconnaissance Vocale

Une des portlets utilise les API Audio du navigateur pour capturer les commandes vocales de l'utilisateur lors de l'appuie sur une touche du clavier.

A la place du clavier, il est possible d'utiliser un autre dispositif USB (Bouton, Tactile, Haptic) ou faire de la détection de mot-clef (avec un microphone / speaker de qualité)

Le buffer audio est transféré au serveur, converti en texte puis analysé pour dérouler le bon scénario. Un message chat est renvoyé comme feedback et écho de ce qu'a compris le miroir.

Dans la démo, ce sont les API Speech et Cognitive Services de Microsoft qui sont utilisées. Mais le miroir peut fonctionner avec Google Cloud.

Assistant, Chat et Synthèse Vocale

Le miroir est capable d'envoyer des messages à l'utilisateurs qui s'afficheront sous la forme d'une conversation et seront vocalisés via le serveur et les mêmes APIs de Microsoft Speech (ou Google)

Ils est possible d'envoyer une version vocale différente de la version texte (SSML) d'afficher des boutons et autres aides. Il est fortement conseillé de construire un background et une personnalité à votre assistant.

Reconnaissance Visuelle

Une des portlets utilise les APIs Media du navigateur pour capturer des photos de l'utilisateur. C'est le cas le plus simple car il est possible de capturer les points du visages (squelette) pour d'autres expériences.

L'image est ensuite transférée aux APIs de Face de Microsoft (ou Google) pour analyser le visage (age, sexe, lunette, humeur, etc …) Si aucun visage n'est détecté alors la photo est affichée

Dans d'autres scénarios il serait aussi possible de reconnaitre des objets. Dans la démo, le miroir se souvient de l'utilisateur en faisant aussi de la reconnaissance faciale à partir de précédentes photos stockées dans AirTable.

Enfin plusieurs actions sont parallélisées :

• La photo est découpé au niveau du visage, puis affichée sur le miroir et sauvegardée dans AirTable.
• Les données sont affichées en CALLOUT (zone contextuelle de droite)
• Un message chat est envoyé pour vocaliser le résultat et enchainer sur la suite.
• L'avatar en bas à gauche est mis à jour si le visage de l'utilisateur est reconnu.

Voici le flow complet :

On peut imaginer une suite plus intéressante :

• Jouer une musique correspondant à l'age de l'utilisateur
• Proposer des accessoires de beauté, luxe, etc …
• Faire un montage du visage avec une célébrité
• …

Take Away

Cette démo ne représente qu'une infime partie des scénarios possibles. Le framework "Reflets" se consolide en intégrant régulièrement de nouvelles mécaniques, APIs et objets connectés.

Une idée, un projet ? Avec plus de 7ans d'expériences dans la conception de miroirs connectés, je peux vous accompagner dans le design d'une expérience innovante.

Créatif, Designer, Artiste, Maker ou Vidéaste … vous souhaitez tester une créa sur le miroir ? Contactez-moi ! Ces objets permettent d'inventer de nouvelles formes d'interactions … bienvenue dans la Science Fiction 🙂