👗

OpenAI gpt-image-1 を使って着せかえカメラを実装

2025/11/04に公開

 振り返り前回の記事では OpenAI gpt-image-1 を使って写真から衣服を抽出の検証を行いました。
📘前回の記事: OpenAI gpt-image-1 で写真から衣服を抽出する
今回は抽出した衣服画像を使用して、着せかえアプリを作ってみます。

 カメラ機能の改修依頼衣服抽出機能は一旦完成したので、Webカメラの映像にオーバーレイできるように改修します。

Streamlitでは結構ハードルが高そうなので、フレームワークの変更も込みで、Claude Codeに依頼しました。
WEBカメラをアプリに追加して、抽出された衣服画像をリアルタイムでオーバーレイできるように変更。
Streamlitで実現が難しい場合はアーキテクチャを変更してください。
改修依頼に対する返答
推奨アーキテクチャ
FastAPI + OpenCV + JavaScript (Canvas API)
バックエンド: FastAPI (WebSocket + REST API)
画像処理: OpenCV (フレームキャプチャ)
フロントエンド: HTML/CSS/JavaScript (Canvas APIでオーバーレイ)

このアーキテクチャで実装を進めてよろしいですか？それとも他の検討事項があれば教えてください。
生成されたコードは、ClaudeCodeが気を利かせてくれたのか機能が山盛りだったので、少し手直ししました。

この辺はきちんと指示をしないとだめですね。

 画像合成機能の実装次にカメラ画像と衣服画像を合成する機能を追加します。
画像合成関数を実装
- 衣服抽出関数と同様の処理
- 関数パラメータ: 被写体画像, 抽出済み衣服画像
- プロンプト: 対象者に、この写真の衣服を着せてください。
  対象者の姿勢や体型に合わせて衣服を自然にフィットさせてください。
  対象と衣服以外は全て消去し、背景は単色にしてください。
- 衣服抽出関数自体は変更しない
- 「きせかえ」ボタン押下で関数を呼び出し合成結果を表示

 動作確認完成したアプリはこちらです。

IKEAで購入したぬいぐるみがあったので、動作確認してみます。
一発目にしてはなかなか良好ですね！

 着せかえ結果着せかえを試した結果をいくつかご紹介します。

 例1

元画像（コートと帽子を着て壁にもたれかかっている男性）
抽出された衣服

被写体
着せかえ結果

一番最初の検証結果です。着用者が変わるとかなり印象違いますね。

それにしても、この子はクマらしいですね。買ったときは雌ライオンだと思ってました。

 例2

元画像（オーバーオールを着た女性が両手で目を覆っている）
抽出された衣服

被写体
着せかえ結果

娘ちゃんに借りてきたお人形を着せかえしてみました。

顔が結構変わっちゃうな…この辺はプロンプトの調整で寄せられるか試してみたい。

 例3

元画像（白いレース生地のドレス）
抽出された衣服

被写体
着せかえ結果

これも借り物です。元の雰囲気が近いとかなりマッチしますね。

本人、大喜びでした。

 所感検証用アプリのレベルであれば、ClaudeCodeにかなり雑に指示してもそれなりのものを作ってくれるので、とても助かりました。

顔はちょっとした違いが目に付くので、プロンプトの調整を続けていきたいです。

 将来に向けて今後の改善点として、以下のようなことを考えています：
スマホで操作できるようにサーバに上げたい
UIを作り込んで、クローゼット機能なども用意したい
顔の再現性を高めるためのプロンプト調整