Zelfstudie: Computer Vision gebruiken voor het genereren van afbeeldingsmetagegevens te genereren in Azure Storage
In deze zelfstudie leert u hoe u de Azure Computer Vision-service in een web-app integreert voor het genereren van metagegevens voor geüploade afbeeldingen. Dit is nuttig voor DAM-scenario's (Digital Asset Management), bijvoorbeeld wanneer een bedrijf snel beschrijvende bijschriften of doorzoekbare trefwoorden wil genereren voor al zijn afbeeldingen.
U gebruikt deze Visual Studio een MVC-web-app te schrijven die afbeeldingen accepteert die door gebruikers zijn geüpload en die de afbeeldingen opslaan in Azure Blob Storage. U leert hoe u blobs leest en schrijft in C# en hoe u blobmetagegevens gebruikt om aanvullende informatie te koppelen aan de blobs die u maakt. Vervolgens verstuurt u elke afbeelding die door de gebruiker is geüpload naar de Computer Vision-API om een bijschrift te genereren en metagegevens voor de afbeelding te zoeken. Ten slotte kunt u de app in de cloud implementeren met behulp van Visual Studio.
In deze zelfstudie ontdekt u hoe u:
- Maak een opslagaccount en opslagcontainers met behulp van de Azure Portal
- Een web-app maken in Visual Studio implementeren in Azure
- De api Computer Vision gebruiken om informatie te extraheren uit afbeeldingen
- Metagegevens koppelen aan Azure Storage-afbeeldingen
- Metagegevens van afbeeldingen controleren met behulp Azure Storage Explorer
Tip
De sectie Use Computer Vision to generate metadata is most relevant to Image Analysis (Gebruik Computer Vision om metagegevens te genereren) is het meest relevant voor afbeeldingsanalyse. Ga verder als u alleen wilt zien hoe afbeeldingsanalyse wordt geïntegreerd in een bestaande toepassing.
Als u nog geen abonnement op Azure hebt, maak dan een gratis account aan voordat u begint.
Vereisten
- Visual Studio 2017 Community Edition of hoger, met de workloads 'ASP.NET and web development' en 'Azure development' geïnstalleerd.
- Het Azure Storage Explorer geïnstalleerd.
Een opslagaccount maken
In deze sectie gebruikt u de Azure Portal om een opslagaccount te maken. Vervolgens maakt u twee containers: een om afbeeldingen op te slaan die door de gebruiker zijn geüpload en een andere om miniatuurafbeeldingen op te slaan die zijn gegenereerd op basis van de geüploade afbeeldingen.
Open Azure Portal in uw browser. Als u wordt gevraagd om u aan te melden, doet u dit met behulp van uw Microsoft-account.
Als u een opslagaccount wilt maken, klikt u op + Een resource maken in het lint aan de linkerkant. Klik vervolgens Storage, gevolgd door Storage account.
Voer een unieke naam in voor het opslagaccount in het veld Naam en zorg ervoor dat er een groen vinkje naast wordt weergegeven. De naam is belangrijk, omdat deze deel uitmaakt van de URL waarmee blobs die onder dit account zijn gemaakt, worden gebruikt. Plaats het opslagaccount in een nieuwe resourcegroep met de naam IntellipixResources en selecteer de dichtstbijzijnde regio. Als laatste klikt u op de knop Beoordelen en maken onderaan het scherm om het nieuwe opslagaccount te maken.
Notitie
Storage accountnamen mogen 3 tot 24 tekens lang zijn en mogen alleen cijfers en kleine letters bevatten. Bovendien moet de door u invoeren naam uniek zijn binnen Azure. Als iemand anders dezelfde naam heeft gekozen, krijgt u een melding dat de naam niet beschikbaar is met een rood uitroepteken in het veld Naam.
Klik op Resourcegroepen in het lint aan de linkerkant. Klik vervolgens op de resourcegroep IntellipixResources.
Klik op het tabblad dat wordt geopend voor de resourcegroep op het opslagaccount dat u hebt gemaakt. Als het opslagaccount er nog niet is, kunt u bovenaan het tabblad op Vernieuwen klikken totdat het wordt weergegeven.
Klik op het tabblad voor het opslagaccount op Blobs om een lijst met containers te bekijken die aan dit account zijn gekoppeld.
Het opslagaccount heeft momenteel geen containers. Voordat u een blob kunt maken, moet u een container maken waarin u deze kunt opslaan. Klik op + Container om een nieuwe container te maken. Typ
photosin het veld Naam en selecteer Blob als openbaar toegangsniveau. Klik vervolgens op OK om een container met de naam 'photos' te maken.Containers en hun inhoud zijn standaard privé. Als u Blob als toegangsniveau selecteert, worden de blobs in de container 'photos' openbaar toegankelijk, maar wordt de container zelf niet openbaar. Dit is wat u wilt, omdat de afbeeldingen die zijn opgeslagen in de container 'photos' worden gekoppeld vanuit een web-app.
Herhaal de vorige stap om nog een container met de naam 'thumbnails' te maken en ervoor te zorgen dat het openbare toegangsniveau van de container is ingesteld op Blob.
Controleer of beide containers worden weergegeven in de lijst met containers voor dit opslagaccount en of de namen correct zijn gespeld.
Sluit het Blob service scherm. Klik op Toegangssleutels in het menu aan de linkerkant van het scherm opslagaccount en klik vervolgens op de knop Kopiëren naast SLEUTEL voor key1. Plak deze toegangssleutel in uw favoriete teksteditor voor later gebruik.
U hebt nu een opslagaccount gemaakt voor het opslaan van afbeeldingen die zijn geüpload naar de app die u gaat bouwen, en containers om de afbeeldingen in op te slaan.
Voer Azure Storage Explorer
Azure Storage Explorer is een gratis hulpprogramma dat een grafische interface biedt voor het werken met Azure Storage op pc's met Windows, macOS en Linux. Het biedt de meeste dezelfde functionaliteit als de Azure Portal en biedt andere functies, zoals de mogelijkheid om blobmetagegevens weer te geven. In deze sectie gebruikt u de Microsoft Azure Storage Explorer om de containers te bekijken die u in de vorige sectie hebt gemaakt.
Als u de Storage Explorer niet hebt geïnstalleerd of als u er zeker van wilt zijn dat u de nieuwste versie hebt uitgevoerd, gaat u naar en downloadt en http://storageexplorer.com/ installeert u deze.
Begin Storage Explorer. Als u wordt gevraagd om u aan te melden, doet u dit met uw Microsoft-account dezelfde die u hebt gebruikt om u aan te melden bij — de Azure Portal. Als u het opslagaccount niet ziet in het linkerdeelvenster van Storage Explorer, klikt u op de knop Accounts beheren die hieronder is gemarkeerd en zorgt u ervoor dat zowel uw Microsoft-account als het abonnement dat is gebruikt om het opslagaccount te maken, zijn toegevoegd aan Storage Explorer.
Klik op de kleine pijl naast het opslagaccount om de inhoud ervan weer te geven en klik vervolgens op de pijl naast Blobcontainers. Controleer of de containers die u hebt gemaakt, worden weergegeven in de lijst.
De containers zijn momenteel leeg, maar dat verandert zodra uw app is geïmplementeerd en u begint met het uploaden van foto's. Als Storage Explorer geïnstalleerd, kunt u eenvoudig zien wat uw app naar blobopslag schrijft.
Een nieuwe web-app maken in Visual Studio
In deze sectie maakt u een nieuwe web-app in Visual Studio en voegt u code toe om de basisfunctionaliteit te implementeren die vereist is voor het uploaden van afbeeldingen, het schrijven ervan naar blobopslag en het weergeven ervan op een webpagina.
Start Visual Studio en gebruik de opdracht File -> New -> Project om een nieuw Visual C# ASP.NET Web Application-project te maken met de naam 'Intellipix' (afkorting voor Intelligent Pictures).
Zorg ervoor dat in ASP.NET het dialoogvenster Nieuwe webtoepassing MVC is geselecteerd. Klik vervolgens op OK.
Neem even de tijd om de projectstructuur in de Solution Explorer. Er is onder andere een map met de naam Controllers die de MVC-controllers van het project bevat en een map met de naam Weergaven die de weergaven van het project bevat. U werkt met assets in deze mappen en andere terwijl u de toepassing implementeert.
Gebruik Visual Studio de opdracht Fouten opsporen -> Starten zonder foutopsporing (of druk op Ctrl +F5) om de toepassing in uw browser te starten. Hier ziet u hoe de toepassing er in de huidige staat uitziet:
Sluit de browser en ga terug naar Visual Studio. Klik Solution Explorer met de rechtermuisknop op het Intellipix-project en selecteer NuGet-pakketten beheren.... Klik op Bladeren. Typ vervolgens
imageresizerin het zoekvak en selecteer het NuGet-pakket met de naam ImageResizer. Klik ten slotte op Installeren om de nieuwste stabiele versie van het pakket te installeren. ImageResizer bevat API's die u gebruikt om miniatuurafbeeldingen te maken van de afbeeldingen die naar de app zijn geüpload. Eventuele wijzigingen in orde maken en alle licenties accepteren die aan u worden gepresenteerd.
Herhaal dit proces om het NuGet-pakket met de naam WindowsAzure.Storage aan het project toe te voegen. Dit pakket bevat API's voor toegang tot Azure Storage .NET-toepassingen. Eventuele wijzigingen in orde maken en alle licenties accepteren die aan u worden gepresenteerd.
Open Web.config en voeg de volgende instructie toe aan de sectie, vervang ACCOUNT_NAME door de naam van het opslagaccount dat u in de eerste sectie hebt gemaakt en ACCOUNT_KEY door de toegangssleutel die u hebt
<appSettings>opgeslagen.<add key="StorageConnectionString" value="DefaultEndpointsProtocol=https;AccountName=ACCOUNT_NAME;AccountKey=ACCOUNT_KEY" />Open het bestand _Layout.cshtml in de map Views/Shared van het project. Wijzig op regel 19 'Toepassingsnaam' in 'Intellipix'. De regel moet er als volgende uitzien:
@Html.ActionLink("Intellipix", "Index", "Home", new { area = "" }, new { @class = "navbar-brand" })Notitie
In een ASP.NET MVC-project is _Layout.cshtml een speciale weergave die fungeert als een sjabloon voor andere weergaven. Doorgaans definieert u kop- en voettekstinhoud die gebruikelijk is voor alle weergaven in dit bestand.
Klik met de rechtermuisknop op de map Modellen van het project en gebruik de opdracht -> Class... om een klassebestand met de naam BlobInfo.cs toe te voegen aan de map. Vervang vervolgens de lege klasse BlobInfo door de volgende klassedefinitie:
public class BlobInfo { public string ImageUri { get; set; } public string ThumbnailUri { get; set; } public string Caption { get; set; } }Open HomeController.cs vanuit de map Controllers van het project en voeg de volgende -instructies toe aan de bovenkant van
usinghet bestand:using ImageResizer; using Intellipix.Models; using Microsoft.WindowsAzure.Storage; using Microsoft.WindowsAzure.Storage.Blob; using System.Configuration; using System.Threading.Tasks; using System.IO;Vervang de indexmethode in HomeController.cs door de volgende implementatie:
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(); }Met de nieuwe indexmethode worden de blobs in de container geïndexeerd en wordt een matrix van BlobInfo-objecten die deze blobs vertegenwoordigen, aan de weergave door geven via de eigenschap ViewTrix van
"photos"ASP.NET MVC. Later wijzigt u de weergave om deze objecten op te snoemen en een verzameling fotominiaturen weer te geven. De klassen die u gebruikt om toegang te krijgen tot uw opslagaccount en de blobs — CloudStorageAccount, CloudBlobClient en CloudBlobContainer op te snoemen, zijn afkomstig uit het — WindowsAzure.Storage-pakket dat u hebt geïnstalleerd via NuGet.Voeg de volgende methode toe aan de klasse 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"); }Dit is de methode die wordt aangeroepen wanneer u een foto uploadt. Elke geüploade afbeelding wordt opgeslagen als een blob in de container, er wordt een miniatuurafbeelding gemaakt van de oorspronkelijke afbeelding met behulp van het pakket en de miniatuurafbeelding wordt opgeslagen
"photos"als een blob in deImageResizer"thumbnails"container.Open Index.cshmtl in de map Views/Home van het project en vervang de inhoud ervan door de volgende code en markeringen:
@{ 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> }De taal die hier wordt gebruikt, is Razor,waarmee u uitvoerbare code kunt insluiten in HTML-markeringen. De instructie in het midden van het bestand bevat een overzicht van de BlobInfo-objecten die worden doorgegeven van de
@foreachcontroller in ViewAtrice en maakt<img>HTML-elementen van deze objecten. Desrceigenschap van elk element wordt initialiseerd met de URI van de blob die de miniatuur van de afbeelding bevat.Download het bestandphotos.zipuit GitHub voorbeeldgegevensopslagplaats. Dit is een verzameling verschillende foto's die u kunt gebruiken om de app te testen.
Sla uw wijzigingen op en druk op Ctrl+F5 om de toepassing in uw browser te starten. Klik vervolgens Upload een foto en upload een van de afbeeldingen die u hebt gedownload. Controleer of er een miniatuurversie van de foto op de pagina wordt weergegeven.
Upload nog enkele afbeeldingen uit de map photos. Controleer of ze ook op de pagina worden weergegeven:
Klik met de rechtermuisknop in uw browser en selecteer Paginabron weergeven om de broncode voor de pagina weer te geven. Zoek de
<img>elementen die de afbeeldingsminiaturen vertegenwoordigen. U ziet dat de URL's die zijn toegewezen aan de afbeeldingen rechtstreeks verwijzen naar blobs in blobopslag. Dit komt doordat u het openbare toegangsniveau van de containers in stelt op Blob, waardoor de blobs binnen openbaar toegankelijk zijn.Ga terug Azure Storage Explorer (of start deze opnieuw op als u deze niet actief hebt laten) en selecteer de
"photos"container onder uw opslagaccount. Het aantal blobs in de container moet gelijk zijn aan het aantal foto's dat u hebt geüpload. Dubbelklik op een van de blobs om deze te downloaden en bekijk de afbeelding die is opgeslagen in de blob.
Open de
"thumbnails"container in Storage Explorer. Open een van de blobs om de miniatuurafbeeldingen weer te geven die zijn gegenereerd op basis van de uploads van afbeeldingen.
De app biedt nog geen manier om de oorspronkelijke afbeeldingen weer te geven die u hebt geüpload. Als u in het ideale voorbeeld op een miniatuur van een afbeelding klikt, wordt de oorspronkelijke afbeelding weergegeven. U voegt die functie vervolgens toe.
Een lightbox toevoegen voor het weergeven van foto's
In deze sectie gebruikt u een gratis opensource JavaScript-bibliotheek om een lightbox viewer toe te voegen waarmee gebruikers de oorspronkelijke afbeeldingen kunnen zien die ze hebben geüpload (in plaats van alleen de miniatuurafbeeldingen). De bestanden zijn voor u beschikbaar. U hoeft ze alleen maar te integreren in het project en een kleine wijziging aan te brengen in Index.cshtml.
Download de bestanden lightbox.css enlightbox.js uit de GitHub codeopslagplaats.
Klik Solution Explorer met de rechtermuisknop op de map Scripts van uw project en gebruik de opdracht -> New Item... om eenlightbox.js maken. Plak de inhoud uit het voorbeeldbestand in de GitHub codeopslagplaats.
Klik met de rechtermuisknop op de map Content van het project en gebruik de opdracht Add -> New Item... om een lightbox.css-bestand te maken. Plak de inhoud uit het voorbeeldbestand in de GitHub codeopslagplaats.
Download het bestand enbuttons.zip uit de opslagplaats GitHub gegevensbestanden: https://github.com/Azure-Samples/cognitive-services-sample-data-files/tree/master/ComputerVision/storage-lab-tutorial . U moet vier knopafbeeldingen hebben.
Klik met de rechtermuisknop op het Intellipix-project in Solution Explorer en gebruik de opdracht Add -> New Folder om een map met de naam Images aan het project toe te voegen.
Klik met de rechtermuisknop op de map Images en gebruik de opdracht Add -> Existing Item... om de vier afbeeldingen te importeren die u hebt gedownload.
Open BundleConfig.cs in de map 'App_Start' van het project. Voeg de volgende instructie toe aan de
RegisterBundlesmethode in BundleConfig.cs:bundles.Add(new ScriptBundle("~/bundles/lightbox").Include( "~/Scripts/lightbox.js"));Zoek in dezelfde methode de instructie die een maakt van
StyleBundle~/Content/css en voeg lightbox.css toe aan de lijst met stijlbladen in de bundel. Dit is de gewijzigde instructie:bundles.Add(new StyleBundle("~/Content/css").Include( "~/Content/bootstrap.css", "~/Content/site.css", "~/Content/lightbox.css"));Open _Layout.cshtml in de map Views/Shared van het project en voeg de volgende instructie toe net voor de instructie
@RenderSectiononderaan:@Scripts.Render("~/bundles/lightbox")De laatste taak is het opnemen van de lightbox viewer op de startpagina. Hiervoor opent u Index.cshtml (dit staat in de map Views/Home van het project) en vervangt u de
@foreachlus door deze:@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> }Sla uw wijzigingen op en druk op Ctrl+F5 om de toepassing in uw browser te starten. Klik vervolgens op een van de afbeeldingen die u eerder hebt geüpload. Controleer of er een lichtvak wordt weergegeven en dat er een vergroot beeld van de afbeelding wordt weergegeven.
Klik op de X in de rechterbenedenhoek van de lightbox om deze te klikken.
U hebt nu een manier om de afbeeldingen weer te geven die u hebt geüpload. De volgende stap is om meer te doen met deze afbeeldingen.
Gebruik Computer Vision om metagegevens te genereren
Een Computer Vision-resource maken
U moet een Computer Vision-resource maken voor uw Azure-account. Deze resource beheert uw toegang tot de Azure Computer Vision-service.
Volg de instructies in Een Azure Cognitive Services-resource maken om een Computer Vision-resource te maken.
Ga vervolgens naar het menu voor uw resourcegroep en klik op Computer Vision API-abonnement dat u hebt gemaakt. Kopieer de URL onder Eindpunt naar een plaats waar u de URL eenvoudig en snel weer kunt ophalen. Klik vervolgens op Toegangssleutels weergeven.
Notitie
Nieuwe resources die zijn gemaakt na 1 juli 2019, hebben aangepaste subdomeinnamen. Zie Aangepaste subdomeinnamen voor Cognitive Services voor meer informatie en een volledige lijst met regionale eindpunten.
In het volgende venster kopieert u de waarde van sleutel 1 naar het klembord.
Computer Vision-referenties toevoegen
Vervolgens voegt u de vereiste referenties toe aan uw app zodat deze toegang krijgt tot de Computer Vision-resources.
Navigeer naarWeb.config bestand in de hoofdmap van het project. Voeg de volgende instructies toe aan het gedeelte <appSettings> van het bestand. Vervang VISION_KEY door de sleutel die u in de vorige stap hebt gekopieerd en VISION_ENDPOINT door de URL die u in de stap daarvoor hebt opgeslagen.
<add key="SubscriptionKey" value="VISION_KEY" />
<add key="VisionEndpoint" value="VISION_ENDPOINT" />
Klik vervolgens in Solution Explorer met de rechtermuisknop op het project en gebruik de opdracht NuGet-pakketten beheren om het pakket Microsoft.Azure.CognitiveServices.Vision.ComputerVision te installeren. Dit pakket bevat de typen die nodig zijn voor het aanroepen van de Computer Vision-API.
Code voor het genereren van metagegevens toevoegen
Vervolgens voegt u de code toe die daadwerkelijk gebruikmaakt van de Computer Vision-service om metagegevens voor afbeeldingen te maken.
Open het bestand HomeController.cs in de map Controllers van het project en voeg de volgende
usinginstructies toe aan de bovenzijde van het bestand:using Microsoft.Azure.CognitiveServices.Vision.ComputerVision; using Microsoft.Azure.CognitiveServices.Vision.ComputerVision.Models;Ga vervolgens naar de methode Uploaden. Met deze methode worden afbeeldingen geconverteerd en naar de blob-opslag geüpload. Voeg de volgende code in achter het blok dat begint met
// Generate a thumbnail(of na afloop van het aanmaakproces voor de afbeeldingsblob). Met deze code wordt de blob met de afbeelding (photo) gezocht en wordt Computer Vision gebruikt voor het genereren van een beschrijving voor de betreffende afbeelding. De Computer Vision-API maakt ook een lijst trefwoorden die van toepassing zijn op de afbeelding. De gegenereerde beschrijving en de trefwoorden worden opgeslagen in de metagegevens van de blob zodat ze later kunnen worden opgehaald.// Submit the image to the Azure Computer Vision API ComputerVisionClient vision = new ComputerVisionClient( new ApiKeyServiceClientCredentials(ConfigurationManager.AppSettings["SubscriptionKey"]), new System.Net.Http.DelegatingHandler[] { }); vision.Endpoint = ConfigurationManager.AppSettings["VisionEndpoint"]; List<VisualFeatureTypes?> features = new List<VisualFeatureTypes?>() { VisualFeatureTypes.Description }; var result = await vision.AnalyzeImageAsync(photo.Uri.ToString(), features); // Record the image description and tags in blob metadata photo.Metadata.Add("Caption", result.Description.Captions[0].Text); for (int i = 0; i < result.Description.Tags.Count; i++) { string key = String.Format("Tag{0}", i); photo.Metadata.Add(key, result.Description.Tags[i]); } await photo.SetMetadataAsync();Ga vervolgens naar de methode Index in hetzelfde bestand. Met deze methode worden de opgeslagen afbeeldingsblobs in de blob-doelcontainer opgesomd (als IListBlobItem-instanties) en worden deze doorgegeven aan de toepassingsweergave. Vervang het blok
foreachin de methode door de volgende code. Deze code roept CloudBlockBlob.FetchAttributes aan om de metagegevens die aan elke blob zijn gekoppeld op te halen. De door de computer gegenereerde beschrijving (caption) wordt opgehaald uit de metagegevens en toegevoegd aan het object BlobInfo; dit wordt vervolgens doorgegeven aan de weergave.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 }); } }
De app testen
Sla de wijzigingen in Visual Studio op en druk op Ctrl+F5 om de toepassing in uw browser te starten. Gebruik de app om nog enkele afbeeldingen te uploaden, ofwel vanuit de fotoset die u hebt gedownload of uit uw eigen map. Wanneer u de cursor over een van de nieuwe afbeeldingen in de weergave beweegt, wordt er een knopinfovenster weergegeven waarin het door de computer gegenereerde bijschrift voor de afbeelding wordt weergegeven.
Als u alle gekoppelde metagegevens wilt weergeven, gebruikt Azure Storage Explorer om de opslagcontainer weer te geven die u voor afbeeldingen gebruikt. Klik met de rechtermuisknop op een van de blobs in de container en selecteer Eigenschappen. In het dialoogvenster ziet u een lijst met sleutel-waardeparen. De door de computer gegenereerde beschrijving van de afbeelding wordt opgeslagen in het item , en de zoektermen worden Caption opgeslagen in Tag0 , , , , en Tag1 meer. Wanneer u klaar bent, klikt u op Annuleren om het dialoogvenster te sluiten.
Zoekfunctie toevoegen aan de app
In deze sectie voegt u een zoekvak toe aan de startpagina, zodat gebruikers zoekopdrachten met trefwoorden kunnen doen op de afbeeldingen die ze hebben geüpload. De trefwoorden zijn de trefwoorden die worden gegenereerd door de Computer Vision API en zijn opgeslagen in blobmetagegevens.
Open Index.cshtml in de map Views/Home van het project en voeg de volgende instructies toe aan het
<div>lege element met het kenmerkclass="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> }Met deze code en markeringen voegt u een zoekvak en een knop Zoeken toe aan de startpagina.
Open HomeController.cs in de map Controllers van het project en voeg de volgende methode toe aan de klasse HomeController:
[HttpPost] public ActionResult Search(string term) { return RedirectToAction("Index", new { id = term }); }Dit is de methode die wordt aangeroepen wanneer de gebruiker op de knop Zoeken klikt die in de vorige stap is toegevoegd. De pagina wordt vernieuwd en de URL bevat een zoekparameter.
Vervang de indexmethode door de volgende implementatie:
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(); }U ziet dat de indexmethode nu een parameter-id accepteert die de waarde bevat die de gebruiker in het zoekvak heeft getypt. Een lege of ontbrekende id-parameter geeft aan dat alle foto's moeten worden weergegeven.
Voeg de volgende helpermethode toe aan de homecontroller-klasse:
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; }Deze methode wordt aangeroepen door de indexmethode om te bepalen of de sleutelwoorden voor metagegevens die zijn gekoppeld aan een bepaalde afbeeldingsblob de zoekterm bevatten die de gebruiker heeft ingevoerd.
Start de toepassing opnieuw en upload verschillende foto's. U kunt uw eigen foto's gebruiken, niet alleen die van de zelfstudie.
Typ een trefwoord zoals 'river' in het zoekvak. Klik vervolgens op de knop Zoeken.
De zoekresultaten variëren afhankelijk van wat u hebt getypt en welke afbeeldingen u hebt geüpload. Maar het resultaat moet een gefilterde lijst met afbeeldingen zijn waarvan de sleutelwoorden voor metagegevens alle of een deel van het trefwoord bevatten dat u hebt getypt.
Klik op de knop Terug van de browser om alle afbeeldingen opnieuw weer te geven.
U bent bijna klaar. Het is tijd om de app in de cloud te implementeren.
De app implementeren in Azure
In deze sectie implementeert u de app in Azure vanuit Visual Studio. U kunt Visual Studio azure-web-app voor u maken, zodat u niet naar de Azure Portal moet gaan en deze afzonderlijk kunt maken.
Klik met de rechtermuisknop op het project in Solution Explorer selecteer Publiceren... in het contextmenu. Zorg ervoor Microsoft Azure App Service en Nieuwe maken zijn geselecteerd en klik vervolgens op de knop Publiceren.
Selecteer in het volgende dialoogvenster de resourcegroep 'IntellipixResources' onder Resourcegroep. Klik op de knop Nieuw... naast App Service-abonnement en maak een nieuw App Service-abonnement op dezelfde locatie die u hebt geselecteerd voor het opslagaccount inEen opslagaccount maken en accepteer de standaardwaarden overal anders. Als laatste klikt u op de knop Maken.
Na enkele ogenblikken wordt de app weergegeven in een browservenster. Noteer de URL in de adresbalk. De app wordt niet meer lokaal uitgevoerd; Het is op het web, waar het openbaar bereikbaar is.
Als u wijzigingen aan de app aanmaakt en de wijzigingen naar internet wilt pushen, moet u het publicatieproces opnieuw doorlopen. U kunt uw wijzigingen nog steeds lokaal testen voordat u op internet publiceert.
Resources opschonen
Als u aan de web-app wilt blijven werken, ziet u het gedeelte Volgende stappen. Als u deze toepassing niet wilt blijven gebruiken, verwijdert u alle app-specifieke resources. Als u resources wilt verwijderen, kunt u de resourcegroep met uw Azure Storage-abonnement en Computer Vision-resource verwijderen. Hiermee worden het opslagaccount, de ernaar geüploade blobs en de App Service-resource die nodig is om verbinding te maken met de ASP.NET-web-app verwijderd.
Als u de resourcegroep wilt verwijderen, opent u het tabblad Resourcegroepen in de portal, gaat u naar de resourcegroep die u hebt gebruikt voor dit project en klikt u op Resourcegroep verwijderen bovenaan de weergave. U wordt gevraagd om de naam van de resourcegroep in te typen om te bevestigen dat u deze wilt verwijderen. Zodra een resourcegroep is verwijderd, kan deze niet meer worden hersteld.
Volgende stappen
U kunt nog veel meer doen om Azure te gebruiken en uw Intellipix-app nog verder te ontwikkelen. U kunt bijvoorbeeld ondersteuning toevoegen voor het authenticeren van gebruikers en het verwijderen van foto's. In plaats van af te dwingen dat de gebruiker wacht tot Cognitive Services een foto na een upload verwerkt, kunt u Azure Functions gebruiken om de Computer Vision-API asynchroon aan te roepen telkens wanneer een afbeelding wordt toegevoegd aan blobopslag. U kunt ook een aantal andere bewerkingen voor afbeeldingsanalyse uitvoeren op de afbeelding, zoals beschreven in het overzicht.