ウェブ向けの顔のスタイル設定ガイド

MediaPipe Face Stylizer タスクを使用すると、画像内の顔に顔のスタイルを適用できます。このタスクでは、さまざまなスタイルの仮想アバターを作成できます。

この手順で説明するコードサンプルは、 GitHub。機能、モデル、構成オプションの詳細については、概要をご覧ください。

サンプルコード

顔スタイライザーのサンプルコードでは、タスクを示しています。このコードは、このタスクのテストと独自の顔スタイル設定アプリを作成してみましょう。特定のリソースを表示、実行、顔スタイライザーのサンプルを編集ウェブだけを使用してコーディングできます。

セットアップ

このセクションでは、開発環境を設定するための主な手順について説明します。顔スタイライザーの使用が推奨されます設定に関する一般的な情報については、プラットフォームバージョンを含む、ウェブおよび JavaScript 開発環境。ウェブ用の設定ガイドをご覧ください。

JavaScript パッケージ

顔スタイライザーのコードは MediaPipe @mediapipe/tasks-vision から入手できます。 NPM パッケージ。こちらのプラットフォームのセットアップガイドをご覧ください。

次のコマンドを使用して、NPM を介して必要なパッケージをインストールできます。

npm install @mediapipe/tasks-vision

コンテンツ配信ネットワーク（CDN）を使用してタスクコードをインポートする場合追加するには、次のコードを <head>タグを追加します。

<!-- You can replace JSDeliver with another CDN if you prefer -->
<head>
  <script src="https://cdn.jsdelivr.net/npm/@mediapipe/tasks-vision/vision_bundle.js"
    crossorigin="anonymous"></script>
</head>

モデル

MediaPipe Face Stylizer タスクには、このインターフェースに対応するトレーニング済みモデルが必要ですタスクを実行します。顔スタイライザーで利用可能なトレーニング済みモデルについて詳しくは、以下をご覧ください。タスクの概要のモデルセクションをご覧ください。

モデルを選択してダウンロードし、プロジェクトディレクトリに保存します。

<dev-project-root>/app/shared/models/

タスクを作成する

顔スタイライザーの createFrom...() 関数のいずれかを使用して、タスクを準備します。推論を実行できますcreateFromModelPath() 関数を相対値またはトレーニング済みモデルファイルの絶対パスです。モデルがすでに Google Cloud Storage に createFromModelBuffer() メソッドを使用します。

以下のコードサンプルは、createFromOptions() 関数を使用して以下を行う方法を示しています。タスクを設定します。createFromOptions 関数を使用すると、設定オプションがある顔スタイライザー。

次のコードは、カスタム関数でタスクをビルドして構成する方法を示しています。オプション:

const vision = await FilesetResolver.forVisionTasks(
  // path/to/wasm/root
  "https://cdn.jsdelivr.net/npm/@mediapipe/tasks-vision@latest/wasm"
);
const facestylizer = await FaceStylizer.createFromOptions(
    vision,
    {
      baseOptions: {
        modelAssetPath: "https://storage.googleapis.com/mediapipe-models/face_stylizer/blaze_face_stylizer/float32/latest/face_stylizer_color_sketch.task"
      },
    });

データの準備

顔スタイライザーでは、ホストがサポートしているすべての形式の画像内の顔のスタイルを設定できますできます。このタスクでは、サイズ変更、変換、読み込みなどのデータ入力の前処理もローテーションと値の正規化の 2 つです

タスクを実行する

顔スタイライザーは、stylize() メソッドを使用して推論をトリガーします。タスクはデータを処理し、顔のスタイルを設定して、結果を報告します。顔スタイライザーの stylize() メソッドの呼び出しは同期的に実行され、ユーザーインターフェーススレッドです。

次のコードは、タスクモデルを使用して処理を実行する方法を示しています。

const image = document.getElementById("image") as HTMLImageElement;
const faceStylizerResult = faceStylizer.stylize(image);

結果の処理と表示

Face Stylizer は、MPImage オブジェクトを主な顔の文字を検索できます。

このタスクからの出力データの例を次に示します。

上記の出力は、カラースケッチを適用して作成されました。次の入力画像にマッピングします。