ml5.js チュートリアル サンプル集

河合勝彦『ml5.js チュートリアル』掲載コードの動作デモ集 · ml5.js v1.3.1

このページは GitHub Pages 上で動作する 19 サンプル一覧です。各カードをクリックすると単独で動作する HTML が開きます。ウェブカメラ/マイク使用のサンプルではブラウザの許可ダイアログに「許可」と答えてください。

凡例: 📷 カメラ 🎤 マイク 🖼 画像 🧠 ブラウザ学習

導入

01ml5.js バージョン確認

ml5.version をキャンバスに表示する最小サンプル。

02ウェブカメラ基本

createCapture(VIDEO) で映像をキャンバスに描画。📷

学習済みモデル ── 画像

03静止画の画像分類

同梱の cat.jpg を MobileNet で分類。🖼

04ウェブカメラ画像分類

カメラ映像を MobileNet でリアルタイム分類。📷

学習済みモデル ── 姿勢・顔・身体

05BodyPose キーポイント

17 個の関節キーポイントを点で描画 (MoveNet)。📷

06BodyPose スケルトン

getSkeleton() の組で骨格を線描画。📷

07右肘の角度計算

肩・肘・手首の 3 点から角度を計算。📷

08HandPose 指先追跡

左右の人差し指の先端を色付きの円で表示。📷

09ピンチで描画

親指と人差し指の距離 < 40px で軌跡を残す。[C] でクリア。📷

10FaceMesh 全点表示

顔の 468 ランドマークを点で表示。📷

11目だけ匿名化

leftEye/rightEye のバウンディングボックスで目を黒く塗る。📷

12背景置換 (クロマキー)

SelfieSegmentation で人物を抜き出し緑バックに合成。📷

13BodyPix 24 部位色分け

右手・左足・胴体など部位ごとに色分けマスク。📷

学習済みモデル ── 音声・テキスト

14音声で円を上下に動かす

マイクに "up"/"down" と発音。SpeechCommands18w 利用。🎤

15感情極性スライダー

英文をタイプすると肯定度 (0〜1) がリアルタイム表示。

自前モデル学習 (ブラウザ内学習)

16色名分類器 (分類)

9 件のサンプルで学習 → クリックした色を予測。🧠

17住宅価格 (回帰)

床面積と部屋数から価格を回帰予測。tfvis でグラフ表示。🧠

18カメラ 2 クラス転移学習

[A] OK / [B] NG で撮影 → [T] 学習 → [P] 予測 → [S] 保存。📷🧠

19神経進化 Flappy 風

50 個体が世代交代しながらパイプを潜り抜けることを学習。🧠

注意