Instructivo sobre Edge TensorFlow.js

Qué compilarás

En este instructivo, descargarás un modelo de clasificación de imágenes de TensorFlow.js entrenado y exportado mediante AutoML Vision Edge. A continuación, 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 clasificación de imágenes de AutoML Vision Edge previamente entrenado en una página web mediante 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:

Captura de pantalla del modelo de exportación de TensorFlow.js actualizado

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
Ejemplo de carpeta de Tensorflow.js

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/icn/${model-name}/* ${local-folder}

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="daisy" crossorigin="anonymous" src="https://storage.googleapis.com/tfjs-testing/tfjs-automl/img_classification/daisy.jpg">
<script>
async function run() {
  const model = await tf.automl.loadImageClassification('model.json');
  const image = document.getElementById('daisy');
  const predictions = await model.classify(image);
  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>

Ejecuta la app web

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

Python

python3 -m SimpleHTTPServer 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.

Predicción de TensorFlow.js en el navegador

¿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="daisy" crossorigin="anonymous" src="https://storage.googleapis.com/tfjs-testing/tfjs-automl/img_classification/daisy.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.loadImageClassification('model.json');
const image = document.getElementById('daisy');
const predictions = await model.classify(image);

Debes especificar un modelo con tf.automl.loadImageClassification(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.classify(image). Esta función ejecuta una sola imagen a través del modelo y muestra la predicción. La entrada para esta función es un elemento de imagen HTML, un elemento de video o un tensor 3D.

Próximos pasos

Completaste un instructivo de la aplicación web de clasificación de imágenes de TensorFlow.js mediante un modelo de Edge. Ejecutaste la aplicación web en un navegador web y realizaste una predicción de clasificación mediante tu 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: