Självstudie: Använda Azure AI Vision för att generera bildmetadata i Azure Storage
I den här självstudien får du lära dig hur du integrerar Azure AI Vision-tjänsten i en webbapp för att generera metadata för uppladdade bilder. Detta är användbart för scenarier för hantering av digitala tillgångar (DAM), till exempel om ett företag snabbt vill generera beskrivande bildtext eller sökbara nyckelord för alla sina bilder.
Du använder Visual Studio för att skriva en MVC-webbapp som accepterar bilder som laddats upp av användare och lagrar bilderna i Azure Blob Storage. Du får lära dig att läsa och skriva blobar i C# och använda blobmetadata för att bifoga ytterligare information till de blobar du skapar. Sedan skickar du varje bild som laddas upp av användaren till Azure AI Vision API för att generera en bildtext och söka efter metadata för bilden. Slutligen kan du distribuera appen till molnet med hjälp av Visual Studio.
I den här självstudiekursen lär du dig att:
- Skapa ett lagringskonto och lagringscontainrar med hjälp av Azure-portalen
- Skapa en webbapp i Visual Studio och distribuera den till Azure
- Använda Azure AI Vision API för att extrahera information från bilder
- Koppla metadata till Azure Storage-bilder
- Kontrollera bildmetadata med Azure Storage Explorer
Dricks
Avsnittet Använda Azure AI Vision för att generera metadata är mest relevant för bildanalys. Hoppa till det om du bara vill se hur bildanalys integreras i ett etablerat program.
Om du inte har någon Azure-prenumeration skapar du ett kostnadsfritt konto innan du börjar.
Förutsättningar
- Visual Studio 2017 Community Edition eller senare med arbetsbelastningarna ”ASP.NET and web development” (ASP.NET och webbutveckling) och ”Azure development” (Azure-utveckling) installerade.
- Azure Storage Explorer-verktyget har installerats.
Skapa ett lagringskonto
I det här avsnittet använder du Azure-portalen för att skapa ett lagringskonto. Sedan skapar du ett par containrar: en för att lagra bilder som laddats upp av användaren och en annan för att lagra bildminiatyrer som genererats från de uppladdade bilderna.
Logga in på Azure-portalen i webbläsaren. Om du uppmanas att logga in gör du det med ditt Microsoft-konto.
Om du vill skapa ett lagringskonto väljer du + Skapa en resurs i menyfliksområdet till vänster. Välj sedan Lagring följt av Lagringskonto.
Ange ett unikt namn för lagringskontot i fältet Namn och se till att en grön bockmarkering visas bredvid det. Namnet är viktigt eftersom det utgör en del av url:en genom vilken blobar som skapats under det här kontot används. Placera lagringskontot i en ny resursgrupp med namnet "IntellipixResources" och välj den region som är närmast dig. Slutför genom att välja knappen Granska + skapa längst ned på skärmen för att skapa det nya lagringskontot.
Kommentar
Lagringskontonamn kan vara mellan 3 och 24 tecken långa och får bara innehålla siffror och gemener. Dessutom måste namnet du anger vara unikt i Azure. Om någon annan har valt samma namn får du ett meddelande om att namnet inte är tillgängligt med ett rött utropstecken i fältet Namn .
Välj Resursgrupper i menyfliksområdet till vänster. Välj sedan resursgruppen "IntellipixResources".
På fliken som öppnas för resursgruppen väljer du det lagringskonto som du skapade. Om lagringskontot inte finns där än kan du välja Uppdatera överst på fliken tills det visas.
På fliken för lagringskontot väljer du Blobar för att visa en lista över containrar som är associerade med det här kontot.
Lagringskontot har för närvarande inga containrar. Innan du kan skapa en blob måste du skapa en container för att lagra den i. Välj + Container för att skapa en ny container. Skriv
photosi fältet Namn och välj Blob som offentlig åtkomstnivå. Välj sedan OK för att skapa en container med namnet "foton".Som standard är containrar och deras innehåll privata. Om du väljer Blob som åtkomstnivå blir blobarna i containern "foton" offentligt tillgängliga, men själva containern blir inte offentlig. Det här är vad du vill eftersom bilderna som lagras i containern "foton" länkas till från en webbapp.
Upprepa föregående steg för att skapa en container med namnet "miniatyrbilder", och se återigen till att containerns offentliga åtkomstnivå är inställd på Blob.
Bekräfta att båda containrarna visas i listan över containrar för det här lagringskontot och att namnen är rättstavade.
Stäng skärmen "Blob service". Välj Åtkomstnycklar på menyn till vänster på skärmen lagringskonto och välj sedan knappen Kopiera bredvid NYCKEL för key1. Klistra in den här åtkomstnyckeln i din favorittextredigerare för senare användning.
Du har nu skapat ett lagringskonto för att lagra avbildningar som laddats upp till appen som du ska skapa och containrar för att lagra avbildningarna i.
Kör Azure Storage Explorer
Azure Storage Explorer är ett kostnadsfritt verktyg som tillhandahåller ett grafiskt gränssnitt för att arbeta med Azure Storage på datorer som kör Windows, macOS och Linux. Det ger de flesta av samma funktioner som Azure-portalen och erbjuder andra funktioner som möjligheten att visa blobmetadata. I det här avsnittet använder du Microsoft Azure Storage Explorer för att visa de containrar som du skapade i föregående avsnitt.
Om du inte har installerat Storage Explorer eller vill se till att du kör den senaste versionen går du till http://storageexplorer.com/ och laddar ned och installerar den.
Starta Storage Explorer. Om du uppmanas att logga in gör du det med ditt Microsoft-konto – samma som du använde för att logga in på Azure-portalen. Om du inte ser lagringskontot i lagringsutforskarens vänstra fönster väljer du knappen Hantera konton som är markerad nedan och kontrollerar att både ditt Microsoft-konto och den prenumeration som användes för att skapa lagringskontot har lagts till i Storage Explorer.
Välj den lilla pilen bredvid lagringskontot för att visa innehållet och välj sedan pilen bredvid Blobcontainrar. Bekräfta att de containrar som du skapade visas i listan.
Containrarna är för närvarande tomma, men det ändras när appen har distribuerats och du börjar ladda upp foton. Med Storage Explorer installerat blir det enkelt för dig att se vad din app skriver till Blob Storage.
Skapa en ny webbapp i Visual Studio
I det här avsnittet skapar du en ny webbapp i Visual Studio och lägger till kod för att implementera de grundläggande funktioner som krävs för att ladda upp bilder, skriva dem till bloblagring och visa dem på en webbsida.
Starta Visual Studio och använd kommandot Arkiv –> Nytt –> Projekt för att skapa ett nytt Visual C# ASP.NET webbprogramprojekt med namnet "Intellipix" (förkortning för "Intelligenta bilder").
I dialogrutan "Nytt ASP.NET webbprogram" kontrollerar du att MVC är valt. Välj sedan OK.
Ta en stund att granska projektstrukturen i Solution Explorer. Det finns bland annat en mapp med namnet Controllers som innehåller projektets MVC-styrenheter och en mapp med namnet Vyer som innehåller projektets vyer. Du kommer att arbeta med tillgångar i dessa mappar och andra när du implementerar programmet.
Använd Felsökning i Visual Studio –> Starta utan felsökningskommando (eller tryck på Ctrl+F5) för att starta programmet i webbläsaren. Så här ser programmet ut i sitt nuvarande tillstånd:
Stäng webbläsaren och gå tillbaka till Visual Studio. Högerklicka på Intellipix-projektet i Solution Explorer och välj Hantera NuGet-paket.... Välj Bläddra. Skriv
imageresizersedan i sökrutan och välj NuGet-paketet med namnet ImageResizer. Välj slutligen Installera för att installera den senaste stabila versionen av paketet. ImageResizer innehåller API:er som du ska använda för att skapa bildminiatyrer från de bilder som laddats upp till appen. OK alla ändringar och acceptera alla licenser som visas för dig.
Upprepa den här processen för att lägga till NuGet-paketet med namnet WindowsAzure.Storage i projektet. Det här paketet innehåller API:er för åtkomst till Azure Storage från .NET-program. OK alla ändringar och acceptera alla licenser som visas för dig.
Öppna Web.config och lägg till följande instruktion i
<appSettings>avsnittet och ersätt ACCOUNT_NAME med namnet på lagringskontot som du skapade i det första avsnittet och ACCOUNT_KEY med åtkomstnyckeln som du sparade.<add key="StorageConnectionString" value="DefaultEndpointsProtocol=https;AccountName=ACCOUNT_NAME;AccountKey=ACCOUNT_KEY" />Viktigt!
Web.config-filenär avsedd att innehålla känslig information som dina prenumerationsnycklar, och alla HTTP-begäranden till en fil med .config-tillägget hanteras av ASP.NET-motorn, som returnerar meddelandet "Den här typen av sida hanteras inte". Men om en angripare kan hitta någon annan exploatering som gör att de kan visa ditt Web.config-innehåll , kommer de att kunna exponera den informationen. Se Skydda Anslut ionssträngar och annan konfigurationsinformation för ytterligare åtgärder som du kan vidta för att ytterligare skydda dina Web.config-data.
Öppna filen med namnet _Layout.cshtml i projektets mapp Views/Shared . På rad 19 ändrar du "Programnamn" till "Intellipix". Raden bör se ut så här:
@Html.ActionLink("Intellipix", "Index", "Home", new { area = "" }, new { @class = "navbar-brand" })Kommentar
I ett ASP.NET MVC-projekt är _Layout.cshtml en särskild vy som fungerar som mall för andra vyer. Du definierar vanligtvis sidhuvud- och sidfotsinnehåll som är gemensamt för alla vyer i den här filen.
Högerklicka på projektets modellmapp och använd kommandot Lägg till -> klass... för att lägga till en klassfil med namnet BlobInfo.cs i mappen. Ersätt sedan den tomma BlobInfo-klassen med följande klassdefinition:
public class BlobInfo { public string ImageUri { get; set; } public string ThumbnailUri { get; set; } public string Caption { get; set; } }Öppna HomeController.cs från projektets mapp Controllers och lägg till följande
usinginstruktioner överst i filen:using ImageResizer; using Intellipix.Models; using Microsoft.WindowsAzure.Storage; using Microsoft.WindowsAzure.Storage.Blob; using System.Configuration; using System.Threading.Tasks; using System.IO;Ersätt indexmetoden i HomeController.cs med följande implementering:
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(); }Den nya indexmetoden räknar upp blobarna i containern
"photos"och skickar en matris med BlobInfo-objekt som representerar dessa blobar till vyn via ASP.NET MVC:s ViewBag-egenskap . Senare ändrar du vyn för att räkna upp dessa objekt och visa en samling fotominiatyrer. De klasser som du använder för att komma åt ditt lagringskonto och räkna upp blobarna – CloudStorageAccount, CloudBlobClient och CloudBlobContainer – kommer från WindowsAzure.Storage-paketet som du installerade via NuGet.Lägg till följande metod i klassen HomeController i 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"); }Det här är den metod som anropas när du laddar upp ett foto. Den lagrar varje uppladdad bild som en blob i containern
"photos", skapar en miniatyrbild från den ursprungliga bilden med hjälp avImageResizerpaketet och lagrar miniatyrbilden som en blob i containern"thumbnails".Öppna Index.cshmtl i projektets views/home-mapp och ersätt innehållet med följande kod och markering:
@{ 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> }Det språk som används här är Razor, där du kan bädda in körbar kod i HTML-kod. -
@foreachinstruktionen i mitten av filen räknar upp BlobInfo-objektensom skickas från kontrollanten i ViewBag och skapar HTML-element<img>från dem. Egenskapensrcför varje element initieras med URI för bloben som innehåller miniatyrbilden.Ladda ned och packa upp photos.zip-filen från GitHub-exempeldatalagringsplatsen. Det här är ett urval av olika foton som du kan använda för att testa appen.
Spara ändringarna och tryck på Ctrl+F5 för att starta programmet i webbläsaren. Välj sedan Ladda upp ett foto och ladda upp en av de bilder som du laddade ned. Bekräfta att en miniatyrversion av fotot visas på sidan.
Ladda upp några fler bilder från mappen foton . Bekräfta att de också visas på sidan:
Högerklicka i webbläsaren och välj Visa sidkälla för att visa källkoden för sidan. Leta upp elementen
<img>som representerar miniatyrbilderna. Observera att url:erna som tilldelats bilderna refererar direkt till blobar i Blob Storage. Det beror på att du ställer in containrarnas offentliga åtkomstnivå på Blob, vilket gör blobarna i offentligt tillgängliga.Gå tillbaka till Azure Storage Explorer (eller starta om den om du inte lämnade den igång) och välj containern
"photos"under ditt lagringskonto. Antalet blobar i containern ska vara lika med antalet foton som du laddade upp. Dubbelklicka på en av blobarna för att ladda ned den och se avbildningen som lagras i bloben.
Öppna containern
"thumbnails"i Storage Explorer. Öppna en av blobarna för att visa miniatyrbilderna som genereras från bilduppladdningarna.
Appen erbjuder ännu inte något sätt att visa de ursprungliga bilderna som du laddade upp. Om du väljer en miniatyrbild bör du helst visa den ursprungliga bilden. Nu ska du lägga till den funktionen.
Lägga till en ljusruta för att visa foton
I det här avsnittet använder du ett kostnadsfritt JavaScript-bibliotek med öppen källkod för att lägga till ett lightbox-visningsprogram som gör att användarna kan se de ursprungliga bilderna som de har laddat upp (i stället för bara bildminiatyrerna). Filerna tillhandahålls åt dig. Allt du behöver göra är att integrera dem i projektet och göra en mindre ändring i Index.cshtml.
Ladda ned lightbox.css- och lightbox.js-filerna från GitHub-kodlagringsplatsen.
I Solution Explorer högerklickar du på projektets skriptmapp och använder kommandot Lägg till –> nytt objekt... för att skapa en lightbox.js fil. Klistra in innehållet från exempelfilen i GitHub-kodlagringsplatsen.
Högerklicka på projektets mapp "Innehåll" och använd kommandot Lägg till –> nytt objekt... skapa en lightbox.css fil. Klistra in innehållet från exempelfilen i GitHub-kodlagringsplatsen.
Ladda ned och packa upp buttons.zip-filen från Lagringsplatsen för GitHub-datafiler: https://github.com/Azure-Samples/cognitive-services-sample-data-files/tree/master/ComputerVision/storage-lab-tutorial. Du bör ha fyra knappbilder.
Högerklicka på Intellipix-projektet i Solution Explorer och använd kommandot Lägg till –> ny mapp för att lägga till en mapp med namnet "Images" i projektet.
Högerklicka på mappen Bilder och använd kommandot Lägg till -> befintligt objekt... för att importera de fyra bilder som du laddade ned.
Öppna BundleConfig.cs i projektets mapp "App_Start". Lägg till följande instruktion i
RegisterBundlesmetoden i BundleConfig.cs:bundles.Add(new ScriptBundle("~/bundles/lightbox").Include( "~/Scripts/lightbox.js"));I samma metod hittar du instruktionen som skapar en
StyleBundlefrån "~/Content/css" och lägger till lightbox.css i listan över formatmallar i paketet. Här är den ändrade instruktionen:bundles.Add(new StyleBundle("~/Content/css").Include( "~/Content/bootstrap.css", "~/Content/site.css", "~/Content/lightbox.css"));Öppna _Layout.cshtml i projektets mapp Views/Shared och lägg till följande -instruktion precis före -instruktionen
@RenderSectionlängst ned:@Scripts.Render("~/bundles/lightbox")Den sista uppgiften är att införliva lightbox-visningsprogrammet på startsidan. Det gör du genom att öppna Index.cshtml (det finns i projektets views/home-mapp ) och ersätta loopen
@foreachmed den här:@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> }Spara ändringarna och tryck på Ctrl+F5 för att starta programmet i webbläsaren. Välj sedan en av de bilder som du laddade upp tidigare. Bekräfta att en ljusruta visas och visar en förstorad vy av bilden.
Välj X i det nedre högra hörnet av ljusrutan för att stänga den.
Nu har du ett sätt att visa de bilder som du laddade upp. Nästa steg är att göra mer med dessa bilder.
Använda Azure AI Vision för att generera metadata
Skapa en visionsresurs
Du måste skapa en Visuellt innehåll resurs för ditt Azure-konto. Den här resursen hanterar din åtkomst till Azures Azure AI Vision-tjänst.
Följ anvisningarna i Skapa en Azure AI-tjänstresurs för att skapa en resurs med flera tjänster eller en Vision-resurs.
Gå sedan till menyn för resursgruppen och välj den visionsresurs som du skapade. Kopiera URL:en under Slutpunkt till en plats där du enkelt kan hämta den om en stund. Välj sedan Visa åtkomstnycklar.
Kommentar
Nya resurser som skapats efter den 1 juli 2019 använder anpassade underdomännamn. Mer information och en fullständig lista över regionala slutpunkter finns i Anpassade underdomännamn för Azure AI-tjänster.
I nästa fönstret kopierar du värdet för KEY 1 (Nyckel 1) till Urklipp.
Lägga till autentiseringsuppgifter för Azure AI Vision
Därefter lägger du till de nödvändiga autentiseringsuppgifterna i din app så att den kan komma åt Vision-resurser.
Gå till filen Web.config i projektets rot. Lägg till följande instruktioner i <appSettings> avsnittet i filen och ersätt VISION_KEY med nyckeln som du kopierade i föregående steg och VISION_ENDPOINT med den URL som du sparade i steget innan.
<add key="SubscriptionKey" value="VISION_KEY" />
<add key="VisionEndpoint" value="VISION_ENDPOINT" />
I Solution Explorer. högerklicka på projektlösningen och välj Hantera NuGet-paket. I pakethanteraren som öppnas väljer du Bläddra, markerar Inkludera förhandsversion och söker efter Azure.AI.Vision.ImageAnalysis. Välj Installera.
Lägg till kod för generering av metadata
Därefter lägger du till koden som faktiskt använder Azure AI Vision-tjänsten för att skapa metadata för bilder.
Öppna filen HomeController.cs i projektets Controllers-mapp och lägg till följande
using-instruktioner överst i filen:using Azure; using Azure.AI.Vision.ImageAnalysis; using System;Gå sedan till Upload-metoden. Den här metoden konverterar och laddar upp bilder till blob-lagring. Lägg till följande kod direkt efter det block som börjar med
// Generate a thumbnail, eller i slutet av processen image-blob-creation (bild-blob-skapande). Den här koden tar bloben som innehåller avbildningen (photo) och använder Azure AI Vision för att generera en beskrivning för den bilden. Azure AI Vision-API:et genererar också en lista över nyckelord som gäller för bilden. Den genererade beskrivningen och nyckelorden lagras i blobens metadata så att de kan hämtas senare.// 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();Gå sedan till indexmetoden i samma fil. Den här metoden räknar upp de lagrade avbildningsblobbarna i den riktade blobcontainern (som IListBlobItem-instanser ) och skickar dem till programvyn. Ersätt blocket
foreachi den här metoden med följande kod. Den här koden anropar CloudBlockBlob.FetchAttributes för att hämta varje blobs kopplade metadata. Den extraherar den datorgenererade beskrivningen (caption) från metadata och lägger till den i objektet BlobInfo, som skickas till vyn.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 }); } }
Testa appen
Spara dina ändringar i Visual Studio och tryck på Ctrl + F5 för att starta programmet i webbläsaren. Använd appen för att ladda upp några bilder till, antingen från fotouppsättningen som du laddade ned eller från din egen mapp. När du hovra markören över en av de nya bilderna i vyn bör ett knappbeskrivningsfönster visas och visa den datorgenererade bildtext för bilden.
Om du vill visa alla anslutna metadata använder du Azure Storage Explorer för att visa den lagringscontainer som du använder för avbildningar. Högerklicka på någon av blobarna i containern och välj Egenskaper. I dialogrutan visas en lista över nyckel/värde-par. Den datorgenererade bildbeskrivningen lagras i objektet Captionoch nyckelorden för sökning lagras i Tag0, Tag1och så vidare. När du är klar väljer du Avbryt för att stänga dialogrutan.
Lägga till sökning i appen
I det här avsnittet lägger du till en sökruta på startsidan så att användarna kan göra nyckelordssökningar på de bilder som de har laddat upp. Nyckelorden är de som genereras av Azure AI Vision API och lagras i blobmetadata.
Öppna Index.cshtml i projektets views/home-mapp och lägg till följande instruktioner i det tomma
<div>elementet medclass="col-sm-4 pull-right"attributet:@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> }Den här koden och markeringen lägger till en sökruta och en sökknapp på startsidan.
Öppna HomeController.cs i projektets mapp Controllers och lägg till följande metod i klassen HomeController :
[HttpPost] public ActionResult Search(string term) { return RedirectToAction("Index", new { id = term }); }Det här är den metod som anropas när användaren väljer knappen Sök som lades till i föregående steg. Den uppdaterar sidan och innehåller en sökparameter i URL:en.
Ersätt indexmetoden med följande implementering:
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(); }Observera att indexmetoden nu accepterar en parameter
idsom innehåller det värde som användaren skrev i sökrutan. En tom eller saknadidparameter anger att alla foton ska visas.Lägg till följande hjälpmetod i klassen 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; }Den här metoden anropas av indexmetoden för att avgöra om metadatanyckelorden som är kopplade till en viss bildblob innehåller söktermen som användaren angav.
Starta programmet igen och ladda upp flera foton. Använd gärna dina egna foton, inte bara de som tillhandahålls med självstudien.
Skriv ett nyckelord som "river" i sökrutan. Välj sedan knappen Sök .
Sökresultaten varierar beroende på vad du skrev och vilka bilder du laddade upp. Resultatet bör dock vara en filtrerad lista över bilder vars metadatanyckelord innehåller hela eller en del av nyckelordet som du skrev.
Välj webbläsarens bakåtknapp för att visa alla bilder igen.
Du är nästan klar. Det är dags att distribuera appen till molnet.
distribuera appen till Azure
I det här avsnittet distribuerar du appen till Azure från Visual Studio. Du gör det möjligt för Visual Studio att skapa en Azure-webbapp åt dig, vilket hindrar dig från att behöva gå in på Azure-portalen och skapa den separat.
Högerklicka på projektet i Solution Explorer och välj Publicera... på snabbmenyn. Kontrollera att Microsoft Azure App Service och Skapa ny är markerade och välj sedan knappen Publicera .
I nästa dialogruta väljer du resursgruppen "IntellipixResources" under Resursgrupp. Välj knappen Ny... bredvid "App Service-plan" och skapa en ny App Service-plan på samma plats som du valde för lagringskontot i Skapa ett lagringskonto och acceptera standardinställningarna överallt annars. Slutför genom att välja knappen Skapa .
Efter en liten stund visas appen i ett webbläsarfönster. Observera URL:en i adressfältet. Appen körs inte längre lokalt. Den finns på webben, där den kan nås offentligt.
Om du gör ändringar i appen och vill skicka ut ändringarna till webben går du igenom publiceringsprocessen igen. Du kan fortfarande testa dina ändringar lokalt innan du publicerar på webben.
Rensa resurser
Om du vill fortsätta att arbeta med webbappen läser du avsnittet Nästa steg. Om du inte planerar att fortsätta använda det här programmet bör du ta bort alla appspecifika resurser. Om du vill ta bort resurser kan du ta bort resursgruppen som innehåller din Azure Storage-prenumeration och Vision-resurs. Detta tar bort lagringskontot, de blobar som laddades upp till det samt den App Service-resurs som krävs för att ansluta med ASP.NET-webbappen.
Om du vill ta bort resursgruppen öppnar du fliken Resursgrupper i portalen, navigerar till den resursgrupp som du använde för det här projektet och väljer Ta bort resursgrupp överst i vyn. Du uppmanas att ange resursgruppens namn för att bekräfta att du vill ta bort den. När en resursgrupp har tagits bort kan den inte återställas.
Nästa steg
Det finns mycket mer du kan göra för att använda Azure och utveckla din Intellipix-app ytterligare. Du kan till exempel lägga till stöd för att autentisera användare och ta bort foton, och i stället för att tvinga användaren att vänta tills Azure AI-tjänster bearbetar ett foto efter en uppladdning kan du använda Azure Functions för att anropa Azure AI Vision API asynkront varje gång en bild läggs till i Blob Storage. Du kan också utföra valfritt antal andra bildanalysåtgärder på bilden, som beskrivs i översikten.