なぜかp5jsと間違えやすい、ml5jsという機械学習をブラウザ上で実行するライブラリが気なったので、その所見を書きたいと思います。
(p5jsはPtsjsによる実践ジェネラティブアートで紹介しています。)
以前私は、PythonのKerasを用いて少しだけ機械学習に触れたことがあります。
その時の、雑感を端的に説明すると、
この２つが機械学習の大きなフェーズとなり、
一番重要な、そして用意するのが難しい学習のためのデータが存在します。
開発者側はデータから学習したモデルを事前に用意し、
なんらかのサービスのユーザーはそのモデルをもとに機械学習を実行します。ここが推論です。
そのときの機械学習への印象は以下です。
1-3は到底ブラウザで実行するにはお門違いです。
ml5js は4の実行させるところに主眼をおいたものに思われます。
では実際にサンプルを触ってみます。
ここからの内容は公式のチュートリアルに沿っています。その簡略版です。
まず<head>内にml5jsとp5jsを読み込ませます。
なぜp5jsを使うのかというと、機械学習は画像に対してわかりやすい効果がだしやすいので、画像を取り扱いやすいp5jsが採用されたのでしょう
この記事では最低限のもののみ読み込みます。
<!-- p5 -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.8.0/p5.min.js"></script>
<!-- ml5 -->
<script src="https://unpkg.com/ml5@0.3.1/dist/ml5.min.js"></script>つぎにp5jsのみの機能を使いcanvas要素を作成し、画像を表示します。
今回は、この画像が何の画像なのかを推論します。
let img;
function preload() {
img = loadImage('https://res.cloudinary.com/mwrote/image/upload/c_scale,w_200/v1560441316/bauhausify/_SDI0792.jpg');
}
function setup(){
createCanvas(200, 133); // 今回読み込んでいる画像のサイズ
image(img, 0, 0);
}そこで、肝心のml5jsの登場です。追加しているのは4箇所です。
let classifier, img; // ここと
function preload() {
classifier = ml5.imageClassifier('MobileNet'); // ここと
img = loadImage('https://res.cloudinary.com/mwrote/image/upload/c_scale,w_200/v1560441316/bauhausify/_SDI0792.jpg');
}
function setup(){
createCanvas(200, 133);
classifier.classify(img, gotResult); // ここと
image(img, 0, 0);
}
// ここ
function gotResult() {
}まず、TensorFlowの提供する学習済み画像モデルMobileNetを使うと宣言し、
let classifier = ml5.imageClassifier('MobileNet');画像を読み込ませ、callback関数のgotResult(名前なんでもOK)を指定します。
classifier.classify(img, gotResult);すると画像解析の数秒後にgotResult関数が呼ばれます。
事前にhtmlにて簡単な受け皿を用意し、
<span id="result"></span>gotResult関数には以下を書きましょう。
function gotResult(results) {
console.log(results);
document.querySelector('#result').textContent = results[0].label;
}すると、ブラウザコンソールには画像の推論結果が表示され、
span#result要素にはそのテキストデータが表示されます。
詳しいサンプルコードは、記事冒頭のCodePenのリンク先でご覧いただけます。
冒頭の機械学習の概要と照らし合わせせつつ、雑感としてまとめます。
やはり、ブラウザ上ではなかなか現状厳しいデータですね。
しかし、ブラウザで実行できることが最大のメリットです。
そして、クライアント側でのモデルの読み込みと推論がこんなに簡単にできることが触っていて楽しいですね。