Aprendizaje automático para desarrolladores front-end con Tensorflow.js

 

 

 

  • Accesibilidad para diseñadores, con Stéphanie Walter
  • Patrones de diseño de interfaces inteligentes, vídeo de 10h + formación UX

  • Índice
    1. ¿Qué es el aprendizaje automático? #
      1. Definición #
      2. Conceptos basicos #
      3. Características #
      4. Límites #
    2. Resumen #
    3. Recursos adicionales #
      1. Otros marcos y herramientas #
      2. Ejemplos, modelos y conjuntos de datos #
      3. Inspiración #

    Usar JavaScript y marcos como Tensorflow.js es una excelente manera de comenzar y aprender más sobre el aprendizaje automático. En este artículo, Charlie Gerard cubre las tres características principales disponibles actualmente usando Tensorflow.js y arroja luz sobre los límites del uso del aprendizaje automático en la interfaz.

     

    El aprendizaje automático a menudo parece pertenecer al ámbito de los científicos de datos y los desarrolladores de Python. Sin embargo, en los últimos años, se han creado marcos de código abierto para hacerlo más accesible en diferentes lenguajes de programación, incluido JavaScript. En este artículo, usaremos Tensorflow.js para explorar las diferentes posibilidades de usar el aprendizaje automático en el navegador a través de algunos proyectos de ejemplo.

    ¿Qué es el aprendizaje automático? #

    Antes de comenzar a profundizar en el código, hablemos brevemente sobre qué es el aprendizaje automático, así como sobre algunos conceptos y terminología básicos.

    Definición #

    Una definición común es que es la capacidad que tienen las computadoras de aprender a partir de datos sin estar programadas explícitamente.

    Si lo comparamos con la programación tradicional, significa que dejamos que las computadoras identifiquen patrones en los datos y generen predicciones sin que tengamos que decirle exactamente qué buscar.

    Tomemos el ejemplo de la detección de fraude. No existe un criterio establecido para saber qué hace que una transacción sea fraudulenta o no; Los fraudes se pueden ejecutar en cualquier país, en cualquier cuenta, dirigidos a cualquier cliente, en cualquier momento, etc. Sería prácticamente imposible realizar un seguimiento de todo esto manualmente.

     

    Sin embargo, utilizando datos previos sobre gastos fraudulentos recopilados a lo largo de los años, podemos entrenar un algoritmo de aprendizaje automático para comprender los patrones en estos datos y generar un modelo al que se le pueda dar cualquier transacción nueva y predecir la probabilidad de que sea fraude o no, sin diciéndole exactamente qué buscar.

    Conceptos basicos #

    Para comprender los siguientes ejemplos de código, primero debemos cubrir algunos términos comunes.

    Modelo #

    Cuando entrenas un algoritmo de aprendizaje automático con un conjunto de datos, el modelo es el resultado de este proceso de entrenamiento. Es un poco como una función que toma nuevos datos como entrada y produce una predicción como salida.

    Etiquetas y características #

    Las etiquetas y características se relacionan con los datos que usted alimenta a un algoritmo en el proceso de capacitación.

    Una etiqueta representa cómo clasificaría cada entrada en su conjunto de datos y cómo la etiquetaría. Por ejemplo, si nuestro conjunto de datos fuera un archivo CSV que describiera diferentes animales, nuestras etiquetas podrían ser palabras como "gato", "perro" o "serpiente" (dependiendo de lo que represente cada animal).

    Las características, por otro lado, son las características de cada entrada en su conjunto de datos. En el ejemplo de nuestros animales, podrían ser cosas como “bigotes, maullidos”, “juguetones, ladridos”, “reptiles, rampantes”, etc.

    Con esto, un algoritmo de aprendizaje automático podrá encontrar alguna correlación entre las características y su etiqueta que utilizará para futuras predicciones.

    Redes neuronales #

    Las redes neuronales son un conjunto de algoritmos de aprendizaje automático que intentan imitar la forma en que funciona el cerebro mediante el uso de capas de neuronas artificiales.

    No necesitamos profundizar en cómo funcionan en este artículo, pero si quieres aprender más, aquí tienes un vídeo realmente bueno:

    Ahora que hemos definido algunos términos comúnmente utilizados en el aprendizaje automático, hablemos sobre lo que se puede hacer usando JavaScript y el marco Tensorflow.js.

    Características #

    Actualmente hay tres funciones disponibles:

    1. Usando un modelo previamente entrenado ,
    2. transferir aprendizaje ,
    3. Definir, ejecutar y utilizar su propio modelo .

    Empecemos por el más sencillo.

    1. Usar un modelo previamente entrenado #

    Dependiendo del problema que intente resolver, es posible que ya haya un modelo entrenado con un conjunto de datos específico y para un propósito específico que pueda aprovechar e importar en su código.

    Por ejemplo, digamos que estamos creando un sitio web para predecir si una imagen es la imagen de un gato. Un modelo de clasificación de imágenes popular se llama MobileNet y está disponible como modelo previamente entrenado con Tensorflow.js.

     

    El código para esto se vería así:

    html lang="en" head meta charset="UTF-8" meta name="viewport" content="width=device-width, initial-scale=1.0" meta http-equiv="X-UA-Compatible" content="ie=edge" titleCat detection/title script src="https://cdn.jsdelivr.net/npm/@tensorflow/[email protected]" /script script src="https://cdn.jsdelivr.net/npm/@tensorflow-models/[email protected]" /script /head body img id="image" alt="cat laying down" src="cat.jpeg"/ script const img = document.getElementById('image'); const predictImage = async () = { console.log("Model loading..."); const model = await mobilenet.load(); console.log("Model is loaded!") const predictions = await model.classify(img); console.log('Predictions: ', predictions); } predictImage(); /script /body/html

    Comenzamos importando Tensorflow.js y el modelo MobileNet en el encabezado de nuestro HTML:

    script src="https://cdnjs.cloudflare.com/ajax/libs/tensorflow/1.0.1/tf.js" /scriptscript src="https://cdn.jsdelivr.net/npm/@tensorflow-models/[email protected]" /script

    Luego, dentro del cuerpo, tenemos un elemento de imagen que se utilizará para las predicciones:

    img id="image" alt="cat laying down" src="cat.jpeg"/

    Y finalmente, dentro de la scriptetiqueta, tenemos el código JavaScript que carga el modelo MobileNet previamente entrenado y clasifica la imagen que se encuentra en la imageetiqueta. Devuelve una matriz de 3 predicciones ordenadas por puntuación de probabilidad (el primer elemento es la mejor predicción).

    const predictImage = async () = { console.log("Model loading..."); const model = await mobilenet.load(); console.log("Model is loaded!") const predictions = await model.classify(img); console.log('Predictions: ', predictions);}predictImage();

    ¡Y eso es! ¡Esta es la forma en que puedes usar un modelo previamente entrenado en el navegador con Tensorflow.js!

    Nota : Si desea ver qué más puede clasificar el modelo MobileNet, puede encontrar una lista de las diferentes clases disponibles en Github.

    Una cosa importante que debes saber es que cargar un modelo previamente entrenado en el navegador puede llevar algún tiempo (a veces hasta 10 segundos), por lo que probablemente querrás precargar o adaptar tu interfaz para que los usuarios no se vean afectados.

    Si prefieres usar Tensorflow.js como módulo NPM, puedes hacerlo importando el módulo de esta manera:

    import * as mobilenet from '@tensorflow-models/mobilenet';

    Siéntete libre de jugar con este ejemplo en CodeSandbox .

    Ahora que hemos visto cómo utilizar un modelo previamente entrenado, veamos la segunda característica disponible: transferir aprendizaje.

    • Aproveche la sólida recuperación de datos y el tamaño de paquete optimizado con KendoReact Server Data Grid Probar ahora

    2. Transferir el aprendizaje #

    El aprendizaje por transferencia es la capacidad de combinar un modelo previamente entrenado con datos de entrenamiento personalizados. Lo que esto significa es que puedes aprovechar la funcionalidad de un modelo y agregar tus propias muestras sin tener que crear todo desde cero.

     

    Por ejemplo, se ha entrenado un algoritmo con miles de imágenes para crear un modelo de clasificación de imágenes y, en lugar de crear el suyo propio, el aprendizaje por transferencia le permite combinar nuevas muestras de imágenes personalizadas con el modelo previamente entrenado para crear un nuevo clasificador de imágenes. Esta característica hace que sea realmente rápido y fácil tener un clasificador más personalizado.

    Para proporcionar un ejemplo de cómo se vería esto en el código, reutilicemos nuestro ejemplo anterior y modifiquémoslo para que podamos clasificar nuevas imágenes.

    Nota : El resultado final es el siguiente experimento que puedes probar en vivo aquí .

    A continuación se muestran algunos ejemplos de código de la parte más importante de esta configuración, pero si necesita echar un vistazo al código completo, puede encontrarlo en este CodeSandbox .

    Todavía necesitamos comenzar importando Tensorflow.js y MobileNet, pero esta vez también necesitamos agregar un clasificador KNN (k-vecino más cercano):

    !-- Load TensorFlow.js --script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs"/script!-- Load MobileNet --script src="https://cdn.jsdelivr.net/npm/@tensorflow-models/mobilenet"/script!-- Load KNN Classifier --script src="https://cdn.jsdelivr.net/npm/@tensorflow-models/knn-classifier"/script

    La razón por la que necesitamos un clasificador es porque (en lugar de usar solo el módulo MobileNet) estamos agregando muestras personalizadas que nunca antes se habían visto, por lo que el clasificador KNN nos permitirá combinar todo y ejecutar predicciones sobre los datos combinados.

    Luego, podemos reemplazar la imagen del gato con una videoetiqueta para usar imágenes de la cámara.

    video autoplay id="webcam" width="227" height="227"/video

    Finalmente, necesitaremos agregar algunos botones en la página que usaremos como etiquetas para grabar algunas muestras de video e iniciar las predicciones.

    section button class="button"Left/button button class="button"Right/button button class="test-predictions"Test/button/section

    Ahora, pasemos al archivo JavaScript donde comenzaremos configurando algunas variables importantes:

    // Number of classes to classifyconst NUM_CLASSES = 2;// Labels for our classesconst classes = ["Left", "Right"];// Webcam Image size. Must be 227.const IMAGE_SIZE = 227;// K value for KNNconst TOPK = 10;const video = document.getElementById("webcam");

    En este ejemplo particular, queremos poder clasificar la entrada de la cámara web entre nuestra cabeza inclinada hacia la izquierda o hacia la derecha, por lo que necesitamos dos clases etiquetadas lefty right. Health Tips

    El tamaño de imagen establecido en 227 es el tamaño del elemento de vídeo en píxeles. Según los ejemplos de Tensorflow.js, este valor debe establecerse en 227 para que coincida con el formato de los datos con los que se entrenó el modelo MobileNet. Para poder clasificar nuestros nuevos datos, estos últimos deben ajustarse al mismo formato.

     

    Si realmente necesita que sea más grande, es posible, pero tendrá que transformar y cambiar el tamaño de los datos antes de enviarlos al clasificador KNN.

    Luego, estableceremos el valor de K en 10. El valor de K en el algoritmo KNN es importante porque representa la cantidad de instancias que tomamos en cuenta al determinar la clase de nuestra nueva entrada.

    En este caso, el valor de 10 significa que, al predecir la etiqueta para algunos datos nuevos, miraremos a los 10 vecinos más cercanos de los datos de entrenamiento para determinar cómo clasificar nuestra nueva entrada.

    Finalmente, obtenemos el videoelemento. Para la lógica, comencemos cargando el modelo y el clasificador:

    async load() { const knn = knnClassifier.create(); const mobilenetModule = await mobilenet.load(); console.log("model loaded");}

    Luego, accedamos al video:

    navigator.mediaDevices .getUserMedia({ video: true, audio: false }) .then(stream = { video.srcObject = stream; video.width = IMAGE_SIZE; video.height = IMAGE_SIZE; });

    Después de eso, configuremos algunos eventos de botón para registrar nuestros datos de muestra:

    setupButtonEvents() { for (let i = 0; i NUM_CLASSES; i++) { let button = document.getElementsByClassName("button")[i]; button.onmousedown = () = { this.training = i; this.recordSamples = true; }; button.onmouseup = () = (this.training = -1); } }

    Escribamos nuestra función que tomará muestras de imágenes de la cámara web, las reformateará y las combinará con el módulo MobileNet:

    // Get image data from video elementconst image = tf.browser.fromPixels(video);let logits;// 'conv_preds' is the logits activation of MobileNet.const infer = () = this.mobilenetModule.infer(image, "conv_preds");// Train class if one of the buttons is held downif (this.training != -1) { logits = infer(); // Add current image to classifier this.knn.addExample(logits, this.training);}

    Y finalmente, una vez que recopilamos algunas imágenes de la cámara web, podemos probar nuestras predicciones con el siguiente código:

    logits = infer();const res = await this.knn.predictClass(logits, TOPK);const prediction = classes[res.classIndex];

    Y por último, puedes deshacerte de los datos de la cámara web ya que ya no los necesitamos:

    // Dispose image when doneimage.dispose();if (logits != null) { logits.dispose();}

    Una vez más, si desea ver el código completo, puede encontrarlo en CodeSandbox mencionado anteriormente.

    3. Entrenando un modelo en el navegador #

    La última característica es definir, entrenar y ejecutar un modelo completamente en el navegador. Para ilustrar esto, vamos a construir el ejemplo clásico de reconocer lirios.

    Para ello, crearemos una red neuronal que pueda clasificar Iris en tres categorías: Setosa, Virginica y Versicolor, según un conjunto de datos de código abierto.

    Antes de comenzar, aquí hay un enlace a la demostración en vivo y aquí está CodeSandbox si quieres jugar con el código completo.

    En el centro de cada proyecto de aprendizaje automático hay un conjunto de datos. Uno de los primeros pasos que debemos dar es dividir este conjunto de datos en un conjunto de entrenamiento y un conjunto de prueba.

     

    La razón de esto es que usaremos nuestro conjunto de entrenamiento para entrenar nuestro algoritmo y nuestro conjunto de prueba para verificar la precisión de nuestras predicciones, para validar si nuestro modelo está listo para usarse o necesita ser modificado.

    Nota : Para hacerlo más fácil, ya dividí el conjunto de entrenamiento y el conjunto de prueba en dos archivos JSON que puedes encontrar en CodeSanbox .

    El conjunto de entrenamiento contiene 130 elementos y el conjunto de prueba 14. Si observa cómo se ven estos datos, verá algo como esto:

    { "sepal_length": 5.1, "sepal_width": 3.5, "petal_length": 1.4, "petal_width": 0.2, "species": "setosa"}

    Lo que podemos ver son cuatro características diferentes para el largo y ancho del sépalo y pétalo, así como una etiqueta para la especie.

    To be able to use this with Tensorflow.js, we need to shape this data into a format that the framework will understand, in this case, for the training data, it will be [130, 4] for 130 samples with four features per iris.

    import * as trainingSet from "training.json";import * as testSet from "testing.json";const trainingData = tf.tensor2d( trainingSet.map(item = [ item.sepal_length, item.sepal_width, item.petal_length, item.petal_width ]), [130, 4]);const testData = tf.tensor2d( testSet.map(item = [ item.sepal_length, item.sepal_width, item.petal_length, item.petal_width ]), [14, 4]);

    Next, we need to shape our output data as well:

    const output = tf.tensor2d(trainingSet.map(item = [ item.species === 'setosa' ? 1 : 0, item.species === 'virginica' ? 1 : 0, item.species === 'versicolor' ? 1 : 0]), [130,3])

    Then, once our data is ready, we can move on to creating the model:

    const model = tf.sequential();model.add(tf.layers.dense( { inputShape: 4, activation: 'sigmoid', units: 10 }));model.add(tf.layers.dense( { inputShape: 10, units: 3, activation: 'softmax' }));

    In the code sample above, we start by instantiating a sequential model, add an input and output layer.

    The parameters you can see used inside (inputShape, activation, and units) are out of the scope of this post as they can vary depending on the model you are creating, the type of data used, and so on.

    Once our model is ready, we can train it with our data:

    async function train_data(){ for(let i=0;i15;i++){ const res = await model.fit(trainingData, outputData,{epochs: 40}); }}async function main() { await train_data(); model.predict(testSet).print();}

    If this works well, you can start replacing the test data with custom user inputs.

    Once we call our main function, the output of the prediction will look like one of these three options:

    [1,0,0] // Setosa[0,1,0] // Virginica[0,0,1] // Versicolor

    The prediction returns an array of three numbers representing the probability of the data belonging to one of the three classes. The number closest to 1 is the highest prediction.

    For example, if the output of the classification is [0.0002, 0.9494, 0.0503], the second element of the array is the highest, so the model predicted that the new input is likely to be a Virginica.

     

    And that’s it for a simple neural network in Tensorflow.js!

    We only talked about a small dataset of Irises but if you want to move on to larger datasets or working with images, the steps will be the same:

    • Gathering the data;
    • Splitting between training and testing set;
    • Reformatting the data so Tensorflow.js can understand it;
    • Picking your algorithm;
    • Fitting the data;
    • Predicting.

    If you want to save the model created to be able to load it in another application and predict new data, you can do so with the following line:

    await model.save('file:///path/to/my-model'); // in Node.js

    Note: For more options on how to save a model, have a look at this resource.

    Límites #

    That’s it! We’ve just covered the three main features currently available using Tensorflow.js!

    Before we finish, I think it is important to briefly mention some of the limits of using machine learning in the frontend.

    1. Rendimiento #

    Importing a pre-trained model from an external source can have a performance impact on your application. Some objects detection model, for example, are more than 10MB, which is significantly going to slow down your website. Make sure to think about your user experience and optimize the loading of your assets to improve your perceived performance.

    2. Calidad de los datos de entrada #

    If you build a model from scratch, you’re going to have to gather your own data or find some open-source dataset.

    Before doing any kind of data processing or trying different algorithms, make sure to check the quality of your input data. For example, if you are trying to build a sentiment analysis model to recognize emotions in pieces of text, make sure that the data you are using to train your model is accurate and diverse. If the quality of the data used is low, the output of your training will be useless.

    3. Responsabilidad #

    Using an open-source pre-trained model can be very fast and effortless. However, it also means that you don’t always know how it was generated, what the dataset was made of, or even which algorithm was used. Some models are called “black boxes”, meaning that you don’t really know how they predicted a certain output.

    Depending on what you are trying to build, this can be a problem. For example, if you are using a machine-learning model to help detect the probability of someone having cancer based on scan images, in case of false negative (the model predicted that a person didn’t have cancer when they actually did), there could be some real legal liability and you would have to be able to explain why the model made a certain prediction.

    Resumen #

    In conclusion, using JavaScript and frameworks like Tensorflow.js is a great way to get started and learn more about machine learning. Even though a production-ready application should probably be built in a language like Python, JavaScript makes it really accessible for developers to play around with the different features and get a better understanding of the fundamental concepts before eventually moving on and investing time into learning another language.

    In this tutorial, we’ve only covered what was possible using Tensorflow.js, however, the ecosystem of other libraries and tools is growing. More specified frameworks are also available, allowing you to explore using machine learning with other domains such as music with Magenta.js, or predicting user navigation on a website using guess.js!

    As tools get more performant, the possibilities of building machine learning-enabled applications in JavaScript are likely to be more and more exciting, and now is a good time to learn more about it, as the community is putting effort into making it accessible.

    Recursos adicionales #

    If you are interested in learning more, here are a few resources:

    Otros marcos y herramientas #

    • ml5.js
    • ml.js
    • brain.js
    • Keras.js
    • PoseNet
    • Tensorflow playground

    Ejemplos, modelos y conjuntos de datos #

    • Tensorflow.js models
    • Tensorflow.js examples
    • Datasets

    Inspiración #

    • Teachable machine
    • AI experiments
    • AIJS.rocks
    • Creatability

    Thanks for reading!

    (rb, dm, yk, il)Explore more on

    • JavaScript
    • Machine Learning
    • UX





    Tal vez te puede interesar:

    1. ¿Deberían abrirse los enlaces en ventanas nuevas?
    2. 24 excelentes tutoriales de AJAX
    3. 70 técnicas nuevas y útiles de AJAX y JavaScript
    4. Más de 45 excelentes recursos y repositorios de fragmentos de código

    Aprendizaje automático para desarrolladores front-end con Tensorflow.js

    Aprendizaje automático para desarrolladores front-end con Tensorflow.js

    Accesibilidad para diseñadores, con Stéphanie Walter Patrones de diseño de interfaces inteligentes, vídeo de 10h + formación UX Índice

    programar

    es

    https://aprendeprogramando.es/static/images/programar-aprendizaje-automatico-para-desarrolladores-front-end-con-tensorflow-998-0.jpg

    2024-05-20

     

    Aprendizaje automático para desarrolladores front-end con Tensorflow.js
    Aprendizaje automático para desarrolladores front-end con Tensorflow.js

    Si crees que alguno de los contenidos (texto, imagenes o multimedia) en esta página infringe tus derechos relativos a propiedad intelectual, marcas registradas o cualquier otro de tus derechos, por favor ponte en contacto con nosotros en el mail [email protected] y retiraremos este contenido inmediatamente

     

     

    Top 20