ml5.jsを使って画像分類をしてみました。
ml5.jsは、p5.jsのProcessingライクなコードからTensorFlow.jsの機能にアクセスできる
インターフェイスを持ったライブラリになっています。
すでに訓練済みのモデルが用意されていて、p5.jsからすぐ利用することができます。
下記の例は、メガネの画像がどのように分類されたかの結果です。
http://www.velvet-number.com/p5_test/test044/
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0>
<style> body {padding: 0; margin: 0;} </style>
<style type="text/css">
body {
margin: 100px;
}
</style>
<script type="text/javascript" src="../javascript/p5main/p5.min.js"></script>
<script type="text/javascript" src="../javascript/addons/p5.dom.min.js"></script>
<script type="text/javascript" src="../javascript/addons/p5.sound.min.js"></script>
<script type="text/javascript" src="../javascript/jquery/jquery-3.3.1.min.js"></script>
<script type="text/javascript" src="../javascript/noscroll/no_scroll.js"></script>
<script type="text/javascript" src="https://unpkg.com/ml5@0.1.1/dist/ml5.min.js"></script>
<script src="sketch.js"></script>
</head>
<body>
<h1>MobileNetで画像を分類する</h1>
<p id="status">Loading Model ...</p>
<h2>画像の分類結果</h2>
<p><span id="result">...</span></p>
</body>
</html>
const classifier = ml5.imageClassifier ('MobileNet', modelReady);
var image_base;
var model_load = false;
function setup () {
noCanvas ();
image_base = createImg ('data/sample.jpg', imageReady);
}
function modelReady () {
select ('#status').html ('Model Loaded');
}
function imageReady () {
classifier.predict (image_base, gotResult);
}
function gotResult (err, results) {
if (err) {
console.error (err);
}
var result_text = "";
for (var i = 0; i < results.length; i++) {
result_text += "<li>" + results[i].className;
result_text += " (" + nf (results[i].probability, 0, 2) + ")</li>";
}
select ('#result').html (result_text);
}