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

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

2018-12-1813 min read

目次

  1. 概要
  2. オブジェクト検出
  3. 試す
  4. サンプルコードと解説
  5. デモ
  6. 参考

概要

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()

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

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

Recommends
【JS】画像のリアルタイム物体検出 数行で実装 デモ有 TensorFlow.js coc...
2018-12-18
javascript
%E7%94%BB%E5%83%8F%E5%87%A6%E7%90%86
TensorFlow
OpenCV.jsを動かしてみる + デモ
2019-06-22
javascript
%E6%A9%9F%E6%A2%B0%E5%AD%A6%E7%BF%92
%E7%94%BB%E5%83%8F%E5%87%A6%E7%90%86
JavaScriptで画像のヒストグラムの正規化
2019-06-10
html5
javascript
canvas
画像のヒストグラムを表示する Chart.js JavaScript canvas
2019-05-26
html5
javascript
%E7%94%BB%E5%83%8F%E5%87%A6%E7%90%86
画像のプーリング処理 canvas + JavaScript
2019-05-19
html5
javascript
%E6%A9%9F%E6%A2%B0%E5%AD%A6%E7%BF%92
画像の減色処理 サンプルコードとデモ JavaScript + canvas
2019-04-10
javascript
canvas
%E7%94%BB%E5%83%8F%E5%87%A6%E7%90%86
画像のHSV変換 JavaScript + canvas
2019-04-08
javascript
canvas
%E7%94%BB%E5%83%8F%E5%87%A6%E7%90%86
大津の二値化で画像を2値化 JavaScript + canvas 【画像処理】
2019-04-07
javascript
canvas
%E7%94%BB%E5%83%8F%E5%87%A6%E7%90%86
画像を2値化する JavaScript + canvas 【画像処理】
2019-04-07
javascript
canvas
%E7%94%BB%E5%83%8F%E5%87%A6%E7%90%86
画像をグレースケールに変換する JavaScript + canvas 【画像処理】
2019-04-07
javascript
canvas
%E7%94%BB%E5%83%8F%E5%87%A6%E7%90%86
画像のチャンネル(RGB)を入れ替えるJavaScript + canvas【画像処理】
2019-04-07
javascript
canvas
%E7%94%BB%E5%83%8F%E5%87%A6%E7%90%86
JavaScriptで画像処理100本ノックに挑戦してみた
2019-03-27
javascript
canvas
%E3%82%A2%E3%83%AB%E3%82%B4%E3%83%AA%E3%82%BA%E3%83%A0
画像にモザイクをかける JavaScript canvas デモあり
2019-01-24
html5
javascript
%E7%94%BB%E5%83%8F%E5%87%A6%E7%90%86
JavaScriptによる画像処理と便利なライブラリ
2019-01-14
javascript
canvas
%E7%94%BB%E5%83%8F%E5%87%A6%E7%90%86
文字列のAAを自動生成 デモ + サンプルコード JavaScript
2019-01-03
html5
javascript
%E7%94%BB%E5%83%8F%E5%87%A6%E7%90%86
New Posts
[AWS CDK]ECS FargateでNestJSで作成したRESTfull APIデ...
2022-05-24
amazon%20aws
aws%20cdk
typescript
[AWS CDK]S3 CloudFront OAI Route53 構成 で NextJ...
2022-05-23
amazon%20aws
aws%20cdk
typescript
[CDK]SNS+SQS+DynamoDBでBounceとComplaint情報を収集する...
2022-04-11
amazon%20aws
node.js
typescript
[AmazonSES] node.js と ejs を利用してEメールを送信する
2022-04-09
javascript
node.js
amazon%20aws
GatsbyからNext.jsへのサイト移行
2022-04-04
next.js
gatsby
amazon%20aws
[AWS CDK] Lambda で S3 オブジェクトを読み書きするStackの構築
2022-03-18
aws%20cdk
amazon%20aws
typescript
[AWS CDK] S3 + CloudFrontの構築とOriginAccessIden...
2022-03-09
amazon%20aws
aws%20cdk
typescript
[AWS CDK] Bastion(踏み台)構築。SSMとEC2InstanceConne...
2022-03-06
amazon%20aws
aws%20cdk
node.js
[AWS CDK] Cognito を構築
2022-03-04
amazon%20aws
aws%20cdk
node.js
AWS CDK v2 でVPC上にAPI Gateway + Lambda + RDS +...
2022-02-28
amazon%20aws
aws%20cdk
node.js
javascriptで累積和を解く
2022-02-27
%E3%82%A2%E3%83%AB%E3%82%B4%E3%83%AA%E3%82%BA%E3%83%A0
%E7%AB%B6%E6%8A%80%E3%83%97%E3%83%AD%E3%82%B0%E3%83%A9%E3%83%A0%E3%83%9F%E3%83%B3%E3%82%B0
atcoder
AWS Amplify で monorepo を導入し 単一リポジトリで複数プロジェクトを...
2022-02-25
git
github
amazon%20aws
AWS CDK v2 で Lambda関数のデプロイ
2022-02-23
typescript
amazon%20aws
aws%20cdk
NextJSでDevToysのようなものを作成した
2022-02-22
javascript
typescript
vercel
JSで動的計画法を利用して部分和問題を解く
2022-02-20
javascript
typescript
%E3%82%A2%E3%83%AB%E3%82%B4%E3%83%AA%E3%82%BA%E3%83%A0
Hot posts!
Proxy環境下でcurlを実行する
2019-12-07
linux
curl
OpenCVのMatのタイプ一覧表
2018-11-25
%E7%94%BB%E5%83%8F%E5%87%A6%E7%90%86
opencv
Macでも利用できるDBクライアント MySQL PostgreSQL Oracle など
2019-12-21
linux
%E3%83%87%E3%83%BC%E3%82%BF%E3%83%99%E3%83%BC%E3%82%B9
mysql
TablePlusを使ってみる。シンプルでモダンなSQLクライアントツール
2018-09-30
%E3%83%87%E3%83%BC%E3%82%BF%E3%83%99%E3%83%BC%E3%82%B9
DBクライアントツールはDBeaverをおすすめしたい
2021-03-08
oracle
mysql
sqlite
AWS S3のアクセスキーIDとシークレットアクセスキーの取得 作業用ユーザを作成
2019-06-12
amazon%20aws
linux
amazon%20s3
AtCoderで初めて色がつくまでの話(茶色) レートが中々上がらなかった原因
2018-11-25
%E3%82%A2%E3%83%AB%E3%82%B4%E3%83%AA%E3%82%BA%E3%83%A0
%E7%AB%B6%E6%8A%80%E3%83%97%E3%83%AD%E3%82%B0%E3%83%A9%E3%83%9F%E3%83%B3%E3%82%B0
%E9%9B%91%E8%AB%87
CentOS8でEPELとPowerToolsリポジトリの有効化
2020-11-30
centos
red%20hat
EPEL
Macでターミナルからポートスキャンを行う方法。
2018-12-09
linux
mac
apple
Python + OpenCVのfillConvexPolyで複雑なポリゴンを描画する
2018-11-27
python
%E7%94%BB%E5%83%8F%E5%87%A6%E7%90%86
opencv
Date
▶︎
2022 年 (23)
▶︎
2021 年 (40)
▶︎
2020 年 (30)
▶︎
2019 年 (90)
▶︎
2018 年 (89)
▶︎
2017 年 (1)
Tags
javascript(92)
linux(47)
amazon%20aws(41)
%E3%82%A2%E3%83%AB%E3%82%B4%E3%83%AA%E3%82%BA%E3%83%A0(36)
%E7%94%BB%E5%83%8F%E5%87%A6%E7%90%86(30)
node.js(30)
html5(29)
centos(24)
php(23)
python(22)
typescript(22)
%E7%AB%B6%E6%8A%80%E3%83%97%E3%83%AD%E3%82%B0%E3%83%A9%E3%83%9F%E3%83%B3%E3%82%B0(20)
canvas(18)
mac(18)
opencv(17)
mysql(17)
%E9%9B%91%E8%AB%87(15)
wordpress(15)
docker(14)
atcoder(13)
apache(12)
%E6%A9%9F%E6%A2%B0%E5%AD%A6%E7%BF%92(12)
%E3%83%87%E3%83%BC%E3%82%BF%E3%83%99%E3%83%BC%E3%82%B9(12)
red%20hat(12)
ubuntu(11)
amazon%20s3(11)
github(10)
git(10)
vue.js(10)
%E7%94%BB%E5%83%8F%E5%87%A6%E7%90%86100%E6%9C%AC%E3%83%8E%E3%83%83%E3%82%AF(10)
css3(8)
%E5%8F%AF%E8%A6%96%E5%8C%96(8)
%E5%B0%8F%E3%83%8D%E3%82%BF(8)
mariadb(8)
aws%20cdk(8)
amazon%20lightsail(7)
react(7)
%E3%83%96%E3%83%AD%E3%82%B0(6)
cms(6)
oracle(6)
perl(6)
gitlab(6)
next.js(6)
iam(5)
amazon%20ec2(5)
aws%20amplify(5)
curl(4)
webassembly(4)
ssh(4)
homebrew(4)
Author
s-yoshiki
s-yoshiki
githubzenntwitterqiita
ただの備忘録です。
JavaScript/TypeScript/node.js/React/AWS/OpenCV
※このブログの内容は個人の見解であり、所属する組織等の見解ではありません。