Esercitazione: Usare Visione artificiale di Azure per generare metadati di immagine in Archiviazione di Azure
In questa esercitazione si apprenderà come integrare il servizio Visione artificiale di Azure in un'app Web per generare metadati per le immagini caricate. Questa operazione è utile per gli scenari di gestione delle risorse digitali (DAM), ad esempio se un'azienda vuole generare rapidamente didascalie descrittive o parole chiave ricercabili per tutte le immagini.
Si userà Visual Studio per scrivere un'app Web MVC che accetta immagini caricate dagli utenti e archivia le immagini nell'archivio BLOB di Azure. Si apprenderà come leggere e scrivere BLOB in C# e usare i metadati blob per allegare informazioni aggiuntive ai BLOB creati. Si invierà quindi ogni immagine caricata dall'utente all'API Visione artificiale di Azure per generare un didascalia e cercare i metadati per l'immagine. Infine, è possibile distribuire l'app nel cloud usando Visual Studio.
Questa esercitazione illustra come:
- Creare un account di archiviazione e contenitori di archiviazione usando il portale di Azure
- Creare un'app Web in Visual Studio e distribuirla in Azure
- Usare l'API Visione artificiale di Azure per estrarre informazioni dalle immagini
- Allegare i metadati alle immagini di Archiviazione di Azure
- Controllare i metadati delle immagini usando Archiviazione di Azure Explorer
Suggerimento
La sezione Usare Visione artificiale di Azure per generare metadati è più rilevante per l'analisi delle immagini . Passare a questa posizione se si vuole solo vedere come l'analisi delle immagini è integrata in un'applicazione stabilita.
Se non si ha una sottoscrizione di Azure, creare un account gratuito prima di iniziare.
Prerequisiti
- Visual Studio 2017 Community Edition o versione successiva, con i carichi di lavoro "Sviluppo ASP.NET e Web" e "Sviluppo di Azure".
- Strumento Archiviazione di Azure Explorer installato.
Creare un account di archiviazione
In questa sezione si userà il portale di Azure per creare un account di archiviazione. Si creerà quindi una coppia di contenitori: una per archiviare le immagini caricate dall'utente e un'altra per archiviare le anteprime delle immagini generate dalle immagini caricate.
Accedere al portale di Azure nel browser. Se viene chiesto di eseguire l'accesso, usare l'account Microsoft.
Per creare un account di archiviazione, selezionare + Crea una risorsa nella barra multifunzione a sinistra. Selezionare quindi Archiviazione, quindi Archiviazione account.
Immettere un nome univoco per l'account di archiviazione nel campo Nome e assicurarsi che accanto venga visualizzato un segno di spunta verde. Il nome è importante, perché costituisce una parte dell'URL tramite cui si accede ai BLOB creati in questo account. Posizionare l'account di archiviazione in un nuovo gruppo di risorse denominato "IntellipixResources" e selezionare l'area più vicina. Per completare, selezionare il pulsante Rivedi e crea nella parte inferiore della schermata per creare il nuovo account di archiviazione.
Nota
Archiviazione nomi di account possono contenere da 3 a 24 caratteri e possono contenere solo numeri e lettere minuscole. Inoltre, il nome immesso deve essere univoco all'interno di Azure. Se un altro utente ha scelto lo stesso nome, si riceverà una notifica che indica che il nome non è disponibile con un punto esclamativo rosso nel campo Nome .
Selezionare Gruppi di risorse nella barra multifunzione a sinistra. Selezionare quindi il gruppo di risorse "IntellipixResources".
Nella scheda visualizzata per il gruppo di risorse selezionare l'account di archiviazione creato. Se l'account di archiviazione non è ancora presente, è possibile selezionare Aggiorna nella parte superiore della scheda fino a quando non viene visualizzato.
Nella scheda dell'account di archiviazione selezionare BLOB per visualizzare un elenco di contenitori associati a questo account.
L'account di archiviazione non ha attualmente contenitori. Prima di poter creare un BLOB, è necessario creare un contenitore in cui archiviarlo. Selezionare + Contenitore per creare un nuovo contenitore. Digitare
photosnel campo Nome e selezionare BLOB come livello di accesso pubblico. Selezionare quindi OK per creare un contenitore denominato "photos".Per impostazione predefinita, i contenitori e il relativo contenuto sono privati. Se si seleziona BLOB come livello di accesso, i BLOB nel contenitore "photos" sono accessibili pubblicamente, ma non rende il contenitore pubblico. Questo è ciò che si vuole perché le immagini archiviate nel contenitore "foto" verranno collegate da un'app Web.
Ripetere il passaggio precedente per creare un contenitore denominato "anteprime", assicurandosi che il livello di accesso pubblico del contenitore sia impostato su BLOB.
Verificare che entrambi i contenitori siano visualizzati nell'elenco dei contenitori per questo account di archiviazione e che i nomi siano digitati correttamente.
Chiudere la schermata "Servizio BLOB". Selezionare Chiavi di accesso nel menu a sinistra della schermata dell'account di archiviazione e quindi selezionare il pulsante Copia accanto a KEY per key1. Incollare questo tasto di scelta nell'editor di testo preferito per usarlo in un secondo momento.
È stato creato un account di archiviazione per contenere le immagini caricate nell'app da compilare e i contenitori in cui archiviare le immagini.
Eseguire Esplora Archiviazione di Azure
Archiviazione di Azure Explorer è uno strumento gratuito che fornisce un'interfaccia grafica per l'uso di Archiviazione di Azure nei PC che eseguono Windows, macOS e Linux. Offre la maggior parte delle stesse funzionalità del portale di Azure e offre altre funzionalità come la possibilità di visualizzare i metadati dei BLOB. In questa sezione si userà il Archiviazione di Microsoft Azure Explorer per visualizzare i contenitori creati nella sezione precedente.
Se non è stato installato Archiviazione Explorer o si vuole assicurarsi di eseguire la versione più recente, passare a http://storageexplorer.com/ e scaricarlo e installarlo.
Avviare Archiviazione Explorer. Se viene chiesto di eseguire l'accesso, usare l'account Microsoft, lo stesso usato per accedere al portale di Azure. Se l'account di archiviazione non viene visualizzato nel riquadro sinistro di Archiviazione Explorer, selezionare il pulsante Gestisci account evidenziato di seguito e assicurarsi che sia l'account Microsoft che la sottoscrizione usata per creare l'account di archiviazione siano stati aggiunti a Archiviazione Explorer.
Selezionare la piccola freccia accanto all'account di archiviazione per visualizzarne il contenuto e quindi selezionare la freccia accanto a Contenitori BLOB. Verificare che i contenitori creati siano visualizzati nell'elenco.
I contenitori sono attualmente vuoti, ma che cambieranno una volta distribuita l'app e si inizia a caricare le foto. Dopo aver installato Archiviazione Explorer semplifica la visualizzazione delle scritture dell'app nell'archiviazione BLOB.
Creare una nuova app Web in Visual Studio
In questa sezione si creerà una nuova app Web in Visual Studio e si aggiungerà il codice per implementare le funzionalità di base necessarie per caricare immagini, scriverle nell'archivio BLOB e visualizzarle in una pagina Web.
Avviare Visual Studio e usare il comando File -> Nuovo -> Progetto per creare un nuovo progetto di applicazione Web di Visual C# ASP.NET denominato "Intellipix" (abbreviazione di "Immagini intelligenti").
Nella finestra di dialogo "Nuova applicazione Web ASP.NET" verificare che MVC sia selezionato. Selezionare OK.
Esaminare la struttura del progetto in Esplora soluzioni. Tra le altre cose, è presente una cartella denominata Controllers che contiene i controller MVC del progetto e una cartella denominata Views che contiene le visualizzazioni del progetto. Si useranno gli asset in queste cartelle e altri durante l'implementazione dell'applicazione.
Usare il comando Debug -> Avvia senza debug di Visual Studio (o premere CTRL+F5) per avviare l'applicazione nel browser. Ecco come l'applicazione ha lo stato attuale:
Chiudere il browser e tornare a Visual Studio. In Esplora soluzioni fare clic con il pulsante destro del mouse sul progetto Intellipix e scegliere Gestisci pacchetti NuGet. Selezionare Sfoglia.
imageresizerDigitare quindi nella casella di ricerca e selezionare il pacchetto NuGet denominato ImageResizer. Infine, selezionare Installa per installare la versione stabile più recente del pacchetto. ImageResizer contiene API che verranno usate per creare anteprime di immagini dalle immagini caricate nell'app. OK eventuali modifiche e accettare eventuali licenze presentate all'utente.
Ripetere questo processo per aggiungere il pacchetto NuGet denominato WindowsAzure.Archiviazione al progetto. Questo pacchetto contiene API per l'accesso a Archiviazione di Azure da applicazioni .NET. OK eventuali modifiche e accettare eventuali licenze presentate all'utente.
Aprire Web.config e aggiungere l'istruzione seguente alla
<appSettings>sezione, sostituendo ACCOUNT_NAME con il nome dell'account di archiviazione creato nella prima sezione e ACCOUNT_KEY con la chiave di accesso salvata.<add key="StorageConnectionString" value="DefaultEndpointsProtocol=https;AccountName=ACCOUNT_NAME;AccountKey=ACCOUNT_KEY" />Importante
Il file Web.config è destinato a contenere informazioni riservate come le chiavi di sottoscrizione e qualsiasi richiesta HTTP a un file con estensione config viene gestita dal motore di ASP.NET, che restituisce un messaggio "Questo tipo di pagina non viene servita". Tuttavia, se un utente malintenzionato è in grado di trovare un altro exploit che consente loro di visualizzare il contenuto di Web.config , sarà in grado di esporre tali informazioni. Per altri passaggi, vedere Protezione delle stringhe di Connessione ion e altre informazioni di configurazione per proteggere ulteriormente i dati Web.config.
Aprire il file denominato _Layout.cshtml nella cartella Views/Shared del progetto. Nella riga 19 modificare "Nome applicazione" in "Intellipix". La riga dovrebbe essere simile alla seguente:
@Html.ActionLink("Intellipix", "Index", "Home", new { area = "" }, new { @class = "navbar-brand" })Nota
In un progetto MVC ASP.NET, _Layout.cshtml è una visualizzazione speciale che funge da modello per altre visualizzazioni. In genere si definiscono il contenuto dell'intestazione e del piè di pagina comune a tutte le visualizzazioni in questo file.
Fare clic con il pulsante destro del mouse sulla cartella Models del progetto e usare il comando Aggiungi -> Classe... per aggiungere un file di classe denominato BlobInfo.cs alla cartella. Sostituire quindi la classe BlobInfo vuota con la definizione di classe seguente:
public class BlobInfo { public string ImageUri { get; set; } public string ThumbnailUri { get; set; } public string Caption { get; set; } }Aprire HomeController.cs dalla cartella Controllers del progetto e aggiungere le istruzioni seguenti
usingall'inizio del file:using ImageResizer; using Intellipix.Models; using Microsoft.WindowsAzure.Storage; using Microsoft.WindowsAzure.Storage.Blob; using System.Configuration; using System.Threading.Tasks; using System.IO;Sostituire il metodo Index in HomeController.cs con l'implementazione seguente:
public ActionResult Index() { // Pass a list of blob URIs in ViewBag CloudStorageAccount account = CloudStorageAccount.Parse(ConfigurationManager.AppSettings["StorageConnectionString"]); CloudBlobClient client = account.CreateCloudBlobClient(); CloudBlobContainer container = client.GetContainerReference("photos"); List<BlobInfo> blobs = new List<BlobInfo>(); foreach (IListBlobItem item in container.ListBlobs()) { var blob = item as CloudBlockBlob; if (blob != null) { blobs.Add(new BlobInfo() { ImageUri = blob.Uri.ToString(), ThumbnailUri = blob.Uri.ToString().Replace("/photos/", "/thumbnails/") }); } } ViewBag.Blobs = blobs.ToArray(); return View(); }Il nuovo metodo Index enumera i BLOB nel
"photos"contenitore e passa una matrice di oggetti BlobInfo che rappresentano tali BLOB alla visualizzazione tramite ASP.NET proprietà ViewBag di MVC. Successivamente, si modificherà la visualizzazione per enumerare questi oggetti e visualizzare una raccolta di anteprime di foto. Le classi che verranno usate per accedere all'account di archiviazione ed enumerare i BLOB, Ovvero Cloud Archiviazione Account, CloudBlobClient e CloudBlobContainer, provengono dal pacchetto WindowsAzure.Archiviazione installato tramite NuGet.Aggiungere il metodo seguente alla classe HomeController in HomeController.cs:
[HttpPost] public async Task<ActionResult> Upload(HttpPostedFileBase file) { if (file != null && file.ContentLength > 0) { // Make sure the user selected an image file if (!file.ContentType.StartsWith("image")) { TempData["Message"] = "Only image files may be uploaded"; } else { try { // Save the original image in the "photos" container CloudStorageAccount account = CloudStorageAccount.Parse(ConfigurationManager.AppSettings["StorageConnectionString"]); CloudBlobClient client = account.CreateCloudBlobClient(); CloudBlobContainer container = client.GetContainerReference("photos"); CloudBlockBlob photo = container.GetBlockBlobReference(Path.GetFileName(file.FileName)); await photo.UploadFromStreamAsync(file.InputStream); // Generate a thumbnail and save it in the "thumbnails" container using (var outputStream = new MemoryStream()) { file.InputStream.Seek(0L, SeekOrigin.Begin); var settings = new ResizeSettings { MaxWidth = 192 }; ImageBuilder.Current.Build(file.InputStream, outputStream, settings); outputStream.Seek(0L, SeekOrigin.Begin); container = client.GetContainerReference("thumbnails"); CloudBlockBlob thumbnail = container.GetBlockBlobReference(Path.GetFileName(file.FileName)); await thumbnail.UploadFromStreamAsync(outputStream); } } catch (Exception ex) { // In case something goes wrong TempData["Message"] = ex.Message; } } } return RedirectToAction("Index"); }Questo è il metodo chiamato quando si carica una foto. Archivia ogni immagine caricata come BLOB nel
"photos"contenitore, crea un'immagine di anteprima dall'immagine originale usando ilImageResizerpacchetto e archivia l'immagine di anteprima come BLOB nel"thumbnails"contenitore.Aprire Index.cshmtl nella cartella Views/Home del progetto e sostituirlo con il codice e il markup seguenti:
@{ ViewBag.Title = "Intellipix Home Page"; } @using Intellipix.Models <div class="container" style="padding-top: 24px"> <div class="row"> <div class="col-sm-8"> @using (Html.BeginForm("Upload", "Home", FormMethod.Post, new { enctype = "multipart/form-data" })) { <input type="file" name="file" id="upload" style="display: none" onchange="$('#submit').click();" /> <input type="button" value="Upload a Photo" class="btn btn-primary btn-lg" onclick="$('#upload').click();" /> <input type="submit" id="submit" style="display: none" /> } </div> <div class="col-sm-4 pull-right"> </div> </div> <hr /> <div class="row"> <div class="col-sm-12"> @foreach (BlobInfo blob in ViewBag.Blobs) { <img src="@blob.ThumbnailUri" width="192" title="@blob.Caption" style="padding-right: 16px; padding-bottom: 16px" /> } </div> </div> </div> @section scripts { <script type="text/javascript" language="javascript"> if ("@TempData["Message"]" !== "") { alert("@TempData["Message"]"); } </script> }Il linguaggio usato qui è Razor, che consente di incorporare codice eseguibile nel markup HTML. L'istruzione
@foreachal centro del file enumera gli oggetti BlobInfo passati dal controller in ViewBag e crea elementi HTML<img>da essi. Lasrcproprietà di ogni elemento viene inizializzata con l'URI del BLOB contenente l'anteprima dell'immagine.Scaricare e decomprimere il file photos.zip dal repository di dati di esempio di GitHub. Si tratta di un assortimento di diverse foto che puoi usare per testare l'app.
Salvare le modifiche e premere CTRL+F5 per avviare l'applicazione nel browser. Quindi selezionare Carica una foto e caricare una delle immagini scaricate. Verificare che nella pagina venga visualizzata una versione di anteprima della foto.
Caricare altre immagini dalla cartella foto . Verificare che vengano visualizzati anche nella pagina:
Fare clic con il pulsante destro del mouse nel browser e selezionare Visualizza origine pagina per visualizzare il codice sorgente per la pagina. Trovare gli
<img>elementi che rappresentano le anteprime dell'immagine. Osservare che gli URL assegnati alle immagini fanno riferimento direttamente ai BLOB nell'archivio BLOB. Ciò è dovuto al fatto che il livello di accesso pubblico dei contenitori viene impostato su BLOB, che rende i BLOB all'interno accessibili pubblicamente.Tornare a Archiviazione di Azure Explorer (o riavviarlo se non è stato lasciato in esecuzione) e selezionare il contenitore nell'account
"photos"di archiviazione. Il numero di BLOB nel contenitore deve essere uguale al numero di foto caricate. Fare doppio clic su uno dei BLOB per scaricarlo e visualizzare l'immagine archiviata nel BLOB.
Aprire il
"thumbnails"contenitore in Archiviazione Explorer. Aprire uno dei BLOB per visualizzare le immagini di anteprima generate dai caricamenti delle immagini.
L'app non offre ancora un modo per visualizzare le immagini originali caricate. Idealmente, la selezione di un'anteprima dell'immagine dovrebbe visualizzare l'immagine originale. Questa funzionalità verrà aggiunta successivamente.
Aggiungere un lightbox per la visualizzazione delle foto
In questa sezione si userà una libreria JavaScript open source gratuita per aggiungere un visualizzatore lightbox che consente agli utenti di visualizzare le immagini originali caricate (anziché solo le anteprime dell'immagine). I file vengono forniti per l'utente. Tutto quello che devi fare è integrarli nel progetto e apportare una piccola modifica a Index.cshtml.
Scaricare i file lightbox.css e lightbox.js dal repository di codice GitHub.
In Esplora soluzioni fare clic con il pulsante destro del mouse sulla cartella Scripts del progetto e usare il comando Aggiungi -> Nuovo elemento per creare un file lightbox.js. Incollare il contenuto del file di esempio nel repository di codice GitHub.
Fare clic con il pulsante destro del mouse sulla cartella "Contenuto" del progetto e usare il comando Aggiungi -> Nuovo elemento per creare un file lightbox.css . Incollare il contenuto del file di esempio nel repository di codice GitHub.
Scaricare e decomprimere il file buttons.zip dal repository dei file di dati GitHub: https://github.com/Azure-Samples/cognitive-services-sample-data-files/tree/master/ComputerVision/storage-lab-tutorial. Dovrebbero essere presenti quattro immagini pulsante.
Fare clic con il pulsante destro del mouse sul progetto Intellipix in Esplora soluzioni e usare il comando Aggiungi -> Nuova cartella per aggiungere una cartella denominata "Images" al progetto.
Fare clic con il pulsante destro del mouse sulla cartella Immagini e usare il comando Aggiungi -> Elemento esistente per importare le quattro immagini scaricate.
Aprire BundleConfig.cs nella cartella "App_Start" del progetto. Aggiungere l'istruzione seguente al
RegisterBundlesmetodo in BundleConfig.cs:bundles.Add(new ScriptBundle("~/bundles/lightbox").Include( "~/Scripts/lightbox.js"));Nello stesso metodo trovare l'istruzione che crea un oggetto
StyleBundleda "~/Content/css" e aggiungere lightbox.css all'elenco dei fogli di stile nel bundle. Ecco l'istruzione modificata:bundles.Add(new StyleBundle("~/Content/css").Include( "~/Content/bootstrap.css", "~/Content/site.css", "~/Content/lightbox.css"));Aprire _Layout.cshtml nella cartella Views/Shared del progetto e aggiungere l'istruzione seguente subito prima dell'istruzione
@RenderSectionnella parte inferiore:@Scripts.Render("~/bundles/lightbox")L'attività finale consiste nell'incorporare il visualizzatore lightbox nella home page. A tale scopo, aprire Index.cshtml (si trova nella cartella Views/Home del progetto) e sostituire il
@foreachciclo con questo:@foreach (BlobInfo blob in ViewBag.Blobs) { <a href="@blob.ImageUri" rel="lightbox" title="@blob.Caption"> <img src="@blob.ThumbnailUri" width="192" title="@blob.Caption" style="padding-right: 16px; padding-bottom: 16px" /> </a> }Salvare le modifiche e premere CTRL+F5 per avviare l'applicazione nel browser. Selezionare quindi una delle immagini caricate in precedenza. Verificare che venga visualizzata una casella di luce e che venga visualizzata una visualizzazione ingrandita dell'immagine.
Selezionare la X nell'angolo in basso a destra della casella di luce per ignorarla.
A questo punto è possibile visualizzare le immagini caricate. Il passaggio successivo consiste nell'eseguire altre operazioni con queste immagini.
Usare Visione artificiale di Azure per generare metadati
Creare una risorsa di Visione
È necessario creare una risorsa Visione artificiale per l'account Azure. Questa risorsa gestisce l'accesso al servizio Visione artificiale di Azure.
Seguire le istruzioni in Creare una risorsa dei servizi di intelligenza artificiale di Azure per creare una risorsa multiservizio o una risorsa di Visione.
Passare quindi al menu per il gruppo di risorse e selezionare la risorsa Visione creata. Copiare l'URL sotto Endpoint in qualsiasi punto sia possibile recuperarlo facilmente in seguito. Selezionare quindi Mostra chiavi di accesso.
Nota
Le nuove risorse create dopo il 1° luglio 2019 useranno nomi di sottodomini personalizzati. Per altre informazioni e un elenco completo degli endpoint a livello di area, vedere Nomi di sottodomini personalizzati per i servizi di intelligenza artificiale di Azure.
Nella finestra successiva, copiare il valore della CHIAVE 1 negli Appunti.
Aggiungere le credenziali di Visione artificiale di Azure
Successivamente, si aggiungeranno le credenziali necessarie all'app in modo che possa accedere alle risorse di Visione artificiale.
Passare al file Web.config nella radice del progetto. Aggiungere le istruzioni seguenti alla sezione <appSettings> del file, sostituendo VISION_KEY con la chiave copiata nel passaggio precedente e VISION_ENDPOINT con l'URL salvato nel passaggio precedente.
<add key="SubscriptionKey" value="VISION_KEY" />
<add key="VisionEndpoint" value="VISION_ENDPOINT" />
Nel Esplora soluzioni. Fare clic con il pulsante destro del mouse sulla soluzione del progetto e scegliere Gestisci pacchetti NuGet. Nella gestione pacchetti visualizzata selezionare Sfoglia, selezionare Includi versione preliminare e cercare Azure.AI.Vision.ImageAnalysis. Selezionare Installa.
Aggiungere il codice di generazione dei metadati
Si aggiungerà quindi il codice che usa effettivamente il servizio Visione artificiale di Azure per creare metadati per le immagini.
Aprire il file HomeController.cs nella cartella controller del progetto e aggiungere le seguenti istruzioni
usingall'inizio del file:using Azure; using Azure.AI.Vision.ImageAnalysis; using System;Passare quindi al metodo Upload, che converte e carica le immagini nell'archiviazione BLOB. Aggiungere il codice seguente immediatamente dopo il blocco che inizia con
// Generate a thumbnail(o alla fine del processo di creazione di BLOB dell'immagine). Questo codice accetta il BLOB contenente l'immagine (photo) e usa Visione artificiale di Azure per generare una descrizione per tale immagine. L'API Visione artificiale di Azure genera anche un elenco di parole chiave applicabili all'immagine. Le parole chiave e la descrizione generate vengono archiviate nei metadati del BLOB per poterle recuperare in un secondo momento.// create a new ImageAnalysisClient ImageAnalysisClient client = new ImageAnalysisClient( new Uri(Environment.GetEnvironmentVariable(ConfigurationManager.AppSettings["VisionEndpoint"])), new AzureKeyCredential(ConfigurationManager.AppSettings["SubscriptionKey"])); VisualFeatures = visualFeatures = VisualFeatures.Caption | VisualFeatures.Tags; ImageAnalysisOptions analysisOptions = new ImageAnalysisOptions() { GenderNeutralCaption = true, Language = "en", }; Uri imageURL = new Uri(photo.Uri.ToString()); ImageAnalysisResult result = client.Analyze(imageURL,visualFeatures,analysisOptions); // Record the image description and tags in blob metadata photo.Metadata.Add("Caption", result.Caption.Text); for (int i = 0; i < result.Tags.Values.Count; i++) { string key = String.Format("Tag{0}", i); photo.Metadata.Add(key, result.Tags.Values[i]); } await photo.SetMetadataAsync();Passare quindi al metodo Index nello stesso file. Questo metodo enumera i BLOB delle immagini archiviate nel contenitore BLOB di destinazione (come istanze di IListBlobItem) e li passa alla visualizzazione dell'applicazione. Sostituire il blocco
foreachin questo metodo con il codice seguente. Questo codice chiama CloudBlockBlob.FetchAttributes per ottenere i metadati allegati di ogni BLOB. Estrae la descrizione generata dal computer (caption) dai metadati e la aggiunge all'oggetto BlobInfo, che viene passato alla vista.foreach (IListBlobItem item in container.ListBlobs()) { var blob = item as CloudBlockBlob; if (blob != null) { blob.FetchAttributes(); // Get blob metadata var caption = blob.Metadata.ContainsKey("Caption") ? blob.Metadata["Caption"] : blob.Name; blobs.Add(new BlobInfo() { ImageUri = blob.Uri.ToString(), ThumbnailUri = blob.Uri.ToString().Replace("/photos/", "/thumbnails/"), Caption = caption }); } }
Testare l'app
Salvare le modifiche in Visual Studio e premere CTRL+F5 per avviare l'applicazione nel browser. Usa l'app per caricare altre immagini, dal set di foto scaricato o dalla tua cartella. Quando si passa il cursore su una delle nuove immagini nella visualizzazione, viene visualizzata una finestra della descrizione comando e viene visualizzata la didascalia generata dal computer per l'immagine.
Per visualizzare tutti i metadati associati, usare Archiviazione di Azure Explorer per visualizzare il contenitore di archiviazione usato per le immagini. Fare clic con il pulsante destro del mouse su un BLOB qualsiasi nel contenitore e scegliere Proprietà. Nella finestra di dialogo, verrà visualizzato un elenco di coppie chiave-valore. La descrizione dell'immagine generata dal computer viene archiviata nell'elemento Captione le parole chiave di ricerca vengono archiviate in Tag0, Tag1e così via. Al termine, selezionare Annulla per chiudere la finestra di dialogo.
Aggiungere la ricerca all'app
In questa sezione si aggiungerà una casella di ricerca alla home page, consentendo agli utenti di eseguire ricerche di parole chiave nelle immagini caricate. Le parole chiave sono quelle generate dall'API Visione di intelligenza artificiale di Azure e archiviate nei metadati BLOB.
Aprire Index.cshtml nella cartella Views/Home del progetto e aggiungere le istruzioni seguenti all'elemento vuoto
<div>con l'attributoclass="col-sm-4 pull-right":@using (Html.BeginForm("Search", "Home", FormMethod.Post, new { enctype = "multipart/form-data", @class = "navbar-form" })) { <div class="input-group"> <input type="text" class="form-control" placeholder="Search photos" name="term" value="@ViewBag.Search" style="max-width: 800px"> <span class="input-group-btn"> <button class="btn btn-primary" type="submit"> <i class="glyphicon glyphicon-search"></i> </button> </span> </div> }Questo codice e markup aggiunge una casella di ricerca e un pulsante Cerca alla home page.
Aprire HomeController.cs nella cartella Controllers del progetto e aggiungere il metodo seguente alla classe HomeController:
[HttpPost] public ActionResult Search(string term) { return RedirectToAction("Index", new { id = term }); }Questo è il metodo chiamato quando l'utente seleziona il pulsante Cerca aggiunto nel passaggio precedente. Aggiorna la pagina e include un parametro di ricerca nell'URL.
Sostituire il metodo Index con l'implementazione seguente:
public ActionResult Index(string id) { // Pass a list of blob URIs and captions in ViewBag CloudStorageAccount account = CloudStorageAccount.Parse(ConfigurationManager.AppSettings["StorageConnectionString"]); CloudBlobClient client = account.CreateCloudBlobClient(); CloudBlobContainer container = client.GetContainerReference("photos"); List<BlobInfo> blobs = new List<BlobInfo>(); foreach (IListBlobItem item in container.ListBlobs()) { var blob = item as CloudBlockBlob; if (blob != null) { blob.FetchAttributes(); // Get blob metadata if (String.IsNullOrEmpty(id) || HasMatchingMetadata(blob, id)) { var caption = blob.Metadata.ContainsKey("Caption") ? blob.Metadata["Caption"] : blob.Name; blobs.Add(new BlobInfo() { ImageUri = blob.Uri.ToString(), ThumbnailUri = blob.Uri.ToString().Replace("/photos/", "/thumbnails/"), Caption = caption }); } } } ViewBag.Blobs = blobs.ToArray(); ViewBag.Search = id; // Prevent search box from losing its content return View(); }Si noti che il metodo Index accetta ora un parametro
idche contiene il valore digitato dall'utente nella casella di ricerca. Un parametro vuoto o mancanteidindica che tutte le foto devono essere visualizzate.Aggiungere il metodo helper seguente alla classe HomeController :
private bool HasMatchingMetadata(CloudBlockBlob blob, string term) { foreach (var item in blob.Metadata) { if (item.Key.StartsWith("Tag") && item.Value.Equals(term, StringComparison.InvariantCultureIgnoreCase)) return true; } return false; }Questo metodo viene chiamato dal metodo Index per determinare se le parole chiave dei metadati associate a un BLOB di immagini specifico contengono il termine di ricerca immesso dall'utente.
Avviare di nuovo l'applicazione e caricare diverse foto. È possibile usare foto personalizzate, non solo quelle fornite con l'esercitazione.
Digitare una parola chiave, ad esempio "river" nella casella di ricerca. Selezionare quindi il pulsante Cerca .
I risultati della ricerca variano a seconda di ciò che è stato digitato e delle immagini caricate. Ma il risultato deve essere un elenco filtrato di immagini le cui parole chiave di metadati includono tutte o parte della parola chiave digitata.
Selezionare il pulsante Indietro del browser per visualizzare di nuovo tutte le immagini.
Il programma è quasi completo. È il momento di distribuire l'app nel cloud.
Distribuire l'app in Azure
In questa sezione si distribuirà l'app in Azure da Visual Studio. È possibile consentire a Visual Studio di creare automaticamente un'app Web di Azure, evitando di dover accedere all'portale di Azure e crearla separatamente.
Fare clic con il pulsante destro del mouse sul progetto in Esplora soluzioni e scegliere Pubblica dal menu di scelta rapida. Assicurarsi che microsoft app Azure Servizio e Crea nuovo siano selezionati e quindi selezionare il pulsante Pubblica.
Nella finestra di dialogo successiva selezionare il gruppo di risorse "IntellipixResources" in Gruppo di risorse. Selezionare il pulsante Nuovo accanto a "piano servizio app" e creare un nuovo piano di servizio app nella stessa posizione selezionata per l'account di archiviazione in Creare un account di archiviazione, accettando le impostazioni predefinite ovunque. Completare selezionando il pulsante Crea .
Dopo alcuni istanti, l'app verrà visualizzata in una finestra del browser. Prendere nota dell'URL nella barra degli indirizzi. L'app non è più in esecuzione in locale; è sul Web, dove è raggiungibile pubblicamente.
Se si apportano modifiche all'app e si vuole eseguire il push delle modifiche nel Web, passare di nuovo al processo di pubblicazione. È comunque possibile testare le modifiche in locale prima della pubblicazione sul Web.
Pulire le risorse
Per continuare a lavorare sull'app Web, vedere la sezione Passaggi successivi. Se non si intende continuare a usare questa applicazione, è necessario eliminare tutte le risorse specifiche delle app. Per eliminare le risorse, è possibile eliminare il gruppo di risorse che contiene la sottoscrizione Archiviazione di Azure e la risorsa Visione. Verranno rimossi l'account di archiviazione, i BLOB in esso caricati e la risorsa del servizio app necessaria per connettersi con l'app Web ASP.NET.
Per eliminare il gruppo di risorse, aprire la scheda Gruppi di risorse nel portale, passare al gruppo di risorse usato per questo progetto e selezionare Elimina gruppo di risorse nella parte superiore della visualizzazione. Verrà chiesto di digitare il nome del gruppo di risorse per confermare che si vuole eliminarlo. Dopo l'eliminazione, non è possibile recuperare un gruppo di risorse.
Passaggi successivi
È possibile fare molto di più per usare Azure e sviluppare ulteriormente l'app Intellipix. Ad esempio, è possibile aggiungere il supporto per l'autenticazione degli utenti e l'eliminazione di foto e invece di forzare l'utente ad attendere che i servizi di intelligenza artificiale di Azure elaborino una foto dopo un caricamento, è possibile usare Funzioni di Azure per chiamare l'API Visione artificiale di Azure in modo asincrono ogni volta che un'immagine viene aggiunta all'archiviazione BLOB. È anche possibile eseguire un numero qualsiasi di altre operazioni di analisi delle immagini sull'immagine, descritte nella panoramica.