TensorFlow.js と Python を使用してブラウザで機械学習モデルを構築する

概要

TensorFlow.js (deeplearn.js) を使用すると、複雑なインストール手順なしで、ブラウザで機械学習およびディープラーニングモデルを構築できます。
TensorFlow.js には、Core API と Layer API という 2 つのコンポーネントがあります。
Tensorflow.js を使用して、Web カメラからの画像を分類するための優れたモデルを構築する方法を学びます。

導入

機械学習モデルを作成する際に好んで使用するツールは何ですか?データサイエンティストはこの永遠の問いに対してさまざまな答えを持っています。 RStudio を好む人もいれば、Jupyter Notebook を好む人もいます。私は間違いなく後者です。

そのため、初めて TensorFlow.js (旧称 deeplearn.js) に出会ったとき、私の心は爆発しそうになりました。ブラウザで機械学習モデルを構築しますか? JavaScript を使用していますか?信じられないほど素晴らしいですね!

43 億人以上、つまり世界人口の約 55% が Web ブラウザを使用しています。 ——Wikipedia（2019年3月）

Google の TensorFlow.js は、機械学習をブラウザに導入することで機械学習を民主化するだけでなく、JavaScript を頻繁に使用する開発者にとって機械学習への最適な入り口でもあります。

[[271482]]

当社の Web ブラウザは、最もアクセスしやすいプラットフォームの 1 つです。そのため、機械学習モデルをトレーニングできるだけでなく、ブラウザ自体で「学習」または「転移学習」できるアプリケーションを構築することが理にかなっています。

この記事では、まず TensorFlow.js とそのさまざまなコンポーネントを使用することの重要性を理解します。次に、TensorFlow.js を使用してブラウザ内で独自の機械学習モデルを構築する手順について詳しく説明します。次に、コンピューターのウェブカメラを使用して体の姿勢を検出するアプリケーションを構築します。

TensorFlow を初めて使用する場合は、次の記事を読んで詳細を確認してください。

TensorFlow 101: テンソルとグラフを理解してディープラーニングを始める
TensorFlow を使用したニューラルネットワークの実装の概要

TensorFlow.js を使用する理由は何ですか?

1.1 ウェブカメラを使ったブラウザでの画像分類

1.2 TensorFlow.js の機能

2. ブラウザでの機械学習の理解

2.1 コア API: テンソルの操作

2.2 レイヤーAPI: Kerasのようなモデルの構築

3. Googleの事前学習済みモデル「PoseNet」を使用する

1. TensorFlow.js を使用する理由

私はこの質問にユニークな方法で答えます。 TensorFlow.js の理論的な側面を詳しく調べたり、それがなぜ素晴らしいツールなのかを説明したりするつもりはありません。

代わりに、TensorFlow.js を使用しない場合に何が失われるのかを簡単に説明します。それでは、Web カメラを使用して画像を分類するアプリケーションを 5 分で構築してみましょう。そうです。すぐにコードを見てみましょう。

一番良い点は、これを実行するために何かをインストールする必要がないことです。必要なのはテキストエディターと Web ブラウザーだけです。次のアニメーションは、これから構築するアプリケーションを示しています。

TensorFlow.js と Python を使用してブラウザで機械学習モデルを構築する

すごいですね！ブラウザで数分で完了しました。それでは、Web ブラウザーで独自の画像分類モデルを構築するための手順とコードを見てみましょう。

1.1 ウェブカメラを使用してブラウザで画像分類モデルを構築する

任意のテキストエディターを開き、index.html ファイルを作成します。このファイルに次のコードを保存します。

 <!DOCTYPE html >     
 <html>     
 <ヘッド>     
 <メタ 文字セット= "UTF-8" >     
 <メタ  http-equiv = "X-UA 互換"  コンテンツ= "IE=edge" >     
 <メタ  name = "ビューポート"  コンテンツ= "幅=デバイス幅、初期スケール=1" >     
 <!-- ページのタイトル -->     
 <タイトル>画像分類</タイトル>     
 <!-- 処理ライブラリをロードします-->     
 <スクリプト  src = "https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.8.0/p5.min.js" > </スクリプト>     
 <スクリプト  src = "https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.8.0/addons/p5.dom.min.js" > </スクリプト>     
 <!-- ml5.js をロード -->     
 <スクリプト  src = "https://unpkg.com/[email protected]/dist/ml5.min.js" > </スクリプト>     
 <!-- index.js をロード -->     
 <スクリプト  src = "index.js" > </スクリプト>     
 </ヘッド>     
 <本文>     
 <!-- ここがビデオが表示される場所です -->     
 <ビデオ  id = "ビデオ" > </ビデオ>     
 </本文>     
 </html>

次に、別のファイル index.js を作成し、そこに次のコードを記述します。

 モバイルネットにしましょう。  
 ビデオを聞かせてください。  
 ラベルを''とします。  
 // モデルの準備ができたら予測を行う 
 関数modelReady() {  
 console.log('モデルの準備ができました!!!');  
 mobilenet.predict(結果を取得)  
 }  
関数 gotResults(エラー、結果) {  
 if (エラー) {  
 コンソールエラー(エラー);  
 } それ以外 {  
ラベル=結果[0].className;  
 // 自分自身を呼び出して推論をループする 
 mobilenet.predict(結果を取得)  
 }  
 }  
 // セットアップ関数 
関数セットアップ() {  
 キャンバスを作成します(640, 550);  
 // ml5 でビデオキャプチャを作成する 
ビデオ= createCapture (ビデオ);  
 ビデオを非表示にする();  
 背景(0);  
 // MobileNet をロードしてビデオフィードに適用します 
 mobilenet = ml5.imageClassifier ('MobileNet'、ビデオ、モデル準備完了);  
 }  
関数draw() {  
 背景(0);  
 //ビデオを表示 
 画像(ビデオ, 0, 0);  
 塗りつぶし(255);  
 テキストサイズ(32);  
 // 予測ラベルを表示 
 テキスト(ラベル、10、高さ - 20);  
 }

両方のファイルを保存し、Google Chrome や Mozilla Firefox などのブラウザで index.html ファイルを開きます。それでおしまい！これで、Web カメラを使用してブラウザ自体でリアルタイムに画像を分類できるアプリケーションが作成されました。私のコンピューターでは次のようになります:

ビデオリンク:

 https://s3-ap-south-1.amazonaws.com/av-blog-media/wp-content/uploads/2019/05/mobilenet_demo.mp4?_=1

この例で注目すべき重要な点:

上記の例では、事前トレーニング済みの画像分類モデル MobileNet (https://ai.googleblog.com/2017/06/mobilenets-open-source-models-for.html) を使用しました。
TensorFlow 上に構築されたライブラリである ml5.js (https://ml5js.org/) を使用します。 MobileNet モデルをブラウザに読み込み、ビデオフィードに対して推論を実行します。
また、ビデオ入力を処理し、ビデオ自体にラベルを表示するために、P5.js (https://p5js.org/) ライブラリも使用します。

コンピュータに何もインストールする必要はありません。この例は、Linux、Windows、MacOS など、あらゆる最新システムで動作するはずです。これが、JavaScript を使用して Web 上でモデルを構築する力です。

それでは、TensorFlow.js が提供する強力な機能と、それらを活用してブラウザに機械学習モデルをデプロイする方法を見てみましょう。

1.2 TensorFlow.js の機能

TensorFlow.js は、JavaScript で ML モデルを開発およびトレーニングし、ブラウザーまたは Node.js にデプロイするためのライブラリです。

TensorFlow.js は、使用できる多くの機能を提供します。

これは、インターネット上で使用されるほぼすべての Web サイト、ブラウザー、またはアプリケーションのロジックの背後にあるプログラミング言語である JavaScript の TensorFlow の拡張機能です。 JavaScript は Python と同様に汎用性が高いため、機械学習モデルの開発に使用すると多くの利点があります。

ML モデルが Web 言語で記述されている場合は、デプロイが容易になります。

すべての主要ブラウザが JavaScript をサポートしているため、プラットフォームの種類やその他の互換性の問題を心配することなく、どこでも JavaScript を使用できます。ユーザーについても同様です。
TensorFlow.js はクライアント側のライブラリであり、ユーザーのブラウザで ML モデルをトレーニングまたは実行できます。これにより、データのプライバシーに関する懸念が軽減されます。
クライアントでリアルタイム推論を実行すると、アプリケーションはユーザー入力に即座に応答できるため、よりインタラクティブになります (先ほど構築した Web カメラアプリケーションなど)。

現在の形式では、TensorFlow.js は次の主要な機能を提供します。

ブラウザでの機械学習: TensorFlow.js を使用して、ブラウザで ML モデルを作成およびトレーニングできます。
Google の事前トレーニング済みモデル: TensorFlow.js には、オブジェクト検出、画像セグメンテーション、音声認識、テキスト毒性分類などのタスク用の Google の事前トレーニング済みモデルのセットが付属しています。
転移学習: TensorFlow.js の MobileNet など、すでにトレーニング済みのモデルの一部を再トレーニングすることで、転移学習を実行できます。
Python モデルのデプロイ: Keras または TensorFlow を使用してトレーニングされたモデルは、TensorFlow.js を使用してブラウザーに簡単にインポート/デプロイできます。

この記事では、最初の 2 つの機能に焦点を当てます。このシリーズのパート 2 (近日公開予定) では、Python でモデルを転送学習してデプロイする方法について説明します。

2. ブラウザでの機械学習

TensorFlow.js は、モデルをトレーニングするための 2 つの方法を提供します (TensorFlow と非常に似ています)。

最初のアプローチは、Core API を使用して、低レベルのテンソル演算を使用してモデルを定義することです。
2 番目のアプローチは、Keras と同様に、Layers API を使用してモデルを定義することです。

いくつかの例を挙げて、これら 2 つのアプローチを理解してみましょう。結局のところ、概念を学ぶ最良の方法は、それを実践することです。

まず、HTML ファイルを設定します。

コンピューター上に新しい index.html ファイルを作成し、次のコードを記述します。

 < html   lang = "ja" >    
 <ヘッド>    
 <メタ 文字セット= "UTF-8" >    
 <メタ  name = "ビューポート"  コンテンツ= "幅=デバイス幅、初期スケール=1.0" >    
 <メタ  http-equiv = "X-UA 互換"  コンテンツ= "ie=edge" >    
 <!-- Tensorflow.js をロード -->    
 <スクリプト  src = "https://cdn.jsdelivr.net/npm/@tensorflow/[email protected]/dist/tf.min.js" > </スクリプト>    
 </ヘッド>    
 <本文>    
 < h1 > Tensorflow.js コア API </ h1 >    
 <!-- <script src="index.js"></script> -->    
 <スクリプト タイプ= "text/javascript" >    
 </スクリプト>    
 </本文>    
 </html>

基本的な HTML ページを作成し、クラウド URL から Tensorflow.js を読み込みます (行 7)。

TensorFlow.js (deeplearn.js) のインストール手順:

TensorFlow.js はブラウザ用に設計されているため、TensorFlow.js をインストールして使用する最も簡単な方法は、まったくインストールしないことです。 HTML 内の URL から簡単に読み込むことができます。

地元で働きたい場合はどうすればいいですか?実際、Python や R で通常行うのと同じように、Jupyter Notebook でも TensorFlow.js を使用できます。誰にとっても解決策はあります!

このネイティブメソッドは少し長く、時間がかかるため、この記事では使用しません。実際にその方法を知りたい場合は、まず Jupyter 用の ijavascript カーネルをインストールしてください。以下は私の Jupyter Notebook のスクリーンショットです。

現在、TensorFlow.js を使用するには、ライブラリの公式 URL を使用して直接ロードすることが推奨されています。必要なのは、HTML ファイルに次の行を追加することだけです。

 < scriptsrc scriptsrc = "https://cdn.jsdelivr.net/npm/@tensorflow/[email protected]/dist/tf.min.js" > </スクリプト>

終わり！本当にそれだけです。

2.1 コア API: テンソルの操作

Core API は TensorFlowCore と非常によく似ており、低レベルのテンソル演算と線形代数を使用してモデルを定義できます。

これは、カスタムモデルを構築する場合や、ニューラルネットワークをゼロから構築する場合に非常に便利です。ブラウザでテンソルを使用する例を見てみましょう。

まず、index.html ファイルの <script> </script> タグの間に次のコードを追加します。

定数a = tf .tensor([1, 2, 3, 4]);  
定数b = tf .tensor([10, 20, 30, 40]);  
 const y = a .add(b); // tf.add(a, b) と同等 
定数z = a .mul(b);  
 y.print();  
印刷

 < html   lang = "ja" >    
 <ヘッド>    
 <メタ 文字セット= "UTF-8" >    
 <メタ  name = "ビューポート"  コンテンツ= "幅=デバイス幅、初期スケール=1.0" >    
 <メタ  http-equiv = "X-UA 互換"  コンテンツ= "ie=edge" >    
 <!-- Tensorflow.js をロード -->    
 <スクリプト  src = "https://cdn.jsdelivr.net/npm/@tensorflow/[email protected]/dist/tf.min.js" > </スクリプト>    
 </ヘッド>    
 <本文>    
 < h1 > Tensorflow.js コア API </ h1 >    
 <!-- <script src="index.js"></script> -->    
 <スクリプト タイプ= "text/javascript" >    
 定数a = tf .tensor([1, 2, 3, 4]);  
 定数b = tf .tensor([10, 20, 30, 40]);  
 const y = a .add(b); // tf.add(a, b) と同等 
 const z = a .mul(b); // tf.mul(a, b) と同等 
 y.print();  
 印刷 
 </スクリプト>    
 </本文>    
 </html>

上記のコードでは、2 つのテンソル a と b に対して基本的な加算と乗算の演算を実行し、結果をブラウザーに出力します。次に、ターミナルに移動してプロジェクトフォルダーを開き、次のコマンドで Python サーバーを起動します。

 python3 -m http.server

次に、ブラウザで次のアドレスを開きます。

 http://localhost:8000/

「Tensorflow.js Core API」というページが表示されたら、Ctrl + Shift + I を押してコンソールを開きます。これは Chrome と Firefox の両方で動作するはずです。上記の操作の出力はコンソールに表示されます。

Core API についてさらに詳しく知りたい場合は、CoreAPI の公式ドキュメントを読むことをお勧めします。

CoreAPI ドキュメント:

 https://www.tensorflow.org/js/guide/tensors_operations

2.2 レイヤーAPI: Kerasのようなモデルの構築

Layers API は Python の Keras と非常によく似ています。 Keras と同様に、シーケンシャルメソッドと関数メソッドの両方を使用してモデルを作成できます。

例を使ってシーケンスメソッドを詳しく見てみましょう。次のデータポイントで回帰モデルをトレーニングします。

ここで、X と Y は線形関係にあります。つまり、各 Y は X + i (i は 0、1、2、3...n+1) に対応します。このデータセットで基本的な回帰モデルをトレーニングしてみましょう。 index.html ファイルの <script></script> タグの間に次のコードを記述できます。

 constコールバック= {  
 onEpochEnd: async (epoch, logs) = > {  
 console.log("エポック: " + エポック + JSON.stringify(logs))  
 }  
 };  
 // トレーニング用の合成データを生成します。  
 定数xs = tf .tensor2d([[1], [2], [3], [4]], [4, 1]);  
 定数ys = tf .tensor2d([[1], [3], [5], [7]], [4, 1]);  
 // モデルをビルドしてコンパイルします。  
 非同期関数 basicRegression() {  
 // シーケンシャルモデルを構築する 
 constモデル= tf .sequential();  
 model.add(tf.layers.dense({units: 1, inputShape: [1]}));  
 model.add(tf.layers.dense({units: 1, inputShape: [1]}));  
 model.compile({optimizer: 'sgd', loss: 'meanSquaredError'});  
 // fit() を使用してモデルをトレーニングします。  
 model.fit(xs, ys, {epochs: 100, validationSplit: 0.1, callbacks: callbacks} を待機します。  
 // predict() を使用して推論を実行します。  
 モデルを予測します(tf.tensor2d([[5]], [1, 1]))。print();  
 }  
 // 基本的な回帰モデルを作成する 
 基本的な回帰();

賢明な読者は、上記の構文が Python で Sequential モデルを構築するための Keras 構文と非常によく似ていることに気付いたでしょう。ブラウザコンソールに戻ると予測が表示されます。

単純回帰モデルでは 7.556 が予測され、これは期待値 8 に非常に近い値です。これは基本的な例ですが、ブラウザ内で直接機械学習モデルを構築することがいかに簡単で便利であるかがはっきりとわかります。

TensorFlow.js を使用すると、ブラウザ内で機械学習およびディープラーニングモデルを構築できます。また、モデルのトレーニング中にシステムで利用可能な場合は、GPU のパワーを自動的に活用します。

TensorFlow.js を使用していくつかの標準データセットでトレーニングされたディープラーニングモデルの例を次に示します。

これらの例は、tfjs-examples リポジトリで参照できます。

tfjs-examples リポジトリ:

 https://github.com/tensorflow/tfjs-examples

3. Googleの事前学習済みモデル「PoseNet」を使用する

TensorFlow.js は、オブジェクト検出、音声認識、画像セグメンテーションなどの多くの便利なタスク向けに、Google から事前トレーニング済みのモデルを多数提供します。事前トレーニング済みモデルの利点は、大きな依存関係やインストールなしで使用でき、すぐに使用できることです。

Google は今後数か月以内にさらに多くのモデルを発売すると広く予想されています。利用可能な事前トレーニング済みモデルについては、次のリンクで確認できます。

関連リンク:

 https://www.tensorflow.org/js/models

この記事ではPoseNetを使用します。 PoseNet は、主要な体の関節の位置を推定することで、画像やビデオ内の人物のポーズを推定できる視覚モデルです。

PoseNetはどのように機能しますか?

それは魅力的な概念です。ポーズ推定は、画像やビデオ内の人物を検出するために使用されるコンピュータービジョン技術です。これにより、たとえば、画像内で人の肘がどこに現れるかを判断するのに役立ちます。

明確にしておくと、ポーズ推定は画像に写っている人物を識別することではありません。このアルゴリズムは、主要な体の関節の位置を単純に推定します。

検出されたキーポイントは、「パーツ」および「ID」インデックスに設定され、信頼スコアは 0.0 ～ 1.0 の範囲になります (1.0 が最高)。

PoseNet によって提供される出力のタイプの例を次に示します。

信じられないですよね？！ PoseNet を使用するには、ml5.js ライブラリを使用します。 ml5.js は、TensorFlow.js と p5.js をベースにしたライブラリです。 p5.js は、ブラウザでウェブカメラに簡単にアクセスできるようにする別のライブラリです。

ml5.js は、幅広いアーティスト、クリエイティブコーダー、学生が機械学習を利用できるようにすることを目的としています。このライブラリは TensorFlow.js に基づいており、シンプルな構文を通じてブラウザ内で機械学習アルゴリズムとモデルにアクセスできるようにします。

たとえば、ml5.js を使用すると、次のように 5 行のコードで MobileNet を使用した画像分類モデルを作成できます。

Ml5.js はシンプルであるため、ブラウザーでの迅速なプロトタイピングに非常に適しているため、私たちのプロジェクトではこれを使用しています。

PoseNetに戻りましょう。新しいファイル index.html を作成し、次のコードを追加します。

 < html   lang = "ja" >    
 <ヘッド>    
 <メタ 文字セット= "UTF-8" >    
 <メタ  name = "ビューポート"  コンテンツ= "幅=デバイス幅、初期スケール=1.0" >    
 <メタ  http-equiv = "X-UA 互換"  コンテンツ= "ie=edge" >    
 <!-- p5.js をロード -->    
 <スクリプト  src = "https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.7.3/p5.min.js" > </スクリプト>    
 <スクリプト  src = "https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.7.3/addons/p5.dom.min.js" > </スクリプト>    
 <!-- ml5.js をロード -->    
 <スクリプト  src = "https://unpkg.com/[email protected]/dist/ml5.min.js"  タイプ= "text/javascript" > </スクリプト>    
 <!-- ビデオをブラウザの中央に表示します -->    
 <スタイル タイプ= "text/css" >    
 体{  
 テキスト配置: 中央;  
 }  
 </スタイル>    
 </ヘッド>    
 <本文>    
 < h1 > Ml5.js を使用した PoseNet デモ</ h1 >    
 < 10 ...   id = "status" >モデルを読み込んでいます... </ p >    
 < div   id = "ビデオコンテナ" > </ div >    
 <!-- posenet.js ファイルをロードします -->    
 <スクリプト  src = "posenet.js" > </スクリプト>    
 </本文>    
 </html>

これにより、基本的な HTML Web ページが作成され、必要なファイルが読み込まれます。

ml5.js と p5.js は公式 URL 経由で読み込まれます。
posenet.js は、PoseNet を使用するためのコードを記述するファイルです。

ここで、PoseNet を使用するための JavaScript コードを記述します。 index.html と同じフォルダーに新しいファイル posenet.js を作成します。これを機能させるために必要な手順は次のとおりです。

PoseNetモデルをロードし、ウェブカメラからビデオをキャプチャします
体の関節の重要なポイントを検出する
検出された体の関節を表示する
推定される体の骨格を描く

ステップ1から始めましょう。

ステップ1: PoseNetモデルを読み込み、ウェブカメラからビデオをキャプチャする

PoseNet をロードするには ml5.js を使用します。一方、p5.js を使用すると、わずか数行のコードで Web カメラからビデオをキャプチャできます。

ビデオを聞かせてください。  
 poseNet を作成します。  
 poses = [] とします。  
関数セットアップ() {  
 定数キャンバス= createCanvas (640, 480);  
 キャンバスの親('ビデオコンテナ');  
 // ビデオキャプチャ 
ビデオ= createCapture (ビデオ);  
 ビデオのサイズ(幅、高さ)  
 // 単一の検出を持つ新しいposeNetメソッドを作成する 
 poseNet = ml5.poseNet (ビデオ、モデル準備完了);  
 // これはグローバル変数「poses」を埋めるイベントを設定します 
 // 新しいポーズが検出されるたびに配列で 
 poseNet.on('pose', 関数(結果) {  
ポーズ=結果;  
 });  
 関数modelReady(){  
 select('#status').html('モデルが読み込まれました')  
 }

上記のコードブロックで最も重要な点は次のとおりです。

createCapture(VIDEO): カメラでビデオをキャプチャしてビデオ要素を作成するために使用される p5.js 関数です。
ml5.poseNet(video,modelRead): ml5.js を使用して poseNet モデルを読み込みます。ビデオを渡すことで、モデルにビデオ入力を処理するように指示します。
PoseNet.on(): この関数は、新しいポーズが検出されるたびに実行されます。
modelReady(): PoseNet の読み込みが完了すると、この関数を呼び出してモデルのステータスを表示します。

ステップ2: 体の関節の重要なポイントを検出する

次のステップはポーズを検出することです。前の手順で、poseNet.on() を呼び出して、検出された各ポーズを pose 変数に保存したことに気付いたかもしれません。この機能はバックグラウンドで継続的に実行されます。新しいポーズが見つかるたびに、体の関節の位置が次の形式で示されます。

「スコア」はモデルの信頼性を示す
「part」は検出された体の関節/キーポイントを表します
「位置」には検出された部品のxとyの位置が含まれます

この部分は自動的に生成されるため、コードを記述する必要はありません。

ステップ3: 検出された人間の関節を表示する

検出された体の関節とその x 位置と y 位置がわかっています。ここで、検出された体の関節を表示するために、ビデオの上にそれらを描画する必要があります。 PoseNet は、検出された体の関節のリスト、各関節の信頼スコア、およびその x 位置と y 位置を提供することがわかりました。

キーポイントを描画するために、20% のしきい値 (keypoint.score > 0.2) の信頼スコアを使用します。これを行うためのコードは次のとおりです。

 // 検出されたキーポイントの上に楕円を描く関数 
関数drawKeypoints() {  
 // 検出されたすべてのポーズをループします 
 （ i = 0とすると、i <   poses.length ; i++) {  
 // 検出されたポーズごとに、すべてのキーポイントをループします 
 pose = poses [i].pose;とします。  
 （ j = 0とすると、j <   pose.keypoints.length ; j++) {  
 // キーポイントは、体の部分を表すオブジェクトです（rightArm や leftShoulder など）  
 keypoint = pose .keypoints[j]とします。  
 // ポーズ確率が 0.2 より大きい場合にのみ楕円を描画します 
 キーポイントスコアが0.2以上の場合 
 塗りつぶし(255, 0, 0);  
 ストロークなし();  
 楕円(キーポイントの位置x、キーポイントの位置y、10、10);  
 }  
 }  
 }  
 }

ステップ4: 推定される体の骨格を描く

PoseNet は、キーポイントや体の関節に加えて、推定された体の骨格も検出できます。 pose 変数を使用してスケルトンを描画できます。

 // スケルトンを描画する関数 
関数drawSkeleton() {  
 // 検出されたすべてのスケルトンをループします 
 （ i = 0とすると、i <   poses.length ; i++) {  
 スケルトンをposes [i].skeletonとします。  
 // すべてのスケルトンについて、すべてのボディ接続をループします 
 （ j = 0とすると、j <  スケルトン.長さ; j++) {  
 partA =スケルトン[j][0] とします。  
 partB =スケルトン[j][1] とします。  
 ストローク(255, 0, 0);  
 行(partAの位置x、partAの位置y、partBの位置x、partBの位置y);  
 }  
 }  
 }

ここでは、検出されたスケルトンを反復処理し、キーポイントを接続する線を作成します。コードはまだかなりシンプルです。

さて、最後のステップは、Web カメラからキャプチャしたビデオフィードを使用して、drawSkeleton() 関数と drawKeypoints() 関数を繰り返し呼び出すことです。これは、setup() の直後に呼び出され、繰り返し実行される p5.js の draw() 関数を使用して実行できます。

関数draw() {  
 画像(ビデオ、0、0、幅、高さ);  
 // 両方の関数を呼び出して、すべてのキーポイントとスケルトンを描画できます 
 キーポイントを描画します();  
 スケルトンを描画します。  
 }

次に、ターミナルウィンドウに移動し、プロジェクトフォルダーに移動して、Python サーバーを起動します。

 python3 -m http.server

次にブラウザで次のアドレスを開きます。

 http://localhost:8000/

見て！ PoseNet は体のポーズを正常に検出するはずです (すべての手順を正しく実行した場合)。私のモデルは次のようになります:

終了ノート

私が TensorFlow.js を気に入っている理由がわかるでしょう。非常に効率的で、モデルを構築するときに複雑なインストール手順を心配する必要もありません。

TensorFlow.js は、機械学習をブラウザに導入することで、機械学習をより利用しやすくする上で大きな可能性を秘めています。同時に、データのプライバシーとインタラクティブ性の利点もあります。この組み合わせにより、特に機械学習アプリケーションを展開する場合、データサイエンティストのツールボックスの中で非常に強力なツールになります。

次の記事では、ブラウザで転移学習を適用し、TensorFlow.js を使用して機械学習またはディープラーニングモデルをデプロイする方法について説明します。

PoseNet を使用した私たちのプロジェクトは、さらに一歩進んで、別の分類器をトレーニングすることでポーズ認識アプリケーションを構築することができます。ぜひ試してみてください！

<<: マイクロソフトはOpenAIに10億ドルを投資：公にはAGIのため、密かにGoogleと競合、クラウドコンピューティングを投資と交換したと非難

>>: EU諸国の4分の1がAIによるサイバーセキュリティ管理を望んでいる