今回は比較的新しい Ink Recognizer を使用して、手書きで書いた文字を認識するアプリを作成してみようと思います。
Ink Recognizer をデプロイする
Azure Portal から Ink Recognizer をデプロイします。新しいリソースの作成で、「Ink」と入力すると出てくるので、任意の名前を付けてデプロイします。この記事を執筆時点ではまだプレビュー版でした。(2019/10/26時点)
デプロイが終わり構築されたリソースのページ移動すると、API に接続するための Key が表示されています。後程使用するのでこれをメモしておきます。
サンプルコードを GitHub よりデプロイする
Microsoft の GitHub にサンプルコートがあります。今回はそれを使用してアプリを作成します。
https://github.com/Azure-Samples/cognitive-services-REST-api-samples
任意のローカルディレクトリに上記の GitHub コードをデプロイし、Ink Recognizer のアプリがあるディレクトリに移動します。
git clone https://github.com/Azure-Samples/cognitive-services-REST-api-samples
cd SampleCode\cognitive-services-REST-api-samples\javascript\InkRecognition\javascript-app\src
code .
これを実行すると、Visual Studio Code が立ち上がります。
API Key を入力する
config.js の該当の箇所に最初にコピーしたサブスクリプションキーを入力します。
SERVER_ADDRESS = "https://api.cognitive.microsoft.com";
ENDPOINT_URL = SERVER_ADDRESS + "/inkrecognizer/v1.0-preview/recognize";
SUBSCRIPTION_KEY = "ここです！！！！";
// Languages for user to try
LANGUAGE_TAGS_TO_TRY = ["en-US", "de-DE", "en-GB", "fr-FR", "hi-IN", "ja-JP", "ko-KR", "zh-CN"];
// Window.devicePixelRatio could change, e.g., when user drags the window to a display with different pixel density,
// however, there is no callback or event available to detect the change.
// In this sample, we assume devicePixelRatio doesn't change.
PIXEL_RATIO = window.devicePixelRatio;
MILLIMETER_PER_INCH = 25.4;
PIXEL_PER_INCH = 96;
MILLIMETER_TO_PIXELS = PIXEL_PER_INCH / (MILLIMETER_PER_INCH * PIXEL_RATIO);
PIXEL_TO_MILLIMETERS = MILLIMETER_PER_INCH * PIXEL_RATIO / PIXEL_PER_INCH;
サンプルコードの中にはあらかじめエンドポイントの URL がセットされていますので、そこは変更する必要はありません。
ここまでで一応 InkRecognizer のサンプルコードの設定が完了です。
実際に動かしてみる
sample.html を任意のブラウザで開いてみましょう。開くと二つの空のボックスが表示されます。左側のボックスが字を書くところで、右側のボックスが InkRecognizer が認識した JSON を返すところです。
実際に「Hello」と手書きで書いてみました。右側のボックスには認識された JSON コードが返ってきていました。中身を見るとちゃんと「hello」と認識されていることが分かります。
さいごに
今回は初めて InkRecognizer を使用してみましたが、API のように非常に簡単に扱うことができるので、色々使い道はあるかなと思いました。次回の記事では日本語をどれくらい認知できるのかどうかについて探求しようと思います。
参考 URL
InkRecognizer Cognitive Service JavaScript Sample
https://github.com/Azure-Samples/cognitive-services-REST-api-samples/tree/master/javascript/InkRecognition/javascript-app