Краткое руководство. Распознавание рукописного ввода с помощью REST API Распознавателя рукописного текста и JavaScript

Статья
08/24/2020

Примечание

Действие предварительной версии API Распознавателя рукописного ввода закончилось 26 августа 2020 г. Если у вас есть ресурсы Распознавателя рукописного текста, вы можете и дальше использовать их до полного прекращения работы службы 31 января 2021 г.

Используйте это краткое руководство, чтобы начать использовать API Распознавателя рукописного текста для рукописных фрагментов. Это приложение JavaScript отправляет запрос API, содержащий данные рукописного фрагмента в формате JSON, и отображает ответ.

Хотя это приложение создается на языке JavaScript и выполняется в вашем веб-браузере, API представляет собой веб-службу RESTful, совместимую с большинством языков программирования.

Обычно вы вызываете API из приложения для рукописного ввода. Этот краткое руководство отправляет данные рукописного фрагмента для следующего рукописного образца из JSON-файла.

изображение рукописного текста

Исходный код для этого краткого руководства можно найти на портале GitHub.

Предварительные требования

веб-браузера;
Пример данных рукописного фрагмента для этого краткого руководства можно найти на портале GitHub.

Создание ресурса Распознавателя рукописного текста

Примечание

Конечные точки для ресурсов, созданных после 1 июля 2019 г., поддерживают пользовательский формат поддомена, показанный ниже. Дополнительные сведения и полный список региональных конечных точек см. в статье Custom subdomain names for Cognitive Services (Пользовательские имена поддоменов для Cognitive Services).

Ресурсами Azure, на которые вы подписаны, будет представлено семейство служб Azure Cognitive Services. Создайте ресурс для Распознавателя рукописного текста на портале Azure.

После создания ресурса вы можете получить конечную точку и ключ, открыв ресурс на портале Azure и щелкнув Быстрый запуск.

Создайте две переменные среды:

INK_RECOGNITION_SUBSCRIPTION_KEY — ключ подписки для аутентификации запросов.
INK_RECOGNITION_ENDPOINT — конечная точка для вашего ресурса. Она должна выглядеть так:
https://<your-custom-subdomain>.api.cognitive.microsoft.com

Создание приложения

Создайте новый файл .html в предпочитаемой интегрированной среде разработки или текстовом редакторе. Затем добавьте в него базовый HTML для кода, который мы создадим позже.
```
<!DOCTYPE html>
<html>

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

    <body>
    </body>

</html>
```

В теге <body> добавьте следующий HTML:

Две области текста для отображения запроса и ответа JSON.
Кнопка для вызова функции recognizeInk(), которая будет создана позже.

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

Загрузка примера данных JSON

В теге <script> создайте переменную для sampleJson. Затем создайте функцию JavaScript с именем openFile(), которая открывает проводник, чтобы вы могли выбрать JSON-файл. При нажатии кнопки Recognize ink она вызовет эту функцию и начнет чтение файла.
Используйте функцию onload() объекта FileReader для асинхронной обработки файла.
1. Замените пустой строкой любые \n или \r символы в файле.
2. Используйте JSON.parse() для преобразования текста в допустимом JSON
3. Обновите текстовое поле request в приложении. Используйте JSON.stringify() для форматирования строки 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]);
};
```

Отправка запроса в API Распознавателя рукописного текста

В теге<script> создайте функцию с именем recognizeInk(). Позже эта функция вызовет API и обновит страницу с ответом. Добавьте код из следующих шагов в этой функции.
```
function recognizeInk() {
// add the code from the below steps here 
}
```
1. Создайте переменные для URL-адреса конечной точки, ключ подписки и пример JSON. Затем создайте объект XMLHttpRequest, чтобы отправить запрос 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. Создайте функцию возврата для объекта XMLHttpRequest. Эта функция будет анализировать ответ API из успешного запроса и отображать его в приложении.
```
function returnFunction(xhttp) {
    var response = JSON.parse(xhttp.responseText);
    console.log("Response: %s ", response);
    document.getElementById('response').innerHTML = JSON.stringify(response, null, 2);
}
```
3. Создайте функцию ошибки для объекта запроса. Эта функция записывает ошибку на консоль.
```
function errorFunction() {
    console.log("Error: %s, Detail: %s", xhttp.status, xhttp.responseText);
}
```
4. Создайте функцию для свойства объекта запроса onreadystatechange. Когда изменится состояние готовности объекта запроса, будут применяться вышеуказанные функции возврата и ошибки.
```
xhttp.onreadystatechange = function () {
    if (this.readyState === 4) {
        if (this.status === 200) {
            returnFunction(xhttp);
        } else {
            errorFunction(xhttp);
        }
    }
};
```
5. Отправьте запрос API. Добавьте ключ подписки в заголовокOcp-Apim-Subscription-Key и установите content-type в 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));
};
```

Запуск приложения и просмотр ответа

Это приложение может быть запущено в вашем веб-браузере. Успешный ответ возвращается в формате JSON. Ответ JSON также можно найти на портале GitHub:

Дальнейшие действия

Справочник по REST API

Чтобы увидеть, как API Распознавателя рукописного текста работает в приложении для рукописного ввода, взгляните на следующие примеры приложений на GitHub.

Поделиться через