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

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

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

サンプルコード

Face Stylizer のサンプルコードには、このタスクの JavaScript での完全な実装が示されています。このコードは、このタスクをテストし、独自の顔のスタイル設定アプリの作成を開始するのに役立ちます。ウェブブラウザのみを使用して、Face Stylizer のサンプルコードを表示、実行、編集できます。

セットアップ

このセクションでは、Face Stylizer を使用するように開発環境を設定する主な手順について説明します。プラットフォームバージョンの要件など、ウェブと JavaScript の開発環境の設定に関する一般的な情報については、ウェブの設定ガイドをご覧ください。

JavaScript パッケージ

Face Stylizer コードは、MediaPipe @mediapipe/tasks-vision NPM パッケージから入手できます。これらのライブラリは、プラットフォームの設定ガイドの手順に沿って見つけ、ダウンロードできます。

必要なパッケージを NPM からインストールするには、次のコマンドを使用します。

npm install @mediapipe/tasks-vision

コンテンツ配信ネットワーク（CDN）サービスを使用してタスクコードをインポートする場合は、HTML ファイルの <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 タスクには、このタスクに対応したトレーニング済みモデルが必要です。Face Stylizer で使用可能なトレーニング済みモデルの詳細については、タスクの概要のモデルセクションをご覧ください。

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

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

タスクを作成する

Face Stylizer の createFrom...() 関数のいずれかを使用して、推論を実行するタスクを準備します。トレーニング済みモデルファイルの相対パスまたは絶対パスを指定して createFromModelPath() 関数を使用します。モデルがすでにメモリに読み込まれている場合は、createFromModelBuffer() メソッドを使用できます。

次のコードサンプルは、createFromOptions() 関数を使用してタスクを設定する方法を示しています。createFromOptions 関数を使用すると、構成オプションで Face Stylizer をカスタマイズできます。

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

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"
      },
    });

データの準備

Face Stylizer は、ホストブラウザでサポートされている任意の形式の画像内の顔をスタイル設定できます。このタスクは、サイズ変更、回転、値の正規化など、データ入力の前処理も処理します。

タスクを実行する

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

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

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

結果を処理して表示する

Face Stylizer は、入力画像内の最も目立つ顔のスタイル設定を含む MPImage オブジェクトを返します。

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

鉛筆とマーカーで描かれたスケッチスタイルの女性の生成されたクローズアップ。

上記の出力は、次の入力画像にカラースケッチモデルを適用して作成されました。

前の出力の生成に使用された女性の写真