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

Статья
09/02/2024

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

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

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

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

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

Visual Studio 2017 или более поздней версии.
Рабочая нагрузка Xamarin для Visual Studio (см. дополнительные сведения в статье Установка Xamarin в Visual Studio 2017).
Эмулятор iOS или Android для Visual Studio

Примечание.

Для запуска эмулятора iOS потребуется устройство macOS.
(Необязательно) Azure CLI

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

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

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

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

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

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

Выберите URL-адрес прогнозирования

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

Скопируйте 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 AI Vision предварительно обучен для выполнения определенных операций с изображениями или видео.

Подпишитесь на службу "Визуальное распознавание ИИ Azure", чтобы получить URL-адрес ключа и конечной точки. Сведения об этом шаге см. в статье "Создание ресурса служб искусственного интеллекта 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. Субъект-служба позволяет делегировать приложению определенные разрешения с помощью управления доступом на основе ролей в 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"
учетной записи субъекта-службы.

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

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

В некоторых эмуляторах кнопка Вход может быть неактивной на этом этапе. В таком случае остановите приложение и откройте файл Source/VisualProvision/Pages/LoginPage.xaml. Найдите в нем элемент Button с меткой LOGIN BUTTON и удалите следующую строку, а затем снова запустите приложение.
```
IsEnabled="{Binding IsValid}"
```
На следующем экране выберите подписку Azure в раскрывающемся списке. (Это меню должно содержать все подписки, к которым имеет доступ субъект-служба.) Нажмите кнопку "Продолжить ". На этом этапе приложение может выдать запрос на доступ к камере и хранилищу фотографий на вашем устройстве. Предоставьте требуемый доступ.
После этого на вашем устройстве включится камера. Сделайте снимок одного из логотипов служб Azure, который вы включили в обучение. В окне развертывания вам будет предложено выбрать регион и группу ресурсов для новых служб (как при развертывании на портале Azure).

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

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

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

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

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

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

Поделиться через