Tutoriel : Utiliser Azure AI Vision pour générer des métadonnées d’image dans le stockage Azure
Ce tutoriel décrit comment intégrer le service Azure AI Vision dans une application web afin de générer des métadonnées pour des images chargées. Cela est utile pour les scénarios de gestion des actifs numériques, par exemple si une entreprise souhaite générer rapidement des sous-titres descriptifs ou des mots clés de recherche pour toutes ses images.
Vous utiliserez Visual Studio pour écrire une application web MVC qui accepte les images chargées par les utilisateurs et stocke les images dans Stockage Blob Azure. Vous apprendrez à lire et à écrire des blobs en C# et à utiliser les métadonnées des blobs pour joindre des informations supplémentaires aux blobs que vous créez. Ensuite, vous soumettrez chaque image chargée par l’utilisateur à l’API Azure AI Vision pour générer une légende et des métadonnées de recherche pour l’image. Enfin, vous pouvez déployer l’application dans le cloud à l’aide de Visual Studio.
Ce didacticiel vous explique les procédures suivantes :
- Créer un compte de stockage et des conteneurs de stockage à l’aide du portail Azure
- Créer une application web dans Visual Studio et la déployer dans Azure
- Utiliser l’API Azure AI Vision pour extraire des informations des images
- Attacher des métadonnées aux images du stockage Azure
- Vérifier les métadonnées des images à l’aide d’Explorateur Stockage Azure
Conseil
La section Utiliser Azure AI Vision pour générer des métadonnées est la plus pertinente pour l’analyse d’images. Passez directement à cette section si vous souhaitez simplement voir comment l’analyse d’images est intégrée à une application établie.
Si vous n’avez pas d’abonnement Azure, créez un compte gratuit avant de commencer.
Prérequis
- Visual Studio 2017 Community ou ultérieur, avec les charges de travail « ASP.NET et développement web » et « Développement Azure » installées.
- L’outil Explorateur Stockage Azure installé.
Créez un compte de stockage.
Dans cette section, vous allez utiliser le portail Azure pour créer un compte de stockage. Vous créerez ensuite deux conteneurs : l’un pour stocker les images chargées par l’utilisateur et l’autre pour stocker les miniatures d’images générées à partir des images téléchargées.
Connectez-vous au portail Azure dans votre navigateur. Si vous êtes invité à vous connecter, faites-le en utilisant votre compte Microsoft.
Pour créer un compte de stockage, sélectionnez + Créer une ressource dans le ruban de gauche. Choisissez ensuite Stockage, puis Compte de stockage.
Entrez un nom unique pour le compte de stockage dans le champ Nom et assurez-vous qu’une coche verte apparaît à côté. Le nom est important, car il constitue une partie de l’URL par le biais de laquelle les blobs créés sous ce compte sont accessibles. Placez le compte de stockage dans un nouveau groupe de ressources nommé « IntellipixResources » et sélectionnez la région la plus proche de vous. Pour finir, cliquez sur le bouton Vérifier + créer en bas de l’écran pour créer le nouveau compte de stockage.
Notes
Les noms des comptes de stockage peuvent comporter de 3 à 24 caractères, uniquement des lettres minuscules et des chiffres. En outre, le nom que vous entrez doit être unique au sein d’Azure. Si quelqu’un d’autre a choisi le même nom, vous êtes informé que le nom n’est pas disponible avec un point d’exclamation rouge dans le champ Nom.
Sélectionnez Groupes de ressources dans le ruban de gauche. Choisissez ensuite le groupe de ressources « IntellipixResources ».
Dans l’onglet qui s’ouvre pour le groupe de ressources, sélectionnez le compte de stockage que vous avez créé. Si le compte de stockage n’est pas encore présent, cliquez sur Actualiser en haut de l’onglet jusqu’à ce qu’il apparaisse.
Dans l’onglet du compte de stockage, sélectionnez Blobs pour afficher la liste des conteneurs associés à ce compte.
Le compte de stockage n’a actuellement aucun conteneur. Avant de pouvoir créer un blob, vous devez créer un conteneur dans lequel le stocker. Sélectionnez + Conteneur pour créer un conteneur. Saisissez
photosdans le champ Nom et sélectionnez Blob comme niveau d’accès public. Cliquez ensuite sur OK pour créer un conteneur nommé « photos ».Par défaut, les conteneurs et leur contenu sont privés. La sélection de Blob comme niveau d’accès rend les blobs du conteneur « photos » publiquement accessibles, mais ne rend pas public le conteneur proprement dit. C’est ce que vous voulez, car les images stockées dans le conteneur « photos » seront liées à partir d’une application web.
Répétez l’étape précédente pour créer un conteneur nommé « miniatures », en vous assurant une fois de plus que le niveau d’accès public du conteneur est défini sur Blob.
Vérifiez que les deux conteneurs apparaissent dans la liste des conteneurs de ce compte de stockage et que les noms sont correctement orthographiés.
Fermez l’écran « Service BLOB ». Cliquez sur Clés d’accès dans le menu de gauche du compte de stockage, puis sélectionnez le bouton Copier en regard de CLÉ pour key1. Collez cette clé d’accès dans votre éditeur de texte favori pour une utilisation ultérieure.
Vous avez maintenant créé un compte de stockage pour contenir les images chargées vers l’application que vous allez créer, ainsi que des conteneurs dans lesquels stocker les images.
Exécuter Explorateur Stockage Azure
Explorateur Stockage Azure est un outil gratuit qui fournit une interface graphique permettant de travailler avec Stockage Azure sur des PC sous Windows, macOS et Linux. Il offre la plupart des mêmes fonctionnalités que le portail Azure et propose d’autres fonctionnalités comme la possibilité de visualiser les métadonnées des blobs. Dans cette section, vous allez utiliser Explorateur Stockage Microsoft Azure pour afficher les conteneurs que vous avez créés dans la section précédente.
Si vous n’avez pas installé Explorateur Stockage ou si vous souhaitez vous assurer que vous exécutez la version la plus récente, accédez à l’adresse http://storageexplorer.com/ et téléchargez et installez-la.
Démarrez l’Explorateur Stockage. Si vous êtes invité à vous connecter, utilisez votre compte Microsoft (celui que vous avez utilisé pour vous connecter au portail Azure). Si le compte de stockage n’apparaît pas dans le volet de gauche d’Explorateur Stockage, cliquez sur le bouton Gérer les comptes mis en évidence ci-dessous et assurez-vous que votre compte Microsoft et l’abonnement utilisé pour créer le compte de stockage ont été ajoutés à Explorateur Stockage.
Cliquez sur la petite flèche en regard du compte de stockage pour afficher son contenu, puis sélectionnez la flèche en regard de Conteneurs de blobs. Vérifiez que les conteneurs que vous avez créés apparaissent dans la liste.
Les conteneurs sont actuellement vides, mais cela changera une fois que votre application sera déployée et que vous commencerez à charger des photos. L’installation d’Explorateur Stockage vous permettra de voir facilement ce que votre application écrit dans Stockage Blob.
Créer une application web dans Visual Studio
Dans cette section, vous allez créer une application web dans Visual Studio et ajouter du code pour implémenter les fonctionnalités de base requises pour charger des images, les écrire dans Stockage Blob et les afficher dans une page web.
Démarrez Visual Studio et utilisez la commande Fichier -> Nouveau -> Projet pour créer un projet Application web ASP.NET Visual C# nommé « Intellipix » (abréviation de « Intelligent Pictures », images intelligentes).
Dans la boîte de dialogue « Nouvelle application web ASP.NET », assurez-vous que MVC est sélectionné. Sélectionnez ensuite OK.
Prenez un moment pour examiner la structure du projet dans Explorateur de solutions. Vous y trouverez, entre autres, un dossier nommé Controllers, qui contient les contrôleurs MVC du projet, et un dossier nommé Views, qui contient les affichages du projet. Vous travaillerez avec les ressources de ces dossiers et d’autres dossiers au fur et à mesure de l’implémentation de l’application.
Utilisez la commande Déboguer -> Démarrer sans débogage de Visual Studio (ou appuyez sur Ctrl+F5) pour lancer l’application dans votre navigateur. Voici à quoi ressemble l’application dans son état actuel :
Fermez le navigateur et revenez à Visual Studio. Dans Explorateur de solutions, cliquez avec le bouton droit sur le projet Intellipix et sélectionnez Gérer les packages NuGet…. Cliquez sur Parcourir. Saisissez ensuite
imageresizerdans la zone de recherche et sélectionnez le package NuGet nommé ImageResizer. Enfin, cliquez sur Installer pour installer la dernière version stable du package. ImageResizer contient des API que vous allez utiliser pour créer des miniatures d’image à partir des images chargées dans l’application. Validez les modifications et acceptez les licences qui vous sont présentées.
Répétez ce processus pour ajouter le package NuGet nommé WindowsAzure.Storage au projet. Ce package contient des API permettant d’accéder à Stockage Azure à partir d’applications .NET. Validez les modifications et acceptez les licences qui vous sont présentées.
Ouvrez Web.config et ajoutez l’instruction suivante à la section
<appSettings>, en remplaçant ACCOUNT_NAME par le nom du compte de stockage que vous avez créé dans la première section, et ACCOUNT_KEY par la clé d’accès que vous avez enregistrée.<add key="StorageConnectionString" value="DefaultEndpointsProtocol=https;AccountName=ACCOUNT_NAME;AccountKey=ACCOUNT_KEY" />Important
Le fichier Web.config est destiné à contenir des informations sensibles comme vos clés d’abonnement. Toute requête HTTP adressée à un fichier avec l’extension .config est gérée par le moteur ASP.NET, qui retourne un message « Ce type de page n’est pas traité ». Toutefois, si un attaquant est en mesure de trouver un autre code malveillant exploitant une faille de sécurité permettant d’afficher vos contenus Web.config, il est en mesure d’exposer ces informations. Consultez Protection des chaînes de connexion et autres informations de configuration pour découvrir les étapes supplémentaires permettant de sécuriser davantage vos données Web.config.
Ouvrez le fichier nommé _Layout.cshtml dans le dossier Views/Shared du projet. Sur la ligne 19, remplacez « Nom de l’application » par « Intellipix ». La ligne doit se présenter comme suit :
@Html.ActionLink("Intellipix", "Index", "Home", new { area = "" }, new { @class = "navbar-brand" })Notes
Dans un projet MVC ASP.NET, _Layout.cshtml est un affichage spécial qui sert de modèle aux autres affichages. Dans ce fichier, vous définissez généralement le contenu de l’en-tête et du pied de page qui est commun à tous les affichages.
Cliquez avec le bouton droit sur le dossier Modèles du projet et utilisez la commande Ajouter -> Classe... pour ajouter un fichier de classe nommé BlobInfo.cs au dossier. Remplacez ensuite la classe BlobInfo vide par la définition de classe suivante :
public class BlobInfo { public string ImageUri { get; set; } public string ThumbnailUri { get; set; } public string Caption { get; set; } }Ouvrez HomeController.cs dans le dossier Controllers du projet et ajoutez les instructions
usingsuivantes en haut du fichier :using ImageResizer; using Intellipix.Models; using Microsoft.WindowsAzure.Storage; using Microsoft.WindowsAzure.Storage.Blob; using System.Configuration; using System.Threading.Tasks; using System.IO;Remplacez la méthode Index dans HomeController.cs par l’implémentation suivante :
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(); }La nouvelle méthode Index énumère les blobs dans le conteneur
"photos"et transmet un tableau d’objets BlobInfo représentant ces blobs à l’affichage par le biais de la propriété ViewBag de MVC ASP.NET. Plus tard, vous modifierez l’affichage pour énumérer ces objets et afficher une collection de miniatures de photos. Les classes que vous allez utiliser pour accéder à votre compte de stockage et énumérer les objets blob (CloudStorageAccount, CloudBlobClient et CloudBlobContainer) proviennent du package WindowsAzure.Storage que vous avez installé via NuGet.Ajoutez la méthode suivante à la classe HomeController dans 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"); }Il s’agit de la méthode qui est appelée lorsque vous chargez une photo. Elle stocke chaque image chargée sous la forme d’un blob dans le conteneur
"photos", crée une image miniature à partir de l’image d’origine à l’aide du packageImageResizeret stocke la l’image miniature sous la forme d’un blob dans le conteneur"thumbnails".Ouvrez Index.cshmtl dans le dossier Views/Home du projet et remplacez son contenu par le code et le balisage suivants :
@{ 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> }Le langage utilisé ici est Razor, qui permet d’incorporer du code exécutable dans le balisage HTML. L’instruction
@foreachau milieu du fichier énumère les objets BlobInfo transmis par le contrôleur dans ViewBag et crée des éléments HTML<img>à partir de ceux-ci. La propriétésrcde chaque élément est initialisée avec l’URI du blob contenant la miniature de l’image.Téléchargez et décompressez le fichier photos.zip provenant de l’exemple de référentiel de données GitHub. Il s’agit d’un assortiment de différentes photos que vous pouvez utiliser pour tester l’application.
Enregistrez vos modifications, puis appuyez sur Ctrl+F5 pour lancer l’application dans votre navigateur. Cliquez ensuite sur Charger une photo et chargez l’une des images que vous avez téléchargées. Confirmez qu’une version miniature de la photo apparaît sur la page.
Chargez quelques images supplémentaires à partir de votre dossier photos. Confirmez qu’elles apparaissent également sur la page :
Cliquez avec le bouton droit dans votre navigateur et sélectionnez Afficher la source de la page pour afficher le code source de la page. Recherchez les éléments
<img>représentant les miniatures d’image. Notez que les URL attribuées aux images font directement référence aux blobs dans Stockage Blob. Cela s’explique par le fait que vous avez défini le niveau d’accès public des conteneurs sur Blob, ce qui rend les blobs qu’ils contiennent accessibles au public.Revenez à Explorateur Stockage Azure (ou redémarrez-le si vous ne l’avez pas laissé tourner) et sélectionnez le conteneur
"photos"sous votre compte de stockage. Le nombre de blobs dans le conteneur doit être égal au nombre de photos que vous avez chargées. Double-cliquez sur l’un des blobs pour le télécharger et voir l’image stockée dans le blob.
Ouvrez le conteneur
"thumbnails"dans Explorateur Stockage. Ouvrez l’un des blobs pour afficher les images miniatures générées à partir des images chargées.
L’application ne permet pas encore d’afficher les images d’origine que vous avez chargées. Dans l’idéal, la sélection d’une miniature d’image doit afficher l’image d’origine. Cette fonctionnalité sera ajoutée prochainement.
Ajouter une table lumineuse pour l’affichage des photos
Dans cette section, vous allez utiliser une bibliothèque JavaScript gratuite et open source pour ajouter une visionneuse de type « table lumineuse » qui permet aux utilisateurs de voir les images d’origine qu’ils ont chargées (plutôt que les miniatures d’image). Les fichiers sont fournis pour vous. Il vous suffit de les intégrer au projet et d’apporter une modification mineure à Index.cshtml.
Téléchargez les fichiers lightbox.css et lightbox.js à partir du référentiel de code GitHub.
Dans l’Explorateur de solutions, cliquez avec le bouton droit sur le dossier Scripts de votre projet et utilisez la commande Ajouter -> Nouvel élément... pour créer un fichier lightbox.js. Collez le contenu du fichier d’exemple dans le référentiel de code GitHub.
Cliquez avec le bouton droit sur le dossier « Content » du projet et utilisez la commande Ajouter -> Nouvel élément... pour créer un fichier lightbox.css. Collez le contenu du fichier d’exemple dans le référentiel de code GitHub.
Téléchargez et décompressez le fichier buttons.zip provenant du référentiel de fichiers de données de GitHub : https://github.com/Azure-Samples/cognitive-services-sample-data-files/tree/master/ComputerVision/storage-lab-tutorial. Vous devez avoir quatre images de bouton.
Cliquez avec le bouton droit sur le projet Intellipix dans l’Explorateur de solutions et utilisez la commande Ajouter -> Nouveau dossier pour ajouter un dossier nommé « Images » au projet.
Cliquez avec le bouton droit sur le dossier Images et utilisez la commande Ajouter -> Élément existant... pour importer les quatre images que vous avez téléchargées.
Ouvrez BundleConfig.cs dans le dossier « App_Start » du projet. Ajoutez l’instruction suivante à la méthode
RegisterBundlesdans BundleConfig.cs :bundles.Add(new ScriptBundle("~/bundles/lightbox").Include( "~/Scripts/lightbox.js"));Dans la même méthode, recherchez l’instruction qui crée un
StyleBundleà partir de « ~/Content/css » et ajoutez lightbox.css à la liste des feuilles de style du paquet. Voici l’instruction modifiée :bundles.Add(new StyleBundle("~/Content/css").Include( "~/Content/bootstrap.css", "~/Content/site.css", "~/Content/lightbox.css"));Ouvrez _Layout.cshtml dans le dossier Views/Shared du projet et ajoutez l’instruction suivante juste avant l’instruction
@RenderSection, vers le bas :@Scripts.Render("~/bundles/lightbox")La dernière tâche consiste à incorporer la visionneuse de type « table lumineuse » à la page d’accueil. Pour ce faire, ouvrez Index.cshtml (il se trouve dans le dossier Views/Home du projet) et remplacez la boucle
@foreachpar celle-ci :@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> }Enregistrez vos modifications, puis appuyez sur Ctrl+F5 pour lancer l’application dans votre navigateur. Cliquez ensuite sur l’une des images que vous avez chargées précédemment. Confirmez qu’une table lumineuse apparaît et affiche une vue agrandie de l’image.
Sélectionnez le X dans le coin inférieur droit de la table lumineuse pour la faire disparaître.
Vous disposez maintenant d’un moyen d’afficher les images que vous avez chargées. L’étape suivante consiste à faire plus avec ces images.
Utiliser Azure AI Vision pour générer des métadonnées
Créer une ressource Vision
Vous devez créer une ressource Computer Vision pour votre compte Azure ; cette ressource gère votre accès au service Azure AI Vision d’Azure.
Pour créer une ressource multiservice ou une ressource Vision, suivez les instructions de l’article Créer une ressource Azure AI Services.
Accédez ensuite au menu du groupe de ressources, puis sélectionnez la ressource Vision que vous avez créée. Copiez l’URL indiquée sous Point de terminaison à un endroit où vous pourrez facilement la récupérer un peu plus tard. Ensuite, sélectionnez Afficher les clés d’accès.
Remarque
Les nouvelles ressources créées après le 1er juillet 2019 utilisent des noms de sous-domaines personnalisés. Pour plus d’informations et afin d’obtenir une liste complète des points de terminaison régionaux, consultez Noms personnalisés de sous-domaine pour Azure AI services.
Dans la fenêtre suivante, copiez la valeur de KEY 1 dans le Presse-papiers.
Ajouter des informations d’identification Azure AI Vision
Vous devez ensuite ajouter les informations d’identification nécessaires à l’application pour accéder aux ressources Vision.
Accédez au fichier Web.config à la racine du projet. Ajoutez les instructions suivantes dans la section <appSettings> du fichier, en remplaçant VISION_KEY par la clé que vous aviez copiée à l’étape précédente et VISION_ENDPOINT par l’URL que vous avez enregistrée à l’étape précédente.
<add key="SubscriptionKey" value="VISION_KEY" />
<add key="VisionEndpoint" value="VISION_ENDPOINT" />
Dans l’Explorateur de solutions. Cliquez avec le bouton droit sur la solution du projet, puis sélectionnez Gérer les packages NuGet. Dans le gestionnaire de package qui s’ouvre, sélectionnez Parcourir, cochez Inclure la préversion et recherchez Azure.AI.Vision.ImageAnalysis. Sélectionnez Installer.
Ajouter le code de génération des métadonnées
Ensuite, vous devez ajouter le code qui utilise réellement le service Azure AI Vision pour générer des métadonnées pour des images.
Ouvrez le fichier HomeController.cs dans le dossier Contrôleurs du projet et ajoutez les instructions
usingsuivantes en haut du fichier :using Azure; using Azure.AI.Vision.ImageAnalysis; using System;Accédez ensuite à la méthode Upload, qui convertit et charge les images dans un stockage blob. Ajoutez le code suivant immédiatement après le bloc qui commence par
// Generate a thumbnail(ou à la fin du processus de création de l’objet blob de l’image). Ce code utilise l’objet blob contenant l’image (photo) et génère une description de cette image avec Azure AI Vision. L’API Azure AI Vision génère également une liste de mots clés en lien avec l’image. Les mots clés et la description générés sont stockés dans les métadonnées de l’objet blob pour les utiliser plus tard.// 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();Ensuite, accédez à la méthode Index dans le même fichier. Cette méthode énumère les objets blob d’image stockés dans le conteneur d’objets blob ciblé (comme les instances de IListBlobItem) et les passe à la vue de l’application. Remplacez le bloc
foreachdans cette méthode par le code suivant. Ce code appelle CloudBlockBlob.FetchAttributes pour obtenir les métadonnées attachées à chaque objet blob. Il extrait la description générée par ordinateur (caption) à partir des métadonnées et l’ajoute à l’objet BlobInfo, qui est alors passé à la vue.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 }); } }
Test de l'application
Enregistrez vos modifications dans Visual Studio, puis appuyez sur Ctrl+F5 pour lancer l’application dans votre navigateur. Utilisez l’application pour charger quelques images supplémentaires, soit à partir du jeu de photos que vous avez téléchargé, soit à partir de votre propre dossier. Lorsque vous passez le curseur sur l’une des nouvelles images dans la vue, une fenêtre d’infobulle doit apparaître et afficher la légende générée par ordinateur pour l’image.
Pour voir toutes les métadonnées attachées, affichez le conteneur de stockage utilisé pour les images dans Explorateur Stockage Azure. Cliquez avec le bouton droit sur un objet blob dans le conteneur, puis sélectionnez Propriétés. Dans la boîte de dialogue, vous voyez une liste de paires clé-valeur. La description de l’image générée par ordinateur est stockée dans l’élément Caption et les différents mots clés de recherche sont stockés dans Tag0, Tag1, etc. Quand vous avez terminé, cliquez sur Annuler pour fermer la boîte de dialogue.
Ajouter la recherche à l’application
Dans cette section, vous allez ajouter une zone de recherche à la page d’accueil, ce qui permet aux utilisateurs d’effectuer des recherches par mots clés sur les images qu’ils ont chargées. Les mots clés sont ceux générés par l’API Azure AI Vision et stockés dans les métadonnées du blob.
Ouvrez Index.cshtml dans le dossier Views/Home du projet et ajoutez les instructions suivantes à l’élément
<div>vide avec l’attributclass="col-sm-4 pull-right":@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> }Ce code et ce balisage ajoutent une zone de recherche et un bouton Recherche à la page d’accueil.
Ouvrez HomeController.cs dans le dossier Controllers du projet et ajoutez la méthode suivante à la classe HomeController :
[HttpPost] public ActionResult Search(string term) { return RedirectToAction("Index", new { id = term }); }Il s’agit de la méthode qui est appelée lorsque l’utilisateur utilise le bouton Recherche ajouté à l’étape précédente. Elle actualise la page et inclut un paramètre de recherche dans l’URL.
Remplacez la méthode Index par l’implémentation suivante :
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(); }Notez que la méthode Index accepte désormais un paramètre
idqui contient la valeur saisie par l’utilisateur dans la zone de recherche. Un paramètreidvide ou manquant indique que toutes les photos doivent être affichées.Ajoutez la méthode d’assistance suivante à la classe 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; }Cette méthode est appelée par la méthode Index pour déterminer si les mots clés de métadonnées attachés à un blob d’image donné contiennent le terme de recherche entré par l’utilisateur.
Relancez l’application et chargez plusieurs photos. N’hésitez pas à utiliser vos propres photos, pas seulement celles fournies avec le tutoriel.
Saisissez un mot clé tel que « rivière » dans la zone de recherche. Sélectionnez ensuite le bouton Rechercher.
Les résultats de la recherche varient en fonction de ce que vous avez saisi et des images que vous avez chargées. Toutefois, le résultat doit être une liste filtrée d’images dont les mots clés de métadonnées incluent tout ou partie du mot clé que vous avez saisi.
Cliquez sur le bouton « Précédent » du navigateur pour afficher à nouveau toutes les images.
Vous avez presque fini. Il est temps de déployer l’application dans le cloud.
Déploiement de l’application dans Azure
Dans cette section, vous allez déployer l’application sur Visual Studio. Vous allez autoriser Visual Studio à créer une application web Azure pour vous, ce qui vous évitera d’avoir à accéder au portail Azure et à la créer séparément.
Dans Explorateur de solutions, cliquez avec le bouton droit sur le projet et sélectionnez Publier… dans le menu contextuel. Assurez-vous que Microsoft Azure App Service et Créer nouveau sont sélectionnés, puis cliquez sur le bouton Publier.
Dans la boîte de dialogue suivante, sélectionnez le groupe de ressources « IntellipixResources » sous Groupe de ressources. Cliquez sur le bouton Nouveau… en regard de « Plan App Service » et créez un nouveau plan App Service dans le même emplacement que celui que vous avez sélectionné pour le compte de stockage dans Créer un compte de stockage. Acceptez les valeurs par défaut partout ailleurs. Pour finir, sélectionnez le bouton Créer.
Après quelques instants, l’application s’affiche dans une fenêtre de navigateur. Prenez note de l’URL dans la barre d’adresse. L’application n’est plus exécutée localement ; elle s’exécute sur le web, où elle est accessible publiquement.
Si vous apportez des modifications à l’application et que vous souhaitez les publier sur le web, recommencez le processus de publication. Vous pouvez toujours tester vos modifications localement avant de les publier sur le web.
Nettoyer les ressources
Si vous souhaitez continuer à travailler sur votre application web, passez à la section Étapes suivantes. Si vous n’avez plus besoin de cette application, supprimez toutes les ressources propres à l’application. Pour supprimer les ressources, vous pouvez supprimer le groupe de ressources qui contient votre abonnement Stockage Azure et la ressource Vision. Cette opération supprime le compte de stockage, les objets blob qui y ont été chargés ainsi que la ressource App Service utilisée pour vous connecter à l’application web ASP.NET.
Pour supprimer le groupe de ressources, ouvrez l’onglet Groupes de ressources dans le portail, accédez au groupe de ressources que vous avez utilisé dans ce projet, puis cliquez sur Supprimer le groupe de ressources en haut de la vue. Il vous sera demandé de saisir le nom du groupe de ressources pour confirmer que vous souhaitez le supprimer. Une fois supprimé, un groupe de ressources ne peut pas être récupéré.
Étapes suivantes
Vous pourriez faire bien d’autres choses pour utiliser Azure et développer votre application Intellipix encore davantage. Par exemple, vous pouvez ajouter la prise en charge de l’authentification des utilisateurs et de la suppression des photos et (plutôt que de forcer l’utilisateur à attendre qu’Azure AI Vision traite une photo après un chargement) vous pouvez utiliser Azure Functions pour appeler l’API Azure AI Vision de façon asynchrone chaque fois qu’une image est ajoutée à Stockage Blob. Vous pourriez également effectuer un certain nombre d’autres opérations d’analyse d’image sur l’image, décrites dans la vue d’ensemble.