Améliorer l'accessibilité pédiatrique: Comment Eye Aim Arena exploite l'écosystème Google WebAI- LiteRT.js pour Windows 7,8,10,11

Améliorer l'accessibilité pédiatrique: Comment Eye Aim Arena exploite l'écosystème Google WebAI- LiteRT.js + Iris MediaPipe

1. Introduction: L’impératif d’accessibilité en thérapie oculomotrice pédiatrique

L’entraînement visuel oculomoteur représente un pilier fondamental de la physiothérapie et de l’ergothérapie pédiatriques, en particulier pour les enfants présentant des déficiences neuro-développementales ou physiques complexes telles que la paralysie cérébrale, spasticité, et déficience visuelle corticale (IVC). Les solutions cliniques traditionnelles pour le suivi du regard et la pratique interactive des cibles reposaient historiquement sur des, suites matérielles propriétaires. Ces systèmes fermés présentent de graves obstacles financiers et logistiques pour les établissements d'enseignement et les familles..

Pour relever ce défi, Arène de visée oculaire offre un côté client, cadre contrôlé par le regard en temps réel qui s'exécute de manière native dans les navigateurs Web modernes. Développé par des ingénieurs logiciels et des chercheurs en éducation du Institut des technologies de l'information de Hong Kong (TRANSPIRER), la plate-forme exploite le matériel de caméra Web standard pour obtenir une estimation précise du regard. En utilisant des frameworks d'apprentissage automatique open source directement dans le navigateur, l'application fournit un entraînement oculomoteur haute fidélité sans nécessiter de matériel externe.

L'architecture du système fonctionne comme un système à faible friction, outil cliniquement viable pour la rééducation pédiatrique. Grâce à des tâches continues basées sur le jeu, le jeu aide au développement du suivi visuel, fixation, et coordination visuo-motrice, transformer des exercices de renforcement musculaire très répétitifs en une expérience numérique engageante.

Jouez au jeu maintenant — https://wongcyrus.github.io/Eye-Aim-Arena/

2. Architecture du système et pipeline de traitement

Le paradigme opérationnel de base d'Eye Aim Arena est son modèle d'exécution strictement côté client.. En effectuant toutes les inférences visuelles, cartographie du regard de l'utilisateur, et génération de modèle de langage localement dans le navigateur, l'application atteint une exécution sans latence, atténue les coûts d'hébergement cloud, et garantit la confidentialité absolue des patients.

Le schéma fonctionnel ci-dessous cartographie le parcours des données et les boucles de rétroaction:

Ce pipeline d'exécution à plusieurs niveaux est analysé à travers six étapes opérationnelles distinctes:

Initialisation de l'exécution: Paramètres système, données d'étalonnage, et les niveaux de volume sont analysés à partir de localStorage pour définir les paramètres du moteur de suivi et les configurations d'interface..
Traitement des entrées de webcam: Les images en temps réel sont capturées à partir de l'appareil photo sélectionné (caméraSélectionner) et transmis directement dans la bibliothèque active de suivi de vision par ordinateur dans un contexte sécurisé (HTTPS/hôte local).
Suivi & Cartographie des coordonnées: La bibliothèque de suivi actif (Google MediaPipe Iris ou WebGazer.js) détecte les vecteurs de points de repère anatomiques pour produire des coordonnées brutes du regard sur l'écran.
Filtrage et traitement du signal: Les coordonnées brutes subissent des transformations affines, Moyenne mobile exponentielle (EMA) lissage, vérification d'inversion d'axe (invertXCheckbox/invertYCheckbox), et échelle de sensibilité.
Boucle de jeu interactive: Des coordonnées affinées entraînent la détection des collisions, calcul du score, transitions d'état, et rendu des ressources personnalisé sur chaque image d'animation.
Exécution du copilote Aria Edge AI: Événements de jeu (comme le suivi de la gigue, traces, ou rate) sont envoyés vers une file d'attente d'événements prioritaires. Cette file d'attente alimente le framework LiteRT-LM local via WebGPU pour générer dynamiquement un retour thérapeutique vocal.

Pour exécuter cette structure complexe hors ligne, l'application maintient un système de fichiers propre et une disposition de stockage local:

3. Moteur d’étalonnage de vision par ordinateur et d’alignement spatial

Pour s'adapter à différents profils informatiques et environnements physiques, le système permet de basculer entre deux bibliothèques de suivi principales via trackingModeSelect. Les différences opérationnelles entre ces modes de suivi mettent en évidence leurs compromis cliniques:

Cartographie spatiale via des transformations affines

Traduire les vecteurs de regard de pixels bruts dérivés des bibliothèques de suivi en coordonnées de pixels dans l'espace écran, le système calcule une matrice de transformation affine à 9 points après un étalonnage réussi. La cartographie mathématique est définie comme:

Cette matrice mappe les géométries arbitraires de la tête et de la caméra aux coordonnées de moniteur bidimensionnelles standard., permettre au logiciel de prendre en compte les webcams décentrées, rotations d'écran, et posture inclinée.

Référence de mise en œuvre (js/calibration.js)

Cette matrice de transformation est évaluée et exécutée dans js/calibration.js dans le pipeline de résolution de coordonnées pour traduire les entrées de suivi dans l'espace de la fenêtre DOM.:

// Situé dans js/calibration.js
fonction transformerGaze(scieX, brut, matrice) {
    const screenX = matrice.a11 * scieX + matrice.a12 * brut + matrice.a13;
    const screenY = matrice.a21 * scieX + matrice.a22 * brut + matrice.a23;
    retour { x: écranX, oui: écranY };
}

La matrice d'étalonnage en 9 points résultante est automatiquement écrite dans localStorage une fois terminée., afficher un badge Calibré ✅ sur le menu principal pour éliminer le besoin de recalibrage lors des séances de thérapie ultérieures.

https://medium.com/media/b3f7e013695eae7c8f61f5324370759c/href

Liste de contrôle des instructions de configuration avant l'étalonnage

Pour minimiser les erreurs de suivi physique lors de l'étalonnage, l'interface affiche une liste de contrôle modale facultative (showCalibrationGuideCheckbox) avec instructions pour l'alignement physique:

4. Traitement numérique du signal pour l'atténuation des tremblements et l'action intentionnelle

Atténuation des tremblements grâce à une moyenne mobile exponentielle

Patients pédiatriques présentant des troubles moteurs, comme la paralysie cérébrale, présentent des mouvements oculaires spastiques rapides et des micro-tremblements. Pour stabiliser le réticule du regard et éviter les, tremblement frustrant de l'interface de ciblage, le pipeline de suivi implémente une moyenne mobile exponentielle configurable (EMA) algorithme de lissage:

Où St représente les coordonnées finales stabilisées, Yt est la coordonnée brute du regard extraite de la bibliothèque de suivi actif, et alpha est un coefficient de lissage variable dérivé du profil de paramètres de l'utilisateur:

Référence de mise en œuvre (js/eyetracker.js ou js/game.js)

Cette logique DSP est implémentée comme une étape de mise à jour standard basée sur les trames pour réduire les mouvements erratiques.:

// Situé dans js/eyetracker.js ou js/game.js (mise à jour du lissage du regard)
fonction smoothCoordonnées(scieX, brut, dernierX, dernier, alpha) {
    const lisséX = alpha * scieX + (1.0 - alpha) * dernierX;
    const lisséY = alpha * brut + (1.0 - alpha) * dernier;
    retour { x: lisséX, oui: lisséY };
}

Le mode de filtrage des tremblements importants atténue considérablement les signaux haute fréquence entrants, donner la priorité à la cohérence de la trajectoire et permettre aux utilisateurs présentant des mouvements spastiques du cou d'obtenir une concentration soutenue sur la cible.

Détection de clignement intentionnel via le rapport hauteur/largeur des yeux

Lorsque le mode de prise de vue est configuré pour utiliser la détection des clignements, le système calcule le rapport d'aspect anatomique de l'œil (OREILLE) basé sur six points de coordonnées cartographiant les paupières supérieures et inférieures:

Où p1 et p4 représentent les coins horizontaux des yeux, et les paires de coordonnées restantes désignent les limites verticales de la paupière.

Référence de mise en œuvre (js/eyetracker.js)

Cet analyseur de gestes oculaires évalue les proportions verticales-horizontales sur chaque image d'animation:

// Situé dans js/eyetracker.js
fonction calculerEAR(p1, p2, p3, p4, p5, p6) {
    const vertical1 = Math.hypot(p2.x - p6.x, p2.y - p6.y);
    const vertical2 = Math.hypot(p3.x - p5.x, p3.y - p5.y);
    const horizontal = Math.hypot(p1.x - p4.x, p1.y - p4.y);
    retour (vertical1 + vertical2) / (2.0 * horizontal);
}

Un clignement physique déclenche une forte, chute transitoire de la valeur EAR en dessous d'un seuil personnalisé, permettant une saisie physique sans nécessiter de commutateur tactile.

Interaction adaptative et mécanique de maintien

Pour les patients qui ne peuvent pas cligner des yeux de manière fiable, le système comporte un Déclencheur d'arrêt mode dans lequel le fait de survoler une cible avec le réticule du regard pendant une durée définie enregistre un tir:

Préréglages de synchronisation de déclenchement: Les cliniciens peuvent choisir parmi des séjours préconfigurés, y compris court (0.5s), Moyen (0.8s), et longue (1.2s).
Curseur de temps de séjour personnalisé: Pour des scénarios cliniques avancés, le système fournit un curseur (regardDwellSlider) réglage des déclencheurs de maintien à partir de 1.0 à 4.0 secondes par incréments de 0,25 seconde. Cela sert les patients qui ont besoin d'une, entraînement à la cible visuelle à mise au point lente.
Contraintes de marge de zone de sécurité: Pour accueillir les utilisateurs ayant une amplitude de mouvement limitée, le système peut empêcher les cibles d'apparaître près des bords de l'écran (safeAreaMarginSelect avec jusqu'à un 38% encart), garder les cibles dans un cadre confortable, champ visuel étroit.

5. Aria: Le thérapeute LLM Adaptive Edge et l'ajustement dynamique de la difficulté

L'intégration d'Aria, le thérapeute adaptatif IA local, représente une implémentation avancée d'Edge AI dans la conception de jeux de rééducation. Exécuté localement via LiteRT.js et utilisant l'API WebGPU, Aria agit comme un système en temps réel, coach numérique contextuel.

Ajustements cliniques dynamiques

Aria évalue les journaux de télémétrie pendant le jeu pour modifier les paramètres du système en temps réel, prévenir la frustration des joueurs et encourager les progrès physiques:

Ajustement dynamique de la difficulté (PDD): Si le flux de télémétrie enregistre deux cibles manquées consécutives, le système met immédiatement à l'échelle les dimensions cibles 1.6x leur taille standard, agrandir la hitbox du regard physique. Une fois l'enfant inscrit six succès consécutifs, le facteur d'échelle revient à 1.0x pour encourager la précision de la motricité fine.
Adaptation automatisée du filtrage des tremblements: Si le système détecte une instabilité soutenue du regard de haute amplitude pendant quatre secondes consécutives, il engage automatiquement le Lissage intense du regard filtre. Cela stabilise le réticule du regard et permet au patient de viser confortablement sans ajustements cliniques manuels..

Injection rapide et personnalisation de la personnalité du système

Les thérapeutes peuvent personnaliser le style de coaching virtuel d'Aria via le panneau des paramètres (aiSystemPrompt). Le système fusionne cette invite avec les métriques de jeu en temps réel avant d'exécuter le modèle Gemma local. [citer: 6]. La structure de l'invite est organisée comme suit:

[Limite des instructions système]
Tu es Aria, un physiothérapeute chaleureux parlant à Timmy. Il adore les dinosaures. 
Conservez les réponses sous 15 mots, garder un ton très encourageant, et n'utilisez pas de démarque.
[Limite du contexte]
Événement actuel: L'utilisateur a raté deux cibles consécutives. 
Action du système: Cibles agrandies à 1,6x pour faciliter la visée.
[Limite de génération]
Aria's Speech Output:

Cela fusionne des stratégies de physiothérapie avec des objectifs cliniques personnalisés. La sortie vocale qui en résulte reste favorable et médicalement pertinente sans nécessiter une connexion Internet active .

Pour optimiser les performances d'inférence locale sur différents appareils clients, le panneau de paramètres fournit des contrôles de paramètres détaillés:

https://medium.com/media/f4cf5bb9e9922f22afa8de5b073c1965/href

6. Profils d’accessibilité audiovisuelle et de personnalisation pédiatrique

Heuristique de l'assistant vocal multilingue

Pour motiver les jeunes enfants lors de séances de thérapie répétitives, le jeu utilise un assistant vocal (Guidage vocalCheckbox) qui utilise un algorithme heuristique JavaScript côté client pour rechercher et sélectionner automatiquement des, natural-sounding female voices on the user's operating system:

Pipeline de sélection vocale: Les requêtes heuristiques disponibles sur les voix du système à l'aide de l'API native Web Speech (window.speechSynthesis.getVoices()).

Notation heuristique et pénalités: Il analyse les propriétés vocales (chaînes de métadonnées et paramètres régionaux) pour correspondre à des mots-clés spécifiques à la plate-forme:

macOS / IOS: Donne la priorité aux voix de haute qualité comme Sin-ji pour le cantonais et Mei-Jia pour le mandarin.

Fenêtres / Microsoft Bord: Sélectionne des voix en ligne modernes, y compris Microsoft Hiuting Online (Naturel) pour le cantonais et Microsoft Tracy Online (Naturel) pour le mandarin.

Google Chrome / Androïde: Sortie des itinéraires vers Google pour le cantonais.
Il applique des poids négatifs aux noms de voix contenant des mots comme default, mâle, ou des replis robotiques pour garantir un confort, expérience pédiatrique douce.

Personnalisation de la cible et optimisation des actifs audio

Utilisation de la couche de stockage locale IndexedDB, les parents et les thérapeutes peuvent télécharger des images personnalisées et des pistes d'arrière-plan directement dans l'interface du jeu pour garder les enfants engagés:

Intégration graphique personnalisée (cibleImageUpload): Les utilisateurs peuvent télécharger jusqu'à 10 PNG, JPG, ou des images WebP (maximum 2 Mo par fichier) directement vers IndexedDB pour remplacer les cibles par défaut. Le jeu revient automatiquement aux bulles visuelles standard si aucune cible personnalisée n'est présente.
Musique de fond personnalisée (bgMusicUpload): Prend en charge le téléchargement d'un fichier audio MP3 jusqu'à 20 Mo. Music automatically pauses and resumes with the game's state, et les niveaux de volume peuvent être réglés via un curseur dédié (bgMusicVolumeSlider).
Sélection de thèmes visuels (cibleThèmeSélectionner): Fournit un basculement rapide entre les modèles de thème préconfigurés, y compris Bulles pastel, Animaux amicaux, ou à contraste élevé Étoiles brillantes conçu pour les utilisateurs ayant une déficience visuelle.
Options de toile à contraste élevé (jeuThèmeSélectionner): Offre un contraste élevé Noir et blanc ou Bleu et vert citron des thèmes pour aider les enfants atteints de CVI ou de daltonisme à distinguer les éléments interactifs du canevas d'arrière-plan.

7. Analyse de télémétrie, Cartes thermiques de diagnostic, et exportation clinique

Un défi majeur en physiothérapie consiste à atteindre des objectifs, mesures quantifiables montrant la progression du contrôle moteur d’un patient au fil du temps. Eye Aim Arena résout ce problème en convertissant les coordonnées de suivi du jeu en télémétrie de diagnostic.

https://medium.com/media/d6529430d9ec4e13309e4df319dc405e/href

Focus clinique multimode

L'application propose quatre structures de suivi de cibles adaptées à des objectifs thérapeutiques spécifiques:

Cartes thermiques visuelles et exportations de télémétrie

A la fin de chaque session de jeu, les données de suivi subissent un traitement de diagnostic pour générer un panneau de révision de session:

Cartes thermiques du regard interactif: Le jeu affiche une représentation visuelle du chemin du regard superposé aux champs de coordonnées de l'écran., cartographier les groupes où les yeux du patient s'attardaient, suivi, ou j'ai eu du mal à me concentrer.
Exportation de télémétrie visuelle: Les praticiens peuvent exporter la carte thermique traitée sous forme d'image PNG pour une référence visuelle rapide.
Journaux de télémétrie bruts (CSV): Les exportations du système sont terminées, listes de coordonnées horodatées (enregistrement d'intervalles de millisecondes aux côtés des positions d'écran calculées X et Y), permettant aux cliniciens d'importer les données des patients dans un logiciel analytique pour une évaluation longitudinale approfondie de la récupération des habiletés motrices.

8. Déploiement, Cadre de sécurité, et analyse de conformité

Parce que les navigateurs modernes limitent l'accès aux webcams à des contextes sécurisés, les déploiements locaux doivent s'exécuter via HTTPS ou localhost. Ceci est géré via le script serveur serve_https.py fourni:

# Situé dans serve_https.py
importer http.server
importer SSL
adresse_serveur = ('localhost', 8000)
httpd = http.server.HTTPServer(adresse_serveur, http.server.SimpleHTTPRequestHandler)
contexte = ssl.create_default_context(ssl.Purpose.CLIENT_AUTH)
contexte.load_cert_chain(certfile="cert.pem", keyfile="key.pem")
httpd.socket = contexte.wrap_socket(httpd.socket, server_side=Vrai)
imprimer("Secure server active at https://hôte local:8000")
httpd.serve_forever()

Pour la production, vous pouvez exécuter cette application en bifurquant le référentiel et en activant les pages GitHub.

Exécution du suivi du visage en temps réel, calcul physique, inférence du langage neuronal côté client, et les moteurs de synthèse vocale simultanément dans un navigateur posent des demandes de ressources uniques. L'application y répond via des API accélérées par le matériel:

Traitement parallèle WebGPU

En utilisant la norme WebGPU, LiteRT.js décharge les calculs matriciels lourds pour le Gemma LLM directement sur la carte graphique du système, libérer le thread principal du CPU [citer: 6]. Cela permet à la boucle de jeu de continuer à restituer les cibles en douceur à 60 images par seconde, prévenir les pics de latence qui pourraient provoquer des erreurs de suivi ou un inconfort visuel pour le patient.

Mise en cache intelligente des modèles

Pour éviter de longs temps de téléchargement avant chaque séance de thérapie, l'API Cache Storage du navigateur enregistre les poids et les fichiers de configuration du modèle lors du téléchargement initial. Cela garantit que l'application peut démarrer instantanément et fonctionner entièrement hors ligne dans les salles de classe et les cliniques distantes..

Sécurité absolue et conformité réglementaire

Parce que le jeu ne s'appuie pas sur les services cloud pour traiter les données de regard ou générer du texte IA, il contourne intrinsèquement de nombreux obstacles réglementaires complexes . Les coordonnées biométriques du patient et les images vidéo du visage ne quittent jamais l'appareil local, assurer un alignement complet avec les lois sur la confidentialité telles que HIPAA et GDPR. Cela rend l'outil facile pour les écoles, hôpitaux, et cliniques à adopter sans accords compliqués de traitement des données.

9. Conclusion: Transformer la réadaptation assistée grâce à Edge Intelligence

Eye Aim Arena montre comment combiner des frameworks Web modernes, informatique de pointe, et l'apprentissage automatique côté client peut révolutionner les outils de santé accessibles. En intégrant un suivi du regard léger avec une mise à l'échelle réactive des difficultés et un thérapeute IA réconfortant, l'application montre comment les webcams grand public peuvent remplacer avec succès le matériel médical coûteux dans la rééducation motrice pédiatrique.

Présentation d'un mélange élégant de conception de jeux intelligente, IA de pointe, et utilité clinique, la plate-forme constitue un modèle très efficace pour les, technologie d'assistance accessible.

Dépôt GitHub — https://github.com/wongcyrus/Eye-Aim-Arena

À propos de l'auteur

Cyrus Wong est le maître de conférences de Institut des technologies de l'information de Hong Kong (TRANSPIRER) @ IVE(Lee Wai Lee).et il se concentre sur l'enseignement des technologies de cloud public. Il est un ardent défenseur de l'adoption de la technologie cloud dans divers médias et événements.. Grâce à ses vastes connaissances et son expertise, il a obtenu des reconnaissances prestigieuses telles que Héros de l'IA AWS, MVP Microsoft — Fondation Microsoft, et Expert développeur Google — Cloud(IA).

Améliorer l'accessibilité pédiatrique: Comment Eye Aim Arena exploite l'écosystème Google WebAI- LiteRT.js a été initialement publié dans Google Developer Experts sur Medium, où les gens poursuivent la conversation en soulignant et en répondant à cette histoire.