本アプリケーション「StyleDrop」は、AI技術を活用して、直感的かつインタラクティブな仮想試着（バーチャルトライオン）体験を提供することを目的として開発されました。ユーザーは、AIで生成した人物モデルや自身でアップロードした写真に対し、テキストから生成した様々な衣装をドラッグ＆ドロップするだけで、手軽に着せ替えシミュレーションを行うことができます。
使用言語：JavaScript, HTML, CSS
主要技術：Google Gemini API
プラットフォーム：Webブラウザ
AI画像生成モデル（Gemini）を全面的に活用し、企画から設計、実装までの全工程を担当しました。主な機能として、①ベースとなる人物画像のAI生成・アップロード機能、②テキスト指示（プロンプト）による衣装アイテムの並列生成機能、③画像内の人物をAIが自動検出する機能、④ドラッグ＆ドロップで特定の人物に衣装を適用させるAI編集機能などを実装しています。
ユーザーは、「AI生成」ボタンを押して、AIに人物の画像を生成させるか、「アップロード」ボタンから手持ちの画像ファイルを読み込ませることで、着せ替えのベースとなる画像を設定します。
ベース画像が設定されると、システムは自動的に画像内に存在する人物をAIで検出し、それぞれの位置を矩形（バウンディングボックス）で認識します。これにより、複数の人物が写っている画像でも、着せ替えたい対象を正確に指定できます。検出に失敗した場合は、画像を3つのエリアに分割するフォールバック機能が作動します。
画面左の「衣装パレット」で、トップス、ボトムス、シューズといったカテゴリごとに、欲しいアイテムをテキストで指示（例：「青いジーンズ」）し、「生成」ボタンを押します。すると、AIが指示内容に基づいたアイテム画像を3つ同時に生成し、パレットにストックします。
パレットから好きな衣装画像をドラッグし、キャンバス上の人物にドロップします。システムはドロップされた位置から対象人物を特定し、AIに対して「その人物に、その衣装を着せる」という編集を指示します。AIは元の画像の人物のポーズや背景を維持したまま、自然な形で衣装を合成し、瞬時に着せ替えが完了した画像を表示します。
完成したコーディネート画像は、「保存」ボタンを押すことで、PNGファイルとしていつでもダウンロードすることが可能です。
© Haruya Matsushima