Privacy Filter

https://github.com/shiraka539/Progate_Hackathon_20260221

GitHub

TypeScript

AWS

Python

Docker

顔にモザイクを入れることで、プライバシーを保護するアプリ

shiraka539

髙木拓哉

n2g46vunc3o

ac9h9oef7kk

田中蓮悠

推しアイデア

画像に顔があるときに、任意でモザイクを追加、削除できる

作った背景

SNSで画像を上げたいときに、顔を編集する手間をなくしたい

推し技術

AmazonRecognitionを利用することで、高い精度で顔を検知することができる

プロジェクト詳細

一言でいうと

SNS投稿前の『最後の手間』をゼロに。AIが自動で顔を検知・保護する

制作した理由

普段SNSを使っていく中で、風景の画像は投稿したい!けど顔を隠すのが面倒くさい!と感じたことがチーム内であったので、その時に顔を検知して勝手に隠してくれるアプリケーションを作ればいいというのが理由です。

議論した過程

画像や動画というテーマの中で、AWSRekognitionを用いて顔認識ができるということを知ったときに画像の研究室に所属している人の、興味の分野がこれに近かったこともありこれを採用するという流れになった。 ただ顔認識をするだけでなく認識後に何ができるかを考えた。 そこでチームが意見を出し合って、一番身近なSNSなどで映り込みによるプライバシーの欠如が問題であるという意見がでた。 最終的には、画像は取捨選択できる状態で、動画はフレームごとの処理という関係上選択はできず検知した顔をモザイクするというアプリケーションが完成した。

言語フレームワーク

フロントエンド

Next.js (App Router) TypeScript Tailwind CSS WebSocket

バックエンド

FastAPI (Python): 高速なAPIサーバー Uvicorn: ASGIサーバー WebSocket: 動画処理の進捗状況をフロントにプッシュ通知する Data Hiding:画像加工の証拠として画像に見えない形でメッセージを残す

AI / 画像・動画処理

AWS Rekognition: 顔検知(DetectFaces)に使用。 Boto3: PythonからAWSを操作するためのSDK。 OpenCV (cv2): 動画の読み込み、フレーム分割、描画。 Pillow (PIL): 画像の合成、リサイズ。 MoviePy: 動画のエンコード(H.264/libx264)とWeb最適化。

処理の流れ

Next.jsからファイルをアップロード FastAPIがAWS Rekognitionを叩き、顔の座標データを取得 Python(OpenCV/MoviePy)側で座標を元に絵文字を合成し、Web用(H.264)に再エンコード

ターゲット

SNSを利用する若者で、自分の顔は隠したいが画像を投稿したい人

機能紹介

画像顔隠し機能 画像をこの画面からアップロードすると顔を隠してくれる機能

動画顔隠し機能 画像と同じようにアップロードすると隠してくれる機能

加工証明機能 加工済みの画像に「本サイトでAWSを用いて適切に処理された」という情報を不可視な状態で埋め込む機能

こだわりポイント

AIが自動で隠すだけでなく、検知された顔をクリックすることで「あえて隠さない(自分だけ出す)」といった選択が可能なUI。

今後の展望

AWSRekognitionによる顔領域とユーザが選択する領域のずれが発生しているため、ユーザが違和感なく操作できるよう領域を合わせる。 ユーザが絵文字を選択することで重ねる絵文字を変更する機能の実装。

shiraka539

@d50b1d6b80dfd915