JavaScriptで外部デバイスとの通信や機械学習による画像・音の認識を扱う / jsfes 2021 summer

Transcript

1. JavaScriptで外部デバイスとの通信や 機械学習による画像・音の認識を扱う 2021年7月17日 (土) 夏のJavascript祭り Online 　　豊田 陽介 ( @youtoy )
2. 豊田陽介（@youtoy） 自己紹介 普段は、某通信会社の研究所勤務 自宅に各種デバイス等 がたくさん ビジュアルプログラミング・ IoTなどのコミュニティを 単独・共同で主催 ガジェット好き その他 IT系イベント主催・登壇なども、 子ども向けの活動いろいろ（IT系以外も） プライベートでの活動
3. 2年前にも登壇させていただきました ガジェットとは切っても切れない縁が...w
4. 技術情報誌での連載記事（全4回） 月刊I/O で Teachable Machine に関する話
5. 今日のトピック： 「機械学習」 「外部デバイスとの通信」
6. 今日の登壇に関わる主なキーワード ・Teachable Machine ・Lobe ・TensorFlow.js ・ml5.js ・TFJS Task API ・MediaPipe（JavaScript版） ・TensorFlow Lite Model Maker 機械学習関連 デバイス通信関連 ・Web Bluetooth API ・Web Serial API その他 ・p5.js
7. 説明は一部ざっくり という感じにしつつ
8. 今日のキーワードに関わる情報 【キーワード】 user:youtoy で検索 Qiita の記事で
9. 実現できることの例① （2つのトピックに関連）
10. 「JavaScript x 機械学習」に触れ始めた一番強いきかっけ 構成的には PCのChrome上で開いた HTML＋JavaScript
11. 全体構成 PC （Chromo・ 　内蔵マイク） toio＋専用マット BLE HTML + JavaScript ハンドベル・ 卓上ベル・声 音・声 Web Bluetooth API Teachable Machine （音の機械学習）
12. 展示イベントで子どもから大人まで楽しく Maker Faire 向け：分かりやすさ・体験しやすさ重視
13. 「機械学習」の話から （ディープラーニングの話）
14. ディープラーニングの流れ（画像分類） 学習 機械学習 モデル 推論 「これは 猫 です」 未知のデータ 学習用データ
15. JavaScriptで機械学習（いくつかの例） 学習 推論 ・自前のデータを利用 　・ノンコーディング 　・JavaScript ・既存の学習済みモデルを利用 ・JavaScript 　・直接処理 　・API利用 自分で用意 / ありものを利用 入力データと機械学習モデル を使った処理 / 入力データを 渡す処理をして結果を得る
16. 自前のデータで 機械学習モデルを用意 （ノンコーディング）
17. GUI操作のみで機械学習モデル作成！ Googleさんや Microsoftさんが提供 ・Teachable Machine（Webサイト上） ・Lobe（アプリ） https://teachablemachine.withgoogle.com/ https://www.lobe.ai/ 特長 ・データの取り込みが簡単 ・少ないデータでもOK（転移学習） ・コードを書かず学習＆推論 ・機械学習モデルは様々な形式での 　出力も（Web用・スマホ用など） 画像、音、人の姿勢 画像のみ
18. 機械学習モデルをJavaScriptで利用 Teachable Machine のサンプルコードの一部 モデルの読み込み 推論の処理
19. Webサイト上で機械学習が行える仕組み 裏側の仕組みは TensorFlow.js で 実装
20. JavaScriptで 推論を行う際に 利用する技術
21. JavaScriptで扱えるモデルの出力形式 ・TensorFlow.js 　・プレーンな JavaScript 　・p5.js（ml5.js） ・TensorFlow Lite 　・TFJS Task API TM Lobe TM ＋ 出力形式ごとのサンプル実装 TM Lobe Teachable Machine Lobe 少し特殊
22. TFJS Task API？
23. TFJS Task API での画像分類 モバイル向けの TensorFlow Lite のモデルを JavaScript で 使える仕組み（Google I/O 2021 で発表） API を使うための読み込み 1行 カスタムモデルの読み込みと推論 プログラムはシンプル @0.0.1-alpha.8
24. 実現できることの例② （学習済みモデルの利用）
25. 人を対象にした画像認識（両手の認識の例） ブラウザ上で実行可能
26. 学習済みのモデルを JavaScriptで
27. 自分が利用したことがあるものの例 Googleさんが提供している仕組み ・MediaPipe の JavaScript版（TensorFlow.jsベース） 　・Face Mesh 　・Face Detection 　・Hands 　・Holistic 　・Pose 　・Selfie Segmentation
28. 認識できる対象の例（一部抜粋） Hands Face Mesh
29. 認識できる対象の例（一部抜粋） Holistic Selfie Segmentation
30. 実現できることの例③
31. 人を対象にした画像認識（背景分離の例） ブラウザ上で実行可能
32. 「外部デバイスとの通信」
33. JavaScriptで外部デバイスとの通信 ブラウザ上で実行 Node.js 　・Web Serial 　・Web Bluetooth 　・Fetch API 　・axios等を利用 　・WebSocket API 　・MQTT.js等を利用 　・Node Serialport 　・noble・bleno 　・Fetch API 　・axios等を利用 　・ws等を利用 　・MQTT.js等を利用 シリアル通信 　 BLE 　 HTTPリクエスト 　 WebSocket 　 MQTT
34. デバイス系のAPIについてはこんな話も •Appleがプライバシ上の理由から、NFC、Bluetooth、他14のWeb APIの実装を拒否 　https://www.infoq.com/jp/news/2020/07/apple-fingerprinting-privacy/ •Mozilla Specification Positions 　https://mozilla.github.io/standards-positions/ 自分に閉じて使うパターンではない場合、特に注意！ （ユーザが許可する操作なしに利用できないもの 　ではあるものの...）
35. 実装状況（caniuse.comより）
36. Bluetoothを扱う
37. Web Bluetooth API でのデバイス制御 ・ブラウザから BLE 対応デバイスを制御するもの ⇒ toio・M5Stack・micro:bit 等に対して使った例 手の動きに連動した 6台の toio の同時制御 toio の姿勢角 （ロール・ピッチ・ 　ヨー）のグラフ化 M5Stack Core2 へ 文字送信・表示、 画面の色変更
38. Web Bluetooth API でのデバイス制御 このような処理をして接続 した上で読み書き等の処理 （Read、Write、Notify） navigator.bluetooth. requestDevice
39. Web Bluetooth API でのスキャン デバイス制御で使っていたもの 　navigator.bluetooth.requestDevice 別のやり方が必要 　navigator.bluetooth.requestLEScan chrome://flags/#enable- experimental-web-platform- features を Enable に 温度 25.1℃ 湿度 56％
40. 実現できることの例④
41. 有線でのデータ取得（シリアル通信の例） ブラウザ上で実行可能
42. Web Serial API で実装していく 細かな部分を読み解いていくのは疲れそうだったけど、仕様を読みながら 【引用元】 Web Serial API https://wicg.github.io/serial/
43. Web Serial API での書き込み EXAMPLE と書かれた複数の項目からプログラムの部分を拾う 【引用元】 Web Serial API　　 https://wicg.github.io/serial/ メインの処理は 10行くらい あれば良さそうかも？
44. Web Serial API での読み取り 1行のまとまりでデバイスから書きだした内容が分割される！？
45. Web Serial API での読み取り（続き） 複数の入力をまとめてから改行部分で分割する処理の話がある Node.js で Node Serialport を使う場合だと、 Readline Parser とかでうまく処理してくれる
46. グラフ描画に使ったライブラリ chartjs-plugin-streaming 動画で使っていたのは これの旧バージョン
47. ここからは時間が 残っていた場合に
48. TensorFlow Lite Model Maker
49. TensorFlow Lite Model Maker 機械学習モデルの作成を 簡素化してくれる （言語は Python）
50. TensorFlow Lite Model Maker プログラムは短い Google Colab で開いて、 ページ上でポチポチ操作して実行
51. 終わり！