【個人開発】Cloud Vision APIで個人情報を隠すサービスを開発しました🎉
はじめに
今回、AI Agent Hackathon with Google Cloudに参加させていただきました！
ハッカソンへの参加も、AIを活用した開発も初めての挑戦でしたが、自分が必要としていたサービスを完成させることができてとても嬉しいです！
私が開発したサービスを通じて、皆さんの記事執筆のハードルが下がり、より多くの方が気軽に技術記事を書けるようになると嬉しいです！それでは、私のプロジェクトについて詳しくご紹介していきます🥰
作ったサービス
私が開発したのは、Cloud Vision APIを活用して画像内の個人情報を自動で検出し、マスキングするサービスです。このサービスは、スクリーンショットを技術記事に使用する際の個人情報の手動マスキング作業を、ワンクリックで完了させることができます。
使い方
使用方法はとても簡単で、初心者の方でも簡単に利用できます。
1.個人情報を含む画像をアップロードする。
2.Execute Maskingボタンを押す。
3.AIが処理した画像を保存して完了！
実際の使用例
実際の使用例を通じて、サービスの動作を詳しく見ていきましょう。
ステップ1: 画像のアップロード
まず、個人情報が含まれた画像を用意します。例えば、以下のようなGitHubの管理画面のスクリーンショットを使用します。
この画像には、開発者の名前やIDなど、公開したくない情報が含まれています。
ステップ2: 処理の実行
次に、この画像をサービスのインプット欄にドラッグ＆ドロップするか、ファイル選択ボタンからアップロードします。
画像がアップロードされたら、「Execute Masking」ボタンをクリックします。
ステップ3: 結果の確認と保存
数秒後、AIが処理を完了し、個人情報がマスキングされた画像が表示されます。
この画像を確認し、問題なければダウンロードボタンをクリックして保存します。
こちらが、生成された個人情報が隠された画像です！
プロジェクトが対象とするユーザー像
このサービスの対象ユーザーは、Zenn等の記事を書く方を想定しています。
具体的には、以下のユーザーを対象としています。
- Zennなどのプラットフォームで技術記事を執筆する開発者
- Apple Developer、Firebase、GitHubなどの管理画面のスクリーンショットを頻繁に使用する方
- 個人を特定されずに、情報を共有したい技術者
背景にある課題と課題へのソリューション
私は最近、React NativeのフレームワークであるExpoを実装しており、その過程でApple DeveloperやFirebaseの管理画面のスクリーンショットを記事に投稿する機会が増えました。
しかし、その際にスクリーンショットに映る本名や企業名、クライアント名などの個人情報を隠す作業が発生し、毎回手作業で処理するのが非常に面倒だと感じていました。
この作業は、人間でなくても判断できるものであり、AIを活用すれば自動化できるのではないかと考え、今回のサービスを作りました。
これを使えば、手作業で一つ一つマスキングする手間がなくなり、作業時間を短縮できるだけでなく、個人情報を見落としてしまう心配も減ります。
結果として、個人情報保護と業務効率化の両立を実現し、ユーザーが安心してスクリーンショットを共有することができます。
デモ動画
サービスの実際の動作をご覧いただくために、デモ動画を用意しました。以下のリンクからご覧ください。 この動画では、画像のアップロードから処理完了までの一連の流れを詳しく解説しています。
処理の流れ
サービスの内部処理は以下の流れで行われます
- ユーザーが画像をアップロード
- Cloud Vision APIがテキストを検出
- Gemini 1.5 Proが個人情報を分類
- 検出された個人情報の座標を取得
- Canvas APIを使用してマスキング処理
- 処理済み画像をユーザーに提供
この流れにより、個人情報のマスキングがされています。
システムアーキテクチャ図
使用技術
プロジェクトで使用した主な技術は以下の通りです。
Cloud Run
AI Agent Hackathon with Google Cloudの開発プロジェクト条件の一つにCloud Runを使用する記載があったのと、使用技術をGoogleサービスでまとめたかったので、デプロイはCloud Runで行いました。
Cloud Vision API
画像内のテキスト検出に使用しました。
はじめは、Geminiを使用して物体の座標を取ろうとしましたが、うまく座標を取ってくれませんでした。
そこで、Cloud Vision APIに変更したら、正確に全テキストの座標を取得することができました。
Gemini 1.5 Pro
テキスト解析と個人情報の分類に活用しました。
Canvas API
ブラウザ上での画像処理とマスキングの描画に使用しました。
プロンプト
初めは、"個人情報と思われる情報を特定してください。"とだけGemini 1.5 Proにプロンプトとして渡しましたが、どれが個人情報なのか分かってもらえず、全部のテキストを隠してしまいました。
そこで、下記のようにプロンプトに個人情報かどうかの判断材料を詳しく渡して判断してもらいました。
const prompt = `以下のテキストの中から、ブログ公開時に隠したほうが良い情報を特定してください。隠すべき情報の基準は次の通りです：
1. APIキー：アルファベットと数字が混在する長い文字列。
2. メールアドレス：'@' を含む文字列。
3. 電話番号：数字と '-' が含まれる形式（例: "03-1234-5678").
4. クレジットカード番号：16桁の数字。
5. 個人名：明らかに名前と分かるもの。
6. 企業名やサービス名：次のような特徴を持つものを特定してください：
- 通常1つまたは複数の単語で構成され、記号（例: '-', '.'）やアルファベットが混在する場合が多い。
- 文脈に基づいて「特定のブランド」「会社名」「プロジェクト名」などと推測されるもの。
- 一般的な単語（例: 'project', 'dashboard', 'add'）は含まない。
7. 以下の文字列が含まれていたら、それは隠すべき情報としてください。
- yumemi
これを渡したら、個人情報のみを認識してマスキングしてくれるようになりました。
料金
Google Cloudの新規ユーザー向けの無料クレジットを活用したため、開発期間中は実質的に無料で作りました。実際の運用を想定した場合の概算コストは以下の通りです。
プロジェクトのコードリポジトリのURL
本サービスのリポジトリURLはこちらです。
さいごに
ここまで読んで下って、ありがとうございます🙌
はじめてAIの個人開発をしてみましたが、AIを使うと作業効率化ができてとてもいいと思いました！
また、実際に自分で開発したことにより、こんなのも作ってみたい！というアイディアが浮かぶようになりました。
今後はこちらのサービスをベースに、人の顔を認識してくれるCloud Vision APIの機能で、イベントで撮った写真の人の顔を隠してくれるサービスを作りたいと思っています🥰
Discussion