Ensayo: Aplicando el modelo de clasificación supervisado en Power Apps
Tutorial paso a paso de como utilizar un modelo de clasificación en Power Platform mediante una Power App Canvas y AI Builder para detectar automáticamente razas de perro.
Partiendo del post anterior Machine Learning en Power Platform: Creando un modelo de clasificación supervisado (thepowerplatformcave.com), hoy veremos paso a paso como utilizar el modelo de clasificación en Power Platform mediante una Power App Canvas para detectar automáticamente razas de perro.
Los objetivos, requisitos y resultado esperado de este ensayo son los siguientes:
Creando la aplicación
Vamos a crear desde cero nuestra aplicación desde cero.
- Seleccionamos Aplicación de lienzo desde cero
- Establecemos un Nombre y seleccionamos el modo Teléfono y finalmente le damos a Crear
Una vez creamos la aplicación tenemos que agregar nuestro modelos de AI Builder para poder utilizarlo
3. Seleccionamos Datos -> Agregar Datos -> Seleccionar nuestro modelo entrenado
Ya podremos utilizar nuestro modelo en la aplicación.
La aplicación va a estar formada por 4 Pantallas:
- Pantalla Principal: Pantalla inicial para elegir el método que se desea utilizar
- Foto Galeria: identificador de la raza a través de una foto en la galería
- Foto Camara: pantalla para realizar la foto con la cámara del dispositivo
- Foto Camara Identificar: Pantalla similar a Foto Galeria, identificando en este caso la raza a través de la foto realizada en la cámara.
Vamos a realizar el diseño de la aplicación completa y posteriormente introduciremos la funcionalidad
4. Creamos las 4 Pantallas el introducimos los nombres mencionados previamente
5. Introducimos un Rectángulo como cabecera y lo ajustamos.
6. Introducimos 2 Etiquetas de Texto con los mensajes:
“Identificador de Raza” como título
“Seleccionar método para introducir la imagen”
7. Introducimos 2 Botones y les ponemos el Texto ”Usar Foto Galería” y “Realizar foto con cámara”
8. Introducimos 2 Imágenes Multimedia
Para seguir con el modelo de bunas prácticas vamos a establecer a nuestros botones los nombres de:
- Boton a Foto Galeria
- Boton a Foto Camara
Ajustamos los elementos que hemos introducido.
9. Introducimos un Rectángulo como cabecera y lo ajustamos.
10. Introducimos 2 Etiquetas de Texto con los mensajes:
“Identificador desde Galería”
“Raza Detectada”
11. Introducimos 1 Botón y le ponemos el texto “Identificar raza”
12. Introducimos Icono < para volver atrás
13.Introducimos un Entrada de Texto
14 Introducimos un Agregar imagen
Para seguir con el modelo de bunas prácticas vamos a establecer los siguientes nombres a los elementos:
- Botón: Boton identificar raza galeria
- Entrada de texto: Nombre raza detectada
- Icono atrás: Icono atrás 1
- Al introducir al Agregar Imagen se crea un componente llamado UploadedImage1 que cambiamos el nombre por ImagenGaleria
Ajustamos nuevamente los elementos que hemos introducido.
15. Introducimos un Rectángulo como cabecera y lo ajustamos.
16. Introducimos 1 Etiquetas de Texto con los mensaje “Utilizar Cámara”
17. Introducimos 1 Botón y le ponemos el texto “Utilizar esta foto”
18. Introducimos Icono < para volver atrás
19. Introducimos un Icono cámara para hacer la foto
20. Introducimos un Agregar imagen
21. Agregamos una Cámara
Para seguir con el modelo de bunas prácticas vamos a establecer los siguientes nombres a los elementos:
- Botón: Boton utilizar foto
- Icono atrás: Icono atrás 2
- Icono cámara: Botón Camara
- Agregar Imagen: ImagenCamara
Ajustamos nuevamente los elementos que hemos introducido.
22. Introducimos un Rectángulo como cabecera y lo ajustamos.
23. Introducimos 2 Etiquetas de Texto con los mensajes:
“Identificador desde Foto”
“Raza Detectada”
24. Introducimos 1 Botón y le ponemos el texto “Identificar raza” y lo nombramos Boton identificar raza 2
25. Introducimos Icono < para volver atrás y lo nombramos Icono atrás 2
26.Introducimos un Entrada de Texto
27. Introducimos una Imagen
Una vez que tenemos realizado el diseño de la app procederemos introducir su funcionalidad
28. Introducimos una imagen en Image1 previamente descargada en nuestro dispositivo. Para ello vamos a la columna de propiedades en la parte derecha de la pantalla y seleccionamos Propiedades-> Imagen-> +Agregar un archivo de imagen. Se nos abrirá un menú y elegimos la foto deseada. En el caso de quedar desajustada podemos explorar la opción Posición de imagen
29. Repetimos el mismo procedimiento con Image2.
30. Introducir la opción de navegación en los botones al ser seleccionados para movernos entre las pantallas:
- Boton a Foto Galeria -> Navegar a la pantalla Foto Galeria.
- Boton a Foto Camara -> Navegar a la pantalla Foto Camara.
Esto se puede realizar de 2 maneras:
a. Seleccionando el botón que queremos modificar y seguir la secuencia Acción -> Navegar -> Seleccionamos la pantalla a la que queremos ir -> ScreenTransition para incorporar efectos de transición si se quisiera
b. Escribiendo directamente la formula sobre la propiedad del botón OnSelect.
Ahora queremos que al pulsar el botón “Identificar raza”, llame a nuestro modelo de predicción para averiguar de que raza se trata y almacene el valor en una variable.
31. En el botón Boton identificar raza 1 vamos a la propiedad OnSelect y escribimos:
De esta forma creamos una variable local llamada Razadeperro que almacena el valor devuelto por nuestro modelo de predicción.
32. Para visualizar el resultado obtenido ahora en nuestra entrada de texto llamada Nombre raza detectadas iremos a su propiedad Default(Es el valor por defecto que nos muestra) y escribimos:
De esta manera podemos visualizar el resultado.
33. Para volver a la Pantalla Principal repetimos el paso 30 en el Icon1
Primero debemos configurar la cámara para poder utilizarla en nuestro ordenador.
34. Establecer las variables Camera y StreamRate para poder utilizarla desde la webcam del ordenador.
35. Cambiar la propiedad OnSelect del icono con forma de cámara para que almacene en una variable global VarFotoCamara la imagen capturada.
36. Cambiar la propiedad Image del elemento Image3 para visualizar la foto capturada, introduciendo el valor de la variable global que hemos creado previamente.
37. Cambiamos la propiedad OnSelect del botón para navegar a la pantalla Foto Camara Identificar y en el caso de que no haya ninguna foto hecha no nos permita avanzar y que a su vez nos salte un mensaje de error mediante la función lógica If().
38. Para volver a la Pantalla Principal repetimos el paso 30 en el icono
El diseño debería quedar parecido a la siguiente imagen:
39. Cambiamos el valor de la propiedad Image y volvemos a introducir la variable global.
40. Repetimos nuevamente los pasos 31 y 32 para que al pulsar el botón nuestro modelo de AI Builder actúe y nos devuelva y visualicemos la raza de perro, ajustando los nombres de los componentes que vamos a querer.
+Botón:
+Entrada de texto:
41. Para volver a la Pantalla Camara repetimos el paso 30 en el icono
El diseño debería quedar parecido a la siguiente imagen:
Resumen
En este ensayo, algo extenso , hemos visto lo fácil que resulta utilizar nuestro propio modelo de clasificación creando una Power App Canvas, sencilla, usable y a la vez con la potencia que le otorga el modelo de Machine Learning utilizado en AI Builder.
Si estáis interesados en ver este y otros casos en profundidad y os gusta mas el formato en vivo, no os perdáis los siguientes 2 eventos donde hablaremos largo y tendido sobre AI Builder y Power Platform:
Demo y escenarios prácticos de AI Builder: descubre los modelos low code de Inteligencia Artificial
Global Power Platform Bootcamp Barcelona 2022