Zelfstudie: Azure AI Vision gebruiken om metagegevens van afbeeldingen te genereren in Azure Storage
In deze zelfstudie leert u hoe u de Azure AI Vision-service integreert in een web-app om metagegevens voor geüploade afbeeldingen te genereren. 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 zijn geüpload door gebruikers en de afbeeldingen opslaat in Azure Blob Storage. U leert hoe u blobs leest en schrijft in C# en blobmetagegevens gebruikt 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 Azure AI 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 handleiding ontdekt u hoe u:
- Een opslagaccount en opslagcontainers maken met behulp van Azure Portal
- Een web-app maken in Visual Studio en deze implementeren in Azure
- De Azure AI 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 Azure AI Vision gebruiken om metagegevens te genereren, is het meest relevant voor afbeeldingsanalyse. Ga verder als u alleen wilt zien hoe afbeeldingsanalyse is geïntegreerd in een bestaande toepassing.
Als u geen Azure-abonnement hebt, maakt u een gratis account 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 is geïnstalleerd.
Een opslagaccount maken
In deze sectie gebruikt u Azure Portal om een opslagaccount te maken. Vervolgens maakt u een paar containers: één voor het opslaan van afbeeldingen die door de gebruiker zijn geüpload en een andere om miniatuurweergaven van afbeeldingen op te slaan die zijn gegenereerd op basis van de geüploade afbeeldingen.
Meld u aan bij Azure Portal in uw browser. Als u wordt gevraagd u aan te melden, gebruikt u uw Microsoft-account.
Als u een opslagaccount wilt maken, selecteert u + Een resource maken op het lint aan de linkerkant. Selecteer vervolgens Storage, gevolgd door opslagaccount.
Voer een unieke naam in voor het opslagaccount in het veld Naam en controleer of 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 geopend. Plaats het opslagaccount in een nieuwe resourcegroep met de naam 'IntellipixResources' en selecteer de dichtstbijzijnde regio. Voltooi de knop Beoordelen en maken onderaan het scherm om het nieuwe opslagaccount te maken.
Notitie
Namen van opslagaccounts mogen 3 tot 24 tekens lang zijn en mogen alleen cijfers en kleine letters bevatten. Daarnaast 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 .
Selecteer Resourcegroepen op het lint aan de linkerkant. Selecteer vervolgens de resourcegroep 'IntellipixResources'.
Selecteer op het tabblad dat wordt geopend voor de resourcegroep het opslagaccount dat u hebt gemaakt. Als het opslagaccount er nog niet is, kunt u Vernieuwen selecteren boven aan het tabblad totdat het wordt weergegeven.
Selecteer op het tabblad voor het opslagaccount 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 waarin deze moet worden opgeslagen. Selecteer + Container om een nieuwe container te maken. Typ
photosin het veld Naam en selecteer Blob als openbaar toegangsniveau. Selecteer vervolgens OK om een container met de naam 'photos' te maken.Containers en hun inhoud zijn standaard privé. Als u Blob selecteert als het toegangsniveau, worden de blobs in de container 'foto's' openbaar toegankelijk, maar wordt de container zelf niet openbaar. Dit is wat u wilt omdat de afbeeldingen die zijn opgeslagen in de container 'foto's' worden gekoppeld vanuit een web-app.
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. Selecteer Toegangssleutels in het menu aan de linkerkant van het scherm van het opslagaccount en selecteer vervolgens de knop Kopiëren naast KEY voor key1. Plak deze toegangssleutel in uw favoriete teksteditor voor later gebruik.
U hebt nu een opslagaccount gemaakt waarin afbeeldingen zijn opgeslagen die zijn geüpload naar de app die u gaat bouwen en containers om de installatiekopieën 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 de meeste van dezelfde functionaliteit als Azure Portal en biedt andere functies, zoals de mogelijkheid om blobmetagegevens weer te geven. In deze sectie gebruikt u Microsoft Azure Storage Explorer om de containers weer te geven die u in de vorige sectie hebt gemaakt.
Als u Storage Explorer niet hebt geïnstalleerd of als u zeker wilt weten 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 om u aan te melden, gebruikt u uw Microsoft-account, hetzelfde account dat u hebt gebruikt om u aan te melden bij Azure Portal. Als u het opslagaccount niet ziet in het linkerdeelvenster van Storage Explorer, selecteert u 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.
Selecteer de kleine pijl naast het opslagaccount om de inhoud ervan weer te geven en selecteer vervolgens de pijl naast BlobContainers. Controleer of de containers die u hebt gemaakt, worden weergegeven in de lijst.
De containers zijn momenteel leeg, maar die worden gewijzigd zodra uw app is geïmplementeerd en u begint met het uploaden van foto's. Als Storage Explorer is geïnstalleerd, kunt u eenvoudig zien wat uw app schrijft naar blobopslag.
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 File -> New -> Project om een nieuw Visual C# ASP.NET Web Application-project met de naam 'Intellipix' te maken (kort voor Intelligent Pictures).
Zorg ervoor dat MVC is geselecteerd in het dialoogvenster 'Nieuwe ASP.NET-webtoepassing'. Selecteer vervolgens OK.
Neem even de tijd om de projectstructuur in Solution Explorer te bekijken. Er is onder andere een map met de naam Controllers met de MVC-controllers van het project en een map met de naam Weergaven die de weergaven van het project bevat. U werkt met assets in deze mappen en anderen terwijl u de toepassing implementeert.
Gebruik de opdracht Foutopsporing van Visual Studio -> Starten zonder foutopsporing (of druk op Ctrl+F5) om de toepassing in uw browser te starten. De toepassing ziet er als volgt uit in de huidige status:
Sluit de browser en ga terug naar Visual Studio. Klik in Solution Explorer met de rechtermuisknop op het Intellipix-project en selecteer NuGet-pakketten beheren.... Selecteer Bladeren. Typ
imageresizervervolgens in het zoekvak en selecteer het NuGet-pakket met de naam ImageResizer. Selecteer Ten slotte Installeren om de meest recente stabiele versie van het pakket te installeren. ImageResizer bevat API's die u gaat gebruiken om miniatuurweergaven 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 alle 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 voor een bestand met de extensie .config wordt verwerkt door de ASP.NET-engine, die het bericht 'Dit type pagina wordt niet geleverd' retourneert. Als een aanvaller echter een andere aanval kan vinden waarmee ze de inhoud van web.config kunnen bekijken, kunnen ze die informatie beschikbaar maken. Zie Het beveiligen van Verbinding maken iontekenreeksen en andere configuratiegegevens 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 lijn 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 fungeert als 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 Toevoegen -> Klasse... om een klassebestand met de naam BlobInfo.cs toe te voegen aan de map. Vervang vervolgens de lege BlobInfo-klasse 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 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
"photos"container opgesomd en wordt een matrix met BlobInfo-objecten doorgegeven die deze blobs aan de weergave vertegenwoordigen via de eigenschap ViewBag van ASP.NET MVC. Later wijzigt u de weergave om deze objecten te inventariseren en een verzameling fotominiaturen weer te geven. De klassen die u gebruikt om toegang te krijgen tot uw opslagaccount en de blobs op te sommen: CloudStorageAccount, CloudBlobClient en CloudBlobContainer, zijn afkomstig van 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
"photos"container, maakt een miniatuurafbeelding van de oorspronkelijke afbeelding met behulp van hetImageResizerpakket en slaat de miniatuurafbeelding op 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 bevat een opsomming van de BlobInfo-objecten die zijn doorgegeven vanaf de controller in ViewBag en maakt HTML-elementen<img>van deze objecten. 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-voorbeeldgegevensopslagplaats. 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. Selecteer Vervolgens Een foto uploaden en een van de afbeeldingen uploaden die u hebt gedownload. Controleer of er een miniatuurversie van de foto wordt weergegeven op de pagina.
Upload nog enkele afbeeldingen uit de map foto's . Controleer ook of ze 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 elementen die de
<img>miniaturen van de afbeelding vertegenwoordigen. U ziet dat de URL's die aan de installatiekopieën zijn toegewezen, rechtstreeks verwijzen naar blobs in blobopslag. Dit komt doordat u het openbare toegangsniveau van de containers instelt op Blob, waardoor de blobs openbaar toegankelijk zijn.Ga terug naar Azure Storage Explorer (of start deze opnieuw als u deze niet hebt uitgevoerd) 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 de afbeelding.
De app biedt nog geen manier om de oorspronkelijke afbeeldingen weer te geven die u hebt geüpload. In het ideale geval moet de oorspronkelijke afbeelding worden weergegeven wanneer u een miniatuur van een afbeelding selecteert. 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 afbeeldingsminiaturen). De bestanden worden voor u verstrekt. U hoeft ze alleen maar te integreren in het project en een kleine wijziging aan te brengen in Index.cshtml.
Download de lightbox.css- en lightbox.js-bestanden 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 Add -> New Item... om een lightbox.css-bestand 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' aan het project toe te voegen.
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
StyleBundle'~/Content/css' wordt gemaakt 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 vóór de
@RenderSectioninstructie aan de onderkant:@Scripts.Render("~/bundles/lightbox")De laatste taak is 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. Selecteer vervolgens een van de afbeeldingen die u eerder hebt geüpload. Controleer of er een lightbox wordt weergegeven en een vergroot beeld van de afbeelding wordt weergegeven.
Selecteer de X in de rechterbenedenhoek van het lichtvak om deze te sluiten.
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.
Azure AI Vision gebruiken om metagegevens te genereren
Een Vision-resource maken
U moet een Computer Vision-resource maken voor uw Azure-account; deze resource beheert uw toegang tot de Azure AI Vision-service.
Volg de instructies in Een Azure AI-servicesresource maken om een resource met meerdere services of een Vision-resource te maken.
Ga vervolgens naar het menu voor uw resourcegroep en selecteer de Vision-resource die u hebt gemaakt. Kopieer de URL onder Eindpunt naar een plaats waar u de URL eenvoudig en snel weer kunt ophalen. Selecteer vervolgens Toegangssleutels weergeven.
Notitie
Nieuwe resources die zijn gemaakt na 1 juli 2019, hebben aangepaste subdomeinnamen. Zie Aangepaste subdomeinnamen voor Azure AI-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.
Azure AI Vision-referenties toevoegen
Vervolgens voegt u de vereiste referenties toe aan uw app, zodat deze toegang heeft tot 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" />
In the Solution Explorer. Klik met de rechtermuisknop op de projectoplossing en selecteer NuGet-pakketten beheren. Selecteer Bladeren in het pakketbeheer dat wordt geopend, schakel Prerelease opnemen in en zoek naar Azure.AI.Vision.ImageAnalysis. Selecteer Installeren.
Code voor het genereren van metagegevens toevoegen
Vervolgens voegt u de code toe die daadwerkelijk gebruikmaakt van de Azure AI 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 Azure; using Azure.AI.Vision.ImageAnalysis; using System;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). Deze code maakt gebruik van de blob met de afbeelding (photo) en gebruikt Azure AI Vision om een beschrijving voor die afbeelding te genereren. De Azure AI Vision-API genereert ook een lijst met 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.// 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();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 uit 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 en wordt de door de computer gegenereerde onderschrift voor de afbeelding weergegeven.
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 door de computer gegenereerde beschrijving van de afbeelding wordt opgeslagen in het item Captionen de trefwoorden worden opgeslagen in Tag0, Tag1enzovoort. Wanneer u klaar bent, selecteert u 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 Azure AI Vision-API en worden 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 wordt een zoekvak en een zoekknop 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 de knop Zoeken selecteert die in de vorige stap is toegevoegd. De pagina wordt vernieuwd en bevat een zoekparameter in de URL.
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
idaccepteert die de waarde bevat die de gebruiker in het zoekvak heeft getypt. Een lege of ontbrekendeidparameter 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 uw eigen foto's gebruiken, niet alleen de foto's die bij de zelfstudie worden geleverd.
Typ een trefwoord zoals 'rivier' in het zoekvak. Selecteer vervolgens de knop Zoeken .
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 metagegevenstrefwoorden alle of een deel van het trefwoord bevatten dat u hebt getypt.
Selecteer 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 vanuit Visual Studio in Azure. U staat Visual Studio toe om een Azure-web-app voor u te maken, zodat u niet naar Azure Portal hoeft te gaan en deze 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 selecteer vervolgens de knop Publiceren.
Selecteer in het volgende dialoogvenster de resourcegroep 'IntellipixResources' onder Resourcegroep. Selecteer 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 de standaardwaarden overal anders worden geaccepteerd. Voltooi deze door de knop Maken te selecteren.
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, gaat u opnieuw door het publicatieproces. U kunt uw wijzigingen nog steeds lokaal testen voordat u naar het web 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 verwijderen die uw Azure Storage-abonnement en Vision-resource bevat. 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 voor dit project hebt gebruikt en selecteert u Resourcegroep verwijderen boven aan de weergave. U wordt gevraagd de naam van de resourcegroep te typen om te bevestigen dat u deze wilt verwijderen. Zodra deze is verwijderd, kan een resourcegroep 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. In plaats van af te dwingen dat de gebruiker wacht totdat Azure AI-services een foto verwerken na een upload, kunt u Azure Functions gebruiken om de Azure AI Vision-API asynchroon aan te roepen telkens wanneer een afbeelding wordt toegevoegd aan blobopslag. U kunt ook een willekeurig aantal andere bewerkingen voor afbeeldingsanalyse uitvoeren op de afbeelding, zoals beschreven in het overzicht.