Hoy en día se están agregando experiencias conversacionales a muchos los servicios que consumimos, ya sea por ejemplo una tienda online o una aplicación móvil. A estos servicios se le incorpora una capa de diálogo para que entiendan en lenguaje natural, aunque por debajo siguen haciendo las funciones que tenían programadas, como por ejemplo reservar un vuelo o un hotel.

De esta forma, podemos desarrollando bots que implementan estas experiencias conversacionales, y desplegarlos en canales como Skype, Telegram, Slack o Facebook Messenger. Gracias al Bot Framework es posible crear un único bot, y a través del Bot Connector, conectarlo a todos los canales.

Los bots los puedes programar tanto en C# como en Node.js, aunque como está basado en APIs REST lo podrás desarrollarlo en el lenguaje que quieras. En este artículo se va a programar en C#.

Además, resulta esencial que los bots incorporen APIs que les permitan interpretar textos o imágenes, trabajar con mapas, entre otras funcionalidades. Para conseguirlo utilizamos los Cognitive Services. En concreto, en este artículo se va a ver cómo incorporar el servicio de Computer Vision a un bot, de manera que al mandarle cualquier imagen, nos describa lo que hay.

El bot solo leerá URLs, pero se le puede añadir la funcionalidad de lectura de imágenes pasadas como un adjunto. Además, sabrá lidiar con los típicos formatos de codificación de imagen, es decir, jpg o png.

Lo primero que hacemos es crearnos un bot de cero, partiendo del template de Visual Studio.

Necesitaremos también el emulador del Bot Framework. Tienes en este enlace todo lo necesario para descargártelo, junto con los primeros pasos.

Será necesario también añadir como referencia el paquete Microsoft.ProjectOxford.Vision. A continuación obtendremos una API Key para poder utilizar el servicio de Computer Vision. Esta clave la podremos conseguir desde la página de Cognitive Services, en la sección Computer Vision.

Una vez tenemos ya nuestra clave, volvemos al Visual Studio y la introducimos en Web.config:

El resto de campos se podrán dejar en blanco, ya que se corresponden con los datos de identificación de Nuestro Bot en caso de que lo queramos subir a Azure como si fuese una WebApp.

Ya tenemos acabada la parte de configuración del Computer Vision y  podemos empezar a programar nuestro bot y a darle forma.

En el Controller lo único que tenemos que hacer es llamar a un método que se encargue de manejar las imágenes que nos lleguen, siempre y cuando recibamos un mensaje. En este caso el mensaje recibido será una URL. Estas líneas que vienen en el template es el único punto de entrada de los mensajes del usuario

El método al que nos redirigimos es bien sencillo y lo que hace es llamar a la API de Computer Vision y nos devuelve lo que hay en la imagen.

Hay que declarar la ApiKey y las visual features como variables en la clase del controlador:

Gracias a las VisualFeatures podremos sacar más información del análisis que hace la API. Por ejemplo se podría utilizar VisualFeature.Adult, si queremos ver si la imagen que analizada tiene contenido adulto y así poder bloquearlo.

Por último, cuando corramos la aplicación, se nos abrirá el navegador con la dirección a la que apuntará el emulador. Simplemente copiamos la URL y le añadimos /api/messages, para introducirla en el emulador. Al igual que antes, si vamos a correr la aplicación en local, no tendremos que meter sus datos de identificación.

http://localhost:3979/api/messages

Ya tenemos listo nuestro bot y podemos empezar a  hacer las primeras pruebas. Escogemos una imagen aleatoria desde nuestro navegador:

Copiamos la URL y la introducimos en el emulador.

Por último, si queremos desplegar el bot en nuestro canal favorito, tenemos una guía muy sencilla, en la que publicaremos el bot como un servicio web en Azure, desplegándolo fácilmente a través del Bot Connector en los canales que queramos.

Con unos sencillos pasos tenemos un bot que nos reconoce cualquier imagen que le mandemos. A partir de aquí se le podrá añadir más funcionalidades, como por ejemplo que no solo reconozca URLs, sino también imágenes adjuntas o que nos detecte las emociones de las personas que salgan en la foto. Aquí  tienes toda la documentación si quieres añadirle más funcionalidades al bot de reconocimiento de imágenes.

¡Espero que te haya resultado útil!

Daniel Ortiz

Developer eXperience

@ortizlopez91