ml5.jsをやってみよう
ml5.jsとは
ml5.jsはアーティストやクリエィティブ・コーダー、学生などの幅広いユーザーが機械学習を親しみやすく触れるられるように作られたライブラリです。TensorFlow.js がベースになっています。また、p5jsからの影響を受けて制作されています。
https://ml5js.org/
ml5jsで出来ること色々
ImageClassifier
事前学習済みのモデルを使用して、画像の内容を認識し、分類する。
PoseNet
人間の姿勢を推定する。一人の姿勢推定と、複数人の推定ができるバージョンがある。
BodyPix
画像から人と背景を分離し、かつ身体を24の部分に分類することが可能なライブラリ
UNET
生物医学画像を分析し、分割するために開発されたライブラリ。
Face-Api
顔の特徴点を推測するライブラリ。
StyleTransfer
ある画像のスタイルを別の画像に転送する。
Pix2Pix
学習データに基づき、線画、あるいはモノクロ画像からカラー画像を得ることができる。
SketchRNN
Quick, Draw!ゲームから収集されたスケッチデータに基づいたライブラリ。初期パスから新しいスケッチを生成できる。
YOLO
リアルタイムオブジェクト認識
他にも色々出来るので、ドキュメントを見てみてください
https://learn.ml5js.org/#/
サンプルをみてみよう
p5jsにあるサンプルからいくつかピックアップしてみました。気になるサンプルがあったら自分のアカウントにcopyして自分で色々いじってみよう。
カメラの画像から手の形を推定する
・Handpose with Webcam
カメラの画像から顔のメッシュを推定する
・Facemesh with Webcam
カメラの画像から顔のパーツの輪郭線を検出する
・FaceApi_Video_Landmarks
カメラの画像から全身のポーズを推定する
・PoseNet example using p5.js
後述するTeachable Machineを用いたサンプル
・Teachable Machine
UNETを用いて被写体(顔)と背景を分離するサンプル
・UNET example using p5.js
YOLOを用いたオブジェクト認識
・Real time Object Detection using YOLO and p5.js
COCO-SSDモデルを用いたオブジェクト認識、YOLOより高速
・Real time Object Detection using COCO-SSD and p5.js
DoodleNet(Quick Drawのお絵描き学習データ)で345種類の絵を認識する
・Canvas Image Classification using DoodleNet and p5.js
MobileNetを使ってオブジェクト認識をして、しゃべる
・Webcam Image Classification with Speech Output using MobileNet, p5.js, p5.speech
BodyPixを用いて、体をパーツごとに分解して認識する
・BodyPix with Webcam and Part Segmentation
サンプルを自分でいじってみよう
まずは、p5jsのweb editorのアカウントを作って、サンプルをコピーしてオンラインでいじってみてもよいかなと思います。
もし最終的に作品として使用する場合はp5jsからダウンロードして、cssなども含めて作りこんでみるとよいです。
ダウンロードしたファイルは、ローカルでサーバーを立てて開くか、みなさんの学生アカウントのサーバーにアップロードして
httpsでアクセスすると実行できます。いくつかのサンプルはスマホでも実行できて、それはとても楽しい。
例えば、こんなサンプルを作ってみたのでこれをベースにいじってみよう。
PoseNet_webcam_test
以下のようにサンプルファイルを用意してみました。
ダウンロードしたファイルは、ローカルでサーバーを立てて開くか、みなさんの学生アカウントのサーバーにアップロードして
httpsでアクセスすると実行できます。いくつかのサンプルはスマホでも実行できて、それはとても楽しい。
雛形となる基本のファイル
ブラウザから試してみる
スマホから試してみる
zipファイルをダウンロード
PoseNetを使ったサンプル
ブラウザから試してみる
スマホから試してみる
zipファイルをダウンロード
YOLOを使ったサンプル
ブラウザから試してみる
zipファイルをダウンロード
Teachable Machineをいじってみよう
Teachable Machine
Teachable Machineは、google が提供している機械学習が気軽に試せるサービスです。ブラウザからの簡単な操作で、
webカメラなどを通じて学習データを直感的に作成することができます。学習したデータセットは、json形式でダウンロードでき、ml5js + p5jsで利用できるので、とても簡単に機械学習を使ったプロジェクトを作ることができます。
Teachable Machine サンプル
サーバーにアップするか、MAMPなどでローカルにサーバーを立ててchromeから開くと実行できます。
ローカルでサーバーを立てたい場合 MAMPを使おう
MAMP https://www.mamp.info/
p5js + ml5jsなど、ブラウザ上で動作するプログラムをローカルで作業していると、画像などの外部ファイルの読み込みや、
カメラのアクセスの権限など、webのセキュリティー的な制限に引っかかる場合があります。
基本的には、それらはサーバー上で動作させることで回避できることが多いのですが、わざわざサーバーにアップしていると面倒なので、
ローカルでサーバーを立てて作業すると便利。慣れている人はターミナルからpythonなどでサーバーを起動してもいいですが、そうでない人には以下のMAMPを使うと簡単なのでおすすめです。
MAMPの使い方
メニューバーから、MAMP > Preferenceを開いて、Web Serverの項目を開く。
Document Root(サーバー起動時の一番上の階層)のselectというボタンを押して、編集しているindex.htmlファイルがある場所を選択し、OKを押す。
Start Serverを押すとサーバーが起動する。
起動し終えるとブラウザが開き「localhost:8888/MAMP/」の初期ページが表示されるので、それは閉じて、「localhost:8888」にアクセスすると、指定したディレクトリが表示される。