063. p5.jsとml5.jsで機械学習による画像分類をしてみる 01 – Play with Code (Trial and Error in the Processing & p5.js)

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

}