ML5.classify

def setup
  createCanvas(300, 440)
  background(255)
  show_message
  classify
end

def classify
  img = loadImage('dog_akita.jpg')
  image(img, 0, 0, 300, 300)
  ML5.classify(img, 5) do |results|
    @message.remove
    fill("red")
    textFont("monospace")
    textStyle(BOLD)
    textSize(18)
    results.each_with_index do |r, i|
      # 信頼度とラベルを表示
      text(format("%4.1f%%  %s", r[:confidence] * 100, r[:label]), 10, 330 + i * 22)
    end
  end
end

def show_message
  @message = createDiv("識別中...").position(100, 320)
  @message.style("font-size", "32px")
  @message.elt.id = "msg"

  # `style` タグを追加(点滅)
  css = '
    <style>
      @keyframes blink {
        50% { opacity: 0; }
      }
      #msg {
        animation: blink 1.2s infinite;
      }
    </style>
  '
  @message.html(css, true)
end

ml5.jsリファレンス(参考情報)

[ml5.js] ImageClassifier (ml5@0.12.2)
[ml5.js] ImageClassifier (ml5@1.2.1)

概要

画像の内容を認識します。

書式

ML5.classify(img, number) do |results| ... end

引数

引数名内容備考オプションデフォルト値
img認識する対象の画像p5imageオブジェクト
p5graphicsオブジェクト
number取得する認識結果の個数
...認識結果に対する処理

戻値

なし

備考

・rbCanvas/p5では、ml5.jsの旧バージョン(0.12.2)を利用しています。
　ml5.jsの最新バージョンとは仕様や挙動などが異なる場合があります。

ブロック引数「results」は下記のようなデータ構造になっています。 

  [                      # 引数 numberで指定した個数の要素(ハッシュ)を持つ配列
    {                    #   要素0
      confidence: r,     #     信頼度
      label: str         #     ラベル
    ],
    {                    #   要素1
      confidence: r,     #     信頼度
      label: str         #     ラベル
    ],
    ...
    ...
    ...
    {                    #   要素N
      confidence: r,     #     信頼度
      label: str         #     ラベル
    ],
  ]

関連