26 lines
25 KiB
HTML
26 lines
25 KiB
HTML
<!doctype html><html><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>『オコゲ』でぐーちょきぱーを機械学習 | おこげ俱楽部</title><meta name="title" content="『オコゲ』でぐーちょきぱーを機械学習 | おこげ俱楽部"><meta name="description" content="『オコゲ』デスクトップ版の機能を動画でご紹介。サーマルカメラと TensorFlow を使ったインタラクティブでリアルタイムな機械学習。"><meta name="keywords" content="ICT-Course,動画,オコゲ,オコゲ,blockly,プログラミング,上野学習塾"><meta name="author" content="ocogeclub"><meta name="robots" content="index, follow"><link rel="canonical" href="https://ocoge.club/2022-05-16_tf-janken/"><link rel="shortcut icon" type="image/png" href="/assets/img/favicon.png"><link rel="apple-touch-icon" href="/assets/img/apple-touch-icon.png"><link rel="preconnect" href="https://fonts.googleapis.com"><link rel="preconnect" href="https://fonts.gstatic.com" crossorigin><link href="https://fonts.googleapis.com/css2?family=Nunito:wght@500&display=swap" rel="stylesheet"><link href="https://fonts.googleapis.com/css2?family=Kosugi+Maru&display=swap" rel="stylesheet"><link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap"><script src="https://kit.fontawesome.com/73f7be0650.js" crossorigin="anonymous"></script><link rel="stylesheet" href="/assets/floatbox/floatbox.css"><script src="/assets/floatbox/floatbox.js" defer="defer"></script><link rel="stylesheet" href="/assets/css/ocmain.css"><link rel="stylesheet" href="/assets/css/main.css"><link rel="stylesheet" href="/assets/css/footer.css"><link rel="stylesheet" href="/assets/css/post.css"><meta property="og:image" content="https://ocoge.club/assets/img/ogp_janken.webp"><meta property="og:title" content="『オコゲ』でぐーちょきぱーを機械学習 | おこげ俱楽部"><meta property="og:description" content="『オコゲ』デスクトップ版の機能を動画でご紹介。サーマルカメラと TensorFlow を使ったインタラクティブでリアルタイムな機械学習。"><meta property="og:url" content="https://ocoge.club/2022-05-16_tf-janken/"><meta property="og:site_name" content="おこげ俱楽部"><meta name="twitter:card" content="summary"><meta name="twitter:site" content="@ocogeclub"></head><body class="flex flex-col h-screen bg-white text-gray-800 break-words"><header id="header" class="header-shadow bg-white px-6 py-5 z-50 fixed w-full top-0 transition-all transform ease-in-out duration-500"><div class="max-w-5xl mx-auto flex items-center flex-wrap justify-between"><div class="sm:mr-8"><a class="flex items-center" href="/"><span class="text-xl text-teal-700 font-semibold self-center"><img src="/assets/img/ocoge_title_kogecha.webp" title="おこげ俱楽部" alt="おこげ俱楽部" id="site_title"></span></a></div><nav id="menu" class="order-last md:order-none items-center flex-grow w-full md:w-auto md:flex hidden mt-2 md:mt-0"><a href="/about" class="block mt-4 md:inline-block md:mt-0 font-medium text-gray-700 hover:text-teal-600 text-base mr-4">About</a> <a href="/tags" class="block mt-4 md:inline-block md:mt-0 font-medium text-gray-700 hover:text-teal-600 text-base mr-4">Tag List</a> <a href="https://cloud.ocoge.club/" target="_blank" rel="noopener" class="block mt-4 md:inline-block md:mt-0 font-medium text-gray-700 hover:text-teal-600 text-base mr-4">Cloud</a> <a href="https://mail.ocoge.club/" target="_blank" rel="noopener" class="block mt-4 md:inline-block md:mt-0 font-medium text-gray-700 hover:text-teal-600 text-base mr-4">Mail</a> <a href="https://git.ocoge.club/ocogeclub/pages" target="_blank" rel="noopener" class="block mt-4 md:inline-block md:mt-0 font-medium text-gray-700 hover:text-teal-600 text-base mr-4">ocogIt</a></nav><form id="search" action="/search" class="order-last sm:order-none flex-grow items-center justify-end hidden sm:block mt-6 sm:mt-0"><label class="visually-hidden" for="header-searchbox">記事タイトル/概要を検索 ...</label> <input type="text" id="header-searchbox" name="q" placeholder="記事タイトル/概要を検索 ..." class="w-full sm:max-w-xs bg-gray-200 border border-transparent float-right focus:bg-white focus:border-gray-300 focus:outline-none h-8 p-4 placeholder-gray-500 rounded text-gray-700 text-sm"></form><div id="menu-toggle" class="flex items-center md:hidden text-gray-700 hover:text-teal-600 cursor-pointer sm:ml-6"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-menu"><line x1="3" y1="12" x2="21" y2="12"></line><line x1="3" y1="6" x2="21" y2="6"></line><line x1="3" y1="18" x2="21" y2="18"></line></svg></div></div></header><main class="mx-7 lg:mx-6 mt-32 flex-grow"><article class="max-w-5xl mx-auto"><header class="mb-14"><h1 class="text-3xl text-center font-bold leading-normal text-gray-900 mt-0 mb-3">『オコゲ』でぐーちょきぱーを機械学習</h1><div class="text-center"><i class="fa-regular fa-clock"></i> 2022年5月16日</div><div class="mt-3 text-center"><a href="/tags/ICT-Course" class="inline-block bg-gray-200 rounded-full px-3 py-1 text-sm font-medium text-gray-700 m-0.5">#ICT-Course</a> <a href="/tags/動画" class="inline-block bg-gray-200 rounded-full px-3 py-1 text-sm font-medium text-gray-700 m-0.5">#動画</a> <a href="/tags/オコゲ" class="inline-block bg-gray-200 rounded-full px-3 py-1 text-sm font-medium text-gray-700 m-0.5">#オコゲ</a></div><div class="mt-10 -mx-7 md:mx-0"><img class="w-full max-w-2xl mx-auto" src="/assets/img/ogp_janken.webp" alt="This post thumbnail"></div></header><div id="content" class="prose text-gray-800 max-w-none"><div class="box_stripe"><p>Raspberry Pi 専用デスクトップアプリ『オコゲ』は、Raspberry Pi の GPIO に直接アクセス<sup><a href="#1">1</a></sup>することができます。また、特定のモジュールに対応した専用ブロック<sup><a href="#2">2</a></sup>も用意されています。<br>ここでは、デスクトップ版『オコゲ』の目玉機能のひとつ、GPIO と TensorFlow.js<sup><a href="#3">3</a></sup> を使った「機械学習体験」をご紹介いたします。</p></div><div class="balloon"><div class="faceicon"><img src="/assets/img/tama.webp"><p>タマちー</p></div><div class="chatting"><div class="says">機械学習？目玉焼きの？</div></div></div><div class="balloon_right"><div class="faceicon_right"><img src="/assets/img/mimmy.webp"><p>ミミィ</p></div><div class="chatting"><div class="says_right"><p>目玉機能ね！目玉といえるかどうかは保証できないけど、機械学習はコンピュータ界隈で今もっともホットな話題のひとつではあるわね！</p></div></div></div><h2>機械学習による画像分類（ぐーちょきぱー）</h2><p>一言で機械学習といっても、その内容は多岐に渡ります。『オコゲ』が実装するのは「画像の分類」です。<br>今回は赤外線アレイセンサ（サーマルカメラ）でとらえたじゃんけんのハンドポーズ（ぐー・ちょき・ぱー）を Raspberry Pi で学習してみることにしましょう。</p><figure class="center"><img loading="lazy" src="/assets/img/grd-tns_dgst.gif"><figcaption>ぐーちょきぱーがわかるタマちー</figcaption></figure><p>なんかゲームとか作れそうですね。Raspberry Pi とあっちむいてほいとか勝てそうにないですね！</p><h2>機械学習とは</h2><blockquote><p>機械学習とは、データを分析する方法の１つで、データから、「機械」（コンピューター）が自動で「学習し、データの背景にあるルールやパターンを発見する方法。近年では、学習した成果に基づいて「予測・判断」することが重視されるようになった。<span class="tsubuyaki"><a href="https://www.nri.com/jp/knowledge/glossary/lst/ka/machine_learning">機械学習 | 用語解説 | 野村総合研究所(NRI)</a></span></p></blockquote><p>Google で「機械学習」を検索してトップに表示される野村総研の文章を引用してみました。 機械学習は「人工知能(AI)」を実現するためのデータ分析技術の１つで、人間や動物が経験を通して自然に学習するのと同様のことをコンピュータでもやろうというものです。 本来コンピュータは高速で正確な演算が得意な半面、あまり融通が利きません。例えば、従来のコンピュータに「四角」という図形を教えるとすると</p><div class="balloon_right"><div class="faceicon_right"><img src="/assets/img/square.webp"><p></p></div><div class="chatting"><div class="says_right"><p>これは四角</p></div></div></div><div class="balloon"><div class="faceicon"><img src="/assets/img/tama.webp"><p></p></div><div class="chatting"><div class="says">うん</div></div></div><div class="balloon_right"><div class="faceicon_right"><img src="/assets/img/parallelogram.webp"><p></p></div><div class="chatting"><div class="says_right"><p>これも四角</p></div></div></div><div class="balloon"><div class="faceicon"><img src="/assets/img/tama.webp"><p></p></div><div class="chatting"><div class="says">うん</div></div></div><div class="balloon_right"><div class="faceicon_right"><img src="/assets/img/square.webp"><p></p></div><div class="chatting"><div class="says_right"><p>これは？</p></div></div></div><div class="balloon"><div class="faceicon"><img src="/assets/img/tama.webp"><p></p></div><div class="chatting"><div class="says">四角</div></div></div><div class="balloon_right"><div class="faceicon_right"><img src="/assets/img/rectangle.webp"><p></p></div><div class="chatting"><div class="says_right"><p>じゃあこれは？</p></div></div></div><div class="balloon"><div class="faceicon"><img src="/assets/img/tama.webp"><p></p></div><div class="chatting"><div class="think-l-bal-s"></div><div class="think-l-bal-l"></div><div class="tamathink"><p>…？<br>見たことない形だヨ</p></div></div></div><p>すでに覚えたものと全く同じ「正方形」は認識できても、教わっていない「長方形」は理解できません。<br>機械学習の仕組みを組み込んだシステムでは同じように教える（学習させる）と</p><div class="balloon_right"><div class="faceicon_right"><img src="/assets/img/rectangle.webp"><p></p></div><div class="chatting"><div class="says_right"><p>これは？</p></div></div></div><div class="balloon"><div class="faceicon"><img src="/assets/img/tama.webp"><p></p></div><div class="chatting"><div class="says">たぶん四角</div></div></div><p>この「たぶん」が重要で、この場合、コンピュータは正方形と平行四辺形から「四角」という図形の特徴を <span style="font-weight:bold; color:black">自分で勝手に</span> 見つけ出し、長方形がその特徴を持っていると判定して「90％の確率で四角」などと答えます。このように学習したデータを使用して新しいデータに対して予測や判断を行うことを「推論」といいます。</p><h2>AMG8833 8×8 赤外線アレイセンサ (Grid-EYE)</h2><figure style="max-width: 211px; margin: 0 auto;"><div class="floatbox" data-fb-options="colorTheme:silver" style="width: 100%;"><a href="/assets/img/grideye-module.webp" title=""><img loading="lazy" src="/assets/img/grideye-module.webp" style="width: 100%;"></a></div><figcaption><i class="fa-solid fa-magnifying-glass"></i> クリックで拡大</figcaption></figure><p><a href="https://www.switch-science.com/catalog/3395/" target="_new" title="">Grid-EYE(AMG8833) <span style="color: gray; font-size: smaller;"><i class="fa-solid fa-arrow-up-right-from-square"></i></span> </a>は、Panasonic が開発した縦横８ピクセル（64 画素）の赤外線センサ（サーマルカメラ）です。I2C 接続で利用することができ、記事トップのカバー写真のような簡単な回路で温度データを取得できます。温度データは 64 画素それぞれの温度で、次のようなものです。</p><pre><code>13.25,13.25,18,16.75,16.5,15.75,14.25,12.25,12.75,14,20,20,19.25,17.25,15.25,13.25,14,15.25,21,22,21.25,19.75,15.25,13.25,15,19.25,22,22.5,21.75,19.25,14.25,13,14.75,20.75,23.25,23.25,22.5,17,13.75,13,14.5,18,23,23.5,21.75,15.25,13.25,12.5,14.5,15.75,21.25,23.5,20,15,13.5,13.25,18.25,17.75,21.75,24,20.75,15.25,14.5,14
|
||
</code></pre><p>これを温度によって色付けして描画することで次のような画像を得ることができます。</p><figure class="center"><img loading="lazy" src="/assets/img/8x8hand_original.webp"><figcaption></figcaption></figure><div class="balloon"><div class="faceicon"><img src="/assets/img/tama.webp"><p></p></div><div class="chatting"><div class="think-l-bal-s"></div><div class="think-l-bal-l"></div><div class="tamathink"><p>見えないし</p></div></div></div><figure class="center"><img loading="lazy" src="/assets/img/8x8hand_nosmooth.webp"><figcaption></figcaption></figure><p>20 倍に拡大してみました。これでも何が映っているのかなんとなくわかりますが、スムージングをかけることで少し見やすくなります。</p><figure class="center"><img loading="lazy" src="/assets/img/8x8hand_smooth.webp"><figcaption></figcaption></figure><p>手と言われれば、手。ちなみに左下のちょっとだけ赤い部分は、筆者の頭が写り込んだものです。最初、天井に温度が高い部分があるのかと思って上を見たりしていました w</p><p><span class="tsubuyaki">ところで、こんな感じの映像をどこかで見たことがありませんか？<br>そう、<a href="https://www.nintendo.co.jp/switch/as3ma/traning/index.html?cat=yubi" target="_new" title="">これ <span style="color: gray; font-size: smaller;"><i class="fa-solid fa-arrow-up-right-from-square"></i></span> </a>です。まさか Joy-Con にサーマルカメラが内蔵されていようとは。テレビ CM を見て「おおお…」などと一人で盛り上がっていたのは内緒です。そのほか距離センサなどが同時に使用できるようになっている様子。ジャイロも入っているしホンマどえらいコントローラーやでぇ…</span></p><h2>やってみる</h2><p>プログラムは以下のようなものです。</p><figure class="center"><img loading="lazy" src="/assets/img/grideye-tensor_blocks.webp"><figcaption></figcaption></figure><p>※ボタンの作成など、本質に関係のない一部のブロックは折り畳み／省略しています。</p><p>センサで取得した画像はキャンバスに表示されるのようになっているので、これを「なし（手がかざされていない状態）」「ぐー」「ちょき」「ぱ」の４つのボタンを使って分類します。<br>キャンバス上の画像に対する推論は常時実行されていて、結果はマスコットキャラクターの横の吹き出しに表示されます。</p><p>学習を行う様子は動画をご覧ください。</p><p><video loading="lazy" controls="" src="/assets/img/grideye-tensorflow.mp4" style="margin: auto;"></video></p><ol><li>何も学習していない状態では「undefined」が表示される。センサーに手をかざしてじゃんけんの形を作っても反応なし</li><li>手をかざさない状態を「なし」ボタンをクリックして学習させる（このとき画面には「じゃんけん…」と表示）</li><li>同様にして「ぐー」「ちょき」「ぱ」を学習。いずれも２回クリックで正しい推論をするようになった。念のため３回クリック</li><li>その後はハンドポーズを正しく答えることができるようになる</li></ol><p>なんということでしょう。たった 3×4=12 回のクリックでぐーちょきぱー判別の機械学習ができてしまいました。上のプログラムでは使われていませんが、学習したデータを保存・復元するブロックもありますので、育てた学習データを他のプログラムから呼び出して利用することができます。</p><h2>ちょっと詳しく</h2><p>『オコゲ』では機械学習ライブラリとして、Google が開発した <a href="https://www.tensorflow.org/" target="_new" title="">TensorFlow <span style="color: gray; font-size: smaller;"><i class="fa-solid fa-arrow-up-right-from-square"></i></span> </a>（テンサーフロー）を利用しています。Google がこれをオープンソースとして公開したことで、機械学習を誰もがすぐに利用できるようになりました。Google 側もわかりやすいチュートリアルを用意したりして普及に余念がありません。</p><p>しかし、機械学習を一からやろうとすると、大量（画像何千枚とかのレベル）のサンプルデータとそれを学習するための高い処理能力を持つコンピュータ、そして膨大な学習時間が必要です。Raspberry Pi のような非力な子はお呼びではありません。理論も難解で（<a href="https://ja.wikipedia.org/wiki/%E3%83%86%E3%83%B3%E3%82%BD%E3%83%AB" target="_new" title="">テンソル <span style="color: gray; font-size: smaller;"><i class="fa-solid fa-arrow-up-right-from-square"></i></span> </a>って何さ？）、「ばあさんや、なんか流行りらしいからちょっと齧ってみようかね」というわけにはなかなかいきません。先人が作った機械学習のデータ（モデルと呼びます）を利用するという手もありますが、応用がききません。犬種を分類する学習済みモデルを猫に使うことはできないからです。</p><p>そこで考案されたのが「転移学習 (Transfer Learning)」です。ある分野ですでに学習済みのモデルを別の分野での推論に転用して、少ないサンプルデータと学習時間で成果を出そうという手法です。『オコゲ』の機械学習ブロックは、この転移学習を利用して簡単お手軽に機械学習を行うことができるようになっています。</p><p>今回のような「手のポーズの認識」であれば、そのまま使える学習済みモデルとして、Web カメラを使った <a href="https://github.com/tensorflow/tfjs-models/tree/master/handpose" target="_new" title="">MediaPipe Handpose <span style="color: gray; font-size: smaller;"><i class="fa-solid fa-arrow-up-right-from-square"></i></span> </a>（または<a href="https://github.com/tensorflow/tfjs-models/tree/master/hand-pose-detection" target="_new" title="">こっち <span style="color: gray; font-size: smaller;"><i class="fa-solid fa-arrow-up-right-from-square"></i></span> </a>）も利用できるだろうと思いますが、当たり前だけど手にしか反応しない（前述の「応用がきかない」）のと、Web カメラなので Raspberry Pi である必要がない、なにより「学習をさせる」という面白みがないのでここでは扱うのをやめました。サーマルカメラを使ったここで紹介したやり方なら、ちょっと離れたところから上半身が映るようにして例えば <a href="https://www.google.com/search?q=%E3%83%A4%E3%83%B3%E3%82%B0%E3%83%9E%E3%83%B3&client=firefox-b-d&channel=crow5&sxsrf=ALiCzsYBHeiV-1OPBaViMgeSnhYAEcV5sg:1652690019938&source=lnms&tbm=isch&sa=X&ved=2ahUKEwjqqb-MzuP3AhUCad4KHUdKDN0Q_AUoAnoECAEQBA&biw=1006&bih=960&dpr=1" target="_new" title="">「ヤングマン」のポーズ <span style="color: gray; font-size: smaller;"><i class="fa-solid fa-arrow-up-right-from-square"></i></span> </a>の認識などもできるかもしれません。</p><div class="balloon_right"><div class="faceicon_right"><img src="/assets/img/mimmy.webp"><p></p></div><div class="chatting"><div class="says_right"><p>ポーズをとるのが恥ずかしくて試してないんですって！</p></div></div></div><div class="balloon"><div class="faceicon"><img src="/assets/img/tama.webp"><p></p></div><div class="chatting"><div class="think-l-bal-s"></div><div class="think-l-bal-l"></div><div class="tamathink"><p>誰も見てやしないのにね…</p></div></div></div><h2>注釈</h2><p><small id="1">1. pigpio デーモンを利用するので厳密には直接ではないが...</small><br><small id="2">2. 2022 年５月現在、センサー専用ブロックは次の通り。<br>● 赤外線アレイセンサ（サーマルカメラ）AMG8833<br>● ジェスチャーセンサー PAJ7620<br>● 温湿度気圧センサー BME280<br>● 有機 EL ディスプレイ SSD1306</small><br><small id="3">3. <a href="https://www.tensorflow.org/js?hl=ja" target="_new" title="">TensorFlow.js <span style="color: gray; font-size: smaller;"><i class="fa-solid fa-arrow-up-right-from-square"></i></span> </a>は、JavaScript 上で利用できる TensorFlow 実装。<br>TensorFlow といえばプログラム言語は Python が定番だが、Raspberry Pi では最新の TensorFlow を使おうと思うと、できないこともないようではあるものの、環境構築やインストールなど、少々敷居が高い。ありていに言うと、面倒くさい。TensorFlow.js は、それ自体が JavaScript で書かれているため、ブラウザ上の JavaScript から簡単に扱うことができ、導入の手間もほとんどかからない。スクリプト言語で書かれているが故の速度的な問題も <a href="https://github.com/tensorflow/tfjs/tree/master/tfjs-backend-wasm" target="_new" title="">WebAssembly バックエンド <span style="color: gray; font-size: smaller;"><i class="fa-solid fa-arrow-up-right-from-square"></i></span> </a>(wasm) でほぼ解決。そのまま使えるいくつもの有用な<a href="https://www.tensorflow.org/js/models?hl=ja" target="_new" title="">学習済みモデル <span style="color: gray; font-size: smaller;"><i class="fa-solid fa-arrow-up-right-from-square"></i></span> </a>があらかじめ用意されているうえ、AI に触れたことのない Web フロントエンジニアを意識しているようで、初学者向けの平易なドキュメントも充実している。「画像の転移学習」にはステップバイステップの丁寧な<a href="https://codelabs.developers.google.com/codelabs/tensorflowjs-teachablemachine-codelab?hl=ja#0" target="_new" title="">チュートリアル <span style="color: gray; font-size: smaller;"><i class="fa-solid fa-arrow-up-right-from-square"></i></span> </a>まで存在する。『オコゲ』を Blockly + Electron で開発してきたのは、もしかしたらこのためだったんじゃないかと思うほどの、あつらえたかのような環境であった。正味の話、前述の転移学習チュートリアルがなかったら機械学習ブロックの導入は諦めてたかもしれない。サンキューグーグル。</small></p></div><div class="mt-10"><div id="disqus_thread"></div><script>let disqusLoaded = false;
|
||
let disqus_config = function () {
|
||
this.page.url = 'https://ocoge.club/2022-05-16_tf-janken/';
|
||
this.page.identifier = '2022-05-16_tf-janken';
|
||
};
|
||
function loadComments() {
|
||
if (!disqusLoaded) {
|
||
disqusLoaded = true;
|
||
const d = document, s = d.createElement('script');
|
||
s.src = '//ocogeclub.disqus.com/embed.js';
|
||
(d.head || d.body).appendChild(s);
|
||
}
|
||
}
|
||
if(!!window.IntersectionObserver) {
|
||
const disqusEl = document.getElementById('disqus_thread');
|
||
const intersectionObserver = new IntersectionObserver(function(entries, observer) {
|
||
if (entries && entries[0] && entries[0].isIntersecting) {
|
||
loadComments();
|
||
observer.unobserve(disqusEl);
|
||
}
|
||
});
|
||
intersectionObserver.observe(disqusEl);
|
||
}</script></div></article></main><footer class="mt-20 px-10 py-8 bg-gray-200"><div id="footer-badge"><a href="https://git.ocoge.club/" target="_new"><img loading="lazy" src="/assets/img/git-ocogeclub.svg" class="footer-img"></a><a href="http://creativecommons.org/licenses/by-sa/4.0/deed.ja" target="_new"><img loading="lazy" src="/assets/img/License_BY-SA_4.0.svg" class="footer-img"></a></div><div class="max-w-5xl mx-auto text-gray-700 text-center">© 2024 <a href="/" class="font-medium" target="_blank" rel="noopener">おこげ俱楽部</a>. Made by <a href="https://ocoge.club" target="_blank" rel="noopener">ocogeclub</a> using <a href="https://www.11ty.dev" target="_blank" rel="noopener">Eleventy</a> and <a href="https://github.com/dafiulh/vredeburg" target="_blank" rel="noopener">Vredeburg</a>.<br></div></footer><script src="/assets/js/bundle.js"></script></body><script>window.addEventListener('load', (event) => {
|
||
document.getElementsByTagName('html')[0].style.display='block';
|
||
});</script></html> |