#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

image

Luego cree un dibujo muy simple y el Valentino entendió la idea Open-mouthed smile (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.

image

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.

image

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

image

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.

image

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.

image

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

Saludos @ Toronto

-El Bruno

References

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s