Instructivo sobre Edge TensorFlow.js

Terminología: Consulta la página Terminología de AutoML Vision Edge para obtener una lista de los términos usados en este instructivo.

Qué compilarás

En este instructivo, descargarás un modelo de detección de objetos de TensorFlow.js entrenado y exportado mediante AutoML Vision Edge. Luego, crearás una página web que carga el modelo y realiza una predicción de una imagen.

Objetivos

Escribirás el código de JavaScript con el siguiente objetivo:

• Ejecutar un modelo de detección de objetos de AutoML Vision Edge previamente entrenado en una página web con la biblioteca de TensorFlow.js

Antes de comenzar

Entrena un modelo desde AutoML Vision Edge

Antes de implementar un modelo en un dispositivo de Edge, sigue la guía de inicio rápido sobre modelos de dispositivos de Edge para entrenar y exportar un modelo de TensorFlow.js desde AutoML Vision Edge.

En el último paso, exporta el modelo a TensorFlow.js:

Después de completar la guía de inicio rápido, debes tener los siguientes archivos exportados en Google Cloud Storage:

• Un archivo dict.txt con etiquetas
• Un archivo model.json
• Archivos de peso *.bin

Descarga los archivos del modelo

Copia los archivos exportados de Google Cloud Storage en un directorio local:

gsutil cp gs://${cloud-storage-bucket}/model-export/iod/${model-name}/* ${local-folder}

Nota: Si descargas los archivos a través de la IU, se les cambia el nombre por una marca de tiempo, y tendrás que volver a cambiar los nombres a su forma original.

Escribe una app web pequeña

Una vez que tengas los archivos del modelo de TensorFlow.js almacenados de forma local, podrás escribir tu app web:

1. Navega al directorio local en el que se almacenan los archivos del modelo si aún no lo hiciste.

2. Crea un archivo index.html en el mismo directorio local con el siguiente contenido:

   index.html

   Muestras de código

   <script src="https://unpkg.com/@tensorflow/tfjs"></script>
   <script src="https://unpkg.com/@tensorflow/tfjs-automl"></script>
   <img id="salad" crossorigin="anonymous" src="https://storage.googleapis.com/tfjs-testing/tfjs-automl/object_detection/test_image.jpg">
   <script>
   async function run() {
     const model = await tf.automl.loadObjectDetection('model.json');
     const img = document.getElementById('salad');
     const options = {score: 0.5, iou: 0.5, topk: 20};
     const predictions = await model.detect(img, options);
     console.log(predictions);
     // Show the resulting object on the page.
     const pre = document.createElement('pre');
     pre.textContent = JSON.stringify(predictions, null, 2);
     document.body.append(pre);
   }
   run();
   </script>

3. Reemplaza el atributo de ruta de acceso src de la etiqueta <img> para que apunte a tu propia imagen (opcional).

   Nota: Si usas un paquete js con NPM, puedes usar importaciones ES6 en lugar de una etiqueta <script>.

Ejecuta la app web

Inicia un servidor HTTP simple en el puerto 8000 desde el directorio con el archivo index.html:

Python

python -m http.server 8000

Node.js

Si tienes Node.js, instala el paquete http-server de forma global y ejecuta lo siguiente:

http-server -p 8000

Abre http://localhost:8000 en el navegador y verás el resultado de la predicción en la consola (Ver > Desarrollador > Consola de JavaScript), además de verlo en la página.

El resultado es una lista ordenada de objetos de predicción:

[
  {
    "box": {
      "left": 105.1,
      "top": 22.2,
      "width": 70.6,
      "height": 55.7
    },
    "label": "Tomato",
    "score": 0.972
  },
  ...
]

Para obtener más información sobre la API, consulta la documentación del paquete de NPM de AutoML.

Para obtener ideas sobre cómo trazar los cuadros de límite en la imagen, consulta esta muestra de código que superpone texto y cuadros en la imagen mediante SVG.

¿Cómo funciona?

Ahora que tu app está en ejecución, puedes explorar las funciones del código.

Las primeras dos etiquetas de secuencia de comandos cargan la biblioteca de TensorFlow.js y la biblioteca de AutoML que están disponibles en el administrador de paquetes de NPM.

<script src="https://unpkg.com/@tensorflow/tfjs"></script>
<script src="https://unpkg.com/@tensorflow/tfjs-automl"></script>

El paquete de NPM de AutoML proporciona un conjunto de API para cargar y ejecutar los modelos que produjo AutoML Vision Edge. El paquete se encarga del procesamiento previo o posterior necesario para ejecutar el modelo, como la capacidad de proporcionar un elemento de imagen o video, normalizar los valores de píxeles y mostrar un objeto ordenado con etiquetas y puntuaciones.

La etiqueta de imagen carga una imagen de prueba desde una ruta de acceso de Google Cloud Storage:

<img id="salad" crossorigin="anonymous" src="https://storage.googleapis.com/tfjs-testing/tfjs-automl/object_detection/test_image.jpg">

Cuando pruebes el modelo, debes reemplazar la imagen src por la ruta de acceso a tu propia imagen.

Luego, carga el modelo y haz una predicción con tu imagen:

const model = await tf.automl.loadObjectDetection('model.json');
const img = document.getElementById('salad');
const options = {score: 0.5, iou: 0.5, topk: 20};
const predictions = await model.detect(img, options);

Debes especificar un modelo con tf.automl.loadObjectDetection(url). Esta función toma una URL absoluta o relativa al archivo model.json exportado, que, en este caso, es una ruta de acceso relativa, ya que el archivo index.html y los archivos del modelo están en el mismo directorio.

Puedes obtener las predicciones si llamas a model.detect(img, options). Esta función ejecuta una sola imagen a través del modelo y muestra los objetos predichos: La entrada para esta función es un elemento de imagen HTML, un elemento de video o un tensor 3D.

La función model.detect(img, options) también admite el argumento options opcional con las especificaciones posibles:

• score: Es la puntuación de probabilidad entre 0 y 1. La configuración predeterminada es 0.5. Se ignorarán los cuadros con una puntuación inferior a este límite.
• topk: Solo se muestran los objetos topk más frecuentes. La cantidad real de objetos puede ser inferior a este número.

• iou: Es la intersección sobre el límite de la unión. IoU es una métrica entre 0 y 1 que se usa para medir la superposición de dos cuadros. Los cuadros predichos no se superpondrán más allá del límite especificado.

  Consulta la página Evalúa modelos para obtener más información sobre la evaluación de modelos mediante la intersección sobre la unión (IoU).

Para obtener más información sobre la API, consulta la documentación del paquete de NPM de AutoML.

¿Qué sigue?

Completaste un instructivo de la app web de detección de objetos de TensorFlow.js mediante un modelo de Edge. Ejecutaste la app web en un navegador web y realizaste una predicción de detección de objetos mediante el modelo de Edge personalizado y una imagen que cargaste desde la Web. Luego, examinaste partes del código de muestra para comprender la funcionalidad subyacente.

Próximos pasos:

• Mira una demostración en la que se usa SVG para superponer los cuadros predichos con probabilidades en la imagen.
• Obtén más información sobre TensorFlow.js.
• Obtén más información sobre la biblioteca de NPM de AutoML a través de la documentación oficial.
• Obtén más información sobre TensorFlow en general a través de sus instructivos.