Início Rápido: Reconhecer tinta digital com a API REST de Reconhecimento de Tinta Digital e JavaScript
Observação
A API do Reconhecimento de Tinta Digital encerrou a versão prévia em 26 de agosto de 2020. Se você tiver recursos existentes do Reconhecimento de Tinta Digital, poderá continuar a usá-los até que o serviço seja totalmente desativado em 31 de janeiro de 2021.
Use este início rápido para começar a usar a API de Reconhecimento de Tinta Digital em traços de tinta digital. Este aplicativo JavaScript envia uma solicitação de API que contém dados do traço de tinta formatados em JSON e exibe a resposta.
Embora o aplicativo seja escrito em Javascript e executado no navegador da Web, a API é um serviço Web RESTful compatível com a maioria das linguagens de programação.
Normalmente, você chamará a API em um aplicativo de escrita à tinta digital. Este início rápido envia dados de traço de tinta para a amostra manuscrita a seguir de um arquivo JSON.
O código-fonte deste Início Rápido pode ser encontrado no GitHub.
Pré-requisitos
- Um navegador da Web
- Os dados de traço de tinta de exemplo deste início rápido podem ser encontrados no GitHub.
Criar um recurso do Reconhecimento de Tinta Digital
Observação
Pontos de extremidade para recursos criados após 1º de julho de 2019, use o formato de subdomínio personalizado mostrado abaixo. Para saber mais e para obter uma lista completa de pontos de extremidade regionais, confira Nomes de subdomínio personalizados para Serviços Cognitivos.
Os Serviços Cognitivos do Azure são representados por recursos do Azure que você assina. Crie um recurso para o Reconhecimento de Tinta Digital usando o portal do Azure.
Depois de criar um recurso, obtenha o ponto de extremidade e a chave abrindo o recurso no portal do Azure e clicando em Início rápido.
Criar duas variáveis de ambiente:
INK_RECOGNITION_SUBSCRIPTION_KEY
– A chave de assinatura para autenticar suas solicitações.INK_RECOGNITION_ENDPOINT
– O ponto de extremidade para seu recurso. Ele terá esta aparência:
https://<your-custom-subdomain>.api.cognitive.microsoft.com
Crie um novo aplicativo
Em seu IDE ou editor favorito, crie um arquivo novo do
.html
. Em seguida, adicione HTML básico para o código que vamos adicionar mais tarde.<!DOCTYPE html> <html> <head> <script type="text/javascript"> </script> </head> <body> </body> </html>
Dentro da marca
<body>
, adicione o seguinte HTML:- Duas áreas de texto para exibir a solicitação e a resposta de JSON.
- Um botão para chamar a função
recognizeInk()
a ser criada posteriormente.
<!-- <body>--> <h2>Send a request to the Ink Recognition API</h2> <p>Request:</p> <textarea id="request" style="width:800px;height:300px"></textarea> <p>Response:</p> <textarea id="response" style="width:800px;height:300px"></textarea> <br> <button type="button" onclick="recognizeInk()">Recognize Ink</button> <!--</body>-->
Carregar o dados JSON de exemplo
Dentro da marca
<script>
, crie uma variável para o sampleJson. Em seguida, crie uma função JavaScript chamadaopenFile()
que abre um Explorador de Arquivos para que você possa selecionar o arquivo JSON. Ao clicar no botãoRecognize ink
, ele chama essa função e começa a ler o arquivo.Use a função
onload()
do objetoFileReader
para processar o arquivo de forma assíncrona.- Substituir
\n
ou\r
caracteres no arquivo por uma cadeia de caracteres vazia. - Usar
JSON.parse()
para converter o texto JSON válido - Atualize a caixa de texto
request
no aplicativo. UseJSON.stringify()
para formatar a cadeia de caracteres JSON.
var sampleJson = ""; function openFile(event) { var input = event.target; var reader = new FileReader(); reader.onload = function(){ sampleJson = reader.result.replace(/(\\r\\n|\\n|\\r)/gm, ""); sampleJson = JSON.parse(sampleJson); document.getElementById('request').innerHTML = JSON.stringify(sampleJson, null, 2); }; reader.readAsText(input.files[0]); };
- Substituir
Enviar solicitação à API de Reconhecimento de Tinta Digital
Dentro da marca
<script>
, crie uma função chamadarecognizeInk()
. Depois essa função chamará a API e atualizará a página com a resposta. Adicione o código das etapas a seguir nessa função.function recognizeInk() { // add the code from the below steps here }
Crie variáveis para a URL do ponto de extremidade, a chave de assinatura e JSON de exemplo. Em seguida, crie um objeto
XMLHttpRequest
para enviar a solicitação de API.// Replace the below URL with the correct one for your subscription. // Your endpoint can be found in the Azure portal. For example: "https://<your-custom-subdomain>.cognitiveservices.azure.com"; var SERVER_ADDRESS = process.env["INK_RECOGNITION_ENDPOINT"]; var ENDPOINT_URL = SERVER_ADDRESS + "/inkrecognizer/v1.0-preview/recognize"; var SUBSCRIPTION_KEY = process.env["INK_RECOGNITION_SUBSCRIPTION_KEY"]; var xhttp = new XMLHttpRequest();
Crie a função de retorno para o objeto
XMLHttpRequest
. Essa função analisa a resposta de API a uma solicitação bem-sucedida e a exibe no aplicativo.function returnFunction(xhttp) { var response = JSON.parse(xhttp.responseText); console.log("Response: %s ", response); document.getElementById('response').innerHTML = JSON.stringify(response, null, 2); }
Crie a função de erro do objeto da solicitação. Essa função registra o erro no console.
function errorFunction() { console.log("Error: %s, Detail: %s", xhttp.status, xhttp.responseText); }
Crie uma função para a propriedade
onreadystatechange
do objeto da solicitação. Quando o estado de prontidão do objeto da solicitação for alterado, as funções de erro e retorno acima serão aplicadas.xhttp.onreadystatechange = function () { if (this.readyState === 4) { if (this.status === 200) { returnFunction(xhttp); } else { errorFunction(xhttp); } } };
Envie a solicitação da API. Adicione a chave de assinatura ao cabeçalho
Ocp-Apim-Subscription-Key
e configurecontent-type
comoapplication/json
xhttp.open("PUT", ENDPOINT_URL, true); xhttp.setRequestHeader("Ocp-Apim-Subscription-Key", SUBSCRIPTION_KEY); xhttp.setRequestHeader("content-type", "application/json"); xhttp.send(JSON.stringify(sampleJson)); };
Executar o aplicativo e exibir a resposta
É possível executar este aplicativo no navegador da Web. Uma resposta bem-sucedida é retornada no formato JSON. Você também pode encontrar a resposta JSON no GitHub:
Próximas etapas
Para ver como a API do Reconhecimento de Tinta Digital funciona em um aplicativo de escrita à tinta digital, vejamos os seguintes aplicativos de exemplo no GitHub: