このページは Cloud Translation API によって翻訳されました。

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

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

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

サンプルコード

顔スタイライザーのサンプルコードでは、このタスクの完全な実装を JavaScript で説明しています。このコードは、このタスクをテストし、独自の顔のスタイル化アプリの作成を開始するのに役立ちます。ウェブブラウザだけで、顔スタイライザーのサンプルコードを表示、実行、編集できます。

セットアップ

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

JavaScript パッケージ

顔スタイライザーのコードは、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 顔スタイライザータスクには、このタスクと互換性のあるトレーニング済みモデルが必要です。顔スタイライザーで利用可能なトレーニング済みモデルの詳細については、タスクの概要のモデルセクションをご覧ください。

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

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

タスクを作成する

顔スタイライザーの createFrom...() 関数のいずれかを使用して、推論を実行するためのタスクを準備します。トレーニング済みモデルファイルへの相対パスまたは絶対パスを指定して、createFromModelPath() 関数を使用します。モデルがすでにメモリに読み込まれている場合は、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"
      },
    });

データの準備

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

タスクを実行する

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

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

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

結果を処理して表示する

顔スタイライザーは、入力画像内で最も目立つ顔のスタイル化された MPImage オブジェクトを返します。

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

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