Introducción a TensorFlow.js: ¿Cómo configurar un proyecto?

Seguimos con nuestra breve introducción a Tensorflow.js. En el artículo de hoy vamos a repasar cómo instalar y configurar un proyecto de TensorFlow.js de forma fácil.

Pero antes de seguir, te recomiendo leer los siguientes artículos:

¿Cómo configurar un proyecto con TensorFlow.js?

Recuerda que estamos trabajando con Node.js, por tanto utilizaremos npm como gestor de paquetes para configurar nuestro proyecto.

Una vez hayas creado tu directorio miproyectotj, debes acceder al directorio y crear un fichero package.json para poder gestionar las dependencias. Lo haces ejecutando el siguiente comando:

$ npm init -y

En este proyecto estaremos desarrollando una aplicación web, y utilizaremos el empaquetador Parcel. Parcel es un empaquetador de aplicaciones web, muy práctico, que “no necesita configuración”.

Instalamos el empaquetador Parcel ejecutando el siguiente comando en el directorio del proyecto:

$ npm install -g parcel-bundler

Después, creamos dos ficheros vacíos para nuestro proyecto.

$ touch index.html index.js

Además, si se tratara de un proyecto real, en este momento podrías añadir la biblioteca de Bootstrap u otro framework de CSS que te guste más.

Por cuestiones de alcance de este artículo, no incluiremos ningún framework de CSS.

Edita tu fichero index.html con tu editor de texto preferido y añade el siguiente código de HTML:

<html>
<body>
<div class="container">
<h1>¡Bienvenido a TensorFlow.js!</h1>
<div id="output"></div>
</div>
<script src="./index.js"></script>
</body>
</html>

Como has podido notar, en el código de HTML anterior hemos declarado el fichero index.js. Debes editar el fichero index.js y añadir el código siguiente:

document.getElementById('output').innerText = "¡Hola Mundo";

En este fichero también podrías llamar a la hoja de estilos de tu framework de CSS favorito.

Si todo ha ido bien hasta aquí, y tu código de JavaScript se está procesando correctamente, cuando compiles el proyecto, podrás ver en pantalla el texto Hola Mundo en el elemento con ID “output”.

Para compilar tu proyecto, e iniciar un servidor web de desarrollo, simplemente tienes que ejecutar el siguiente comando de Parcel:

$ parcel index.html

Si no hay ningún error, puedes abrir tu nuevo sitio web utilizando la URL http://localhost:1234 en tu navegador.

Deberías poder ver algo parecido a lo siguiente:

Bienvenido a TensorFlow.js

¿Cómo añadir TensorFlow.js al proyecto?

Añadir TensorFlow.js a tu proyecto es tan ‘fácil’ como utilizar nuevamente npm e instalar el paquete de TensorFlow.js:

$ npm install @tensorflow/tfjs

Si todo ha ido bien, y como bien recuerdas, la biblioteca de TensorFlow.js se ha instalado en el directorio node_modules. Lo que significa que ya puedes importarla en el fichero index.js añadiendo en la parte superior del fichero lo siguiente:

import * as tf from '@tensorflow/tfjs';

Acabas de importar TensorFlow.js como tf. Eso significa que a partir de ahora tienes acceso a la API de TensorFlow.js mediante el objeto tf, y puedes usarla en tu código.

Conclusión

Como has podido ver, instalar y configurar un proyecto con TensorFlow.js es bastante ‘fácil’, sobre todo si ya tienes experiencia en Node y npm. En los próximos artículos seguiremos nuestro aprendizaje sobre TensorFlow.js, definiendo y entrenando un Modelo.

¿Has tenido alguna dificultad en configurar tu nuevo proyecto?¡Coméntalo abajo!

Foto: @biancoblue @freepik