Alessandro Del Sole's Blog

{ A programming space about Microsoft® .NET® }
posts - 1894, 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

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

Cognitive Services e utilizzo cross-platform via REST con ASP.NET Core e Visual Studio Code

Abbiamo parlato recentemente dei Cognitive Services di Microsoft, i servizi di intelligenza artificiale basati su Cloud e utilizzabili tramite specifiche API esposte tramite l'approccio REpresentational State Transfer (REST).

Nei post precedenti, per praticità e convenienza per chi proviene da un mondo tipicamente mobile o desktop, sono state utilizzate alcune librerie client che semplificano l'accesso alle API dei servizi. Per quanto ottimale, l'approccio basato su librerie ha due limitazioni: non ci sono librerie per tutti i servizi e non tutte le tipologie di progetto supportano quelle esistenti (negli esempi visti su Xamarin, alcune librerie non vanno sui progetti Windows).

In realtà tutto questo è un non problema, nel senso che è sufficiente chiamare le API tramite REST, normalmente col verbo POST. Per farlo in C#, si usa la classe HttpClient che è disponibile sia in .NET "full" che .NET Core. Quindi vedremo un esempio d'uso basato su ASP.NET Core, dimostrando che, così facendo, questi servizi saranno fruibili anche da altri sistemi come Mac e Linux, olter che (ovviamente) Windows.

Nota bene: in questo post prenderò ad esempio i servizi di Computer Vision, ma trattandosi di chiamate REST l'approccio è identico per tutti le altre API di tutti gli altri Cognitive Services.

Il risultato da ottenere

E' risaputo che Web, HTML, CSS et similia non siano propriamente il mio pane Né è mia intenzione insegnare ASP.NET ed MVC quando c'è chi lo fa molto meglio di me e con competenze molto maggiori, io mi barcameno con l'indispensabile. Quindi vorrete perdonare la "bruttezza" dell'interfaccia grafica e l'essenzialità dei controlli utilizzati, ma sono certo che apprezzerete il risultato L'obiettivo da raggiungere è questo:



Quindi, un'applicazione Web creata con ASP.NET Core che consente di selezionare immagini, di farle analizzare dai Cognitive Services e di mostrare il risultato.

Creazione dell'applicazione
Mi baso su una versione di .NET Core basata sulle solution MSBuild, quindi non più project.json. Si, sono ancora versioni in preview, ma il futuro è MSBuild. In particolare sto utilizzando l'SDK 1.0 RC 3 build 004530. All'interno di una cartella, creiamo una nuova applicazione Web chiamata CrossComputerVision utilizzando la command line:

> dotnet new -t web
> dotnet restore

Fatto questo, apriamo la solution con Visual Studio Code:


Perché non uso Visual Studio? Perché magari siete capitati qui da Ubuntu o da un Mac...

Il controller C#
Come sapete, i progetti ASP.NET Core sono basati su MVC, quindi il cuore del lavoro da fare è in un controller. Fondamentalmente, e a fattor comune, i passaggi da eseguire sono i seguenti:

  1. ottenere un riferimento all'oggetto da far analizzare ai cognitive services
  2. trasformarlo in un tipo .NET che possa essere aggiunto agli header della richiesta HTTP POST
  3. istanziare HttpClient e passare le informazioni da aggiungere negli header, inclusa la subscription key
  4. invocare HttpClient.PostAsync
  5. deserializzare da JSON la risposta ottenuta

Nel caso di Computer Vision, Face ed Emotion API, l'oggetto da far analizzare è un'immagine che viene letta sotto forma di Stream e che deve poi essere serializzato in stringa in base 64. Tutti questi passaggi devono trovare espressione sotto forma di codice C#. In questo esempio di livello base, possiamo tranquillamente utilizzare il file HomeController.cs. Al suo interno bisogna definire:

  • un metodo che rappresenti la action da invocare (che chiameremo Vision)
  • un metodo che legga l'immagine selezionata dall'utente sotto forma di Stream
  • un metodo che converta lo stream in ToBase64String
  • l'implementazione vera e propria della action che costruirà la richiesta HTTP, che invocherà il servizio tramite HttpClient.PostAsync e che deserializzerà la risposta.

Ecco il codice del controller:

L'oggetto IFormFile rappresenta un file inviabile tramite HttpRequest. Ricordatevi di sostituire il placeholder con la vostra subscription key, che è la stessa utilizzata nei post precedenti. Notate la parte di deserializzazione tramite JObject. Qui è stata semplificata al massimo, proprio per non complicare il codice stesso. E' chiaro che le elaborazioni di deserializzazione possono essere migliorate e più approfondite per rispettare lo schema restituito dal servizio, piuttosto che ottenere l'intera risposta sotto forma di un'intera stringa.

La View
La pagina in cui selezionare l'immagine e visualizzare il risultato dell'analisi va creata all'interno della cartella Views\Home e si chiamerà Vision.cshtml. E' definita in modo essenziale: c'è un oggetto form in cui ci sono label per la visualizzazione di testo ma soprattutto l'elemento input per la selezione del file e l'altro input, un button per avviare l'upload. Nella parte sottostante c'è un controllo img per visualizzare l'immagine prescelta e una label che visualizzerà il risultato dell'analisi.

Le informazioni vengono recuperate dall'oggetto ViewData tramite il cosiddetto model-binding di MVC. Ecco il markup:


La pagina dovrà poi essere collegata al layout aggiungendo la seguente riga nel file Views\Shared\_Layout.cshtml insieme alle righe omologhe:

<li><a asp-area="" asp-controller="Home" asp-action="Vision">Vision</a></li>

E servirà a finalizzare l'associazione della pagina col controller e la relativa action.

Da Visual Studio Code sarà poi sufficiente attivare gli strumenti di debug e avviare l'applicazione nel browser secondo la configurazione .NET Core Launch (Web).

Cross-platform?

Beh, chiaramente si. Ecco il risultato su Ubuntu:



Come anticipato all'inizio, ricorrere all'approccio basato su HTTP e REST rende l'utilizzo dei Cognitive Services indipendente da piattaforme, linguaggi e strumenti di sviluppo, non è assolutamente ristretto a Computer Vision e porta questi strumenti di intelligenza artificiale Microsoft pressoché ovunque.

Alessandro

Print | posted on lunedì 6 febbraio 2017 00:00 | Filed Under [ Visual Studio Code ]

Powered by:
Powered By Subtext Powered By ASP.NET