Inicio rápido: Reconocimiento de la entrada de lápiz digital con la API REST Ink Recognizer y JavaScript

Artículo
08/24/2020

Nota

La API Ink Recognizer ha finalizado su versión preliminar el 26 de agosto de 2020. Si tiene recursos existentes de Ink Recognizer, puede seguir utilizándolos hasta que el servicio se retire completamente, el 31 de enero de 2021.

Use este inicio rápido para empezar a usar la API Ink Recognizer en trazos de entrada de lápiz digital. Esta aplicación de JavaScript envía una solicitud de API que contiene los datos del trazo de tinta con formato JSON y muestra la respuesta.

Si bien esta aplicación está escrita en JavaScript y se ejecuta en el explorador web, la API es un servicio web RESTful compatible con la mayoría de los lenguajes de programación.

Normalmente se llamaría a la API desde una aplicación de entrada de lápiz digital. En este inicio rápido se envían los datos del trazo de entrada de lápiz digital para la siguiente muestra escrita a mano desde un archivo JSON.

imagen de un texto manuscrito

El código fuente de este inicio rápido está disponible en GitHub.

Requisitos previos

Un explorador web
Los datos de trazo de entrada de lápiz para este inicio rápido se pueden encontrar en GitHub.

Creación de un recurso de Ink Recognizer

Nota

Los puntos de conexión de los recursos creados después del 1 de julio de 2019 usan el formato de subdominio personalizado que se muestra a continuación. Para más información y para obtener una lista completa de los puntos de conexión regionales, consulte Nombres de subdominios personalizados para Cognitive Services.

Los servicios de Azure Cognitive Services se representan por medio de recursos de Azure a los que se suscribe. Cree un recurso para Ink Recognizer mediante Azure Portal.

Después de crear un recurso, obtenga el punto de conexión y la clave; para ello, abra el recurso en Azure Portal y haga clic en Inicio rápido.

Cree dos variables de entorno:

INK_RECOGNITION_SUBSCRIPTION_KEY: la clave de suscripción para autenticar las solicitudes.
INK_RECOGNITION_ENDPOINT: el punto de conexión del recurso. Tendrá el siguiente aspecto:
https://<your-custom-subdomain>.api.cognitive.microsoft.com

Creación de una aplicación

En su IDE o editor favoritos, cree un archivo .html. A continuación, agréguele HTML básico para el código que se agregará más adelante.
```
<!DOCTYPE html>
<html>

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

    <body>
    </body>

</html>
```

Dentro de la etiqueta <body>, agregue el siguiente HTML:

Dos áreas de texto para mostrar la solicitud JSON y la respuesta.
Un botón para llamar a la función recognizeInk() que se creará más adelante.

<!-- <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>-->

Carga de los datos JSON de ejemplo

Dentro de la etiqueta <script>, cree una variable para el archivo JSON de muestra. A continuación, cree una función de JavaScript denominada openFile() que abre un explorador de archivos para que pueda seleccionar el archivo JSON. Cuando se hace clic en el botón Recognize ink, se llama a esta función y se empieza a leer el archivo.

Use una función onload() del objeto FileReader para procesar el archivo de forma asincrónica.

Reemplace cualquier carácter \n o \r en el archivo con una cadena vacía.
Use JSON.parse() para convertir el texto en un archivo JSON válido.
Actualice el cuadro de texto request de la aplicación. Use JSON.stringify() para dar formato a la cadena 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]);
};

Envíe una solicitud a la API Ink Recognizer

Dentro de la etiqueta <script>, cree una función denominada recognizeInk(). Esta función más adelante llamará a la API y actualizará la página con la respuesta. Agregue el código de los pasos siguientes dentro de esta función.

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

Cree variables para la dirección URL del punto de conexión, la clave de suscripción y el archivo JSON de muestra. A continuación, cree un objeto XMLHttpRequest para enviar la solicitud 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();

Cree la función de devolución para el objeto XMLHttpRequest. Esta función analizará la respuesta de API desde una solicitud correcta y la mostrará en la aplicación.

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

Cree la función de error para el objeto de solicitud. Esta función registra el error en la consola.

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

Cree una función para la propiedad onreadystatechange del objeto de solicitud. Cuando el estado de preparación del objeto de solicitud cambie, se aplicarán las funciones de valor devuelto y de error anteriores.

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

Envíe la solicitud API. Agregue la clave de suscripción al encabezado Ocp-Apim-Subscription-Key y establezca content-type en 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));
};

Ejecución de la aplicación y visualización de la respuesta

Esta aplicación se puede ejecutar dentro del explorador web. Se devuelve una respuesta correcta en formato JSON. También puede encontrar la respuesta JSON en GitHub:

Pasos siguientes

Referencia de API de REST

Para ver el funcionamiento de la API Ink Recognition en una aplicación de entrada de lápiz digital, eche un vistazo a las siguientes aplicaciones de ejemplo en GitHub: