Bots (Primera parte): Creando un bot con Microsoft Bot Framework, LUIS y Face API

¡Hola! En esta entrada vamos a desarrollar un bot que reconozca mensajes del usuario que serán procesados e interpretados como instrucciones para analizar fotografías y mostrar un resultado. Las tecnologías que vamos a utilizar son las siguientes:

 

• Bot Framework, para el diseño del bot
• Bot Emulator, para la prueba inicial del bot
• LUIS, para interpretar los mensajes del usuario (lenguaje natural) y traducirlo a instrucciones que el bot puede interpretar
• Face API, para analizar las imágenes suministradas

 

Cabe mencionar que esta entrada es una serie de dos publicaciones. En el próximo post mostraré como registar nuestro Bot para que nuestros clientes puedan acceder a él; una aplicación cliente será Facebook Messenger (o Telegram) y la segunda la desarrollaremos nosotros con Xamarin.

 

Parte 1. Creación del proyecto en LUIS

Ingresa al sitio https://www.luis.ai/ y regístrate o inicia sesión en caso de que ya tengas una cuenta.

 

Da clic en Crear nueva app.

 

Registra los datos de la nueva aplicación, por ejemplo:

 

Del dashboard, selecciona Entidades y haz clic en el botón Crear nueva entidad

 

Ingresa el nombre de entidad Nombre y selecciona el tipo Simple

 

Cuando la entidad ha sido creada, da clic en el botón Agregar dominio de entidad preconstruida

 

Selecciona edad de la lista de opciones

 

A continuación accede a Intenciones (en el menú lateral) y da clic en Crear nueva intención

 

El nombre de la intención es Saludar

 

En la siguiente pantalla podrás colocar casos de uso (utterances) de esta intención. Escribe el texto siguiente y da enter:

 

Observa que el texto ha sido trasladado a la sección Utterances y la edad se ha detectado automáticamente:

 

Haz clic sobre tu nombre y, del menú que aparece, asígnalo a la entidad Nombre

 

La utterance aparecerá de la siguiente manera:

 

Escribe 4 ejemplos más, similares a los siguientes:

 

Una vez finalizada la generación de ejemplos, regresa a la sección Entidades y crea una nueva Entidad. El nombre de este nuevo elemento es Foto y su tipo es Lista.

 

En la siguiente pantalla, escribe foto en la sección Values

 

Una vez creado el valor, observa que puedes escribir sinónimos. Escribe las palabras fotografía, imagen, retrato, rostro, foto y algún otro que se te ocurra.

 

Ahora regresa a la sección Intenciones y crea una nueva Intención. El nombre de esta intención es EnviarImagen

 

Ahora en los utterances escribe el siguiente texto

 

Observa que al ser agregado, la palabra foto ha sido reconocida como una de las entidades:

 

Introduce los siguientes casos de uso, utilizando los sinónimos asignados previamente para que observes cómo son reconocidos como miembros de la misma entidad:

 

La última intención que vamos a generar se llama AnalizarImagen:

 

Escribe el caso de uso Analizar rostro

 

Como seguramente esperabas, rostro se identifica como miembro de la entidad Foto. Agrega otros 4 casos, por ejemplo:

 

Con estas intenciones, casos de uso y entidades generadas, vamos a entrenar nuestro modelo. Para ello, en el menú superior haz clic en Train.

 

Espera a que finalice el proceso de entrenamiento…

 

Y una vez concluido, da clic en Test. Escribe el ejemplo quisiera subir un rostro y observa que la evaluación corresponde con la intención esperada (EnviarImagen). Además, la entidad ha sido detectada (Foto).

 

Puedes hacer otras pruebas:

 

E incluso por supuesto, probar con casos que no aparecen en nuestro entrenamiento, por ejemplo el mensaje “descubrir la emoción mostrada en la foto”

 

Para concluir con esta sección, vamos a publicar el proyecto. Da clic en el menú superior Publish y luego en el botón Publish

 

Una vez publicado el proyecto, en la misma página aparece la sección Recursos y Llaves. Copia la llave y el endpoint que aparece del lado derecho

 

Finalmente, accede a la sección Settings y toma nota del ID de aplicación. Cópialo.

Con esto hemos creado un reconocedor de lenguaje natural que identifica ciertos comandos y patrones.

 

Parte 2. Face API Cognitive Service

En esta parte vamos a generar desde Azure un proyecto de Face API Cognitive Service, que es el que se encargará de detectar la emoción en una imagen suministrada (primero desde el bot, luego desde la imagen). Hay cuenta gratuita para usar el servicio, por lo que no tendrá costo.

 

Ingresa al portal de Azure. Da clic en Todos los servicios –> AI + Cognitive Services –> Face API

 

Ahora ingresa la información solicitada:

• Un nombre (para identificar tu aplicación)
• Suscripción (en caso de incurrir en algún costo, pero recuerda que hay tier gratuito)
• Ubicación (selecciona un servidor lo más cercano posible a la ubicación de los usuarios de tu app)
• Plan de tarifa (elige F0, que es el Free Tier).
• Crea un grupo de recursos o selecciona uno que tengas (sirve para agrupar servicios relacionados)

 

Da clic en Crear.

 

 

A continuación, espera a que se aprovisione el servicio. Recibirás una notificación cuando el proceso finalice.

 

Da clic en Ir al recurso y accederás a la página de Resumen de tu servicio. Identifica el endpoint y cópialo en un bloc de notas. Es la URL a la que enviaremos nuestras peticiones. Da clic además en Mostrar llaves de acceso:

 

Copia la primer llave que aparece. La utilizaremos al realizar las llamadas a nuestro servicio para que éstas sean autorizadas.

 

¡Estamos listos para crear el bot!

 

Parte 3. Creación y prueba del bot

(Descarga el código fuente de este enlace)

 

En primer lugar debes descargar el Bot Template del siguiente enlace: https://marketplace.visualstudio.com/items?itemName=BotBuilder.BotBuilderV3

 

Procede a instalarlo a continuación (debes tener Visual Studio cerrado)

 

Una vez instalado, abre Visual Studio y crea un nuevo proyecto de tipo Bot Builder Echo Bot (dentro de la categoría Bot Framework). El nombre del proyecto es FaceBot

 

Una vez generado el proyecto, haz un Build inicial (compilación) para que actualice las referencias (como puedes ver en la imagen, éstas no son reconocidas inicialmente)

 

Ahora da clic derecho sobre el proyecto (en el explorador de soluciones) y elige la opción Administrar paquetes Nuget. Vamos a instalar los siguientes:

 

Face API (Microsoft.ProjectOxford.Face) que servirá para analizar la imagen suministrada

 

Agrega las siguientes carpetas al proyecto:

• Servicios
• Modelos
• Helpers

 

En la carpeta Helpers agrega la clase Constantes, con el código siguiente:

 

Ahora, en la carpeta Modelos crea la clase Emocion, cuyo código es el siguiente:

 

También agrega la clase Persona, cuyo código se muestra a continuación:

 

En la carpeta Servicios crea la clase ServicioFace y agrega el código siguiente

 

A continuación crearemos la clase DialogoFace como elemento dentro de la carpeta Dialogs. El código es el siguiente:

 

Abre la clase MessagesController que se encuentra dentro de la carpeta Controllers. En el método Post se encuentra un if que detecta si el tipo de actividad es un mensaje con activity.GetActivityType() == ActivityTypes.Message. En caso afirmativo establece una conversación con RootDialog. Reemplaza RootDialog por nuestro diálogo DialogoFace. El código final de la clase es el siguiente:

 

Ahora que hemos terminado el código de nuestro bot, localiza las propiedades (Properties) del proyecto. En la sección Compilación localiza  la URL de tu proyecto y también cambia la Acción de inicio a Página específica, seleccionando default.htm

 

Ahora compila y ejecuta el proyecto; si todo sale bien, aparecerá la siguiente pantalla:

 

En caso de que no aparezca, simplemente introduce la URL de tu proyecto y podrás acceder a dicha página. Deja tu proyecto en ejecución, ¡pues es hora de probarlo!

 

Parte 4. Prueba del bot

Descarga el Bot Emulator desde el siguiente enlace:  http://emulator.botframework.com/ Debes seleccionar la que corresponda a tu plataforma

 

Procede con la instalación. Una vez finalizado este proceso, ejecútalo. Aparecerá la siguiente pantalla:

 

Haz clic en el enlace create a new bot configuration. Coloca un nombre, seguido de  la URL del bot (la base la obtienes del proyecto)  y da clic en Save and connect.

 

Una vez guardado el acceso directo al bot, observa que intentará hacer una conexión al mismo. Debería ser exitosa si el proyecto está en ejecución.

 

¡Vamos a enviarle un mensaje al bot!

 

Probemos con el envío de imágenes:

 

Y finalmente procedemos a analizarla:

 

Como puedes ver, nuestro bot recibe mensajes, los interpreta y detecta la intención gracias a LUIS (así como detectar elementos como el nombre y la imagen). Finalmente, el servicio de Face API analiza la imagen y devuelve la emoción reflejada.

 

Por cierto, en mi canal de YouTube también puedes seguir el paso a paso del desarrollo de esta app:

 

Hasta aquí dejamos esta entrada. En la próxima publicación,  como mencioné con anterioridad, vamos a publicar nuestro Bot para que sea accesible desde otros canales, ya sea uno altamente conocido (como Telegram, Skype, Facebook Messenger, etc.) yo una aplicación propia (desarrollada en Xamarin por ejemplo).

 

¡Espero que la sesión haya sido de interés para tí!