Samouczek: generowanie metadanych obrazu w usłudze Azure Storage przy użyciu usługi Azure AI Vision
Z tego samouczka dowiesz się, jak zintegrować usługę Azure AI Vision z aplikacją internetową w celu wygenerowania metadanych dla przekazanych obrazów. Jest to przydatne w scenariuszach zarządzania zasobami cyfrowymi (DAM), na przykład jeśli firma chce szybko wygenerować opisowe podpis lub wyszukiwalne słowa kluczowe dla wszystkich swoich obrazów.
Użyjesz programu Visual Studio, aby napisać aplikację internetową MVC, która akceptuje obrazy przekazywane przez użytkowników i przechowuje obrazy w usłudze Azure Blob Storage. Dowiesz się, jak odczytywać i zapisywać obiekty blob w języku C# oraz używać metadanych obiektów blob do dołączania dodatkowych informacji do tworzonych obiektów blob. Następnie prześlesz każdy obraz przekazany przez użytkownika do interfejsu API usługi Azure AI Vision, aby wygenerować podpis i wyszukać metadane obrazu. Na koniec możesz wdrożyć aplikację w chmurze przy użyciu programu Visual Studio.
Ten samouczek przedstawia sposób wykonania następujących czynności:
- Tworzenie konta magazynu i kontenerów magazynu przy użyciu witryny Azure Portal
- Tworzenie aplikacji internetowej w programie Visual Studio i wdrażanie jej na platformie Azure
- Wyodrębnianie informacji z obrazów za pomocą interfejsu API usługi Azure AI Vision
- Dołączanie metadanych do obrazów usługi Azure Storage
- Sprawdzanie metadanych obrazu przy użyciu Eksplorator usługi Azure Storage
Napiwek
Sekcja Używanie usługi Azure AI Vision do generowania metadanych jest najbardziej odpowiednia dla analizy obrazów . Przejdź tam, jeśli chcesz zobaczyć, jak analiza obrazów jest zintegrowana z ustanowioną aplikacją.
Jeśli nie masz subskrypcji platformy Azure, przed rozpoczęciem utwórz bezpłatne konto.
Wymagania wstępne
- Program Visual Studio 2017 Community Edition lub nowszy z zainstalowanymi pakietami roboczymi „Tworzenie aplikacji na platformie ASP.NET i aplikacji internetowych” oraz „Tworzenie aplikacji na platformie Azure”.
- Zainstalowane narzędzie Eksplorator usługi Azure Storage.
Tworzenie konta magazynu
W tej sekcji utworzysz konto magazynu przy użyciu witryny Azure Portal . Następnie utworzysz parę kontenerów: jeden do przechowywania obrazów przekazanych przez użytkownika, a drugi do przechowywania miniatur obrazów wygenerowanych na podstawie przekazanych obrazów.
Zaloguj się do witryny Azure Portal w przeglądarce. Jeśli zostanie wyświetlony monit o zalogowanie się, zrób to przy użyciu konta Microsoft.
Aby utworzyć konto magazynu, wybierz pozycję + Utwórz zasób na wstążce po lewej stronie. Następnie wybierz pozycję Magazyn, a następnie pozycję Konto magazynu.
Wprowadź unikatową nazwę konta magazynu w polu Nazwa i upewnij się, że obok niego jest wyświetlany zielony znacznik wyboru. Nazwa jest ważna, ponieważ stanowi jedną część adresu URL, za pomocą którego są dostępne obiekty blob utworzone na tym koncie. Umieść konto magazynu w nowej grupie zasobów o nazwie "IntellipixResources" i wybierz najbliższy region. Zakończ, wybierając przycisk Przejrzyj i utwórz w dolnej części ekranu, aby utworzyć nowe konto magazynu.
Uwaga
Nazwy kont magazynu mogą mieć długość od 3 do 24 znaków i mogą zawierać tylko cyfry i małe litery. Ponadto wprowadzona nazwa musi być unikatowa na platformie Azure. Jeśli ktoś inny wybrał tę samą nazwę, otrzymasz powiadomienie, że nazwa nie jest dostępna z czerwonym wykrzyknikiem w polu Nazwa .
Wybierz pozycję Grupy zasobów na wstążce po lewej stronie. Następnie wybierz grupę zasobów "IntellipixResources".
Na karcie otwieranej dla grupy zasobów wybierz utworzone konto magazynu. Jeśli konto magazynu nie istnieje jeszcze, możesz wybrać pozycję Odśwież w górnej części karty, dopóki nie pojawi się.
Na karcie konta magazynu wybierz pozycję Obiekty blob , aby wyświetlić listę kontenerów skojarzonych z tym kontem.
Konto magazynu nie ma obecnie kontenerów. Przed utworzeniem obiektu blob należy utworzyć kontener, w którym będzie przechowywany. Wybierz pozycję + Kontener , aby utworzyć nowy kontener. Wpisz
photosw polu Nazwa i wybierz pozycję Blob jako poziom dostępu publicznego. Następnie wybierz przycisk OK , aby utworzyć kontener o nazwie "photos".Domyślnie kontenery i ich zawartość są prywatne. Wybranie obiektu blob jako poziomu dostępu sprawia, że obiekty blob w kontenerze "photos" są publicznie dostępne, ale nie upublicznia samego kontenera. Jest to potrzebne, ponieważ obrazy przechowywane w kontenerze "photos" będą połączone z aplikacją internetową.
Powtórz poprzedni krok, aby utworzyć kontener o nazwie "thumbnails", po raz kolejny upewniając się, że poziom dostępu publicznego kontenera ma wartość Blob.
Upewnij się, że oba kontenery są wyświetlane na liście kontenerów dla tego konta magazynu i czy nazwy są poprawne.
Zamknij ekran "Blob Service". Wybierz pozycję Klucze dostępu w menu po lewej stronie ekranu konta magazynu, a następnie wybierz przycisk Kopiuj obok pozycji KLUCZ1. Wklej ten klucz dostępu do ulubionego edytora tekstów do późniejszego użycia.
Utworzono konto magazynu do przechowywania obrazów przekazanych do aplikacji, w której zamierzasz skompilować, oraz kontenery do przechowywania obrazów.
Uruchamianie Eksplorator usługi Azure Storage
Eksplorator usługi Azure Storage to bezpłatne narzędzie, które udostępnia interfejs graficzny do pracy z usługą Azure Storage na komputerach z systemami Windows, macOS i Linux. Zapewnia większość tych samych funkcji co witryna Azure Portal i oferuje inne funkcje, takie jak możliwość wyświetlania metadanych obiektów blob. W tej sekcji użyjesz Eksplorator usługi Microsoft Azure Storage, aby wyświetlić kontenery utworzone w poprzedniej sekcji.
Jeśli nie zainstalowano Eksplorator usługi Storage lub chcesz upewnić się, że korzystasz z najnowszej wersji, przejdź do http://storageexplorer.com/ strony i pobierz ją i zainstaluj.
Uruchom Eksplorator usługi Storage. Jeśli zostanie wyświetlony monit o zalogowanie się, zrób to przy użyciu konta Microsoft — tego samego, który został użyty do zalogowania się w witrynie Azure Portal. Jeśli nie widzisz konta magazynu w okienku po lewej stronie Eksplorator usługi Storage, wybierz przycisk Zarządzaj kontami wyróżniony poniżej i upewnij się, że konto Microsoft i subskrypcja użyta do utworzenia konta magazynu zostały dodane do Eksplorator usługi Storage.
Wybierz małą strzałkę obok konta magazynu, aby wyświetlić jego zawartość, a następnie wybierz strzałkę obok pozycji Kontenery obiektów blob. Upewnij się, że utworzone kontenery są wyświetlane na liście.
Kontenery są obecnie puste, ale zmieni się to po wdrożeniu aplikacji i rozpoczęciu przekazywania zdjęć. Zainstalowanie Eksplorator usługi Storage ułatwi sprawdzenie, co aplikacja zapisuje w magazynie obiektów blob.
Tworzenie nowej aplikacji internetowej w programie Visual Studio
W tej sekcji utworzysz nową aplikację internetową w programie Visual Studio i dodasz kod, aby zaimplementować podstawowe funkcje wymagane do przekazywania obrazów, zapisywania ich w magazynie obiektów blob i wyświetlania ich na stronie internetowej.
Uruchom program Visual Studio i użyj polecenia Plik —> Nowy —> Projekt, aby utworzyć nowy projekt aplikacji internetowej w języku Visual C# ASP.NET o nazwie "Intellipix" (skrót od "Inteligentne obrazy").
W oknie dialogowym "Nowa aplikacja internetowa ASP.NET" upewnij się, że wybrano pozycję MVC . Następnie wybierz opcję OK.
Pośmiń chwilę na przejrzenie struktury projektu w Eksplorator rozwiązań. Między innymi istnieje folder o nazwie Controllers zawierający kontrolery MVC projektu oraz folder o nazwie Views , który zawiera widoki projektu. Podczas implementowania aplikacji będziesz pracować z elementami zawartości w tych folderach i innych.
Użyj polecenia Debugowanie programu Visual Studio —> uruchom bez debugowania (lub naciśnij klawisze Ctrl+F5), aby uruchomić aplikację w przeglądarce. Oto jak aplikacja wygląda w obecnym stanie:
Zamknij przeglądarkę i wróć do programu Visual Studio. W Eksplorator rozwiązań kliknij prawym przyciskiem myszy projekt Intellipix i wybierz polecenie Zarządzaj pakietami NuGet.... Wybierz pozycję Przeglądaj. Następnie wpisz
imageresizerw polu wyszukiwania i wybierz pakiet NuGet o nazwie ImageResizer. Na koniec wybierz pozycję Zainstaluj , aby zainstalować najnowszą stabilną wersję pakietu. ImageResizer zawiera interfejsy API, których użyjesz do utworzenia miniatur obrazów z obrazów przekazanych do aplikacji. OK wszelkie zmiany i zaakceptuj wszystkie przedstawione licencje.
Powtórz ten proces, aby dodać pakiet NuGet o nazwie WindowsAzure.Storage do projektu. Ten pakiet zawiera interfejsy API na potrzeby uzyskiwania dostępu do usługi Azure Storage z aplikacji platformy .NET. OK wszelkie zmiany i zaakceptuj wszystkie przedstawione licencje.
Otwórz plik Web.config i dodaj następującą instrukcję do
<appSettings>sekcji, zastępując ACCOUNT_NAME nazwą konta magazynu utworzonego w pierwszej sekcji i ACCOUNT_KEY zapisanym kluczem dostępu.<add key="StorageConnectionString" value="DefaultEndpointsProtocol=https;AccountName=ACCOUNT_NAME;AccountKey=ACCOUNT_KEY" />Ważne
Plik Web.config jest przeznaczony do przechowywania poufnych informacji, takich jak klucze subskrypcji, a każde żądanie HTTP do pliku z rozszerzeniem config jest obsługiwane przez aparat ASP.NET, który zwraca komunikat "Ten typ strony nie jest obsługiwany". Jeśli jednak osoba atakująca może znaleźć inne luki, które pozwalają im wyświetlić zawartość web.config , będzie on mógł ujawnić te informacje. Zobacz Ochrona ciągów Połączenie ion i inne informacje o konfiguracji, aby uzyskać dodatkowe kroki, które można wykonać w celu dalszego zabezpieczenia danych web.config.
Otwórz plik o nazwie _Layout.cshtml w folderze Views/Shared projektu. W wierszu 19 zmień wartość "Nazwa aplikacji" na "Intellipix". Wiersz powinien wyglądać następująco:
@Html.ActionLink("Intellipix", "Index", "Home", new { area = "" }, new { @class = "navbar-brand" })Uwaga
W projekcie ASP.NET MVC _Layout.cshtml jest specjalnym widokiem, który służy jako szablon dla innych widoków. Zazwyczaj definiujesz zawartość nagłówka i stopki, która jest wspólna dla wszystkich widoków w tym pliku.
Kliknij prawym przyciskiem myszy folder Models projektu i użyj polecenia Dodaj —> Klasa... , aby dodać plik klasy o nazwie BlobInfo.cs do folderu. Następnie zastąp pustą klasę BlobInfo następującą definicją klasy:
public class BlobInfo { public string ImageUri { get; set; } public string ThumbnailUri { get; set; } public string Caption { get; set; } }Otwórz HomeController.cs z folderu Controllers projektu i dodaj następujące
usinginstrukcje na początku pliku:using ImageResizer; using Intellipix.Models; using Microsoft.WindowsAzure.Storage; using Microsoft.WindowsAzure.Storage.Blob; using System.Configuration; using System.Threading.Tasks; using System.IO;Zastąp metodę Index w HomeController.cs następującą implementacją:
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(); }Nowa metoda Index wylicza obiekty blob w
"photos"kontenerze i przekazuje tablicę obiektów BlobInfo reprezentujących te obiekty blob do widoku za pomocą właściwości ViewBag ASP.NET MVC. Później zmodyfikujesz widok w celu wyliczenia tych obiektów i wyświetlisz kolekcję miniatur zdjęć. Klasy używane do uzyskiwania dostępu do konta magazynu i wyliczania obiektów blob — CloudStorageAccount, CloudBlobClient i CloudBlobContainer — pochodzą z pakietu WindowsAzure.Storage zainstalowanego za pośrednictwem pakietu NuGet.Dodaj następującą metodę do klasy HomeController w 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"); }Jest to metoda wywoływana podczas przekazywania zdjęcia. Przechowuje każdy przekazany obraz jako obiekt blob w
"photos"kontenerze, tworzy obraz miniatury na podstawie oryginalnego obrazu przy użyciuImageResizerpakietu i przechowuje obraz miniatury jako obiekt blob w kontenerze"thumbnails".Otwórz plik Index.cshmtl w folderze Views/Home projektu i zastąp jego zawartość następującym kodem i znacznikiem:
@{ 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> }Używany tutaj język to Razor, który umożliwia osadzanie kodu wykonywalnego w adiustacji HTML. Instrukcja
@foreachw środku pliku wylicza obiekty BlobInfo przekazane z kontrolera w usłudze ViewBag i tworzy na ich podstawie elementy HTML<img>. Właściwośćsrckażdego elementu jest inicjowana za pomocą identyfikatora URI obiektu blob zawierającego miniaturę obrazu.Pobierz i rozpakuj plik photos.zip z przykładowego repozytorium danych usługi GitHub. Jest to asortyment różnych zdjęć, których można użyć do testowania aplikacji.
Zapisz zmiany i naciśnij klawisze Ctrl+F5 , aby uruchomić aplikację w przeglądarce. Następnie wybierz pozycję Przekaż zdjęcie i przekaż jeden z pobranych obrazów. Upewnij się, że na stronie pojawi się miniatura zdjęcia.
Przekaż kilka kolejnych obrazów z folderu photos . Upewnij się, że są one również wyświetlane na stronie:
Kliknij prawym przyciskiem myszy w przeglądarce i wybierz pozycję Wyświetl źródło strony, aby wyświetlić kod źródłowy strony.
<img>Znajdź elementy reprezentujące miniatury obrazu. Zwróć uwagę, że adresy URL przypisane do obrazów odwołują się bezpośrednio do obiektów blob w magazynie obiektów blob. Dzieje się tak, ponieważ ustawiasz publiczny poziom dostępu kontenerów na obiekt blob, co sprawia, że obiekty blob są publicznie dostępne.Wróć do Eksplorator usługi Azure Storage (lub uruchom go ponownie, jeśli nie pozostawisz go uruchomionego) i wybierz
"photos"kontener w ramach konta magazynu. Liczba obiektów blob w kontenerze powinna być równa liczbie przekazanych zdjęć. Kliknij dwukrotnie jeden z obiektów blob, aby go pobrać i wyświetlić obraz przechowywany w obiekcie blob.
"thumbnails"Otwórz kontener w Eksplorator usługi Storage. Otwórz jeden z obiektów blob, aby wyświetlić obrazy miniatur wygenerowane na podstawie przekazanych obrazów.
Aplikacja nie oferuje jeszcze sposobu wyświetlania przekazanych oryginalnych obrazów. W idealnym przypadku wybranie miniatury obrazu powinno spowodować wyświetlenie oryginalnego obrazu. Następnie dodasz tę funkcję.
Dodawanie lightboxu do wyświetlania zdjęć
W tej sekcji użyjesz bezpłatnej biblioteki Języka JavaScript typu open source, aby dodać przeglądarkę lightbox, która umożliwia użytkownikom wyświetlanie przekazanych oryginalnych obrazów (a nie tylko miniatur obrazów). Pliki są dla Ciebie udostępniane. Wszystko, co musisz zrobić, to zintegrować je z projektem i wprowadzić drobną modyfikację pliku Index.cshtml.
Pobierz pliki lightbox.css i lightbox.js z repozytorium kodu GitHub.
W Eksplorator rozwiązań kliknij prawym przyciskiem myszy folder Scripts projektu i użyj polecenia Dodaj —> nowy element..., aby utworzyć plik lightbox.js. Wklej zawartość z przykładowego pliku w repozytorium kodu GitHub.
Kliknij prawym przyciskiem myszy folder "Content" projektu i użyj polecenia Dodaj —> nowy element... utwórz plik lightbox.css . Wklej zawartość z przykładowego pliku w repozytorium kodu GitHub.
Pobierz i rozpakuj plik buttons.zip z repozytorium plików danych usługi GitHub: https://github.com/Azure-Samples/cognitive-services-sample-data-files/tree/master/ComputerVision/storage-lab-tutorial. Powinny istnieć cztery obrazy przycisków.
Kliknij prawym przyciskiem myszy projekt Intellipix w Eksplorator rozwiązań i użyj polecenia Dodaj —> nowy folder, aby dodać folder o nazwie "Images" do projektu.
Kliknij prawym przyciskiem myszy folder Images i użyj polecenia Dodaj —> istniejący element... , aby zaimportować cztery pobrane obrazy.
Otwórz BundleConfig.cs w folderze "App_Start" projektu. Dodaj następującą instrukcję
RegisterBundlesdo metody w BundleConfig.cs:bundles.Add(new ScriptBundle("~/bundles/lightbox").Include( "~/Scripts/lightbox.js"));W tej samej metodzie znajdź instrukcję, która tworzy obiekt
StyleBundlez "~/Content/css" i dodaj lightbox.css do listy arkuszy stylów w pakiecie. Oto zmodyfikowana instrukcja:bundles.Add(new StyleBundle("~/Content/css").Include( "~/Content/bootstrap.css", "~/Content/site.css", "~/Content/lightbox.css"));Otwórz plik _Layout.cshtml w folderze Views/Shared projektu i dodaj następującą instrukcję tuż przed instrukcją
@RenderSectionw dolnej części:@Scripts.Render("~/bundles/lightbox")Ostatnim zadaniem jest włączenie przeglądarki lightbox do strony głównej. W tym celu otwórz plik Index.cshtml (znajduje się w folderze Views/Home projektu) i zastąp pętlę
@foreachnastępującą:@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> }Zapisz zmiany i naciśnij klawisze Ctrl+F5 , aby uruchomić aplikację w przeglądarce. Następnie wybierz jeden z przekazanych wcześniej obrazów. Upewnij się, że jest wyświetlana kontrolka lightbox i pokazuje powiększony widok obrazu.
Wybierz znak X w prawym dolnym rogu lightbox, aby go odrzucić.
Teraz masz sposób wyświetlania przekazanych obrazów. Następnym krokiem jest zrobienie więcej z tymi obrazami.
Generowanie metadanych przy użyciu usługi Azure AI Vision
Tworzenie zasobu usługi Vision
Musisz utworzyć zasób przetwarzanie obrazów dla konta platformy Azure. Ten zasób zarządza dostępem do usługi Azure AI Vision platformy Azure.
Postępuj zgodnie z instrukcjami w temacie Tworzenie zasobu usług azure AI, aby utworzyć zasób z wieloma usługami lub zasób usługi Vision.
Następnie przejdź do menu grupy zasobów i wybierz utworzony zasób przetwarzania obrazów. Skopiuj adres URL z obszaru Punkt końcowy do miejsca, z którego będzie go można za chwilę łatwo uzyskać. Następnie wybierz pozycję Pokaż klucze dostępu.
Uwaga
Nowe zasoby utworzone po 1 lipca 2019 r. będą używać niestandardowych nazw domen podrzędnych. Aby uzyskać więcej informacji i pełną listę regionalnych punktów końcowych, zobacz Niestandardowe nazwy poddomeny dla usług Azure AI.
W następnym oknie skopiuj wartość KLUCZ 1 do schowka.
Dodawanie poświadczeń usługi Azure AI Vision
Następnie dodasz wymagane poświadczenia do aplikacji, aby umożliwić dostęp do zasobów usługi Vision.
Przejdź do pliku Web.config w katalogu głównym projektu. Dodaj następujące instrukcje do <appSettings> sekcji pliku, zastępując VISION_KEY ciąg kluczem skopiowany w poprzednim kroku i VISION_ENDPOINT adresem URL zapisanym w kroku przed.
<add key="SubscriptionKey" value="VISION_KEY" />
<add key="VisionEndpoint" value="VISION_ENDPOINT" />
W Eksplorator rozwiązań. Kliknij prawym przyciskiem myszy rozwiązanie projektu i wybierz pozycję Zarządzaj pakietami NuGet. W menedżerze pakietów, który zostanie otwarty, wybierz pozycję Przeglądaj, zaznacz pozycję Uwzględnij wersję wstępną i wyszukaj ciąg Azure.AI.Vision.ImageAnalysis. Wybierz Zainstaluj.
Dodawanie kodu generowania metadanych
Następnie dodasz kod, który faktycznie używa usługi Azure AI Vision do tworzenia metadanych dla obrazów.
Otwórz plik HomeController.cs w folderze Kontrolery projektu i dodaj następujące instrukcje
usingw górnej części pliku:using Azure; using Azure.AI.Vision.ImageAnalysis; using System;Następnie przejdź do metody Upload. Ta metoda konwertuje obrazy i przekazuje je do magazynu obiektów blob. Dodaj następujący kod bezpośrednio za blokiem, który rozpoczyna się od ciągu
// Generate a thumbnail(lub na końcu procesu image-blob-creation). Ten kod pobiera obiekt blob zawierający obraz (photo) i używa usługi Azure AI Vision do wygenerowania opisu tego obrazu. Interfejs API usługi Azure AI Vision generuje również listę słów kluczowych, które mają zastosowanie do obrazu. Wygenerowany opis i słowa kluczowe są przechowywane w metadanych obiektu blob, aby można było je później pobrać.// 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();Następnie przejdź do metody Index w tym samym pliku. Ta metoda wylicza przechowywane obiekty blob obrazów w docelowym kontenerze obiektów blob (jako wystąpienia IListBlobItem ) i przekazuje je do widoku aplikacji. Zastąp blok
foreachw tej metodzie następującym kodem. Ten kod wywołuje funkcję CloudBlockBlob.FetchAttributes, aby pobrać metadane dołączone do każdego obiektu blob. Wyodrębnia z metadanych opis wygenerowany komputerowo (caption) i dodaje go do obiektu BlobInfo, który jest przekazywany do widoku.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 }); } }
Testowanie aplikacji
Zapisz wprowadzone zmiany w programie Visual Studio i naciśnij klawisze Ctrl+F5, aby uruchomić aplikację w przeglądarce. Użyj aplikacji, aby przekazać kilka kolejnych obrazów z zestawu zdjęć pobranego lub z własnego folderu. Po umieszczeniu kursora na jednym z nowych obrazów w widoku powinno zostać wyświetlone okno etykietki narzędzia i wyświetlić wygenerowane przez komputer podpis obrazu.
Aby wyświetlić wszystkie dołączone metadane, użyj Eksplorator usługi Azure Storage, aby wyświetlić kontener magazynu używany dla obrazów. Kliknij prawym przyciskiem myszy dowolny obiekt blob w kontenerze i wybierz pozycję Właściwości. W oknie dialogowym zobaczysz listę par klucz-wartość. Opis obrazu wygenerowanego przez komputer jest przechowywany w elemencie Caption, a słowa kluczowe wyszukiwania są przechowywane w Tag0pliku , Tag1itd. Po zakończeniu wybierz pozycję Anuluj , aby zamknąć okno dialogowe.
Dodawanie wyszukiwania do aplikacji
W tej sekcji dodasz pole wyszukiwania do strony głównej, umożliwiając użytkownikom wyszukiwanie słów kluczowych na przekazanych obrazach. Słowa kluczowe to słowa kluczowe generowane przez interfejs API usługi Azure AI Vision i przechowywane w metadanych obiektu blob.
Otwórz plik Index.cshtml w folderze Views/Home projektu i dodaj następujące instrukcje do pustego
<div>elementu za pomocą atrybutuclass="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> }Ten kod i znaczniki dodaje pole wyszukiwania i przycisk Wyszukaj do strony głównej.
Otwórz HomeController.cs w folderze Controllers projektu i dodaj następującą metodę do klasy HomeController:
[HttpPost] public ActionResult Search(string term) { return RedirectToAction("Index", new { id = term }); }Jest to metoda wywoływana, gdy użytkownik wybierze przycisk Wyszukaj dodany w poprzednim kroku. Odświeża stronę i zawiera parametr wyszukiwania w adresie URL.
Zastąp metodę Index następującą implementacją:
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(); }Zwróć uwagę, że metoda Index akceptuje teraz parametr
idzawierający wartość wpisana przez użytkownika do pola wyszukiwania. Pusty lub brakidparametru wskazuje, że wszystkie zdjęcia powinny być wyświetlane.Dodaj następującą metodę pomocnika do klasy 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; }Ta metoda jest wywoływana przez metodę Index w celu określenia, czy słowa kluczowe metadanych dołączone do danego obiektu blob obrazu zawierają termin wyszukiwania wprowadzony przez użytkownika.
Uruchom ponownie aplikację i przekaż kilka zdjęć. Możesz korzystać z własnych zdjęć, a nie tylko tych dostarczonych z samouczkiem.
Wpisz słowo kluczowe, takie jak "river" w polu wyszukiwania. Następnie wybierz przycisk Wyszukaj .
Wyniki wyszukiwania będą się różnić w zależności od wpisanego tekstu i przekazanych obrazów. Jednak wynik powinien być filtrowaną listą obrazów, których słowa kluczowe metadanych zawierają wszystkie lub część wpisanego słowa kluczowego.
Wybierz przycisk Wstecz przeglądarki, aby ponownie wyświetlić wszystkie obrazy.
Prawie gotowe. Nadszedł czas na wdrożenie aplikacji w chmurze.
Wdrażanie aplikacji na platformie Azure
W tej sekcji wdrożysz aplikację na platformie Azure z poziomu programu Visual Studio. Umożliwisz programowi Visual Studio utworzenie aplikacji internetowej platformy Azure, co uniemożliwia przejście do witryny Azure Portal i utworzenie jej oddzielnie.
Kliknij prawym przyciskiem myszy projekt w Eksplorator rozwiązań i wybierz polecenie Publikuj... z menu kontekstowego. Upewnij się, że wybrano pozycję Microsoft aplikacja systemu Azure Service (Usługa microsoft aplikacja systemu Azure) i Create New (Utwórz nowy), a następnie wybierz przycisk Publish (Publikuj).
W następnym oknie dialogowym wybierz grupę zasobów "IntellipixResources" w obszarze Grupa zasobów. Wybierz przycisk Nowy... obok pozycji "Plan usługi App Service" i utwórz nowy plan usługi App Service w tej samej lokalizacji, w której wybrano konto magazynu w obszarze Tworzenie konta magazynu, akceptując wartości domyślne wszędzie indziej. Zakończ, wybierając przycisk Utwórz .
Po kilku chwilach aplikacja zostanie wyświetlona w oknie przeglądarki. Zanotuj adres URL na pasku adresu. Aplikacja nie działa już lokalnie; jest ona w Internecie, gdzie jest publicznie osiągalna.
Jeśli wprowadzisz zmiany w aplikacji i chcesz wypchnąć zmiany do sieci Web, przejdź ponownie przez proces publikowania. Możesz nadal testować zmiany lokalnie przed opublikowaniem w sieci Web.
Czyszczenie zasobów
Jeśli chcesz kontynuować pracę nad swoją aplikacją internetową, zobacz sekcję Następne kroki. Jeśli nie chcesz dalej używać tej aplikacji, usuń wszystkie zasoby specyficzne dla aplikacji. Aby usunąć zasoby, możesz usunąć grupę zasobów zawierającą subskrypcję usługi Azure Storage i zasób usługi Vision. Spowoduje to usunięcie konta magazynu, przekazanych do niego obiektów blob i zasobu usługi App Service wymaganego do nawiązywania połączenia z aplikacją internetową platformy ASP.NET.
Aby usunąć grupę zasobów, otwórz kartę Grupy zasobów w portalu, przejdź do grupy zasobów używanej dla tego projektu i wybierz pozycję Usuń grupę zasobów w górnej części widoku. Zostanie wyświetlony monit o wpisenie nazwy grupy zasobów, aby potwierdzić, że chcesz ją usunąć. Po usunięciu nie można odzyskać grupy zasobów.
Następne kroki
Jest o wiele więcej, co można zrobić, aby korzystać z platformy Azure i jeszcze bardziej rozwijać aplikację Intellipix. Możesz na przykład dodać obsługę uwierzytelniania użytkowników i usuwania zdjęć, a nie wymuszać, aby użytkownik czekał na przetwarzanie zdjęcia po przekazaniu zdjęcia, możesz użyć usługi Azure Functions , aby wywołać asynchronicznie interfejs API usługi Azure AI Vision za każdym razem, gdy obraz zostanie dodany do magazynu obiektów blob. Możesz również wykonać dowolną liczbę innych operacji analizy obrazów na obrazie opisanych w omówieniu.