Article original : How you can use AI, AR, and WebGL shaders to assist the visually impaired
Par Dan Ruta
Aujourd'hui, environ 4 % de la population mondiale est malvoyante. Des tâches comme la simple navigation dans une pièce ou la marche dans une rue posent de réels dangers qu'ils doivent affronter chaque jour. Les solutions technologiques actuelles sont trop inaccessibles ou difficiles à utiliser.
Dans le cadre d'un projet universitaire, nous (moi-même, Louis et Tom) avons conçu et mis en œuvre une nouvelle solution. Nous avons utilisé des shaders WebGL configurables pour augmenter un flux vidéo des environs d'un utilisateur en temps réel. Nous avons rendu la sortie dans un format AR/VR, avec des effets tels que la détection de contours et les ajustements de couleur. Plus tard, nous avons également ajouté une simulation de daltonisme, pour les designers. Nous avons également ajouté quelques expériences d'IA.
Nous avons fait une revue de littérature plus approfondie dans notre article de recherche original. ACM a publié une version plus courte, de deux pages, ici. Cet article se concentre davantage sur les technologies utilisées, ainsi que sur certaines des utilisations ultérieures et des expériences telles que l'intégration de l'IA.
Une approche populaire que nous avons trouvée dans nos études de solutions existantes était l'utilisation de la détection de contours pour détecter les obstacles dans l'environnement. La plupart des solutions étaient insuffisantes en termes d'utilisabilité, ou d'accessibilité et de portabilité du matériel.
L'approche la plus intuitive à laquelle nous avons pensé pour donner un retour à l'utilisateur était l'utilisation d'un casque VR. Bien que cela signifie que le système ne serait pas d'une grande aide pour les personnes très sévèrement malvoyantes, ce serait un système beaucoup plus intuitif pour ceux qui ont une vue partielle, surtout pour ceux qui ont une vision floue.
Détection de contours
La détection de caractéristiques, telles que les contours, est mieux réalisée en utilisant des convolutions 2D, et est même utilisée dans l'apprentissage profond (réseaux de neurones convolutifs). Simplement dit, ce sont des produits scalaires d'une grille de données d'image (pixels) contre des poids dans un noyau/filtre. Dans la détection de contours, la sortie est plus élevée (plus blanche) lorsque les valeurs des pixels s'alignent avec les valeurs du filtre, représentant un contour.
Il existe quelques options disponibles pour les filtres de détection de contours. Ceux que nous avons inclus comme configurations sont Frei-chen, et les variantes 3x3 et 5x5 de Sobel. Ils atteignent tous le même objectif, mais avec de légères différences. Par exemple, le filtre Sobel 3x3 était plus net que le filtre 5x5, mais incluait plus de bruit, provenant de textures telles que le tissu :
La plateforme web
La raison principale pour laquelle nous avons choisi le web comme plateforme était sa large disponibilité et sa compatibilité avec presque tous les appareils mobiles. Il bénéficie également d'un accès plus facile, par rapport aux applications natives. Cependant, ce compromis est venu avec quelques problèmes, principalement en termes d'étapes de configuration nécessaires qu'un utilisateur devrait suivre :
- Assurer la connectivité réseau
- Naviguer vers la page web
- Tourner l'appareil en mode paysage
- Configurer l'effet
- Activer le mode VR
- Activer le mode plein écran (en tapant sur l'écran)
- Insérer le téléphone dans un casque VR
Pour éviter de confondre un utilisateur non technique, nous avons créé le site web comme une PWA (progressive web app), permettant à l'utilisateur de l'enregistrer sur l'écran d'accueil de son Android. Cela garantit qu'il démarre toujours sur la bonne page, le mode paysage est forcé, l'application est toujours en plein écran et ne dépend pas d'une connexion réseau.
Performance
Les premiers prototypes JavaScript fonctionnaient bien en dessous de notre objectif de 60fps, en raison des opérations de convolution très coûteuses. Nous avons soupçonné que le goulot d'étranglement était JavaScript lui-même. Nous avons tenté une version WebAssembly. Le prototype résultant fonctionnait encore plus lentement. Cela était probablement dû à la surcharge de passage des données de la trame vidéo au code WebAssembly, et vice versa.
Nous nous sommes donc tournés vers les shaders WebGL. Les shaders sont géniaux grâce à leur parallélisation extrême d'un peu de code (le shader) sur les pixels de la texture (flux vidéo). Pour maintenir des performances élevées, tout en gardant un niveau élevé de personnalisation, le code du shader devait être assemblé et recompilé à l'exécution, à mesure que les configurations changeaient, mais avec cela, nous avons réussi à rester dans le budget de 16,7 ms par trame nécessaire pour 60fps.
Retour d'information
Nous avons effectué quelques tests utilisateurs. Nous avons testé quelques tâches de base comme la navigation, et recueilli quelques retours qualitatifs. Cela incluait des ajustements à l'UI, une suggestion d'ajouter une option pour configurer les couleurs des contours et des surfaces, et une remarque que le champ de vision (FoV) était trop bas.
Les deux suggestions d'amélioration logicielle ont été appliquées. Le FoV n'était pas quelque chose qui aurait pu être corrigé par le logiciel, en raison des limitations matérielles de la caméra. Cependant, nous avons réussi à trouver une solution pour cela sous la forme de lentilles fish-eye pour téléphone-caméra, disponibles à bas prix. Les lentilles ont élargi le FoV optiquement, au lieu de numériquement.
Autrement, le système a dépassé les attentes initiales, mais a été insuffisant pour la lecture de texte. Cela était dû au fait qu'il y avait deux ensembles de contours pour chaque caractère. La performance en basse lumière était également utilisable, malgré l'introduction de plus de bruit.
D'autres configurations que nous avons incluses étaient le rayon de l'effet, son intensité et l'inversion des couleurs.
Autres cas d'utilisation
Une idée que nous avons eue était d'ajouter des effets de shader pour simuler divers types de daltonisme, offrant un moyen facile pour les designers de détecter les problèmes d'accessibilité liés au daltonisme dans leurs produits, qu'ils soient logiciels ou autres.
En utilisant les valeurs de ratio RVB trouvées ici, et en désactivant la détection de contours, nous avons pu ajouter des simulations de base de tous les principaux types de daltonisme grâce à des composants supplémentaires, activables dans les shaders.
IA et travaux futurs
Bien que ce soit une expérience, encore à ses tout débuts, la détection d'objets de niveau supérieur peut être réalisée en utilisant tensorflowjs et tfjs-yolo-tiny, un port tensorflowjs de tiny-yolo, une version plus petite et plus rapide du modèle de détection d'objets YOLO.
La prochaine étape est de faire fonctionner la segmentation d'instances dans un navigateur, avec quelque chose de similaire à mask rcnn (bien qu'il doive peut-être être plus petit, comme tiny-yolo), et de l'ajouter à WebSight, pour mettre en évidence les éléments avec un masque de couleur, au lieu de boîtes avec des étiquettes.
Le dépôt GitHub est ici, et une démo en direct peut être trouvée à https://websight.danruta.co.uk. Notez bien que jusqu'à ce qu'Apple fournisse un support pour l'API de la caméra dans les navigateurs, cela pourrait ne pas fonctionner sur les téléphones Apple.
Bien sûr, je me suis aussi bien amusé avec cela. Pouvoir éditer ce que vous pouvez voir autour de vous en temps réel ouvre un monde d'opportunités.
Par exemple, en utilisant un shader Matrix, vous pouvez vous sentir comme The One.
Ou peut-être que vous aimez simplement regarder le monde brûler.
Vous pouvez tweeter plus d'idées de shaders ici : @DanRuta