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 Visual Studio om een MVC-web-app te schrijven die afbeeldingen accepteert die door gebruikers zijn geüpload en die de afbeeldingen opslaat in Azure Blob Storage. U leert hoe u blobs kunt lezen en schrijven in C# en blobmetagegevens kunt gebruiken om aanvullende informatie toe te voegen aan de blobs die u maakt. Vervolgens verzendt u elke afbeelding die door de gebruiker is geüpload naar de Computer Vision API om een onderschrift te genereren en metagegevens voor de afbeelding te zoeken. Ten slotte kunt u de app implementeren in de cloud met behulp van Visual Studio.
In deze zelfstudie ontdekt u hoe u:
- Een opslagaccount en opslagcontainers maken met behulp van de Azure Portal
- Een web-app maken in Visual Studio en deze implementeren in Azure
- De Computer Vision-API gebruiken om informatie uit afbeeldingen te extraheren
- Metagegevens koppelen aan Azure Storage-afbeeldingen
- Metagegevens van afbeeldingen controleren met behulp van Azure Storage Explorer
Tip
De sectie Computer Vision gebruiken om metagegevens te genereren is het meest relevant voor Afbeeldingsanalyse. Ga hierheen als u alleen wilt zien hoe Afbeeldingsanalyse is 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 hulpprogramma Azure Storage Explorer geïnstalleerd.
Create a storage account
In deze sectie gebruikt u de Azure Portal om een opslagaccount te maken. Vervolgens maakt u een paar containers: een voor het opslaan van afbeeldingen die door de gebruiker zijn geüpload en een andere voor het opslaan van miniatuurafbeeldingen die zijn gegenereerd op basis van de geüploade afbeeldingen.
Open Azure Portal in uw browser. Als u wordt gevraagd u aan te melden, doet u dit met uw Microsoft-account.
Als u een opslagaccount wilt maken, klikt u op + Een resource maken in het lint aan de linkerkant. Klik vervolgens op Opslag, gevolgd door Opslagaccount.
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 via welke blobs die onder dit account zijn gemaakt, worden geopend. Plaats het opslagaccount in een nieuwe resourcegroep met de naam IntellipixResources en selecteer de dichtstbijzijnde regio. Klik op de knop Beoordelen en maken onder aan het scherm om het nieuwe opslagaccount te maken.
Notitie
Namen van opslagaccounts kunnen 3 tot 24 tekens lang zijn en mogen alleen cijfers en kleine letters bevatten. Bovendien moet de naam die u invoert 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 boven aan het tabblad op Vernieuwen klikken totdat het wordt weergegeven.
Klik op het tabblad voor het opslagaccount op Blobs om een lijst weer te geven met containers die aan dit account zijn gekoppeld.
Het opslagaccount heeft momenteel geen containers. Voordat u een blob kunt maken, moet u een container maken om deze in op te slaan. Klik op + Container om een nieuwe container te maken. Typ
photosin het veld Naam en selecteer Blob als het openbare toegangsniveau. Klik vervolgens op OK om een container met de naam 'photos' te maken.Containers en hun inhoud zijn standaard privé. Als u Blob selecteert als toegangsniveau, 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' vanuit een web-app worden gekoppeld.
Herhaal de vorige stap om een container met de naam 'miniaturen' te maken en zorg er nogmaals voor 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 juist zijn gespeld.
Sluit het scherm 'Blob-service'. Klik op Toegangssleutels in het menu aan de linkerkant van het scherm opslagaccount en klik vervolgens op de knop Kopiëren naast SLEUTEL voor sleutel1. 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 installatiekopieën in op te slaan.
Azure Storage Explorer uitvoeren
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 grotendeels dezelfde functionaliteit als de Azure Portal en biedt andere functies, zoals de mogelijkheid om metagegevens van blob weer te geven. In deze sectie gebruikt u de Microsoft Azure Storage Explorer om de containers weer te geven die u in de vorige sectie hebt gemaakt.
Als u Storage Explorer nog niet hebt geïnstalleerd of als u er zeker van wilt zijn dat u de nieuwste versie gebruikt, gaat u naar http://storageexplorer.com/ en downloadt en installeert u deze.
Start Storage Explorer. Als u wordt gevraagd u aan te melden, doet u dit met uw Microsoft-account, hetzelfde account dat 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 controleert u of 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 u Storage Explorer hebt geïnstalleerd, kunt u gemakkelijk zien wat uw app naar blob-opslag 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 nodig is om afbeeldingen te uploaden, ze naar blobopslag te schrijven en weer te geven op een webpagina.
Start Visual Studio en gebruik de opdracht Bestand -> Nieuw -> Project om een nieuw Visual C# ASP.NET Web Application-project te maken met de naam 'Intellipix' (afkorting voor 'Intelligent Pictures').
Controleer in het dialoogvenster Nieuwe ASP.NET webtoepassing of MVC is geselecteerd. Klik vervolgens op OK.
Neem even de tijd om de projectstructuur in Solution Explorer te bekijken. 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 projectweergaven bevat. Tijdens het implementeren van de toepassing werkt u met assets in deze mappen en andere mappen.
Gebruik de opdracht Foutopsporing -> Starten zonder foutopsporing van Visual Studio (of druk op Ctrl+F5) om de toepassing in uw browser te starten. De toepassing ziet er in de huidige staat als volgt uit:
Sluit de browser en ga terug naar Visual Studio. Klik in Solution Explorer met de rechtermuisknop op het project Intellipix en selecteer NuGet-pakketten beheren.... Klik op Bladeren.
imageresizerTyp vervolgens in het zoekvak en selecteer het NuGet-pakket met de naam ImageResizer. Klik ten slotte op Installeren om de meest recente 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. OK eventuele wijzigingen en accepteer alle licenties die aan u worden gepresenteerd.
Herhaal dit proces om het NuGet-pakket met de naam WindowsAzure.Storage toe te voegen aan het project. Dit pakket bevat API's voor toegang tot Azure Storage vanuit .NET-toepassingen. OK eventuele wijzigingen en accepteer eventuele licenties die aan u worden gepresenteerd.
Open Web.config en voeg de volgende instructie toe aan de
<appSettings>sectie, vervang ACCOUNT_NAME door de naam van het opslagaccount dat u in de eerste sectie hebt gemaakt en ACCOUNT_KEY met de toegangssleutel die u hebt opgeslagen.<add key="StorageConnectionString" value="DefaultEndpointsProtocol=https;AccountName=ACCOUNT_NAME;AccountKey=ACCOUNT_KEY" />Belangrijk
Het Web.config-bestand is bedoeld voor het opslaan van gevoelige informatie, zoals uw abonnementssleutels, en elke HTTP-aanvraag naar een bestand met de extensie.config wordt verwerkt door de engine ASP.NET, die het bericht 'Dit type pagina wordt niet geleverd' retourneert. Als aanvallers echter een ander misbruik kunnen vinden waarmee ze uw Web.config inhoud kunnen bekijken, kunnen ze die informatie beschikbaar maken. Zie Verbindingsreeksen beveiligen en andere configuratie-informatie voor extra stappen die u kunt uitvoeren om uw Web.config gegevens verder te beveiligen.
Open het bestand met de naam _Layout.cshtml in de map Views/Shared van het project. Wijzig 'Toepassingsnaam' op regel 19 in 'Intellipix'. De regel moet er als volgt 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 als sjabloon voor andere weergaven fungeert. Normaal gesproken definieert u inhoud voor kopteksten en voetteksten die voor alle weergaven in dit bestand gelden.
Klik met de rechtermuisknop op de map Modellen van het project en gebruik de opdracht Toevoegen -> Klasse... 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
usinginstructies toe aan het begin van het 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 methode Index 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(); }De nieuwe indexmethode inventariseert de blobs in de
"photos"container en geeft een matrix van BlobInfo-objecten die deze blobs vertegenwoordigen door aan de weergave via ASP.NET eigenschap ViewBag van MVC. Later wijzigt u de weergave om deze objecten op te sommen en een verzameling fotominiaturen weer te geven. De klassen die u gebruikt voor toegang tot uw opslagaccount en het inventariseren van de blobs (CloudStorageAccount, CloudBlobClient en CloudBlobContainer) zijn afkomstig uit het pakket WindowsAzure.Storage dat u via NuGet hebt geïnstalleerd.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
"photos"container, er wordt een miniatuurafbeelding gemaakt van de oorspronkelijke afbeelding met behulp van hetImageResizerpakket en de miniatuurafbeelding wordt opgeslagen als een blob in de"thumbnails"container.Open Index.cshmtl in de map Views/Home van het project en vervang de inhoud 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
@foreachinstructie in het midden van het bestand somt de BlobInfo-objecten op die zijn doorgegeven van de controller in ViewBag en maakt er HTML-elementen<img>van. Desrceigenschap van elk element wordt geïnitialiseerd met de URI van de blob die de miniatuur van de afbeelding bevat.Download het photos.zip-bestand en pak het uit vanuit de github-opslagplaats met voorbeeldgegevens. Dit is een assortiment 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 op Een foto uploaden en upload een van de afbeeldingen die u hebt gedownload. Controleer of een miniatuurversie van de foto op de pagina wordt weergegeven.
Upload nog enkele afbeeldingen uit de map foto's . 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 miniatuurafbeeldingen vertegenwoordigen. De URL's die aan de afbeeldingen zijn toegewezen, verwijzen rechtstreeks naar blobs in blobopslag. Dit komt doordat u het openbare toegangsniveau van de containers instelt op Blob, waardoor de blobs binnen openbaar toegankelijk zijn.Ga terug naar Azure Storage Explorer (of start het 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 de afbeelding te bekijken 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 geval op een miniatuur van een afbeelding klikt, wordt de oorspronkelijke afbeelding weergegeven. Vervolgens voegt u die functie 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 miniaturen van afbeeldingen). De bestanden worden voor u ter beschikking gesteld. 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 en lightbox.js uit de GitHub-codeopslagplaats.
Klik in Solution Explorer met de rechtermuisknop op de map Scripts van uw project en gebruik de opdracht Toevoegen -> Nieuw item... om een lightbox.js-bestand te maken. Plak de inhoud uit het voorbeeldbestand in de GitHub-codeopslagplaats.
Klik met de rechtermuisknop op de map Inhoud van het project en gebruik de opdracht Toevoegen -> Nieuw item... om een bestand lightbox.css te maken. Plak de inhoud uit het voorbeeldbestand in de GitHub-codeopslagplaats.
Download het buttons.zip-bestand en pak het uit vanuit de opslagplaats voor 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 Toevoegen -> Nieuwe map om een map met de naam 'Afbeeldingen' toe te voegen aan het project.
Klik met de rechtermuisknop op de map Afbeeldingen en gebruik de opdracht Toevoegen -> Bestaand 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 waarmee een
StyleBundlewordt gemaakt van '~/Content/css' en voeg lightbox.css toe aan de lijst met opmaakmodellen 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 vlak voor de
@RenderSectioninstructie onderaan:@Scripts.Render("~/bundles/lightbox")De laatste taak bestaat uit het opnemen van de lightbox viewer op de startpagina. Hiervoor opent u Index.cshtml (deze bevindt zich 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 lightbox wordt weergegeven met een vergrote weergave van de afbeelding.
Klik op de X in de rechterbenedenhoek van het lichtvak om deze te sluiten.
U hebt nu een manier om de geüploade afbeeldingen weer te geven. 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 het 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 naar het Web.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 een paar afbeeldingen te uploaden, van de fotoset die u hebt gedownload of uit uw eigen map. Wanneer u de cursor boven een van de nieuwe afbeeldingen in de weergave plaatst, wordt er een knopinfovenster weergegeven met de door de computer gegenereerde onderschrift voor de afbeelding.
Als u alle gekoppelde metagegevens wilt weergeven, gebruikt u 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 beschrijving van de door de computer gegenereerde afbeelding wordt opgeslagen in het item Captionen de trefwoorden worden opgeslagen in Tag0, Tag1, enzovoort. Wanneer u klaar bent, klikt u op Annuleren om het dialoogvenster te sluiten.
Zoekactie toevoegen aan de app
In deze sectie voegt u een zoekvak toe aan de startpagina, zodat gebruikers trefwoordzoekopdrachten kunnen uitvoeren 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 lege
<div>element met hetclass="col-sm-4 pull-right"kenmerk :@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 worden een zoekvak en een knop Zoeken toegevoegd 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 er wordt een zoekparameter in de URL opgenomen.
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 klasse 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; }Deze methode wordt aangeroepen door de indexmethode om te bepalen of de metagegevenstrefwoorden 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 gerust uw eigen foto's gebruiken, niet alleen de foto's die bij de zelfstudie worden geleverd.
Typ een trefwoord zoals 'river' in het zoekvak. Klik vervolgens op de knop Zoeken .
De zoekresultaten zijn afhankelijk van wat u hebt getypt en welke afbeeldingen u hebt geüpload. Het resultaat moet echter een gefilterde lijst met afbeeldingen zijn waarvan de metagegevenstrefwoorden het hele of een deel van het trefwoord bevatten dat u hebt getypt.
Klik op de knop Vorige van de browser om alle afbeeldingen opnieuw weer te geven.
U bent bijna klaar. Het is tijd om de app te implementeren in de cloud.
De app implementeren in Azure
In deze sectie implementeert u de app in Azure vanuit Visual Studio. U geeft Visual Studio toestemming om een Azure-web-app voor u te maken, zodat u de Azure Portal niet afzonderlijk hoeft te maken.
Klik met de rechtermuisknop op het project in Solution Explorer en selecteer Publiceren... in het contextmenu. Zorg ervoor dat 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 plan' en maak een nieuw App Service plan op dezelfde locatie die u hebt geselecteerd voor het opslagaccount in Een opslagaccount maken, waarbij u de standaardwaarden overal anders accepteert. Voltooi de bewerking door op de knop Maken te klikken.
Na enkele ogenblikken wordt de app weergegeven in een browservenster. Noteer de URL in de adresbalk. De app wordt niet meer lokaal uitgevoerd; het bevindt zich op het web, waar het openbaar bereikbaar is.
Als u wijzigingen aanbrengt in de app en de wijzigingen naar het web wilt pushen, doorloopt u het publicatieproces opnieuw. 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 de naam van de resourcegroep te typen om te bevestigen dat u deze wilt verwijderen. Nadat een resourcegroep is verwijderd, kan deze niet meer worden hersteld.
Volgende stappen
Er is nog veel meer dat u kunt doen om Azure te gebruiken en uw Intellipix-app nog verder te ontwikkelen. U kunt bijvoorbeeld ondersteuning toevoegen voor het verifiëren van gebruikers en het verwijderen van foto's, en in plaats van de gebruiker te dwingen te wachten tot Cognitive Services een foto na een upload heeft verwerkt, kunt u Azure Functions gebruiken om de Computer Vision API asynchroon aan te roepen telkens wanneer een afbeelding wordt toegevoegd aan blob-opslag. U kunt ook een willekeurig aantal andere afbeeldingsanalysebewerkingen uitvoeren op de afbeelding, zoals beschreven in het overzicht.