Como criar um leitor óptico de caracteres usando a visão computacional angular e do Azure

Introdução

Neste artigo, criaremos um aplicativo de reconhecimento óptico de caracteres (OCR) usando Angular e o Serviço Cognitivo do Azure Computer Vision. O Computer Vision é um serviço de IA que analisa o conteúdo em imagens. Usaremos o recurso OCR do Computer Vision para detectar o texto impresso em uma imagem. O aplicativo extrairá o texto da imagem e detecta o idioma do texto. Atualmente, a API do OCR suporta 25 idiomas.

Pré-requisitos

Código fonte

Você pode obter o código-fonte em GitHub.

Usaremos um back-end do ASP.NET Core para este aplicativo. O back-end do ASP.NET Core fornece um processo de autenticação direta para acessar os serviços cognitivos do Azure. Isso também garantirá que o usuário final não tenha acesso direto aos serviços cognitivos.

Criar o recurso Serviço Cognitivo do Azure Computer Vision

Faça logon no portal do Azure e pesquise os serviços cognitivos na barra de pesquisa e clique no resultado. Consulte a imagem mostrada abaixo.

Na próxima tela, clique no botão Adicionar. Ele abrirá a página do mercado de serviços cognitivos. Procure o Computer Vision na barra de pesquisa e clique no resultado da pesquisa. Ele abrirá a página da API do Computer Vision. Clique no botão Criar para criar um novo recurso do Computer Vision. Consulte a imagem mostrada abaixo.

Na página Criar, preencha os detalhes conforme indicado abaixo.

• Nome: Forneça um nome exclusivo para o seu recurso.
• Inscrição: Selecione o tipo de assinatura no menu suspenso.
• Nível de preços: Selecione o nível de preços de acordo com sua escolha.
• Grupo de recursos: Selecione um grupo de recursos existente ou crie um novo.

Clique no botão Criar. Consulte a imagem mostrada abaixo.

Depois que seu recurso for implantado com sucesso, clique no botão “Ir para o recurso”. Você pode ver a Chave e o terminal do recurso recém-criado do Computer Vision. Consulte a imagem mostrada abaixo.

Anote a chave e o ponto final. Nós os usaremos na última parte deste artigo para invocar a API do OCR da Visão Computacional do Código .NET. Os valores são mascarados aqui para privacidade.

Criando o aplicativo ASP.NET Core

Abra o Visual Studio 2019 e clique em “Criar um novo projeto”. Uma caixa de diálogo “Criar um novo projeto” será aberta. Selecione “ASP.NET Core Web Application” e clique em Avançar. Agora você estará na tela “Configure your new project”, forneça o nome do seu aplicativo como ngComputerVision e clique em criar. Consulte a imagem mostrada abaixo.

Você será navegado para a tela “Criar um novo aplicativo Web ASP.NET Core”. Selecione “.NET Core” e “ASP.NET Core 3.1” nas listas suspensas na parte superior. Em seguida, selecione o modelo de projeto “Angular” e clique em Create. Consulte a imagem mostrada abaixo.

Isso criará nosso projeto. A estrutura de pastas do aplicativo é mostrada abaixo.

o ClientApp pasta contém o código angular para nosso aplicativo. As pastas Controladores conterão nossos controladores de API. Os componentes angulares estão presentes dentro do ClientAppsrcapp pasta. O modelo padrão contém alguns componentes angulares. Esses componentes não afetarão nosso aplicativo, mas por uma questão de simplicidade, excluiremos as pastas fetchdata e counter ClientApp/app/components pasta. Além disso, remova a referência para esses dois componentes do app.module.ts Arquivo.

Instalando a biblioteca da API do Computer Vision

Instalaremos a biblioteca da API do Azure Computer Vision, que fornecerá os modelos prontos para lidar com a resposta da API REST da Computer Vision. Para instalar o pacote, navegue até Ferramentas >> Gerenciador de Pacotes NuGet >> Console do Gerenciador de Pacotes. Ele abrirá o Console do Gerenciador de Pacotes. Execute o comando como mostrado abaixo.

Install-Package Microsoft.Azure.CognitiveServices.Vision.ComputerVision -Version 5.0.0

Você pode aprender mais sobre este pacote no site Galeria NuGet.

Crie os modelos

Clique com o botão direito do mouse no ngComputerVision projeto e selecione Adicionar >> Nova Pasta. Nomeie a pasta como Modelos. Novamente, clique com o botão direito do mouse na pasta Modelos e selecione Adicionar >> Classe para adicionar um novo arquivo de classe. Coloque o nome da sua turma como LanguageDetails.cs e clique em Adicionar.

Aberto LanguageDetails.cs e coloque o seguinte código dentro dele.

namespace ngComputerVision.Models{    public class LanguageDetails    {        public string Name { get; set; }        public string NativeName { get; set; }        public string Dir { get; set; }    }}

Da mesma forma, adicione um novo arquivo de classe AvailableLanguage.cs e coloque o seguinte código dentro dele.

using System.Collections.Generic;namespace ngComputerVision.Models{    public class AvailableLanguage    {        public Dictionary Translation { get; set; }    }}

Também adicionaremos duas classes como DTO (Data Transfer Object) para enviar dados de volta ao cliente.

Crie uma nova pasta e denomine DTOModels. Adicione o novo arquivo de classe AvailableLanguageDTO.cs na pasta DTOModels e coloque o seguinte código dentro dela.

namespace ngComputerVision.DTOModels{    public class AvailableLanguageDTO    {        public string LanguageID { get; set; }        public string LanguageName { get; set; }    }}

Adicione o OcrResultDTO.cs e coloque o seguinte código dentro dele.

namespace ngComputerVision.DTOModels{    public class OcrResultDTO    {        public string Language { get; set; }        public string DetectedText { get; set; }    }}

Adicionando o controlador OCR

Adicionaremos um novo controlador ao nosso aplicativo. Clique com o botão direito do mouse na pasta Controladores e selecione Adicionar >> Novo Item. Uma caixa de diálogo “Adicionar novo item” será aberta. Selecione “Visual C #” no painel esquerdo, selecione “API Controller Class” no painel de modelos e coloque o nome como OCRController.cs. Clique em Adicionar. Consulte a imagem abaixo.

o OCRController manipulará as solicitações de reconhecimento de imagem do aplicativo cliente. Este controlador também retornará a lista de todos os idiomas suportados pela API do OCR.

Abra o OCRController.cs e coloque o seguinte código dentro dele.

using System;using System.Threading.Tasks;using Microsoft.AspNetCore.Mvc;using System.Net.Http;using System.Net.Http.Headers;using Newtonsoft.Json.Linq;using System.IO;using Newtonsoft.Json;using System.Text;using ngComputerVision.Models;using System.Collections.Generic;using Microsoft.Azure.CognitiveServices.Vision.ComputerVision.Models;using ngComputerVision.DTOModels;namespace ngComputerVision.Controllers{    [Produces("application/json")]    [Route("api/[controller]")]    public class OCRController : Controller    {        static string subscriptionKey;        static string endpoint;        static string uriBase;        public OCRController()        {            subscriptionKey = "b993f3afb4e04119bd8ed37171d4ec71";            endpoint = "https://ankitocrdemo.cognitiveservices.azure.com/";            uriBase = endpoint + "vision/v2.1/ocr";        }        [HttpPost, DisableRequestSizeLimit]        public async Task Post()        {            StringBuilder sb = new StringBuilder();            OcrResultDTO ocrResultDTO = new OcrResultDTO();            try            {                if (Request.Form.Files.Count > 0)                {                    var file = Request.Form.Files[Request.Form.Files.Count - 1];                    if (file.Length > 0)                    {                        var memoryStream = new MemoryStream();                        file.CopyTo(memoryStream);                        byte[] imageFileBytes = memoryStream.ToArray();                        memoryStream.Flush();                        string JSONResult = await ReadTextFromStream(imageFileBytes);                        OcrResult ocrResult = JsonConvert.DeserializeObject(JSONResult);                        if (!ocrResult.Language.Equals("unk"))                        {                            foreach (OcrLine ocrLine in ocrResult.Regions[0].Lines)                            {                                foreach (OcrWord ocrWord in ocrLine.Words)                                {                                    sb.Append(ocrWord.Text);                                    sb.Append(' ');                                }                                sb.AppendLine();                            }                        }                        else                        {                            sb.Append("This language is not supported.");                        }                        ocrResultDTO.DetectedText = sb.ToString();                        ocrResultDTO.Language = ocrResult.Language;                    }                }                return ocrResultDTO;            }            catch            {                ocrResultDTO.DetectedText = "Error occurred. Try again";                ocrResultDTO.Language = "unk";                return ocrResultDTO;            }        }        static async Task ReadTextFromStream(byte[] byteData)        {            try            {                HttpClient client = new HttpClient();                client.DefaultRequestHeaders.Add("Ocp-Apim-Subscription-Key", subscriptionKey);                string requestParameters = "language=unk&detectOrientation=true";                string uri = uriBase + "?" + requestParameters;                HttpResponseMessage response;                using (ByteArrayContent content = new ByteArrayContent(byteData))                {                    content.Headers.ContentType = new MediaTypeHeaderValue("application/octet-stream");                    response = await client.PostAsync(uri, content);                }                string contentString = await response.Content.ReadAsStringAsync();                string result = JToken.Parse(contentString).ToString();                return result;            }            catch (Exception e)            {                return e.Message;            }        }        [HttpGet]        public async Task> GetAvailableLanguages()        {            string endpoint = "https://api.cognitive.microsofttranslator.com/languages?api-version=3.0&scope=translation";            var client = new HttpClient();            using (var request = new HttpRequestMessage())            {                request.Method = HttpMethod.Get;                request.RequestUri = new Uri(endpoint);                var response = await client.SendAsync(request).ConfigureAwait(false);                string result = await response.Content.ReadAsStringAsync();                AvailableLanguage deserializedOutput = JsonConvert.DeserializeObject(result);                List availableLanguage = new List();                foreach (KeyValuePair translation in deserializedOutput.Translation)                {                    AvailableLanguageDTO language = new AvailableLanguageDTO();                    language.LanguageID = translation.Key;                    language.LanguageName = translation.Value.Name;                    availableLanguage.Add(language);                }                return availableLanguage;            }        }    }}

No construtor da classe, inicializamos a chave e o URL do terminal para a API do OCR.

O método Post receberá os dados da imagem como uma coleção de arquivos no corpo da solicitação e retornará um objeto do tipo OcrResultDTO. Converteremos os dados da imagem em uma matriz de bytes e chamaremos o ReadTextFromStream método. Vamos desserializar a resposta em um objeto do tipo OcrResult. Em seguida, formaremos a frase iterando sobre o OcrWord objeto.

Dentro de ReadTextFromStream método, criaremos um novo HttpRequestMessage. Esta solicitação HTTP é uma solicitação Post. Passaremos a chave de inscrição no cabeçalho da solicitação. A API do OCR retornará um objeto JSON com cada palavra da imagem e o idioma detectado do texto.

o GetAvailableLanguages O método retornará a lista de todos os idiomas suportados pela API Translate Text. Definiremos o URI da solicitação e criaremos um HttpRequestMessage que será uma solicitação Get. Este URI de solicitação retornará um objeto JSON que será desserializado para um objeto do tipo AvailableLanguage.

Por que precisamos buscar a lista de idiomas suportados?

A API do OCR retorna o código do idioma (por exemplo, en para inglês, de para alemão etc.) do idioma detectado. Mas não podemos exibir o código do idioma na interface do usuário, pois não é fácil de usar. Portanto, precisamos de um dicionário para procurar o nome do idioma correspondente ao código do idioma.

A API de OCR do Azure Computer Vision suporta 25 idiomas. Para conhecer todos os idiomas suportados pela OCR API, consulte a lista de idiomas suportados. Esses idiomas são um subconjunto dos idiomas suportados pela API de texto do Azure Translate. Como não há um ponto de extremidade da API dedicado para buscar a lista de idiomas suportados pela API do OCR, portanto, estamos usando o ponto de extremidade da API Traduzir Texto para buscar a lista de idiomas. Criaremos o dicionário de pesquisa de idioma usando a resposta JSON desta chamada da API e filtraremos o resultado com base no código do idioma retornado pela API do OCR.

Trabalhando no lado do cliente do aplicativo

O código para o lado do cliente está disponível na pasta ClientApp. Usaremos a Angular CLI para trabalhar com o código do cliente.

O uso da CLI angular não é obrigatório. Estou usando o Angular CLI aqui, pois é fácil de usar e fácil de usar. Se você não quiser usar a CLI, poderá criar os arquivos para componentes e serviços manualmente.

Navegue até a pasta ngComputerVision ClientApp na sua máquina e abra uma janela de comando. Executaremos todos os nossos comandos da CLI angular nesta janela.

Crie os modelos do lado do cliente

Crie uma pasta chamada modelos dentro do ClientAppsrcapp pasta. Agora vamos criar um arquivo availablelanguage.ts na pasta de modelos. Coloque o seguinte código nele.

export class AvailableLanguage {    languageID: string;    languageName: string;}

Da mesma forma, crie outro arquivo dentro da pasta de modelos chamada ocrresult.ts. Coloque o seguinte código nele.

export class OcrResult {    language: string;    detectedText: string}

Você pode observar que essas duas classes têm a mesma definição que as classes DTO que criamos no lado do servidor. Isso nos permitirá vincular os dados retornados do servidor diretamente aos nossos modelos.

Crie o serviço Computervision

Criaremos um serviço Angular que chamará os pontos de extremidade da API da Web, converterá a resposta da API da Web em JSON e passará para o nosso componente. Execute o seguinte comando.

ng g s servicesComputervision

Este comando criará um nome de pasta como serviços e, em seguida, criará os dois arquivos a seguir.

• computervision.service.ts – o arquivo de classe de serviço.
• computervision.service.spec.ts – o arquivo de teste da unidade para serviço.

Aberto computervision.service.ts e coloque o seguinte código dentro dele.

import { Injectable } from '@angular/core';import { HttpClient } from '@angular/common/http';@Injectable({  providedIn: 'root'})export class ComputervisionService {  baseURL: string;  constructor(private http: HttpClient) {    this.baseURL = '/api/OCR';  }  getAvailableLanguage() {    return this.http.get(this.baseURL)      .pipe(response => {        return response;      });  }  getTextFromImage(image: FormData) {    return this.http.post(this.baseURL, image)      .pipe(response => {        return response;      });  }}

Definimos uma variável baseURL que manterá o URL do terminal de nossa API. Inicializaremos o baseURL no construtor e o definiremos no ponto final do OCRController.

o getAvailableLanguage O método enviará uma solicitação Get para o GetAvailableLanguages método do OCRController para buscar a lista de idiomas suportados para OCR.

o getTextFromImage O método enviará uma solicitação de postagem para o OCRController e forneça o parâmetro do tipo FormData. Ele buscará o texto detectado na imagem e no código do idioma do texto.

Crie o componente Ocr

Execute o seguinte comando no prompt de comando para criar o OcrComponent.

ng g c ocr --module app

o --module O sinalizador garantirá que esse componente seja registrado em app.module.ts.

Aberto ocr.component.html e coloque o seguinte código nele.

Optical Character Recognition (OCR) using Angular and Azure Computer Vision Cognitive Services
  
    {{ocrResult?.detectedText}}    
    
      
         Detected Language :      
      
              
    
  
  
    
          
        
{{status}}





    
          Extract Text      

Definimos uma área de texto para exibir o texto detectado e uma caixa de texto para exibir o idioma detectado. Definimos um controle de upload de arquivo que permitirá o upload de uma imagem. Após o upload da imagem, a visualização da imagem será exibida usando um elemento.

Aberto ocr.component.ts e coloque o seguinte código nele.

import { Component, OnInit } from '@angular/core';import { ComputervisionService } from '../services/computervision.service';import { AvailableLanguage } from '../models/availablelanguage';import { OcrResult } from '../models/ocrresult';@Component({  selector: 'app-ocr',  templateUrl: './ocr.component.html',  styleUrls: ['./ocr.component.css']})export class OcrComponent implements OnInit {  loading = false;  imageFile;  imagePreview;  imageData = new FormData();  availableLanguage: AvailableLanguage[];  DetectedTextLanguage: string;  ocrResult: OcrResult;  DefaultStatus: string;  status: string;  maxFileSize: number;  isValidFile = true;  constructor(private computervisionService: ComputervisionService) {    this.DefaultStatus = "Maximum size allowed for the image is 4 MB";    this.status = this.DefaultStatus;    this.maxFileSize = 4 * 1024 * 1024; // 4MB  }  ngOnInit() {    this.computervisionService.getAvailableLanguage().subscribe(      (result: AvailableLanguage[]) => this.availableLanguage = result    );  }  uploadImage(event) {    this.imageFile = event.target.files[0];    if (this.imageFile.size > this.maxFileSize) {      this.status = `The file size is ${this.imageFile.size} bytes, this is more than the allowed limit of ${this.maxFileSize} bytes.`;      this.isValidFile = false;    } else if (this.imageFile.type.indexOf('image') == -1) {      this.status = "Please upload a valid image file";      this.isValidFile = false;    } else {      const reader = new FileReader();      reader.readAsDataURL(event.target.files[0]);      reader.onload = () => {        this.imagePreview = reader.result;      };      this.status = this.DefaultStatus;      this.isValidFile = true;    }  }  GetText() {    if (this.isValidFile) {      this.loading = true;      this.imageData.append('imageFile', this.imageFile);      this.computervisionService.getTextFromImage(this.imageData).subscribe(        (result: OcrResult) => {          this.ocrResult = result;          if (this.availableLanguage.find(x => x.languageID === this.ocrResult.language)) {            this.DetectedTextLanguage = this.availableLanguage.find(x => x.languageID === this.ocrResult.language).languageName;          } else {            this.DetectedTextLanguage = "unknown";          }          this.loading = false;        });    }  }}

Vamos injetar o ComputervisionService no construtor do OcrComponent e defina uma mensagem e o valor para o tamanho máximo da imagem permitido dentro do construtor.

Vamos invocar o getAvailableLanguage método de nosso serviço no ngOnInit e armazene o resultado em uma matriz do tipo AvailableLanguage.

o uploadImage O método será chamado após o upload de uma imagem. Verificaremos se o arquivo enviado é uma imagem válida e dentro do limite de tamanho permitido. Processaremos os dados da imagem usando um FileReader objeto. o readAsDataURL O método lerá o conteúdo do arquivo carregado. Após a conclusão bem-sucedida da operação de leitura, o reader.onload evento será acionado. O valor de imagePreview será definido como o resultado retornado pelo objeto fileReader, que é do tipo ArrayBuffer.

Dentro de GetText método, anexaremos o arquivo de imagem a uma variável para o tipo FormData. Vamos invocar o getTextFromImage do serviço e vincule o resultado a um objeto do tipo OcrResult. Procuraremos o nome do idioma da matriz availableLanguage, com base no código do idioma retornado do serviço. Se o código do idioma não for encontrado, definiremos o idioma como desconhecido.

Adicionaremos o estilo para a área de texto em ocr.component.css como mostrado abaixo.

.preview-image {    max-height: 300px;    max-width: 300px;}.image-container{  display: flex;  padding: 15px;  align-content: center;  align-items: center;  justify-content: center;  border: 2px dashed skyblue;}

Adicionaremos os links de navegação para nossos componentes no menu de navegação. Aberto nav-menu.component.html e remova os links dos componentes de dados Contador e Buscar. Adicione as seguintes linhas na lista de links de navegação.

 Computer Vision

Demonstração de execução

Pressione F5 para iniciar o aplicativo. Clique no botão Computer Vision no menu de navegação na parte superior. Você pode fazer upload de uma imagem e extrair o texto da imagem, como mostrado na imagem abaixo.

Sumário

Criamos um aplicativo de reconhecimento óptico de caracteres (OCR) usando Angular e o Serviço Cognitivo do Azure do Computer Vision. O aplicativo é capaz de extrair o texto impresso da imagem carregada e reconhece o idioma do texto. A API OCR do Computer Vision é usada para reconhecer texto em 25 idiomas.

Acabei de lançar um e-book gratuito sobre Angular e Firebase. Você pode baixar o livro gratuito em Crie um aplicativo Web de pilha completa usando Angular e Firebase

Veja também

---