目的
あなたは外国語で読書をやったことがありますか、分からない単語があったらどうですか？わたしなら、本を置いて、辞書アプリで単語を探して、本を拾って、続けます。もし、わからない単語が多い場合はひどくなります。
それで、今回、指で指差すと、言葉を辞書に入れて意味を出すツールを作りたいです。例えば：
上の写真 → 「procrastination」の意味：怠慢、延期
必要なもの：
- 画像のどこに指先があるか教えてくれるモデル -> handposeモデル
handpose パッケージは、入力されたイメージまたは動画ストリームから手を検知し、それぞれの手の特徴の位置を示す 21 個の 3 次元ランドマークを返します。このランドマークには、それぞれの指の関節や手のひらの位置も含まれます。
参考：https://developers-jp.googleblog.com/2020/04/mediapipe-tensorflowjs.html
- 画像にあるテキストを認識するモデル -> OCRモデル
OCR（Optical Character Recognition/Reader、オーシーアール、光学的文字認識）とは、手書きや印刷された文字を、イメージスキャナやデジタルカメラによって読みとり、コンピュータが利用できるデジタルの文字コードに変換する技術です。
参考：https://mediadrive.jp/technology/ocr.html
システムの仕組みは下のイメージ
-
カメラから画像をhandposeモデルに入れる
-
handposeモデルの結果から指す手振り（
）かどうかを判断して、もし指す手振りだったら、画像をOCRモデルに渡す -
OCRモデルでテキストを認証して、単語の内容と位置をアウトプットする
-
人差し指位置から近い単語を辞書に渡す
実装
ml5jsを利用して、ウェブを作ってみます。
Handposeモデル
試しリンク（実施するために、右上の人アイコンをクリックしてください）
Handposeモデルのアウトプットの例
見えるように、モデルのアウトプットは手の21点です。で、必要な点は以下の写真になります。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>ml5.js - Handposeモデル</title>
</head>
<body>
<h1>ml5.js - Handposeモデル</h1>
<!-- このapp内のみVue.jsの管理範囲です -->
<div id="app">
<p>{{ detectedName }}</p>
<video id="myvideo" width="640" height="480" muted autoplay playsinline></video>
</div>
<!-- ml5.jsとVue.jsをCDNから読み込みます -->
<script src="https://unpkg.com/ml5@latest/dist/ml5.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
detectedName: 'モデルのロード中です...',
},
// DOMの構築が完了してから実行する（それ以前だとvideoタグを見つけられない）
async mounted() {
const stream = await navigator.mediaDevices.getUserMedia({
audio: true,
video: true,
});
const video = document.getElementById('myvideo');
video.srcObject = stream;
const handpose = await ml5.handpose(video);
app.detectedName = 'モデルロード完了';
handpose .on('predict', (results) => {
console.log(results);
});
function onDetect(err, results) {
console.log(results);
}
},
});
</script>
</body>
</html>