猫の手ツール

Algorithm & UI/UX

AIすっぴん隠し:顔パーツのマスクと螺旋状の重ね描き

ただ全体をぼかすだけでは「不自然な写真」になります。本ツールでは、AIによる478点の顔面座標解析と、Canvasを用いた特殊なブレンディング技術を組み合わせ、目や口などをぼかしの対象から外すマスクを作っています。顔の推定位置によっては境界がずれるため、肌だけを確実に選別する処理ではありません。

このツールの入力から出力まで

現行コードの確認日:

入力
人物写真と美肌処理の強さを入力します。
処理
顔輪郭のマスクから目・口・鼻付近を除き、縮小画像を36回ずらして重ねたぼかしを元の写真へ混ぜます。
出力
最大10人の検出設定で、保存はJPEG品質0.9です。

まず確認する点:肌荒れを個別認識する処理ではありません。強さを上げるほど肌の模様や質感も薄くなり、眼鏡や髪との境界にも影響します。

仕上がりの例

人物の肌を、なめらかに見せた例です。

加工前・加工後
左は屋外で自撮りした人物の写真。右は肌の質感をなめらかに調整した写真。

サンプルにはAIで生成した架空の人物画像を使用しています。

加工前・加工後

左は屋外で自撮りした人物の写真。右は肌の質感をなめらかに調整した写真。

掲載画像はサイトにある既存の公開作例です。保存済みの資料ではAIで作成した架空の人物・手の画像を使用しています。今回の確認日が、この作例を実行した日を表すわけではありません。

保存済み検証記録の条件を見る

資料の種類は「ツールの出力画像を保存した記録」です。公開作例と保存済み記録で素材や色などが異なる場合があるため、下の数値は保存済み検証記録の条件として読んでください。

記録の入力画像
1788×2400px (JPEG)
記録の出力画像
804×1080px (JPEG)
保存済み記録の主な操作・出力条件
画面の項目記録の値現行コードの初期値・範囲
美肌補正強度50初期値 50 / 範囲 0〜100

記録では「この画像で保存へ進む」から完成表示へ進んでいます。初期値と記録値を比べてから、効果を1項目ずつ変えると作用を確認しやすくなります。

資料ファイルの作成日は実行日として扱っていません。個別端末の処理速度や、ほかの写真に対する検出・加工の精度を測定した資料でもありません。

実装の確認箇所:src/pages/ai/face-lan/skin-smooth/index.astro。以下のコード抜粋と出力条件は、この本番実装に基づいて説明します。

仕組みを読み進めるときは、MediaPipeの顔ランドマーク(顔の点を使う描画と変形)、Canvas APIと画像処理(画像寸法、drawImage、画素と透明度の扱い)が参考になります。

1. 目・鼻・口を避ける「コンテキスト・マスキング」

美肌加工において最も重要なのは「加工しない場所」を決めることです。本ツールでは、MediaPipeのFace Landmarkerから得られる詳細なメッシュ座標を利用し、肌領域のマスクを作成しています。

顔全体の輪郭を描画した後、Canvasのdestination-out(くり抜き)モードを使用して、目、口、そして「鼻の穴」といったコントラストの強いパーツをマスクから除外しています。これにより、推定した顔の輪郭内をぼかし、目や口などの領域には元の写真を残します。

36回の重ね描きで使う位置を求める部分です。strengthは0〜100で、最大半径15pxの範囲へ螺旋状に配置します。

function blurOffsets(strength) {
  return Array.from({length: 36}, (_, i) => {
    const angle = i * 2.39996;
    const radius = Math.sqrt(i / 36) * strength / 100 * 15;
    return {x: Math.cos(angle) * radius, y: Math.sin(angle) * radius};
  });
}

2. 黄金角を用いた「スパイラル・サンプリング・ブラー」

一般的なガウスぼかしやCSSフィルタではなく、あえてCanvas上での「重ね描き」によるブラーを採用しています。黄金角(約137.5度)に基づいた螺旋状に画像をオフセットさせながら複数回描画することで、単なるボケとは異なる、柔らかく均一な「美肌フィルター」特有の質感を生成しています。

また、高解像度のままこの処理を行うと負荷が高いため、内部的に20%程度のサイズに縮小したサブCanvasを利用して計算を行う「ダウンサンプリング・ハック」を組み合わせ、重ね描きに使う画素数を抑えています。ただし最終的な合成は処理画像のサイズで行い、端末によって描画に時間がかかります。

出力の仕様と確認する点

入力は長辺1080px以下に縮小します。ぼかし用画像はさらに縦横20%のCanvasへ描き、位置をずらして36回重ねます。強さはぼかし半径と、元画像に混ぜる不透明度の両方へ影響します。

マスクは顔の輪郭から目・口・鼻付近の領域を引いて作ります。シミや肌荒れを個別に検出して除去する仕組みではなく、細部をぼかして目立ちにくくする加工です。髪やメガネが重なる部分にも注意してください。

最大10人の検出設定で、保存はJPEG品質0.9です。強くかけるほど肌の細部が失われるため、拡大表示で不自然な境界がないか確認してから保存します。

制作時に確かめたこと