10-4 スクラッチで画像認識 – 白馬プログラミング塾

前回作成した画像認識モデルは、スクラッチに拡張機能を追加することで、スクラッチの中で使用することができます。ただした画像認識に使用する拡張機能はこれまでの通常のスクラッチサイト(https://scratch.mit.edu/)ではなく、特別なStretch3(ストレッチスリー)というサイトで使用します。

https://stretch3.champierre.com/

ステップ1

作成した画像認識モデルをスクラッチに読み込むには、次のようにします。

ChromeブラウザでStretch3にアクセスします。
通常と同じようなスクラッチの画面が現れます。画面左下の[拡張機能を追加]ボタンをクリックします。するとこれまでより多くの拡張機能が表示されます。

右上のML2Scratch(犬の絵のボタン)をクリックします。

ML2Scratchは、Machine Learning(機械学習) To Scratch(スクラッチ)のことで、機械学習の機能をスクラッチに持ち込む拡張機能といった意味です。

すると、カメラへのアクセス許可を求めてくるので、[今回のみ許可]をクリックします。スクラッチのステージにカメラの映像が表示されます。
[コード]タブにML2Scratchのコードブロックが表示されます。この中から[画像分類モデルURL( )]をネコのスプライトのコードエリアにドラッグ&ドロップします。

ドロップしたコードブロックのURL欄( )に、前回保存したモデルのURLをコピー&ペーストします。
コードブロックを1回クリックします。するとブロックの周りが黄色くなってしばらくすると消えます。これはモデルの読み込みを開始し、それが終了したことを示しています。

これで画像認識モデルをスクラッチに読み込むことができました。

ステップ2

モデルを読み込んだことを確認してみましょう。

[コード]タブのTM2Scratchにある(画像ラベルの左のチェックボックスをクリックして有効化します。するとステージに[TM2Scratch：画像ラベル]が表示されます。これは変数画像ラベルの今の値を表示するものです。

前回のプログラムで画像認識に使った物をカメラに映します。するとその名前がラベルに表示されます。たとえばピンクのペンを映したら、Pink Penと表示されます。

ステップ3

お絵描きアプリAI版を作成してみましょう。これは、カメラにかざしたペンで、お絵描きアプリの線の色が指定できるという未来的なアプリです。

このアプリは前回作成した「お絵描きアプリ」のAI版で、ペンの拡張機能とTM2Scratchを使用します。ペンで線を描くスクリプトはそのままで、線の色を変える部分にTM2Scratchを利用します。

ChromeブラウザでStretch3にアクセスします。
スクラッチの新しいプロジェクトの画面が表示されます。プロジェクト名を「お絵描きアプリAI版」にします。
画面左下の[拡張機能を追加]ボタンをクリックし、ペンとTM2Scratch拡張機能を読み込みます。
カメラへのアクセスが求められるので今回のみ許可します。
「お絵描きアプリ」のときと同様、ネコのスプライトを削除し、Pencilスプライトを読み込みます。
Pencilスプライトの基準点を「お絵描きアプリ」のときと同様、左下に移動させます。

ペンに関係するスクリプトは「お絵描きアプリ」と基本的に変わりません。下図ではメッセージ名を変えています。

[画像分類モデルURL( )]ブロックはステージのコードエリアに置くことにします。画像分類モデルを読み込むときには少し時間がかかるので、このアプリを実行するときには、その前に[画像分類モデルURL( )]ブロックをクリックして、モデルをプログラムに読み込んでおく必要があります。
Pencilスプライトに設定したPinkPenなどのメッセージは、ステージのクリック時にステージからブロードキャストすることにします。ピンクのペンの場合には、カメラの映像にピンクのペンが認識されているとき、ステージがクリックされたら、PencilスプライトにPinkPenメッセージを送ります。カメラの映像にピンクのペンが認識されているかどうかは、[もし]ブロックの条件に((どれか)の画像が見つかった)を入れることで調べることができます。