【JS】画像のリアルタイム物体検出 数行で実装 デモ有 TensorFlow.js coco-ssd

2018-12-18
javascript%E7%94%BB%E5%83%8F%E5%87%A6%E7%90%86TensorFlow
    

目次

概要

TensorFlow.js+coco-ssdを用いて、1枚の画像から複数のオブジェクト検出を行う方法を紹介します。 デモも作ったので興味があれば触ってみてください。

オブジェクト検出

オブジェクト検出にはTensorFlow.js + coco-ssdを利用しました。

https://www.npmjs.com/package/@tensorflow-models/coco-ssd

試す

いくつかの画像で試してみました。

例の画像。60%となっていますが、人間として認識してました。 犬と自転車の画像。YOLOとかのサンプルで見かける写真ですが、こんな感じに検出しました。 アビーロード。 羊として認識されています。

サンプルコードと解説

scriptタグで始める

単純にscriptタグで始めるのであれば、以下のコードで始めることができます。

<script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs"> </script>
<script src="https://cdn.jsdelivr.net/npm/@tensorflow-models/coco-ssd"> </script>

<img id="img" src="test.jpg">

<script>
    cocoSsd.load().then(model => {
        model.detect(img).then(predictions => {
            console.log('Predictions: ', predictions);
        });
    });
</script>

coco-ssd API

cocoSsd.load()

このメソッドでモデルをロードします。引数を渡さない場合は”litemobilenetv2”が選択されます。

model.detect()

model.detect()で物体検出を行います。引数にはhtmlのimg要素canvas要素、ImageDataオブジェクトを渡すことができます。 物体の検出に成功した場合は次のJSONのような形で値が渡されます。 失敗した場合はからの配列が渡ってきます。この値は人を検出した時の例です。

[
	{
		"bbox": [
			225.4661464691162,
			21.420029640197754,
			194.02139472961426,
			326.7346258163452
		],
		"class": "person",
		"score": 0.802341103553772
	}
]

デモ

https://jsfiddle.net/s_yoshiki/tn7usb9p/show

クリックすると外部ウィンドウで開きます。

デモのサンプルコード

このサンプルソースではcanvasを利用していますが、img要素などに置き換えることもできます。

<input type="file" id="file">

<canvas id="canvas"></canvas>

<pre id="debug">

ラベルとかの処理はcanvasのAPIを叩いて実装しています。

const canvas = document.getElementById("canvas")

document.getElementById('file').onchange = function() {
    let img = this.files[0]
    let reader = new FileReader()
    reader.readAsDataURL(img)
    reader.onload = function() {
        detectObjects(reader.result)
    }
}

function detectObjects(url) {
	let ctx = canvas.getContext('2d')
    let image = new Image()
	let debug_dom = document.getElementById("debug")
    image.src = url
	
    image.onload = () => {
        canvas.width = image.width
        canvas.height = image.height
		
        ctx.drawImage(image, 0, 0)
		cocoSsd.load().then(model => {
			model.detect(canvas).then(predictions => {
				for (var i = 0; i < predictions.length; i++) {
					var obj = predictions[i]
					var box = obj.bbox
					console.log(i)
					drawRect(box[0], box[1], box[2], box[3])
					drawLabel(
						obj["class"] + 
						" : " + 
						parseInt(obj["score"] * 100 ,10) +
						"%",
						box[0],
						box[1]
					)
				}
				debug_dom.innerHTML = JSON.stringify(predictions, null, "\t")
			});
		});
    }
}

function drawRect(x, y, w, h) {
	var ctx = canvas.getContext('2d');
	ctx.beginPath();
	ctx.rect(
		parseInt(x, 10), 
		parseInt(y, 10),
		parseInt(w, 10),
		parseInt(h, 10)
	)
	ctx.strokeStyle = "rgb(50, 240, 60)"
	ctx.lineWidth = 8
	ctx.stroke()
	ctx.closePath()
}

function drawLabel(text, x, y) {
	var ctx = canvas.getContext('2d')
	
	ctx.beginPath()
	ctx.rect(x -5, y-20, 140, 20)
	ctx.fillStyle = "rgb(50, 240, 60)"
	ctx.fill()
	ctx.closePath()

	ctx.beginPath()
	ctx.font = "18px 'MS Pゴシック'"
	ctx.fillStyle = "red"
	ctx.fillText(text, parseInt(x, 10), parseInt(y, 10))
	ctx.closePath()
}

参考

https://www.npmjs.com/package/@tensorflow-models/coco-ssd

https://hackernoon.com/tensorflow-js-real-time-object-detection-in-10-lines-of-code-baf15dfb95b2

    

関連記事

homebrewでnodejsインストール&任意のバージョン利用
初めに homebrewインストール nodejsの検索 インストール nodejsの利用 初めに homebrewでサクッとnodejsのインストールを行なった際のメモです。 環境はMacを対象としていますが、Linux…

[Vue]フロントエンド機能のみでダウンロードを実装する[JS]
実装 ポイント ソース デモ 参考サイト フロントエンドのみ(=サーバサイドがダウンロードさせない) でダウンロードを行う機能を実装した時のメモです。 Vueを利用して実装していますが、ここで記載しているコードはVueに依存した機能ではなく、ピュアなJSのAPI…

Node.js で作成した REST API を Docker化
Node.jsでREST APIを作成 コンテナ化 コンテナ化定義 コンテナ化作業 参考 Node.js で作成した REST API を Docker化した際のメモです。 Node.jsでREST APIを作成 まずはNode.js…

JavaScriptで優先度付きキューを実装する
優先度付きキューについて ソース 参考 JavaScriptで優先度付きキュー (プライオリティキュー) を実装する 優先度付きキューについて 具体的には次のような機能があります。 キューに対して要素を優先度付きで追加 (push…

next_permutationをJSで実装する
ソース 使い方 参考 C++で提供されている順列を生成する next_permutation のJS実装です。 ソース 順列が存在する場合はtrueを返し、そうでなければfalse…

[JS]ラジアンから度数に度数からラジアンに変換する
コード 度数からラジアンへ ラジアンから度数へ サンプル ラジアンから度数に度数からラジアンに変換する際のスニペット。 コード 度数からラジアンへ ラジアンから度数へ サンプル

JS/TSのclassでclass名を取得する
コード JS/TSのconstructorを利用して自分自身のクラス名を取得する際のメモ。 コード このコードの結果は次のようになります。

JSで32ビット符号付き整数に対してのビット演算でハマった
具体例 参考にしたサイト JSでサブネットマスクの計算を行おうとしたとき、ビット演算でハマりました。その時のメモです。 JSでサブネットマスクの計算 JSでビット演算子を利用する場合 3…

JSでIPアドレスがサブネットマスクで指定した範囲内にあるか判定する
IPアドレスが指定した範囲内にあるかどうか判定 参考にしたサイト JSでIPアドレス(IPv4)が指定したサブネットの範囲に含まれるか判定するロジックを作った時の記録です。 IPアドレスが指定した範囲内にあるかどうか判定 処理としては、IP…

プログラムの数値計算で発生する誤差の種類 丸め誤差・打ち切り誤差・桁落ち
はじめに 誤差の種類 丸め誤差 打ち切り誤差 桁落ち 情報落ち 桁溢れ誤差 参考にしたサイト コンピュータで出てくる誤差はいくつかありますが、 それらをコードに落として整理しました。 はじめに 例えば の計算の答えは 0.6666666666…

最新の投稿

[Mac]ipコマンドの導入[iproute2mac]
iproute2macについて 導入 homebrewで導入 直接インストール 確認 サポートコマンド を導入して、macOSでipコマンドを導入した際のメモ iproute2macについて brona/iproute2mac: CLI wrapper for…

AutotoolsでconfigureやMakefileの作成
はじめに Autotools 環境 準備 ツール類のインストール ソースコードの作成 configure.ac と Makefile.am configure Makeの生成 その他 makeオプション autoreconf について Perlの場合 リンク はじめに C…

RPMパッケージ作成 Dockerを利用して
はじめに RPMパッケージ step1.環境構築からRPMパッケージングまで 事前準備 ワークスペースの作成 プログラム配置 specファイル rpmbuild インストール リンク はじめに Dockerを利用してRPM開発環境を用意し、実際にRPM…

RPMのspecファイルで利用するマクロ・変数
はじめに マクロ一覧 基本情報系 Body項目 コメント 参考文献 はじめに RPM(Fedora/CentOS系)を作成する際に利用するspecファイルで利用できるマクロについて調べた際のメモです。 マクロ一覧 基本情報系 パッケージの名前を定義します。これはspec…

CentOS8/RHEL8でのRPM管理における検討事項
初めに 前提 rpm rpm yum dnf コマンド リポジトリ リポジトリとライフサイクル AppStream Compatibility Level について AppStreamのサポート期間 Yum v3 -> Yum v4 リンク 初めに CentOS8/RHEL…

homebrewでnodejsインストール&任意のバージョン利用
初めに homebrewインストール nodejsの検索 インストール nodejsの利用 初めに homebrewでサクッとnodejsのインストールを行なった際のメモです。 環境はMacを対象としていますが、Linux…

tracerouteコマンドでネットワークの経路を洗い出す
tracerouteの用途 tracerouteの原理 IPヘッダのTTL コマンドを実行してみる 参考文献 tracerouteコマンドでネットワークの経路を洗い出した際の操作をメモしました。 環境はmacで実施しています。 また、traceroute…

[Vue]フロントエンド機能のみでダウンロードを実装する[JS]
実装 ポイント ソース デモ 参考サイト フロントエンドのみ(=サーバサイドがダウンロードさせない) でダウンロードを行う機能を実装した時のメモです。 Vueを利用して実装していますが、ここで記載しているコードはVueに依存した機能ではなく、ピュアなJSのAPI…

Node.js で作成した REST API を Docker化
Node.jsでREST APIを作成 コンテナ化 コンテナ化定義 コンテナ化作業 参考 Node.js で作成した REST API を Docker化した際のメモです。 Node.jsでREST APIを作成 まずはNode.js…

JavaScriptで優先度付きキューを実装する
優先度付きキューについて ソース 参考 JavaScriptで優先度付きキュー (プライオリティキュー) を実装する 優先度付きキューについて 具体的には次のような機能があります。 キューに対して要素を優先度付きで追加 (push…

Tags

Dates

s-yoshiki
s-yoshiki
githubtwitterqiita
ただの備忘録です。
JS/TS/node.js/PHP/AWS/OpenCV/CentOS
※このブログの内容は個人の見解であり、所属する組織等の見解ではありません。
© 2022   404 motivation not found