Självstudie: Använda Visuellt innehåll för att generera bildmetadata i Azure Storage
I den här självstudien lär du dig att integrera Azure Visuellt innehåll-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 bildtexter eller sökbara nyckelord för alla sina bilder.
Du använder en Visual Studio att skriva en MVC-webbapp som tar emot bilder som laddats upp av användare och lagrar bilderna i Azure Blob Storage. Du får lära dig hur du läser och skriver blobar i C# och använder blobmetadata för att koppla ytterligare information till de blobar som du skapar. Sedan skickar du varje bild som laddats upp av användaren till Visuellt innehåll API för att generera en bildtext och sökmetadata 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 Portal
- Skapa en webbapp i Visual Studio distribuera den till Azure
- Använda API:Visuellt innehåll för att extrahera information från bilder
- Koppla metadata till Azure Storage-bilder
- Kontrollera bildmetadata med Azure Storage Explorer
Tips
Avsnittet Använda Visuellt innehåll för att generera metadata är mest relevant för bildanalys. Gå vidare dit om du bara vill se hur bildanalys är integrerat i ett etablerat program.
Om du inte har någon Azure-prenumeration kan du skapa 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.
- Verktyget Azure Storage Explorer installerat.
Skapa ett lagringskonto
I det här avsnittet använder du Azure Portal för att skapa ett lagringskonto. Sedan skapar du ett par containrar: en för att lagra avbildningar som laddats upp av användaren och en annan för att lagra bildminiatyrer som genereras från de uppladdade bilderna.
Öppna Azure-portalen i webbläsaren. Om du uppmanas att logga in gör du det med din Microsoft-konto.
Om du vill skapa ett lagringskonto klickar du på + Skapa en resurs i menyfliksområdet till vänster. Klicka sedan Storage, följt av Storage konto.
Ange ett unikt namn för lagringskontot i fältet Namn och se till att en grön bock visas bredvid det. Namnet är viktigt eftersom det utgör en del av URL:en som blobar som skapas 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 klicka på knappen Granska + skapa längst ned på skärmen för att skapa det nya lagringskontot.
Anteckning
Storage kan innehålla mellan 3 och 24 tecken 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.
Klicka på Resursgrupper i menyfliksområdet till vänster. Klicka sedan på resursgruppen "IntellipixResources".
På fliken som öppnas för resursgruppen klickar du på det lagringskonto som du skapade. Om lagringskontot inte finns där ännu kan du klicka på Uppdatera överst på fliken tills det visas.
På fliken för lagringskontot klickar du på 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. Klicka på + Container för att skapa en ny container. Skriv
photosi fältet Namn och välj Blob som offentlig åtkomstnivå. Klicka sedan på OK för att skapa en container med namnet "photos".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 "thumbnails" och se 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". Klicka på Åtkomstnycklar på menyn till vänster på lagringskontoskärmen och klicka sedan på knappen Kopiera bredvid NYCKEL för key1. Klistra in den här åtkomstnyckeln i din favorittextredigerare för senare användning.
Nu har du skapat ett lagringskonto för avbildningar som laddats upp till den app som du ska skapa och containrar där avbildningarna ska lagras.
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 Portal 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 kontrollera att du kör den senaste versionen går du till och http://storageexplorer.com/ laddar ned och installerar den.
Starta Storage Explorer. Om du uppmanas att logga in gör du det med Microsoft-konto som du använde för att logga — in på Azure Portal. Om du inte ser lagringskontot i den vänstra rutan i Storage Explorer klickar du på knappen Hantera konton markerad nedan och kontrollerar att både din Microsoft-konto och den prenumeration som användes för att skapa lagringskontot har lagts till i Storage Explorer.
Klicka på den lilla pilen bredvid lagringskontot för att visa innehållet och klicka sedan på pilen bredvid BlobContainrar. Bekräfta att de containrar som du skapade visas i listan.
Containrarna är tomma för närvarande, men det ändras när din app har distribuerats och du börjar ladda upp foton. När Storage Explorer installerats blir det enkelt för dig att se vad din app skriver till Blob Storage.
<a name="Exercise3">
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 Blob Storage och visa dem på en webbsida.
Starta Visual Studio och använd kommandot File -> New -> Project för att skapa ett nytt Visual C# ASP.NET Web Application-projekt med namnet "Intellipix" (förkortning av "Intelligent Pictures").
Kontrollera att MVC är ASP.NET i dialogrutan "Nytt program för webbprogram". Klicka sedan på OK.
Ta en stund och granska projektstrukturen i Solution Explorer. Bland annat finns det en mapp med namnet Controllers som innehåller projektets MVC-kontrollanter 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 Visual Studio debug -> starta utan felsökning (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 återgå till Visual Studio. I Solution Explorer högerklickar du på Intellipix-projektet och väljer Hantera NuGet-paket.... Klicka på Bläddra. Skriv sedan
imageresizeri sökrutan och välj NuGet-paketet med namnet ImageResizer. Klicka slutligen på Installera för att installera den senaste stabila versionen av paketet. ImageResizer innehåller API:er som du använder för att skapa miniatyrbilder från 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 till projektet. Det här paketet innehåller API:er för åtkomst 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 avsnittet, ersätt ACCOUNT_NAME med namnet på det lagringskonto som du skapade i det första avsnittet och ACCOUNT_KEY med den åtkomstnyckel som du
<appSettings>sparade.<add key="StorageConnectionString" value="DefaultEndpointsProtocol=https;AccountName=ACCOUNT_NAME;AccountKey=ACCOUNT_KEY" />Öppna filen med _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" })Anteckning
I ett ASP.NET MVC-projekt är _Layout.cshtml en särskild vy som fungerar som en mall för andra vyer. Vanligtvis definierar du 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 -> Class... 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 controllers-mapp och lägg till följande
using-instruktioner ö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 och skickar en matris med BlobInfo-objekt som representerar dessa blobar till vyn
"photos"via ASP.NET MVC:s ViewBag-egenskap. Senare ändrar du vyn för att räkna upp de här objekten och visa en samling miniatyrbilder. 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, skapar en miniatyrbild från den ursprungliga bilden med hjälp av paketet och lagrar miniatyrbilden som
"photos"en blob iImageResizer"thumbnails"containern.Öppna Index.cshmtl i projektets mapp Views/Home och ersätt innehållet med följande kod och pålägg:
@{ 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, vilket gör att du kan bädda in körbar kod i HTML-kod. -instruktionen i mitten av filen räknar upp de BlobInfo-objekt som skickas från kontrollanten i
@foreachViewBag och skapar<img>HTML-element från dem. Egenskapensrcför varje element initieras med blobens URI som innehåller miniatyrbilden.Ladda ned och packa upp photos.zip från den GitHub exempeldatadatabasen. 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. Klicka sedan Upload ett foto och ladda upp en av de bilder som du laddade ned. Bekräfta att en miniatyrversion av fotot visas på sidan.
Upload några fler bilder från mappen photos. Bekräfta att de visas på sidan också:
Högerklicka i webbläsaren och välj Visa sidkälla för att visa källkoden för sidan. Hitta de
<img>element som representerar bildminiatyrerna. 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 dem offentligt tillgängliga.Gå tillbaka Azure Storage Explorer (eller starta om den om du inte körde den) och välj
"photos"containern under ditt lagringskonto. Antalet blobar i containern bör vara lika med antalet foton som du har laddat upp. Dubbelklicka på en av blobarna för att ladda ned den och se avbildningen som lagras i bloben.
Öppna
"thumbnails"containern i Storage Explorer. Öppna en av blobarna för att visa miniatyrbilderna som genererats från bilduppladdningarna.
Appen erbjuder ännu inte något sätt att visa de ursprungliga bilderna som du laddade upp. Vi rekommenderar att du klickar på en bildminiatyr för att visa den ursprungliga bilden. Nu ska du lägga till den funktionen.
Lägga till en glödlampa 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 bilder som de har laddat upp (i stället för bara miniatyrbilderna). 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 filer från lagringsplatsen GitHub kod.
I Solution Explorer högerklickar du på projektets skriptmapp och använder kommandot Lägg till -> Nytt objekt... för att skapa lightbox.js fil. Klistra in innehållet från exempelfilen på lagringsplatsen GitHub kod.
Högerklicka på projektets "Innehåll"-mapp och använd kommandot Lägg till -> Nytt objekt... för att skapa en lightbox.css-fil. Klistra in innehållet från exempelfilen på lagringsplatsen GitHub kod.
Ladda ned och packa upp buttons.zip från lagringsplatsen 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 "Bilder" i projektet.
Högerklicka på mappen Avbildningar och använd kommandot Lägg till -> Befintligt objekt... för att importera de fyra avbildningar som du laddade ned.
Öppna BundleConfig.cs i projektets mapp "App_Start". Lägg till följande -instruktion till
RegisterBundles-metoden i BundleConfig.cs:bundles.Add(new ScriptBundle("~/bundles/lightbox").Include( "~/Scripts/lightbox.js"));I samma metod hittar du -instruktionen som skapar en från
StyleBundle"~/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
@RenderSection-instruktionen längst ned:@Scripts.Render("~/bundles/lightbox")Den sista uppgiften är att införliva lightbox viewer på startsidan. Det gör du genom att öppna Index.cshtml (det finns i projektets mapp Vyer/Start) och ersätta
@foreachloopen med 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. Klicka sedan på en av de bilder som du laddade upp tidigare. Bekräfta att en ljusruta visas och visar en förstorad vy av bilden.
Klicka på krysset i det nedre högra hörnet av ljusrutan för att stänga det.
Nu har du ett sätt att visa de bilder som du har laddat upp. Nästa steg är att göra mer med dessa bilder.
Använda Visuellt innehåll för att generera metadata
Skapa en resurs för Visuellt innehåll
Du måste skapa en Visuellt innehåll för ditt Azure-konto. den här resursen hanterar din åtkomst till Azures Visuellt innehåll tjänst.
Följ anvisningarna i Skapa en Azure Cognitive Services för att skapa en Visuellt innehåll resurs.
Gå sedan till menyn för resursgruppen och klicka på den API Visuellt innehåll prenumeration som du skapade. Kopiera URL:en under Slutpunkt till en plats där du enkelt kan hämta den om en stund. Klicka sedan på Visa åtkomstnycklar.
Anteckning
Nya resurser som skapats efter den 1 juli 2019 kommer att använda anpassade under domän namn. Mer information och en fullständig lista över regionala slut punkter finns i anpassade under domän namn för Cognitive Services.
I nästa fönstret kopierar du värdet för KEY 1 (Nyckel 1) till Urklipp.
Lägg till autentiseringsuppgifter för Visuellt innehåll
Därefter lägger du till de autentiseringsuppgifter som krävs i appen så att den kan komma åt Visuellt innehåll resurser.
Navigera till Web.config-filen i roten av projektet. Lägg till följande -instruktioner i avsnittet i filen, ersätt med den nyckel som du kopierade i föregående steg och med den URL som du sparade <appSettings> VISION_KEY i steget VISION_ENDPOINT innan.
<add key="SubscriptionKey" value="VISION_KEY" />
<add key="VisionEndpoint" value="VISION_ENDPOINT" />
I Solution Explorer högerklickar du sedan på projektet och använder kommandot Manage NuGet Packages för att installera paketet Microsoft.Azure.CognitiveServices.Vision.ComputerVision. Det här paketet innehåller de typer som krävs för att anropa API för visuellt innehåll.
Lägg till kod för generering av metadata
Sedan lägger du till den kod som faktiskt använder tjänsten Visuellt innehåll 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 Microsoft.Azure.CognitiveServices.Vision.ComputerVision; using Microsoft.Azure.CognitiveServices.Vision.ComputerVision.Models;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 den blob som innehåller bilden (photo) och använder Visuellt innehåll för att generera en beskrivning av den bilden. API för visuellt innehåll genererar även en lista med nyckelord som gäller för bilden. Den genererade beskrivningen och nyckelorden lagras i blobens metadata så att de kan hämtas senare.// 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();Gå sedan till indexmetoden i samma fil. Den här metoden räknar upp lagrade bildblobar i målblobcontainern (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 fler bilder, antingen från fotouppsättningen som du laddade ned eller från din egen mapp. När du hovrar markören över en av de nya bilderna i vyn bör ett knappbeskrivningsfönster visas och den datorgenererade beskrivningen för bilden visas.
Om du vill visa alla kopplade metadata använder du Azure Storage Explorer för att visa lagringscontainern som du använder för bilder. 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 Caption , och söknyckelorden lagras i Tag0 , och så Tag1 vidare. När du är klar klickar du på 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 api:et Visuellt innehåll och lagras i blobmetadata.
Öppna Index.cshtml i projektets mapp Views/Home och lägg till följande -instruktioner i det tomma elementet med
<div>class="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 pålägget lägger till en sökruta och en sökknapp på startsidan.
Öppna HomeController.cs i projektets controllers-mapp 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 klickar på 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 ett parameter-ID som innehåller det värde som användaren angav i sökrutan. En tom eller saknad ID-parameter 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. Du kan använda dina egna foton, inte bara de som ingår i självstudien.
Skriv ett nyckelord som "river" i sökrutan. Klicka sedan på knappen Sök.
Sökresultaten varierar beroende på vad du har skrivit och vilka bilder du har laddat upp. Men resultatet bör vara en filtrerad lista med bilder vars metadatanyckelord innehåller hela eller delar av nyckelordet som du har skrivit.
Klicka på 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 kan Visual Studio skapa en Azure-webbapp åt dig, så att du inte behöver gå in på Azure Portal och skapa den separat.
Högerklicka på projektet i Solution Explorer välj Publicera... på snabbmenyn. Se till Microsoft Azure App Service och Skapa ny är markerade och klicka sedan på knappen Publicera.
I nästa dialogruta väljer du resursgruppen "IntellipixResources" under Resursgrupp. Klicka på knappen Nytt... bredvid "App Service Plan" och skapa en ny App Service-plan på samma plats som du valde för lagringskontot i Skapaett lagringskonto och acceptera standardinställningarna överallt. Slutför genom att klicka på knappen Skapa.
Efter en liten stund visas appen i ett webbläsarfönster. Anteckna 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 ändringarna till webben går du igenom publiceringsprocessen igen. Du kan fortfarande testa ändringarna 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 Visuellt innehåll 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 projektet och klickar på 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 resursgruppen 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 Intellipix-appen ytterligare. Du kan till exempel lägga till stöd för autentisering av användare och ta bort foton, och i stället för att tvinga användaren att vänta tills Cognitive Services bearbetar ett foto efter en uppladdning kan du använda Azure Functions för att anropa Visuellt innehåll-API:et asynkront varje gång en bild läggs till i bloblagringen. Du kan också göra val annat antal åtgärder för bildanalys på bilden som beskrivs i översikten.