Piloter une carte 3D à la voix

Les interfaces vocales pour les cartes sont souvent un après-coup de CarPlay. Avec l'API 3D Maps photoréaliste de Google et WebkitSpeechRecognition dans le navigateur, on peut vraiment faire suivre la phrase par la caméra : noms de lieux extraits, itinéraires calculés, et la vue traverse la ville comme si on narrait un film.

Pourquoi je l'ai bâti

J'apprenais l'API 3D Maps de Google et le photoréalisme est vraiment frappant, mais chaque démo que je voyais était à la souris : cliquer, glisser, pincer. Ça gaspillait le médium. Si le monde a l'air du vrai monde, l'interface devrait moins ressembler à une appli de carte et plus à une conversation avec un copilote. Je voulais voir jusqu'où je pouvais pousser ça avec la reconnaissance vocale native du navigateur et quelques API Google.

Ce que ça fait

Je dis une destination et l'app fait le reste : elle géocode le lieu, amène la caméra vers un point de départ raisonnable et trace l'itinéraire jusqu'à la destination. Un modèle 3D est placé au point de départ et je peux le conduire avec W et S (avant et arrière) le long du tracé calculé, avec un curseur pour la vitesse. Des marqueurs ancrent le début et la fin. Un petit journal d'actions affiche en continu ce que la couche vocale a réellement décidé de faire sur la carte.

Commandes vocales que le bac à sable comprend

• Dire un nom de ville ou de lieu pour y déplacer la caméra.
• Demander un itinéraire vers un lieu pour tracer la route depuis le point de départ courant.
• Basculer entre Voiture, Marche, Vélo ou Transports et regarder le temps estimé se recalculer pour chaque mode.
• Demander de déposer un marqueur sur un lieu nommé.
• Demander de tracer un polygone reliant au moins 3 lieux.

Comment je l'ai bâti

La couche de rendu est l'API 3D Maps de Google. Les détails des lieux viennent de l'API Places, et les itinéraires avec les temps estimés par mode viennent de l'API Directions. Pour la voix, j'utilise webkitSpeechRecognition directement dans le navigateur, donc aucun audio ne quitte la page tant qu'une phrase reconnue n'est pas devenue une action structurée. Du JavaScript simple tient le tout, avec HTML et CSS pour l'UI en surcouche : le sélecteur de mode, le curseur de vitesse et le journal d'actions.

Ce qui a été difficile

Au départ, je voulais ça sur mobile. L'API 3D Maps a été dure à faire fonctionner là dans le temps imparti, alors j'ai pivoté vers un bac à sable web et livré l'idée plutôt que de me battre avec la plateforme. L'autre vrai problème, c'est le suivi de caméra sur le modèle qui roule : animer le modèle et la caméra ensemble produisait des saccades visibles, donc dans la version actuelle, la caméra se déplace une fois que la voiture atteint la prochaine coordonnée de la route. C'est par sauts plutôt que continu, ce qui va pour une démo, mais la prochaine itération doit être fluide.

Ce que j'ai appris

Première fois que je touche à Google 3D Maps, webkitSpeechRecognition, Directions, Geocoding et Places dans le même projet. La plus grande leçon concerne le couplage : chaque API est petite en elle-même, mais le produit intéressant, c'est la colle entre les intentions vocales, les résultats géocodés et le chemin de la caméra. Une fois cette colle en place, chaque nouvelle commande devient peu coûteuse à ajouter.

La suite

• Suivi de caméra fluide sur le modèle de voiture au lieu du saut à chaque coordonnée.
• Changer automatiquement le modèle 3D selon le mode de transport (un autobus pour Transports, etc.).
• Itinéraire vocal à plusieurs arrêts : « itinéraire vers A, puis B, puis C » avec un temps estimé cumulatif.
• Multi-arrêts en modes mixtes : « A en voiture, B en autobus, C à pied » avec le modèle et le temps estimé qui changent en cours de route.
• Meilleure orientation du modèle pour que le véhicule pointe dans la direction du tracé qu'il suit.

Pourquoi c'est amusant à démontrer

On dit une destination, on bascule un mode de transport, on regarde le temps estimé se mettre à jour. C'est un petit projet, mais il fait passer un message : du vrai photoréalisme plus de la vraie voix donnent une vraie interface, pas un gadget.