{"id":4069,"date":"2019-11-22T11:46:07","date_gmt":"2019-11-22T11:46:07","guid":{"rendered":"https:\/\/www.tcit.cl\/2019\/11\/22\/google-quantum-copy\/"},"modified":"2023-04-26T15:30:59","modified_gmt":"2023-04-26T19:30:59","slug":"desarrolladores-front-end-tensorflowjs","status":"publish","type":"post","link":"https:\/\/www.tcit.cl\/ingles\/desarrolladores-front-end-tensorflowjs\/","title":{"rendered":"Aprendizaje autom\u00e1tico para desarrolladores front-end con Tensorflow.js"},"content":{"rendered":"<div class=\"fusion-fullwidth fullwidth-box fusion-builder-row-1 fusion-flex-container nonhundred-percent-fullwidth non-hundred-percent-height-scrolling\" style=\"--awb-border-radius-top-left:0px;--awb-border-radius-top-right:0px;--awb-border-radius-bottom-right:0px;--awb-border-radius-bottom-left:0px;--awb-padding-top:4%;--awb-padding-bottom:4%;--awb-flex-wrap:wrap;\" ><div class=\"fusion-builder-row fusion-row fusion-flex-align-items-flex-start fusion-flex-content-wrap\" style=\"max-width:1341.6px;margin-left: calc(-4% \/ 2 );margin-right: calc(-4% \/ 2 );\"><div class=\"fusion-layout-column fusion_builder_column fusion-builder-column-0 fusion_builder_column_1_1 1_1 fusion-flex-column\" style=\"--awb-padding-top:3%;--awb-padding-right:5%;--awb-padding-bottom:3%;--awb-padding-left:5%;--awb-overflow:hidden;--awb-bg-size:cover;--awb-border-color:#4db6ac;--awb-border-top:1px;--awb-border-right:1px;--awb-border-bottom:1px;--awb-border-left:1px;--awb-border-style:solid;--awb-border-radius:5px 5px 5px 5px;--awb-width-large:100%;--awb-margin-top-large:0px;--awb-spacing-right-large:1.92%;--awb-margin-bottom-large:0px;--awb-spacing-left-large:1.92%;--awb-width-medium:100%;--awb-spacing-right-medium:1.92%;--awb-spacing-left-medium:1.92%;--awb-width-small:100%;--awb-spacing-right-small:1.92%;--awb-spacing-left-small:1.92%;\"><div class=\"fusion-column-wrapper fusion-column-has-shadow fusion-flex-justify-content-flex-start fusion-content-layout-column\"><div class=\"fusion-text fusion-text-1 text-blog\"><h1 class=\"article-header--title\"><span class=\"goog-text-highlight\">Aprendizaje autom\u00e1tico para desarrolladores front-end con Tensorflow.js<\/span><\/h1>\n<p><span class=\"\">El aprendizaje autom\u00e1tico a menudo parece pertenecer al \u00e1mbito de los cient\u00edficos de datos y los desarrolladores de Python.\u00a0<\/span><span class=\"\">Sin embargo, en los \u00faltimos a\u00f1os, se han creado marcos de c\u00f3digo abierto para que sea m\u00e1s accesible en diferentes lenguajes de programaci\u00f3n, incluido JavaScript.\u00a0<\/span>En este art\u00edculo, utilizaremos Tensorflow.js para explorar las diferentes posibilidades de usar el aprendizaje autom\u00e1tico en el navegador a trav\u00e9s de algunos proyectos de ejemplo.<\/p>\n<h3>\u00bfQu\u00e9 es el aprendizaje autom\u00e1tico?<\/h3>\n<p>Antes de comenzar a sumergirnos en alg\u00fan c\u00f3digo, hablemos brevemente sobre qu\u00e9 es el aprendizaje autom\u00e1tico, as\u00ed como algunos conceptos b\u00e1sicos y terminolog\u00eda.<\/p>\n<h3>DEFINICI\u00d3N<\/h3>\n<p>Una definici\u00f3n com\u00fan es que las computadoras pueden aprender de los datos sin ser programados expl\u00edcitamente.<\/p>\n<p>Si lo comparamos con la programaci\u00f3n tradicional, significa que permitimos que las computadoras identifiquen patrones en los datos y generen predicciones sin que tengamos que decirle exactamente qu\u00e9 buscar.<\/p>\n<p>Tomemos el ejemplo de detecci\u00f3n de fraude.\u00a0No hay criterios establecidos para saber qu\u00e9 hace que una transacci\u00f3n sea fraudulenta o no;\u00a0Los fraudes se pueden ejecutar en cualquier pa\u00eds, en cualquier cuenta, dirigidos a cualquier cliente, en cualquier momento, etc.\u00a0Ser\u00eda pr\u00e1cticamente imposible rastrear todo esto manualmente.<\/p>\n<p>Sin embargo, utilizando datos previos sobre gastos fraudulentos reunidos a lo largo de los a\u00f1os, podemos entrenar un algoritmo de aprendizaje autom\u00e1tico para comprender los patrones en estos datos para generar un modelo que pueda recibir cualquier nueva transacci\u00f3n y predecir la probabilidad de fraude o no, sin dici\u00e9ndole exactamente qu\u00e9 buscar.<\/p>\n<h3>CONCEPTOS B\u00c1SICOS<\/h3>\n<p>Para comprender los siguientes ejemplos de c\u00f3digo, primero debemos cubrir algunos t\u00e9rminos comunes.<\/p>\n<h5>Modelo<\/h5>\n<p>Cuando entrena un algoritmo de aprendizaje autom\u00e1tico con un conjunto de datos, el modelo es el resultado de este proceso de entrenamiento.\u00a0Es un poco como una funci\u00f3n que toma datos nuevos como entrada y produce una predicci\u00f3n como salida.<\/p>\n<h5>Etiquetas y caracter\u00edsticas<\/h5>\n<p>Las etiquetas y las caracter\u00edsticas se relacionan con los datos que alimenta un algoritmo en el proceso de capacitaci\u00f3n.<\/p>\n<p>Una etiqueta representa c\u00f3mo clasificar\u00eda cada entrada en su conjunto de datos y c\u00f3mo la etiquetar\u00eda.\u00a0Por ejemplo, si nuestro conjunto de datos era un archivo CSV que describe diferentes animales, nuestras etiquetas podr\u00edan ser palabras como \u00abgato\u00bb, \u00abperro\u00bb o \u00abserpiente\u00bb (dependiendo de lo que represente cada animal).<\/p>\n<p>Las caracter\u00edsticas, por otro lado, son las caracter\u00edsticas de cada entrada en su conjunto de datos.\u00a0Para nuestro ejemplo de animales, podr\u00edan ser cosas como \u00abbigotes, maullidos\u00bb, \u00abjuguetones, ladridos\u00bb, \u00abreptiles, rampantes\u00bb, etc.<\/p>\n<p>Con esto, un algoritmo de aprendizaje autom\u00e1tico podr\u00e1 encontrar alguna correlaci\u00f3n entre las caracter\u00edsticas y su etiqueta que utilizar\u00e1 para futuras predicciones.<\/p>\n<h5>Redes neuronales<\/h5>\n<p>Las redes neuronales son un conjunto de algoritmos de aprendizaje autom\u00e1tico que intentan imitar la forma en que funciona el cerebro utilizando capas de neuronas artificiales.<\/p>\n<p><span class=\"\">Ahora que hemos definido algunos t\u00e9rminos com\u00fanmente utilizados en el aprendizaje autom\u00e1tico, hablemos de lo que se puede hacer usando JavaScript y el marco Tensorflow.js.<\/span><\/p>\n<h3>CARACTERISTICAS<\/h3>\n<p>Actualmente hay tres funciones disponibles:<\/p>\n<ol>\n<li>Usando un modelo pre-entrenado\u00a0,<\/li>\n<li>Transferencia de aprendizaje\u00a0,<\/li>\n<li>Definir, ejecutar y usar su propio modelo\u00a0.<\/li>\n<\/ol>\n<p>Comencemos con el m\u00e1s simple.<\/p>\n<h5 id=\"pre-trained-model\">1. Usando un modelo pre-entrenado<\/h5>\n<p>Dependiendo del problema que est\u00e9 tratando de resolver, puede haber un modelo ya capacitado con un conjunto de datos espec\u00edfico y para un prop\u00f3sito espec\u00edfico que puede aprovechar e importar en su c\u00f3digo.<\/p>\n<p>Por ejemplo, supongamos que estamos construyendo un sitio web para predecir si una imagen es la imagen de un gato.\u00a0Un modelo popular de clasificaci\u00f3n de im\u00e1genes se llama\u00a0<em>MobileNet<\/em>\u00a0y est\u00e1 disponible como modelo pre-entrenado con Tensorflow.js.<\/p>\n<p><span class=\"goog-text-highlight\">El c\u00f3digo para esto se ver\u00eda as\u00ed:<\/span><\/p>\n<div class=\"break-out\">\n<p><strong>&lt;html lang=\u00bben\u00bb&gt;<\/strong><br \/>\n<strong>&lt;head&gt;<\/strong><br \/>\n<strong>&lt;meta charset=\u00bbUTF-8&#8243;&gt;<\/strong><br \/>\n<strong>&lt;meta name=\u00bbviewport\u00bb content=\u00bbwidth=device-width, initial-scale=1.0&#8243;&gt;<\/strong><br \/>\n<strong>&lt;meta http-equiv=\u00bbX-UA-Compatible\u00bb content=\u00bbie=edge\u00bb&gt;<\/strong><br \/>\n<strong>&lt;title&gt;Cat detection&lt;\/title&gt;<\/strong><br \/>\n<strong>&lt;script src=\u00bbhttps:\/\/cdn.jsdelivr.net\/npm\/@tensorflow\/tfjs@1.0.1&#8243;&gt; &lt;\/script&gt;<\/strong><br \/>\n<strong>&lt;script src=\u00bbhttps:\/\/cdn.jsdelivr.net\/npm\/@tensorflow-models\/mobilenet@1.0.0&#8243;&gt; &lt;\/script&gt;<\/strong><br \/>\n<strong>&lt;\/head&gt;<\/strong><br \/>\n<strong>&lt;body&gt;<\/strong><br \/>\n<strong>&lt;img id=\u00bbimage\u00bb alt=\u00bbcat laying down\u00bb src=\u00bbcat.jpeg\u00bb\/&gt;<\/strong><\/p>\n<p><strong>&lt;script&gt;<\/strong><br \/>\n<strong>const img = document.getElementById(&#8216;image&#8217;);<\/strong><\/p>\n<p><strong>const predictImage = async () =&gt; {<\/strong><br \/>\n<strong>console.log(\u00abModel loading&#8230;\u00bb);<\/strong><br \/>\n<strong>const model = await mobilenet.load();<\/strong><br \/>\n<strong>console.log(\u00abModel is loaded!\u00bb)<\/strong><\/p>\n<p><strong>const predictions = await model.classify(img);<\/strong><br \/>\n<strong>console.log(&#8216;Predictions: &#8216;, predictions);<\/strong><br \/>\n<strong>}<\/strong><br \/>\n<strong>predictImage();<\/strong><br \/>\n<strong>&lt;\/script&gt;<\/strong><br \/>\n<strong>&lt;\/body&gt;<\/strong><br \/>\n<strong>&lt;\/html&gt;<\/strong><\/p>\n<pre class=\"code-toolbar\"><span style=\"font-family: Georgia, 'Times New Roman', 'Bitstream Charter', Times, serif;\">Comenzamos importando Tensorflow.js y el modelo MobileNet en la cabeza de nuestro HTML:<\/span><\/pre>\n<\/div>\n<div style=\"text-align: left;\">\n<p><strong>&lt;script src=\u00bbhttps:\/\/cdnjs.cloudflare.com\/ajax\/libs\/tensorflow\/1.0.1\/tf.js\u00bb&gt; &lt;\/script&gt;<\/strong><br \/>\n<strong>&lt;script src=\u00bbhttps:\/\/cdn.jsdelivr.net\/npm\/@tensorflow-models\/mobilenet@1.0.0&#8243;&gt; &lt;\/script&gt;<\/strong><\/p>\n<p><span class=\"goog-text-highlight\">Luego, dentro del cuerpo, tenemos un elemento de imagen que se utilizar\u00e1 para las predicciones:<\/span><\/p>\n<p><strong>&lt;img id=\u00bbimage\u00bb alt=\u00bbcat laying down\u00bb src=\u00bbcat.jpeg\u00bb\/&gt;<\/strong><\/p>\n<\/div>\n<p><span class=\"\">Y finalmente, dentro de la\u00a0<\/span><code>script<\/code><span class=\"\">etiqueta, tenemos el c\u00f3digo JavaScript que carga el modelo MobileNet pre-entrenado y clasifica la imagen encontrada en la\u00a0<\/span><code>image<\/code><span class=\"\">etiqueta.\u00a0<\/span>Devuelve un conjunto de 3 predicciones ordenadas por puntuaci\u00f3n de probabilidad (el primer elemento es la mejor predicci\u00f3n).<\/p>\n<p><strong>const predictImage = async () =&gt; {<\/strong><br \/>\n<strong>console.log(\u00abModel loading&#8230;\u00bb);<\/strong><br \/>\n<strong>const model = await mobilenet.load();<\/strong><br \/>\n<strong>console.log(\u00abModel is loaded!\u00bb)<\/strong><br \/>\n<strong>const predictions = await model.classify(img);<\/strong><br \/>\n<strong>console.log(&#8216;Predictions: &#8216;, predictions);<\/strong><br \/>\n<strong>}<\/strong><\/p>\n<p><strong>predictImage();<\/strong><\/p>\n<p>\u00a1Y eso es!\u00a0\u00a1Esta es la forma en que puede usar un modelo previamente entrenado en el navegador con Tensorflow.js!<\/p>\n<p>Algo importante que debe saber es que cargar un modelo previamente entrenado en el navegador puede llevar algo de tiempo (a veces hasta 10 segundos), por lo que probablemente desee precargar o adaptar su interfaz para que los usuarios no se vean afectados.<\/p>\n<p>Si prefiere usar Tensorflow.js como m\u00f3dulo NPM, puede hacerlo importando el m\u00f3dulo de esta manera:<\/p>\n<p><strong>import * as mobilenet from &#8216;@tensorflow-models\/mobilenet&#8217;;<\/strong><\/p>\n<div style=\"text-align: left;\">\n<div class=\"code-toolbar\">\n<p><span class=\"\">Ahora que hemos visto c\u00f3mo usar un modelo previamente entrenado, veamos la segunda caracter\u00edstica disponible: transferencia de aprendizaje.<\/span><\/p>\n<h5 id=\"transfer-learning\"><span class=\"\">2. Transferencia de aprendizaje<\/span><\/h5>\n<p>El aprendizaje por transferencia es la capacidad de combinar un modelo pre-entrenado con datos de entrenamiento personalizados.\u00a0Lo que esto significa es que puede aprovechar la funcionalidad de un modelo y agregar sus propias muestras sin tener que crear todo desde cero.<\/p>\n<p>Por ejemplo, un algoritmo ha sido entrenado con miles de im\u00e1genes para crear un modelo de clasificaci\u00f3n de im\u00e1genes, y en lugar de crear el suyo, el aprendizaje de transferencia le permite combinar nuevas muestras de im\u00e1genes personalizadas con el modelo pre-entrenado para crear un nuevo clasificador de im\u00e1genes.\u00a0Esta caracter\u00edstica hace que sea realmente r\u00e1pido y f\u00e1cil tener un clasificador m\u00e1s personalizado.<\/p>\n<p>Para proporcionar un ejemplo de c\u00f3mo se ver\u00eda esto en el c\u00f3digo, reutilicemos nuestro ejemplo anterior y modif\u00edquelo para que podamos clasificar nuevas im\u00e1genes.<\/p>\n<p>Todav\u00eda tenemos que comenzar importando Tensorflow.js y MobileNet, pero esta vez tambi\u00e9n necesitamos agregar un clasificador KNN (vecino k-m\u00e1s cercano):<\/p>\n<\/div>\n<p><strong>&lt;!&#8211; Load TensorFlow.js &#8211;&gt;<\/strong><br \/>\n<strong>&lt;script src=\u00bbhttps:\/\/cdn.jsdelivr.net\/npm\/@tensorflow\/tfjs\u00bb&gt;&lt;\/script&gt;<\/strong><br \/>\n<strong>&lt;!&#8211; Load MobileNet &#8211;&gt;<\/strong><br \/>\n<strong>&lt;script src=\u00bbhttps:\/\/cdn.jsdelivr.net\/npm\/@tensorflow-models\/mobilenet\u00bb&gt;&lt;\/script&gt;<\/strong><br \/>\n<strong>&lt;!&#8211; Load KNN Classifier &#8211;&gt;<\/strong><br \/>\n<strong>&lt;script src=\u00bbhttps:\/\/cdn.jsdelivr.net\/npm\/@tensorflow-models\/knn-classifier\u00bb&gt;&lt;\/script&gt;<\/strong><\/p>\n<p><span class=\"\">La raz\u00f3n por la que necesitamos un clasificador es porque (en lugar de usar solo el m\u00f3dulo MobileNet) estamos agregando muestras personalizadas que nunca antes hab\u00eda visto, por lo que el clasificador KNN nos permitir\u00e1 combinar todo y ejecutar predicciones sobre los datos combinados.<\/span><\/p>\n<\/div>\n<p>Luego, podemos reemplazar la imagen del gato con una\u00a0<code>video<\/code>etiqueta para usar im\u00e1genes de la alimentaci\u00f3n de la c\u00e1mara.<\/p>\n<p><strong>&lt;video autoplay id=\u00bbwebcam\u00bb width=\u00bb227&#8243; height=\u00bb227&#8243;&gt;&lt;\/video&gt;<\/strong><\/p>\n<p>Finalmente, necesitaremos agregar algunos botones en la p\u00e1gina que usaremos como etiquetas para grabar algunas muestras de video y comenzar las predicciones.<\/p>\n<p><strong>&lt;section&gt;<\/strong><br \/>\n<strong>&lt;button class=\u00bbbutton\u00bb&gt;Left&lt;\/button&gt;<\/strong><\/p>\n<p><strong>&lt;button class=\u00bbbutton\u00bb&gt;Right&lt;\/button&gt;<\/strong><\/p>\n<p><strong>&lt;button class=\u00bbtest-predictions\u00bb&gt;Test&lt;\/button&gt;<\/strong><br \/>\n<strong>&lt;\/section&gt;<\/strong><\/p>\n<p>Ahora, pasemos al archivo JavaScript donde comenzaremos configurando algunas variables importantes:<\/p>\n<p><strong>\/\/ Number of classes to classify<\/strong><br \/>\n<strong>const NUM_CLASSES = 2;<\/strong><br \/>\n<strong>\/\/ Labels for our classes<\/strong><br \/>\n<strong>const classes = [\u00abLeft\u00bb, \u00abRight\u00bb];<\/strong><br \/>\n<strong>\/\/ Webcam Image size. Must be 227.<\/strong><br \/>\n<strong>const IMAGE_SIZE = 227;<\/strong><br \/>\n<strong>\/\/ K value for KNN<\/strong><br \/>\n<strong>const TOPK = 10;<\/strong><\/p>\n<p><strong>const video = document.getElementById(\u00abwebcam\u00bb);<\/strong><\/p>\n<p><span class=\"\">En este ejemplo en particular, queremos poder clasificar la entrada de la c\u00e1mara web entre nuestra cabeza inclinada hacia la izquierda o hacia la derecha, por lo que necesitamos dos clases etiquetadas\u00a0<\/span><code>left<\/code><span class=\"\">y\u00a0<\/span><code>right<\/code><span class=\"\">.<\/span><\/p>\n<p class=\"c-pre-sidenote--left\">El tama\u00f1o de la imagen establecido en 227 es el tama\u00f1o del elemento de video en p\u00edxeles.\u00a0Seg\u00fan 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\u00f3 el modelo MobileNet.\u00a0Para poder clasificar nuestros nuevos datos, este \u00faltimo debe ajustarse al mismo formato.<\/p>\n<div style=\"text-align: left;\">\n<div class=\"code-toolbar\">\n<p>Luego, establecemos el valor de K en 10. El valor de K en el algoritmo KNN es importante porque representa el n\u00famero de instancias que tenemos en cuenta al determinar la clase de nuestra nueva entrada.<\/p>\n<p>En este caso, el valor de 10 significa que, al predecir la etiqueta para algunos datos nuevos, miraremos a los 10 vecinos m\u00e1s cercanos a partir de los datos de entrenamiento para determinar c\u00f3mo clasificar nuestra nueva entrada.<\/p>\n<p>Finalmente, estamos obteniendo el\u00a0<code>video<\/code>elemento.\u00a0Para la l\u00f3gica, comencemos cargando el modelo y el clasificador:<\/p>\n<p><strong>async load() {<\/strong><br \/>\n<strong>const knn = knnClassifier.create();<\/strong><br \/>\n<strong>const mobilenetModule = await mobilenet.load();<\/strong><br \/>\n<strong>console.log(\u00abmodel loaded\u00bb);<\/strong><br \/>\n<strong>}<\/strong><\/p>\n<p><span class=\"goog-text-highlight\">Luego, accedamos al video:<\/span><\/p>\n<div class=\"code-toolbar\"><strong>navigator.mediaDevices<\/strong><br \/>\n<strong>.getUserMedia({ video: true, audio: false })<\/strong><br \/>\n<strong>.then(stream =&gt; {<\/strong><br \/>\n<strong>video.srcObject = stream;<\/strong><br \/>\n<strong>video.width = IMAGE_SIZE;<\/strong><br \/>\n<strong>video.height = IMAGE_SIZE;<\/strong><br \/>\n<strong>});<\/strong><\/div>\n<div><\/div>\n<\/div>\n<\/div>\n<div>Despu\u00e9s de eso, configuremos algunos eventos de bot\u00f3n para registrar nuestros datos de muestra:<\/div>\n<div><\/div>\n<div>\n<p><strong>setupButtonEvents() {<\/strong><br \/>\n<strong>for (let i = 0; i &lt; NUM_CLASSES; i++) {<\/strong><br \/>\n<strong>let button = document.getElementsByClassName(\u00abbutton\u00bb)[i];<\/strong><\/p>\n<p><strong>button.onmousedown = () =&gt; {<\/strong><br \/>\n<strong>this.training = i;<\/strong><br \/>\n<strong>this.recordSamples = true;<\/strong><br \/>\n<strong>};<\/strong><br \/>\n<strong>button.onmouseup = () =&gt; (this.training = -1);<\/strong><br \/>\n<strong>}<\/strong><br \/>\n<strong>}<\/strong><\/p>\n<\/div>\n<div>\n<p><span class=\"goog-text-highlight\">Escribamos nuestra funci\u00f3n que tomar\u00e1 las muestras de im\u00e1genes de la c\u00e1mara web, las formatear\u00e1 y las combinar\u00e1 con el m\u00f3dulo MobileNet:<\/span><\/p>\n<div class=\"break-out\">\n<div class=\"code-toolbar\">\n<p><strong>\/\/ Get image data from video element<\/strong><br \/>\n<strong>const image = tf.browser.fromPixels(video);<\/strong><\/p>\n<p><strong>let logits;<\/strong><br \/>\n<strong>\/\/ &#8216;conv_preds&#8217; is the logits activation of MobileNet.<\/strong><br \/>\n<strong>const infer = () =&gt; this.mobilenetModule.infer(image, \u00abconv_preds\u00bb);<\/strong><\/p>\n<p><strong>\/\/ Train class if one of the buttons is held down<\/strong><br \/>\n<strong>if (this.training != -1) {<\/strong><br \/>\n<strong>logits = infer();<\/strong><\/p>\n<p><strong>\/\/ Add current image to classifier<\/strong><br \/>\n<strong>this.knn.addExample(logits, this.training);<\/strong><br \/>\n<strong>}<\/strong><\/p>\n<\/div>\n<p>Y finalmente, una vez que reunimos algunas im\u00e1genes de la c\u00e1mara web, podemos probar nuestras predicciones con el siguiente c\u00f3digo:<\/p>\n<\/div>\n<p><strong>logits = infer();<\/strong><br \/>\n<strong>const res = await this.knn.predictClass(logits, TOPK);<\/strong><br \/>\n<strong>const prediction = classes[res.classIndex];<\/strong><\/p>\n<p><span class=\"goog-text-highlight\">Y finalmente, puede deshacerse de los datos de la c\u00e1mara web ya que ya no los necesitamos:<\/span><\/p>\n<div class=\"code-toolbar\">\n<div class=\"code-toolbar\"><strong>\/\/ Dispose image when done<\/strong><br \/>\n<strong>image.dispose();<\/strong><br \/>\n<strong>if (logits != null) {<\/strong><br \/>\n<strong>logits.dispose();<\/strong><br \/>\n<strong>}<\/strong><\/div>\n<\/div>\n<\/div>\n<div><\/div>\n<div>\n<p><span class=\"\">Una vez m\u00e1s, si desea ver el c\u00f3digo completo, puede encontrarlo en\u00a0<\/span><span class=\"\">CodeSandbox<\/span><span class=\"\">\u00a0mencionado anteriormente.<\/span><\/p>\n<h5 id=\"defining-running-using-own-model\">3. Entrenando a una modelo en el navegador<\/h5>\n<p>La \u00faltima caracter\u00edstica es definir, entrenar y ejecutar un modelo completamente en el navegador.\u00a0Para ilustrar esto, vamos a construir el ejemplo cl\u00e1sico de reconocer Iris.<\/p>\n<p>Para esto, crearemos una red neuronal que pueda clasificar los Iris en tres categor\u00edas: Setosa, Virginica y Versicolor, en base a un conjunto de datos de c\u00f3digo abierto.<\/p>\n<\/div>\n<p>El n\u00facleo de cada proyecto de aprendizaje autom\u00e1tico es un conjunto de datos.\u00a0Uno de los primeros pasos que debemos emprender es dividir este conjunto de datos en un conjunto de entrenamiento y un conjunto de prueba.<\/p>\n<p>La raz\u00f3n de esto es que vamos a usar nuestro conjunto de entrenamiento para entrenar nuestro algoritmo y nuestro conjunto de prueba para verificar la precisi\u00f3n de nuestras predicciones, para validar si nuestro modelo est\u00e1 listo para ser usado o necesita ser ajustado.<\/p>\n<p><strong>Nota<\/strong>\u00a0:\u00a0<em>Para hacerlo m\u00e1s f\u00e1cil, ya divid\u00ed el conjunto de entrenamiento y el conjunto de prueba en dos archivos JSON que puede encontrar en\u00a0CodeSanbox\u00a0.<\/em><\/p>\n<p>El conjunto de entrenamiento contiene 130 elementos y el conjunto de prueba 14. Si observa c\u00f3mo se ven estos datos, ver\u00e1 algo como esto:<\/p>\n<p><strong>{<\/strong><br \/>\n<strong>\u00absepal_length\u00bb: 5.1,<\/strong><br \/>\n<strong>\u00absepal_width\u00bb: 3.5,<\/strong><br \/>\n<strong>\u00abpetal_length\u00bb: 1.4,<\/strong><br \/>\n<strong>\u00abpetal_width\u00bb: 0.2,<\/strong><br \/>\n<strong>\u00abspecies\u00bb: \u00absetosa\u00bb<\/strong><br \/>\n<strong>}<\/strong><\/p>\n<p>Lo que podemos ver son cuatro caracter\u00edsticas diferentes para la longitud y el ancho del s\u00e9palo y el p\u00e9talo, as\u00ed como una etiqueta para la especie.<\/p>\n<p>Para poder usar esto con Tensorflow.js, necesitamos dar forma a estos datos en un formato que el marco entienda, en este caso, para los datos de entrenamiento, ser\u00e1\u00a0<code>[130, 4]<\/code>para 130 muestras con cuatro caracter\u00edsticas por iris.<\/p>\n<p><strong>import * as trainingSet from \u00abtraining.json\u00bb;<\/strong><br \/>\n<strong>import * as testSet from \u00abtesting.json\u00bb;<\/strong><\/p>\n<p><strong>const trainingData = tf.tensor2d(<\/strong><br \/>\n<strong>trainingSet.map(item =&gt; [<\/strong><br \/>\n<strong>item.sepal_length,<\/strong><br \/>\n<strong>item.sepal_width,<\/strong><br \/>\n<strong>item.petal_length,<\/strong><br \/>\n<strong>item.petal_width<\/strong><br \/>\n<strong>]),<\/strong><br \/>\n<strong>[130, 4]<\/strong><br \/>\n<strong>);<\/strong><\/p>\n<p><strong>const testData = tf.tensor2d(<\/strong><br \/>\n<strong>testSet.map(item =&gt; [<\/strong><br \/>\n<strong>item.sepal_length,<\/strong><br \/>\n<strong>item.sepal_width,<\/strong><br \/>\n<strong>item.petal_length,<\/strong><br \/>\n<strong>item.petal_width<\/strong><br \/>\n<strong>]),<\/strong><br \/>\n<strong>[14, 4]<\/strong><br \/>\n<strong>);<\/strong><\/p>\n<p><span class=\"goog-text-highlight\">A continuaci\u00f3n, necesitamos dar forma a nuestros datos de salida tambi\u00e9n:<\/span><\/p>\n<div class=\"code-toolbar\">\n<p><strong>const output = tf.tensor2d(trainingSet.map(item =&gt; [<\/strong><br \/>\n<strong>item.species === &#8216;setosa&#8217; ? 1 : 0,<\/strong><br \/>\n<strong>item.species === &#8216;virginica&#8217; ? 1 : 0,<\/strong><br \/>\n<strong>item.species === &#8216;versicolor&#8217; ? 1 : 0<\/strong><\/p>\n<p><strong>]), [130,3])<\/strong><\/p>\n<\/div>\n<p><span class=\"goog-text-highlight\">Luego, una vez que nuestros datos est\u00e9n listos, podemos pasar a crear el modelo:<\/span><\/p>\n<div class=\"code-toolbar\">\n<p><strong>const model = tf.sequential();<\/strong><\/p>\n<p><strong>model.add(tf.layers.dense(<\/strong><br \/>\n<strong>{<\/strong><br \/>\n<strong>inputShape: 4,<\/strong><br \/>\n<strong>activation: &#8216;sigmoid&#8217;,<\/strong><br \/>\n<strong>units: 10<\/strong><br \/>\n<strong>}<\/strong><br \/>\n<strong>));<\/strong><\/p>\n<p><strong>model.add(tf.layers.dense(<\/strong><br \/>\n<strong>{<\/strong><br \/>\n<strong>inputShape: 10,<\/strong><br \/>\n<strong>units: 3,<\/strong><br \/>\n<strong>activation: &#8216;softmax&#8217;<\/strong><br \/>\n<strong>}<\/strong><br \/>\n<strong>));<\/strong><\/p>\n<\/div>\n<p>En el ejemplo de c\u00f3digo anterior, comenzamos instanciando un modelo secuencial, agregamos una capa de entrada y salida.<\/p>\n<p>Los par\u00e1metros que puede ver utilizados dentro (\u00a0<code>inputShape<\/code>,\u00a0<code>activation<\/code>y\u00a0<code>units<\/code>) est\u00e1n fuera del alcance de esta publicaci\u00f3n, ya que pueden variar seg\u00fan el modelo que est\u00e9 creando, el tipo de datos utilizados, etc.<\/p>\n<p>Una vez que nuestro modelo est\u00e9 listo, podemos entrenarlo con nuestros datos:<\/p>\n<p><strong>async function train_data(){<\/strong><br \/>\n<strong>for(let i=0;i&lt;15;i++){<\/strong><br \/>\n<strong>const res = await model.fit(trainingData, outputData,{epochs: 40});<\/strong><br \/>\n<strong>}<\/strong><br \/>\n<strong>}<\/strong><\/p>\n<p><strong>async function main() {<\/strong><br \/>\n<strong>await train_data();<\/strong><br \/>\n<strong>model.predict(testSet).print();<\/strong><br \/>\n<strong>}<\/strong><\/p>\n<p>Si esto funciona bien, puede comenzar a reemplazar los datos de prueba con entradas de usuario personalizadas.<\/p>\n<p>Una vez que llamemos a nuestra funci\u00f3n principal, el resultado de la predicci\u00f3n se ver\u00e1 como una de estas tres opciones:<\/p>\n<p><strong>[1,0,0] \/\/ Setosa<\/strong><br \/>\n<strong>[0,1,0] \/\/ Virginica<\/strong><br \/>\n<strong>[0,0,1] \/\/ Versicolor<\/strong><\/p>\n<p>La predicci\u00f3n devuelve una matriz de tres n\u00fameros que representan la probabilidad de que los datos pertenezcan a una de las tres clases.\u00a0El n\u00famero m\u00e1s cercano a 1 es la predicci\u00f3n m\u00e1s alta.<\/p>\n<p>Por ejemplo, si el resultado de la clasificaci\u00f3n es\u00a0<code>[0.0002, 0.9494, 0.0503]<\/code>, el segundo elemento de la matriz es el m\u00e1s alto, por lo que el modelo predijo que la nueva entrada probablemente sea Virginica.<\/p>\n<p>\u00a1Y eso es todo para una red neuronal simple en Tensorflow.js!<\/p>\n<p>Solo hablamos de un peque\u00f1o conjunto de datos de Iris, pero si desea pasar a conjuntos de datos m\u00e1s grandes o trabajar con im\u00e1genes, los pasos ser\u00e1n los mismos:<\/p>\n<ul>\n<li>Recolectando los datos;<\/li>\n<li>Divisi\u00f3n entre entrenamiento y conjunto de pruebas;<\/li>\n<li>Reformatear los datos para que Tensorflow.js pueda entenderlos;<\/li>\n<li>Escogiendo tu algoritmo;<\/li>\n<li>Ajuste de los datos;<\/li>\n<li>Predecir<\/li>\n<\/ul>\n<p>Si desea guardar el modelo creado para poder cargarlo en otra aplicaci\u00f3n y predecir nuevos datos, puede hacerlo con la siguiente l\u00ednea:<\/p>\n<p><strong>await model.save(&#8216;file:\/\/\/path\/to\/my-model&#8217;); \/\/ in Node.js<\/strong><\/p>\n<h4>L\u00cdMITES<\/h4>\n<p>\u00a1Eso es!\u00a0\u00a1Acabamos de cubrir las tres caracter\u00edsticas principales disponibles actualmente con Tensorflow.js!<\/p>\n<p>Antes de terminar, creo que es importante mencionar brevemente algunos de los l\u00edmites del uso del aprendizaje autom\u00e1tico en la interfaz.<\/p>\n<h5>1. Rendimiento<\/h5>\n<p>Importar un modelo previamente entrenado desde una fuente externa puede tener un impacto en el rendimiento de su aplicaci\u00f3n.\u00a0Algunos modelos de detecci\u00f3n de objetos, por ejemplo, tienen m\u00e1s de 10 MB, lo que ralentizar\u00e1 significativamente su sitio web.\u00a0Aseg\u00farese de pensar en su experiencia de usuario y optimice la carga de sus activos para mejorar su rendimiento percibido.<\/p>\n<h5>2. Calidad de los datos de entrada<\/h5>\n<p>Si crea un modelo desde cero, tendr\u00e1 que recopilar sus propios datos o buscar alg\u00fan conjunto de datos de c\u00f3digo abierto.<\/p>\n<p>Antes de realizar cualquier tipo de procesamiento de datos o probar diferentes algoritmos, aseg\u00farese de verificar la calidad de sus datos de entrada.\u00a0Por ejemplo, si est\u00e1 tratando de construir un modelo de an\u00e1lisis de sentimientos para reconocer las emociones en fragmentos de texto, aseg\u00farese de que los datos que est\u00e1 utilizando para entrenar su modelo sean precisos y diversos.\u00a0Si la calidad de los datos utilizados es baja, el resultado de su entrenamiento ser\u00e1 in\u00fatil.<\/p>\n<h5>3. Responsabilidad<\/h5>\n<p>El uso de un modelo pre-entrenado de c\u00f3digo abierto puede ser muy r\u00e1pido y sin esfuerzo.\u00a0Sin embargo, tambi\u00e9n significa que no siempre sabe c\u00f3mo se gener\u00f3, de qu\u00e9 estaba hecho el conjunto de datos o incluso qu\u00e9 algoritmo se utiliz\u00f3.\u00a0Algunos modelos se llaman \u00abcajas negras\u00bb, lo que significa que realmente no se sabe c\u00f3mo predijeron un determinado resultado.<\/p>\n<p>Dependiendo de lo que intente construir, esto puede ser un problema.\u00a0Por ejemplo, si est\u00e1 utilizando un modelo de aprendizaje autom\u00e1tico para ayudar a detectar la probabilidad de que alguien tenga c\u00e1ncer en base a im\u00e1genes escaneadas, en caso de falso negativo (el modelo predijo que una persona no ten\u00eda c\u00e1ncer cuando realmente lo ten\u00eda), hay podr\u00eda ser una responsabilidad legal real y tendr\u00eda que ser capaz de explicar por qu\u00e9 el modelo hizo una cierta predicci\u00f3n.<\/p>\n<h3>Resumen<\/h3>\n<p>En conclusi\u00f3n, usar JavaScript y marcos como Tensorflow.js es una excelente manera de comenzar y aprender m\u00e1s sobre el aprendizaje autom\u00e1tico.\u00a0<span class=\"\">A pesar de que una aplicaci\u00f3n lista para producci\u00f3n probablemente deber\u00eda estar construida en un lenguaje como Python, JavaScript hace que sea realmente accesible para que los desarrolladores jueguen con las diferentes caracter\u00edsticas y comprendan mejor los conceptos fundamentales antes de continuar e invertir tiempo en aprender otro idioma.<\/span><\/p>\n<p>En este tutorial, solo hemos cubierto lo que era posible usando Tensorflow.js, sin embargo, el ecosistema de otras bibliotecas y herramientas est\u00e1 creciendo.\u00a0Marcos m\u00e1s espec\u00edficos tambi\u00e9n est\u00e1n disponibles, lo que permite explorar el uso de la m\u00e1quina de aprendizaje con otros \u00e1mbitos como la m\u00fasica con\u00a0Magenta.js\u00a0, o la predicci\u00f3n de la navegaci\u00f3n del usuario en un sitio web utilizando\u00a0guess.js\u00a0!<\/p>\n<p>A medida que las herramientas se vuelven m\u00e1s eficaces, es probable que las posibilidades de crear aplicaciones habilitadas para el aprendizaje autom\u00e1tico en JavaScript sean cada vez m\u00e1s emocionantes, y ahora es un buen momento para aprender m\u00e1s sobre ello, ya que la comunidad est\u00e1 haciendo un esfuerzo para hacerlo accesible.<\/p>\n<\/div><\/div><\/div><\/div><\/div>\n","protected":false},"excerpt":{"rendered":"","protected":false},"author":9,"featured_media":4078,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"content-type":"","footnotes":""},"categories":[32],"tags":[],"class_list":["post-4069","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-blog"],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v21.7 (Yoast SEO v27.6) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>Aprendizaje autom\u00e1tico para desarrolladores front-end con Tensorflow.js - TCIT<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.tcit.cl\/ingles\/desarrolladores-front-end-tensorflowjs\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Aprendizaje autom\u00e1tico para desarrolladores front-end con Tensorflow.js\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.tcit.cl\/ingles\/desarrolladores-front-end-tensorflowjs\/\" \/>\n<meta property=\"og:site_name\" content=\"TCIT\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/web.facebook.com\/tcitcloudsolutions\/\" \/>\n<meta property=\"article:published_time\" content=\"2019-11-22T11:46:07+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-04-26T19:30:59+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.tcit.cl\/wp-content\/uploads\/2019\/11\/17-SPAS.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1100\" \/>\n\t<meta property=\"og:image:height\" content=\"750\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Gonzalo Burgos\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Gonzalo Burgos\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"20 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.tcit.cl\\\/desarrolladores-front-end-tensorflowjs\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.tcit.cl\\\/desarrolladores-front-end-tensorflowjs\\\/\"},\"author\":{\"name\":\"Gonzalo Burgos\",\"@id\":\"https:\\\/\\\/www.tcit.cl\\\/#\\\/schema\\\/person\\\/3feac3eca66491ec20151f9127ed7ea1\"},\"headline\":\"Aprendizaje autom\u00e1tico para desarrolladores front-end con Tensorflow.js\",\"datePublished\":\"2019-11-22T11:46:07+00:00\",\"dateModified\":\"2023-04-26T19:30:59+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.tcit.cl\\\/desarrolladores-front-end-tensorflowjs\\\/\"},\"wordCount\":3660,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\\\/\\\/www.tcit.cl\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/www.tcit.cl\\\/desarrolladores-front-end-tensorflowjs\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.tcit.cl\\\/wp-content\\\/uploads\\\/2019\\\/11\\\/17-SPAS.jpg\",\"articleSection\":[\"Blog\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/www.tcit.cl\\\/desarrolladores-front-end-tensorflowjs\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.tcit.cl\\\/desarrolladores-front-end-tensorflowjs\\\/\",\"url\":\"https:\\\/\\\/www.tcit.cl\\\/desarrolladores-front-end-tensorflowjs\\\/\",\"name\":\"Aprendizaje autom\u00e1tico para desarrolladores front-end con Tensorflow.js - TCIT\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.tcit.cl\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.tcit.cl\\\/desarrolladores-front-end-tensorflowjs\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.tcit.cl\\\/desarrolladores-front-end-tensorflowjs\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.tcit.cl\\\/wp-content\\\/uploads\\\/2019\\\/11\\\/17-SPAS.jpg\",\"datePublished\":\"2019-11-22T11:46:07+00:00\",\"dateModified\":\"2023-04-26T19:30:59+00:00\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.tcit.cl\\\/desarrolladores-front-end-tensorflowjs\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.tcit.cl\\\/desarrolladores-front-end-tensorflowjs\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.tcit.cl\\\/desarrolladores-front-end-tensorflowjs\\\/#primaryimage\",\"url\":\"https:\\\/\\\/www.tcit.cl\\\/wp-content\\\/uploads\\\/2019\\\/11\\\/17-SPAS.jpg\",\"contentUrl\":\"https:\\\/\\\/www.tcit.cl\\\/wp-content\\\/uploads\\\/2019\\\/11\\\/17-SPAS.jpg\",\"width\":1100,\"height\":750},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.tcit.cl\\\/desarrolladores-front-end-tensorflowjs\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Portada\",\"item\":\"https:\\\/\\\/www.tcit.cl\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Aprendizaje autom\u00e1tico para desarrolladores front-end con Tensorflow.js\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.tcit.cl\\\/#website\",\"url\":\"https:\\\/\\\/www.tcit.cl\\\/\",\"name\":\"https:\\\/\\\/www.tcit.cl\\\/\",\"description\":\"AI Solutions\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.tcit.cl\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.tcit.cl\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/www.tcit.cl\\\/#organization\",\"name\":\"TCIT EIRL\",\"alternateName\":\"TCIT AI Solutions\",\"url\":\"https:\\\/\\\/www.tcit.cl\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.tcit.cl\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/www.tcit.cl\\\/wp-content\\\/uploads\\\/2025\\\/09\\\/cropped-TCIT_isotipo-color.png\",\"contentUrl\":\"https:\\\/\\\/www.tcit.cl\\\/wp-content\\\/uploads\\\/2025\\\/09\\\/cropped-TCIT_isotipo-color.png\",\"width\":512,\"height\":512,\"caption\":\"TCIT EIRL\"},\"image\":{\"@id\":\"https:\\\/\\\/www.tcit.cl\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/web.facebook.com\\\/tcitcloudsolutions\\\/\",\"https:\\\/\\\/www.instagram.com\\\/tcitcloudsolutions\\\/\",\"https:\\\/\\\/www.linkedin.com\\\/company\\\/tcit-cloud-solutions\\\/\"]},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.tcit.cl\\\/#\\\/schema\\\/person\\\/3feac3eca66491ec20151f9127ed7ea1\",\"name\":\"Gonzalo Burgos\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/e2d4d08554b58b6bdc8ddfc801c6b583fb9207e71f73b8a119ced6a71fc814d0?s=96&d=mm&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/e2d4d08554b58b6bdc8ddfc801c6b583fb9207e71f73b8a119ced6a71fc814d0?s=96&d=mm&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/e2d4d08554b58b6bdc8ddfc801c6b583fb9207e71f73b8a119ced6a71fc814d0?s=96&d=mm&r=g\",\"caption\":\"Gonzalo Burgos\"},\"url\":\"https:\\\/\\\/www.tcit.cl\\\/ingles\\\/author\\\/eduardo-albornoz-2\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Aprendizaje autom\u00e1tico para desarrolladores front-end con Tensorflow.js - TCIT","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.tcit.cl\/ingles\/desarrolladores-front-end-tensorflowjs\/","og_locale":"en_US","og_type":"article","og_title":"Aprendizaje autom\u00e1tico para desarrolladores front-end con Tensorflow.js","og_url":"https:\/\/www.tcit.cl\/ingles\/desarrolladores-front-end-tensorflowjs\/","og_site_name":"TCIT","article_publisher":"https:\/\/web.facebook.com\/tcitcloudsolutions\/","article_published_time":"2019-11-22T11:46:07+00:00","article_modified_time":"2023-04-26T19:30:59+00:00","og_image":[{"width":1100,"height":750,"url":"https:\/\/www.tcit.cl\/wp-content\/uploads\/2019\/11\/17-SPAS.jpg","type":"image\/jpeg"}],"author":"Gonzalo Burgos","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Gonzalo Burgos","Est. reading time":"20 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.tcit.cl\/desarrolladores-front-end-tensorflowjs\/#article","isPartOf":{"@id":"https:\/\/www.tcit.cl\/desarrolladores-front-end-tensorflowjs\/"},"author":{"name":"Gonzalo Burgos","@id":"https:\/\/www.tcit.cl\/#\/schema\/person\/3feac3eca66491ec20151f9127ed7ea1"},"headline":"Aprendizaje autom\u00e1tico para desarrolladores front-end con Tensorflow.js","datePublished":"2019-11-22T11:46:07+00:00","dateModified":"2023-04-26T19:30:59+00:00","mainEntityOfPage":{"@id":"https:\/\/www.tcit.cl\/desarrolladores-front-end-tensorflowjs\/"},"wordCount":3660,"commentCount":0,"publisher":{"@id":"https:\/\/www.tcit.cl\/#organization"},"image":{"@id":"https:\/\/www.tcit.cl\/desarrolladores-front-end-tensorflowjs\/#primaryimage"},"thumbnailUrl":"https:\/\/www.tcit.cl\/wp-content\/uploads\/2019\/11\/17-SPAS.jpg","articleSection":["Blog"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.tcit.cl\/desarrolladores-front-end-tensorflowjs\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.tcit.cl\/desarrolladores-front-end-tensorflowjs\/","url":"https:\/\/www.tcit.cl\/desarrolladores-front-end-tensorflowjs\/","name":"Aprendizaje autom\u00e1tico para desarrolladores front-end con Tensorflow.js - TCIT","isPartOf":{"@id":"https:\/\/www.tcit.cl\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.tcit.cl\/desarrolladores-front-end-tensorflowjs\/#primaryimage"},"image":{"@id":"https:\/\/www.tcit.cl\/desarrolladores-front-end-tensorflowjs\/#primaryimage"},"thumbnailUrl":"https:\/\/www.tcit.cl\/wp-content\/uploads\/2019\/11\/17-SPAS.jpg","datePublished":"2019-11-22T11:46:07+00:00","dateModified":"2023-04-26T19:30:59+00:00","breadcrumb":{"@id":"https:\/\/www.tcit.cl\/desarrolladores-front-end-tensorflowjs\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.tcit.cl\/desarrolladores-front-end-tensorflowjs\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.tcit.cl\/desarrolladores-front-end-tensorflowjs\/#primaryimage","url":"https:\/\/www.tcit.cl\/wp-content\/uploads\/2019\/11\/17-SPAS.jpg","contentUrl":"https:\/\/www.tcit.cl\/wp-content\/uploads\/2019\/11\/17-SPAS.jpg","width":1100,"height":750},{"@type":"BreadcrumbList","@id":"https:\/\/www.tcit.cl\/desarrolladores-front-end-tensorflowjs\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Portada","item":"https:\/\/www.tcit.cl\/"},{"@type":"ListItem","position":2,"name":"Aprendizaje autom\u00e1tico para desarrolladores front-end con Tensorflow.js"}]},{"@type":"WebSite","@id":"https:\/\/www.tcit.cl\/#website","url":"https:\/\/www.tcit.cl\/","name":"https:\/\/www.tcit.cl\/","description":"AI Solutions","publisher":{"@id":"https:\/\/www.tcit.cl\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.tcit.cl\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.tcit.cl\/#organization","name":"TCIT EIRL","alternateName":"TCIT AI Solutions","url":"https:\/\/www.tcit.cl\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.tcit.cl\/#\/schema\/logo\/image\/","url":"https:\/\/www.tcit.cl\/wp-content\/uploads\/2025\/09\/cropped-TCIT_isotipo-color.png","contentUrl":"https:\/\/www.tcit.cl\/wp-content\/uploads\/2025\/09\/cropped-TCIT_isotipo-color.png","width":512,"height":512,"caption":"TCIT EIRL"},"image":{"@id":"https:\/\/www.tcit.cl\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/web.facebook.com\/tcitcloudsolutions\/","https:\/\/www.instagram.com\/tcitcloudsolutions\/","https:\/\/www.linkedin.com\/company\/tcit-cloud-solutions\/"]},{"@type":"Person","@id":"https:\/\/www.tcit.cl\/#\/schema\/person\/3feac3eca66491ec20151f9127ed7ea1","name":"Gonzalo Burgos","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/secure.gravatar.com\/avatar\/e2d4d08554b58b6bdc8ddfc801c6b583fb9207e71f73b8a119ced6a71fc814d0?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/e2d4d08554b58b6bdc8ddfc801c6b583fb9207e71f73b8a119ced6a71fc814d0?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/e2d4d08554b58b6bdc8ddfc801c6b583fb9207e71f73b8a119ced6a71fc814d0?s=96&d=mm&r=g","caption":"Gonzalo Burgos"},"url":"https:\/\/www.tcit.cl\/ingles\/author\/eduardo-albornoz-2\/"}]}},"_links":{"self":[{"href":"https:\/\/www.tcit.cl\/ingles\/wp-json\/wp\/v2\/posts\/4069","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.tcit.cl\/ingles\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.tcit.cl\/ingles\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.tcit.cl\/ingles\/wp-json\/wp\/v2\/users\/9"}],"replies":[{"embeddable":true,"href":"https:\/\/www.tcit.cl\/ingles\/wp-json\/wp\/v2\/comments?post=4069"}],"version-history":[{"count":0,"href":"https:\/\/www.tcit.cl\/ingles\/wp-json\/wp\/v2\/posts\/4069\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.tcit.cl\/ingles\/wp-json\/wp\/v2\/media\/4078"}],"wp:attachment":[{"href":"https:\/\/www.tcit.cl\/ingles\/wp-json\/wp\/v2\/media?parent=4069"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.tcit.cl\/ingles\/wp-json\/wp\/v2\/categories?post=4069"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.tcit.cl\/ingles\/wp-json\/wp\/v2\/tags?post=4069"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}