Alessandro Del Sole's Blog

{ A programming space about Microsoft® .NET® }
posts - 1908, comments - 2047, trackbacks - 352

My Links

News

Your host

This is me! Questo spazio è dedicato a Microsoft® .NET®, di cui sono molto appassionato :-)

Cookie e Privacy

Disabilita cookie ShinyStat

Microsoft MVP

My MVP Profile

Microsoft Certified Professional

Microsoft Specialist

Xamarin Certified Mobile Developer

Il mio libro su VB 2015!

Pre-ordina il mio libro su VB 2015 Pre-ordina il mio libro "Visual Basic 2015 Unleashed". Clicca sulla copertina per informazioni!

Il mio libro su WPF 4.5.1!

Clicca sulla copertina per informazioni! E' uscito il mio libro "Programmare con WPF 4.5.1". Clicca sulla copertina per informazioni!

These postings are provided 'AS IS' for entertainment purposes only with absolutely no warranty expressed or implied and confer no rights.
If you're not an Italian user, please visit my English blog

Le vostre visite

I'm a VB!

Guarda la mia intervista a Seattle

Follow me on Twitter!

Altri spazi

GitHub
I miei progetti open-source su GitHub

Article Categories

Archives

Post Categories

Image Galleries

Privacy Policy

Xamarin.Forms e i Cognitive Services di Microsoft - Computer Vision API

Dopo aver parlato, nell'ambito dei Microsoft Cognitive Services, di Face ed Emotion API nei post precedenti, iniziamo a parlare delle Computer Vision API. Cosa ci permettono di fare? Per capirlo bisogna distinguerle in tre parti, ognuna delle quali occupa anche un post specifico:

  • Vision. Analizza una foto ed è in grado di descriverne il contenuto producendo un testo in linguaggio naturale, oltre a rilevare la tipologia di contenuto (offensivo, razziale), i colori più evidenti e di generare automaticamente una serie di tag per categorizzare il contenuto stesso.
  • OCR. Data un'immagine con del testo, restituisce il riconoscimento dei caratteri. Sebbene OCR sia qualcosa che esiste da sempre, ora abbiamo un servizio alla portata di tutti che riconosce il testo anche su immagini che contengono altri elementi e, by default, in varie lingue.
  • Celebrity recognition. Riconoscimento di persone famose all'interno di immagini. Come poi approfondiremo, questo servizio non è così banale perché si basa sull'avere un database estendibile di categorie di persone.
In questo post parliamo di Vision e lo facciamo, come le volte scorse, all'interno di un'app multi-piattaforma scritta con Xamarin.Forms e Visual Studio 2015. L'app in questione è costituita da un progetto Xamarin.Forms basato su Portable Class Library.

Le Librerie
Al pari degli altri servizi, Computer Vision è un servizio REST che, tramite HTTP, riceve richieste POST e restituisce un risultato in formato JSON. Poiché preferiamo ragionare ad oggetti, possiamo sfruttare un'altra libreria client di Microsoft. Ci occorrono due pacchetti NuGet: il solito Xam.Plugin.Media per la selezione delle immagini, che va a livello di solution, e Microsoft.ProjectOxford.Vision, che invece va solo a livello di PCL. Quest'ultimo si porta dietro anche Newtonsoft.Json che ci tornerà utile quando parleremo di celebrity recognition.

Un consiglio

Con queste API, più che con le precedenti, ci sono di mezzo moltissime classi che rappresentano analisi, risultati, elementi nelle immagini. Descriverle in dettaglio qui non ha particolare senso se non laddove effettivamente necessario (anche perché non serve duplicare la documentazione). Il consiglio è quindi quello di usare gl istrumenti Go to Definition e Peek Definition dell'editor di Visual Studio 2015 per visualizzare la definizione completa dei vari oggetti coinvolti nell'uso di queste API. Non sono classi complicate da capire, dopo tutto.

Gli oggetti con cui lavoriamo
Il nodo centrale è la classe VisionServiceClient, che espone i vari metodi di analisi delle immagini. Con riferimento a computer vision, espone un metodo chiamato AnalyzeImageAsync che richiede due argomenti: l'immagine da analizzare e un array di oggetti VisualFeature, ognuno dei quali rappresenta un'informazione che vogliamo ottenere dalla foto. VisualFeature è un'enumerazione con una serie di membri (l'IntelliSense aiuta in questo senso..) come per esempio Description, Adult, Tags, che permettono di ottenere la descrizione naturale, l'offensività dell'immagine, tag auto-generati. Il risultato restituito da AnalyzeImageAsync è un oggetto di tipo AnalysisResult, una classe che espone proprietà corrispondenti ai valori dell'enum VisualFeature e che, quindi, mappa le informazioni richieste nel risultato fiinale. AnalysisResult è composta in questo modo:

public class AnalysisResult 
{
     public AnalysisResult();
     public Adult Adult { getset; }
     public Category[] Categories { getset; }
     public Color Color { getset; }
     public Description Description { getset; }
     public Face[] Faces { getset; }
     public ImageType ImageType { getset; }
     public Metadata Metadata { getset; }
     public Guid RequestId { getset; }
     public Tag[] Tags { getset; }
 }

Per esempio, la proprietà Adult dell'omonimo tipo restituisce se l'immagine ha contenuti razzisti, per adulti, il valore di approssimazione. Description contiene un array di Caption, ognuno dei quali contiene descrizioni dell'immagine. Come detto, aiutiamoci con l'IntelliSense e Go to/Peek definition per vedere le classi complete.

L'interfaccia grafica
Come anticipato, a questo post ne seguiranno altri due. Possiamo quindi modificare la MainPage da ContentPage a TabbedPage, in modo che ci siano tre schede in questo modo:

<?xml version="1.0" encoding="utf-8" ?>
 <TabbedPage xmlns="http://xamarin.com/schemas/2014/forms"
              xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
              xmlns:local="clr-namespace:adsComputerVisionDemo"
              x:Class="adsComputerVisionDemo.MainPage">
 </TabbedPage>

Nel code-behind, modifichiamo l'ereditarietà da ContentPage a TabbedPage e aggiungiamo alla collection di pagine una nuova chiamata ComputerVisionPage, che poi aggiungeremo realmente al progetto sotto forma di file .xaml:

public partial class MainPage : TabbedPage 
{
     public MainPage()
     {
         InitializeComponent();
         this.Children.Add(new ComputerVisionPage());
     }
}
Nella nuova pagina ComputerVisionPage, definiremo una semplicissima interfaccia i cui controlli sono in binding a un'istanza della classe AnalysisResult e alle sue proprietà, come di seguito:


Notate come ci sia una ListView per elencare i tag auto-generati dal servizio e come per ognuno dei quali ci sia una Label in binding con la sua proprietà Name. Per quanto riguarda la descrizione naturale, viene presa dalla proprietà Text della prima Caption nella property Description.

Il codice
Buona parte del code-behind lo abbiamo visto nei post precedenti e riguarda la scelta dell'immagine tramite fotocamera o dalla galleria, su questo quindi non torno. Il "cuore" del codice in questo caso è un metodo che ho chiamato AnalyzePictureAsync che, dato un array di VisualFeature che vogliamo ottenere (tutte in questo caso), invoca il servizio e restituisce un'istanza di AnalysisResult, poi collegata in binding all'interfaccia:


Il risultato
Il risultato delle Computer Vision API è davvero sorprendente. Questo è un esempio su Android, in cui si vede come il servizio abbia riconosciuto e descritto, in modo totalmente naturale, cosa c'è sulla mia scrivania fornendo altre info come il tipo di contenuto e una serie di tag auto-generati (potete poi scrollare la lista):



Questo invece è il risultato nell'app in versione Universal Windows Platform in esecuzione in modalità desktop, in cui si vede come il servizio abbia riconosciuto molte barche in un porto (che, per dovere di cronaca, è quello di Anzio in provincia di Roma ):



Anche in questo caso il servizio è ancora in preview e quindi certamente non infallibile, ma con un ottimo grado di approssimazione riesce a rilevare il contenuto di un'immagine.

Al momento, la descrizione naturale è in inglese ma con le API di traduzione è possibile ottenere quasi in tempo reale la descrizione stessa in altra lingua.
Nel prossimo post ci occuperemo di Optical Character Recognition tramite Computer Vision API e vedremo la potenza di quest'altro servizio.

Alessandro

Print | posted on martedì 24 gennaio 2017 09:18 | Filed Under [ Xamarin ]

Powered by:
Powered By Subtext Powered By ASP.NET