Oktatóanyag: Kép metaadatainak létrehozása az Azure Storage-ban az Azure AI Vision használatával
Ebben az oktatóanyagban megtudhatja, hogyan integrálhatja az Azure AI Vision szolgáltatást egy webalkalmazásba a feltöltött képek metaadatainak létrehozásához. Ez olyan digitális eszközkezelési (DAM-) forgatókönyvek esetén hasznos, mint például ha egy vállalat gyorsan szeretne leíró képaláírás vagy kereshető kulcsszavakat létrehozni az összes képéhez.
A Visual Studio használatával olyan MVC-webalkalmazást fog írni, amely elfogadja a felhasználók által feltöltött képeket, és a rendszerképeket az Azure Blob Storage-ban tárolja. Megtudhatja, hogyan olvashat és írhat blobokat c# nyelven, és hogyan csatolhat további információkat a létrehozott blobokhoz blob metaadataival. Ezután elküldi a felhasználó által feltöltött összes képet az Azure AI Vision API-nak, hogy létrehoz egy képaláírás és keressen metaadatokat a képhez. Végül üzembe helyezheti az alkalmazást a felhőben a Visual Studióval.
Ez az oktatóanyag a következőket mutatja be:
- Tárfiók és tárolók létrehozása az Azure Portal használatával
- Webalkalmazás létrehozása a Visual Studióban és üzembe helyezése az Azure-ban
- Információk kinyerése képekből az Azure AI Vision API használatával
- Metaadatok csatolása Azure Storage-rendszerképekhez
- Kép metaadatainak ellenőrzése az Azure Storage Explorerrel
Tipp.
A metaadatok létrehozása az Azure AI Vision használatával című szakasz a képelemzés szempontjából a legrelevánsabb. Ugorjon oda, ha csak azt szeretné megtudni, hogyan integrálható a képelemzés egy már létrehozott alkalmazásba.
Ha még nincs Azure-előfizetése, kezdés előtt hozzon létre egy ingyenes fiókot.
Előfeltételek
- A Visual Studio 2017 Community edition vagy újabb verziója a "ASP.NET és webfejlesztés" és az "Azure-fejlesztési" számítási feladatok telepítve vannak.
- Az Azure Storage Explorer eszköz telepítve van.
Tárfiók létrehozása
Ebben a szakaszban az Azure Portal használatával fog létrehozni egy tárfiókot. Ezután létrehoz egy tárolópárot: az egyiket a felhasználó által feltöltött képek tárolására, a másikat pedig a feltöltött képekből létrehozott képminiatűrök tárolására.
Jelentkezzen be az Azure Portalra a böngészőben. Ha a rendszer arra kéri, hogy jelentkezzen be, tegye ezt a Microsoft-fiókjával.
Tárfiók létrehozásához válassza a + Erőforrás létrehozása lehetőséget a bal oldali menüszalagon. Ezután válassza a Storage, majd a Storage-fiók lehetőséget.
Adja meg a tárfiók egyedi nevét a Név mezőben, és győződjön meg arról, hogy zöld pipa jelenik meg mellette. A név azért fontos, mert annak az URL-címnek az egyik részét képezi, amelyen keresztül a fiókban létrehozott blobok elérhetők. Helyezze a tárfiókot egy "IntellipixResources" nevű új erőforráscsoportba, és válassza ki az Önhöz legközelebbi régiót. Fejezze be az új tárfiók létrehozásához a képernyő alján található Véleményezés + létrehozás gombot.
Feljegyzés
A tárfiókok neve 3–24 karakter hosszúságú lehet, és csak számokat és kisbetűket tartalmazhat. Emellett a megadott névnek egyedinek kell lennie az Azure-ban. Ha valaki más is ugyanazt a nevet választotta, a név nem érhető el piros felkiáltójellel a Név mezőben.
Válassza ki az Erőforráscsoportok lehetőséget a menüszalag bal oldalán. Ezután válassza ki az "IntellipixResources" erőforráscsoportot.
Az erőforráscsoport számára megnyíló lapon válassza ki a létrehozott tárfiókot. Ha a tárfiók még nem található, a lap tetején a Frissítés lehetőséget választva megjelenítheti.
A tárfiók fülén válassza a Blobok lehetőséget a fiókhoz társított tárolók listájának megtekintéséhez.
A tárfiók jelenleg nem rendelkezik tárolókkal. Mielőtt létrehozhat egy blobot, létre kell hoznia egy tárolót, amelyben tárolhatja. Új tároló létrehozásához válassza a + Tároló lehetőséget. Írja be
photosa Név mezőt, és válassza a Blob lehetőséget nyilvános hozzáférési szintként. Ezután az OK gombra kattintva hozzon létre egy "photos" nevű tárolót.Alapértelmezés szerint a tárolók és a tartalmuk privátak. A Blob hozzáférési szintként való kiválasztása nyilvánosan elérhetővé teszi a "fényképek" tárolóban lévő blobokat, de magát a tárolót nem teszi nyilvánossá. Ezt szeretné, mert a "fényképek" tárolóban tárolt képek egy webalkalmazásból lesznek összekapcsolva.
Ismételje meg az előző lépést egy "miniatűrök" nevű tároló létrehozásához, hogy a tároló nyilvános hozzáférési szintje blobra legyen állítva.
Ellenőrizze, hogy mindkét tároló megjelenik-e a tárfiók tárolóinak listájában, és hogy a nevek helyesen vannak-e beírva.
Zárja be a "Blob szolgáltatás" képernyőt. A tárfiók képernyő bal oldalán található menüben válassza a Hozzáférési kulcsok lehetőséget, majd kattintson a Kulcs1 billentyű melletti Másolás gombra. Illessze be ezt a hozzáférési kulcsot a kedvenc szövegszerkesztőbe későbbi használatra.
Létrehozott egy tárfiókot, amelyben tárolhatja a létrehozni kívánt alkalmazásba feltöltött képeket, valamint tárolókat a képek tárolásához.
Az Azure Storage Explorer futtatása
Az Azure Storage Explorer egy ingyenes eszköz, amely grafikus felületet biztosít az Azure Storage használatához Windows, macOS és Linux rendszerű számítógépeken. Az Azure Portallal azonos funkciókat biztosít, és más funkciókat is kínál, például a blob metaadatainak megtekintését. Ebben a szakaszban a Microsoft Azure Storage Explorer használatával tekintheti meg az előző szakaszban létrehozott tárolókat.
Ha még nem telepítette a Storage Explorert, vagy meg szeretné győződni arról, hogy a legújabb verziót futtatja, nyissa meg http://storageexplorer.com/ és töltse le és telepítse.
Indítsa el a Storage Explorert. Ha a rendszer arra kéri, hogy jelentkezzen be, ezt a Microsoft-fiókjával teheti meg – ugyanazzal, amelyet az Azure Portalra való bejelentkezéshez használt. Ha nem látja a tárfiókot a Storage Explorer bal oldali ablaktábláján, válassza az alábbiakban kiemelt Fiókok kezelése gombot, és győződjön meg arról, hogy a Microsoft-fiókja és a tárfiók létrehozásához használt előfizetés is hozzá lett adva a Storage Explorerhez.
A tárfiók melletti kis nyílra kattintva megjelenítheti a tárfiók tartalmát, majd a Blob-tárolók melletti nyílra kattintva. Győződjön meg arról, hogy a létrehozott tárolók megjelennek a listában.
A tárolók jelenleg üresek, de ez az alkalmazás üzembe helyezése és a fényképek feltöltése után megváltozik. Ha telepítve van a Storage Explorer, könnyen láthatja, hogy az alkalmazás mit ír a Blob Storage-ba.
Új webalkalmazás létrehozása a Visual Studióban
Ebben a szakaszban létrehoz egy új webalkalmazást a Visual Studióban, és kódot ad hozzá a képek feltöltéséhez, blobtárolóba való írásához és weblapon való megjelenítéséhez szükséges alapvető funkciók implementálásához.
Indítsa el a Visual Studiót, és használja a Fájl –> Új –> Projekt parancsot egy új Visual C# ASP.NET "Intellipix" nevű webalkalmazás-projekt létrehozásához (az intelligens képek rövidítéséhez).
Az "Új ASP.NET webalkalmazás" párbeszédpanelen győződjön meg arról, hogy az MVC be van jelölve. Ezután válassza az OK gombra.
Szánjon egy kis időt a Megoldáskezelő projektstruktúrájának áttekintésére. Többek között van egy Vezérlők nevű mappa, amely tartalmazza a projekt MVC-vezérlőit, valamint egy Nézetek nevű mappát, amely a projekt nézeteit tartalmazza. Az alkalmazás implementálása során ezekben a mappákban és más mappákban lévő eszközökkel fog dolgozni.
Használja a Visual Studio Hibakeresése –> Hibakeresés nélkül parancsot (vagy nyomja le a Ctrl+F5 billentyűkombinációt) az alkalmazás böngészőben való elindításához. Az alkalmazás jelenlegi állapota a következő:
Zárja be a böngészőt, és térjen vissza a Visual Studióba. A Megoldáskezelő kattintson a jobb gombbal az Intellipix projektre, és válassza a NuGet-csomagok kezelése... lehetőséget. Válassza a Tallózás lehetőséget. Ezután írja be
imageresizera keresőmezőbe, és válassza ki az ImageResizer nevű NuGet-csomagot. Végül válassza a Telepítés lehetőséget a csomag legújabb stabil verziójának telepítéséhez. Az ImageResizer olyan API-kat tartalmaz, amelyekkel képminiatűröket hozhat létre az alkalmazásba feltöltött képekből. OK bármilyen módosítást, és fogadja el az Ön számára bemutatott licenceket.
Ismételje meg ezt a folyamatot a WindowsAzure.Storage nevű NuGet-csomag projekthez való hozzáadásához. Ez a csomag API-kat tartalmaz az Azure Storage .NET-alkalmazásokból való eléréséhez. OK bármilyen módosítást, és fogadja el az Ön számára bemutatott licenceket.
Nyissa meg a Web.config fájlt, és adja hozzá a következő utasítást a
<appSettings>szakaszhoz, cserélje le a ACCOUNT_NAME az első szakaszban létrehozott tárfiók nevére, és ACCOUNT_KEY a mentett hozzáférési kulccsal.<add key="StorageConnectionString" value="DefaultEndpointsProtocol=https;AccountName=ACCOUNT_NAME;AccountKey=ACCOUNT_KEY" />Fontos
A Web.config fájl olyan bizalmas információkat tárol, mint az előfizetési kulcsok, és a .config kiterjesztésű fájlra irányuló HTTP-kéréseket a ASP.NET motor kezeli, amely egy "Ez a laptípus nem kézbesítve" üzenetet ad vissza. Ha azonban egy támadó talál egy másik biztonsági rést, amely lehetővé teszi számukra a Web.config tartalmainak megtekintését, akkor közzétehetik ezeket az információkat. A Web.config-adatok további védelméhez további lépéseket a Csatlakozás ion-sztringek és egyéb konfigurációs információk védelme című témakörben talál.
Nyissa meg a _Layout.cshtml nevű fájlt a projekt Nézetek/Megosztott mappájában. A 19. sorban módosítsa az "Alkalmazás neve" értéket "Intellipix" értékre. A sornak így kell kinéznie:
@Html.ActionLink("Intellipix", "Index", "Home", new { area = "" }, new { @class = "navbar-brand" })Feljegyzés
Egy ASP.NET MVC-projektben a _Layout.cshtml egy speciális nézet, amely sablonként szolgál más nézetekhez. Általában olyan élőfej- és élőláb-tartalmat határoz meg, amely a fájl összes nézetében gyakori.
Kattintson a jobb gombbal a projekt Modellek mappájára, és a Hozzáadás –> Osztály... paranccsal adjon hozzá egy BlobInfo.cs nevű osztályfájlt a mappához. Ezután cserélje le az üres BlobInfo osztályt a következő osztálydefinícióra:
public class BlobInfo { public string ImageUri { get; set; } public string ThumbnailUri { get; set; } public string Caption { get; set; } }Nyissa meg HomeController.cs a projekt Vezérlők mappájából, és adja hozzá a következő
usingutasításokat a fájl elejéhez:using ImageResizer; using Intellipix.Models; using Microsoft.WindowsAzure.Storage; using Microsoft.WindowsAzure.Storage.Blob; using System.Configuration; using System.Threading.Tasks; using System.IO;Cserélje le az Index metódust HomeController.cs a következő implementációra:
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(); }Az új Index metódus számba helyezi a
"photos"tárolóban lévő blobokat, és a blobokat képviselő BlobInfo-objektumok tömbjét továbbítja a nézetbe ASP.NET MVC ViewBag tulajdonságán keresztül. Később módosítja a nézetet az objektumok számbavételéhez és a fénykép miniatűrjeinek gyűjteményének megjelenítéséhez. A tárfiók eléréséhez és a blobok (CloudStorageAccount, CloudBlobClient és CloudBlobContainer) számbavételéhez használt osztályok a NuGeten keresztül telepített WindowsAzure.Storage csomagból származnak.Adja hozzá a következő metódust a HomeController osztályhoz a 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"); }Ez az a metódus, amelyet a rendszer a fénykép feltöltésekor hív meg. Az egyes feltöltött képeket blobként tárolja a
"photos"tárolóban, miniatűrképet hoz létre az eredeti képből aImageResizercsomag használatával, és blobként tárolja a miniatűrképet a"thumbnails"tárolóban.Nyissa meg az Index.cshmtl fájlt a projekt Nézetek/Kezdőlap mappájában, és cserélje le a tartalmát a következő kódra és korrektúrára:
@{ 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> }Az itt használt nyelv a Razor, amellyel végrehajtható kódot ágyazhat be HTML-korrektúrákba. A
@foreachfájl közepén lévő utasítás számba adja a ViewBag vezérlőtől kapott BlobInfo-objektumokat, és HTML-elemeket<img>hoz létre belőlük. Azsrcegyes elemek tulajdonsága inicializálva van a kép miniatűrt tartalmazó blob URI-jával.Töltse le és bontsa ki a photos.zip fájlt a GitHub-mintaadattárból. Ez az alkalmazás teszteléséhez használható különböző fényképek választéka.
Mentse a módosításokat, és nyomja le a Ctrl+F5 billentyűkombinációt az alkalmazás böngészőben való elindításához. Ezután válassza a Fénykép feltöltése lehetőséget, és töltse fel a letöltött képek egyikét. Ellenőrizze, hogy megjelenik-e a fénykép miniatűr verziója a lapon.
Töltsön fel még néhány képet a fényképek mappájából. Győződjön meg arról, hogy az oldalon is megjelennek:
Kattintson a jobb gombbal a böngészőben, és válassza a Lapforrás megtekintése lehetőséget a lap forráskódjának megtekintéséhez. Keresse meg a
<img>kép miniatűrjeit képviselő elemeket. Figyelje meg, hogy a képekhez rendelt URL-címek közvetlenül blobokra hivatkoznak a Blob Storage-ban. Ennek az az oka, hogy a tárolók nyilvános hozzáférési szintjét blobra állítja, ami nyilvánosan akadálymentessé teszi a blobokat.Térjen vissza az Azure Storage Explorerbe (vagy indítsa újra, ha nem hagyta futni), és válassza ki a tárolót a
"photos"tárfiókja alatt. A tárolóban lévő blobok számának meg kell egyezik a feltöltött fényképek számával. Kattintson duplán az egyik blobra a letöltéshez, és tekintse meg a blobban tárolt képet.
Nyissa meg a tárolót a
"thumbnails"Storage Explorerben. Nyissa meg az egyik blobot a képfeltöltésekből létrehozott miniatűrképek megtekintéséhez.
Az alkalmazás még nem kínál módot a feltöltött eredeti képek megtekintésére. Ideális esetben a kép miniatűrjének kiválasztásakor meg kell jelennie az eredeti képnek. Ezt a funkciót a következő lépésben fogja hozzáadni.
Fénymező hozzáadása fényképek megtekintéséhez
Ebben a szakaszban egy ingyenes, nyílt forráskódú JavaScript-kódtárat fog használni egy olyan lightbox-megjelenítő hozzáadásához, amely lehetővé teszi a felhasználók számára, hogy lássák az eredeti képeket, amelyeket feltöltöttek (nem csak a kép miniatűrjei). A fájlok az Ön számára vannak megadva. Mindössze annyit kell tennie, hogy integrálja őket a projektbe, és kisebb módosítást végez az Index.cshtml-ben.
Töltse le a lightbox.css és lightbox.js fájlokat a GitHub kódtárából.
A Megoldáskezelő kattintson a jobb gombbal a projekt Szkriptek mappájára, és az Add -> New Item... paranccsal hozzon létre egy lightbox.js fájlt. Illessze be a GitHub-kódtárban található példafájl tartalmát.
Kattintson a jobb gombbal a projekt "Tartalom" mappájára, és a Hozzáadás –> Új elem... paranccsal hozzon létre egy lightbox.css fájlt. Illessze be a GitHub-kódtárban található példafájl tartalmát.
Töltse le és bontsa ki a buttons.zip fájlt a GitHub-adatfájlok adattárából: https://github.com/Azure-Samples/cognitive-services-sample-data-files/tree/master/ComputerVision/storage-lab-tutorial. Négy gombos képnek kell lennie.
Kattintson a jobb gombbal az Intellipix-projektre a Megoldáskezelő, és az Add –> New Folder paranccsal vegyen fel egy "Images" nevű mappát a projekthez.
Kattintson a jobb gombbal a Képek mappára, és a Hozzáadás –> Meglévő elem... paranccsal importálja a letöltött négy képet.
Nyissa meg BundleConfig.cs a projekt "App_Start" mappájában. Adja hozzá a következő utasítást a metódushoz a
RegisterBundlesBundleConfig.cs:bundles.Add(new ScriptBundle("~/bundles/lightbox").Include( "~/Scripts/lightbox.js"));Ugyanebben a metódusban keresse meg azt az utasítást, amely létrehoz egy
StyleBundle"~/Content/css" fájlt, és adja hozzá a lightbox.css a csomag stíluslapjainak listájához. Itt található a módosított utasítás:bundles.Add(new StyleBundle("~/Content/css").Include( "~/Content/bootstrap.css", "~/Content/site.css", "~/Content/lightbox.css"));Nyissa meg a _Layout.cshtml fájlt a projekt Nézetek/Megosztott mappájában, és adja hozzá a következő utasítást a
@RenderSectionlenti utasítás előtt:@Scripts.Render("~/bundles/lightbox")Az utolsó feladat a lightbox megjelenítő beépítése a kezdőlapra. Ehhez nyissa meg az Index.cshtml fájlt (ez a projekt Nézetek/Kezdőlap mappájában található), és cserélje le a hurkot a
@foreachkövetkezőre:@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> }Mentse a módosításokat, és nyomja le a Ctrl+F5 billentyűkombinációt az alkalmazás böngészőben való elindításához. Ezután válassza ki a korábban feltöltött képek egyikét. Győződjön meg arról, hogy megjelenik egy fénymező, és megjelenik a kép kibővített nézete.
A fénymező jobb alsó sarkában lévő X elemet választva zárja be.
Most már megtekintheti a feltöltött képeket. A következő lépés az, hogy többet tegyenek ezekkel a képekkel.
Metaadatok létrehozása az Azure AI Vision használatával
Vision-erőforrás létrehozása
Létre kell hoznia egy Computer Vision-erőforrást az Azure-fiókjához; Ez az erőforrás kezeli az Azure Azure AI Vision szolgáltatáshoz való hozzáférését.
Kövesse az Azure AI-szolgáltatások erőforrásának létrehozásához szükséges utasításokat egy többszolgáltatásos vagy Vision-erőforrás létrehozásához.
Ezután nyissa meg az erőforráscsoport menüjét, és válassza ki a létrehozott Vision-erőforrást. Másolja a Végpont alatti URL-címet egy olyan helyre, ahová egy pillanat alatt egyszerűen lekérheti. Ezután válassza a Hozzáférési kulcsok megjelenítése lehetőséget.
Feljegyzés
A 2019. július 1. után létrehozott új erőforrások egyéni altartományneveket fognak használni. További információkért és a regionális végpontok teljes listájáért tekintse meg az Azure AI-szolgáltatások egyéni altartományneveit.
A következő ablakban másolja az 1. kulcs értékét a vágólapra.
Azure AI Vision-hitelesítő adatok hozzáadása
Ezután hozzáadja a szükséges hitelesítő adatokat az alkalmazáshoz, hogy hozzáférhessen a Vision-erőforrásokhoz.
Lépjen a web.config fájlra a projekt gyökerénél. Adja hozzá a következő utasításokat a <appSettings> fájl szakaszához, lecserélve VISION_KEY az előző lépésben másolt kulccsal és VISION_ENDPOINT az előző lépésben mentett URL-címmel.
<add key="SubscriptionKey" value="VISION_KEY" />
<add key="VisionEndpoint" value="VISION_ENDPOINT" />
A Megoldáskezelő. kattintson a jobb gombbal a projektmegoldásra, és válassza a NuGet-csomagok kezelése lehetőséget. A megnyíló csomagkezelőben válassza a Tallózás lehetőséget, jelölje be az Előzetes verzió belefoglalása lehetőséget, és keressen rá az Azure.AI.Vision.ImageAnalysis kifejezésre. Válassza a Telepítés lehetőséget.
Metaadat-létrehozási kód hozzáadása
Ezután hozzáadja azt a kódot, amely valójában az Azure AI Vision szolgáltatást használja a képek metaadatainak létrehozásához.
Nyissa meg a HomeController.cs fájlt a projekt Vezérlők mappájában, és adja hozzá a következő
usingutasításokat a fájl tetején:using Azure; using Azure.AI.Vision.ImageAnalysis; using System;Ezután lépjen a Feltöltés metódusra. Ez a metódus konvertálja és feltölti a képeket blobtárolóba. Adja hozzá a következő kódot közvetlenül a blokk után, amely a kép-blob-létrehozási folyamat végén kezdődik
// Generate a thumbnail. Ez a kód a lemezképet (photo) tartalmazó blobot használja, és az Azure AI Vision használatával készít leírást a rendszerképhez. Az Azure AI Vision API a rendszerképre vonatkozó kulcsszavak listáját is létrehozza. A létrehozott leírás és kulcsszavak a blob metaadataiban vannak tárolva, hogy később lekérhetők legyenek.// 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();Ezután nyissa meg az Index metódust ugyanabban a fájlban. Ez a metódus számba adja a tárolt képblobokat a célzott blobtárolóban (IListBlobItem-példányokként), és átadja őket az alkalmazásnézetnek. Cserélje le a
foreachmetódus blokkját a következő kódra. Ez a kód meghívja a CloudBlockBlob.FetchAttributes-t az egyes blobok csatolt metaadatainak lekéréséhez. Kinyeri a számítógép által létrehozott leírást (caption) a metaadatokból, és hozzáadja a BlobInfo objektumhoz, amelyet a rendszer átad a nézetnek.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 }); } }
Az alkalmazás tesztelése
Mentse a módosításokat a Visual Studióban, és nyomja le a Ctrl+F5 billentyűkombinációt az alkalmazás böngészőben való elindításához. Az alkalmazással további képeket tölthet fel a letöltött fényképkészletből vagy a saját mappájából. Amikor a kurzort az egyik új kép fölé viszi a nézetben, megjelenik egy elemleírás ablak, amely megjeleníti a számítógép által létrehozott képaláírás a képhez.
Az összes csatolt metaadat megtekintéséhez használja az Azure Storage Explorert a lemezképekhez használt tároló megtekintéséhez. Kattintson a jobb gombbal a tárolóban lévő blobokra, és válassza a Tulajdonságok lehetőséget. A párbeszédpanelen megjelenik a kulcs-érték párok listája. A számítógép által létrehozott képleírást az elem Captiontárolja, a keresési kulcsszavakat pedig a rendszer tároljaTag0Tag1, és így tovább. Ha végzett, a Mégse gombra kattintva zárja be a párbeszédpanelt.
Keresés hozzáadása az alkalmazáshoz
Ebben a szakaszban egy keresőmezőt fog hozzáadni a kezdőlaphoz, amellyel a felhasználók kulcsszókereséseket hajthatnak végre a feltöltött képeken. A kulcsszavak az Azure AI Vision API által generált és blob metaadatokban tárolt kulcsszavak.
Nyissa meg az Index.cshtml fájlt a projekt Nézetek/Kezdőlap mappájában, és adja hozzá az alábbi utasításokat az üres
<div>elemhez azclass="col-sm-4 pull-right"attribútummal:@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> }Ez a kód és korrektúra hozzáad egy keresőmezőt és egy Keresés gombot a kezdőlaphoz.
Nyissa meg a HomeController.cs a projekt Vezérlők mappájában, és adja hozzá a következő metódust a HomeController osztályhoz:
[HttpPost] public ActionResult Search(string term) { return RedirectToAction("Index", new { id = term }); }Ezt a metódust hívja meg a rendszer, amikor a felhasználó kiválasztja az előző lépésben hozzáadott Keresés gombot. Frissíti a lapot, és tartalmaz egy keresési paramétert az URL-címben.
Cserélje le az Index metódust a következő implementációra:
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(); }Figyelje meg, hogy az Index metódus most már elfogad egy paramétert
id, amely tartalmazza a felhasználó által a keresőmezőbe beírt értéket. Egy üres vagy hiányzóidparaméter azt jelzi, hogy az összes fényképet meg kell jeleníteni.Adja hozzá a következő segédmetódust a HomeController osztályhoz:
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; }Ezt a metódust az Index metódus hívja meg annak megállapításához, hogy az adott képblobhoz csatolt metaadat-kulcsszavak tartalmazzák-e a felhasználó által megadott keresési kifejezést.
Indítsa el újra az alkalmazást, és töltsön fel több fényképet. Nyugodtan használhatja saját fényképeit, nem csak az oktatóanyagban megadottakat.
Írjon be egy kulcsszót, például a "river" szót a keresőmezőbe. Ezután válassza a Keresés gombot.
A keresési eredmények a beírt adatoktól és a feltöltött képektől függően változnak. Az eredménynek azonban olyan képek szűrt listájának kell lennie, amelyek metaadat-kulcsszavak tartalmazzák a beírt kulcsszó egészét vagy egy részét.
Kattintson a böngésző vissza gombjára az összes kép ismételt megjelenítéséhez.
Már majdnem elkészült. Ideje üzembe helyezni az alkalmazást a felhőben.
Az alkalmazás üzembe helyezése az Azure-ban
Ebben a szakaszban üzembe helyezi az alkalmazást az Azure-ban a Visual Studióból. Lehetővé teszi, hogy a Visual Studio létrehozzon önnek egy Azure-webalkalmazást, így nem kell külön-külön bemennie az Azure Portalra, és létre kell hoznia.
Kattintson a jobb gombbal a projektre Megoldáskezelő, és válassza a Helyi menü Közzététel parancsát. Győződjön meg arról, hogy a Microsoft Azure-alkalmazás Szolgáltatás és az Új létrehozása lehetőség van kiválasztva, majd válassza a Közzététel gombot.
A következő párbeszédpanelen válassza az "IntellipixResources" erőforráscsoportot az Erőforráscsoport csoportban. Válassza az Új... gombot az "App Service-csomag" mellett, és hozzon létre egy új App Service-csomagot ugyanazon a helyen, ahol a tárfiókhoz kiválasztotta a tárfiókot, elfogadva az alapértelmezett értékeket mindenhol. Fejezze be a Létrehozás gombot.
Néhány pillanat múlva az alkalmazás megjelenik egy böngészőablakban. Jegyezze fel az URL-címet a címsorban. Az alkalmazás már nem helyileg fut; a weben, ahol nyilvánosan elérhető.
Ha módosítja az alkalmazást, és le szeretné küldeni a módosításokat a webe, folytassa újra a közzétételi folyamatot. A webes közzététel előtt továbbra is tesztelheti a módosításokat helyben.
Az erőforrások eltávolítása
Ha továbbra is dolgozni szeretne a webalkalmazáson, tekintse meg a Következő lépések szakaszt . Ha nem tervezi folytatni az alkalmazás használatát, törölje az összes alkalmazásspecifikus erőforrást. Az erőforrások törléséhez törölheti az Azure Storage-előfizetést és a Vision-erőforrást tartalmazó erőforráscsoportot. Ezzel eltávolítja a tárfiókot, a hozzá feltöltött blobokat és a ASP.NET webalkalmazáshoz való csatlakozáshoz szükséges App Service-erőforrást.
Az erőforráscsoport törléséhez nyissa meg az Erőforráscsoportok lapot a portálon, keresse meg a projekthez használt erőforráscsoportot, és válassza az Erőforráscsoport törlése lehetőséget a nézet tetején. A rendszer kérni fogja, hogy írja be az erőforráscsoport nevét, hogy megerősítse a törlést. A törlés után az erőforráscsoport nem állítható helyre.
Következő lépések
Az Azure-t sokkal többre használhatja, és még tovább fejlesztheti Intellipix-alkalmazását. Hozzáadhat például támogatást a felhasználók hitelesítéséhez és a fényképek törléséhez, és ahelyett, hogy arra kényszerítené a felhasználót, hogy várja meg, amíg az Azure AI-szolgáltatások feldolgoznak egy fényképet egy feltöltést követően, az Azure Functions használatával aszinkron módon hívhatja meg az Azure AI Vision API-t minden alkalommal, amikor képet adnak hozzá a Blob Storage-hoz. Az áttekintésben ismertetett számos más képelemzési műveletet is elvégezhet a képen.