Início Rápido: Reconhecer tinta digital com a API REST de Reconhecimento de Tinta Digital e JavaScript

Artigo
08/24/2020

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.

uma imagem de um texto manuscrito

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 chamada openFile() que abre um Explorador de Arquivos para que você possa selecionar o arquivo JSON. Ao clicar no botão Recognize ink, ele chama essa função e começa a ler o arquivo.

Use a função onload() do objeto FileReader 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. Use JSON.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]);
};

Enviar solicitação à API de Reconhecimento de Tinta Digital

Dentro da marca <script>, crie uma função chamada recognizeInk(). 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 configure content-type como application/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

Referência da API REST

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:

Share via