#Coding4Fun – What’s There App, código fuente y ejemplo de uso de #VisionAPI

Hola !

Después del post de ayer, algunas personas me preguntaron un par de cuestiones sobre la App What’s There, así que aprovecharé este post para comentar algunos detalles de la misma.

Antes de crear la app, le expliqué a mi niño con un esquema simple, el funcionamiento de la App

1. El smartphone sacará una foto
2. La foto se procesará con Vision API
3. Vision API nos retornará información sobre lo que se encontró en la foto
4. El smartphone nos hablará con la información de la foto

Luego cree un dibujo muy simple y el Valentino entendió la idea  (espero tu tú también) Así que veamos un poco en detalle cada uno de los pasos de la App.

Empezamos por los prerequisitos, dentro de package manifest necesitamos activar las siguientes capabilities: Internet, Microphone y WebCam.

Para sacar una foto, he reutilizado una función que saca una foto, guarda la misma en un storage local y retorna el archivo creado. Además soporta sacar fotos en “modo silencioso”, en donde el usuario no se entera de que está sacando fotos; y en “modo normal” en el que aparece la ventana del SO para sacar fotos.

El siguiente paso es analizar la foto utilizando VisionAPI. Para esto necesitamos agregar el paquete NuGet Microsoft.ProjectOxford.Vision a nuestro proyecto.

Importante: Para poder utilizar la API necesitamos una cuenta activa en Cognitive Services y copiar las keys correspondientes, lo he explicado en este post.

Ahora si, ya podemos procesar la foto con Vision API. Las siguientes líneas son un ejemplo simple sobre como hacer esto. Es importante remarcar que dentro de Description nos encontramos con la colección de Captions. Cada Caption es una frase completa con la descripción de la foto.

Si queremos darle un toque personal a esta descripción, la colección Tags nos brinda los elementos más importantes encontrados con palabras sueltas.

Finalmente, para el proceso Text to Speech, usé la clase SpeechSynthesizer. Esta clase nos permite obtener el audio stream desde el texto y luego reproducir el mismo utilizando un Media Element.

Y esto es todo ! 4 simples pasos para crear una App más que divertida 

Saludos @ Toronto

-El Bruno

References

• Channel9, What’s There? App video
• El Bruno, What’s There? App post
• GitHub, What’s There? App source code

• Microsoft Cognitive Services: Introducing the Seeing AI app
• CaptionBot
• Cognitive Services, Computer Vision API
• Cognitive Services SDK