TensorFlow2020: Tensorflow.js を使用してコンピューター ビジョン アプリケーションを実行する方法は?

この記事は、公開アカウント「Reading the Core」（ID: AI_Discovery）から転載したものです。

多くの人がコンピューター ビジョン アプリケーションを実行できます。はい、学習して実行するのはそれほど難しくありません。このような強力なコンピューター ビジョン アプリケーションを実行するために利用できるライブラリは数多くあります。

最近、TensorFlow 2020 Summit に注目していますか? 今年、TensorFlow チームは非常に優れた製品を多数リリースしました。この記事では、tensorflow.js モデルを使用してコンピューター ビジョン アプリケーションを実行する方法を説明します。

TensorFlow.js とは何ですか?

TensorFlow.js は、機械学習アプリケーションおよび JavaScript での機械学習モデルの開発、およびブラウザまたは Node.js で直接機械学習を使用するためのオープンソース コード ライブラリです。

Tensorflow.js モデルとは何ですか?

Tensorflow.js モデルは事前トレーニング済みのモデルであり、ユーザーはモデルをトレーニングするためのデータを準備/収集する必要がありません。モデルは NPM (Network Performance Monitor) および unpkg でホストされており、既存のプロジェクトに適用できます。

この記事では、tensorflow.js の MediaPipeFacemesh モデルを紹介します。このモデルは、顔がフレームの大部分を占める傾向があるモバイル デバイスの前面カメラ用に設計されています。

フェイスメッシュモデルのデモンストレーション

フェイスメッシュ モデルは、顔の動きに基づいてビデオ フレームを移動します。次のコンピューター ビジョン アプリケーションを実行するには、どのような手順が必要ですか?

ステップ 1: これらは、コンピューター ビジョン アプリケーションを実行するために独立して実行される 3 つの重要なスクリプト タグ コードです。

 < scriptsrc scriptsrc = "https://cdn.jsdelivr.net/npm/@tensorflow/tfjs-core" > </スクリプト>  
 < scriptsrc scriptsrc = "https://cdn.jsdelivr.net/npm/@tensorflow/tfjs-converter" > </スクリプト>  
 < scriptsrc scriptsrc = "https://cdn.jsdelivr.net/npm/@tensorflow-models/facemesh" > </スクリプト>  

• TensorFlow.js コアは、ニューラル ネットワークと数値計算用の柔軟な API です。
• TensorFlow.js コンバーターは、TensorFlowSavedModel を TensorFlow.js にインポートするためのツールです。
• facemesh パッケージは、画像内の顔の境界とランドマークを検出します。

ステップ 2: ウェブカメラを通じて顔を認識できるように、件名のコンテンツにビデオ HTML タグを含めます。

 <ビデオ幅ビデオ幅= 640  高さ= 480自動再生 ミュートid = "camera" > </ video >  

ステップ 3: スクリプト (通常は JavaScript) を使用して、キャンバス タグでグラフィックを動的に描画します。

 <キャンバス幅キャンバス幅= 640  高さ= 480   id = "拡張キャンバス" > </キャンバス>  

ステップ 4: キャンバス タグにビデオ タグを追加してビデオ フレームを再生し、顔の動きに応じてビデオ フレームを移動できるようにします。

 < videoautoplay loop id ="movie" style ="visibility: hidden" >  
 < sourcesrcsourcesrc = "TensorFlowjs.mp4" type = "video/mp4" > </ source >  
 </ビデオ>  

ステップ 5: 顔モデルを読み込み、顔のサイズを推定して、画像内の顔の境界とランドマークを見つけます。

 //カメラストリームを読み込む
const frame = document .getElementById("camera"); // ムービーストリームを読み込む
constムービー=ドキュメント.getElementById("ムービー");
 movie.play();//キャンバスを準備する
constキャンバス= document .getElementById("augmented_canvas");
 const draw = canvas .getContext("2d");const result = awaitmodel .estimateFaces(frame, false);

ステップ 6: 検出された顔に次のコードを使用してビデオ フレームを描画します。

 // カメラストリームをキャンバスにコピー
draw.drawImage(frame,0, 0, 640, 480);//顔が検出されているかどうかを確認します
 （結果の長さ＞ 0）の場合
 {
  （ i = 0とすると、i <  結果.長さ; i++) {
    const start =結果[i].topLeft;
    定数end =結果[i].bottomRight;
    const size = [end[0] — start[0], end[1] — start[1]]; //検出された各顔の上に四角形をレンダリングします。
   draw.drawImage(ムービー、開始[0]、開始[1]、サイズ[0]、サイズ[1]);
  } 
  
 }

以上です。上記の 6 つの手順に従って、コンピューター ビジョン アプリケーションを実行します。データ サイエンティストになるには Python または R プログラミング言語に精通している必要があると誰もが考えていますが、今では JavaScript を使用して機械学習アプリケーションを実行できます。