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]);
  } 
  
 }