Tutorial: Verwenden von „Azure KI Vision“ zum Generieren von Bildmetadaten in Azure Storage
In diesem Tutorial wird beschrieben, wie Sie den Dienst „Azure KI Vision“ in eine Web-App integrieren, um Metadaten für hochgeladene Bilder zu generieren. Dies ist für Digital Asset Management-Szenarien (DAM) nützlich, wenn ein Unternehmen z. B. beschreibende Titel oder durchsuchbare Schlüsselwörter für alle seine Bilder schnell generieren möchte.
Sie verwenden Visual Studio, um eine MVC-Web-App zu schreiben, die von Benutzern hochgeladene Bilder akzeptiert und die Bilder in Azure Blob Storage speichert. Sie erfahren, wie Sie Blobs in C# lesen und schreiben und Blobmetadaten verwenden, um zusätzliche Informationen an die von Ihnen erstellten Blobs anfügen. Anschließend übermitteln Sie jedes vom Benutzer hochgeladene Bild an die Azure KI Vision-API, um eine Beschriftung und Suchmetadaten für das Bild zu generieren. Abschließend können Sie die App mithilfe von Visual Studio in der Cloud bereitstellen.
Dieses Tutorial veranschaulicht folgende Vorgehensweisen:
- Erstellen eines Speicherkontos und Speichercontainers mit Azure-Portal
- Erstellen einer Web-App in Visual Studio und Bereitstellen in Azure
- Verwendung Azure KI Vision-API zur Extraktion von Informationen aus Bildern
- Anfügen von Metadaten an Azure Storage-Bilder
- Überprüfen von Bildmetadaten mit Azure Storage-Explorer
Tipp
Der Abschnitt Verwenden von Azure KI Vision zur Erstellung von Metadaten ist für die Bildanalyse am relevantesten. Gehen Sie direkt zu diesem Abschnitt, wenn Sie nur sehen möchten, wie die Bildanalyse in eine eingerichtete Anwendung integriert ist.
Wenn Sie kein Azure-Abonnement besitzen, können Sie ein kostenloses Konto erstellen, bevor Sie beginnen.
Voraussetzungen
- Visual Studio 2017 Community Edition oder höher mit Installation der Workloads „ASP.NET und Webentwicklung“ und „Azure-Entwicklung“.
- Das Tool Azure Storage-Explorer ist installiert.
Speicherkonto erstellen
In diesem Abschnitt nutzen Sie Azure-Portal zur Erstellung eines Speicherkontos. Anschließend erstellen Sie ein Containerpaar: einen zum Speichern von Bildern, die vom Benutzer hochgeladen wurden, und einen anderen zum Speichern von Bildminiaturansichten, die aus den hochgeladenen Bildern generiert wurden.
Melden Sie sich in Ihrem Browser beim Azure-Portal an. Wenn Sie aufgefordert werden, sich anzumelden, verwenden Sie dafür Ihr Microsoft-Konto.
Zum Erstellen eines Speicherkontos wählen Sie im Menüband auf der linken Seite + Ressource erstellen aus. Wählen Sie dann Speicher und anschließend Speicherkonto aus.
Geben Sie im Feld Name einen eindeutigen Namen für das Speicherkonto ein und stellen Sie sicher, dass daneben ein grünes Häkchen angezeigt wird. Der Name ist wichtig, da er einen Teil der URL bildet, über die auf Blobs zugegriffen wird, die unter diesem Konto erstellt wurden. Platzieren Sie das Speicherkonto in einer neuen Ressourcengruppe namens „IntellipixResources“ und wählen Sie die nächstgelegene Region aus. Wählen Sie abschließend unten im Bildschirm die Schaltfläche Überprüfen + erstellen aus, um das neue Speicherkonto zu erstellen.
Hinweis
Speicherkontonamen müssen zwischen 3 und 24 Zeichen lang sein und dürfen nur Zahlen und Kleinbuchstaben enthalten. Darüber hinaus muss der von Ihnen eingeben Name innerhalb von Azure eindeutig sein. Wenn eine andere Person denselben Namen gewählt hat, werden Sie benachrichtigt, dass der Name nicht mit einem roten Ausrufezeichen im Feld Name verfügbar ist.
Wählen Sie im Menüband auf der linken Seite Ressourcengruppen aus. Wählen Sie dann die Ressourcengruppe „IntellipixResources“ aus.
Wählen Sie auf der Registerkarte, die für die Ressourcengruppe geöffnet wird, das Speicherkonto aus, das Sie erstellt haben. Wenn das Speicherkonto dort noch nicht verfügbar ist, können Sie oben in Registerkarte solange Aktualisieren auswählen, bis das Speicherkonto angezeigt wird.
Wählen Sie in Registerkarte für das Speicherkonto Blobsaus, um eine Liste der Container anzuzeigen, die diesem Konto zugeordnet sind.
Das Speicherkonto verfügt derzeit über keine Container. Bevor Sie ein Blob hochladen können, müssen Sie einen Container erstellen, in dem der Blob gespeichert werden kann. Wählen Sie + Container aus, um einen neuen Container zu erstellen. Geben
photosSie in das Feld Name ein und wählen Sie Blob als öffentliche Zugriffsebene aus. Wählen Sie dann OK aus, um einen Container namens „Fotos“ zu erstellen.Standardmäßig sind Container und ihre Inhalte privat. Wenn Sie Blob als Zugriffsebene auswählen, werden die Blobs im Container „Fotos“ öffentlich zugänglich, der Container selbst wird jedoch nicht öffentlich gemacht. Dies ist das, was Sie erreichen möchten, da die im Container „Fotos“ gespeicherten Bilder aus einer Web-App mit verknüpft werden.
Wiederholen Sie den vorherigen Schritt, um einen Container mit dem Namen „Miniaturansichten“ zu erstellen, und stellen Sie dabei sicher, dass die öffentliche Zugriffsebene des Containers auf Blob eingestellt ist.
Vergewissern Sie sich, dass beide Container in der Liste der Container für dieses Speicherkonto angezeigt werden und dass die Namen richtig geschrieben sind.
Schließen Sie den Bildschirm „Blob-Dienst“. Wählen Sie im Menü auf der linken Seite des Speicherkontobildschirms Zugriffsschlüssel und dann die Schaltfläche Kopieren neben SCHLÜSSEL für Schlüssel1 aus. Fügen Sie diesen Zugriffsschlüssel zur späteren Verwendung in Ihren bevorzugten Text-Editor ein.
Sie haben nun sowohl ein Speicherkonto zum Speichern von Bildern erstellt, die in die App hochgeladen wurden, die Sie erstellen möchten, als auch Container zum Speichern der Bilder.
Ausführen von Azure Storage-Explorer
Azure Storage-Explorer ist ein kostenloses Tool, das eine grafische Benutzeroberfläche für die Arbeit mit Azure Storage auf PCs mit Windows, macOS und Linux bietet. Es bietet die meisten Funktionen wie Azure-Portal und darüber hinaus weitere Features, z. B. die Möglichkeit zum Anzeigen von Blobmetadaten. In diesem Abschnitt verwenden Sie Microsoft Azure Storage-Explorer, um die Container anzuzeigen, die Sie im vorherigen Abschnitt erstellt haben.
Wenn Sie Storage-Explorer installiert haben oder sicherstellen möchten, dass Sie die neueste Version ausführen, wechseln Sie zu http://storageexplorer.com/, laden Sie das Programm herunter und installieren Sie es.
Starten Sie den Storage-Explorer. Wenn Sie zur Anmeldung aufgefordert werden, verwenden Sie hierzu das gleiche Microsoft-Konto, das Sie für die Anmeldung beim Azure-Portal genutzt haben. Wenn das Speicherkonto im linken Bereich von Storage-Explorer nicht angezeigt wird, wählen Sie unten die Schaltfläche Konten verwalten aus, und stellen Sie sicher, dass sowohl Ihr Microsoft-Konto als auch das Abonnement, das zum Erstellen des Speicherkontos verwendet wurde, zu Storage-Explorer hinzugefügt wurden.
Wählen Sie den kleinen Pfeil neben dem Speicherkonto aus, um dessen Inhalt anzuzeigen, und wählen Sie dann den Pfeil neben Blobcontainer aus. Vergewissern Sie sich, dass die von Ihnen erstellten Container in der Liste angezeigt werden.
Die Container sind derzeit leer, aber dies ändert sich, nachdem Ihre App bereitgestellt wurde und Sie mit dem Hochladen von Fotos beginnen. Wenn Storage-Explorer installiert ist, können Sie leicht sehen, was Ihre App in den Blobspeicher schreibt.
Erstellen einer neuen Web-App in Visual Studio
In diesem Abschnitt erstellen Sie eine neue Web-App in Visual Studio und fügen Code hinzu, um die grundlegende Funktionalität zu implementieren, die zum Hochladen von Bildern, zum Schreiben dieser in den Blobspeicher und zum Anzeigen auf einer Webseite erforderlich ist.
Starten Sie Visual Studio und verwenden Sie den Befehl Datei > Neu > Projekt, um ein neues Visual C#-ASP.NET-Webanwendungsprojekt mit dem Namen „Intellipix“ (kurz für „Intelligent Pictures“) zu erstellen.
Klicken Sie im Dialogfeld „Neue ASP.NET-Webanwendung“ auf MVC. Wählen Sie dann OK aus.
Nehmen Sie sich einen Moment Zeit, um die Projektstruktur im Projektmappen-Explorer zu bewerten. Es gibt unter anderem einen Ordner namens Controller, der die MVC-Controller des Projekts enthält, und einen Ordner namens Ansichten, der die Ansichten des Projekts enthält. Während Sie die Anwendung implementieren, arbeiten Sie mit Ressourcen in diesen und anderen Ordnern.
Verwenden Sie den Visual Studio-Befehl Debuggen > Starten ohne Debuggen (oder Drücken auf STRG+F5), um die Anwendung in Ihrem Browser zu starten. So sieht die Anwendung im aktuellen Zustand aus:
Schließen Sie den Browser und kehren Sie zu Visual Studio zurück. Klicken Sie im Projektmappen-Explorer mit der rechten Maustaste auf das Projekt Intellipix und wählen Sie NuGet-Pakete verwalten... aus. Wählen Sie nun Durchsuchen aus. Geben Sie dann
imageresizerin das Suchfeld ein und wählen Sie das NuGet-Paket mit dem Namen ImageResizer aus. Wählen Sie zum Abschluss Installieren aus, um die neueste stabile Version des Pakets zu installieren. ImageResizer enthält APIs, mit denen Sie Miniaturansichten von Bildern aus den Bilder erstellen können, die in die App hochgeladen wurden. Bestätigen Sie alle Änderungen und akzeptieren Sie alle Ihnen präsentierten Lizenzen.
Wiederholen Sie diesen Vorgang, um das NuGet-Paket WindowsAzure.Storage zum Projekt hinzuzufügen. Dieses Paket enthält APIs für den Zugriff auf Azure Storage aus .NET-Anwendungen. Bestätigen Sie alle Änderungen und akzeptieren Sie alle Ihnen präsentierten Lizenzen.
Öffnen Web.config und fügen Sie dem Abschnitt
<appSettings>die folgende Anweisung hinzu. Ersetzen Sie dabei ACCOUNT_NAME durch den Namen des Speicherkontos, das Sie im ersten Abschnitt erstellt haben, und ACCOUNT_KEY durch den von Ihnen gespeicherten Zugriffsschlüssel.<add key="StorageConnectionString" value="DefaultEndpointsProtocol=https;AccountName=ACCOUNT_NAME;AccountKey=ACCOUNT_KEY" />Wichtig
Die Datei Web.config ist für vertrauliche Informationen wie Ihre Abonnementschlüssel bestimmt, und jede HTTP-Anforderung für eine Datei mit der Erweiterung .config wird von der ASP.NET-Engine verarbeitet. Diese gibt die Meldung „Dieser Seitentyp wird nicht bereitgestellt.“ zurück. Wenn ein Angreifer jedoch einen anderen Exploit findet, mit dem er den Inhalt der Datei Web.config anzeigen kann, kann er diese Informationen verfügbar machen. Weitere Schritte zum weiteren Schützen der Daten in der Datei Web.config finden Sie unter Schützen von Verbindungszeichenfolgen und anderen Konfigurationsinformationen.
Öffnen Sie die Datei _Layout.cshtml im Projektordner Ansichten/Shared. Ändern Sie in Zeile 19 "Anwendungsname" in "Intellipix". Die Zeile sollte wie folgt aussehen:
@Html.ActionLink("Intellipix", "Index", "Home", new { area = "" }, new { @class = "navbar-brand" })Hinweis
In einem ASP.NET MVC-Projekt ist _Layout.cshtml eine spezielle Ansicht, die als Vorlage für andere Ansichten dient. In der Regel definieren Sie Kopf- und Fußzeileninhalte, die allen Ansichten in dieser Datei gemeinsam sind.
Klicken Sie mit der rechten Maustaste auf den Projektordner Modelle und verwenden Sie den Befehl Hinzuzufügen > Klasse..., um dem Ordner eine Klassendatei mit dem Namen BlobInfo.cs hinzuzufügen. Ersetzen Sie dann die leere BlobInfo-Klasse durch die folgende Klassendefinition:
public class BlobInfo { public string ImageUri { get; set; } public string ThumbnailUri { get; set; } public string Caption { get; set; } }Öffnen Sie die HomeController.cs im Projektordner Controllers und fügen Sie oben in der Datei die folgenden
using-Anweisungen hinzu:using ImageResizer; using Intellipix.Models; using Microsoft.WindowsAzure.Storage; using Microsoft.WindowsAzure.Storage.Blob; using System.Configuration; using System.Threading.Tasks; using System.IO;Ersetzen Sie die Index-Methode in HomeController.cs durch die folgende Implementierung:
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(); }Die neue Index-Methode führt die Blobs im
"photos"Container auf und übergibt ein Array von BlobInfo-Objekten, die diese Blobs darstellen, über die ViewBag-Eigenschaft von ASP.NET MVC an die Ansicht. Später ändern Sie die Ansicht, um diese Objekte aufzuführen und eine Auflistung von Fotominiaturansichten anzuzeigen. Die Klassen, die Sie verwenden, um auf Ihr Speicherkonto zuzugreifen und die Blobs CloudStorageAccount, CloudBlobClient und CloudBlobContainer aufzuzählen, stammen aus dem WindowsAzure.Storage-Paket, das Sie über NuGet installiert haben.Fügen Sie der HomeController-Klasse in HomeController.cs die folgende Methode hinzu:
[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"); }Dies ist die Methode, die aufgerufen wird, wenn Sie ein Foto hochladen. Es speichert jedes hochgeladene Bild als Blob im
"photos"Container, erstellt mithilfe desImageResizerPakets ein Miniaturbild aus dem originalen Bild und speichert das Miniaturbild als Blob im"thumbnails"Container.Öffnen Sie Index.cshmtl im Projektordner Ansichten/Home und ersetzen Sie dessen Inhalt durch folgenden Code und Markup:
@{ 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> }Die hier verwendete Sprache ist Razor, mit der Sie ausführbaren Code in HTML-Markup einbetten können. Die
@foreach-Anweisung in der Mitte der Datei führt die BlobInfo-Objekte auf, die vom Controller in ViewBag übergeben werden und erstellt aus ihnen HTML-<img>-Elemente. Diesrc-Eigenschaft jedes Elements wird mit dem URI des Blobs initialisiert, das die Miniaturansicht des Bilds enthält.Laden Sie die Datei photos.zip aus GitHub-Beispieldaten-Repository herunter und entzippen Sie sie. Es handelt sich hierbei um eine Reihe verschiedener Fotos, die Sie zum Testen der App verwenden können.
Speichern Sie Ihre Änderungen und drücken Sie STRG+F5, um die Anwendung in Ihrem Browser zu starten. Wählen Sie dann Ein Foto hochladen aus und laden Sie eines der heruntergeladenen Bilder hoch. Vergewissern Sie sich, dass auf der Seite eine Miniaturansicht des Fotos angezeigt wird.
Laden Sie einige weitere Bilder aus Ihrem Fotos-Ordner hoch. Vergewissern Sie sich, dass sie auch auf der Seite angezeigt werden:
Klicken Sie mit der rechten Maustaste in Ihren Browser und wählen Sie Seitenquelle anzeigen aus, um den Quellcode für die Seite anzuzeigen. Suchen Sie die
<img>Elemente, die die Miniaturansichten des Bilds darstellen. Beachten Sie, dass die den Bildern zugewiesenen URLs direkt auf Blobs im Blobspeicher verweisen. Dies liegt daran, dass Sie die öffentliche Zugriffsebene der Container auf Blob festgelegt haben, wodurch die darin gespeicherten Blobs öffentlich zugänglich werden.Kehren Sie zum Azure Storage-Explorer zurück (oder starten Sie ihn neu, wenn Sie ihn nicht ausgeführt haben), und wählen Sie den Container
"photos"unter Ihrem Speicherkonto aus. Die Anzahl der Blobs im Container sollte der Anzahl der hochgeladenen Fotos entsprechen. Klicken Sie doppelt auf einen der Blobs, um diesen herunterzuladen und das im Blob gespeicherte Bild anzuzeigen.
Öffnen Sie den Container
"thumbnails"in Storage-Explorer. Öffnen Sie einen der Blobs, um die Miniaturbilder anzuzeigen, die aus den Bilduploads generiert wurden.
Die App bietet noch keine Möglichkeit zum Anzeigen der Originalbilder, die Sie hochgeladen haben. Im Idealfall sollte das Originalbild angezeigt werden, wenn Sie eine Miniaturansicht auswählen. Dieses Feature fügen Sie als nächstes hinzu.
Hinzufügen einer Lightbox zum Anzeigen von Fotos
In diesem Abschnitt verwenden Sie eine kostenlose Open-Source-JavaScript-Bibliothek, um einen Lightbox-Viewer hinzuzufügen, der es Benutzern ermöglicht, die hochgeladenen Originalbilder (nicht nur die Miniaturansichten) anzuzeigen. Die Dateien werden für Sie bereitgestellt. Sie müssen sie nur in das Projekt integrieren und eine geringfügige Änderung an Index.cshtml vornehmen.
Laden Sie die Dateien lightbox.css und lightbox.js aus dem GitHub-Code-Repository herunter.
Klicken Sie im Projektmappen-Explorer mit der rechten Maustaste auf den Projektordner Skripts, und verwenden Sie den Befehl Hinzufügen > Neues Element..., um eine lightbox.js-Datei zu erstellen. Fügen Sie den Inhalt aus der Beispieldatei in das GitHub-Code-Repository ein.
Klicken Sie mit der rechten Maustaste auf den Projektordner „Inhalt“, und erstellen Sie mit dem Befehl Hinzufügen > Neues Element... eine lightbox.css-Datei. Fügen Sie den Inhalt aus der Beispieldatei in das GitHub-Code-Repository ein.
Laden Sie die Datei photos.zip aus dem folgenden GitHub-Datendatei-Repository herunter und entzippen Sie sie: https://github.com/Azure-Samples/cognitive-services-sample-data-files/tree/master/ComputerVision/storage-lab-tutorial. Sie sollten über vier Schaltflächenbilder verfügen.
Klicken Sie mit der rechten Maustaste im Projektmappen-Explorer auf das Intellipix-Projekt, und verwenden Sie den Befehl Hinzufügen > Neuer Ordner, um dem Projekt einen Ordner mit dem Namen „Bilder“ hinzuzufügen.
Klicken Sie mit der rechten Maustaste auf den Ordner Bilder, und verwenden Sie den Befehl Hinzufügen > Vorhandenes Element..., um die vier heruntergeladenen Bilder zu importieren.
Öffnen Sie im Projektordner „App_Start“ die Datei BundleConfig.cs. Fügen Sie der
RegisterBundles-Methode in BundleConfig.cs folgende Anweisung zu hinzu:bundles.Add(new ScriptBundle("~/bundles/lightbox").Include( "~/Scripts/lightbox.js"));Suchen Sie in derselben Methode die Anweisung, die ein
StyleBundleaus „~/Content/css“ erstellt und fügen Sie lightbox.css zur Liste der Stylesheets im Paket hinzu. Dies ist die geänderte Anweisung:bundles.Add(new StyleBundle("~/Content/css").Include( "~/Content/bootstrap.css", "~/Content/site.css", "~/Content/lightbox.css"));Öffnen _Layout.cshtml im Projektordner Ansichten/Shared und fügen Sie die folgende Anweisung direkt vor der
@RenderSection-Anweisung in der Nähe der Unterseite hinzu:@Scripts.Render("~/bundles/lightbox")Die letzte Aufgabe besteht darin, den Lightbox-Viewer in die Homepage zu integrieren. Öffnen Sie hierzu Index.cshtml (im Projektordner Ansichten/Home) und ersetzen Sie die
@foreach-Schleife durch folgende:@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> }Speichern Sie Ihre Änderungen und drücken Sie STRG+F5, um die Anwendung in Ihrem Browser zu starten. Wählen Sie dann eines der Bilder aus, die Sie zuvor hochgeladen haben. Vergewissern Sie sich, dass eine Lightbox und eine vergrößerte Ansicht des Bilds angezeigt wird.
Wählen Sie das X in der unteren rechten Ecke der Lightbox aus, um sie zu schließen.
Nun können Sie die hochgeladenen Bilder anzeigen. Der nächste Schritt besteht in der weiteren Verarbeitung dieser Bilder.
Verwenden von Azure KI Vision zur Erstellung von Metadaten
Erstellen einer Vision-Ressource
Sie müssen für Ihr Azure-Konto eine Ressource für maschinelles Sehen erstellen. Mit dieser Ressource wird der Zugriff auf den Azure KI Vision-Dienst verwaltet.
Befolgen Sie die Anweisungen unter Erstellen einer Azure KI Services-Ressource, um eine Ressource für mehrere Dienste oder eine Vision-Ressource zu erstellen.
Rufen Sie dann das Menü für Ihre Ressourcengruppe auf und wählen Sie die erstellte Vision-Ressource aus. Kopieren Sie die URL unter Endpunkt an einen Ort, an dem Sie gleich schnell darauf zugreifen können. Wählen Sie dann Zugriffsschlüssel anzeigen aus.
Hinweis
Neue Ressourcen, die nach dem 1. Juli 2019 erstellt wurden, verwenden benutzerdefinierte Unterdomänennamen. Weitere Informationen und eine vollständige Liste mit regionalen Endpunkten finden Sie unter Benutzerdefinierte Unterdomänennamen für Azure KI Services.
Kopieren Sie im nächsten Fenster den Wert von SCHLÜSSEL 1 in die Zwischenablage.
Hinzufügen von Anmeldeinformationen für Azure KI Vision
Als Nächstes fügen Sie Ihrer App die erforderlichen Anmeldeinformationen hinzu, damit der Zugriff auf Vision-Ressourcen möglich ist.
Navigieren Sie zur Datei Web.config im Stamm des Projekts. Fügen Sie dem Abschnitt <appSettings> der Datei die folgenden Anweisungen hinzu, und ersetzen Sie dabei VISION_KEY durch den Schlüssel, den Sie im vorherigen Schritt kopiert haben, und VISION_ENDPOINT durch die URL, die Sie im Schritt davor gespeichert haben.
<add key="SubscriptionKey" value="VISION_KEY" />
<add key="VisionEndpoint" value="VISION_ENDPOINT" />
Im Projektmappen-Explorer. Klicken Sie mit der rechten Maustaste auf die Projektlösung und wählen Sie NuGet-Pakete verwalten. In dem sich öffnenden Paketmanager wählen Sie Durchsuchen, markieren Sie Vorabversion einbeziehen und suchen Sie nach Azure.AI.Vision.ImageAnalysis. Wählen Sie Installieren aus.
Hinzufügen des Codes zum Generieren von Metadaten
Als Nächstes fügen Sie den Code hinzu, der den Dienst „Azure KI Vision“ nutzt, um Metadaten für Bilder zu erstellen.
Öffnen Sie die Datei HomeController.cs im Ordner Controllers des Projekts, und fügen Sie oben in der Datei die folgenden
using-Anweisungen hinzu:using Azure; using Azure.AI.Vision.ImageAnalysis; using System;Fahren Sie dann mit der Upload-Methode fort. Hierbei werden Bilder konvertiert und in den Blobspeicher hochgeladen. Fügen Sie den folgenden Code direkt nach dem Block hinzu, der mit
// Generate a thumbnailbeginnt (oder am Ende Ihres Prozesses für die Erstellung von Bildblobs). In diesem Code wird für das Blob, in dem das Bild (photo) enthalten ist, Azure KI Vision verwendet, um eine Beschreibung für das Bild zu generieren. Mit der Azure KI Vision-API wird auch eine Liste mit Schlüsselwörtern generiert, die auf das Bild angewendet werden. Die generierte Beschreibung und die Schlüsselwörter werden in den Metadaten des Blobs gespeichert, damit sie später abgerufen werden können.// 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();Navigieren Sie als Nächstes in derselben Datei zur Index-Methode. Mit dieser Methode werden die gespeicherten Bildblobs im betreffenden Blobcontainer enumeriert (als IListBlobItem-Instanzen) und an die Anwendungsansicht übergeben. Ersetzen Sie den
foreach-Block in dieser Methode durch den folgenden Code. Mit diesem Code wird CloudBlockBlob.FetchAttributes aufgerufen, um die angefügten Metadaten für jedes Blob abzurufen. Die per Computer generierte Beschreibung (caption) wird aus den Metadaten extrahiert und dem BlobInfo-Objekt hinzugefügt, das dann an die Ansicht übergeben wird.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 }); } }
Testen der App
Speichern Sie Ihre Änderungen in Visual Studio, und drücken Sie STRG+F5, um die Anwendung in Ihrem Browser zu starten. Verwenden Sie die App, um einige weitere Bilder hochzuladen, entweder aus dem heruntergeladenen Fotosatz oder aus Ihrem eigenen Ordner. Wenn Sie den Mauszeiger in der Ansicht auf eines der neuen Bilder bewegen, sollte ein QuickInfo-Fenster mit dem per Computer generierten Beschriftungstext für das Bild angezeigt werden.
Verwenden Sie zum Anzeigen aller angefügten Metadaten Azure Storage-Explorer, um den Speichercontainer einzublenden, den Sie für Bilder nutzen. Klicken Sie mit der rechten Maustaste auf die Blobs im Container, und wählen Sie Eigenschaften. Im Dialogfeld wird eine Liste mit Schlüssel-Wert-Paaren angezeigt. Die per Computer generierte Bildbeschreibung wird unter dem Element Caption gespeichert, und die Schlüsselwörter für die Suche unter Tag0, Tag1 usw. Wählen Sie Abbrechen aus, wenn Sie fertig sind, um das Dialogfeld zu schließen.
Hinzufügen der Suchfunktion zu Ihrer App
In diesem Abschnitt fügen Sie der Homepage ein Suchfeld hinzu, mit dem Benutzer Schlüsselwortsuchen für die hochgeladenen Bilder durchführen können. Die Schlüsselwörter werden von der Azure KI Vision-API generiert und in Blobmetadaten gespeichert.
Öffnen Sie Index.cshtml im Projektordner Ansichten/Home und fügen Sie dem leeren
<div>-Element mit demclass="col-sm-4 pull-right"-Attribut die folgenden Anweisungen hinzu:@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> }Dieser Code und das Markup fügt der Homepage ein Suchfeld und eine Schaltfläche Suchen hinzu.
Öffnen Sie die HomeController.cs im Projektordner Controllers und fügen Sie der HomeController-Klasse die folgende Methode hinzu:
[HttpPost] public ActionResult Search(string term) { return RedirectToAction("Index", new { id = term }); }Dies ist die Methode, die aufgerufen wird, wenn der Benutzer die Schaltfläche Suchen auswählt, die im vorherigen Schritt hinzugefügt wurde. Damit wird die Seite aktualisiert, sodass diese nun einen Suchparameter in der URL enthält.
Ersetzen Sie die Index-Methode durch die folgende Implementierung:
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(); }Beachten Sie, dass die Index-Methode jetzt eine Parameter-
idakzeptiert, die den vom Benutzer in das Suchfeld eingegebenen Wert enthält. Ein leerer oder fehlenderid-Parameter bedeutet, dass alle Fotos angezeigt werden sollen.Fügen Sie der HomeController-Klasse die folgende Methode hinzu:
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; }Diese Methode wird von der Index-Methode aufgerufen, um zu bestimmen, ob die Metadatenschlüsselwörter, die an ein bestimmtes Bildblob angefügt sind, den vom Benutzer eingegebenen Suchbegriff enthalten.
Starten Sie die Anwendung erneut und laden Sie mehrere Fotos hoch. Sie können ihre eigenen Fotos verwenden, nicht nur diejenigen, die im Tutorial bereitgestellt werden.
Geben Sie ein Schlüsselwort wie „Fluss“ in das Suchfeld ein. Wählen Sie dann die Schaltfläche Suchen aus.
Die Suchergebnisse hängen davon ab, was Sie eingeben und welche Bilder Sie hochgeladen haben. Das Ergebnis sollte jedoch eine gefilterte Liste von Bildern sein, deren Metadatenschlüsselwörter das eingegebene Schlüsselwort ganz oder teilweise enthalten.
Wählen Sie die Zurück-Schaltfläche des Browsers aus, um alle Bilder erneut anzuzeigen.
Sie haben es fast geschafft. Es ist an der Zeit, die App in der Cloud bereitzustellen.
Bereitstellen der Anwendung in Azure
In diesem Abschnitt stellen Sie die App in Azure aus Visual Studio bereit. Sie erlauben Visual Studio, eine Azure-Web-App für Sie zu erstellen, um zu verhindern, dass Sie in das Azure-Portal gehen und diese dort selbst erstellen müssen.
Klicken Sie im Projektmappen-Explorer mit der rechten Maustaste auf das Projekt und wählen Sie im Kontextmenü Veröffentlichen... aus. Stellen Sie sicher, dass Microsoft Azure App Service und Neu erstellen ausgewählt sind und wählen Sie dann die Schaltfläche Veröffentlichen aus.
Wählen Sie im nächsten Dialogfeld unter Ressourcengruppe die Ressourcengruppe „IntellipixResources“ aus. Wählen Sie die Schaltfläche Neu... neben „App Service-Plan“ aus, und erstellen Sie einen neuen App Service-Plan an dem Speicherort, den Sie unter Erstellen eines Speicherkontos für das Speicherkonto ausgewählt haben, und übernehmen Sie die Standardwerte überall sonst. Wählen Sie abschließend die Schaltfläche Erstellen aus.
Nach einigen Augenblicken wird die App in einem Browserfenster angezeigt. Notieren Sie die URL in der Adressleiste. Die App wird nicht mehr lokal ausgeführt. Sie ist im Web verfügbar, wo sie öffentlich zugänglich ist.
Wenn Sie Änderungen an der App vornehmen und die Änderungen in das Web pushen möchten, können Sie den Veröffentlichungsprozess erneut durchlaufen. Sie können Ihre Änderungen weiterhin lokal testen, bevor Sie sie im Web veröffentlichen.
Bereinigen von Ressourcen
Falls Sie mit Ihrer Web-App weiterarbeiten möchten, helfen Ihnen die Informationen im Abschnitt Nächste Schritte weiter. Wenn Sie nicht planen, diese Anwendung weiter zu nutzen, sollten Sie alle App-spezifischen Ressourcen löschen. Zum Löschen von Ressourcen können Sie die Ressourcengruppe löschen, die Ihr Azure Storage-Abonnement und die Vision-Ressource enthält. Das Speicherkonto, die dafür hochgeladenen Blobs und die App Service-Ressource, die zum Herstellen der Verbindung mit der ASP.NET-Web-App benötigt werden, werden entfernt.
Öffnen Sie zum Löschen der Ressourcengruppe im Portal die Registerkarte Ressourcengruppe, navigieren Sie zu der Ressourcengruppe, die Sie für dieses Projekt verwendet haben, und wählen Sie oben in der Ansicht Ressourcengruppe löschen aus. Sie werden gebeten, den Namen der Ressourcengruppe einzugeben, um zu bestätigen, dass Sie die Gruppe löschen möchten. Nach dem Löschen kann eine Ressourcengruppe nicht wiederhergestellt werden.
Nächste Schritte
Es gibt noch viel mehr, was Sie tun können, um Azure zu verwenden und Ihre Intellipix-App noch weiter zu entwickeln. Beispielsweise können Sie Unterstützung für die Authentifizierung von Benutzern und das Löschen von Fotos hinzufügen. Anstatt zu erzwingen, dass der Benutzer nach einem Upload auf die Verarbeitung eines Fotos durch Azure KI Services wartet, können Sie Azure Functions verwenden, um die Azure KI Vision-API bei jedem Hinzufügen eines Bilds zum Blobspeicher asynchron aufzurufen. Sie können auch eine beliebige Anzahl anderer Bildanalysevorgänge für das Bild durchführen, wie in der Übersicht beschrieben.