Tutorial: Reconhecer logotipos de serviço Azure em imagens de câmara

Neste tutorial, você vai explorar uma aplicação de amostra que usa Visão Personalizada como parte de um cenário maior. A aplicação AI Visual Provision, uma aplicação Xamarin.Forms para plataformas móveis, analisa imagens de câmaras de logótipos de serviço Azure e, em seguida, implementa os serviços reais na conta Azure do utilizador. Aqui você vai aprender como ele usa Visão Personalizada em coordenação com outros componentes para entregar uma aplicação útil de ponta a ponta. Você pode executar todo o cenário da aplicação para si mesmo, ou você pode completar apenas a Visão Personalizada parte da configuração e explorar como a aplicação a utiliza.

Este tutorial irá mostrar-lhe como:

  • Crie um detetor de objetos personalizado para reconhecer os logótipos de serviço Azure.
  • Ligação a sua aplicação para a Azure Imagem Digitalizada e Visão Personalizada.
  • Crie uma conta principal do serviço Azure para implementar os serviços 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 descarregue o código fonte da aplicação a partir do repositório de Provisão Visual da IA no GitHub. Abra o ficheiro .sln Fonte/VisualProvision em Visual Studio. Mais tarde, irá editar alguns dos ficheiros do projeto para que possa executar a aplicação.

Criar um detetor de objetos

Inscreva-se no site da Visão Personalizada e crie um novo projeto. Especifique um projeto de deteção de objetos e utilize o domínio do logotipo; isto permitirá que o serviço utilize um algoritmo otimizado para a deteção de logotipo.

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

Enviar e marcar imagens

Em seguida, treine o algoritmo de deteção do logotipo carregando imagens de logótipos de serviço Azure e marcando-os manualmente. O repositório AIVisualProvision inclui um conjunto de imagens de treino que pode usar. No site, selecione o botão Adicionar imagens no separador Imagens de Treino . Em seguida, aceda à pasta Documentos/Imagens/Training_DataSet do repositório. Terá de marcar manualmente os logótipos de cada imagem, por isso, se estiver apenas a testar este projeto, talvez queira carregar apenas um subconjunto das imagens. Faça o upload de pelo menos 15 instâncias de cada etiqueta que pretende utilizar.

Depois de fazer o upload das imagens de treino, selecione a primeira no visor. A janela de marcação aparecerá. Desenhe caixas e atribua etiquetas para cada logotipo em cada imagem.

Logo tagging on the Custom Vision website

A aplicação está configurada para trabalhar com cordas de etiqueta específicas. Encontrará as definições no ficheiro Source\VisualProvision\Services\Recognition\Recognition\RecognitionService.cs ficheiro:

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 marcar uma imagem, vá para a direita para marcar a próxima. Feche a janela de marcação quando terminar.

Treine o detetor de objetos

No painel esquerdo, desacompanhe o interruptor Tags para Tagged para exibir as suas imagens. Em seguida, selecione o botão verde na parte superior da página para treinar o modelo. O algoritmo treinará 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.

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

Obter o URL de predição

Depois de treinar o seu modelo, está pronto para integrá-lo na sua aplicação. Você precisará obter o URL do ponto final (o endereço do seu modelo, que a aplicação irá consultar) e a chave de previsão (para conceder à app acesso a pedidos de previsão). No separador Desempenho , selecione o botão URL de previsão no topo da página.

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

Copie o URL do ponto final e o valor de Chave de Previsão para os campos apropriados 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 URL de ponto final. O método PredictImageContentsAsync requer um fluxo byte de um ficheiro de imagem juntamente com um token de cancelamento (para gestão de tarefas assíncrona), chama a API de previsão Visão Personalizada e devolve o resultado da previsã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 por si só contém uma lista de casos de previsão . Uma previsão contém uma etiqueta detetada e a sua localização da caixa limite 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 lida com estes dados, comece com o método GetResourcesAsync . Este método é definido no ficheiro Fonte/VisualProvision/Serviços/Reconhecimento/Reconhecimento.cs .

Adicionar Imagem Digitalizada

A parte Visão Personalizada do tutorial está completa. Se quiser executar a aplicação, também terá de integrar o serviço Imagem Digitalizada. A aplicação utiliza a funcionalidade de reconhecimento de texto Imagem Digitalizada para complementar o processo de deteção do logotipo. Um logótipo Azure pode ser reconhecido pela sua aparência ou pelo texto impresso perto dele. Ao contrário Visão Personalizada modelos, Imagem Digitalizada é pré-treinado para realizar certas operações em imagens ou vídeos.

Subscreva o serviço Imagem Digitalizada para obter uma URL chave e ponto final. Para obter ajuda neste passo, consulte como obter as chaves.

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

Em seguida, abra o Source\VisualProvision\AppSettings.cs ficheiro e povoe as ComputerVisionEndpoint variáveis e ComputerVisionKey variáveis 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 principal do serviço Azure para implementar serviços na sua subscrição Azure. Um diretor de serviço permite-lhe delegar permissões específicas numa aplicação usando o controlo de acesso baseado em funções Azure. Para saber mais, consulte o guia dos principais serviços.

Pode criar um principal de serviço utilizando o Azure Cloud Shell ou o Azure CLI, como mostra aqui. Para começar, inicie sinsutil 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 diretor de serviço. (Este processo pode levar algum tempo a terminar.)

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

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

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

Tome nota dos clientId valores.tenantId Adicione-os aos campos apropriados 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 Visão Personalizada modelo treinado
  • O serviço Imagem Digitalizada
  • Uma conta principal de serviço

Siga estes passos para executar a aplicação:

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

    Nota

    Vai precisar de um dispositivo MacOS para executar um emulador iOS.

  2. No primeiro ecrã, insira o seu iD principal cliente de serviço, iD do inquilino e senha. Selecione o botão Iniciar sessão .

    Nota

    Em alguns emuladores, o botão de Login pode não ser ativado neste passo. Se isso acontecer, pare a aplicação, abra o ficheiro Source/VisualProvision/Pages/LoginPage.xaml , encontre o Button elemento marcado como BOTÃO DE LOGIN, remova a seguinte linha e, em seguida, volte a executar a aplicação.

    IsEnabled="{Binding IsValid}"
    

    The app screen, showing fields for service principal credentials

  3. No ecrã seguinte, selecione a subscrição do Azure a partir do menu suspenso. (Este menu deve conter todas as subscrições a que o seu diretor de serviço tem acesso.) Selecione o botão Continuar . Neste momento, a aplicação poderá levar-lhe a conceder acesso à câmara do dispositivo e ao armazenamento de fotografias. Conceda as permissões de acesso.

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

  4. A câmara do seu dispositivo será ativada. Tire uma foto de um dos logótipos de serviço Azure que treinou. Uma janela de implantação deve levá-lo a selecionar uma região e um grupo de recursos para os novos serviços (como faria se os estivesse a implantar a partir do portal do 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

Limpar os recursos

Se seguiu todos os passos deste cenário e utilizou a app para implementar os serviços Azure na sua conta, vá ao portal do Azure. Aí, cancele os serviços que não quer usar.

Se planeia criar o seu próprio projeto de deteção de objetos com Visão Personalizada, é melhor apagar o projeto de deteção de logotipo que criou neste tutorial. Uma subscrição gratuita para Visão Personalizada permite apenas dois projetos. Para eliminar o projeto de deteção de logotipo, no site Visão Personalizada, abra Projetos e, em seguida, selecione o ícone do lixo em My New Project.

Passos seguintes

Neste tutorial, você montou e explorou uma aplicação Xamarin.Forms em destaque que utiliza o serviço Visão Personalizada para detetar logotipos em imagens de câmaras móveis. Em seguida, aprenda as melhores práticas para construir um Visão Personalizada modelo para que quando criar uma para a sua própria app, possa torná-la poderosa e precisa.