Guía 19

Guía 19

DAWM / Proyecto04

Objetivo general

Desarrollar una aplicación híbrida utilizando tecnologías que integren modelos de aprendizaje automático previamente entrenados en un entorno funcional y accesible para resolver problemas específicos mediante el reconocimiento de patrones, objetos o sonidos fomentando habilidades prácticas en el desarrollo de aplicaciones móviles con tecnologías modernas y la implementación de inteligencia artificial.

Actividades previas

Hibrida

  1. Clona localmente tu repositorio hibrida.
  2. Instale los paquetes de su proyecto.
  3. Levante los servicios

Actividades en clases

TensorFlow.js y TeachableMachine.js

  1. Descargue las librerías JS @tensorflow/tfjs - tf.min.js y @teachablemachine/image - teachablemachine-image.min.js
  2. En su proyecto:
    • Cree la estructura src/assets/javascript y copie los archivos tf.min.js y teachablemachine-image.min.js dentro de la carpeta.
    • Edite el archivo angular.json, con la ruta a las librerías JS.
     "projects": { ...
     "app": { ...
         "architect":{ ...
             "build": { ...
                 "options" : { ...
                     "scripts": [
                     	"src/assets/javascript/tf.min.js",
                     	"src/assets/javascript/teachablemachine-image.min.js",
                     ]
                 }
             }
         }
     }
 }
  3. Reinicie el servidor.
  4. (STOP 1) Inspeccione en el navegador y compruebe la carga de los archivos en la opción Network, en el archivo scripts.js.

Servicio de Teacheable Machine - Cargar el modelo y clases

  1. Desde la línea de comandos, cree el servicio proveedor de datos, con:

     ionic g s services/teachablemachine

  2. Edite el servicio src/app/services/teachablemachine.service.ts, con:

    • Agregue los atributos URL, classLabels y model.
    • Agregue el método loadModel.
     ...
 export class TeachablemachineService {

     private URL = "https://teachablemachine.withgoogle.com/models/<ID-MODELO>/"
     private model: any;
     private classLabels: string[] = [];


     constructor() { }

     async loadModel() {
         try {
             const modelURL = this.URL + 'model.json';
             const metadataURL = this.URL + 'metadata.json';

             const tmImage = (window as any).tmImage;
             this.model = await tmImage.load(modelURL, metadataURL);
             this.classLabels = this.model.getClassLabels();

         } catch (error) {
             console.error('Error al cargar el modelo:', error);
             throw new Error('No se pudo cargar el modelo.');
         }
     }

     getClassLabels(): string[] {
         return this.classLabels;
     }

 }

  3. Edite src/app/tab1/tab1.page.ts, con:

    • Importe y registre los componentes visuales mediante el decorador de la clase.
    • Importe y registre el servicio en el constructor.
    • Declare los atributos modelLoaded y classLabels para almacenar el modelo y la lista de clases, respectivamente.
    • Agregue el método ngOnInit con el que carga el modelo y las clases
     import {  

     /* Importe los componentes de la UI */
     IonCardContent, IonButton, IonList, IonItem, IonLabel,
     ... 

 } from '@ionic/angular/standalone';

 /* Importe el servicio */
 import { TeachablemachineService } from '../services/teachablemachine.service';

 @Component({
     ...
     imports: [

         /* Registre los componentes de la UI */
         IonCardContent, IonButton, IonList, IonItem, IonLabel,

         ...
     ]
 })
 export class Tab1Page {

     ...

     /* Declare los atributos para almacenar el modelo y la lista de clases */
     modelLoaded = signal(false);
     classLabels: string[] = [];

     /* Registre el servicio en el constructor */
     constructor(private teachablemachine: TeachablemachineService) { ... }

     /* Método ngOnInit para cargar el modelo y las clases */
     async ngOnInit() {
         await this.teachablemachine.loadModel()
         this.classLabels = this.teachablemachine.getClassLabels()
         this.modelLoaded.set(true)
     }
 }

  4. Edite el archivo src/app/tab1/tab1.page.html, con:

     ...
 <!-- CARGA DE PREDICCIÓN - INICIO -->
 @if(modelLoaded()) {

   <div class="ion-text-center ion-padding-top ion-padding-bottom">
     <ion-button fill="outline" color="success">Predecir</ion-button>
   </div>

   <ion-list>
     <ion-item>
       <ion-label>Clases:  {{ classLabels  }} </ion-label>
     </ion-item>
   </ion-list>

 }
 <!-- CARGA DE PREDICCIÓN - FIN -->
 ...

  5. (STOP 2) Compruebe el resultado en el navegador.

Servicio de Teacheable Machine - Predicción

  1. Edite el servicio src/app/services/teachablemachine.service.ts, con:

    • Agregue el método predict.
     ...
 export class TeachablemachineService {

     ...

     getClassLabels(): string[] { ... }

     /* Método para la predicción a partir de la imagen */
     async predict(imageElement: HTMLImageElement): Promise<any[]> {

         if (!this.model) {
             throw new Error('El modelo no está cargado.');
         }

         return await this.model.predict(imageElement);
     }

 }

  2. Edite src/app/tab1/tab1.page.ts, con:

    • Importe los componentes @ViewChild y ElementRef
    • Importe y registre el pipe PercentPipe
    • Declare la referencia al elemento con el id image.
    • Declare el atributo predictions para almacenar la lista de predicciones.
    • Agregue el método predict para obtener la predicción a partir de la imagen
     /* Importe los componentes */
 import { ViewChild, ElementRef, ... } from '@angular/core';

 /* Importe el pipe */
 import { PercentPipe } from '@angular/common';
 ...
	
 @Component({ 

     ...
     imports: [

         /* Registre el pipe */
         PercentPipe,

         ...

     ]
 })
 export class Tab1Page {

     /* Declare la referencia al elemento con el id image */
     @ViewChild('image', { static: false }) imageElement!: ElementRef<HTMLImageElement>;

     ...

     /* Lista de predicciones */
  		predictions: any[] = [];


     /* Método para obtener la predicción a partir de la imagen */
     async predict() {
         try {
             const image = this.imageElement.nativeElement;
             this.predictions = await this.teachablemachine.predict(image);
         } catch (error) {
             console.error(error);
             alert('Error al realizar la predicción.');
         }
     }
 }

  3. Edite el archivo src/app/tab1/tab1.page.html, con:

    • Agregue el identificador #image al elemento <img>
    • Registro de la función predict() para el evento click, en el elemento <ion-button>
    • Itere sobre la lista de predicciones
     ...

 <!-- Identificador #image -->
 <img #image ... />

 @if( ... ) {

     <div ... >

         <!-- Registro de la función predict para el evento click -->
         <ion-button ... (click)="predict()">Predecir</ion-button>

     </div>

     <ion-list>

         <ion-item> ... </ion-item>

         <!-- Itere sobre la lista de predicciones -->
         @for (item of predictions; track $index) {
         	<ion-item>
             	<ion-label> {{  item?.className  }} :  {{  item?.probability | percent  }} </ion-label>
           	</ion-item>
         }

     </ion-list>
 }
 ...

  4. (STOP 3) Compruebe el resultado en el navegador.

Documentación

Fundamental

Términos

tensorflow, teachable machine

Referencias