ディープラーニングへの扉を開くのに10分、コードはオープンソース

[[274072]]

この記事はAI新メディアQuantum Bit（公開アカウントID：QbitAI）より許可を得て転載しています。転載の際は出典元にご連絡ください。

ディープラーニング技術の人気が高まるにつれ、かつては軽いタスクを処理するためにブラウザ内でのみ実行されていた JavaScript などのスクリプト言語も含め、ますます多くの言語がディープラーニング プロジェクトの開発に使用できるようになりました。

TensorFlow.js は、Google がリリースした JavaScript ベースのディープラーニング フレームワークです。提供される高レベル API により、ブラウザで直接実行できるディープラーニング アルゴリズムを簡単に開発できます。

つい最近、アメリカ人の Gant Laborde 氏が TensorFlow.js を使って、ブラウザで「じゃんけん」ゲームのジェスチャーを認識するディープラーニング技術を使用する Web アプリケーションを開発しました。彼はデモを公開し、コードを Github でオープンソース化しました。

JavaScript 開発者にとって、これはディープラーニングへの扉を開く優れた入門書です。わずか 10 分で、ジェスチャ認識モデルをかなりの精度でトレーニングし、カメラを使用してリアルタイム ビデオでジェスチャを認識できるようになります。

△ブラウザ上で動作するディープラーニングモデルを使用してジェスチャーを認識する

すべてが始まる前に

新しい世界への扉を開く前に、必ず何らかの準備が必要です。

ここでは、ディープラーニング アルゴリズムの一般的な開発手順を簡単に紹介します。その目的は、読者がいくつかのボタンをクリックするだけでなく、以降の操作で何を行っているのかを明確に理解できるようにすることです。

難しい数式は出てきませんので、安心して読んでください。

私たちが通常ディープラーニング アルゴリズムと呼んでいるものは、より正確には、ディープ ニューラル ネットワークに基づくアルゴリズム (またはモデル) です。

ディープ ニューラル ネットワークが何であるかを知る必要はありません (その特定の原理を理解するには、これの 100 倍の時間がかかる可能性があります)。必要なのは、それが関数 f として見なすことができるということ、つまり単純な数式で表現するのが難しい関数であるということだけです。

関数とは、独立変数 x と従属変数 y を持つ関数です。

この問題では、通常入力と呼ばれる独立変数 x は、「グー」、「チョキ」、「パー」のジェスチャーをしている手の画像です。

一般に出力と呼ばれる従属変数 y は、この問題では 0 から 1 までの 3 つの数値であり、入力ジェスチャがそれぞれ「グー」、「チョキ」、「クロス」である確率に対応します。

必要な結果を得るためにこの関数 f に頼りますが、f は空から降ってくるわけではありません。f は手動で選択されたモデルと (多数の) モデル パラメータで構成されます。

多くの場合、モデルのパラメータは大量のデータから学習されます。モデルにパラメータを学習させるプロセスはモデルトレーニングと呼ばれ、ディープラーニングアルゴリズムの開発において最も重要なステップです。

この問題では、トレーニングのために多数の (x, y) データ ペア、つまり、(画像 1、はさみ)、(画像 2、石)、(画像 3、布) などの多数の (画像、ジェスチャ) データ ペアが必要です。これらのデータ ペアは、多くの場合、手動で収集してラベル付けする必要があります。

この問題におけるジェスチャ認識の精度など、いくつかの評価メトリックを使用してモデルの品質を測定できます。これらの評価指標を通じて、モデルが完全にトレーニングされたかどうか、効果が期待どおりであったかどうかを確認できます。そうであれば、それを本番環境に導入し、実際の状況でどのように動作するかをテストできます。

要約すると、ディープラーニングアルゴリズムの開発には、データの準備、モデルの選択とトレーニング、モデル効果の評価、モデルのテストという4 つの段階が必要です。

さあ、いよいよ始めましょう！

データ準備

先ほど、モデルをトレーニングするには大量の（画像、ジェスチャ）データ ペアが必要であることを説明しました。このようなデータを収集するのは、写真を撮ったり、ラベルを付けたりと、間違いなく面倒な作業です。

幸運なことに、Google のエンジニアであるローレンス モロニーが、白い背景に 3 つのジェスチャーを描いた 2,892 枚の画像とそれに対応するジェスチャー ラベルを含むデータセットを提供してくれました。いくつか例を挙げます。

モロニーが提供したデータセットの例

データセットのURL:

http://www.laurencemoroney.com/rock-paper-scissors-dataset/

すべてが順調に進んでいるようです。ちょっと待ってください、このような画像をブラウザに取り込むにはどうしたらいいのでしょうか?

ブラウザで JavaScript を実行しても、ローカルでファイルを読み取ることができないようです。

明らかなアイデアとしては、トレーニング データを Web ページ内の画像として扱い、それを DOM の img 要素に読み込むというものがあります。まず、トレーニング データ内の各画像を 1 ピクセルの高さの画像に「まっすぐに」し、次にすべての画像を行ごとに積み重ねます。

たとえば、元の画像サイズが 64x64 の場合、「まっすぐにする」後のサイズは 1x4096 になります。トレーニング セット内の 2520 枚の画像が積み重ねられ、以下に示すように、サイズが 4096x2520 の巨大な画像が形成されます (ただし、視覚的な意味は失われています)。

この大きな画像はスプライトシートと呼ばれ、多くの小さな画像が含まれています。

この Web アプリケーションの作成者は、github リポジトリのルート ディレクトリにある spritemaker フォルダーに、スプライト シートを生成するための Python コードを提供しています。

△ 4096x2520サイズのスプライトシートを生成

デモページで、「例を読み込んで表示」ボタンをクリックして、しばらく待ちます。データがブラウザに読み込まれ、データセットからランダムに選択された 42 枚の画像がサイドバーに表示されることがわかります。

このサイドバーは TensorFlow Visor によって提供されており、モデルのトレーニング プロセスを視覚的に観察するのに役立ちます。キーボードの左上隅にある ` キーを押すと、いつでもパネルを切り取ったり非表示にしたりできます。

△ TensorFlow Visorインターフェースに表示されるデータサンプル

モデルの選択、トレーニング、効果評価

次に私たちは選択に直面するでしょう。

「シンプルモデルの作成」と「高度なモデルの作成」という 2 つのボタンが目の前に配置されています。

まずはシンプルなものから始めましょう。「シンプルなモデルを作成」​​をクリックします。 ` キーを押して TensorFlow Visor パネルを開くと、先ほど作成したシンプルなモデルのネットワーク構造を確認できます。これは 5 層の畳み込みニューラル ネットワーク モデルです (Flatten 層は層数にカウントされません)。比較的単純な関数のスタックとして見ることができることを知っておくだけで、これは確かに非常にシンプルで基本的な畳み込みニューラル ネットワーク モデルです。

△ TensorFlow Visorインターフェースに表示されるネットワーク構造

「未トレーニングモデルの結果を確認」をクリックすると、パネルに精度表とマトリックスが表示されます。これらは、この問題のモデルの評価指標です。

精度表では、各行はジェスチャ カテゴリの精度値です。マトリックスでは、ジェスチャ X の行とジェスチャ Y の列で識別されるセルは、実際にはジェスチャ X であるが、アルゴリズムによってジェスチャ Y であると判断される画像の数を表します。このようなマトリックスは、アルゴリズムが 2 つのジェスチャを混同しやすい度合いを示すため、「混同マトリックス」と呼ばれます。

ご覧のとおり、モデルはまだトレーニングされていないため、アルゴリズムは入力画像内のすべてのジェスチャを「はさみ」であると認識しており、まだ非常に混乱しています。

それではトレーニングを始めましょう！ 「シンプルなモデルをトレーニング」をクリックしてください。 TensorFlow Visor パネルに「モデルトレーニング」列が表示され、トレーニング中のリアルタイムの精度と損失の値が表示されます。通常の状況では、トレーニングが進むにつれて精度が向上し続け、損失が減少し続けていることがわかるはずです。トレーニングは 12 エポック (60 バッチ) 後に停止されました。

△ TensorFlow Visorインターフェースに表示されるトレーニングプロセス

トレーニングが完了したら、「トレーニング後にモデルをチェック」をクリックします。トレーニングされたモデルの精度 (トレーニングされた精度) と混同行列 (トレーニングされた混同行列) が、元の精度テーブルと混同行列の下に表示されます。

すばらしい！トレーニング後、検証データ上の 3 つのジェスチャに対するモデルの認識精度は 95% を超え、混同行列は健全でした (深い対角と浅い休止)。

△ TensorFlow Visorインターフェースに表示されるトレーニング済みモデルの効果

「高度なものは常に単純なものより優れている、そうでしょう? 高度なモデルの方がより良く機能するはずです。」とお考えかもしれません。これは実際にはよくある誤解です。

「高度なモデルの作成」を選択して上記の手順を繰り返すと、高度なモデルのトレーニングに時間がかかるだけでなく、効果も単純なモデルほど良くないことがわかります。

さらに、高度なモデルは、トレーニング期間が長すぎると過剰適合の問題が発生する可能性があります。

オーバーフィッティングとは、モデルがトレーニング データに完璧に適合することに重点を置きすぎているため、トレーニング データでは優れたパフォーマンスを発揮しますが、トレーニング データ以外で見たことのないデータではパフォーマンスが低下します。または、この時点ではモデルの一般化能力が低いとも言えます。

モデルテスト

非常に優れたパフォーマンスを発揮するシンプルなモデルができたので、実際に使ってみましょう。

「Web カメラを起動」をクリックし、白い壁にカメラを向けて、カメラに向かってさまざまなジェスチャーをします。アプリケーションは一定の間隔でビデオ画像をキャプチャし、トレーニングされたモデル アルゴリズムを使用して、現在のジェスチャーが 3 つのカテゴリのいずれかに属する確率を通知します。クールだと思いませんか?

△トレーニング済みのモデルを使用してビデオ内のジェスチャーを認識する

終わり！

ここまでで、ジェスチャ分類用のディープラーニング モデルをブラウザ内で完全にトレーニングし、いくつかのメトリックを使用してその有効性を検証し、実際のシナリオでテストしました。

これらの手順は単純ですが、何をしているのかは理解できます。ディープラーニングの世界へようこそ!

ポータル

ソースコードリポジトリ:

https://github.com/GantMan/rps_tfjs_demo

デモページ:

https://rps-tfjs.netlify.com/