![HEADER-Google-Developers-[GD-BLOG]-7-dos-and-don'ts-of-using-ML-on-the-web-with-MediaPipe](https://storage.googleapis.com/gweb-developer-goog-blog-assets/images/HEADER-Google-Developers-GD-BLOG-7-dos-and-dont.original.png)
Si eres un desarrollador web que busca llevar el poder del aprendizaje automático (ML) a tus apps web, echa un vistazo a MediaPipe Solutions. Con MediaPipe Solutions puedes implementar tareas personalizadas para resolver problemas comunes de ML en solo unas pocas líneas de código. Consulta las guías en los documentos y prueba las demostraciones web de Codepen para ver lo fácil que es comenzar. Si bien MediaPipe Solutions maneja gran parte de la complejidad del aprendizaje automático en la Web, todavía hay algunas cosas que se deben tener en cuenta que van más allá de las prácticas recomendadas habituales para JavaScript. Las he compilado aquí en esta lista de las siete cosas que debes y no debes hacer. ¡Sigue leyendo para obtener buenos consejos!
Como desarrollador web, tienes la costumbre de hacer que tus apps sean lo más ligeras posible para garantizar la mejor experiencia del usuario. Cuando hay elementos grandes para cargar, ya sabes que quieres descargarlos de una manera inteligente que permita al usuario interactuar con el contenido rápidamente en lugar de tener que esperar que finalice una larga descarga. Las estrategias como la cuantificación han hecho que los modelos de ML sean más pequeños y accesibles para los dispositivos perimetrales, pero siguen siendo lo suficientemente grandes como para que no quieras incluirlos en tu app web. Almacena tus modelos en la solución de almacenamiento en la nube de tu elección. Luego, cuando inicies tu tarea, el modelo y el objeto binario de WebAssembly se descargarán e inicializarán. Después de cargar la primera página, usa el almacenamiento local o IndexedDB para almacenar el modelo y el objeto binario en caché para que las futuras cargas de páginas se ejecuten aún más rápido. Puedes ver un ejemplo de esto en esta app de muestra de cajeros automáticos sin contacto en GitHub.
La inicialización de tareas puede llevar un poco de tiempo dependiendo del tamaño del modelo, la velocidad de la conexión y el tipo de dispositivo. Por lo tanto, inicializar la solución antes de la interacción del usuario es una buena idea. En la mayoría de las muestras de código de Codepen, la inicialización se lleva a cabo al cargar la página. Ten en cuenta que estas muestras están destinadas a ser lo más simples posible para que puedas comprender el código y aplicarlo a tu propio caso práctico. Inicializar tu modelo al cargar la página podría no ser la mejor opción. Solo concéntrate en encontrar el lugar adecuado para iniciar la tarea para que el procesamiento quede oculto para el usuario.
Después de la inicialización, debes preparar la tarea pasando una imagen de marcador de posición a través del modelo. En este ejemplo se muestra una función para ejecutar un lienzo de 1x1 píxeles a través de la tarea Pose Landmarker:
function dummyDetection(poseLandmarker: PoseLandmarker) {
const width = 1;
const height = 1;
const canvas = document.createElement('canvas');
canvas.width = width;
canvas.height = height;
const ctx = canvas.getContext('2d');
ctx.fillStyle = 'rgba(0, 0, 0, 1)';
ctx.fillRect(0, 0, width, height);
poseLandmarker.detect(canvas);
}
Una de mis partes favoritas de JavaScript es la recolección automática de elementos no utilizados. De hecho, no recuerdo la última vez que tuve que pensar en la administración de la memoria. Con suerte, habrás almacenado en caché un poco de información sobre la memoria en tu propia memoria, ya que solo necesitarás un poco de esta para aprovechar al máximo tu tarea de MediaPipe. MediaPipe Solutions para la Web utiliza WebAssembly (WASM) para ejecutar código C++ en el navegador. No necesitas saber C++, pero es útil saber que C++ requiere que hagas recolección de elementos no utilizados. Si no liberas la memoria no utilizada, verás cómo, con el tiempo, tu página web utiliza cada vez más memoria. Puede acabar teniendo problemas de rendimiento o incluso fallar.
Cuando hayas terminado con la solución, libera recursos utilizando el método .close ().
Por ejemplo, puedo crear un reconocedor de gestos usando el siguiente código:
const createGestureRecognizer = async () => {
const vision = await FilesetResolver.forVisionTasks(
"https://cdn.jsdelivr.net/npm/@mediapipe/tasks-vision@0.10.0/wasm"
);
gestureRecognizer = await GestureRecognizer.createFromOptions(vision, {
baseOptions: {
modelAssetPath:
"https://storage.googleapis.com/mediapipe-models/gesture_recognizer/gesture_recognizer/float16/1/gesture_recognizer.task",
delegate: "GPU"
},
});
};
createGestureRecognizer();
Una vez que termine de reconocer los gestos, desecho el reconocedor de gestos utilizando el método close():
gestureRecognizer.close();
Cada tarea tiene un método de cierre, así que asegúrate de usarlo cuando sea necesario. Algunas tareas tienen métodos close() para los resultados devueltos, así que consulta los documentos de la API para obtener más información.
Al decidirte por una solución o personalizarla, es una buena idea probarla en MediaPipe Studio antes de escribir tu propio código. MediaPipe Studio es una aplicación basada en la Web para evaluar y personalizar modelos y canalizaciones de ML en el dispositivo para tus aplicaciones. La app te permite probar rápidamente las soluciones de MediaPipe en el navegador con tus propios datos y tus propios modelos de ML personalizados. Cada demostración de la solución también te permite experimentar con la configuración del modelo para la cantidad total de resultados, el umbral mínimo de confianza para informar resultados y más. Esto te resultará especialmente útil a la hora de personalizar soluciones para que puedas ver el rendimiento de tu modelo sin necesidad de crear una página web de prueba.
Siempre es importante probar tus apps web en varios dispositivos y navegadores para asegurarte de que funcionen correctamente, pero creo que vale la pena agregar un recordatorio aquí para probar lo antes posible y con frecuencia en una variedad de plataformas. También puedes usar MediaPipe Studio para probar dispositivos, de modo que sepas de inmediato que una solución funcionará en los dispositivos de tus usuarios.
Cada tarea enumera uno o más modelos recomendados. Por ejemplo, la tarea Detección de objetos enumera tres modelos diferentes, cada uno con puntos a favor y en contra basados en la velocidad, el tamaño y la precisión. Puede ser tentador pensar que lo más importante es elegir el modelo con la mayor precisión, pero si lo haces, estarás sacrificando la velocidad y aumentando el tamaño de tu modelo. Según el caso de uso, tus usuarios podrían beneficiarse de un resultado más rápido en lugar de uno más preciso. La mejor manera de comparar las opciones de modelos es en MediaPipe Studio. Me doy cuenta de que esto está empezando a sonar como un anuncio de MediaPipe Studio, ¡pero realmente es útil en este contexto!
¿Tienes algún consejo sobre el uso del aprendizaje automático en la Web que creas que debí haber mencionado? ¿Tienes alguna pregunta sobre cómo empezar? ¿O tienes un proyecto genial que quieras compartir? ¡Comunícate conmigo en LinkedIn y cuéntame todo al respecto!
