LoginSignup
7

More than 3 years have passed since last update.

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

Last updated at Posted 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/
へアクセスしてコンソールを見れば

Screen Shot 0030-12-21 at 6.03.46 PM.png

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

少しだけ解説

今回は、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

アメリカでは実に2/3のアプリが機械学習を取り入れている

近年、 "AIが〇〇しています" というサービスが増えてきましたが
アメリカでは実に2/3のアプリが機械学習を取り入れているとの結果がアンケートで出ているそうです。

Screen Shot 0030-12-21 at 6.20.23 PM.png
ref: https://twitter.com/yabaiwebyasan/status/1073417541618286592

(Google Developers ML Summitで聞いた話なのでソースのリンクなどはありませんがw)

機械学習はTensorFlowが2015年にオープンソースになって以来、
学習済みモデルがオープンソース上に転がっていたりするなど
どんどんサービスに組み込むハードルが下がってきています。

もはや、 "AIが〇〇しています" でどやれるような時代ではなくなってきてます。

まだAIやってないの?

の時代なのです

とはいえ、日本ではまだまだ機械学習はハードル高くて無理だなぁと思っているディベロッパーは多いはず。

是非、これを機に機械学習をサービスに取り入れてみてはいかがでしょう

余談ですが、こんな勉強会をやったりしてました。

Screen Shot 0030-12-21 at 6.23.55 PM.png
ref: https://twitter.com/yabaiwebyasan/status/1075409847401603072

以前の勉強会資料もシェアしておきます。
=> 文系で数学ができなくてもお手軽に試せる機械学習ツール

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
7