Xamarin, Xamarin.Forms

Microsoft Cognitive Services [ComputerVision.API && Xamarin.Forms] DEMO


ComputerVision001.PNG

Computer Vision API:

Reconoce y extrae elementos relevates de una imagen a partir de la misma.

¿Como funciona Computer Vision?

La Computer Vision API devuelve información sobre el contenido visual encontrado en una imagen. En donde utilizando etiquetas, descripciones y modelos específicos de dominio podemos identificar el contenido y etiquetarlo con confianza. Ademas de poder aplicar la configuración de adultos / racy para permitir la restricción automatizada de contenido para adultos.

¿Cual es la finalidad de esta API?
Obtener datos de interés para el usuario, en este caso es el de identificar elementos que componen una imagen.

DEMO

Como se vio en el tutorial pasado (Emotion API), debemos de contar con una cuenta de Microsoft Cognitive Services, para esto ingresemos al portal (http://microsoft.com/cognitive).

Como ya suponen, para este demo utilizaremos los servicios de Computer Vision.
Recordemos que solo basta con darle en Show para poder acceder a la llave, que utilizaremos mas adelante.

computervision

Ahora si, comencemos por crear un nuevo proyecto en Visual Studio de Xamarin Forms (Visual C# – Cross Platform – Blank App (Xamarin.Forms Portable)).

vs_computervision01

Después de haber creado nuestra aplicación, repitamos los mismos pasos que vimos en el tutorial de Emotion API hasta donde añadimos en la carpeta de Class el archivo de ServiceEmotions, el cual no se llamara así, si no ServiceComputerVision e inserta el código a continuación:


using System;
using System.IO;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using System.Collections.Generic;
using Microsoft.ProjectOxford.Vision;
using Microsoft.ProjectOxford.Vision.Contract;

namespace Demo_MSCS_ComputerVisionApp.Class
{
    public class ServiceComputerVision
    {
        static string key = "LLAVE-COMPUTERVISION";
        public static async Task<AnalysisResult> GetDescriptionImage(Stream imageStream)
        {
            VisionServiceClient client = new VisionServiceClient(key);
            VisualFeature[] features =
            {
                VisualFeature.Tags,
                VisualFeature.Categories,
                VisualFeature.Description,
                VisualFeature.Adult,
                VisualFeature.ImageType,
                VisualFeature.Color,
                VisualFeature.Faces
            };

            return await client.AnalyzeImageAsync(imageStream, features.ToList(), null);
        }
    }
}

¿Que estoy haciendo?

El método anterior hace una consulta al servicio ComputerVision, le pasa un Stream de la imagen que se desea analizar por el servicio, y se devuelve precisamente el resultado del análisis en un objeto AnalysisResult, que contiene gran cantidad de información que se mostrará en una página.

Interacción con el usuario….

Bien, es hora de añadir un Forms Xaml Page a la carpeta de Pages a la cual podremos llamar ComputerVisionPage.

vs_computervision02

A continuación se muestra el código XAML, seguido del código C# de la misma:

XAML


<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"              xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"              x:Class="Demo_MSCS_ComputerVisionApp.Pages.ComputerVisionPage">

  <StackLayout VerticalOptions="FillAndExpand">

    <Image x:Name="imgPicture" WidthRequest="150" HeightRequest="150" Aspect="AspectFit"/>

    <Button x:Name="btnCam" x:Id="btnCam" Text="Usar Cámara" Clicked="btnPicture_Clicked"/>
    <Button x:Name="btnGalery" x:Id="btnGalery" Text="Seleccionar de la Galería" Clicked="btnPicture_Clicked"/>
    <Button x:Name="btnAnalysisImage" Text="Analizar Imagen" Clicked="btnAnalysisImage_Clicked"/>

    <Label x:Name="lblAdult" Text="---" />
    <Label x:Name="lblRacist" Text="---" />
    <Label x:Name="lblCategorys" Text="---" />
    <Label x:Name="lblColor" Text="---" />
    <Label x:Name="lblTags" Text="---" />
    <Label x:Name="lblCaptions" Text="---" />
    <Label x:Name="lblFace" Text="---" />
    <Label x:Name="lblTags2" Text="---" />

  </StackLayout>
</ContentPage>

C#


using System;
using System.IO;
using System.Linq;
using Demo_MSCS_ComputerVisionApp.Class;

using Xamarin.Forms;

namespace Demo_MSCS_ComputerVisionApp.Pages
{
    public partial class ComputerVisionPage : ContentPage
    {
        static Stream streamCopy;

        async void btnPicture_Clicked(object sender, EventArgs e)
        {
            var useCam = ((Button)sender).Text.Contains("Cámara");

            var file = await ServiceImage.TakePicture(useCam);
            imgPicture.Source = ImageSource.FromStream(() =>
            {
                var stream = file.GetStream();
                streamCopy = new MemoryStream();
                stream.CopyTo(streamCopy);
                stream.Seek(0, SeekOrigin.Begin);
                file.Dispose();
                return stream;
            });
        }

        public ComputerVisionPage()
        {
            InitializeComponent();
        }

        async void btnAnalysisImage_Clicked(object sender, EventArgs e)
        {
            if (streamCopy != null)
            {
                streamCopy.Seek(0, SeekOrigin.Begin);
                var vision = await ServiceComputerVision.GetDescriptionImage(streamCopy);

                var adult = vision.Adult;
                lblAdult.Text = String.Format("Contenido Adulto: {0} ({1})", adult.IsAdultContent, adult.AdultScore.ToString("P4"));
                lblRacist.Text = String.Format("Contenido Racista: {0} ({1})", adult.IsRacyContent, adult.RacyScore.ToString("P4"));

                var categorys = vision.Categories;
                lblCategorys.Text = "Categorias: ";
                foreach (var cat in categorys.ToList())
                {
                    lblCategorys.Text = lblCategorys.Text + String.Format("{0} ({1}), ", cat.Name, cat.Score.ToString("P4"));
                }

                var color = vision.Color;
                lblColor.Text = String.Format("Accent Color: {0}\nColor dominante:\nFondo: {1}\tFrente: {2}\n¿Es Blanco y Negro? {3}\nColores dominantes: ",
                    color.AccentColor, color.DominantColorBackground,
                    color.DominantColorForeground, color.IsBWImg);

                foreach (var x in color.DominantColors.ToList())
                { lblColor.Text = lblColor.Text + x + ", "; }

                var description = vision.Description;
                lblTags.Text = "Tags: ";
                lblCaptions.Text = "Captions: ";

                foreach (var tag in vision.Description.Tags.ToList())
                { lblTags.Text = lblTags.Text + tag + ", "; }

                //vision.Description.Captions.ToList().ForEach(cap => lblCaptions.Text = lblCaptions.Text + String.Format("{0} ({1}), ", cap.Text, cap.Confidence.ToString("P4")));
                foreach (var cap in vision.Description.Captions.ToList())
                {
                    lblCaptions.Text = lblCaptions.Text + String.Format("{0} ({1}), ", cap.Text, cap.Confidence.ToString("P4"));
                }

                var faces = vision.Faces;
                lblFace.Text = "Caras: ";
                //caras.ToList().ForEach(cara => lblCaras.Text = lblCaras.Text + String.Format("{0} ({1}), ", cara.Gender, cara.Age));
                foreach (var face in faces.ToList())
                {
                    lblFace.Text = lblFace.Text + String.Format("{0} ({1}), ", face.Gender, face.Age);
                }

                var tags = vision.Tags;
                lblTags2.Text = "Tags 2: ";

                //tags.ToList().ForEach(tag => lblTags2.Text = lblTags2.Text + String.Format("{0} - {1} ({2}), ", tag.Name, tag.Hint, tag.Confidence.ToString("P4")));

                foreach (var tag in tags.ToList())
                {
                    lblTags2.Text = lblTags2.Text + String.Format("{0} - {1} ({2}), ", tag.Name, tag.Hint, tag.Confidence.ToString("P4"));
                }
            }
        }
    }
}

Toca el turno a la pagina principal con la cual el usuario interactuará, para esto agreguemos otro Forms Xaml Page en la misma carpeta (Pages) y nombremosla StartPage.

A continuación el código XAML y C#:

XAML


<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"              xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"              x:Class="Demo_MSCS_ComputerVisionApp.Pages.StartPage">
  <StackLayout>
    <Button x:Name="btnVision" Text="Analizar Imagen" Clicked="btnVision_Clicked"/>
  </StackLayout>

</ContentPage>

C#


using System;
using Xamarin.Forms;

namespace Demo_MSCS_ComputerVisionApp.Pages
{
    public partial class StartPage : ContentPage
    {
        public StartPage()
        {
            InitializeComponent();
        }
        void btnVision_Clicked(object sender, EventArgs e)
        {
            Navigation.PushAsync(new ComputerVisionPage());
        }

    }
}

Después de esto, deberemos de modificar el archivo App.cs para que nuestra pagina de inicio sea la que acabamos de crear.


public App()
{
//The root page of your application
MainPage = new NavigationPage(new Pages.StartPage());
}

Ya por ultimo, compila y ejecuta tu aplicación.

Versión Android

Screenshot_2016-11-17-15-01-49.png

Si desean probar en Windows solo deben de repetir los pasos realizados en el articulo de Emotion API.

Con esto hemos terminado, ahora ya tenemos una app hecha en Xamarin.Forms utilizando los MS Cognitive Services – ComputerVision.

Agradezco a mi amigo Luis Beltran por su apoyo en la realización de este material.

Mas información :

Si gustan acceder a la solución completa de este ejemplo, la pueden descargar desde aquí.

githubgallery

Anuncios

2 thoughts on “Microsoft Cognitive Services [ComputerVision.API && Xamarin.Forms] DEMO”

Responder

Por favor, inicia sesión con uno de estos métodos para publicar tu comentario:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s