AI IMAGE STUDIO AI画像生成・編集ツール
- PHP
- Vanilla JS
- Canvas API
- OpenAI Images API
- XAMPP / Apache
- Session Auth
OVERVIEW
プロジェクト概要
課題
ChatGPTの画像生成は月額サブスクや回数制限があり、 生成した画像のダウンロードもしづらい。 「プロンプトから作る → 一部だけ直す → すぐ書き出す」を、 ブラウザ上で気軽に完結できる自分専用ツールが欲しかった。
目的
OpenAIの画像API（gpt-image系）を自分のキーで直接叩き、 生成・部分編集（インペイント）・透過PNG書き出し・履歴管理までを PHP + Vanilla JS で一人で構築。さらに公開デモとして、 誰でも触れるのにAPIコストが暴走しない仕組みまで作ることを目標にした。
PROCESS
制作プロセス
-
PLAN
Figmaで3カラムのUIを設計し、「生成 → 部分編集 → 書き出し → 履歴」という必要機能を洗い出し。
-
BUILD
XAMPP上のPHPでOpenAI画像API（gpt-image系）を叩くバックエンドを構築。APIキーはサーバー側の
.envに隠蔽し、フロントはVanilla JSで実装。 -
EDIT
Canvasで赤マスクを描画 → 編集API用マスクに変換 → 羽根ぼかし合成で「塗った所だけ」自然に再生成する部分編集（インペイント）を実装。
-
EXPORT
背景の白を flood-fill で段階的に透明化し、被写体の外接矩形でトリミング。余白ゼロの透過PNGとして書き出せるように。
-
SECURE & DEMO
全APIにログイン必須、
.htaccessで.envを遮断。回数・予算制限のデモモードを足し、公開デモとして安全に触れる形にした。
GALLERY
成果物ギャラリー
RETROSPECTIVE
振り返り・工夫した点
NATURAL PARTIAL EDIT
「塗った所だけ変える」を自然にするのが最大の難所。赤マスクを OpenAIの編集API用マスクに変換しつつ、返ってきた画像を マスクのアルファを広めにぼかして合成することで、 編集領域と元画像の境目をなめらかに馴染ませた（ChatGPT相当の仕上がり）。
SIZE-FIT TRANSPARENT PNG
外周や透明に繋がる白領域をflood-fillで辿り、白さに応じて段階的に透明化。 さらに不透明ピクセルの外接矩形で切り抜き、余白ゼロの素材として書き出せるようにした。
COST GUARDRAILS
公開デモ最大の課題は自分のAPI課金の暴走。最高画質の禁止・ 1人1日の回数制限・¥500の予算上限をサーバー側で強制し、 さらにOpenAI側でも月額上限を設定。多層で財布を守る設計にした。
SECURITY
全APIにログイン必須を適用し、生成APIを直接叩いても401。
APIキーは.envをサーバー側に置き、.htaccessでWeb公開から遮断した。
SELF-CONTAINED DEMO
個人用の本番版とは別に、デモを完全に独立したフォルダとして構築。 保存先もプロジェクト内に自己完結させ、公開サーバーにそのまま載る形にした。
LIVE
公開デモ（ゲストで試せます）
下記からゲストとして実際に生成・編集を試せます。 コスト保護のため最高画質は無効・1人1日5回まで・全体予算¥500の制限付きです。 枠を使い切っている場合はご容赦ください。