More than 5 years have passed since last update.

初心者がJavaScript11行で爆速でドヤる方法〜画像オブジェクト認識編〜

Last updated at 2019-07-29Posted at 2018-12-21

たった11行です。

結論から言うと、
もうこれだけです。

index.html

<script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs"></script>
<script src="https://cdn.jsdelivr.net/npm/@tensorflow-models/coco-ssd"></script>
<script>
    const img = new Image();
    img.src = './cat.jpg';
    cocoSsd.load().then(model => {
        model.detect(img).then(predictions => {
            console.log('Predictions: ', predictions);
        });
    });
</script>

index.html というファイルを作成して
↑のコードをコピペ

適当な猫の画像を落としてきて
同じディレクトリに cat.jpg と保存
今回はクリスマス猫を使用

そのディレクトリで以下のコマンドを実行します。

$ python -m SimpleHTTPServer 3000

起動方法はなんでもOKです。

$ php -S 127.0.0.1:3000
$ npm install -g http-server && http-server -p 3000

etc

ref: https://gist.github.com/willurd/5720255

実行後、
=> http://localhost:3000/
へアクセスしてコンソールを見れば

といった具合に画像の中にあるオブジェクト認識が実行されているのがわかります。

少しだけ解説

今回は、coco-ssd というオープンソースのオブジェクト認識モデルを使用しています。
=> https://github.com/tensorflow/tfjs-models/tree/master/coco-ssd

↑のGitHubにもある通り
NPM経由でも使用することができます

import * as cocoSsd from '@tensorflow-models/coco-ssd';
const img = new Image();
img.src = './cat.jpg';
const model = await cocoSsd.load();
const predictions = await model.detect(img);
console.log(predictions);

こっちだと6行ですね←

こちらを用いることで
人間(person)や自転車(bicycle),車(car)などなど
90種類のオブジェクト認識を実行することができます。
=> https://github.com/tensorflow/tfjs-models/blob/master/coco-ssd/src/classes.ts