Szybki start: rozpoznawanie cyfrowego pisma odręcznego przy użyciu interfejsu API REST rozpoznawania pisma odręcznego i języka JavaScript

Artykuł
08/24/2020

Uwaga

Interfejs API rozpoznawania pisma odręcznego zakończył swoją wersję zapoznawcza 26 sierpnia 2020 r. Jeśli masz istniejące zasoby rozpoznawania pisma odręcznego, możesz nadal z nich korzystać, dopóki usługa nie zostanie w pełni wycofana 31 stycznia 2021 r.

Użyj tego przewodnika Szybki start, aby rozpocząć korzystanie z interfejsu API rozpoznawania pisma odręcznego na cyfrowych pociągnięciach pisma odręcznego. Ta aplikacja JavaScript wysyła żądanie interfejsu API zawierające dane pociągnięcia pisma odwrotowego w formacie JSON i wyświetla odpowiedź.

Chociaż ta aplikacja jest napisana w języku JavaScript i działa w przeglądarce internetowej, interfejs API jest usługą internetową RESTful zgodną z większością języków programowania.

Zazwyczaj interfejs API jest wywoływany z cyfrowej aplikacji pisma odręcznego. Ten przewodnik Szybki start wysyła dane pociągnięcia pisma odręcznego dla następującego przykładu odręcznego z pliku JSON.

obraz tekstu odręcznego

Kod źródłowy tego przewodnika Szybki start można znaleźć w witrynie GitHub.

Wymagania wstępne

Przeglądarka internetowa
Przykładowe dane pociągnięcia pisma oddyskowego dla tego przewodnika Szybki start można znaleźć w witrynie GitHub.

Tworzenie zasobu rozpoznawania pisma odręcznego

Uwaga

Punkty końcowe dla zasobów utworzonych po 1 lipca 2019 r. używają niestandardowego formatu poddomeny pokazanego poniżej. Aby uzyskać więcej informacji i pełną listę regionalnych punktów końcowych, zobacz Niestandardowe nazwy poddomeny dla usług Cognitive Services.

Usługi Azure Cognitive Services są reprezentowane przez subskrybowane zasoby platformy Azure. Utwórz zasób rozpoznawania pisma odręcznego przy użyciu Azure Portal.

Po utworzeniu zasobu pobierz punkt końcowy i klucz, otwierając zasób na Azure Portal i klikając pozycję Szybki start.

Utwórz dwie zmienne środowiskowe:

INK_RECOGNITION_SUBSCRIPTION_KEY — Klucz subskrypcji do uwierzytelniania żądań.
INK_RECOGNITION_ENDPOINT — Punkt końcowy zasobu. Będzie to wyglądać następująco:
https://<your-custom-subdomain>.api.cognitive.microsoft.com

Tworzenie nowej aplikacji

W ulubionym środowisku IDE lub edytorze utwórz nowy .html plik. Następnie dodaj do niego podstawowy kod HTML dla kodu, który dodamy później.
```
<!DOCTYPE html>
<html>

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

    <body>
    </body>

</html>
```

W tagu <body> dodaj następujący kod HTML:

Dwa obszary tekstowe do wyświetlania żądania JSON i odpowiedzi.
Przycisk do wywoływania recognizeInk() funkcji, która zostanie utworzona później.

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

Ładowanie przykładowych danych JSON

W tagu <script> utwórz zmienną dla pliku sampleJson. Następnie utwórz funkcję JavaScript o nazwie openFile() , która otwiera eksploratora plików, aby można było wybrać plik JSON. Recognize ink Kliknięcie przycisku spowoduje wywołanie tej funkcji i rozpoczęcie odczytywania pliku.

FileReader Użyj funkcji obiektuonload(), aby przetworzyć plik asynchronicznie.

Zastąp wszystkie \n znaki lub \r w pliku pustym ciągiem.
Użyj JSON.parse() polecenia , aby przekonwertować tekst na prawidłowy kod JSON
request Zaktualizuj pole tekstowe w aplikacji. Użyj JSON.stringify() polecenia , aby sformatować ciąg 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]);
};

Wysyłanie żądania do interfejsu API rozpoznawania pisma odręcznego

W tagu <script> utwórz funkcję o nazwie recognizeInk(). Ta funkcja później wywoła interfejs API i zaktualizuje stronę przy użyciu odpowiedzi. Dodaj kod z poniższych kroków w ramach tej funkcji.

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

Utwórz zmienne dla adresu URL punktu końcowego, klucza subskrypcji i przykładowego kodu JSON. Następnie utwórz XMLHttpRequest obiekt w celu wysłania żądania interfejsu 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();

Utwórz funkcję return dla XMLHttpRequest obiektu . Ta funkcja przeanalizuje odpowiedź interfejsu API z pomyślnego żądania i wyświetli ją w aplikacji.

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

Utwórz funkcję error dla obiektu żądania. Ta funkcja rejestruje błąd w konsoli.

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

Utwórz funkcję dla właściwości obiektu onreadystatechange żądania. Po zmianie stanu gotowości obiektu żądania zostaną zastosowane powyższe funkcje zwracania i błędów.

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

Wyślij żądanie interfejsu API. Dodaj klucz subskrypcji do nagłówka Ocp-Apim-Subscription-Key i ustaw wartość na 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));
};

Uruchom aplikację i wyświetl odpowiedź

Tę aplikację można uruchomić w przeglądarce internetowej. Pomyślna odpowiedź jest zwracana w formacie JSON. Odpowiedź JSON można również znaleźć w witrynie GitHub:

Następne kroki

Dokumentacja interfejsu API REST

Aby zobaczyć, jak działa interfejs API rozpoznawania pisma odręcznego w cyfrowej aplikacji odręcznej, zapoznaj się z następującymi przykładowymi aplikacjami w usłudze GitHub:

Udostępnij za pośrednictwem