El Futuro de la Computación Numérica en JavaScript

Hola a todos, soy Gunj Joshi y hoy hablaré sobre el futuro de la computación numérica en JavaScript. Este es un espacio que ha sido dominado por lenguajes como Python, R, etc. Pero las cosas han comenzado a cambiar. Como colaborador principal en Standard Lib, he tenido un asiento en primera fila para algunos desarrollos emocionantes y hoy exploraremos qué es posible, qué es difícil y hacia dónde nos dirigimos.

Así que comencemos con el por qué. ¿Por qué deberíamos siquiera molestarnos en realizar tareas numéricas pesadas dentro del navegador? Uno, acceso instantáneo. No hay necesidad de instalar Python o configurar ningún backend. Simplemente abres una pestaña y comienzas a computar. Dos, privacidad y seguridad. Los datos permanecen en la máquina del cliente. Esto es crucial para cosas como información médica, finanzas personales o cualquier cosa sensible en general. Tres, baja latencia. No más esperar a que el servidor procese tus tareas. Todo sucede de inmediato. Y cuatro, accesibilidad. Esto reduce la barrera de entrada para personas que no tienen máquinas de alta gama o que no pueden instalar software complejo.

Así que podrías estar pensando cómo se ve esto en la práctica. Tengo algunas demostraciones geniales a través de las cuales podemos ver eso. La primera demostración es un clasificador de dígitos. Este es tu clásico reconocimiento de dígitos escritos a mano. Está impulsado por TensorFlow.js. La belleza de esto es que todo, desde el preprocesamiento de datos hasta la inferencia, se ejecuta completamente dentro de tu navegador. Así que no hay servidor involucrado. El siguiente ejemplo que tenemos es de una plataforma de detección de toxicidad. Lo que hace es que toma un bloque de texto como un tweet abusivo o un comentario en una plataforma de redes sociales y lo marca como tóxico o no tóxico de inmediato en tu navegador web. Supongamos que tenemos un comentario tóxico aquí y queremos clasificarlo para que resulte ser verdadero. Después de eso, tenemos la demostración de un OCR. Aquí tenemos Tesseract.js, que es el puerto de JavaScript del popular motor OCR. Lo que hace es tomar una imagen y extraer el texto de esa imagen en particular. Después de eso, tenemos el ejemplo de MNIST para visualizar el entrenamiento de modelos directamente dentro de tu navegador. Así que sí, puedes ver realmente el entrenamiento del modelo directamente dentro de tu navegador como aquí.

Cuando comenzamos el entrenamiento, puedes ver que el entrenamiento está sucediendo directamente dentro de tu navegador web en lugar de un back end. Y después de que este entrenamiento se complete, puedes ver los gráficos de entrenamiento personalizados o precisión, matriz de confusión, todas esas cosas.

A continuación, tenemos las demostraciones de algunas aplicaciones de accesibilidad. La primera de ellas es WebGazer. Utiliza tu navegador para crear una página web. La siguiente es WebGazer. Utiliza tu cámara web para estimar dónde estás mirando realmente en la pantalla. Así que supongamos que dondequiera que se muevan mis globos oculares, la bola roja, el puntero rojo o la bola roja se mueve en esa dirección particular. A continuación en nuestra alineación tenemos Holobooth, que es un filtro AR basado en la web. Así que dondequiera que mueva mi cara o parpadee mis ojos, se mueve de acuerdo a eso. Y todo esto también sucede dentro de tu navegador web nuevamente.

Así que hemos visto lo que es posible. Ahora aquí viene la gran pregunta. ¿Cómo construyes realmente algo como esto? Vamos a resolverlo juntos. El primer trabajo resulta ser TensorFlow.js. Pero está altamente especializado para el aprendizaje automático. Tiene poco o ningún soporte para álgebra numérica y lineal. Tal vez estadísticas o cualquier otra tarea de computación científica. Si piensas en el ritmo de desarrollo, se está desacelerando. Incluso sus problemas de GitHub y solicitudes de extracción sugieren que el enfoque de Google podría estar cambiando a otro lugar. Nuestra segunda parada resulta ser una bolsa de npm. Aquí lo que hacemos es simplemente tomar algunos paquetes como mathjs para funciones matemáticas, tal vez simple statistics para estadísticas, mljs para aprendizaje automático, randomjs para generar algunos números aleatorios. Muy pronto estás manejando 5-6 bibliotecas diferentes, cada una con su propio estilo de API, sus propias peculiaridades y sus propios errores. Es frágil, inconsistente y empeora a medida que tu proyecto crece. No debería ser tan difícil, ¿verdad? De acuerdo. Pausamos por un segundo y hacemos zoom hacia afuera. Tal vez demos un paso atrás y veamos cuáles son los ingredientes esenciales de un sistema numérico de computación científica. ¿Y por qué es tan difícil actualmente en JavaScript? Primero en nuestra lista de ingredientes están las sutilezas sintácticas. Estas pueden parecer cosméticas al principio, pero tienen un gran impacto en cómo legible y mantenible es tu código. Toma los operadores de tubería de R, por ejemplo.

A la izquierda tenemos un estilo clásico de llamada de función anidada que es bastante denso. Pero a la derecha ves mucho más claro cómo se vuelve cuando usamos la tubería. Cada operación se cambia paso a paso tal como lo haces en texto en inglés simple.

Luego, lo siguiente en nuestra lista son las extensiones de sitio o cuadernos interactivos. En Jupyter, en Python, Jupyter Notebooks se han convertido en el estándar de oro para la computación interactiva, mezclando código, gráficos y texto todo en un solo lugar. En JavaScript tenemos Observable que trae la misma experiencia de codificación reactiva en vivo directamente dentro de tus navegadores web.

Pasando a algo bajo el capó pero súper importante, enlaces a bibliotecas optimizadas por hardware. Bibliotecas como LAS y LFback impulsan todo, desde la multiplicación de matrices y la descomposición QR hasta SVD o la resolución de ecuaciones lineales. Estas bibliotecas datan de la década de 1970 y fueron originalmente escritas en Fortran y la mayoría de las herramientas que usamos hoy en día como NumPy, MATLAB, R, Julia son solo envoltorios alrededor de ellas. JavaScript ahora está alcanzando gracias a WebAssembly que nos permite aprovechar el mismo nivel de rendimiento directamente dentro del navegador web.

A continuación, tenemos los ndarrays de NumPy que son la columna vertebral de casi todas las aplicaciones numéricas. Te permiten manejar datos multidimensionales de manera eficiente con operaciones como slicing, reshaping y broadcasting integradas. En JavaScript carecemos de un equivalente nativo aunque hay bibliotecas que intentan llenar el vacío, pero es un área aún en desarrollo.

Más allá de los arrays, también necesitamos marcos de datos. Los marcos de datos de Pandas te permiten trabajar con datos tabulares fácilmente, soportan filtrado, agregación y unión de conjuntos de datos. En Python esto se maneja con Pandas que está construido sobre los ndarrays de NumPy. JavaScript tiene proyectos como DanfoJS que buscan construir capacidades similares dentro del navegador con NodeJS, pero las herramientas y el ecosistema a su alrededor aún no son tan maduros, principalmente porque todavía carecemos de una infraestructura eficiente de ndarray subyacente.

Sin un soporte sólido de arrays es difícil construir una biblioteca confiable de marcos de datos. Ahora hablemos de una de las mayores palancas de rendimiento en la computación científica, la vectorización. Así es como se ve sin vectorización. Aquí estamos usando una simple comprensión de listas en Python para elevar al cuadrado una lista de números. Funciona, pero en el fondo esto es solo un bucle a través de cada elemento uno por uno.

Es legible, pero cuando trabajas con grandes conjuntos de datos, este enfoque se deteriora muy rápido. Ahora mira la versión vectorizada. Usando NumPy convertimos la lista en un ndarray y aplicamos esta operación de elevar al cuadrado directamente a todo el array. No hay un bucle explícito aquí, todo sucede a nivel de C bajo el capó, haciéndolo mucho más rápido.

Aquí hay un ejemplo más del mundo real, una función para calcular la distancia entre dos puntos en la superficie de la tierra usando latitud y longitud. Esto se basa en la fórmula de Haversine y estamos usando funciones de NumPy para vectorizar todo el cálculo. La vectorización nos permite ejecutar la función sobre arrays completos de coordenadas y no solo puntos individuales, lo cual es clave al trabajar con conjuntos de datos geoespaciales.

Por supuesto, y para realmente probar el rendimiento, necesitamos grandes conjuntos de datos. Aquí hay un método para generar un marco de datos de pandas lleno con 100,000 coordenadas aleatorias. Esto proporciona un conjunto de datos sólido para probar. Observa cómo estamos usando la generación de números aleatorios vectorizados para llenar rápidamente columnas enteras. Es eficiente y escala bien. Ahora imagina que quieres calcular distancias desde un punto fijo a cada fila en ese gran marco de datos.

Aquí está el enfoque no vectorizado usando un bucle for básico para iterar a través de cada fila. Esto hace el trabajo pero es dolorosamente lento para grandes conjuntos de datos. Cada iteración se maneja en el espacio de Python y la penalización de rendimiento se acumula rápidamente.

Aquí está el enfoque vectorizado de la misma versión que vimos antes. Observa cómo pasamos arrays completos de valores de latitud y longitud desde el marco de datos directamente a la función. Gracias a numpy y pandas bajo el capó, esto se ejecuta mucho más rápido que el bucle. Y la diferencia de rendimiento es realmente muy real.

Aquí hay un benchmark que muestra diferentes métodos. A medida que el número de filas crece, puedes ver cómo el enfoque vectorizado se mantiene plano mientras que otros, especialmente el bucle for, explotan exponencialmente. A continuación en el ecosistema, bibliotecas especializadas de dominio específico. Una de las más famosas es scikit-learn que hace que el machine learning en Python sea súper accesible.

Este ejemplo muestra lo fácil que es configurar un modelo de regresión lineal y hacer predicciones con solo unas pocas líneas de código. Otra pieza crítica son los modelos estadísticos que se centran en el análisis estadístico. Aquí estamos usando una simple regresión de mínimos cuadrados ordinarios e imprimiendo un resumen estadístico completo del modelo. Así que tomemos un momento para recapitular lo que hemos cubierto hasta ahora. Estos son los ingredientes clave que componen un ecosistema de computación numérica maduro.

Primero, las sutilezas sintácticas, cosas como operadores de tubería y sintaxis expresiva que hacen que el código sea legible. Luego, enlaces optimizados para hardware como glass y lapack bajo el capó para asegurar que el rendimiento escale. Luego, estructuras de datos como nd arrays y data frames que forman la base para un trabajo numérico serio. Luego, vectorización porque los bucles for no escalan y finalmente bibliotecas especializadas como scikit-learn y modelos estadísticos para ayudarte a construir una fuerza laboral real, no solo ejemplos de juguete.

Ahora la pregunta es, ¿puede JavaScript cumplir con este estándar? Haz una pausa y reflexiona por un segundo. La buena noticia es que estamos viendo un ecosistema emergente. Individualmente, estos son fuertes pero el desafío sigue siendo unirlos en una experiencia sin fisuras y ahí es exactamente donde proyectos como standard lib están apuntando a llenar el vacío. Así que lo que realmente es emocionante sobre este movimiento en el tiempo es que creo que estamos al borde de un nuevo y versionado ecosistema para el ecosistema científico basado en la web. Un ecosistema que impulsará y supercargará las aplicaciones web del futuro.

Ahora es el momento de poner el foco en un proyecto clave que está impulsando este ecosistema emergente y ese proyecto es standard lib. Standard lib proporciona una base común con APIs estandarizadas sobre las cuales otros pueden construir bibliotecas específicas de dominio. Ahora revisemos nuestra lista de ingredientes que discutimos y veamos si standard lib tiene todo cubierto.

Fancy indexing y por fancy indexing nos referimos a la indexación al estilo de Python. En eso puedes crear y establecer cortes arbitrarios de datos de matriz y aplicar cosas como máscaras de matriz Booleanas e enteras para filtrado y extracción de datos. Así que aquí primero estamos importando el paquete independiente luego inicializamos nuestra matriz x. Aplicamos el método array to fancy en esa matriz luego podemos hacer recuperación de cortes y asignación de cortes y finalmente obtener el resultado. Después de eso tenemos Blast que es una colección de operaciones fundamentales utilizadas para álgebra lineal o análisis estadístico, transformación de imágenes y aprendizaje automático también.

Incluye operaciones para multiplicación de matrices, manipulación, escalado y transformaciones como d dot o d swap dsm dgmm etc. y en este segmento de código lo que estamos haciendo es primero importar solo los paquetes que requerimos luego inicializamos las matrices x e y, establecemos la constante alfa y luego usamos la operación DAX py. También tiene el paquete de álgebra lineal también conocido como LAPACK. Este es un ejemplo del método DLACPY que se utiliza para copiar toda o parte de una matriz A o solo una pequeña parte de la matriz A a otra matriz B.

Como se muestra en el segmento de código, puedes establecer el tipo de datos, la forma del búfer, el orden que es el orden de la matriz y los pasos y desplazamientos. Hablamos sobre el rendimiento que obtenemos al usar la vectorización en lugar de simples bucles for. De manera similar, las ufuncs de standard lib también admiten la vectorización. En este bloque de código, estamos nuevamente importando solo los módulos requeridos. Inicializamos la matriz y aplicamos la función absoluta sobre toda la matriz de una vez en lugar de recorrer cada elemento y para ayudar a facilitar el análisis interactivo de datos, standard lib viene con su propio ripple que viene precargado con toda la funcionalidad de standard lib y que facilita cargar un conjunto de datos y comenzar a analizar el rendimiento.

Este ejemplo en particular muestra cómo se puede implementar el famoso algoritmo PageRank que es el algoritmo original que impulsa la búsqueda de Google usando solo la funcionalidad estándar. A un alto nivel, primero solo quiero que prestes atención a las declaraciones de importación. Estas pueden parecer demasiado al principio, pero eso es en realidad una ventaja porque solo necesitas importar aquellos paquetes que realmente necesitas en lugar de importar toda la biblioteca, lo que ayudaría a reducir los tamaños de los paquetes y cada una de las funciones utilizadas aquí es únicamente una funcionalidad de standard lib, por lo que no necesitas lidiar con diferentes bibliotecas. Standard lib puede ser tu tienda única para la computación numérica pero ¿qué pasa con WebAssembly entonces?

Bueno, para aquellos que no lo saben, WebAssembly es un formato binario portátil consistente y de alto rendimiento que se ejecuta dentro de los navegadores web a velocidades casi nativas nos permite escribir aplicaciones de alto rendimiento en lenguajes como C, C++ o REST. Luego compilarlas a WebAssembly y luego ejecutarlas dentro de los navegadores web. También admite funciones SIMD como para instrucciones simples y múltiples flujos de datos. También tenemos puertos de motores de juegos completos a WebAssembly para ejecutar el juego dentro de nuestros navegadores web.

Este es otro ejemplo de un software de edición de imágenes completo Adobe Photoshop que está completamente basado en nuestros navegadores web, por lo que puedes hacer todas las operaciones de edición de imágenes directamente dentro del navegador web.

Aquí comparamos JavaScript contra C y WebAssembly para la rutina de nivel blast dexpy. Dexpy multiplica un vector por un escalar y luego suma el resultado a otro vector.

En el gráfico estoy mostrando dos mediciones diferentes de WebAssembly. La primera es WASM y la segunda es WASM copy. Para la primera medición de WebAssembly estoy midiendo el rendimiento de WebAssembly al realizar el cálculo sobre vectores que ya están asignados en el montón del módulo de WebAssembly.

En la segunda medición de WebAssembly, que es WASM copy, estoy midiendo el rendimiento de WebAssembly cuando necesitas copiar datos hacia y desde el módulo de memoria de WebAssembly además de realizar la operación blast.

Así que primero tienes que copiar los datos en el módulo de memoria y luego tienes que hacer la operación.

Este escenario es probablemente más preciso para usar en casos del mundo real, sin embargo, para hacerlo primero necesitas copiar todo el array de datos tipados en la memoria del módulo de WebAssembly y luego copiar los resultados de vuelta después de haber realizado la operación. Así que en este gráfico, como podrías haber esperado, realizar cálculos en WebAssembly sin necesidad de copiar funciona mucho mejor que cuando se necesita copiar, especialmente para rutinas como dexpy donde copiar datos añade una sobrecarga significativa en comparación con la operación real.

Pero lo que puede ser inesperado es que JavaScript todavía funciona bastante bien al comparar con WASM copy. Eso demuestra que especialmente para operaciones más simples usar JavaScript puro está bien. Es solo 2 o 2.

5 veces más lento en comparación con C.

Ha habido algunos esfuerzos más en esta dirección, como Pyodide para ejecutar Python dentro de tus navegadores web y WebR para ejecutar R dentro de tus navegadores web. Pero ahora la gente podría preguntar si es posible simplemente compilar y cargar bibliotecas como numpy y scipy y luego ejecutarlas directamente dentro de los navegadores web.

Aunque esto es posible, hacerlo viene con desventajas significativas en comparación con standard lib, como se puede observar en el gráfico de la derecha, especialmente para conjuntos de datos más pequeños, standard lib supera significativamente a pyodide. Basado en estos gráficos, podemos concluir que standard lib es mejor o igual a otras alternativas basadas tanto en el tiempo de carga como en la velocidad.

Así que hagamos un resumen de lo que acabamos de cubrir.

Primero vimos cómo la vectorización permite un código numérico rápido y legible en JavaScript. Luego vimos el papel de las bibliotecas especializadas para ML y estadísticas como scikit-learn y stats models. Luego también vimos cómo standard lib proporciona arrays indy, funciones universales, APIs matemáticas centrales y mucho más.

También glass y alipack ahora son accesibles dentro de los navegadores web usando standard lib y todo esto está convergiendo en un ecosistema emergente real con, por supuesto, standard lib en su centro. Entonces, ¿cómo puedes involucrarte en todo esto? Bueno, estos dos códigos QR enlazan al repositorio de standard lib y su blog.

Así que si solo sientes contribuir o enfrentar algún problema, puedes simplemente ir y hacer ping al repositorio de GitHub. También puedes leer los blogs de standard lib que se actualizan con bastante regularidad sobre las actividades recientes. Standard lib también participa en Google Summer of Code. Participó el año pasado y este año también.