Eye Tracking & a11y on the Edge: ¡Construye un Seguimiento Ocular con AI Ejecutándose en tu Dispositivo!

¡Hola a todos! Estoy emocionado por la oportunidad de compartir algunas ideas sobre este tema específico, y espero que lo que discutamos despierte su interés y les brinde conclusiones valiosas. Así que, vamos a sumergirnos. Pero una rápida advertencia antes de comenzar. La accesibilidad es un tema muy candente, es importante, y debe manejarse con mucho cuidado. Pero quiero decir, no soy un experto en accesibilidad. Y tampoco soy un ingeniero de IA. Pero, ¿qué demonios? No, solo soy un tipo curioso y un viejo desarrollador, y este es un momento increíble para mejorar nuestro conocimiento con un montón de cosas de IA.

Así que, cuando hablamos de accesibilidad en conferencias de desarrolladores, a menudo discutimos la usabilidad, atributos de jugadores, o pautas de accesibilidad de contenido web, reglas, y así sucesivamente, y no sobre la interacción. Esta vez, vamos a hablar sobre cómo podemos crear una interacción de accesibilidad experimental. Me inspiré hace unos meses por un software de Windows llamado Playability, un mapeador entre controladores de juegos y gestos faciales. Así que pensé, necesitamos un rastreador ocular dentro de nuestro navegador. El seguimiento ocular es una tecnología que detecta y registra los movimientos oculares, permitiéndonos entender dónde está mirando el usuario, por cuánto tiempo, y en qué secuencia. Resuelve problemas relacionados con la usabilidad de la interfaz o el análisis de procesos cognitivos.

El seguimiento ocular ha ganado atención en los últimos años por su utilidad en la interacción humano-computadora, en particular para personas con discapacidades como EM o ELA. Por un lado, es esencial para la interacción humano-computadora, especialmente para individuos con discapacidades físicas, permitiendo una comunicación efectiva. Pero, por otro lado, actualmente es intrusivo. Es más invasivo que los métodos convencionales, electrodos, lentes de contacto, cámaras especializadas, y es incómodo. El equipo puede ser engorroso de montar en la estación de trabajo o en la cabeza, y es costoso. Es realmente costoso con opciones comerciales limitadas.

A menudo emocionantes $10,000 o más. Entonces, ¿qué tipo de experimento que probablemente funcione pensé? El objetivo es crear un sistema de interacción humano-computadora barato y fácil de usar basado en el seguimiento del iris y una cámara web estándar.

El seguimiento ocular, como dijimos, es una tecnología que detecta y registra los movimientos de nuestros ojos, nuestra mirada, y mapea las coordenadas de esta con nuestra pantalla. Así que mi necesidad era implementar una calibración en tiempo real del movimiento natural del puntero guiado por los ojos del usuario, ofrecer una experiencia de interacción natural a través del control ocular, y lograr buena precisión y exactitud sin hardware especializado. Pero, ¿qué queremos decir con buena precisión?

Necesitamos dos términos para identificarlo. La exactitud en el seguimiento ocular es la desviación entre la posición real de la mirada y la posición de la mirada registrada por el rastreador ocular, simplificando cuánto de los datos de seguimiento ocular registrados corresponde a los datos reales de seguimiento ocular. Precisión que se refiere a la medida de variación en los datos registrados.

Después de algunos estudios y comprensión del tema, y todavía sé muy poco, encontré muchas soluciones para algunos puntos críticos. Calibración personalizable de 13 puntos con tiempo configurable.

Regresión lineal para el mapeo de coordenadas oculares. Un filtro de Kalman para un movimiento suave del cursor. Y muchas soluciones para la compensación de movimiento de cabeza y cambios de distancia.

Pero, ¿qué usar para identificar características faciales, expresiones y coordenadas del iris? Y aquí está la solución. Bueno, la IA realmente ha llegado a nuestros dispositivos, en el edge, incluyendo el navegador.

Dame un minuto para explicar por qué es una solución revolucionaria. Todos saben lo que es un LLM o un modelo genérico grande. Estoy seguro de que algunos modelos contienen cientos de miles de millones de parámetros. Su arquitectura a menudo involucra una gran cantidad de parámetros para alcanzar su impresionante rendimiento en tareas complejas. Pero es crucial reconocer que el funcionamiento efectivo de los modelos no solo depende de este factor. Otros modelos funcionan bien con muchos menos parámetros, y son modelos pequeños. Diseñados con diferentes consideraciones arquitectónicas o especializados para aplicaciones particulares, pueden lograr resultados notables con muy pocos parámetros. Esto demuestra la exploración continua en la optimización de arquitecturas de modelos en este campo y avanzar más allá del simple paradigma de que más grande es mejor.

Así que, a diferencia de la famosa película de culto, necesitamos un bot más pequeño. La IA en el dispositivo o en el navegador se refiere a la implementación y ejecución de modelos de inteligencia artificial directamente en dispositivos locales, como smartphones, tablets, y así sucesivamente, sin acceder a servidores remotos. Así que hoy, modelos de unos pocos millones a unos pocos miles de millones de parámetros pueden ejecutarse de manera realista en el navegador o en dispositivos de nivel de entrada. Este es un viaje común con un bot más grande. Es una arquitectura común con llamada a API de terceros.

Es muy común, pero en ese caso, las APIs realizan la inferencia de IA. En una arquitectura en el navegador, los modelos se descargan y ejecutan directamente en la computadora del usuario, y la inferencia ocurre en el propio navegador. El usuario solo necesita un navegador moderno que soporte APIs específicas, como WebAssembly, WebGPU, y una computadora lo suficientemente potente para ejecutar la inferencia. No hay necesidad de comprar una suscripción a una API o instalar ningún software en tu computadora, como en Lama, por ejemplo. Poder tener modelos y gestionar inferencias relacionadas en dispositivos trae grandes ventajas, privacidad de datos multiplataforma, baja latencia, uso sin conexión, sin dependencia de proveedores, y así sucesivamente. Este tipo de solución se llama comúnmente AI on the Edge. Es el viaje del modelo local. El punto de partida es un modelo grande que fue previamente entrenado en vastos conjuntos de datos. Estos modelos, como GPT, son típicamente muy grandes con millones o miles de millones de parámetros y están diseñados originalmente para ejecutarse en servidores potentes, servidores muy potentes.

El modelo preentrenado se convierte en un formato optimizado para la ejecución web, y este proceso puede incluir cuantización, ejecución, compresión, etcétera. Y el resultado es una versión más ligera y eficiente del modelo original, diseñada específicamente para la ejecución en el entorno del navegador. Este modelo mantiene la mayoría de las capacidades originales, pero con una huella de memoria fuertemente reducida. Cuando un usuario accede a la aplicación web, el modelo optimizado se descarga y carga en el navegador. Este proceso puede optimizarse para reducir el tiempo de carga, por ejemplo, a través de la carga progresiva o el almacenamiento en caché. Nuestra implementación verifica si el navegador del usuario soporta WebGPU, y si WebGPU está disponible, el modelo se ejecuta en la GPU del dispositivo, ofreciendo un rendimiento mucho mejor.

Si WebGPU no está disponible, se recurre a la ejecución en CPU usando WebAssembly, que ofrece un rendimiento similar al nativo en el navegador. La entrada del usuario, una pregunta o una oración, se preprocesa y convierte en un formato que el modelo puede entender, típicamente a través de la tokenización. El modelo procesa la entrada y genera una respuesta, y la salida generada por el modelo se posprocesa y se presenta al usuario en la interfaz de la aplicación. Muy simple. Este es un esquema de alto nivel para entender las capas involucradas en este tipo de arquitectura, y nuestro enfoque para hoy está en los frameworks o bibliotecas JS.

Hay algunos frameworks de bibliotecas. Puedes usar, por ejemplo, transformer.js, WebLM o MediaPipe. La pila que prefiero es la pila AI Edge de Google. Va desde APIs de bajo código hasta bibliotecas de aceleración de hardware específicas, por lo que puedes usar el framework MediaPipe como pipelines de ML acelerados por rendimiento.

LightRT, anteriormente TensorFlow Lite, y MediaPipe Solutions. MediaPipe Solutions es un conjunto de bibliotecas y herramientas para aplicar rápidamente técnicas de AI y ML en tus aplicaciones. MediaPipe Tasks son APIs multiplataforma y bibliotecas para un rápido despliegue de soluciones. Los modelos de MediaPipe están entrenados, o mejor, preentrenados y listos para ejecutar modelos, y MediaPipe Model Maker es una buena manera de personalizar modelos con tus datos, y MediaPipe Studio es un sitio simple donde puedes visualizar, evaluar y comparar soluciones en tu navegador.

Hoy, nos estamos enfocando en MediaPipe Tasks, que proporcionan las principales APIs de la suite de MediaPipe Solutions, incluyendo un conjunto de bibliotecas para implementar soluciones en video, audio, texto y generación en Android, iOS y web. Elegí uno para usar en esta ocasión y no es un modelo generativo. Es increíble. Soy un acceso en este período. Elegí MediaPipe Face Landmark Detection. Te permite detectar puntos de referencia faciales y expresiones faciales en imágenes y videos. Las tareas generan puntos de referencia faciales tridimensionales y formas de mezcla, núcleos y expresiones faciales para detectar superficies faciales detalladas en tiempo real. MediaPipe Face Landmark aprovecha tres modelos enviados a través de un paquete.

El primero es un modelo de detección facial que identifica expresiones faciales, un modelo de malla facial que añade un mapeo completo del rostro, y un modelo de predicción de formas de mezcla que predice puntuaciones de formas de mezcla, representando diferentes expresiones faciales. Face Landmark Detection detecta rostros, mapeo de rostros y formas de mezcla muchas veces por segundo y devuelve esta información como un objeto con aproximadamente 40,018 puntos normalizados diferentes para los puntos de referencia y más de 50 formas de mezcla como parpadeos, movimientos de cejas, etc., y métricas de transformación para identificar rotaciones y traslaciones. Ahora tenemos todas las piezas.

En particular, lo que hice fue la extracción de características del iris usando MediaPipe Landmark Detection y una transmisión de video de webcam estándar, calibración de 13 puntos con detección de posición del iris, finalmente, predicción de la posición de la mirada en la pantalla mapeada a través de regresión lineal.

Entonces, es hora de la demostración. Lanzamos el proyecto, que descargará todos los activos localmente, incluyendo las tareas de MediaPipe, e inmediatamente realiza una calibración para registrar cómo se comporta nuestra mirada y por lo tanto registrar las coordenadas altas.

Bueno, solo un segundo. Solo un segundo. Bien. Podríamos comenzar con una nueva calibración. Bueno, ahora tengo que mirar estos 13 puntos. Bien. Los estoy mirando. Bien. Es útil para la calibración. Bueno. Bueno, ahora estoy tratando de mirar sin fin muchos elementos. Por ejemplo, elemento interactivo uno o elemento interactivo dos, o el ejemplo de botón, o el ejemplo de navegación.

Bien. Cambié muchos ajustes para mejorar mi predicción, y tenemos la posibilidad de ajustar parámetros como la sensibilidad al movimiento, cualquier multiplicador para los ejes, desactivación de filtros de Kalman, etc. Y una vez que hemos encontrado los valores correctos de los parámetros, podemos ver que nuestra mirada está mapeada a la pantalla, coordenadas gracias a los datos determinados por MediaPipe face landmark, y mapeados en la pantalla a través de los datos recopilados durante la calibración.

Bien. También podemos activar la interacción de la mirada. Por ejemplo, ahora estoy tratando de ver un ejemplo de botón. {{^}}Bien. Fue activado. Elemento uno. Bien. Bueno, funciona. Bueno, el poder del modelo de IA nos permite hacer todo en tiempo real, capturando datos a una velocidad impresionante, con una precisión impresionante, y todo esto, perdón, y todo esto se ejecuta completamente localmente. Bien. Espero que sea genial para ti, ¿verdad?

Pero, ¿cómo funciona? Solo un segundo. Bien. Veamos rápidamente el proyecto. Simplemente usé una etiqueta de video para capturar la transmisión de la webcam, y una etiqueta de canvas para dibujar los marcadores en la cara. Bien. Configuré los diversos elementos de la interfaz y sus oyentes, hasta ahora, todo muy estándar. Yo, perdón, si inicio la calibración, los puntos para el objetivo actual a mirar son enviados por un generador, pero no es importante.

Gracias a las coordenadas de los puntos objetivo, perdón, y las coordenadas de la mirada capturadas por MediaPipe durante la calibración, calculo la pendiente útil para escalar, y la intersección útil para el desplazamiento, para cada ojo. Para almacenarlos en las métricas de calibración, y usarlos más tarde para calcular la regresión lineal, y por lo tanto, para mapear la mirada a las coordenadas de la pantalla. En este método, encontramos todo lo necesario para cargar y ejecutar MediaPipe, y es muy simple. El resolvedor de archivos es útil para recuperar los archivos requeridos para las APIs de tareas de MediaPipe.

Finalmente, indicamos que solo una cara debe ser identificada en una transmisión de video, y que las ilustraciones faciales deben ser identificadas. Gracias al método detectForVideo, podremos hacer que ese modelo funcione, y obtener toda la información que necesitamos. No se necesita nada más. Obviamente, capturamos la transmisión de video desde una webcam, usando APIs web muy estándar, como getUserMedia.

En el método predict, finalmente, ejecutamos la calibración o el mapeo de los puntos capturados por MediaPipe en coordenadas de video. Obviamente, aplicando cualquier filtro de suavizado, amplificaciones, etc., los roles son muy importantes, están aquí y aquí, porque podemos encontrar la posición exacta del iris izquierdo y derecho por un punto almacenado en los marcadores faciales, y es muy, muy útil.

El mapeo ocurre simplemente aplicando una regresión lineal simple, usando las pendientes y las intersecciones almacenadas en la métrica de calibración. Después de esta operación, hacemos un simple ajuste con el lado del viewport, así que la regresión lineal y un simple ajuste. ¡Hecho! Eso es todo. Es realmente muy simple y poderoso, gracias a los modelos locales que nos proporcionan una fiabilidad y precisión muy alta. Obviamente, es un experimento y no es perfecto, pero creo que es un excelente punto de partida y fuente de inspiración. Pensé en muchas mejoras para el futuro, por ejemplo, la predicción de movimientos sacádicos. Tengo que mover mucho código a WebWorker en la gestión de condiciones de poca luz, etc. Hay algunos enlaces útiles de mis competidores, y es muy útil para entender mejor o intentar hacer una solución como esta. Soy Francesco Sciuti, un desarrollador por elección y pasión, y soy un experto desarrollador de Google. También soy socio en una empresa italiana enfocada en el desarrollo front-end y móvil, impulsada por IA en este momento, y capacitación en este campo. Grazie a tutti, y aquí hay algunos enlaces para contactarme.