見出し画像

ml5.js 入門

npaka

機械学習の訓練済みモデルを簡単に利用できるJavaScriptライブラリ「ml5.js 」を試してみます。

1. ml5.js

「ml5.js」は、機械学習の訓練済みモデルを簡単に利用できるJavaScriptライブラリです。「TensorFlow.js」ベースのライブラリで、「p5.js」の思想も受け継いでいます。

サポートする機械学習タスクは、次のとおりです。

◎ 画像
・ImageClassifier : 画像分類
・PoseNet : 姿勢推定
・BodyPix : 人体パーツのセグメンテーション
・UNET : 画像セグメンテーション
・FaceApi : 顔認識
・StyleTransfoer : 画像に任意のスタイルを適用
・pix2pix : 線画やモノクロ画像をカラー画像に変換
・CVAE : データ（画像のピクセルなど）をより小さな表現にエンコード
・DCGAN : 画像生成
・SketchRNN : 初期パスからのスケッチ生成
・YOLO : 物体検出

◎ サウンド
・SoundClassification : サウンド分類
・PitchDetection : オーディオ信号のピッチまたは基本周波数の推定

◎ テキスト
・CharRNN : テキスト生成
・Sentiment : 感情予測
・Word2Vec : 単語のベクトル変換

2. ml5.jsのサンプル

以下でサンプルを試すことができます。

・ml5.js examples search

2. はじめてのml5.js

画像分類を行うコードは、次のとおりです。

◎ コード

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>ml5.js</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://unpkg.com/ml5@0.4.3/dist/ml5.min.js"></script>
  </head>

  <body>
    <image id='image' src='cat.jpg'>
    <script>
    // 画像の準備
    const img = document.getElementById('image')
        
    // 画像分類器の生成
    const classifier = ml5.imageClassifier('MobileNet', modelLoaded)

    // モデル読み込み完了時に呼ばれる
    function modelLoaded() {
      console.log('Model Loaded!')
    }

    // 画像分類
    classifier.classify(document.getElementById('image'), (err, results) => {
      console.log(results)
    })
    </script>
  </body>
</html>

・cat.jpg

画像1

◎ 出力

0: {label: "Persian cat", confidence: 0.1897687315940857}
1: {label: "lynx, catamount", confidence: 0.08550561219453812}
2: {label: "Angora, Angora rabbit", confidence: 0.046438202261924744}


この記事が気に入ったらサポートをしてみませんか？