Démarrage rapide : Reconnaître l’encre numérique avec l’API REST Ink Recognizer et JavaScript

  • Article

Notes

La préversion de l’API Ink Recognizer a pris fin le 26 août 2020. Si vous avez des ressources Ink Recognizer, vous pouvez continuer à les utiliser jusqu’au retrait total du service le 31 janvier 2021.

Utilisez ce guide de démarrage rapide pour commencer à appliquer l’API Ink Recognizer aux traits d’encre numérique. Cette application JavaScript envoie une requête d’API contenant des données de trait d’encre au format JSON, puis affiche la réponse.

Alors que cette application est écrite en JavaScript et s’exécute dans votre navigateur web, l’API est un service web RESTful compatible avec la plupart des langages de programmation.

En règle générale, vous appelez l’API à partir d’une application d’écriture manuscrite numérique. Ce guide de démarrage rapide envoie des données de trait d’encre pour l’exemple d’écriture manuscrite suivant à partir d’un fichier JSON.

une image de texte manuscrit

Le code source de ce guide de démarrage rapide est disponible sur GitHub.

Prérequis

  • Un navigateur web
  • Vous trouverez l’exemple de données de trait d’encre utilisé dans ce guide de démarrage rapide sur GitHub.

Créer une ressource Ink Recognizer

Notes

Les points de terminaison pour les ressources créées après le 1er juillet 2019 utilisent le format de sous-domaine personnalisé indiqué ci-dessous. Pour obtenir plus d’informations et une liste complète des points de terminaison régionaux, consultez Noms de sous-domaines personnalisés pour Cognitive Services.

Les services Azure Cognitive Services sont représentés par des ressources Azure auxquelles vous vous abonnez. Créez une ressource pour Ink Recognizer à l’aide du portail Azure.

Après avoir créé une ressource, obtenez votre point de terminaison et votre clé en ouvrant votre ressource dans le portail Azure puis en cliquant sur Démarrage rapide.

Créez deux variables d’environnement :

  • INK_RECOGNITION_SUBSCRIPTION_KEY : la clé d’abonnement pour l’authentification de vos requêtes.

  • INK_RECOGNITION_ENDPOINT : le point de terminaison de votre ressource. Il se présente comme suit :
    https://<your-custom-subdomain>.api.cognitive.microsoft.com

Créer une application

  1. Créez un fichier .html dans l’éditeur ou l’IDE de votre choix. Puis ajoutez du HTML de base pour le code que nous ajouterons plus tard.

    <!DOCTYPE html>
<html>

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

    <body>
    </body>

</html>

  2. Dans la balise <body>, ajoutez le code suivant :

    1. Deux zones de texte pour l’affichage de la requête JSON et la réponse.
    2. Un bouton pour appeler la fonction recognizeInk() qui est créée ultérieurement.
    <!-- <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>-->

Charger l’exemple de données JSON

  1. Dans la balise <script>, créez une variable pour sampleJson. Puis créez une fonction JavaScript nommée openFile() qui ouvre un Explorateur de fichiers pour vous permettre de sélectionner votre fichier JSON. Lorsque le bouton Recognize ink est activé, il appelle cette fonction et commence la lecture du fichier.

  2. Utilisez la fonction onload() d’un objet FileReader pour traiter le fichier de façon asynchrone.

    1. Remplacer les caractères \n ou \r dans le fichier par une chaîne vide.
    2. Utilisez JSON.parse() pour convertir le texte en JSON valide
    3. Mettez à jour la zone de texte request dans l’application. Utilisez JSON.stringify() pour formater la chaîne 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]);
};

Envoyer une requête à l’API Ink Recognizer

  1. Au sein de la balise <script>, créez une fonction nommée recognizeInk(). Cette fonction appellera ultérieurement l’API et mettra à jour la page avec la réponse. Ajoutez le code à partir des étapes suivantes dans cette fonction.

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

    1. Créez des variables pour votre URL de point de terminaison, clé d’abonnement et exemple JSON. Créez ensuite un objet XMLHttpRequest pour envoyer la requête d’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. Créez la fonction return pour l’objet XMLHttpRequest. Cette fonction analysera la réponse de l’API à partir d’une requête réussie et l’affichera dans l’application.

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

    3. Créez la fonction error pour l’objet request. Cette fonction journalise l’erreur dans la console.

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

    4. Créez une fonction pour la propriété onreadystatechange de l’objet de la requête. Lors du changement de l’état de préparation de l’objet de la requête, les fonctions return et error précédentes seront appliquées.

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

    5. Envoyez la requête d’API. Ajoutez votre clé d’abonnement à l’en-tête Ocp-Apim-Subscription-Key, puis définissez le content-type sur 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));
};

Exécuter l’application et afficher la réponse

Cette application peut être exécutée au sein de votre navigateur web. Une réponse correcte est retournée au format JSON. Vous pouvez également trouver la réponse JSON sur GitHub:

Étapes suivantes

Référence d’API REST

Pour observer le fonctionnement de l’API Ink Recognizer dans une application d’écriture manuscrite numérique, examinez les exemples d’applications suivants sur GitHub :