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

В этом руководстве вы изучите приложение, в котором средство "Пользовательское визуальное распознавание" используется на одном из этапов сложного сценария. Приложение AI Visual Provision (на базе Xamarin.Forms) для мобильных платформ анализирует изображения логотипов служб Azure с камеры, а затем развертывает эти службы в учетной записи пользователя Azure. В этой статье описано, как применять средство "Пользовательское визуальное распознавание" совместно с другими компонентами для создания эффективного комплексного приложения. Вы можете самостоятельно создать весь сценарий для приложения или настроить только средство "Пользовательское визуальное распознавание" и изучить его применение в приложении.

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

  • создание пользовательского средства обнаружения объектов для распознавания логотипов служб Azure;
  • подключение приложения к службам Azure "Компьютерное зрение" и "Пользовательское визуальное распознавание";
  • создание учетной записи субъекта-службы Azure для развертывания служб Azure из приложения.

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

Предварительные требования

Получение исходного кода

Если вы хотите использовать предоставленное веб-приложение, клонируйте или скачайте его исходный код из репозитория AI Visual Provision на сайте GitHub. Откройте файл Source/VisualProvision.sln в Visual Studio. Позже вы измените некоторые файлы проекта, чтобы запустить приложение.

Создание средства обнаружения объектов

Войдите на веб-сайт Пользовательского визуального распознавания и создайте проект. Укажите тип проекта Object Detection (Обнаружение объектов) и выберите в разделе Domains (Области) пункт Logo (Логотип). Это позволит службе использовать алгоритм, оптимизированный для обнаружения логотипов.

New-project window on the Custom Vision website in the Chrome browser

Отправка и снабжение тегами изображений

Теперь обучите алгоритм обнаружения логотипов, отправив изображения логотипов служб Azure и вручную присвоив им теги. В репозитории AIVisualProvision есть набор изображений, которые можно использовать для обучения. Нажмите на веб-сайте кнопку Add images (Добавить изображения), которую вы найдете на вкладке Training Images (Изображения для обучения). Затем перейдите к папке репозитория Documents/Images/Training_DataSet. Вам придется вручную добавить теги логотипов к каждому изображению. Если этот проект вам нужен только для теста, лучше загрузить только часть изображений. Отправьте по меньшей мере 15 примеров для каждого тега, который вы намерены использовать.

После загрузки обучающих изображений выберите на экране первое из них. Откроется окно расстановки тегов. На каждом изображении выделите рамкой каждый логотип и присвойте ему тег.

Logo tagging on the Custom Vision website

Это приложение настроено на работу с конкретным форматом строк для тегов. Определения можно найти в файле Source\VisualProvision\Services\Recognition\RecognitionService.cs:

private const string TAG_ACTIVE_DIRECTORY = "ACTIVE_DIRECTORY";
private const string TAG_APP_SERVICE = "APP_SERVICE";
private const string TAG_NOTIFICATION_HUBS = "NOTIFICATION_HUBS";
private const string TAG_MOBILE_APPS = "MOBILE_APPS";
private const string TAG_AZURE_SEARCH = "AZURE_SEARCH";
private const string TAG_AZURE_CDN = "CDN";
private const string TAG_AZURE_MACHINE_LEARNING = "MACHINE_LEARNING";
private const string TAG_AZURE_STORAGE = "STORAGE";
private const string TAG_IOT_EDGE = "IOT_EDGE";
private const string TAG_COSMOS_DB = "COSMOS_DB";
private const string TAG_COGNITIVE_SERVICES = "COGNITIVE_SERVICES";
private const string TAG_SQL_DATABASE = "SQL_DATABASE";
private const string TAG_MYSQL_CLEARDB_DATABASE = "MYSQL_CLEARDB_DATABASE";
private const string TAG_REDIS_CACHE = "REDIS_CACHE";
private const string TAG_APP_INSIGHTS = "APPLICATION_INSIGHTS";
private const string TAG_AZURE_FUNCTIONS = "AZURE_FUNCTIONS";

Присвоив тег, перейдите к следующему изображению. Завершив процесс, закройте окно добавления тегов.

Обучение средства обнаружения объектов

На панели слева установите переключатель Tags (Теги) в положение Tagged (С тегом), чтобы отобразить нужные изображения. Затем нажмите зеленую кнопку в верхней части страницы, чтобы начать обучение модели. Вы обучите алгоритм распознавать одинаковые теги на новых изображениях. Алгоритм также протестирует модель на нескольких существующих изображениях, чтобы создать оценки точности.

The Custom Vision website, on the Training Images tab. In this screenshot, the Train button is outlined

Получение URL-адреса прогнозирования

Завершив обучение модели, вы можете интегрировать ее в свое приложение. Вам нужно получить URL-адрес конечной точки (адрес вашей модели, запрашиваемый приложением) и ключ прогнозирования (чтобы предоставить приложению доступ к запросам прогнозирования). В верхней части страницы на вкладке Performance (Производительность) нажмите кнопку Prediction URL (URL-адрес прогнозирования).

The Custom Vision website, showing a Prediction API window that displays a URL address and API key

Скопируйте URL-адрес конечной точки и значение Prediction-Key в соответствующие поля в файле Source\VisualProvision\AppSettings.cs:

// Custom Vision
public const string CustomVisionPredictionUrl = "INSERT YOUR COMPUTER VISION API URL HERE FOR MAGNETS RECOGNITION";
public const string CustomVisionPredictionKey = "INSERT YOUR COMPUTER VISION PREDICTION KEY HERE FOR MAGNETS RECOGNITION";

Проверка работы Пользовательского визуального распознавания

Откройте файл Source/VisualProvision/Services/Recognition/CustomVisionService.cs, чтобы проверить, как ключ и URL-адрес конечной точки Пользовательского визуального распознавания используются в приложении. Метод PredictImageContentsAsync принимает поток байтов файла изображения с токеном отмены (для управления асинхронными задачами), вызывает API прогнозирования Пользовательского визуального распознавания и возвращает результат прогнозирования.

public async Task<PredictionResult> PredictImageContentsAsync(Stream imageStream, CancellationToken cancellationToken)
{
    var client = new HttpClient();
    client.DefaultRequestHeaders.Add("Prediction-key", AppSettings.CustomVisionPredictionKey);

    byte[] imageData = StreamToByteArray(imageStream);

    HttpResponseMessage response;
    using (var content = new ByteArrayContent(imageData))
    {
        content.Headers.ContentType = new MediaTypeHeaderValue("application/octet-stream");
        response = await client.PostAsync(AppSettings.CustomVisionPredictionUrl, content);
    }

    var resultJson = await response.Content.ReadAsStringAsync();
    return JsonConvert.DeserializeObject<PredictionResult>(resultJson);
}

Этот результат принимает форму экземпляра PredictionResult, который в свою очередь содержит список экземпляров Prediction. Экземпляр Prediction содержит обнаруженный тег и расположение ограничивающего прямоугольника на изображении.

public class Prediction
{
    public double Probability { get; set; }

    public string TagId { get; set; }

    public string TagName { get; set; }

    public BoundingBox BoundingBox { get; set; }
}

Чтобы узнать больше о том, как приложение обрабатывает эти данные, изучите метод GetResourcesAsync. Этот метод определен в файле Source/VisualProvision/Services/Recognition/RecognitionService.cs.

Добавление API "Компьютерное зрение"

Итак, мы завершили настройку службы "Пользовательское визуальное распознавание" для примера из этого руководства. Если вы хотите запустить это приложение, интегрируйте в него еще и службу "Компьютерное зрение". Приложение использует функцию распознавания текста из службы "Компьютерное зрение", чтобы дополнить процесс обнаружения логотипов. Логотип Azure можно распознать как по внешнему виду, так и по размещенному рядом с ним тексту. В отличие от моделей Пользовательского визуального распознавания, служба "Компьютерное зрение" предварительно обучена для выполнения определенных операций с изображениями или видео.

Оформите подписку на службу "Компьютерное зрение", чтобы получить ключ и URL-адрес конечной точки. Дополнительные инструкции по этому шагу см. в статье Получение ключей.

The Computer Vision service in the Azure portal, with the Quickstart menu selected. A link for keys is outlined, as is the API endpoint URL

Теперь откройте файл Source\VisualProvision\AppSettings.cs и задайте переменным ComputerVisionEndpoint и ComputerVisionKey правильные значения.

// Computer Vision
public const string ComputerVisionEndpoint = "INSERT COMPUTER VISION ENDPOINT HERE FOR HANDWRITING";
public const string ComputerVisionKey = "INSERT YOUR COMPUTER VISION KEY HERE FOR HANDWRITING";

Создание субъекта-службы

Для развертывания служб в подписке Azure приложению потребуется учетная запись субъекта-службы. Субъект-служба позволяет делегировать приложению определенные разрешения с помощью управления доступом на основе ролей в Azure. Дополнительные сведения см. в статье Предоставление приложениям доступа к ресурсам Azure Stack за счет создания субъектов-служб.

Вы можете создать субъект-службу с помощью Azure Cloud Shell или Azure CLI, как показано далее. Для начала выполните вход и выберите подписку, которую вы намерены использовать.

az login
az account list
az account set --subscription "<subscription name or subscription id>"

Затем создайте субъект-службу. (Этот процесс может занять некоторое время.)

az ad sp create-for-rbac --name <servicePrincipalName> --role Contributor --scopes /subscriptions/<subscription_id> --password <yourSPStrongPassword>

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

{
  "clientId": "(...)",
  "clientSecret": "(...)",
  "subscriptionId": "(...)",
  "tenantId": "(...)",
  ...
}

Запишите значения clientId и tenantId. Введите их в соответствующие поля в файле Source\VisualProvision\AppSettings.cs.

/* 
 * Service principal
 *
 * Note: This settings will only be used in Debug mode to avoid developer having to enter
 * ClientId and TenantId keys each time application is deployed.
 * In Release mode, all credentials will be introduced using UI input fields.
 */
public const string ClientId = "INSERT YOUR CLIENTID HERE";
public const string TenantId = "INSERT YOUR TENANTID HERE";

Запустите приложение

На этом этапе вы предоставили приложению доступ к:

  • обученной модели Пользовательского визуального распознавания;
  • службе "Компьютерное зрение";
  • учетной записи субъекта-службы.

Чтобы запустить приложение, сделайте следующее.

  1. В обозревателе решений Visual Studio выберите проект VisualProvision.Android или VisualProvision.iOS. Выберите подходящий эмулятор или подключенное мобильное устройство в раскрывающемся меню на главной панели инструментов. Затем запустите приложение.

    Примечание

    Для выполнения эмулятора iOS вам потребуется устройство MacOS.

  2. На первом экране введите идентификатор клиента для субъекта-службы, идентификатор арендатора и пароль. Нажмите кнопку Вход.

    Примечание

    В некоторых эмуляторах кнопка Вход может быть неактивной на этом этапе. В таком случае остановите приложение и откройте файл Source/VisualProvision/Pages/LoginPage.xaml. Найдите в нем элемент Button с меткой LOGIN BUTTON и удалите следующую строку, а затем снова запустите приложение.

    IsEnabled="{Binding IsValid}"
    

    The app screen, showing fields for service principal credentials

  3. На следующем экране выберите подписку Azure в раскрывающемся списке. (Это меню должно содержать все подписки, к которым субъект-служба имеет доступ.) Нажмите кнопку Продолжить. На этом этапе приложение может выдать запрос на доступ к камере и хранилищу фотографий на вашем устройстве. Предоставьте требуемый доступ.

    The app screen, showing a drop-down field for Target Azure subscription

  4. После этого на вашем устройстве включится камера. Сделайте снимок одного из логотипов служб Azure, который вы включили в обучение. В окне развертывания вам будет предложено выбрать регион и группу ресурсов для новых служб (как при развертывании на портале Azure).

    A smartphone camera screen focused on two paper cutouts of Azure logos

    An app screen showing fields for the deployment region and resource group

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

Если вы выполнили все шаги этого сценария и использовали приложение для развертывания служб Azure в своей учетной записи, перейдите на портал Azure. Отключите здесь службы, которые вы не будете использовать.

Если вы планируете в будущем создать собственный проект обнаружения объектов с использованием Пользовательского визуального распознавания, лучше будет удалить проект обнаружения логотипов, созданный при работе с этим руководством. При работе в бесплатной подписке на Пользовательское визуальное распознавание можно создать только два проекта. Чтобы удалить проект обнаружения логотипов, откройте раздел Projects (Проекты) на веб-сайте Пользовательского визуального распознавания и выберите значок корзины в разделе My New Project (Мой новый проект).

Дальнейшие действия

Изучая это руководство, вы настроили и освоили полнофункциональное приложение Xamarin.Forms, в котором применяется Пользовательское визуальное распознавание для обнаружения логотипов на изображениях с камер мобильных устройств. Теперь изучите рекомендации по созданию модели Пользовательского визуального распознавания, чтобы научиться создавать эффективно функционирующие модели для собственных приложений.