Tutorial: Reconhecer logótipos do serviço do Azure em imagens da câmara

  • Artigo

Neste tutorial, irá explorar uma aplicação de exemplo que utiliza Visão Personalizada como parte de um cenário maior. A aplicação Aprovisionamento Visual de IA, uma aplicação Xamarin.Forms para plataformas móveis, analisa fotografias dos logótipos do serviço do Azure e, em seguida, implementa esses serviços na conta do Azure do utilizador. Aqui, irá aprender como utiliza Visão Personalizada em coordenação com outros componentes para fornecer uma aplicação ponto a ponto útil. Pode executar todo o cenário da aplicação para si próprio ou apenas pode concluir o Visão Personalizada parte da configuração e explorar a forma como a aplicação o utiliza.

Este tutorial mostrar-lhe como:

  • Crie um detetor de objetos personalizado para reconhecer logótipos do serviço do Azure.
  • Ligue a sua aplicação à Visão e Visão Personalizada de IA do Azure.
  • Crie uma conta principal de serviço do Azure para implementar serviços do Azure a partir da aplicação.

Se não tiver uma subscrição do Azure, crie uma conta gratuita antes de começar.

Pré-requisitos

Obter o código-fonte

Se quiser utilizar a aplicação Web fornecida, clone ou transfira o código fonte da aplicação a partir do repositório Aprovisionamento Visual de IA no GitHub. Abra o ficheiro Source/VisualProvision.sln no Visual Studio. Mais tarde, irá editar alguns dos ficheiros do projeto para que possa executar a aplicação.

Criar um detetor de objetos

Inicie sessão no portal Web Visão Personalizada e crie um novo projeto. Especifique um projeto de Deteção de Objetos e utilize o domínio Logótipo; isto permitirá que o serviço utilize um algoritmo otimizado para a deteção do logótipo.

Janela novo projeto no site do Visão Personalizada no browser Chrome

Enviar e marcar imagens

Em seguida, prepare o algoritmo de deteção do logótipo ao carregar imagens dos logótipos do serviço do Azure e marcá-los manualmente. O repositório AIVisualProvision inclui um conjunto de imagens de preparação que pode utilizar. No site, selecione o botão Adicionar imagens no separador Imagens de Formação . Em seguida, aceda à pasta Documentos/Imagens/Training_DataSet do repositório. Terá de etiquetar manualmente os logótipos em cada imagem, pelo que, se estiver apenas a testar este projeto, poderá querer carregar apenas um subconjunto das imagens. Carregue pelo menos 15 instâncias de cada etiqueta que planeia utilizar.

Depois de carregar as imagens de preparação, selecione a primeira no ecrã. A janela de etiquetagem será apresentada. Desenhe caixas e atribua etiquetas para cada logótipo em cada imagem.

Etiquetagem do logótipo no site do Visão Personalizada

A aplicação está configurada para funcionar com cadeias de etiquetas específicas. Encontrará as definições no ficheiro 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";

Depois de etiquetar uma imagem, aceda à direita para etiquetar a seguinte. Feche a janela de identificação quando terminar.

Preparar o detetor de objetos

No painel esquerdo, defina o comutador Etiquetas como Etiquetas para apresentar as suas imagens. Em seguida, selecione o botão verde na parte superior da página para preparar o modelo. O algoritmo irá preparar-se para reconhecer as mesmas etiquetas em novas imagens. Também irá testar o modelo em algumas das suas imagens existentes para gerar pontuações de precisão.

O site Visão Personalizada, no separador Imagens de Formação. Nesta captura de ecrã, o botão Preparar está delineado

Obter o URL de predição

Depois de preparar o modelo, está pronto para integrá-lo na sua aplicação. Terá de obter o URL do ponto final (o endereço do modelo, que a aplicação irá consultar) e a chave de predição (para conceder à aplicação acesso a pedidos de predição). No separador Desempenho , selecione o botão URL de Predição na parte superior da página.

O site Visão Personalizada, a mostrar uma janela da API de Predição que apresenta um endereço de URL e uma chave de API

Copie o URL do ponto final e o valor Prediction-Key para os campos adequados no ficheiro 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";

Examinar Visão Personalizada utilização

Abra o ficheiro Source/VisualProvision/Services/Recognition/CustomVisionService.cs para ver como a aplicação utiliza a sua chave de Visão Personalizada e o URL do ponto final. O método PredictImageContentsAsync utiliza um fluxo de bytes de um ficheiro de imagem juntamente com um token de cancelamento (para gestão de tarefas assíncrona), chama a API de predição de Visão Personalizada e devolve o resultado da predição.

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

Este resultado assume a forma de uma instância PredictionResult , que contém uma lista de instâncias de Predição . Uma Predição contém uma etiqueta detetada e a respetiva localização da caixa delimitadora na imagem.

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

    public string TagId { get; set; }

    public string TagName { get; set; }

    public BoundingBox BoundingBox { get; set; }
}

Para saber mais sobre como a aplicação processa estes dados, comece com o método GetResourcesAsync . Este método é definido no ficheiro Source/VisualProvision/Services/Recognition/RecognitionService.cs .

Adicionar reconhecimento de texto

A parte Visão Personalizada do tutorial está concluída. Se quiser executar a aplicação, também terá de integrar o serviço visão de IA do Azure. A aplicação utiliza a funcionalidade reconhecimento de texto da Visão de IA do Azure para complementar o processo de deteção do logótipo. Um logótipo do Azure pode ser reconhecido pelo aspeto ou pelo texto impresso perto do mesmo. Ao contrário Visão Personalizada modelos, o Azure AI Vision está preparado para realizar determinadas operações em imagens ou vídeos.

Subscreva o serviço visão de IA do Azure para obter um URL de chave e ponto final. Para obter ajuda sobre este passo, veja Como obter chaves.

O serviço visão de IA do Azure no portal do Azure, com o menu Início Rápido selecionado. Está delineada uma ligação para chaves, tal como o URL do ponto final da API

Em seguida, abra o ficheiro Source\VisualProvision\AppSettings.cs e preencha as ComputerVisionEndpoint variáveis e ComputerVisionKey com os valores corretos.

// 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";

Criar um principal de serviço

A aplicação requer uma conta do principal de serviço do Azure para implementar serviços na sua subscrição do Azure. Um principal de serviço permite-lhe delegar permissões específicas a uma aplicação com o controlo de acesso baseado em funções do Azure. Para saber mais, veja o guia de principais de serviço.

Pode criar um principal de serviço com o Azure Cloud Shell ou a CLI do Azure, conforme mostrado aqui. Para começar, inicie sessão e selecione a subscrição que pretende utilizar.

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

Em seguida, crie o seu principal de serviço. (Este processo pode demorar algum tempo a ser concluído.)

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

Após a conclusão com êxito, deverá ver a seguinte saída JSON, incluindo as credenciais necessárias.

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

Tome nota dos clientId valores e tenantId . Adicione-os aos campos adequados no ficheiro 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";

Executar a aplicação

Neste momento, deu acesso à aplicação a:

  • Um modelo de Visão Personalizada preparado
  • O serviço visão de IA do Azure
  • Uma conta do principal de serviço

Siga estes passos para executar a aplicação:

  1. No Explorador de Soluções do Visual Studio, selecione o projeto VisualProvision.Android ou o projeto VisualProvision.iOS . Escolha um emulador correspondente ou um dispositivo móvel ligado no menu pendente na barra de ferramentas principal. Em seguida, execute a aplicação.

    Nota

    Precisará de um dispositivo macOS para executar um emulador iOS.

  2. No primeiro ecrã, introduza o ID do cliente do principal de serviço, o ID do inquilino e a palavra-passe. Selecione o botão Iniciar sessão .

    Nota

    Em alguns emuladores, o botão Iniciar sessão poderá não estar ativado neste passo. Se isto acontecer, pare a aplicação, abra o ficheiro Source/VisualProvision/Pages/LoginPage.xaml , localize o elemento com o Button nome LOGIN BUTTON, remova a seguinte linha e, em seguida, execute a aplicação novamente.

    IsEnabled="{Binding IsValid}"

    O ecrã da aplicação a mostrar os campos das credenciais do principal de serviço

  3. No ecrã seguinte, selecione a sua subscrição do Azure no menu pendente. (Este menu deve conter todas as subscrições às quais o principal de serviço tem acesso.) Selecione o botão Continuar . Neste momento, a aplicação poderá pedir-lhe para conceder acesso à câmara do dispositivo e ao armazenamento de fotografias. Conceda as permissões de acesso.

    O ecrã da aplicação a mostrar um campo pendente para a subscrição do Azure de Destino

  4. A câmara no seu dispositivo será ativada. Tire uma fotografia de um dos logótipos do serviço do Azure que preparou. Uma janela de implementação deve pedir-lhe para selecionar uma região e um grupo de recursos para os novos serviços (como faria se os implementasse a partir do portal do Azure).

    Um ecrã de câmara de smartphone focado em dois recortes de papel dos logótipos do Azure

    Um ecrã de aplicação a mostrar campos para a região de implementação e o grupo de recursos

Limpar os recursos

Se seguiu todos os passos deste cenário e utilizou a aplicação para implementar serviços do Azure na sua conta, inicie sessão no portal do Azure. Aí, cancele os serviços que não pretende utilizar.

Se planeia criar o seu próprio projeto de deteção de objetos com Visão Personalizada, poderá querer eliminar o projeto de deteção de logótipos que criou neste tutorial. Uma subscrição gratuita para Visão Personalizada permite apenas dois projetos. Para eliminar o projeto de deteção do logótipo, no site Visão Personalizada, abra Projetos e, em seguida, selecione o ícone de lixo em O Meu Novo Projeto.

Passos seguintes

Neste tutorial, configurou e explorou uma aplicação Xamarin.Forms completa que utiliza o serviço Visão Personalizada para detetar logótipos em imagens de câmaras móveis. Em seguida, aprenda as melhores práticas para criar um modelo de Visão Personalizada para que, quando criar um para a sua própria aplicação, possa torná-lo poderoso e preciso.

Como melhorar o classificador