前橋工科大学 - 工学デザイン実習 IIIc 2024

Taechable Machineで機械学習プログラミング

April 21, 2024

[スライド資料]

いよいよ、AIを用いた作品制作を実践します! 本日は、Googleによって開発されたWeb上で機械学習を体験できるサイト “Teachable Machine” を使用してプログラミングを行います。

視覚的にとても分かりやすく機械学習について学ぶことが可能です。実際にいろいろな題材を学習させながら、機械学習による分類 (Classification) のイメージを把握していきましょう。

Teachable Machineで機械学習を体験

実習 1: Teachable Machineで機械学習

まずは学習を試してみる

Teachable Machineで新規のImageプロジェクトを作成
数種類 (クラス) の画像セットをWebカメラで撮影
「Train Model」ボタンで学習開始
Previewで確認、いまいちな場合は画像の撮影からやり直し

最初は「Image Project」が簡単なのでおすすめです。どのような画像のセットを学習させると面白いか考えながらいろいろ試してみましょう!

学習モデルを書き出す

Teachable Machineでは学習させたモデルを書き出してプログラムで利用することが可能です。様々な開発環境に対応して、サンプルのソースコードの生成まで簡単に行うことが可能です。

対応している環境

Tensorflow
Tensorflow Lite
Tensorflow.js
p5.js + ml5.js ← 今回はこちらを使用

学習モデルの書き出し手順

Teachable Machineで新規のImageプロジェクトを作成
数種類 (クラス) の画像セットをWebカメラで撮影
「Train Model」ボタンで学習開始
Previewで確認、いまいちな場合は画像の撮影からやり直し
問題無ければ「Export Model」ボタンを押す
Tensorflow.js > Upload (shareable linke) > p5.jsを選択して「Upload my model」ボタンを押す

書き出し設定

学習させたモデルをp5.jsに読み込む

p5.js Editorにログイン
ファイルを保存して自分のプロジェクトに
p5.jsのサンプルコードをp5.js Editorで開く
モデルのURLを書き換える

... (前略) ...

// Classifier Variable
let classifier;
// Model URL
let imageModelURL = ''; // ← ここをアップロードしたモデルのURLに

... (後略)...

実習2: Teachable Machine + p5.jsで独自のスケッチを作ってみる

Teachable Machine + p5.js + ml5.jsをローカルでプログラミングする手順

オフィシャルに提供されている p5.jsのサンプルコードをベースに
indx.htmlをサンプルと同じものに
sketch.jsをコピー&ペースト
モデルのURLを書き換え

サンプルコードに日本語のコメントを入れたバージョンを作成しました

実行結果

ポイント! サンプルコードのどこで分類を行っているのかを読み解く

重要なのは、下記の関数

// 分類結果を取得
function gotResult(error, results) {
  // エラー処理
  if (error) {
    console.error(error);
    return;
  }

  // 結果をコンソールに表示
  console.log(results[0]);

  // 分類結果のラベルを取得
  label = results[0].label;
  // 再度分類処理を行う
  classifyVideo();
}

重要なのは、results[] 配列

画像を解析してその確度 (そのクラスである確率) が高い順番に配列に格納されている
ラベル名 (lavel) と確度 (confidence) が取得できる

例えば一番確度の高い結果のラベルとその確度を取得するには

let label = result[0].label; //ラベル
let confidence = result[0].confidence; //確度

分類結果のラベル (文字列) と信頼度 (0.0 – 1.0 の値)の一覧を表示

分類結果のラベル (文字列) と信頼度 (0.0 – 1.0 の値)の一覧を表示するサンプル

sketch.js

実行結果

Emoji Cam

ちょっと工夫してみる。表情によって絵文字を表示するカメラのサンプル。この例では、普通の顔 (normal)、笑顔 (smile) 、悲しい顔 (sad) の3種類を学習してみました。

sketch.js

実行結果

転移学習 – TeachableMachineの原理

一般的に画像のクラス分け (Classification) には膨大な画像データが必要
例: ImageNet
- 物体認識ソフトウェアの研究で用いるために設計された大規模な画像データベース
- 2024年4月現在、14,197,122個のラベルと画像のセット

では何故Teachable Machineでは数十枚程度の画像で正確なクラス分けができているのか?

→ 転移学習 (Transfer Learning) という手法を採用している

転移学習

転移学習とは、あるタスク向けに学習したモデルを、類似したタスクを実行するモデルの開始点として使用するディープラーニングの手法
転移学習によるネットワークの更新と再学習は、ゼロからネットワークを学習させるよりも高速で簡単
転移学習は画像分類、オブジェクト検出、音声認識などのアプリケーションに使用される

参考: Transfer Learning – 転移学習 – MathWorks

転移学習のイメージ

次回までの課題

Teachable Machine + p5.js + ml5.jsで何ができるか考える!

ここまでの内容を踏まえて、Teachable Machine + p5.js + ml5.jsの組み合わせでオリジナルのスケッチを作成してみましょう
あまり壮大なものでなく、ちょっとしたアイデアで
例:
- 指の向きで図形を移動
- 表情とEmojiを対応させる
- 笑顔で変化する
- ..etc.

しかし、1週間で自分のオリジナルにのコードによる作品を完成するのは大変かもしれません。以下の2つのステップで可能なところまで目指してください。

ステップ 1: 作品のアイデアを発表 (全員)

実際にコーディングして完成するところまでは至らず作品のアイデアだけ発表
どんなことが実現できたら面白いか、ただし今回の環境で技術的に範囲で
以下の内容を含むこと
- 何の画像を学習させるのか、題材とそのバリエーションについて
- その画像を使用してどのような反応をさせるのか
- 自分が面白いと思うポイント

ステップ 2: 実際にコーディング (できる人は目指して欲しい)

ステップ1で考案したアイデアを実際に実現してみる!
Teachable Machine + p5.js + ml5.jsで

制作テンプレート

以下にここまで解説してきた制作用のテンプレートとサンプル一式が格納されています。Zipでダウンロードして活用してください!

https://github.com/tado/TeachableMachineExample