Next.js + MediaPipe を使ってブラウザのみ... ノート

Next.js + MediaPipe を使ってブラウザのみで動作する顔評価アプリを構築する方法(アップロード不要、$0/スキャン)

著者は、既存の「顔評価」ツールが自撮り写真をアップロードしたり、スキャンごとにAPI料金が発生したりする問題に対処するためにPSLRateを作成しました。PSLRateの核となる原則は、ユーザーのブラウザ内で完全に顔の魅力スコアを計算することであり、サーバーへのアップロードや継続的な料金の必要性を排除します。このクライアントサイドのアプローチは、対称性、顔の三分の一と五分の一、眼角傾斜、顔の幅と高さの比率などの顔の測定可能な幾何学的特徴に焦点を当てています。これらの幾何学的計算は決定的であり、外部モデルやクラウド処理を必要としません。このツールはMediaPipeのFaceLandmarkerを活用して、ユーザーのデバイス上で直接478個の3D顔ランドマークを抽出します。これらのランドマークは、理想的な比率への近さに基づいて、それぞれゼロから1のスケールでスコアリングされるさまざまな幾何学的指標を計算するために使用されます。これらの幾何学的スコアの加重ブレンドを使用して、10点満点の最終的な魅力スコアが生成されます。この無料ティアは完全にクライアントサイドであり、ユーザーの写真がブラウザから決して離れないため、真に無料でありプライバシーを保護します。有料ティアも利用可能で、写真が一度ビジョンLLMに送信され、パーソナリティと「グローアップ」の読み取りが行われ、ユーザークレジットを通じてAPI料金がカバーされます。決定論的な作業をクライアントにプッシュするというこのアーキテクチャ上の決定は、価値があり信頼できる無料製品を作成するための鍵として強調されています。
CdXz5zHNQW_aMuaI1O3m7.webp