CookSleep/gpt_image_playground

🎨 GPT Image Playground – 何であるか

GPT Image Playground は OpenAI の gpt-image-2（および互換性のある）画像生成 API 用のウェブベースのフロントエンドです。ブラウザ内で直接画像を作成・編集でき、すべてのリクエストと結果をローカル（IndexedDB）に保存するため、第三者のサーバーに送信されることはありません。

コア機能

機能	何が得られるか
テキストから画像、画像から画像	プロンプトを入力し、最大16枚の参照画像をアップロード、マスクを追加して新しい画像を生成します。
バッチ処理と反復ワークフロー	一度の呼び出しで多数の画像を生成；結果のいずれかをワンクリックで次のラウンドの参照画像に昇格できます。
ストリーミングプレビュー	モデルが処理中は中間フレームをリアルタイムで表示し、長時間の「空白」待ちを回避します。
透明背景対応	APIがアルファチャンネルを返す場合のネイティブモード、または固色背景をローカルで除去するポストプロセスを選択できます。
エージェント（チャット）モード	コンテキストを記憶するマルチターン会話UI。画像ツールを自動で呼び出し、オプションでウェブ検索も実行可能。
分岐とリドゥ	任意のステップを編集または再生成；UIは新しい分岐を作成するため、履歴を失うことなく代替案を切り替えられます。
豊富な履歴とギャラリー	すべてのタスクがローカルに保存され、ウォーターフォールスタイルのギャラリーで閲覧可能。ユーザー名のコレクションに整理、検索可能、ZIP形式でエクスポート可能。
複数のAPIプロバイダー	OpenAI互換エンドポイント、`sub2api`（非同期）、`fal.ai`、およびJSON定義によるカスタムHTTPプロバイダーを組み込みサポート。
プロファイルごとの設定	複数のAPIプロファイル（異なるキー、モデル、タイムアウト、プロキシ設定）を保存し、即座に切り替え可能。
プロキシとCORS処理	DockerやVercelデプロイで有効化可能な同一オリジン `/api-proxy/` をオプションで利用し、ブラウザのCORS制限を回避。

技術スタック

フロントエンド: React 19 + TypeScript、Viteでバンドル。
状態管理とストレージ: オフライン専用の履歴用にブラウザの IndexedDB（SHA‑256重複排除）。
スタイル: Tailwind CSS（バッジのスタイルから暗黙的に継承）。
デプロイ: 静的ビルド（npm run build）で、Vercel、GitHub Pages、Cloudflare Workers、Docker（NGINXラッパー）、または任意の静的ファイルホスティングで配信可能。
バックエンド: 必要なし；重い処理はすべてリモートの画像生成APIが担当。

使い始め方

デプロイ方法を選択 – 1クリックでVercel、GitHub Pages Action、Cloudflare Workers、Docker、または npm run dev でローカル実行。
プリセットのAPI設定を提供 – VITE_DEFAULT_API_URL（Dockerでは DEFAULT_API_URL）環境変数で。URL、クエリパラメータ付きURL、または複数のプロファイルとカスタムプロバイダーを定義するJSONファイルを指定可能。
UIを開く – ホスティングされたサイト（例: https://gpt-image-playground.cooksleep.dev）がプリセットを読み込み、APIキーを要求し、画像生成準備完了。

一般的な利用シーン

クリエイティブプロフェッショナル：透明背景付きの迅速なマックアップ、ステッカー、アイコンが必要な場合。
開発者：コードを書かずに新しい gpt-image-2 モデルのプロンプトエンジニアリングをテストしたい場合。
チーム：共有され、プライバシーを守る生成アセットギャラリーが必要な場合（すべてブラウザ内に留まる）。
実験者：エージェントチャットモードでマルチステップ画像ワークフローを探索し、自動ウェブ検索補完を試す場合。

TL;DR: GPT Image Playground はオープンソースで、ReactベースのUIであり、OpenAI互換の画像生成APIを、完全にローカルに保存され、複数プロファイル対応、バッチ処理可能なプレイグラウンドに変換します。オプションの会話型「エージェント」モードと、任意の静的ホスティングプラットフォームへの簡単なデプロイを備えています。