Face Detect Clipperは、アップロードされた画像から顔を検出し、指定された設定に基づいて顔を中心に画像を切り抜くウェブアプリケーションです。すべての処理はユーザーのブラウザ内で完結し、サーバーに画像データが送信されることはありません。
🎯 ライブデモ: https://face-cropper.kazuph.workers.dev/
デプロイメント:
このアプリケーションは、静的サイトとしてCloudflare Workers (またはCloudflare Pages) を使用して簡単にデプロイできるように設計されています。必要なファイル（HTML、CSS、JavaScript、およびMediaPipeモデル関連ファイル）をCloudflareのプラットフォームにアップロードすることで公開できます。
- 高精度な顔検出: GoogleのMediaPipe Face Detectorを利用し、高精度な顔検出を実現します。
- クライアントサイド処理: 画像のアップロードから顔検出、切り抜き処理まですべてブラウザ内で実行されるため、プライバシーが保護され、サーバー負荷もありません。
- 多様な切り抜き設定:
- 処理モード:
- 精密処理 (2段階): より高い精度で顔を検出するために、まず画像全体から大まかに顔の位置を特定し、次にその周辺をさらに詳細に分析して切り抜きます。
- 標準処理 (中央部事前切り抜き): 画像の中央部分を指定された割合で事前に切り出し、その範囲内で顔を検出します。処理速度が速い傾向があります。
- 顔の相対サイズ: 切り抜かれる画像内での顔の大きさの割合を指定できます。
- 縦横比: 幅と高さを個別のスライダーと数値入力で1:1から16:16（またはその逆）まで自由に設定できます。
- 切り抜き基準点: 「顔の中心」または「両目の中間」を選択できます。
- 処理モード:
- リアルタイムプレビュー: 設定変更が即座にプレビューに反映されます（実際の切り抜き処理は「処理開始」後）。
- 画像表示オプション:
- 加工後の画像一覧は、「カード表示（余白あり）」と「余白なしグリッド表示」を切り替え可能です。
- サムネイルサイズを「小」「中」「大」から選択できます。
- 一括ダウンロード: 加工されたすべての画像をZIPファイルとして一括でダウンロードできます。
- デバッグモード: 顔検出のバウンディングボックスやキーポイントを視覚的に確認できます。
- 画像選択:
- 画面左側のコントロールパネルにある「画像を選択」ボタンをクリックするか、指定されたエリアに画像ファイルをドラッグ＆ドロップします。
- 複数の画像ファイルを一度に選択できます。
- 画像が選択されると、ステータスメッセージに選択されたファイル数が表示され、自動的にクリッピング処理が開始されます。
- 処理設定の調整 (任意):
- 画像処理が開始される前、または新しい画像を選択する前に、以下の設定を調整できます。
- 処理モード: 「精密処理 (2段階)」または「標準処理 (中央部事前切り抜き)」を選択します。「標準処理」を選択した場合のみ、「事前切り抜き範囲」スライダーが有効になります。
- 事前切り抜き範囲: 「標準処理」モード時、顔検出を行う中央領域のサイズをスライダーで調整します（10%～100%）。
- 顔の相対サイズ: 最終的な切り抜き画像における顔の高さの割合をスライダーで調整します（10%～90%）。
- 横幅比・高さ比: 切り抜く画像の縦横比を、幅と高さそれぞれ1～16の範囲でスライダーまたは数値入力で指定します。プレビューで現在の比率を確認できます。
- 切り抜き基準点: 「顔の中心」または「両目の中間」から選択します。
- デバッグモード: チェックを入れると、顔検出のバウンディングボックスやキーポイントが画像上に描画されます。
- 画像処理が開始される前、または新しい画像を選択する前に、以下の設定を調整できます。
- 処理実行:
- 画像選択後、自動的に処理が開始されます。手動で再処理したい場合は、設定変更後に「処理開始」ボタンをクリックします。
- 処理中はステータスメッセージに進捗が表示されます。
- 結果確認と操作:
- 処理が完了すると、画面右側の「加工後画像一覧」エリアに切り抜かれた画像（またはデバッグモードの場合は検出情報付き画像）が表示されます。
- 表示モード: 「カード」または「余白なし」を選択して、一覧の表示スタイルを変更できます。
- サイズ: 「小」「中」「大」を選択して、サムネイルの表示サイズを変更できます。
- 個別ダウンロード: 各加工済み画像のサムネイル下にあるダウンロードアイコン（💾）をクリックすると、その画像をPNG形式でダウンロードできます。
- 一括ダウンロード: 「すべてダウンロード (ZIP)」ボタンをクリックすると、加工されたすべての画像（デバッグモードでない場合）がFaceDetectClipper_images.zipという名前のZIPファイルとしてダウンロードされます。
- ファイル名は、[処理モードプレフィックス_][連番3桁]_clipped.png の形式になります（例: twopass_001_clipped.png, precrop50_002_clipped.png）。
このアプリケーションでは、Googleによって開発された MediaPipe Face Detector を使用しています。これは、機械学習に基づいて構築された高速かつ軽量な顔検出ソリューションです。
- 基本モデル: BlazeFaceモデルをベースにしており、モバイルデバイスやウェブブラウザ上でのリアルタイム推論に適しています。6つの主要な顔のランドマーク（両目、鼻先、口の中心、両耳珠）を検出できます。
- クライアントサイド実行: MediaPipeタスクはWebAssembly (Wasm) とWebGLを利用してブラウザ内で直接実行されるため、ユーザーの画像データが外部サーバーに送信されることはありません。
- 精密処理 (2段階):
- 1段階目: まず、アップロードされた画像全体（またはそのコピー）に対して顔検出を行います。
- 中間クロップ: 1段階目で顔が検出された場合、その顔のバウンディングボックスを基準に、少しマージンを加えた領域を内部的に切り出します。このマージンにより、顔全体が確実に含まれ、かつ背景ノイズが低減された領域が作られます。
- 2段階目: 1段階目で切り出された画像に対して、再度顔検出を行います。より限定された領域で再度検出を行うことで、顔のパーツ（キーポイント）の位置特定精度が向上する可能性があります。
- 最終クロップ: 2段階目の検出結果（中間クロップ画像に対する相対座標）と、中間クロップ領域の元画像におけるオフセットを考慮して、元のフル解像度画像から最終的な切り抜きを行います。
- 標準処理 (中央部事前切り抜き):
- 事前クロップ: ユーザーが指定した「事前切り抜き範囲」の割合に基づき、元画像の中心部分を切り出します。例えば50%に設定した場合、画像の中心を基準に幅・高さともに50%の領域が対象となります。
- 顔検出: この事前に切り出された領域に対してのみ顔検出を実行します。
- 最終クロップ: 検出された顔データ（事前クロップ領域に対する相対座標）と、事前クロップ領域の元画像におけるオフセットを考慮して、元のフル解像度画像から最終的な切り抜きを行います。このモードは、主要な被写体が画像の中心付近にいる場合に処理を高速化するのに役立ちます。
どちらのモードも、最終的な切り抜きは設定された「顔の相対サイズ」「縦横比」「切り抜き基準点」に基づいて行われます。
- フロントエンド: HTML, CSS, JavaScript
- 顔検出ライブラリ: MediaPipe Tasks Vision (Face Detector)
- ZIP圧縮 (一括ダウンロード用): JSZip
- デプロイメント (推奨): Cloudflare Workers / Cloudflare Pages
このREADMEが、アプリケーションの理解と利用の一助となれば幸いです。