Bot con reconocimiento de imágenes
La forma de interactuar con aplicaciones y servicios cambia constantemente, y hoy en día se están agregando experiencias conversacionales a muchos de 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 desarrollar 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.
El bot framework pone a nuestra disposición dos SDKs: el de .NET y el de Node.js, pero se puede utilizar también la API REST del framework para desarrollar el bot en el lenguaje que prefieras. En este artículo veremos un ejemplo usando C# con el SDK de .NET.
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 este contiene.
En nuestro ejemplo, 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. Una vez hayas descargado el template, copia el .zip y pégalo en C:\Users\[User Name]\Documents\Visual Studio [Version]\Templates\Project Templates.
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:
<configuration>
<appSettings>
<!-- update these with your BotId, Microsoft App Id, your Microsoft App Password, and Microsoft Vision API Key-->
<add key="BotId" value="YourBotId" />
<add key="MicrosoftAppId" value="" />
<add key="MicrosoftAppPassword" value="API KEY HERE!" />
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.
if (activity.Type == ActivityTypes.Message)
{
var connector = new ConnectorClient(new Uri(activity.ServiceUrl));
string message;
try
{
message = "I think it's " + await this.GetCaptionAsync(activity);
}
catch (Exception e)
{
message = "Oops! Something went wrong. Try again later.";
Trace.TraceError(e.ToString());
}
Activity reply = activity.CreateReply(message);
await connector.Conversations.ReplyToActivityAsync(reply);
}
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.
public async Task<string> GetCaptionAsync(Activity activity)
{
var client = new VisionServiceClient(ApiKey);
AnalysisResult analysisResult = await client.AnalyzeImageAsync(activity.Text, VisualFeatures);
Debug.WriteLine(analysisResult.Categories[0].Name.Split('_')[0]);
return analysisResult.Description.Captions[0].Text;
}
Hay que declarar la ApiKey y las visual features como variables en la clase del controlador:
private static readonly string ApiKey = WebConfigurationManager.AppSettings["MicrosoftVisionApiKey"];
private static readonly VisualFeature[] VisualFeatures = { VisualFeature.Description, VisualFeature.Categories };
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.
https://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
Technical Evangelist Intern
@ortizlopez91