Ampliando la accesibilidad pediátrica: Cómo Eye Aim Arena aprovecha el ecosistema WebAI de Google- LiteRT.js + MediaPipe Iris

1. Introducción: El imperativo de la accesibilidad en la terapia oculomotora pediátrica

El entrenamiento visual oculomotor representa un pilar fundamental de la fisioterapia y terapia ocupacional pediátrica, particularmente para niños que presentan discapacidades físicas o de desarrollo neurológico complejos, como parálisis cerebral, espasticidad, y discapacidad visual cortical (CVI). Las soluciones clínicas tradicionales para el seguimiento de la mirada y la práctica de tiro interactiva se han basado históricamente en especialistas, suites de hardware patentadas. Estos sistemas cerrados presentan graves barreras financieras y logísticas para las instituciones educativas y las familias..

Para abordar este desafío, Arena de puntería ocular ofrece un lado del cliente, Marco controlado por la mirada en tiempo real que se ejecuta de forma nativa en navegadores web modernos.. Desarrollado por ingenieros de software e investigadores educativos en el Instituto de Tecnología de la Información de Hong Kong (SUDOR), la plataforma aprovecha el hardware de cámara web estándar para lograr una estimación precisa de la mirada. Utilizando marcos de aprendizaje automático de código abierto directamente dentro del navegador, la aplicación proporciona entrenamiento de ejercicios oculomotores de alta fidelidad sin necesidad de hardware externo.

La arquitectura del sistema funciona como un sistema de baja fricción., herramienta clínicamente viable para la rehabilitación pediátrica. A través de tareas continuas basadas en juegos., el juego ayuda en el desarrollo del seguimiento visual, fijación, y coordinación visomotora, Transformar ejercicios de fortalecimiento muscular altamente repetitivos en una experiencia digital atractiva..

Juega el juego ahora — https://wongcyrus.github.io/Eye-Aim-Arena/

2. Arquitectura del sistema y canal de procesamiento

El paradigma operativo central de Eye Aim Arena es su modelo de ejecución estrictamente del lado del cliente.. Al realizar toda la inferencia visual, mapeo de la mirada del usuario, y generación de modelos de lenguaje localmente en el navegador, la aplicación logra una ejecución de latencia cero, mitiga los costos de alojamiento en la nube, y garantiza la absoluta privacidad del paciente.

El siguiente diagrama de bloques mapea el viaje de los datos y los ciclos de retroalimentación.:

Este proceso de ejecución de varios niveles se analiza a través de seis pasos operativos distintos.:

1. Inicialización del tiempo de ejecución: Configuración del sistema, datos de calibración, y los niveles de volumen se analizan desde localStorage para definir los parámetros del motor de seguimiento y las configuraciones de la interfaz..
2. Procesamiento de entrada de cámara web: Los fotogramas en tiempo real se capturan desde el dispositivo de cámara seleccionado. (cámaraSeleccionar) y se pasa directamente a la biblioteca activa de seguimiento de visión por computadora dentro de un contexto seguro (HTTPS/host local).
3. Seguimiento & Mapeo de coordenadas: La biblioteca de seguimiento activo (Google MediaPipe Iris o WebGazer.js) detecta vectores de puntos de referencia anatómicos para generar coordenadas de mirada en pantalla sin procesar.
4. Filtrado y procesamiento de señales: Las coordenadas sin procesar sufren transformaciones afines, Media móvil exponencial (EMA) suavizado, control de inversión de ejes (invertirXCheckbox/invertYCheckbox), y escala de sensibilidad.
5. Bucle de juego interactivo: Las coordenadas refinadas impulsan la detección de colisiones, cálculo de puntuación, transiciones de estado, y representación de activos personalizada en cada cuadro de animación.
6. Ejecución del copiloto de IA de Aria Edge: Eventos de juego (como el seguimiento de la fluctuación, manchas, o falla) se envían a una cola de eventos prioritarios. Esta cola alimenta el marco local LiteRT-LM a través de WebGPU para generar dinámicamente comentarios terapéuticos hablados..

Para ejecutar esta compleja estructura sin conexión, la aplicación mantiene un sistema de archivos limpio y un diseño de almacenamiento local:

3. Motor de calibración de alineación espacial y visión por computadora

Para adaptarse a diferentes perfiles computacionales y entornos físicos., el sistema permite alternar entre dos bibliotecas de seguimiento principales a través de trackingModeSelect. Las diferencias operativas entre estos modos de seguimiento resaltan sus compensaciones clínicas.:

Mapeo espacial mediante transformaciones afines

Para traducir vectores de mirada de píxeles sin procesar derivados de bibliotecas de seguimiento en coordenadas de píxeles del espacio de la pantalla, el sistema calcula una matriz de transformación afín de 9 puntos tras una calibración exitosa. El mapeo matemático se define como:

Esta matriz asigna geometrías arbitrarias de cabezal y cámara a coordenadas de monitor bidimensionales estándar., Permitir que el software tenga en cuenta las cámaras web descentradas., rotaciones de pantalla, y postura inclinada.

Referencia de implementación (js/calibración.js)

Esta matriz de transformación se evalúa y ejecuta en js/calibration.js dentro del proceso de resolución de coordenadas para traducir las entradas de seguimiento al espacio de la ventana gráfica DOM.:

// Ubicado en js/calibration.js
función transformarmirada(sierraX, crudoY, matriz) {
    pantalla constanteX = matriz.a11 * sierraX + matriz.a12 * crudoY + matriz.a13;
    pantalla constanteY = matriz.a21 * sierraX + matriz.a22 * crudoY + matriz.a23;
    devolver { incógnita: pantallaX, y: pantallaY };
}

La matriz de calibración de 9 puntos resultante se escribe automáticamente en localStorage al finalizar, mostrando una insignia de Calibrado ✅ en el menú principal para eliminar la necesidad de recalibración durante sesiones de terapia posteriores.

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

Lista de verificación de orientación para la configuración previa a la calibración

Para minimizar los errores de seguimiento físico durante la calibración, la interfaz muestra un modal de lista de verificación opcional (Mostrar guía de calibración Casilla de verificación) con instrucciones para la alineación física:

4. Procesamiento de señales digitales para mitigar temblores y acciones intencionales

Mitigación de temblores mediante media móvil exponencial

Pacientes pediátricos con trastornos motores., como parálisis cerebral, exhiben movimientos oculares espásticos rápidos y microtemblores. Para estabilizar la retícula de la mirada y evitar una rápida, agitación frustrante de la interfaz de orientación, el proceso de seguimiento implementa una media móvil exponencial configurable (EMA) algoritmo de suavizado:

Donde St representa las coordenadas estabilizadas finales, Yt es la coordenada de mirada sin procesar extraída de la biblioteca de seguimiento activo., y alfa es un coeficiente de suavizado variable derivado del perfil de configuración del usuario:

Referencia de implementación (js/eyetracker.js o js/game.js)

Esta lógica DSP se implementa como un paso de actualización estándar basado en cuadros para reducir los movimientos erráticos.:

// Ubicado en js/eyetracker.js o js/game.js (actualización de suavizado de mirada)
función coordenadas suaves(sierraX, crudoY, últimoX, ultimo, alfa) {
    constante suavizadaX = alfa * sierraX + (1.0 - alfa) * últimoX;
    constante suavizadaY = alfa * crudoY + (1.0 - alfa) * ultimo;
    devolver { incógnita: suavizadoX, y: suavizadoY };
}

El modo de filtrado de temblores intensos amortigua en gran medida las señales entrantes de alta frecuencia, priorizar la consistencia de la trayectoria y permitir a los usuarios con movimientos espásticos del cuello lograr un enfoque sostenido en el objetivo.

Detección intencional de parpadeo mediante la relación de aspecto del ojo

Cuando el modo de disparo está configurado para utilizar la detección de parpadeo, el sistema calcula la relación de aspecto anatómico del ojo (OREJA) basado en seis puntos de coordenadas que mapean los párpados superior e inferior:

Donde p1 y p4 representan las esquinas horizontales de los ojos., y los pares de coordenadas restantes denotan los límites verticales del párpado.

Referencia de implementación (js/eyetracker.js)

Este analizador de gestos oculares evalúa las proporciones verticales a horizontales en cada cuadro de animación.:

// Ubicado en js/eyetracker.js
función calcularEAR(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);
    constante horizontal = Math.hypot(p1.x - p4.x, p1.y - p4.y);
    devolver (vertical1 + vertical2) / (2.0 * horizontal);
}

Un parpadeo físico desencadena un agudo, caída transitoria del valor EAR por debajo de un umbral personalizado, permitiendo la entrada física sin necesidad de un interruptor táctil.

Interacción adaptativa y mecánica de permanencia

Para pacientes que no pueden parpadear de forma fiable, el sistema cuenta con un Activador de permanencia Modo en el que al pasar la retícula de la mirada sobre un objetivo durante un tiempo determinado se registra un disparo.:

• Preajustes de sincronización del disparador: Los médicos pueden seleccionar entre residencias preconfiguradas, incluyendo corto (0.5s), Medio (0.8s), y largo (1.2s).
• Control deslizante de tiempo de permanencia personalizado: Para escenarios clínicos avanzados, el sistema proporciona un control deslizante (miradaDwellSlider) ajustar los activadores de permanencia desde 1.0 a 4.0 segundos en incrementos de 0,25 segundos. Esto sirve a los pacientes que necesitan atención deliberada., entrenamiento de objetivos visuales de enfoque lento.
• Restricciones de margen de área segura: Para adaptarse a usuarios con rango de movimiento limitado, el sistema puede restringir la aparición de objetivos cerca de los bordes de la pantalla (safeAreaMarginSelect con hasta un 38% recuadro), manteniendo los objetivos dentro de un cómodo, campo visual estrecho.

5. Aria: El terapeuta de Adaptive Edge LLM y el ajuste dinámico de la dificultad

La integración de Aria, el terapeuta adaptativo de IA local, representa una implementación avanzada de Edge AI en el diseño de juegos de rehabilitación. Ejecutándose localmente a través de LiteRT.js y utilizando la API WebGPU, Aria actúa como un tiempo real., entrenador digital consciente del contexto.

Ajustes clínicos dinámicos

Aria evalúa los registros de telemetría durante el juego para modificar la configuración del sistema en tiempo real, Prevenir la frustración del jugador y fomentar el progreso físico.:

• Ajuste de dificultad dinámico (DDA): Si el flujo de telemetría se registra dos errores de objetivo consecutivos, el sistema escala inmediatamente las dimensiones objetivo para 1.6incógnita su tamaño estándar, ampliando el hitbox de la mirada física. Una vez que el niño se registra seis éxitos consecutivos, el factor de escala vuelve a 1.0incógnita para fomentar la precisión motora fina.
• Adaptación automatizada del filtrado de temblores: Si el sistema detecta una fluctuación sostenida de la mirada de gran amplitud durante cuatro segundos consecutivos, activa automáticamente el Suavizado de mirada intensa filtrar. Esto estabiliza la retícula de la mirada y permite al paciente apuntar cómodamente sin ajustes clínicos manuales..

Inyección rápida y personalización de la persona del sistema

Los terapeutas pueden personalizar el estilo de entrenamiento virtual de Aria a través del panel de configuración. (aiSystemPrompt). El sistema combina este mensaje con métricas de juego en tiempo real antes de ejecutar el modelo Gemma local. [citar: 6]. La estructura del mensaje está organizada de la siguiente manera:

[Límite de instrucción del sistema]
tu eres aria, un cálido fisioterapeuta hablando con Timmy. le encantan los dinosaurios. 
Mantenga las respuestas debajo 15 palabras, mantener un tono muy alentador, y no usar rebajas.
[Límite del contexto]
Evento actual: El usuario falló dos objetivos consecutivos. 
Acción del sistema: Los objetivos se ampliaron a un tamaño de 1,6x para ayudar a apuntar.
[Límite de generación]
Aria's Speech Output:

Esto fusiona estrategias de fisioterapia con objetivos clínicos personalizados.. La salida hablada resultante sigue siendo de apoyo y médicamente relevante sin requerir una conexión activa a Internet. .

Para optimizar el rendimiento de la inferencia local en diferentes dispositivos cliente, El panel de configuración proporciona controles de parámetros detallados.:

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

6. Accesibilidad audiovisual y perfiles de personalización pediátrica

Heurística del asistente de voz en varios idiomas

Motivar a los niños pequeños durante las sesiones de terapia repetitiva., el juego emplea un asistente de voz (Guía de vozCasilla de verificación) que utiliza un algoritmo heurístico de JavaScript del lado del cliente para buscar y seleccionar automáticamente, natural-sounding female voices on the user's operating system:

• Canal de selección de voz: Las consultas heurísticas disponibles en las voces del sistema utilizando la API Web Speech nativa (ventana.speechSynthesis.getVoices()).

Puntuación heurística y sanciones: Escanea las propiedades de la voz. (cadenas de metadatos y configuraciones regionales) para hacer coincidir palabras clave específicas de la plataforma:

macos / iOS: Prioriza voces de alta calidad como Sin-ji para cantonés y Mei-Jia para mandarín.

ventanas / Borde de Microsoft: Selecciona voces modernas en línea., incluyendo Microsoft Hiuting Online (Natural) para cantonés y Microsoft Tracy Online (Natural) para mandarín.

• Google Chrome / Androide: Salida de rutas a Google para cantonés.
• Aplica pesos negativos a los nombres de voces que contienen palabras como default, masculino, o respaldos robóticos para garantizar una comodidad, experiencia pediátrica suave.

Personalización de objetivos y optimización de recursos de audio

Usando la capa de almacenamiento local IndexedDB, Los padres y terapeutas pueden cargar imágenes personalizadas y pistas de fondo directamente en la interfaz del juego para mantener a los niños interesados.:

• Integración gráfica personalizada (objetivoImagenCargar): Los usuarios pueden cargar hasta 10 PNG, JPEG, o imágenes WebP (máximo 2 MB por archivo) directamente a IndexedDB para reemplazar los objetivos predeterminados. El juego vuelve automáticamente a las burbujas visuales estándar si no hay objetivos personalizados presentes..
• Música de fondo personalizada (bgMúsicaSubir): Admite la carga de un archivo de audio MP3 de hasta 20 MEGABYTE. Music automatically pauses and resumes with the game's state, y los niveles de volumen se pueden configurar mediante un control deslizante dedicado (bgMúsicaVolumenControl deslizante).
• Selección de temas visuales (objetivoTemaSeleccionar): Proporciona un cambio rápido entre plantillas de temas preconfiguradas, incluido Burbujas de colores pastel, Animales amigables, o de alto contraste Estrellas brillantes diseñado para usuarios con discapacidad visual.
• Opciones de lienzo de alto contraste (juegoTemaSeleccionar): Ofrece alto contraste blanco y negro o Azul y verde lima temas para ayudar a los niños con CVI o daltonismo a distinguir elementos interactivos del lienzo de fondo.

7. Análisis de telemetría, Mapas de calor de diagnóstico, y exportación clínica

Un desafío importante en fisioterapia es obtener objetivos, Métricas cuantificables que muestran la progresión del control motor de un paciente a lo largo del tiempo.. Eye Aim Arena soluciona este problema convirtiendo las coordenadas de seguimiento del juego en telemetría de diagnóstico..

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

Enfoque clínico multimodo

La aplicación presenta cuatro estructuras de seguimiento de objetivos adaptadas a objetivos terapéuticos específicos.:

Exportaciones de mapas de calor visuales y telemetría

Al finalizar cada sesión de juego., los datos de seguimiento se someten a un procesamiento de diagnóstico para generar un panel de revisión de sesión:

• Mapas de calor de mirada interactivos: El juego ofrece una representación visual de la trayectoria de la mirada superpuesta en los campos de coordenadas de la pantalla., mapeo de grupos donde se detuvieron los ojos del paciente, rastreado, o tuvo problemas para concentrarse.
• Exportación de telemetría visual: Los profesionales pueden exportar el mapa de calor procesado como una imagen PNG para una referencia visual rápida..
• Registros de telemetría sin procesar (CSV): El sistema exporta completo., listas de coordenadas con marca de tiempo (grabar intervalos de milisegundos junto con las posiciones calculadas de la pantalla X e Y), Permitir a los médicos importar datos de pacientes a un software analítico para una evaluación longitudinal profunda de la recuperación de habilidades motoras..

8. Despliegue, Marco de seguridad, y análisis de cumplimiento

Porque los navegadores modernos restringen el acceso a la cámara web a contextos seguros, las implementaciones locales deben ejecutarse a través de HTTPS o localhost. Esto se gestiona a través del script del servidor server_https.py incluido.:

# Ubicado en server_https.py
importar servidor http.
importar ssl
dirección_servidor = ('localhost', 8000)
httpd = http.servidor.HTTPServidor(dirección_servidor, http.servidor.SimpleHTTPRequestHandler)
contexto = ssl.create_default_context(ssl.Propósito.CLIENT_AUTH)
contexto.load_cert_chain(certfile="cert.pem", keyfile="key.pem")
httpd.socket = contexto.wrap_socket(httpd.socket, lado_servidor=Verdadero)
imprimir("Secure server active at https://servidor local:8000")
httpd.serve_forever()

Para la producción, puedes ejecutar esta aplicación bifurcando el repositorio y habilitando GitHub Pages.

Ejecutando seguimiento facial en tiempo real, calculo de fisica, inferencia del lenguaje neuronal del lado del cliente, y motores de texto a voz simultáneamente en un navegador plantea demandas de recursos únicas. La aplicación los aborda a través de API aceleradas por hardware.:

Procesamiento paralelo de WebGPU

Utilizando el estándar WebGPU, LiteRT.js descarga cálculos matriciales pesados ​​para Gemma LLM directamente a la tarjeta gráfica del sistema, liberar el hilo principal de la CPU [citar: 6]. Esto permite que el bucle del juego continúe representando objetivos sin problemas en 60 fotogramas por segundo, prevenir picos de latencia que podrían causar errores de seguimiento o molestias visuales para el paciente.

Almacenamiento en caché de modelo inteligente

Para evitar largos tiempos de descarga antes de cada sesión de terapia, La API de almacenamiento de caché del navegador guarda los pesos y los archivos de configuración del modelo en la descarga inicial.. Esto garantiza que la aplicación pueda iniciarse instantáneamente y ejecutarse completamente sin conexión en aulas y clínicas remotas..

Seguridad absoluta y cumplimiento normativo

Porque el juego no depende de servicios en la nube para procesar datos de mirada o generar texto de IA., inherentemente evita muchos obstáculos regulatorios complejos . Las coordenadas biométricas del paciente y los fotogramas de vídeo faciales nunca salen del dispositivo local., asegurando una alineación completa con las leyes de privacidad como HIPAA y GDPR. Esto hace que la herramienta sea fácil para las escuelas., hospitales, y clínicas para adoptar sin complicados acuerdos de procesamiento de datos.

9. Conclusión: Transformando la rehabilitación asistida a través de Edge Intelligence

Eye Aim Arena demuestra cómo combinar marcos web modernos, computación de borde, y el aprendizaje automático del lado del cliente puede revolucionar las herramientas de salud accesibles. Integrando un seguimiento de la mirada ligero con una escala de dificultad receptiva y un reconfortante terapeuta de IA., La aplicación muestra cómo las cámaras web de consumo pueden reemplazar con éxito el costoso hardware médico en la rehabilitación motora pediátrica..

Presentando una elegante combinación de diseño de juegos inteligentes, IA de vanguardia, y utilidad clínica, la plataforma se erige como un modelo muy eficaz para la modernidad, tecnología de asistencia accesible.

Repositorio de GitHub — https://github.com/wongcyrus/Eye-Aim-Arena

Sobre el autor

Ciro Wong es el profesor titular de Instituto de Tecnología de la Información de Hong Kong (SUDOR) @ ive(Lee Wai Lee).y se enfoca en enseñar tecnologías de nube pública.. Es un apasionado defensor de la adopción de la tecnología en la nube en diversos medios y eventos.. Con su amplio conocimiento y experiencia, Ha obtenido prestigiosos reconocimientos como Héroe de IA de AWS, Jugador Más Valioso de Microsoft — Fundación de Microsoft, y Experto en desarrolladores de Google — Nube(AI).

---

Ampliando la accesibilidad pediátrica: Cómo Eye Aim Arena aprovecha el ecosistema WebAI de Google- LiteRT.js se publicó originalmente en Google Developer Experts en Medium, donde las personas continúan la conversación resaltando y respondiendo a esta historia.