빠른 시작: Ink Recognizer REST API와 JavaScript로 디지털 잉크 인식

아티클
08/24/2020

참고

2020년 8월 26일에 Ink Recognizer API의 미리 보기가 종료되었습니다. 기존 Ink Recognizer 리소스가 있는 경우 2021년 1월 31일에 서비스가 완전히 사용 중지될 때까지 계속 사용할 수 있습니다.

이 빠른 시작을 사용하여 디지털 잉크 스트로크에 Ink Recognizer API를 사용하기 시작합니다. 이 JavaScript 애플리케이션은 JSON 형식의 잉크 스트로크 데이터가 포함된 API 요청을 보내고 응답을 표시합니다.

이 애플리케이션은 Javascript로 작성되어 웹 브라우저에서 실행되지만 API는 대부분의 프로그래밍 언어와 호환되는 RESTful 웹 서비스입니다.

일반적으로 API는 디지털 잉크 입력 앱에서 호출합니다. 이 빠른 시작은 JSON 파일에서 다음 필기 샘플에 대한 잉크 스트로크 데이터를 보냅니다.

필기 문자 이미지

이 빠른 시작의 소스 코드는 GitHub에서 확인할 수 있습니다.

사전 요구 사항

웹 브라우저
이 빠른 시작의 잉크 스트로크 데이터 예제는 GitHub에서 찾을 수 있습니다.

Ink Recognizer 리소스 만들기

참고

2019년 7월 1일 이후에 생성된 리소스의 엔드포인트는 아래에 표시된 사용자 지정 하위 도메인 형식을 사용합니다. 자세한 내용 및 지역별 엔드포인트의 전체 목록은 Cognitive Services에 대한 사용자 지정 하위 도메인 이름을 참조하세요.

Azure Cognitive Services는 구독하는 Azure 리소스로 표시됩니다. Azure Portal을 사용하여 잉크 인식기에 대한 리소스를 만듭니다.

리소스를 만든 후 Azure Portal에서 리소스를 열고 빠른 시작을 클릭하여 엔드포인트와 키를 가져옵니다.

두 개의 환경 변수를 만듭니다.

INK_RECOGNITION_SUBSCRIPTION_KEY - 요청을 인증하기 위한 구독 키입니다.
INK_RECOGNITION_ENDPOINT - 리소스에 대한 엔드포인트입니다. 다음과 같이 표시됩니다.
https://<your-custom-subdomain>.api.cognitive.microsoft.com

새 애플리케이션 만들기

원하는 IDE 또는 편집기에서 새 .html 파일을 만듭니다. 그런 다음, 나중에 추가할 코드에 기본 HTML을 추가합니다.
```
<!DOCTYPE html>
<html>

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

    <body>
    </body>

</html>
```

<body> 태그 내에 다음 html을 추가합니다.

JSON 요청 및 응답을 표시하기 위한 텍스트 영역 2개
나중에 만들 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에 대한 변수를 만듭니다. 그런 다음, JSON 파일을 선택할 수 있도록 파일 탐색기를 여는 openFile()이라는 JavaScript 함수를 만듭니다. Recognize ink 단추를 클릭하면 이 함수가 호출되어 파일 읽기가 시작됩니다.

FileReader 개체의 onload() 함수를 사용하여 파일을 비동기식으로 처리합니다.

파일의 \n 또는 \r 문자를 빈 문자열로 바꿉니다.
JSON.parse()를 사용하여 텍스트를 유효한 JSON으로 변환합니다.
애플리케이션에서 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]);
};

Ink Recognizer API에 요청 보내기

<script> 태그 내에서 recognizeInk()라는 함수를 만듭니다. 이 함수는 나중에 API를 호출하고 응답으로 페이지를 업데이트합니다. 이 함수 내에서 다음 단계의 코드를 추가합니다.

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

엔드포인트 URL, 구독 키 및 샘플 JSON에 대한 변수를 만듭니다. 그런 다음, API 요청을 보내는 XMLHttpRequest 개체를 만듭니다.

// 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();

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);
}

요청 개체에 대한 오류 함수를 만듭니다. 이 함수는 콘솔에 오류를 기록합니다.

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

요청 개체의 onreadystatechange 속성에 대한 함수를 만듭니다. 요청 개체의 준비 상태가 변경되면 위의 반환 및 오류 함수가 적용됩니다.

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

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 형식으로 반환됩니다. GitHub에서 JSON 응답을 찾을 수도 있습니다.

다음 단계

REST API 참조

Ink Recognizer API가 디지털 잉크 입력 앱에서 어떻게 작동하는지 알아보려면 GitHub에서 다음 샘플 애플리케이션을 살펴보세요.

다음을 통해 공유