Profile
Back to NewsBack
GitHub Trending 2 min
Reader Mode
champierre/ml2scratch: 機械学習 x スクラッチ(Connect Machine Learning with Scratch)

champierre/ml2scratch: 機械学習 x スクラッチ(Connect Machine Learning with Scratch)

7 hours ago

サポートのお願い

ML2Scratchは2018年よりオープンソースかつ無料で提供しており、学校や各種プログラミング教室はじめさまざまな場所で利用されております。継続して開発を続けるためには、使っていただいている皆さまからの支援が必要です。
一杯のコーヒーという形でサポートをいただけると大変ありがたく思います。

ML2Scratch(エムエル トゥー スクラッチ)

ML2Scratch(エムエル トゥー スクラッチ)はTensorFlow.jsを使った機械学習をScratchから簡単に体験、利用できるようにします。

Webカメラでいくつかの画像を撮り、ラベルを付けて学習すれば、似たような新たな画像を、学習結果をもとに分類することができます。キャプチャした画像はサーバーに送られることはなく、学習および分類はすべてブラウザ上で行われるのが特徴です。(ただし、起動時にアプリケーションを読み込むのと、学習モデルをダウンロードするためにはネットワーク接続が必要です。)

ブロックの言語は、English、日本語、にほんご、简体中文(陶旭 https://twitter.com/taoxu_toukyoku 提供)、繁體中文(CAVEDU Education https://github.com/cavedunissin 提供)、に対応しています。その他の言語への翻訳にご協力いただける方がいましたら、Issue に登録いただくか、連絡先までご連絡ください。

他の言語で読む: English, 日本語, 简体中文.

ML2Scratch ホームページ

音声解説(NotebookLMを使って生成)

音声ファイルを再生・ダウンロード

デモ動画

ステージの画像を学習

Webカメラの画像を学習

その他のデモ動画

推奨環境

  • OS
- Windows 8 - Windows 10 - MacOS - Chrome OS - iOS
  • ブラウザ
- Chrome - Safari(iOS)

Chrome の拡張機能を使用している場合に、正常に動作しないことがあるので、もしうまく動かないという場合には、ゲストモードに切り替えてお試しください。

使い方

準備

  1. https://stretch3.github.io/ をChromeで開きます。
  1. 「拡張機能を選ぶ」画面を開き、「ML2Scratch」を選びます。
  1. Chromeがカメラの使用の許可を求めるダイアログが表示されるので、「許可」をクリックします。
  1. 「ラベル」、「ラベル1の枚数」、「ラベル2の枚数」、「ラベル3の枚数」の横のチェックボックスにチェックを入れます。

学習

  1. ジャンケンの「グー」のサインをカメラに映し、「ラベル1を学習する」ブロックをクリックします。この操作で、「グー」をラベル1として機械に学習させます。
  1. 撮った写真の枚数が20枚になるまで「ラベル1を学習する」ブロックをクリックし続けます。撮った写真の枚数はステージ上の「ラベル1の枚数」に表示されています。
  1. 次に「パー」をカメラに映し、同様に「ラベル2の枚数」が20になるまで、「ラベル2を学習する」ブロックをクリックし続けます。
  1. 「チョキ」をカメラに映し、「ラベル3の枚数」が20になるまで、「ラベル3を学習する」ブロックをクリックし続けます。

認識

  1. 学習を終えると、認識結果が常にステージ上の「ラベル」に表示されるようになります。「グー」を見せれば「1」に、「パー」を見せれば「2」に、「チョキ」を見せれば「3」と表示されます。
  1. 「ラベル◯◯を受け取ったとき」ブロックを使って、以下のようなサンプルプログラムを作ることができます。

学習/判定する画像の切り替え

学習/判定する画像を切り替えることができます。

デフォルトではScratchのステージ画像を学習/判定に使っています。

ステージにWebカメラの画像を映していれば、Webカメラの画像を学習/判定しますし、「ビデオを切にする」ブロックでWebカメラの画像を映すのをやめて、ゲームやアニメーションの画面などを表示した場合は、その画面を学習/判定に使用します。

「ビデオを入にする」でWebカメラの画像を映すと同時に、ゲームやアニメーションのキャラクターも表示しているのだけれども、Webカメラの画像だけを学習/判定したい場合には、

で学習/判定する画像をWebカメラの画像に切り替えることができます。カメラの画像に映ったジェスチャーでキャラクターを動かしたいという場合は、こちらの方が精度良く判定できると思います。

学習データとプロジェクトのダウンロード/アップロード

ML2Scratch では、学習したモデルを「学習データをダウンロード」ブロックを使うことで、PC上にダウンロードして保存しておくことができます。

をクリックし、ファイルのダウンロード先を指定して「保存」ボタンを押すと <数字の列>.json というファイルとして学習データが保存されます。

プロジェクト自体は、通常の Scratch とは違って自動で保存されないので、「ファイル」>「コンピューターに保存する」を選び、.sb3 ファイルとして自分の PC 上に保存します。

保存しておいたプロジェクトを再び開くには、「ファイル」>「コンピューターから読み込む」を選び、保存してあった .sb3 ファイルを選びます。そのあとに学習データをアップロードします。

保存しておいた学習データは、「学習データをアップロード」ブロックでアップロードすることができます。

をクリックすると、「学習データをアップロード」というウィンドウが開くので、「ファイルを選択」ボタンをクリックして、学習データのファイル(<数字の列>.json)を選んだあと、「アップロード」ボタンをクリックします。

このとき、いままで学習していたデータは上書きされてしまうので注意してください。

Xcratch からの利用

ML2Scratch は必要な独自拡張機能を読み込むことができる Scratch Mod の「Xcratch」からも利用できます。

Xcratch の URL である https://xcratch.github.io/ をブラウザで開き、「エディターを開く」を選んだあと、「拡張機能を選ぶ」画面から「拡張機能を読み込む」を選んでから URL 入力欄に https://champierre.github.io/ml2scratch/ml2scratch.mjs を入力するか、以下のプロジェクトファイル付き URL から直接アクセスすれば、すでに ML2Scratch の拡張機能を読み込み済みの状態で Xcratch を開くことができます。

» ML2Scratch を読み込み済みの Xcratch を開く

開発者向け - 自分のコンピューターで ML2Scratch 拡張機能を動かす方法

必要なもの: git、Node.js、sh(Windows の場合は Git Bash か WSL を使ってください)

git clone https://github.com/champierre/ml2scratch.git
cd ml2scratch
npm start

起動したら http://localhost:8601/ を開きます。

初回の実行時は、scratch-gui.dev/ フォルダに clone し、依存パッケージをインストールして、install.sh で ML2Scratch 拡張機能を登録するため、数分かかります。2回目以降は開発サーバーを起動するだけです。

開発サーバーの起動中は、scratch-vm/src/extensions/scratch3_ml2scratch/index.js への変更が自動で .dev/scratch-gui にコピーされ、ページが再ビルドされます。環境を最初から作り直したいときは、.dev/ フォルダを削除してください。

自分の scratch-gui に ML2Scratch を追加する

  1. 自分のコンピューターに scratch-gui をセットアップします。
git clone --depth 1 https://github.com/scratchfoundation/scratch-gui.git
    cd scratch-gui
    npm install
  1. scratch-gui フォルダの中に ML2Scratch を clone します。scratch-gui の下に ml2scratch フォルダができます。
git clone https://github.com/champierre/ml2scratch.git
  1. インストールスクリプトを実行します。
sh ml2scratch/install.sh
  1. Scratch を起動し、http://localhost:8601/ を開きます。
npm start

謝辞

このプロジェクトは以下の方々の貢献で成り立っています。その他、以下に挙げきれていないバグ報告や機能改善を提案してくれた方々、ワークショップなどで使っていただきフィードバックをくださった方々などに感謝いたします。

ライセンス

ML2Scratchには AGPL-3.0 ライセンス が適用されます。オープンソースで、誰でも自由に利用できます。授業やワークショップで使用でき、商用利用も認められています。あなたやあなたの生徒さんがML2Scratchを使用して何か面白いプロジェクトを作成したときは、ぜひハッシュタグ #ml2scratch を使用してSNSで共有するか、連絡先までお知らせください。以下の「活用例」に追加させていただきます。

連絡先

  • Twitter

活用例

Tシャツ

ML2Scratchのロゴ入りTシャツ、こちらで販売しています -> https://suzuri.jp/is8r_/1251743/t-shirt/s/white

リリースノート

  • 1.0.0 2018/04/09 ScratchXバージョン
  • 2.0.0 2019/01/20 Scratch3バージョン
  • 3.0.0 2020/03/28 Scratchのステージ画像を学習/判定できるようにした。
  • 3.0.1 2020/03/29 デフォルトで、カメラの画像を学習/判定するようにする。ラベル名を自由に設定できるようにする。
  • 3.0.2 2020/04/18 「ビデオを切にする」と「カメラの画像を学習/判定する」などのブロックを続けて使用した時、あとに続けたブロックが実行されないバグを修正しました。

参考

Chat with me