App Xamarin.Forms para obter textos manuscritos de uma imagem utilizando Microsoft Cognitive Services

Olá, neste post irei demonstrar como criar uma aplicação Xamarin.Forms para analisar uma imagem e extrair textos manuscritos utilizando a API de Pesquisa Visual Computacional dos Serviços Cognitivos da Microsoft.

O reconhecimento de texto manuscrito economiza tempo e esforço e pode torná-lo mais produtivo ao permitir que você extraia textos de uma imagem em vez de ter que transcrevê-los.

Esta API permite a detecção de textos manuscritos  a partir de fotos de anotações, cartas, dissertações, quadros brancos, formulários, etc. Ela funciona em diferentes superfícies e telas de fundo.

Vale ressaltar que no momento em que escrevo este post, essa funcionalidade de detecção de textos manuscritos encontra-se em versão Preview e em sua documentação consta que ainda possui algumas dificuldades para detectar textos que não estejam em inglês.

Para se aprofundar mais no assunto e conhecer outros serviços cognitivos da Microsoft acesse o link: https://azure.microsoft.com/pt-br/services/cognitive-services/computer-vision.

Para este exemplo irei assumir que você já criou uma aplicação Xamarin.Forms e utilizou o Nuget Package Xam.Plugin.Media para capturar uma foto da câmera. Se você possui dúvidas sobre isso, recomendo ler o post: Utilizando a Câmera – Xamarin.Forms, lá eu explico passo a passo como utilizar o plugin para tirar fotos em aplicações Xamarin.Forms.

 

 

OBTENDO CHAVES

É necessário obter uma URL e Chaves para utilizar a API da Pesquisa Visual Computacional, então o primeiro passo é acessar o link:  https://azure.microsoft.com/pt-br/try/cognitive-services/e clicar em “Obter Chave de API”.

1

 

Em seguida será necessário realizar login com uma conta Microsoft.
Para este exemplo estou utilizando minha conta e os serviços disponibilizados gratuitamente por 30 dias. (Após esse período essas chaves serão desativadas).

2

 

Agora que você já possui sua URL e as chaves para utilizar a API, recomendo que guarde essas informações.

 

ADICIONANDO NUGET PACKAGES

Clique com o botão direito em cima de sua Solution e selecione “Manage NuGet Packages for Solution…”.

3

 

Digite “Microsoft.ProjectOxford.Vision” e selecione o plugin como demonstrado na imagem a seguir.

4

 

Selecione apenas o projeto compartilhado e clique no botão “Install”.

4

 

Depois repita esses passos para instalar os seguintes pacotes:

  • Microsoft.ProjectOxford.Common.DotNetStandard
  • Newtonsoft.Json

 

 

C#

Crie uma variável do tipo IVisionServiceClient e uma String chamada url. Observe que ambos estão sendo inicializados no construtor. Substitua “URL” pela sua url e “Key” por uma de suas chaves obtidas no passo anterior “Obtendo Chaves”.

5

 

Crie um método chamado “TakePicture” como demonstrado no post Utilizando a Câmera – Xamarin.Forms, ele será responsável por tirar a foto.  Em seguida adicione uma chamada para o método CreateHandwriting passando como parâmetro o endereço da foto tirada.

6

 

Crie o método CreateHandwriting, realize a chamada para o CreateHandwritingRecognitionOperationAsync passando como parâmetro um Stream da foto e por último atribua a url de resultado (result.Url) na variável url que foi criada anteriormente.

7

 

Em seguida, volte para o método TakePicture e insira uma chamada para o método GetHandwriting passando como parâmetro a variável url, esse método será responsável por pegar o resultado da análise feita pela API.

8

 

No método GetHandwriting instancie um HandwritingRecognitionOperation e atribua o parâmetro do método (url) na propriedade url do mesmo.

Em seguida realize a chamada para GetHandwritingRecognitionOperationResultAsync passando como parâmetro a variável operation.

Observe que por ultimo é atribuído o texto identificado a Label chamada “Resultado”.

9

 

Código Completo

using System;
using System.Collections.Generic;
using System.IO;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using Microsoft.ProjectOxford.Vision;
using Microsoft.ProjectOxford.Vision.Contract;
using Plugin.Media;
using Plugin.Media.Abstractions;
using Xamarin.Forms;
namespace DemoHandwritingText
{
public partial class MainPage : ContentPage
{
private readonly IVisionServiceClient _visionServiceClient;
private string url = "";
public MainPage()
{
InitializeComponent();
_visionServiceClient = new VisionServiceClient("KEY", "URL");
}
private async void TakePicture(object sender, EventArgs e)
{
await CrossMedia.Current.Initialize();
if (!CrossMedia.Current.IsTakePhotoSupported || !CrossMedia.Current.IsCameraAvailable)
{
await DisplayAlert("Ops", "Nenhuma câmera detectada.", "OK");
return;
}
var file = await CrossMedia.Current.TakePhotoAsync(
new StoreCameraMediaOptions
{
SaveToAlbum = false,
Directory = "Demo",
PhotoSize = PhotoSize.Medium
});
if (file == null)
return;
await CreateHandwriting(file.AlbumPath);
MinhaImagem.Source = ImageSource.FromStream(() =>
{
var stream = file.GetStream();
file.Dispose();
return stream;
});
await GetHandwriting(url);
}
public async Task CreateHandwriting(string image)
{
// Call the Vision API.
try
{
using (Stream imageFileStream = File.OpenRead(image))
{
var result = await _visionServiceClient.CreateHandwritingRecognitionOperationAsync(imageFileStream);
url = result.Url;
}
}
// Catch and display Vision API errors.
catch (ClientException c)
{
await DisplayAlert("Error", c.Message, "ok");
}
// Catch and display all other errors.
catch (Exception e)
{
await DisplayAlert("Error", e.Message, "ok");
}
}
public async Task GetHandwriting(string text)
{
HandwritingRecognitionOperation operation = new HandwritingRecognitionOperation();
operation.Url = text;
Resultado.Text = "";
// Call the Vision API.
try
{
var result = await _visionServiceClient.GetHandwritingRecognitionOperationResultAsync(operation);
foreach (var line in result.RecognitionResult.Lines)
{
foreach (var word in line.Words)
{
Resultado.Text += word.Text + " ";
}
}
}
// Catch and display Vision API errors.
catch (ClientException c)
{
await DisplayAlert("Error", c.Message, "ok");
}
// Catch and display all other errors.
catch (Exception e)
{
await DisplayAlert("Error", e.Message, "ok");
}
}
}
}
view raw MainPage.xaml.cs hosted with ❤ by GitHub

 

 

Xaml

Crie uma Image para adicionar a foto tirada, um Button para chamar o método TakePicture quando clicado e uma Label para demonstrar o texto identificado na foto.

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:local="clr-namespace:DemoHandwritingText"
x:Class="DemoHandwritingText.MainPage">
<ScrollView>
<StackLayout>
<StackLayout Orientation="Horizontal"
HorizontalOptions="Center"
VerticalOptions="Center">
<Image x:Name="MinhaImagem" Aspect="AspectFill" HeightRequest="200"
WidthRequest="400" HorizontalOptions="CenterAndExpand" />
</StackLayout>
<Button Clicked="TakePicture" Text="Foto"></Button>
<Label x:Name="Resultado" FontAttributes="Bold" FontSize="20"
HorizontalOptions="CenterAndExpand"/>
</StackLayout>
</ScrollView>
</ContentPage>
view raw MainPage.xaml hosted with ❤ by GitHub

 

 

Resultado

ezgif.com-gif-maker (7)

 

Esse e todos os exemplos deste blog encontram-se disponíveis no GitHub.

icongithub


Leia mais sobre esse assunto na documentação oficial da Microsoft.

Deixe um comentário

Preencha os seus dados abaixo ou clique em um ícone para log in:

Logotipo do WordPress.com

Você está comentando utilizando sua conta WordPress.com. Sair /  Alterar )

Foto do Google

Você está comentando utilizando sua conta Google. Sair /  Alterar )

Imagem do Twitter

Você está comentando utilizando sua conta Twitter. Sair /  Alterar )

Foto do Facebook

Você está comentando utilizando sua conta Facebook. Sair /  Alterar )

Conectando a %s