Crea una cámara web inteligente en JavaScript con un modelo de aprendizaje automático previamente entrenado de TensorFlow.js

1. Antes de comenzar

El aprendizaje automático es una palabra de moda en estos días. Sus aplicaciones parecen no tener límites y, en el futuro cercano, parece que afectará a casi todas las industrias. Si trabajas como ingeniero o diseñador, ya sea en el front-end o el back-end, y conoces JavaScript, este codelab se escribió para ayudarte a comenzar a agregar el aprendizaje automático a tu conjunto de habilidades.

Requisitos previos

Este codelab se escribió para ingenieros experimentados que ya conocen JavaScript.

Qué compilarás

En este codelab, harás lo siguiente:

• Crea una página web que use el aprendizaje automático directamente en el navegador web a través de TensorFlow.js para clasificar y detectar objetos comunes (sí, incluidos más de uno a la vez) desde una transmisión en vivo de la cámara web.
• Potencia tu cámara web habitual para identificar objetos y obtener las coordenadas del cuadro delimitador de cada objeto que encuentre.
• Destaca el objeto encontrado en la transmisión de video, como se muestra a continuación:

Imagina poder detectar si una persona apareció en un video para luego contar cuántas personas estuvieron presentes en un momento determinado y estimar qué tan concurrida estuvo un área durante el día, o recibir una alerta cuando se detecte a tu perro en una habitación de tu casa en la que no debería estar mientras estás fuera. Si pudieras hacer eso, estarías en camino de crear tu propia versión de una cámara Google Nest que podría alertarte cuando vea a un intruso (de cualquier tipo) con tu propio hardware personalizado. Es muy útil. ¿Es difícil de hacer? No. Comencemos a hackear…

Qué aprenderás

• Cómo cargar un modelo de TensorFlow.js previamente entrenado
• Cómo tomar datos de una transmisión en vivo de una cámara web y dibujarlos en un lienzo
• Cómo clasificar un fotograma de imagen para encontrar los cuadros de límite de los objetos que el modelo se entrenó para reconocer
• Cómo usar los datos que devuelve el modelo para destacar los objetos encontrados

Este codelab se enfoca en cómo comenzar a usar los modelos previamente entrenados de TensorFlow.js. Los conceptos y los bloques de código que no son relevantes para TensorFlow.js y el aprendizaje automático no se explican, pero se proporcionan para que simplemente los copies y pegues.

2. ¿Qué es TensorFlow.js?

TensorFlow.js es una biblioteca de aprendizaje automático de código abierto que se puede ejecutar en cualquier lugar donde se pueda ejecutar JavaScript. Se basa en la biblioteca original de TensorFlow escrita en Python y tiene como objetivo recrear esta experiencia del desarrollador y este conjunto de APIs para el ecosistema de JavaScript.

¿Dónde se puede usar?

Gracias a la portabilidad de JavaScript, ahora puedes escribir en 1 idioma y realizar aprendizaje automático en todas las siguientes plataformas con facilidad:

• Lado del cliente en el navegador web con JavaScript estándar
• Dispositivos del servidor y hasta de IoT, como Raspberry Pi, con Node.js
• Apps para computadoras que usan Electron
• Apps nativas para dispositivos móviles con React Native

TensorFlow.js también admite varios backends dentro de cada uno de estos entornos (los entornos basados en hardware real en los que se puede ejecutar, como la CPU o WebGL, por ejemplo). En este contexto, un "backend" no significa un entorno del servidor (por ejemplo, el backend para la ejecución podría ser del cliente en WebGL) para garantizar la compatibilidad y mantener todo en funcionamiento rápido. Actualmente, TensorFlow.js admite lo siguiente:

• Ejecución de WebGL en la tarjeta gráfica del dispositivo (GPU): Esta es la forma más rápida de ejecutar modelos más grandes (de más de 3 MB) con aceleración de GPU.
• Ejecución de WebAssembly (WASM) en la CPU: Para mejorar el rendimiento de la CPU en todos los dispositivos, incluidos los teléfonos celulares de generaciones anteriores, por ejemplo. Esto es más adecuado para modelos más pequeños (menos de 3 MB de tamaño) que pueden ejecutarse más rápido en la CPU con WASM que con WebGL debido a la sobrecarga de subir contenido a un procesador de gráficos.
• Ejecución de CPU: Es la alternativa en caso de que no esté disponible ninguno de los otros entornos. Es el más lento de los tres, pero siempre está disponible.

Nota: Puedes forzar uno de estos backends si sabes en qué dispositivo se ejecutará el código o, simplemente, dejar que TensorFlow.js decida por ti si no especificas esta opción.

Superpoderes del cliente

Ejecutar TensorFlow.js en el navegador web de la máquina del cliente puede generar varios beneficios que vale la pena tener en cuenta.

Privacidad

Puedes entrenar y clasificar datos en la máquina del cliente sin enviar datos a un servidor web de terceros. En ocasiones, esto puede ser un requisito para cumplir con las leyes locales, como el RGPD, por ejemplo, o cuando se procesan datos que el usuario puede querer conservar en su máquina y no enviar a un tercero.

Velocidad

Como no tienes que enviar datos a un servidor remoto, la inferencia (el acto de clasificar los datos) puede ser más rápida. Aún mejor, tienes acceso directo a los sensores del dispositivo, como la cámara, el micrófono, el GPS, el acelerómetro y muchos más, si el usuario te otorga acceso.

Alcance y escala

Con un solo clic, cualquier persona del mundo puede hacer clic en un vínculo que le envíes, abrir la página web en su navegador y usar lo que creaste. No es necesario realizar una configuración compleja de Linux del servidor con controladores CUDA y mucho más solo para usar el sistema de aprendizaje automático.

Costo

Sin servidores, lo único que debes pagar es una CDN para alojar tus archivos HTML, CSS, JS y de modelo. El costo de una CDN es mucho menor que el de mantener un servidor (posiblemente con una tarjeta gráfica conectada) en funcionamiento las 24 horas, todos los días.

Funciones del servidor

Aprovechar la implementación de TensorFlow.js en Node.js permite las siguientes funciones.

Compatibilidad total con CUDA

En el servidor, para la aceleración de la tarjeta gráfica, debes instalar los controladores de NVIDIA CUDA para habilitar TensorFlow para que funcione con la tarjeta gráfica (a diferencia del navegador, que usa WebGL, no se necesita instalación). Sin embargo, con la compatibilidad total con CUDA, puedes aprovechar al máximo las capacidades de nivel inferior de la tarjeta gráfica, lo que genera tiempos de entrenamiento y de inferencia más rápidos. El rendimiento es similar al de la implementación de TensorFlow en Python, ya que ambos comparten el mismo backend de C++.

Tamaño del modelo

En el caso de los modelos de vanguardia de la investigación, es posible que trabajes con modelos muy grandes, tal vez de gigabytes de tamaño. Actualmente, estos modelos no se pueden ejecutar en el navegador web debido a las limitaciones de uso de memoria por pestaña del navegador. Para ejecutar estos modelos más grandes, puedes usar Node.js en tu propio servidor con las especificaciones de hardware que necesitas para ejecutar un modelo de este tipo de manera eficiente.

IOT

Node.js es compatible con computadoras de placa única populares, como la Raspberry Pi, lo que significa que también puedes ejecutar modelos de TensorFlow.js en esos dispositivos.

Velocidad

Node.js está escrito en JavaScript, lo que significa que se beneficia de la compilación Just-in-Time. Esto significa que, a menudo, puedes observar mejoras en el rendimiento cuando usas Node.js, ya que se optimizará en el tiempo de ejecución, en especial para cualquier preprocesamiento que realices. Un gran ejemplo de esto se puede ver en este caso de estudio, que muestra cómo Hugging Face usó Node.js para duplicar el rendimiento de su modelo de procesamiento de lenguaje natural.

Ahora que comprendes los conceptos básicos de TensorFlow.js, dónde se puede ejecutar y algunos de sus beneficios, comencemos a hacer cosas útiles con él.

3. Modelos previamente entrenados

TensorFlow.js proporciona una variedad de modelos de aprendizaje automático (AA) previamente entrenados. Estos modelos fueron entrenados por el equipo de TensorFlow.js y se incluyen en una clase fácil de usar. Son una excelente manera de dar tus primeros pasos con el aprendizaje automático. En lugar de compilar y entrenar un modelo para resolver tu problema, puedes importar un modelo previamente entrenado como punto de partida.

Puedes encontrar una lista cada vez más grande de modelos previamente entrenados fáciles de usar en la página Models for JavaScript de TensorFlow.js. También puedes obtener modelos de TensorFlow convertidos que funcionan en TensorFlow.js en otros lugares, incluido TensorFlow Hub.

¿Por qué debería usar un modelo previamente entrenado?

Comenzar con un modelo previamente entrenado popular tiene varios beneficios si se ajusta a tu caso de uso deseado, como los siguientes:

1. No necesitas recopilar datos de entrenamiento por tu cuenta. Preparar los datos en el formato correcto y etiquetarlos para que un sistema de aprendizaje automático pueda usarlos para aprender puede llevar mucho tiempo y ser costoso.
2. La capacidad de crear prototipos rápidamente de una idea con un costo y un tiempo reducidos
   No tiene sentido "reinventar la rueda" cuando un modelo previamente entrenado puede ser lo suficientemente bueno para hacer lo que necesitas, lo que te permite concentrarte en usar el conocimiento que proporciona el modelo para implementar tus ideas creativas.
3. Uso de investigaciones de vanguardia. Los modelos previamente entrenados suelen basarse en investigaciones populares, lo que te permite conocerlos y comprender su rendimiento en el mundo real.
4. Facilidad de uso y documentación extensa. Debido a la popularidad de estos modelos
5. Capacidades de aprendizaje por transferencia Algunos modelos previamente entrenados ofrecen capacidades de aprendizaje por transferencia, que es básicamente la práctica de transferir información aprendida de una tarea de aprendizaje automático a otro ejemplo similar. Por ejemplo, un modelo que se entrenó originalmente para reconocer gatos podría volver a entrenarse para reconocer perros si le proporcionas datos de entrenamiento nuevos. Este proceso será más rápido, ya que no comenzarás con un lienzo en blanco. El modelo puede usar lo que ya aprendió para reconocer gatos y, luego, reconocer lo nuevo: los perros también tienen ojos y orejas, por lo que, si ya sabe cómo encontrar esas características, ya tenemos la mitad del trabajo hecho. Volver a entrenar el modelo con tus propios datos de una manera mucho más rápida

¿Qué es COCO-SSD?

COCO-SSD es el nombre de un modelo de AA de detección de objetos previamente entrenado que usarás durante este codelab, cuyo objetivo es identificar y localizar múltiples objetos en una sola imagen. En otras palabras, puede informarte el cuadro delimitador de los objetos que se entrenó para encontrar y, así, darte la ubicación de ese objeto en cualquier imagen que le presentes. A continuación, se muestra un ejemplo:

Si hubiera más de 1 perro en la imagen anterior, se te proporcionarían las coordenadas de 2 cuadros de límite, que describen la ubicación de cada uno. COCO-SSD se entrenó previamente para reconocer 90 objetos cotidianos comunes, como una persona, un automóvil, un gato, etcétera.

¿De dónde surgió el nombre?

El nombre puede sonar extraño, pero proviene de 2 acrónimos:

• COCO: Se refiere al hecho de que se entrenó con el conjunto de datos COCO (objetos comunes en contexto), que está disponible de forma gratuita para que cualquier persona lo descargue y use cuando entrene sus propios modelos. El conjunto de datos contiene más de 200,000 imágenes etiquetadas que se pueden usar para aprender.
• SSD (Single Shot MultiBox Detection): Se refiere a parte de la arquitectura del modelo que se usó en la implementación del modelo. No es necesario que comprendas esto para el codelab, pero, si tienes curiosidad, puedes obtener más información sobre los SSD aquí.

4. Prepárate

Requisitos

• Un navegador web moderno
• Conocimientos básicos de HTML, CSS, JavaScript y las Herramientas para desarrolladores de Chrome (visualización del resultado de la consola)

Vamos a codificar

Se crearon plantillas de código estándar para comenzar en Glitch.com o Codepen.io. Puedes clonar cualquiera de las plantillas como estado base para este codelab con un solo clic.

En Glitch, haz clic en el botón remix this para crear una bifurcación y un nuevo conjunto de archivos que puedes editar.

También puedes hacer clic en fork en la parte inferior derecha de la pantalla en Codepen.

Este esqueleto muy simple te proporciona los siguientes archivos:

• Página HTML (index.html)
• Hoja de estilo (style.css)
• Archivo para escribir nuestro código de JavaScript (script.js)

Para tu comodidad, se agregó una importación en el archivo HTML para la biblioteca de TensorFlow.js. El aspecto resultante será el siguiente:

index.html

<!-- Import TensorFlow.js library -->
<script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs/dist/tf.min.js" type="text/javascript"></script>

Alternativa: Usa tu editor web preferido o trabaja de forma local

Si quieres descargar el código y trabajar de forma local o en otro editor en línea, simplemente crea los 3 archivos mencionados anteriormente en el mismo directorio y copia y pega el código de nuestra plantilla de Glitch en cada uno de ellos.

Precaución: Si ejecutas el código de forma local, en lugar de en otro sitio como Codepen.io o similar, asegúrate de entregar los archivos desde un servidor web y no solo hacer doble clic en index.html para abrirlo con el protocolo file://.

5. Propaga el esqueleto HTML

Todos los prototipos requieren una estructura HTML básica. Lo usarás para renderizar el resultado del modelo de aprendizaje automático más adelante. Configurémoslo ahora:

• Un título para la página
• Texto descriptivo
• Un botón para habilitar la cámara web
• Una etiqueta de video para renderizar la transmisión de la cámara web

Para configurar estas funciones, abre index.html y reemplaza el código existente por el siguiente:

index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Multiple object detection using pre trained model in TensorFlow.js</title>
    <meta charset="utf-8">
    <!-- Import the webpage's stylesheet -->
    <link rel="stylesheet" href="style.css">
  </head>  
  <body>
    <h1>Multiple object detection using pre trained model in TensorFlow.js</h1>

    <p>Wait for the model to load before clicking the button to enable the webcam - at which point it will become visible to use.</p>
    
    <section id="demos" class="invisible">

      <p>Hold some objects up close to your webcam to get a real-time classification! When ready click "enable webcam" below and accept access to the webcam when the browser asks (check the top left of your window)</p>
      
      <div id="liveView" class="camView">
        <button id="webcamButton">Enable Webcam</button>
        <video id="webcam" autoplay muted width="640" height="480"></video>
      </div>
    </section>

    <!-- Import TensorFlow.js library -->
    <script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs/dist/tf.min.js" type="text/javascript"></script>
    <!-- Load the coco-ssd model to use to recognize things in images -->
    <script src="https://cdn.jsdelivr.net/npm/@tensorflow-models/coco-ssd"></script>
    
    <!-- Import the page's JavaScript to do some stuff -->
    <script src="script.js" defer></script>
  </body>
</html>

Comprende el código

Observa algunos elementos clave que agregaste:

• Agregaste una etiqueta <h1> y algunas etiquetas <p> para el encabezado, además de información sobre cómo usar la página. Aquí no hay nada especial.

También agregaste una etiqueta de sección que representa tu espacio de demostración:

index.html

    <section id="demos" class="invisible">

      <p>Hold some objects up close to your webcam to get a real-time classification! When ready click "enable webcam" below and accept access to the webcam when the browser asks (check the top left of your window)</p>
      
      <div id="liveView" class="webcam">
        <button id="webcamButton">Enable Webcam</button>
        <video id="webcam" autoplay width="640" height="480"></video>
      </div>
    </section>

• Inicialmente, le asignarás a este section la clase "invisible". Esto te permite mostrarle visualmente al usuario cuando el modelo está listo y es seguro hacer clic en el botón Habilitar cámara web.
• Agregaste el botón enable webcam, al que le aplicarás un diseño en tu CSS.
• También agregaste una etiqueta de video a la que transmitirás la entrada de la cámara web. Configurarás esto en tu código de JavaScript en breve.

Si obtienes una vista previa del resultado ahora mismo, debería verse de la siguiente manera:

Nota: Para obtener una vista previa en vivo de tu trabajo en Glitch.com, haz clic en el menú desplegable mostrar en la parte superior izquierda de la pantalla y selecciona junto al código.

6. Agr. estilo

Valores predeterminados de los elementos

Primero, agreguemos estilos para los elementos HTML que acabamos de agregar para asegurarnos de que se rendericen correctamente:

style.css

body {
  font-family: helvetica, arial, sans-serif;
  margin: 2em;
  color: #3D3D3D;
}

h1 {
  font-style: italic;
  color: #FF6F00;
}

video {
  display: block;
}

section {
  opacity: 1;
  transition: opacity 500ms ease-in-out;
}

A continuación, agrega algunas clases de CSS útiles para ayudar con los diferentes estados de nuestra interfaz de usuario, por ejemplo, cuando queremos ocultar el botón o hacer que el área de demostración parezca no disponible si el modelo aún no está listo.

style.css

.removed {
  display: none;
}

.invisible {
  opacity: 0.2;
}

.camView {
  position: relative;
  float: left;
  width: calc(100% - 20px);
  margin: 10px;
  cursor: pointer;
}

.camView p {
  position: absolute;
  padding: 5px;
  background-color: rgba(255, 111, 0, 0.85);
  color: #FFF;
  border: 1px dashed rgba(255, 255, 255, 0.7);
  z-index: 2;
  font-size: 12px;
}

.highlighter {
  background: rgba(0, 255, 0, 0.25);
  border: 1px dashed #fff;
  z-index: 1;
  position: absolute;
}

¡Genial! ¡Eso es todo lo que necesitas! Si reemplazaste correctamente tus estilos con los 2 fragmentos de código anteriores, la vista previa en vivo ahora debería verse de la siguiente manera:

Observa cómo el texto del área de demostración y el botón no están disponibles, ya que el HTML tiene aplicada la clase "invisible" de forma predeterminada. Usarás JavaScript para quitar esta clase una vez que el modelo esté listo para usarse.

7. Crea un esqueleto de JavaScript

Nota: El siguiente código se muestra en orden, pero se divide en partes más pequeñas para una explicación más detallada. Si copias y pegas cada segmento al final del archivo JavaScript cada vez, o reemplazas una función vacía definida del paso anterior según lo recomendado, todo debería funcionar bien :-)

Cómo hacer referencia a elementos DOM clave

Primero, asegúrate de poder acceder a las partes clave de la página que deberás manipular o a las que deberás acceder más adelante en nuestro código:

script.js

const video = document.getElementById('webcam');
const liveView = document.getElementById('liveView');
const demosSection = document.getElementById('demos');
const enableWebcamButton = document.getElementById('webcamButton');

Verifica si la cámara web es compatible

Ahora puedes agregar algunas funciones de asistencia para verificar si el navegador que usas admite el acceso a la transmisión de la cámara web a través de getUserMedia:

script.js

// Check if webcam access is supported.
function getUserMediaSupported() {
  return !!(navigator.mediaDevices &&
    navigator.mediaDevices.getUserMedia);
}

// If webcam supported, add event listener to button for when user
// wants to activate it to call enableCam function which we will 
// define in the next step.
if (getUserMediaSupported()) {
  enableWebcamButton.addEventListener('click', enableCam);
} else {
  console.warn('getUserMedia() is not supported by your browser');
}

// Placeholder function for next step. Paste over this in the next step.
function enableCam(event) {
}

Cómo recuperar la transmisión de la cámara web

A continuación, completa el código de la función enableCam vacía que definimos anteriormente. Para ello, copia y pega el siguiente código:

Precaución: Asegúrate de copiar el siguiente código y pegarlo sobre la función enableCam que definimos en el paso anterior, en lugar de solo agregarlo al final del archivo.

script.js

// Enable the live webcam view and start classification.
function enableCam(event) {
  // Only continue if the COCO-SSD has finished loading.
  if (!model) {
    return;
  }
  
  // Hide the button once clicked.
  event.target.classList.add('removed');  
  
  // getUsermedia parameters to force video but not audio.
  const constraints = {
    video: true
  };

  // Activate the webcam stream.
  navigator.mediaDevices.getUserMedia(constraints).then(function(stream) {
    video.srcObject = stream;
    video.addEventListener('loadeddata', predictWebcam);
  });
}

Por último, agrega código temporal para probar si la cámara web funciona.

El siguiente código simulará que tu modelo está cargado y habilitará el botón de la cámara para que puedas hacer clic en él. Reemplazarás todo este código en el siguiente paso, así que prepárate para borrarlo de nuevo en un momento:

script.js

// Placeholder function for next step.
function predictWebcam() {
}

// Pretend model has loaded so we can try out the webcam code.
var model = true;
demosSection.classList.remove('invisible');

Pruébalo En este punto, si ejecutas el código actual tal como está y haces clic en el botón cuando esté disponible, deberías ver una vista de la cámara web en vivo después de aceptar el acceso a tu cámara web en el navegador web (que aparecerá, por lo general, en la parte superior izquierda del navegador como una ventana emergente).

¡Genial! Si ejecutaste el código y presionaste el botón tal como está actualmente, deberías ver algo como lo siguiente:

8. Uso del modelo de aprendizaje automático

Carga el modelo

Ya puedes cargar el modelo COCO-SSD.

Cuando termine la inicialización, habilita el área de demostración y el botón en tu página web (pega este código sobre el código temporal que agregaste al final del último paso):

script.js

// Store the resulting model in the global scope of our app.
var model = undefined;

// Before we can use COCO-SSD class we must wait for it to finish
// loading. Machine Learning models can be large and take a moment 
// to get everything needed to run.
// Note: cocoSsd is an external object loaded from our index.html
// script tag import so ignore any warning in Glitch.
cocoSsd.load().then(function (loadedModel) {
  model = loadedModel;
  // Show demo section now model is ready to use.
  demosSection.classList.remove('invisible');
});

Una vez que agregues el código anterior y actualices la visualización en vivo, notarás que, unos segundos después de que se cargue la página (según la velocidad de tu red), el botón habilitar cámara web se mostrará automáticamente cuando el modelo esté listo para usarse. Sin embargo, también pegaste sobre la función predictWebcam. Ahora es momento de definirlo por completo, ya que nuestro código no hará nada por el momento.

Pasemos al siguiente paso.

Clasifica un fotograma de la cámara web

Ejecuta el siguiente código para permitir que la app capture continuamente un fotograma de la transmisión de la cámara web cuando el navegador esté listo y lo pase al modelo para que lo clasifique.

Luego, el modelo analizará los resultados y dibujará una etiqueta <p> en las coordenadas que se devuelvan, y establecerá el texto en la etiqueta del objeto, si supera un cierto nivel de confianza.

script.js

var children = [];

function predictWebcam() {
  // Now let's start classifying a frame in the stream.
  model.detect(video).then(function (predictions) {
    // Remove any highlighting we did previous frame.
    for (let i = 0; i < children.length; i++) {
      liveView.removeChild(children[i]);
    }
    children.splice(0);
    
    // Now lets loop through predictions and draw them to the live view if
    // they have a high confidence score.
    for (let n = 0; n < predictions.length; n++) {
      // If we are over 66% sure we are sure we classified it right, draw it!
      if (predictions[n].score > 0.66) {
        const p = document.createElement('p');
        p.innerText = predictions[n].class  + ' - with ' 
            + Math.round(parseFloat(predictions[n].score) * 100) 
            + '% confidence.';
        p.style = 'margin-left: ' + predictions[n].bbox[0] + 'px; margin-top: '
            + (predictions[n].bbox[1] - 10) + 'px; width: ' 
            + (predictions[n].bbox[2] - 10) + 'px; top: 0; left: 0;';

        const highlighter = document.createElement('div');
        highlighter.setAttribute('class', 'highlighter');
        highlighter.style = 'left: ' + predictions[n].bbox[0] + 'px; top: '
            + predictions[n].bbox[1] + 'px; width: ' 
            + predictions[n].bbox[2] + 'px; height: '
            + predictions[n].bbox[3] + 'px;';

        liveView.appendChild(highlighter);
        liveView.appendChild(p);
        children.push(highlighter);
        children.push(p);
      }
    }
    
    // Call this function again to keep predicting when the browser is ready.
    window.requestAnimationFrame(predictWebcam);
  });
}

La llamada realmente importante en este código nuevo es model.detect().

Todos los modelos prediseñados para TensorFlow.js tienen una función como esta (cuyo nombre puede cambiar de un modelo a otro, así que consulta la documentación para obtener más detalles) que realmente realiza la inferencia de aprendizaje automático.

La inferencia es simplemente el acto de tomar alguna entrada y ejecutarla a través del modelo de aprendizaje automático (esencialmente, muchas operaciones matemáticas) y, luego, proporcionar algunos resultados. Con los modelos prediseñados de TensorFlow.js, devolvemos nuestras predicciones en forma de objetos JSON, por lo que son fáciles de usar.

Puedes encontrar todos los detalles de esta función de predicción en nuestra documentación de GitHub para el modelo COCO-SSD aquí. Esta función realiza mucho trabajo pesado en segundo plano: puede aceptar cualquier objeto "similar a una imagen" como parámetro, como una imagen, un video, un lienzo, etcétera. Usar modelos prediseñados puede ahorrarte mucho tiempo y esfuerzo, ya que no necesitarás escribir este código por tu cuenta y podrás trabajar con él "de inmediato".

Si ejecutas este código, ahora deberías obtener una imagen similar a la siguiente:

Por último, aquí tienes un ejemplo del código que detecta varios objetos al mismo tiempo:

¡Muy bien! Ahora puedes imaginar lo sencillo que sería usar algo así para crear un dispositivo como la Nest Cam con un teléfono antiguo y recibir alertas cuando veas a tu perro en el sofá o a tu gato en el sillón. Si tienes problemas con tu código, consulta mi versión final en funcionamiento aquí para ver si copiaste algo de forma incorrecta.

9. Felicitaciones

Felicitaciones, diste tus primeros pasos para usar TensorFlow.js y el aprendizaje automático en el navegador web. Ahora te toca a ti tomar estos humildes comienzos y convertirlos en algo creativo. ¿Qué crearás?

Resumen

En este codelab, aprendimos a hacer lo siguiente:

• Aprendiste los beneficios de usar TensorFlow.js en lugar de otras formas de TensorFlow.
• Aprendiste las situaciones en las que te conviene comenzar con un modelo de aprendizaje automático entrenado previamente.
• Se creó una página web completamente funcional que puede clasificar objetos en tiempo real con tu cámara web, lo que incluye lo siguiente:
• Cómo crear un esqueleto HTML para el contenido
• Cómo definir estilos para elementos y clases HTML
• Configurar el andamiaje de JavaScript para interactuar con el HTML y detectar la presencia de una cámara web
• Cómo cargar un modelo de TensorFlow.js previamente entrenado
• Usar el modelo cargado para realizar clasificaciones continuas de la transmisión de la cámara web y dibujar un cuadro de límite alrededor de los objetos de la imagen

Próximos pasos

¡Comparte tus creaciones con nosotros! También puedes extender fácilmente lo que creaste para este codelab a otros casos de uso creativos. Te recomendamos que pienses de forma creativa y sigas hackeando después de terminar.

• Consulta todos los objetos que puede reconocer este modelo y piensa cómo podrías usar ese conocimiento para realizar una acción. ¿Qué ideas creativas podrías implementar ahora si extiendes lo que hiciste hoy?

(Quizás podrías agregar una capa simple del servidor para enviar una notificación a otro dispositivo cuando vea un objeto determinado de tu elección con WebSockets. Esta sería una excelente manera de reciclar un smartphone viejo y darle un nuevo propósito. Las posibilidades son infinitas.

• Etiquétanos en las redes sociales con el hashtag #MadeWithTFJS para tener la oportunidad de que se incluya tu proyecto en el blog de TensorFlow o, incluso, que se muestre en futuros eventos de TensorFlow.

Más Codelabs de TensorFlow.js para aprender más

• Escribe una red neuronal desde cero en TensorFlow.js
• Reconocimiento de audio con aprendizaje por transferencia en TensorFlow.js
• Clasificación de imágenes personalizadas con aprendizaje por transferencia en TensorFlow.js

Sitios web que puedes revisar

• Sitio web oficial de TensorFlow.js
• Modelos prediseñados de TensorFlow.js
• API de TensorFlow.js
• Demostraciones de TensorFlow.js