Meta-aplicación web para el incrustado de modelos de IA

Contenidos

1. Demo
2. Descripción
3. Contenido del proyecto
4. Despliegue
5. Visualización

1. Demo

En el siguiente enlace puede ejecutarse una demo que no utiliza la API, por lo que algunas funcionalidades están desactivadas y sólo se permiten crear aplicaciones con los modelos por disponibles por defecto:

https://juancad.github.io/meta-app-models-embed/

2. Descripción

El proyecto se trata de una meta-aplicación para el incrustado de modelos de TensorFlow.js para la clasificación de imágenes.

La meta-aplicación permite subir modelos de IA previamente entrenados y optimizados, y crear una aplicación web que utilice dicho modelo para predecir las imágenes de la cámara web del dispositivo. Las aplicaciones creadas realizarán una transformación de la imagen obtenida de la cámara web a los parámetros requeridos por el tensor de entrada, y se predecirá el resultado preiódicamente gracias a los métodos de transformación y predicción de TF.js.

El modelo subido a la aplicación es almacenado en el servidor, junto con los archivos que genera la meta-aplicación para su ejecución. Los archivos generados permitirán ejecutar la aplicación creada en el navegador. En la meta-aplicación se permitirá la visualización de aplicaciones mediante una vista previa, la edición de aplicaciones mediante un editor que muestra en tiempo real los cambios realizados por el usuario, la descarga de la aplicación creada, la visualización accediendo a la ruta de la aplicación creada y la eliminación de aplicaciones.

3. Contenido del proyecto

• En el directorio dist/meta-app-models-embed se encuentra el desplegable de la aplicación con los archivos php para la conexión con la base de datos.
• En el directorio src se encuentra el código fuente.
• El archivo dist/base_de_datos.sql contiene las tablas de la base de datos de la aplicación.

4. Despliegue

El despliegue de la aplicación se ha realizado en un servidor Apache. Para poder desplegarla, será descargar los archivos necesarios del directorio dist y realizar los siguientes pasos:

1. Importar la base de datos en MySQL, archivo base_de_datos.sql.

2. Copiar el directorio meta-app-models-embed en un servidor web Apache. Asegurarse de haber copiado el archivo .htaccess, en Linux aparecerá como oculto.

3. Cambiar los datos de conexión con la base de datos en el archivo meta-app-models-embed/controller/connect.php.

4. Habilitar la compresión de archivos .zip en el servidor.

5. Para que el enrutamiento de la aplicación funcione correctamente en el servidor:

   Ir a /etc/apache2/apache2.conf

   Buscar:

    <Directory /var/www/>
        Options Indexes FollowSymLinks
        AllowOverride None
        Require all granted
    </Directory>
   

   Y sustituirlo por:

    <Directory /var/www/>
        Options Indexes FollowSymLinks
        AllowOverride All
        Require all granted
    </Directory>
   

6. Ejecutar el comando: sudo a2enmod rewrite.

Importar en el editor

El proyecto ha sido desarrollado en Angular, utilizando como IDE: Visual Studio Code. Para importarlo se debe:

• Tener instalado Node.js: https://nodejs.org/es/download/
• Tener instalado Angular, mediante el comando: npm install -g @angular/cli
• Importar el proyecto e instalar las dependencias del fichero package.json usando el comando: npm install
• inicia el servidor de desarrollo con el comando: ng serve
• Abrir el enlace http://localhost:4200 en el navegador.

5. Visualización

La meta-aplicación permite el incrustado de modelos de TensorFlow.js Para poder importarlos se debe de exportar un modelo de Keras como modelo de TensorFlow.js siguiendo el tutorial: https://www.tensorflow.org/js/tutorials/conversion/import_keras?hl=es-419

Una vez descargado el modelo de TensorFlow.js se dispondrá de un archivo model.json y uno o varios archivos binarios, que se pueden subir a la meta-aplicación en el creador de aplicaciones.

Una vez subido el modelo, se abrirá un editor de aplicaciones. En el editor se puede cambiar el título, la descripción, categorías del modelo y el estilo (colores, fuente, alineación...). En el editor se puede ver una vista previa que muestra en tiempo real cómo se ve la aplicación con las modificaciones realizadas por el usuario.

En el menú de inicio se muestra un listado con las aplicaciones creadas. Al seleccionar una aplicación creada se muestra su vista previa. Desde la lista se permite la descarga de la aplicación, vista desde el navegador y eliminación de la misma.