Руководство. Создание метаданных изображений в служба хранилища Azure с помощью Azure AI Vision

Статья
02/14/2024

В этом руководстве вы узнаете, как интегрировать службу распознавания искусственного интеллекта Azure в веб-приложение для создания метаданных для отправленных изображений. Это полезно для сценариев управления цифровыми активами (DAM), например, если компании нужно быстро создать для всех изображений описательные субтитры или ключевые слова с возможностью поиска.

С помощью Visual Studio вы создадите веб-приложение MVC, которое принимает изображения, переданные пользователями, и сохраняет их в хранилище BLOB-объектов Azure. Вы узнаете, как считывать и записывать большие двоичные объекты на языке C# и как использовать метаданные больших двоичных объектов для вложения дополнительных сведений в создаваемые большие двоичные объекты. Затем вы отправите каждое изображение, отправленное пользователем, в API распознавания искусственного интеллекта Azure для создания подпись и поиска метаданных для изображения. Наконец, вы сможете развернуть приложение в облаке с помощью Visual Studio.

В этом учебнике описаны следующие процедуры.

Создание учетной записи хранения и контейнеров хранилища с помощью портала Azure.
Создание веб-приложения в Visual Studio и его развертывание в Azure.
Использование API визуального распознавания Azure для извлечения информации из изображений
Прикрепление метаданных к изображениям, размещенным в службе хранилища Azure.
Проверка метаданных изображения с помощью Обозревателя службы хранилища Azure.

Совет

В разделе "Использование визуального распознавания ИИ Azure" для создания метаданных наиболее релевантно для анализа изображений. Перейдите к нему, если вы просто хотите узнать, как анализ изображений интегрируется в установленное приложение.

Если у вас нет подписки Azure, создайте бесплатную учетную запись, прежде чем приступить к работе.

Необходимые компоненты

Выпуск Visual Studio Community 2017 или более поздней версии со следующими установленными рабочими нагрузками: "ASP.NET и веб-разработка" и "Разработка для Azure".
Должн быть установлен инструмент Обозреватель службы хранилища Azure.

Создание учетной записи хранилища

В этом разделе вы создадите учетную запись хранения с помощью портала Azure. Затем вы создадите пару контейнеров: один — для хранения изображений, переданных пользователем, а другой — для хранения эскизов, созданных из переданных изображений.

Войдите в портал Azure в браузере. Если вам будет предложено войти, сделайте это с помощью учетной записи Майкрософт.
Чтобы создать учетную запись хранения, нажмите кнопку +Создать ресурс на ленте слева. Затем выберите служба хранилища, а затем служба хранилища учетную запись.
Введите уникальное имя учетной записи хранения в поле Имя и убедитесь, что рядом с ним отображается зеленая галочка. Это имя важно, так как оно формирует часть URL-адреса, по которому осуществляется доступ к большим двоичным объектам, созданным в этой учетной записи. Поместите эту учетную запись хранения в новую группу ресурсов с именем IntellipixResources и выберите ближайший к вам регион. Завершите работу, нажав кнопку "Просмотр и создание " в нижней части экрана, чтобы создать новую учетную запись хранения.

Примечание.

Имя учетной записи хранения должно содержать от 3 до 24 знаков и состоять только из цифр и строчных букв. Кроме того, введенное имя должно быть уникальным в Azure. Если другой пользователь уже выбрал такое же имя, вы узнаете о том, что это имя недоступно, увидев красный восклицательный знак в поле Имя.
Выберите группы ресурсов на ленте слева. Затем выберите группу ресурсов IntellipixResources.
На вкладке, открывающейся для группы ресурсов, выберите созданную учетную запись хранения. Если учетная запись хранения еще не существует, вы можете выбрать "Обновить " в верхней части вкладки, пока она не появится.
На вкладке учетной записи хранения выберите большие двоичные объекты , чтобы просмотреть список контейнеров, связанных с этой учетной записью.
Сейчас учетная запись хранения не содержит контейнеров. Прежде чем вы сможете создать большой двоичный объект, необходимо создать контейнер для него. Выберите + Контейнер, чтобы создать контейнер. Введите photos в поле Имя и выберите значение BLOB-объект для параметра Общедоступный уровень доступа. Затем нажмите кнопку "ОК ", чтобы создать контейнер с именем "фотографии".

По умолчанию контейнеры и их содержимое являются частными. Выбор уровня доступа BLOB-объект делает большие двоичные объекты в контейнере photos общедоступными, но сам контейнер не становится таковым. Это нужно, так как изображения, хранящиеся в контейнере photos, будут связаны с веб-приложением.
Повторите предыдущий шаг, чтобы создать контейнер с именем thumbnails, еще раз убедившись, что для параметра контейнера Общедоступный уровень доступа задано значение BLOB-объект.
Убедитесь, что оба контейнера отображаются в списке контейнеров для этой учетной записи хранения и что их имена указаны правильно.
Закройте экран "Служба BLOB-объектов". Выберите клавиши Access в меню слева от экрана учетной записи хранения, а затем нажмите кнопку "Копировать" рядом с ключом для ключа 1. Вставьте этот ключ доступа в предпочитаемый текстовый редактор для последующего использования.

Вы создали учетную запись хранения для хранения изображений, переданных в приложение, которое вы собираетесь создать, и контейнеры для хранения изображений.

Запуск Обозревателя службы хранилища Azure

Обозреватель службы хранилища Azure — это бесплатный инструмент, предоставляющий графический интерфейс для работы со службой хранилища Azure на компьютерах под управлением Windows, macOS и Linux. Он предоставляет большую часть функций портала Azure и предлагает другие функции, такие как просмотр метаданных больших двоичных объектов. В этом разделе вы будете использовать Обозреватель службы хранилища Microsoft Azure для просмотра контейнеров, созданных в предыдущем разделе.

Если вы не установили Обозреватель службы хранилища или хотите убедиться, что вы используете последнюю версию, перейдите по адресу http://storageexplorer.com/, скачайте и установите ее.
Запустите Обозреватель хранилища. Если вам предложено выполнить вход, сделайте это с помощью учетной записи Майкрософт, которую вы использовали для входа на портал Azure. Если учетная запись хранения не отображается в левой области Обозреватель службы хранилища, нажмите кнопку "Управление учетными записями", выделенную ниже, и убедитесь, что ваша учетная запись Майкрософт и подписка, используемая для создания учетной записи хранения, была добавлена в Обозреватель службы хранилища.
Щелкните небольшую стрелку рядом с учетной записью хранения, чтобы отобразить его содержимое, а затем щелкните стрелку рядом с контейнерами BLOB-объектов. Убедитесь, что созданные вами контейнеры отображаются в списке.

Эти контейнеры в настоящее время пусты, но это изменится после развертывания приложения и начала передачи фотографий. Установка Обозревателя службы хранилища позволит легко увидеть, что приложение записывает в хранилище BLOB-объектов.

Создание веб-приложения в Visual Studio

В этом разделе вы создадите веб-приложение в Visual Studio и добавите в него код для реализации основных функций, необходимых для передачи изображений, их записи в хранилище BLOB-объектов и их вывода на веб-страницу.

Запустите Visual Studio и выберите Файл -> Создать -> Проект, чтобы создать новый проект веб-приложения ASP.NETна Visual C# с именем "Intellipix" (сокращение от Intelligent pictures).
В диалоговом окне "Создать веб-приложение ASP.NET" убедитесь, что выбран параметр MVC. Затем выберите OK.
Уделите немного времени для просмотра структуры проекта в Обозревателе решений. Помимо прочего, в нем есть папка Controllers, содержащая контроллеры MVC проекта, и папка Views, содержащая представления проекта. При реализации приложения вы будете работать с ресурсами в этих и других папках.
В Visual Studio выберите Отладка ->Начать без отладки (или нажмите клавиши Ctrl+F5), чтобы запустить приложение в браузере. Вот как приложение выглядит в текущем состоянии:
Закройте браузер и вернитесь в Visual Studio. В Обозреватель решений щелкните правой кнопкой мыши проект Intellipix и выберите "Управление пакетами NuGet...". Нажмите кнопку "Обзор". Затем введите imageresizer в поле поиска и выберите пакет NuGet с именем ImageResizer. Наконец, выберите "Установить ", чтобы установить последнюю стабильную версию пакета. ImageResizer содержит интерфейсы API, которые используются для создания эскизов изображений, передаваемых в приложение. Примите все изменения и предоставленные лицензии, нажав кнопку "ОК".
Повторите эту процедуру, чтобы добавить в проект пакет NuGet с именем WindowsAzure.Storage. Этот пакет содержит интерфейсы API для доступа к службе хранилища Azure из приложений .NET. Примите все изменения и предоставленные лицензии, нажав кнопку "ОК".
Откройте файл Web.config и добавьте в раздел <appSettings> приведенную ниже инструкцию, заменив ACCOUNT_NAME именем учетной записи хранения, созданной в первом разделе, а ACCOUNT_KEY — сохраненным ключом доступа.
```
<add key="StorageConnectionString" value="DefaultEndpointsProtocol=https;AccountName=ACCOUNT_NAME;AccountKey=ACCOUNT_KEY" />
```
Важно!

Файл web.config предназначен для хранения конфиденциальных данных, таких как ключи подписки, и любой HTTP-запрос к файлу с расширением конфигурации обрабатывается подсистемой ASP.NET, которая возвращает сообщение "Этот тип страницы не обслуживается". Однако если злоумышленник может найти другой эксплойт, позволяющий им просматривать содержимое веб-конфигурации , они смогут предоставлять эти сведения. Дополнительные действия по защите данных web.config см. в статье "Защита строк Подключение ion" и других сведений о конфигурации.
Откройте файл _Layout.cshtml в папке проекта Views\Shared. В строке 19 измените "Имя приложения" на "Intellipix". Строка должна выглядеть следующим образом:
```
@Html.ActionLink("Intellipix", "Index", "Home", new { area = "" }, new { @class = "navbar-brand" })
```
Примечание.

В проекте ASP.NET MVC файл _Layout. cshtml — это специальное представление, служащее шаблоном для других представлений. Обычно в этом файле определяется содержимое верхнего и нижнего колонтитула, которое является общим для всех представлений.
Щелкните правой кнопкой мыши папку проекта Модели. Выберите Добавить -> Класс..., чтобы добавить файл класса BlobInfo.cs в эту папку. Замените определение пустой класс BlobInfo следующим определением класса:
```
public class BlobInfo
{
    public string ImageUri { get; set; }
    public string ThumbnailUri { get; set; }
    public string Caption { get; set; }
}
```

Откройте файл HomeController.cs в папке проекта Controllers и добавьте приведенные инструкции using в начало файла.

using ImageResizer;
using Intellipix.Models;
using Microsoft.WindowsAzure.Storage;
using Microsoft.WindowsAzure.Storage.Blob;
using System.Configuration;
using System.Threading.Tasks;
using System.IO;

Замените метод Index в HomeController.cs следующей реализацией:
```
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();
}
```
Новый метод Index перечисляет большие двоичные объекты в контейнере "photos" и передает массив объектов BlobInfo, представляющих эти большие двоичные объекты, в представление с помощью свойства ASP.NET MVC ViewBag. Позже вы измените представление, чтобы перечислять эти объекты и отображать коллекцию эскизов фотографий. Классы, которые будут использоваться для доступа к учетной записи хранения и перечисления BLOB-объектов — CloudStorageAccount, CloudBlobClient и CloudBlobContainer — предоставляются из пакета WindowsAzure.Storage, установленного с помощью NuGet.

Добавьте приведенный ниже метод в класс HomeController в файле 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");
}

Это метод, который вызывается при передаче фотографии. Он сохраняет каждое переданное изображение как большой двоичный объект в контейнере "photos", создает эскиз исходного изображения с помощью пакета ImageResizer и сохраняет этот эскиз в виде большого двоичного объекта в контейнере "thumbnails".

Откройте файл Index.cshtml в папке проекта Views/Home и замените его содержимое приведенными ниже кодом и разметкой.

@{
    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>
}

Здесь используется язык Razor, который позволяет внедрять исполняемый код в разметку HTML. Инструкция @foreach в середине файла перечисляет объекты BlobInfo, переданные из контроллера во ViewBag, и создает из них элементы HTML <img>. Свойство src каждого элемента инициализируется с помощью универсального кода ресурса (URI) большого двоичного объекта, содержащего эскиз изображения.

Скачайте и распакуйте файл photos.zip из репозитория демонстрационных данных GitHub. Это коллекция различных фотографий, которые можно использовать для тестирования приложения.
Сохраните изменения и нажмите клавиши CTRL+F5, чтобы запустить приложение в браузере. Затем выберите "Отправить фотографию " и отправьте один из загруженных изображений. Убедитесь, что на странице отображается эскиз фотографии.
Передайте еще несколько изображений из папки photos. Убедитесь, что они также отображаются на странице.
Щелкните правой кнопкой мыши в браузере и выберите View page source (Просмотреть исходный код страницы), чтобы просмотреть исходный код страницы. Найдите элементы <img>, представляющие эскизы изображений. Обратите внимание на то, что URL-адреса, назначенные изображениям, напрямую ссылаются на большие двоичные объекты в хранилище BLOB-объектов. Это связано с тем, что вы установили для параметра контейнера Общедоступный уровень доступа значение BLOB-объект, что делает большие двоичные объекты в этом контейнере общедоступными.
Вернитесь в Обозреватель службы хранилища Azure (или перезапустите его, если он не выполняется) и выберите контейнер "photos" в своей учетной записи хранения. Количество больших двоичных объектов в контейнере должно равняться количеству переданных фотографий. Дважды щелкните один из больших двоичных объектов, чтобы скачать его, и просмотрите изображение, хранящееся в нем.
В Обозревателе службы хранилища откройте контейнер "thumbnails". Откройте один из больших двоичных объектов, чтобы просмотреть эскизы, созданные для переданных изображений.

Приложение еще не предлагает способ для просмотра переданных исходных изображений. В идеале выбор эскиза изображения должен отображать исходное изображение. Эту функцию вы добавите на следующем шаге.

В этом разделе вы будете использовать бесплатную библиотеку JavaScript с открытым кодом, чтобы добавить всплывающее окно просмотра, позволяющее пользователям просматривать исходные изображения, которые они передали (а не только их эскизы). Эти файлы уже предоставлены. Все, что нужно сделать, — это интегрировать их в проект и внести незначительные изменения в файл Index.cshtml.

Скачайте файлы lightbox.css и lightbox.js из репозитория кода GitHub.
В Обозревателе решений щелкните правой кнопкой мыши папку проекта Скрипты и выберите Добавить -> Новый элемент..., чтобы создать файл lightbox.js. Вставьте в него содержимое из примера файла, скачанного из репозитория кода GitHub.
Щелкните правой кнопкой мыши папку проекта "Содержимое" и выберите Добавить -> Новый элемент..., чтобы создать файл lightbox.css. Вставьте в него содержимое из примера файла, скачанного из репозитория кода GitHub.
Скачайте и распакуйте файл buttons.zip из репозитория файлов данных GitHub https://github.com/Azure-Samples/cognitive-services-sample-data-files/tree/master/ComputerVision/storage-lab-tutorial. У вас должно быть четыре изображения кнопок.
Щелкните правой кнопкой мыши проект Intellipix в Обозревателе решений и выберите Добавить -> Новая папка, чтобы добавить в проект папку "Изображения".
Щелкните правой кнопкой мыши папку Изображения и выберите Добавить -> Существующий элемент..., чтобы импортировать четыре скачанных изображения.
Откройте файл BundleConfig.cs в папке проекта App_Start. Добавьте приведенную ниже инструкцию в метод RegisterBundles в файле BundleConfig.cs:
```
bundles.Add(new ScriptBundle("~/bundles/lightbox").Include(
          "~/Scripts/lightbox.js"));
```
В том же методе найдите инструкцию, которая создает StyleBundle из ~/Content/css, и добавьте lightbox.css в список таблиц стилей в пакете. Ниже приведена измененная инструкция.
```
bundles.Add(new StyleBundle("~/Content/css").Include(
          "~/Content/bootstrap.css",
          "~/Content/site.css",
          "~/Content/lightbox.css"));
```
Откройте _layout. cshtml в папке проекта Views/Shared и добавьте приведенную ниже инструкцию непосредственно перед инструкцией @RenderSection в конце файла:
```
@Scripts.Render("~/bundles/lightbox")
```
Последняя задача — внедрить всплывающее окно просмотра в домашнюю страницу. Для этого откройте файл Index.cshtml (он расположен в папке проекта Views/Home) и замените цикл @foreach приведенным ниже кодом.
```
@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>
}
```
Сохраните изменения и нажмите клавиши CTRL+F5, чтобы запустить приложение в браузере. Затем выберите один из образов, отправленных ранее. Убедитесь, что всплывающее окно отображается и содержит увеличенное представление изображения.
Выберите X в правом нижнем углу светлого ящика, чтобы закрыть его.

Теперь вы можете просматривать переданные изображения. Следующий шаг — сделать что-то еще с этими изображениями.

Создание метаданных с помощью Azure AI Vision

Создание ресурса визуального зрения

Вам потребуется создать ресурс Компьютерное зрение для учетной записи Azure. Этот ресурс управляет доступом к службе "Визуальное распознавание искусственного интеллекта Azure Azure".

Следуйте инструкциям из статьи "Создание ресурса служб искусственного интеллекта Azure", чтобы создать ресурс с несколькими службами или ресурс визуального распознавания.
Затем перейдите в меню для группы ресурсов и выберите созданный ресурс Визуального зрения. Скопируйте URL-адрес в разделе Конечная точка в другое расположение, где вы можете легко извлечь его позже. Затем выберите Показать ключи доступа.

Примечание.

Новые ресурсы, созданные после 1 июля 2019 г., будут использовать пользовательские имена поддоменов. Дополнительные сведения и полный список региональных конечных точек см. в разделе "Пользовательские имена поддомена" для служб ИИ Azure.
В следующем окне скопируйте значение KEY 1 в буфер обмена.

Добавление учетных данных распознавания искусственного интеллекта Azure

Затем вы добавите необходимые учетные данные в приложение, чтобы получить доступ к ресурсам визуального зрения.

Перейдите к файлу Web.config, который хранится в корневой папке проекта. Добавьте следующие инструкции в раздел <appSettings> файла, заменив значение VISION_KEY ключом, скопированным на предыдущем шаге, а значение VISION_ENDPOINT — URL-адресом, сохраненным на шаге до этого.

<add key="SubscriptionKey" value="VISION_KEY" />
<add key="VisionEndpoint" value="VISION_ENDPOINT" />

В Обозреватель решений. Щелкните правой кнопкой мыши решение проекта и выберите пункт "Управление пакетами NuGet". В открывщемся диспетчере пакетов выберите "Обзор", проверка включить предварительную версию и выполните поиск по запросу Azure.AI.Vision.ImageAnalysis. Выберите Установить.

Добавление кода для создания метаданных

Затем вы добавите код, который фактически использует службу Распознавания искусственного интеллекта Azure для создания метаданных для изображений.

Откройте файл HomeController.cs в папке Контроллеры проекта и добавьте следующие инструкции using в верхней части файла:
```
using Azure;
using Azure.AI.Vision.ImageAnalysis;
using System;
```
Перейдите к методу Upload. Этот метод преобразует и отправляет изображения в хранилище BLOB-объектов. Добавьте следующий код сразу после блока, который начинается с // Generate a thumbnail (или в конце процесса создания большого двоичного объекта с изображением). Этот код принимает большой двоичный объект, содержащий изображение (photo), и использует Azure AI Vision для создания описания этого изображения. API визуального распознавания Azure также создает список ключевое слово, которые применяются к изображению. Созданное описание и ключевые слова хранятся в метаданных большого двоичного объекта, чтобы можно было получить их позже.
```
// 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();
```
Перейдите к методу Index в том же файле. Этот метод перечисляет сохраненные большие двоичные объекты с изображениями в целевом контейнере больших двоичных объектов (как экземпляры IListBlobItem) и передает их в представление приложений. Замените блок foreach в этом методе следующим кодом. Этот код вызывает CloudBlockBlob.FetchAttributes для получения присоединенных метаданных каждого большого двоичного объекта. Извлекает описание, созданное компьютером, (caption) из метаданных и добавляет его к объекту BlobInfo, который передается в представление.
```
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
        });
    }
}
```

Тестирование приложения

Сохраните изменения в Visual Studio и нажмите клавиши CTRL+F5, чтобы запустить приложение в браузере. Используйте приложение для передачи еще нескольких изображений из скачанного набора фотографий или собственной папки. При наведении указателя мыши на одно из изображений в представлении появится окно всплывающей подсказки с созданным компьютером заголовком этого изображения.

Чтобы просмотреть все вложенные метаданные, в Обозревателе службы хранилища Azure просмотрите контейнер хранилища, в котором вы храните изображения. Щелкните правой кнопкой мыши любой большой двоичный объект в контейнере и выберите пункт Свойства. В диалоговом окне вы увидите список пар "ключ — значение". Созданное компьютером описание изображений хранится в элементе Caption, а ключевые слова для поиска хранятся в тегах Tag0, Tag1 и т. д. По завершении нажмите кнопку "Отмена ", чтобы закрыть диалоговое окно.

Image properties dialog window, with metadata tags listed

Добавление функции поиска в приложение

В этом разделе вы добавите поле поиска на домашнюю страницу, что позволит пользователям выполнять поиск по ключевым словам на переданных изображениях. Ключевое слово — это те, которые создаются API визуального распознавания ИИ Azure и хранятся в метаданных BLOB-объектов.

Откройте файл Index.cshtml в папке проекта Views/Home и добавьте приведенные ниже инструкции в пустой элемент <div> с атрибутом class="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>
}

Эти код и разметка добавляют на домашнюю страницу поле поиска и кнопку Search (Найти).

Откройте файл HomeController.cs в папке проекта Controllers и добавьте приведенный ниже метод в класс HomeController.
```
[HttpPost]
public ActionResult Search(string term)
{
    return RedirectToAction("Index", new { id = term });
}
```
Это метод, который вызывается, когда пользователь выбирает кнопку поиска , добавленную на предыдущем шаге. Он обновляет страницу и добавляет параметр поиска в URL-адрес.

Замените метод Index следующей реализацией:

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();
}

Обратите внимание, что метод Index теперь принимает параметр id , содержащий значение, введенное пользователем в поле поиска. Пустой или отсутствующий id параметр указывает, что все фотографии должны отображаться.

Добавьте приведенный ниже вспомогательный метод в класс 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;
}
```
Этот метод вызывается методом Index для определения того, содержат ли ключевые слова в метаданных, вложенных в данный большой двоичный объект изображения, введенное пользователем условие поиска.
Запустите приложение еще раз и передайте несколько фотографий. Вы можете использовать собственные фотографии, а не только те, которые предоставляются в этом руководстве.
В поле поиска введите ключевое слово, например river. Затем нажмите кнопку "Поиск ".
Результаты поиска будут зависеть от того, что было введено и какие изображения были переданы. Однако результатом должен быть отфильтрованный список изображений, ключевые слова в метаданных которых содержат все введенное ключевое слово или его часть.
Нажмите кнопку "Назад" браузера, чтобы снова отобразить все изображения.

Осталось совсем немного. Пора развернуть приложение в облаке.

Развертывание приложения в Azure

В этом разделе вы развернете данное приложение в Azure из Visual Studio Вы позволите Visual Studio создать веб-приложение Azure, чтобы вам не пришлось переходить к портал Azure и создавать его отдельно.

Щелкните правой кнопкой мыши проект в Обозревателе решений и выберите Опубликовать… в контекстном меню. Убедитесь, что выбрана служба microsoft приложение Azure и создание нового, а затем нажмите кнопку "Опубликовать".
В следующем диалоговом окне выберите группу ресурсов IntellipixResources в разделе Группа ресурсов. Нажмите кнопку "Создать... рядом с пунктом "Служба приложений план" и создайте новый план Служба приложений в том же расположении, где вы выбрали учетную запись хранения в разделе "Создание учетной записи хранения", принимая значения по умолчанию везде. Завершите, нажав кнопку "Создать ".
Через несколько секунд приложение появится в окне браузера. Обратите внимание на URL-адрес в адресной строке. Приложение больше не работает локально. Оно размещено в Интернете и является общедоступным.

Если вы внесете изменения в приложение и захотите отправить эти изменения в Интернет, выполните процедуру публикации еще раз. Вы по-прежнему можете протестировать изменения локально перед публикацией в Интернете.

Очистка ресурсов

Если вы хотите продолжать работать с веб-приложением, перейдите к разделу Дополнительная информация. Если вы не планируете продолжать использование этого приложения, вам следует удалить все ресурсы, связанные с приложением. Чтобы удалить ресурсы, можно удалить группу ресурсов, содержащую служба хранилища Azure подписку и ресурс Визуального зрения. Это приведет к удалению учетной записи хранения, отправленных в нее больших двоичных объектов и ресурса Службы приложений, необходимого для подключения к веб-приложению ASP.NET.

Чтобы удалить группу ресурсов, откройте вкладку "Группы ресурсов" на портале, перейдите к группе ресурсов, используемой для этого проекта, и выберите команду "Удалить группу ресурсов" в верхней части представления. Вам будет предложено ввести имя группы ресурсов, чтобы подтвердить, что вы хотите ее удалить. После удаления группу ресурсов восстановить невозможно.

Следующие шаги

Azure дает гораздо больше возможностей для дальнейшей разработки приложения Intellipix. Например, можно добавить поддержку проверки подлинности пользователей и удаления фотографий, а не принудительно ждать, пока службы ИИ Azure будут обрабатывать фотографию после отправки, вы можете использовать Функции Azure для асинхронного вызова API распознавания искусственного интеллекта Azure при каждом добавлении изображения в хранилище BLOB-объектов. Можно также выполнить любое количество других операций анализа изображений, как описано в обзоре.

Обзор анализа изображений