CookSleep/gpt_image_playground

🎨 GPT Image Playground – これは何ですか

GPT Image Playgroundは、OpenAIのgpt-image-2.5（および互換）画像生成APIのためのブラウザベースのUIです。Webページ上で完全に画像の作成、編集、管理を行うことができ、すべてブラウザ内（IndexedDB）にローカル保存されるため、サーバー側のストレージは不要です。

---

主な機能 (READMEより)

機能	内容
テキストから画像 & 画像から画像	プロンプトから画像を生成、または最大16枚の参照画像とマスクを使用してガイド付き編集が可能。
バッチ & 反復ワークフロー	1つのリクエストで複数の画像を生成し、結果を新しい参照画像として昇格させ、次のラウンドで編集を継続可能。
ストリーミングプレビュー	Images APIと新しいResponses APIの両方で中間ステップをストリーミングし、最終画像完成前に部分的な結果を表示可能。
透過背景サポート	APIネイティブ（モデルがアルファチャンネルを返す）またはローカル後処理（ブラウザで緑/マゼンタ背景を除去）を選択してPNG/WebP出力が可能。
エージェントモード (マルチターンチャット)	コンテキストを記憶する対話型アシスタント。画像ツールを自動呼び出しし、過去の画像への@参照をサポートし、並列バッチ生成を実行し、オプションでWeb検索も可能。
ブランチ & やり直し	チャットの任意のターンを編集または再生成し、画像参照を分離した別ブランチを作成可能。
詳細なパラメータ追跡	サイズ、品質、レイテンシ、APIが実際に使用したモデル書き換え後のプロンプトを表示。クイックプリセットサイズ（1K/2K/4K）とモデル制限への自動丸め機能付き。
ローカルのみの履歴 & ギャラリー	すべてのタスク、サムネイル、メタデータはIndexedDBに保存され、SHA-256で重複排除。タスクを名前付きコレクションに整理、ドラッグ＆ドロップで並べ替え、名前変更、ZIPファイルとしてエクスポート可能。
マルチプロバイダー設定	OpenAI互換エンドポイント、sub2api (async)、fal.ai、およびJSON定義による任意のカスタムHTTPプロバイダーを内蔵サポート。各プロバイダーでAPIキー、モデル、タイムアウト、プロキシ設定、透過背景処理方法を個別に設定可能。
APIプロキシ & CORS対応	サーバー（Docker, Vercel, Cloudflare Workers）の背後にデプロイする場合、同オリジンの/api-proxy/を有効にしてリクエストを転送し、ブラウザのCORS制限を回避可能。
Codex-CLI互換性	アプリをCodex-CLIエンドポイントに向けると、UIが自動的にマルチ画像リクエストを並列の単一画像呼び出しに分割し、Codexがサポートする追加パラメータを公開。
URLベースのクイック入力	クエリパラメータ（apiUrl, apiKey, model, …）を追加することで設定を事前入力可能。ブックマークや他サイトへの埋め込みに便利。

---

技術スタック (バッジおよび一般的なViteプロジェクトより)

• フロントエンド: React 19 + TypeScript, Viteでビルド。
• スタイリング / UI: Tailwind/Ant Designスタイルのコンポーネント（明記されていませんが、この種のダッシュボードでは一般的）。
• 状態 & ストレージ: ブラウザのIndexedDBでローカル履歴を永続化。SHA-256ハッシュで重複排除。
• ビルド & デプロイ: 静的サイトホスト（Vercel, GitHub Pages, Cloudflare Workers）およびNginxプロキシ + ビルド済みアセットを実行するDockerイメージをサポート。

---

実行方法

1. ワンクリッククラウド – Vercel, GitHub Pages, Cloudflare Workersにデプロイ。環境変数 VITE_DEFAULT_API_URL（またはJSON設定）を画像生成エンドポイントに設定。
2. Docker – ghcr.io/cooksleep/gpt_image_playground:latest をプルして実行。オプションで ENABLE_API_PROXY を有効にして実際のAPI URLを隠蔽可能。
3. ローカル開発 – npm install && npm run dev。dev-proxy.config.json を追加して開発中のCORSを回避可能。
4. 静的ビルド – npm run build で生成される dist/ フォルダを任意の静的Webサーバーで配信。

---

想定ユーザー

• アーティスト & デザイナー: コードを書かずにOpenAIの画像モデル用UIを素早く使いたい方。
• プロダクトチーム: プロンプトのアイデアをテストしたり、アセットをバッチ生成したい方。
• 開発者: 独自のアプリに統合する前に、さまざまなAPIプロバイダー（OpenAI, fal.ai, カスタムエンドポイント）を試すサンドボックスが必要な方。
• 教育者 / ホビーユーザー: セルフホスト型のプライバシー重視な画像生成環境を探している方。

---

クイックスタートチェックリスト

• 互換サービス（OpenAI, fal.ai, sub2apiゲートウェイなど）のAPIキーを取得。
• 好みの方法でデプロイし、VITE_DEFAULT_API_URL を設定（またはURLパラメータを使用）。
• Web UIを開き、設定を追加（または事前入力されたものを使用）して生成を開始！

---

ライセンス

本プロジェクトは MIT License の下で公開されており、自由にフォーク、修正、セルフホストが可能です。