Quickstart: Reconhecer tinta digital com a API do Reconhecimento de Tinta e JavaScript

  • Artigo

Nota

A API do Reconhecimento de Tinta terminou a sua pré-estreia no dia 26 de agosto de 2020. Se tiver os recursos existentes do Ink Recogniser, pode continuar a usá-los até que o serviço seja totalmente reformado a 31 de janeiro de 2021.

Utilize este arranque rápido para começar a utilizar a API do Reconhecimento de Tinta em traços de tinta digitais. Esta aplicação JavaScript envia um pedido de API contendo dados de traçado de tinta com formato JSON e apresenta a resposta.

Embora esta aplicação esteja escrita em Javascript e seja executado no seu navegador web, a API é um serviço web RESTful compatível com a maioria das linguagens de programação.

Normalmente, você chamaria a API de uma aplicação digital de tinta. Este quickstart envia dados de traçado de tinta para a seguinte amostra manuscrita a partir de um ficheiro JSON.

uma imagem de texto manuscrito

O código-fonte para este arranque rápido pode ser encontrado no GitHub.

Pré-requisitos

  • Um navegador web
  • Os dados de traçado de tinta de exemplo para este arranque rápido podem ser encontrados no GitHub.

Criar um recurso de Reconhecimento de Tinta

Nota

Os pontos finais para recursos criados após 1 de julho de 2019 utilizam o formato de subdomínio personalizado apresentado abaixo. Para mais informações e uma lista completa de pontos finais regionais, consulte os nomes de subdomínio personalizados para Serviços Cognitivos.

Os Serviços Cognitivos Azure são representados por recursos Azure que subscreve. Crie um recurso para o Reconhecimento de Tinta utilizando o portal do Azure.

Depois de criar um recurso, obtenha o seu ponto final e a chave abrindo o seu recurso no portal do Azure e clicando em início rápido.

Criar duas variáveis ambientais:

  • INK_RECOGNITION_SUBSCRIPTION_KEY - A chave de subscrição para autenticar os seus pedidos.

  • INK_RECOGNITION_ENDPOINT - O ponto final do seu recurso. Terá o seguinte aspeto:
    https://<your-custom-subdomain>.api.cognitive.microsoft.com

Criar uma nova aplicação

  1. No seu IDE ou editor favorito, crie um novo .html arquivo. Em seguida, adicione HTML básico para o código que adicionaremos mais tarde.

    <!DOCTYPE html>
<html>

    <head>
        <script type="text/javascript">
        </script>
    </head>

    <body>
    </body>

</html>

  2. Dentro da <body> etiqueta, adicione o seguinte html:

    1. Duas áreas de texto para exibir o pedido e resposta do JSON.
    2. Um botão para chamar a recognizeInk() função que será criada mais tarde.
    <!-- <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>-->

Carregue os dados JSON exemplo

  1. Dentro da <script> etiqueta, crie uma variável para a amostraJson. Em seguida, crie uma função JavaScript chamada openFile() que abre um explorador de ficheiros para que possa selecionar o seu ficheiro JSON. Quando o Recognize ink botão estiver clicado, chamará esta função e começará a ler o ficheiro.

  2. Utilize a função de onload() um FileReader objeto para processar o ficheiro de forma assíncronea.

    1. Substitua qualquer \n ou \r caracteres no ficheiro por uma corda vazia.
    2. Utilizar JSON.parse() para converter o texto em JSON válido
    3. Atualize a request caixa de texto na aplicação. Use JSON.stringify() para formatar a cadeia 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]);
};

Envie um pedido à API do Reconhecimento de Tinta

  1. Dentro da <script> etiqueta, crie uma função chamada recognizeInk(). Esta função irá mais tarde ligar para a API e atualizar a página com a resposta. Adicione o código dos seguintes passos dentro desta função.

    function recognizeInk() {
// add the code from the below steps here 
}

    1. Crie variáveis para o url do seu ponto final, chave de subscrição e a amostra JSON. Em seguida, crie um XMLHttpRequest objeto para enviar o pedido da 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();

    2. Crie a função de retorno para o XMLHttpRequest objeto. Esta função analisará a resposta da API a partir de um pedido bem sucedido e exibi-la-á na aplicação.

      function returnFunction(xhttp) {
    var response = JSON.parse(xhttp.responseText);
    console.log("Response: %s ", response);
    document.getElementById('response').innerHTML = JSON.stringify(response, null, 2);
}

    3. Crie a função de erro para o objeto pedido. Esta função regista o erro na consola.

      function errorFunction() {
    console.log("Error: %s, Detail: %s", xhttp.status, xhttp.responseText);
}

    4. Crie uma função para a propriedade do objeto de onreadystatechange pedido. Quando o estado de prontidão do objeto de pedido mudar, as funções de devolução e erro acima serão aplicadas.

      xhttp.onreadystatechange = function () {
    if (this.readyState === 4) {
        if (this.status === 200) {
            returnFunction(xhttp);
        } else {
            errorFunction(xhttp);
        }
    }
};

    5. Envie o pedido da API. Adicione a chave de subscrição ao Ocp-Apim-Subscription-Key cabeçalho, e desemote o content-typeapplication/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 a aplicação e ver a resposta

Esta aplicação pode ser executada dentro do seu navegador web. Uma resposta bem sucedida é devolvida no formato JSON. Também pode encontrar a resposta JSON no GitHub:

Passos seguintes

Referência da API REST

Para ver como funciona a API de Reconhecimento de Tinta numa aplicação digital de tinta, veja as seguintes aplicações de amostra no GitHub: