「モノコトフェス#1」参加レポート: Stretch3でAIロボとじゃんけん対決

## はじめに

この記事は 日本システム技研(JSL) Advent Calendar 2024 - Qiita 13日目の記事です。


![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/680905/f7304874-bf7b-53b7-e6b9-22fb92f88924.png)


弊社が運営する[GEEKLAB.NAGANO](https://geeklab-nagano.com/)として、「モノコトフェス#1」に参加しました。
展示ブースでは、画像認識技術を用いたAIでじゃんけんする体験型プログラムを設置しました。
そのレポートをお届けします。

## イベント紹介 モノコトフェス#1

当日の朝は厳しい冷え込みと吹雪でしたが、多くの来場者が集まりました。悪天候の中お越しいただいた皆様、本当にありがとうございました🙏

会場は県立図書館の3Fで行われました。

特に、お子さん連れのご家族が多く居た印象を持ちました。

会場の雰囲気等は、主催者様が作成された以下のレポートが参考になります。

https://www.notion.so/1-10fc4727cabe804bb8bbe19bfa7bd08d?pvs=21

## 展示のコンセプトについて

### 背景

昨今、生成AIをはじめとするAI（人工知能）技術は非常に話題となっています。
しかし、実際にAIが何をしているのか、具体的に理解している人は多くありません。
この展示では、来場者が "AIについて、なんとなくわかった" と思ってもらうことをゴールとして設定しました。
ターゲットは、AIについて興味を持っているけど知らない大人の方や小さなお子さん向けです。

### 参考図書の出会い

展示の内容を考えているときに、私が手に取ったのが以下の書籍です。

「[Scratchではじめる機械学習 第2版](https://www.amazon.co.jp/Scratch%E3%81%A7%E3%81%AF%E3%81%98%E3%82%81%E3%82%8B%E6%A9%9F%E6%A2%B0%E5%AD%A6%E7%BF%92-%E7%AC%AC2%E7%89%88-%E2%80%95%E4%BD%9C%E3%82%8A%E3%81%AA%E3%81%8C%E3%82%89%E6%A5%BD%E3%81%97%E3%81%8F%E5%AD%A6%E3%81%B9%E3%82%8BAI%E3%83%97%E3%83%AD%E3%82%B0%E3%83%A9%E3%83%9F%E3%83%B3%E3%82%B0-%E7%9F%B3%E5%8E%9F-%E6%B7%B3%E4%B9%9F/dp/4814400829)」

この書籍を参考に、ブロック型ビジュアルプログラミング言語 `Scratch` を活用すれば、小さなお子さんにも親しみがあるのではないかと思いましたし、AIの機械学習の基礎を分かりやすく伝えられるかもしれないと思いました。

## 使用した技術

### Stretch3

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/680905/7e250c8b-063a-1568-4c0f-9de94abbdd3d.png)


#### 概要

公式ドキュメントによると、以下のように説明されています。

> Stretch3(ストレッチスリー)は自作の拡張機能を使えるように改造したScratch(スクラッチ)です。音声認識(スピーチ トゥー スクラッチ)、ポーズの認識(ポーズネット トゥー スクラッチ)、画像や音声を学習させることができる機械学習(エムエル トゥー スクラッチ)、ChatGPT(チャットジーピーティー トゥー スクラッチ)などが使えるいろいろな拡張機能があります。
> 

操作方法は`Scratch`とほぼ同じで、ブロックをドラッグ＆ドロップするだけでプログラミングを体験できます。
`Scratch`と異なる点として、現時点ではプロジェクトの共有機能は提供されていないこと等があります。
主な特徴としては、人工知能に関連する多くの拡張機能が存在しております。
本プログラムでは `ML2Scratch`を使用しました。

### ML2scratch

#### 概要

`ML2Scratch` は、機械学習を利用した画像認識を手軽に体験できる環境を提供します。公式ドキュメントによると、以下のように説明されています。

> 機械学習を使った画像認識が簡単に体験、利用できます。
Webカメラでいくつかの画像を撮り、ラベルを付けて学習すれば、似たような新たな画像を、学習結果をもとに分類することができます。キャプチャした画像はサーバーに送られることはなく、学習および分類はすべてブラウザ上で行われるのが特徴です。
> 

特に注目すべきは、少ない学習データからでも正確な判定が可能だという点です。

#### 学習データの量と質について

学習データがどのくらいあれば精度良く判定してくれるのかは、以下の記事が説明してくれていて、とても参考になります。

https://qiita.com/futakuchi0117/items/23482c5ef6e1d33b2d8d

要は、たった数十枚程度のデータだけでは高い精度のモデルを作るのは難しいということです。
ではなぜ、`ML2scratch` は少ないデータ量で高い精度のモデルを作ることができるのでしょうか? 
その答えは、事前学習済みモデルを活用しているからです。

`ML2scratch`の裏側では、機械学習用 `JavaScript` ライブラリの `TensorFlow.js` を使用しています。
すでに、学習済みのモデルを多く蓄積しており、そこから独自のデータを追加で学習させ、新たな知識を蓄えたモデルを作り出す仕組みとなっています。
この技術により、少ない学習データでも高い精度を実現することができるというです。

## 環境

本プログラムの動作確認を行った環境は、以下のとおりです。

### Mac環境

- ハードウェア: MacBook Pro 13-inch, Intel, 2020
- OS: Sonoma 14.6.1
- Webブラウザ: Google Chrome 131.0.6778.140

### Windows環境

- ハードウェア: Windows Vostro 3400, Intel, 2020
- OS: Windows 10 Pro
- Webブラウザ: Google Chrome 131.0.6778.140

## 本プログラムでできること

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/680905/24f4690c-08e3-6272-1c67-51f393f36236.png)
( 写真に写っている勝負は、見事に負けています😭 )

**画像データの撮影と学習**
画像データをWebカメラで撮影し、AIロボに学習させることができます。

**AIロボとのじゃんけん対決**
AIロボと掛け声に合わせて、じゃんけん対決ができます。

**学習データの管理**
現在までに学習した画像データの枚数を表示することができます。

**データのリセット**
現在までに学習した画像データを削除することができます。


## 実装内容

### じゃんけんの判定後、AIロボの応答

じゃんけんの判定精度は、学習したラベルの枚数や質に依存します。
先述した通り、各ラベルの学習データが1~10枚程度では、判定の精度は良くありません。

そのため、来場者が「なんでうまくロボは判定してくれないのだろう🤔」と疑問に思い、 「あ、学習データが足りないのか💡」と気付いてもらうことを期待しています。
以下実装です。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/680905/d4366356-9b63-13b9-a3cd-705894a0f0f6.png)


### 各ラベルの学習

「ラベル1を学習する」ブロックを実行するだけで、Webカメラで撮影した画像データを学習することができます。便利ですね-! 
それに加えて、ラベルの数に上限は無いようです。ラベルの種類はいくら増やして問題ありません。

来場者が手間を感じないよう、一度に10枚連続で学習する仕様にしています。これは「グー」「チョキ」「パー」全て同様のプロセスで行われます。
以下実装です。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/680905/5cc04b61-f596-6d76-7be9-57a2be669eb9.png)


### 学習データの削除

この処理を実行することで、これまで撮影した学習データが全て削除されます。
来場者が個人情報の扱いに関して心配をしないように配慮しました。
 ( ただブラウザを閉じれば、プロジェクト毎消えるので(現段階の仕様)わざわざ学習データを削除する処理を入れなくてもいいのですが…。 )
 以下実装です。

![スクリーンショット 2024-12-13 21.35.25.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/680905/cc2bc703-5f0d-4a4b-d741-4efda4732456.png)

## 本プログラムについて良かった点

### じゃんけんの採用
「じゃんけん」をテーマにしたことで、小さなお子さんも楽しんで参加してくれました。
写真は掲載できませんが、AIロボとのじゃんけんで喜んでいるお子さんの姿がとても印象的でした。

### 学習データの必要性
AIロボが間違った判定をすることで「学習が足りない」ことを伝え、再学習を促す流れができました。
このプロセスを通じて、AIの画像認識には多くの学習データが必要であることを理解してもらうことができました。

### Scratchの画面を表示
イベント中は常時PCに `Scratch` の画面を表示していました。その結果、`Scratch` 経験のあるお子さんが興味を持ち、積極的にブースの前に立ち寄ってくれました。

## 本プログラムについて改善すべき点

### じゃんけん判定の精度

- 問題点
    - AIロボのじゃんけんの判定で、うまくいかないことが多かった
- 原因
    - 学習した画像データに質や量が不足していること
    - 画面上の最大範囲でじゃんけんの手を撮影しないと、質の良いデータが学習できないということ
- 改善策
    - 手をできるだけ大きくして撮影させることを促す、明確なガイドラインを提供する

### AIロボの見た目

- 問題点
    - 見た目がチープで素人っぽさが出ていた
- 原因
    - `Scratch` 標準のスプライトを使っていたこと
- 改善策
    - 専用にデザインしたイラストや画像を作成し、動きに合わせた複数のパターンを用意する

### 撮影に対する不安

- 問題点
    - 撮影するという行為に、拒否反応 ( 若干身構える ) を示していた人が居た
- 原因
    - 個人情報を取られて、インターネットに晒されてしまうかもしれないという不安あがあったと思われる
- 改善策
    - 「撮影するが個人情報を流出させることはしない」という旨の説明を行い、関連の説明文を書いてブースに置いておく

### じゃんけん対決方法や学習データ撮影方法の説明

- 問題点
    - じゃんけん対決の方法や学習データを撮影する方法についての説明が難しかった
- 原因
    - スタッフが対応しないと、AIロボとじゃんけん対決ができないのは難点。スタッフが居なくてもできるようにしかったが、実際うまくいっていなかった
- 改善策
    - webカメラの前に立った瞬間、起動してくれるシステムにする
    - 説明はあくまで付加価値であり、説明不要でも楽しめる体験型プログラムにする

## まとめ

AIロボとのじゃんけん対決を通じて、画像認識技術を体験しながらAIを学べるというコンセプトは多くの来場者に好評でした。
今後、フェスなどのイベントで展示する際には、今回より簡単に体験しAIが学べるプログラムの設計を目指したいと思います。

## おわりに

当日、多くのことを助けてくださった県立長野図書館の職員様、またこのような機会を与えてくださった主催者様に感謝申し上げます。

## 参照

https://stretch3.github.io/

https://github.com/champierre/ml2scratch

https://github.com/stretch3/stretch3.github.io

https://www.notion.so/1-10fc4727cabe804bb8bbe19bfa7bd08d?pvs=21