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”.
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).
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…”.
Digite “Microsoft.ProjectOxford.Vision” e selecione o plugin como demonstrado na imagem a seguir.
Selecione apenas o projeto compartilhado e clique no botão “Install”.
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”.
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.
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.
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.
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”.
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"); | |
| } | |
| } | |
| } | |
| } |
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> |
Resultado
Esse e todos os exemplos deste blog encontram-se disponíveis no GitHub.
Leia mais sobre esse assunto na documentação oficial da Microsoft.
Juliano Custódio 