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); }