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

  • Статья

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

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

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

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

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

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

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

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

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

Окно создания проекта на веб-сайте Пользовательского визуального распознавания в браузере Chrome

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

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

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

Добавление тегов на веб-сайте службы

Это приложение настроено на работу с конкретным форматом строк для тегов. Определения можно найти в файле 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 (С тегом), чтобы отобразить нужные изображения. Затем нажмите зеленую кнопку в верхней части страницы, чтобы начать обучение модели. Вы обучите алгоритм распознавать одинаковые теги на новых изображениях. Алгоритм также протестирует модель на нескольких существующих изображениях, чтобы создать оценки точности.

Сайт Пользовательского визуального распознавания, на котором открыта вкладка Training Images (Изображения для обучения). На этом снимке экрана выделена кнопка Train (Обучение)

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

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

Веб-сайт Пользовательского визуального распознавания, на котором открыто окно API прогнозирования со значениями URL-адреса и ключа API

Скопируйте 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.

Добавление распознавания текста

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

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

Служба Azure AI Vision в портал Azure с выбранным меню

Теперь откройте файл 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";

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

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

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

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

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

    Примечание

    Для запуска эмулятора iOS потребуется устройство macOS.

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

    Примечание

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

    IsEnabled="{Binding IsValid}"

    Экран приложения с полями для ввода учетных данных субъекта-службы

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

    Экран приложения с раскрывающимся полем

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

    Видоискатель камеры смартфона, наведенной на распечатанные логотипы Azure

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

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

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

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

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

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

Как улучшить классификатор