OpenAIのimagegen-demoオープンソースを徹底解説：GPT-image-2 API中継サービスに4ステップで接続する方法

作者注：OpenAI 官方开源了基于 gpt-image-2 的 Photobooth 演示项目，本文将深度拆解其源码与流式实现原理，并讲解如何通过 APIYI 官转通道零门槛复现该能力。

OpenAI 官方在 GitHub 上开源了 openai-imagegen-demo 项目，这是配合 gpt-image-2 发布的 Next.js 演示应用，演示了流式图像生成、肖像风格化、多风格并发等新模型独有的能力。项目地址：github.com/openai/openai-imagegen-demo。

这不是又一个 Hello World 示例，源码里藏着 OpenAI 官方推荐的 partial_images 渐进式流式输出模式，以及 /v1/images/edits 端点在多图编辑场景下的最新用法。

核心价值: 读完本文，你将彻底理解这份官方 Demo 的架构、关键参数、复现步骤，并知道在国内如何通过 APIYI 官转通道免翻墙、免等待地使用相同的 gpt-image-2 API。

openai-imagegen-demo 核心要点

要点	说明	价值
项目定位	OpenAI 官方开源的 Photobooth 演示，展示 gpt-image-2 肖像风格化	最权威的 gpt-image-2 集成参考
技术栈	Next.js 15 App Router + TypeScript + Tailwind + shadcn/ui	现代 Web 技术栈，生产级可复用
核心端点	`POST /v1/images/edits`，搭配 `stream: true` 与 `partial_images`	官方首个流式图像生成 Demo
模型	`gpt-image-2`，质量档 `high`，尺寸 `1024x1536`（2:3 肖像）	强调人像保真、表情还原
授权	MIT License，可自由商用、二次开发	商业项目可直接集成
接入方式	官方需 OpenAI API Key；官转通道 `apiyi.com` 国内可直连	降低门槛、无需 VPN

imagegen-demo 项目定位详解

openai-imagegen-demo 本质是一个交互式照相馆（Photobooth）：用户上传或拍摄一张自拍，选择最多 4 种预设风格（如针织风、数字艺术、油画等），应用并发调用 gpt-image-2 的 images/edits 端点，在流式中逐步返回每种风格的成品。

与市面上常见的"文生图 Demo"不同，这份官方仓库聚焦在两个新能力上：图生图（image editing） 和 流式渐进输出（partial_images）。前者解决了"保持人物一致性"这一工程难题，后者让等待体验从 30 秒黑屏变成逐帧渐现。

imagegen-demo プロジェクト構成の解説

主要なソースコードの分析

このプロジェクトの核となるのは、app/api/photobooth/route.ts という1つの API ルートです。このルートは、フロントエンドから送られてきたポートレート画像とスタイルのプロンプトをまとめ、ストリーミング形式で OpenAI の /v1/images/edits エンドポイントにリクエストを送信します。リクエストボディの主要な構造は以下の通りです。

const body = {
  model: "gpt-image-2",
  prompt: `${style.prompt}\n\n${OPENAI_IMAGE_OUTPUT_REQUIREMENTS}`,
  images: [{ image_url: imageDataUrl }],
  size: "1024x1536",
  quality: "high",
  output_format: "png",
  stream: true,
  partial_images: 2,
};

以下の3つの詳細点に注目してください：

stream: true + partial_images: 2: これは gpt-image-2 独自のストリーミング機能です。サーバー側で中間フレームを2回プッシュしてから最終的な画像を生成します。
images パラメータ: 1枚または複数の参照画像のデータURLを受け取り、複数画像の融合編集をサポートします。
OPENAI_IMAGE_OUTPUT_REQUIREMENTS: 「ポートレートの比率を2:3にし、人物のポーズと表情を維持する」ことを強制する設定です。これは、画像編集のプロンプトを適切に記述するための黄金律といえます。

ストリーミングイベントの解析

ルートは SSE（Server-Sent Events）を通じて公式のレスポンスを監視し、以下の3種類のイベントを処理します。

image_edit.partial_image: 中間フレーム。フロントエンドに style-partial をプッシュします。
image_edit.completed: 最終成果物。フロントエンドに style-final をプッシュします。
error: 例外発生時。フロントエンドで一括キャッチします。

フロントエンドの React 側では、カスタムフックを使用して writeQueue という Promise チェーンを管理しています。これにより、複数のスタイルを同時に処理する際のイベント順序の乱れを防いでいます。ここが本デモにおいて最もエンジニアリング的な参考価値が高い部分です。

imagegen-demo のクイックスタート

最短の再現手順

公式 README に従い、以下の5行のコマンドで完全に動作させることができます：

git clone https://github.com/openai/openai-imagegen-demo
cd openai-imagegen-demo
cp .env.example .env.local
echo "OPENAI_API_KEY=sk-xxxxx" >> .env.local
npm install && npm run dev

APIYI 経由で実行するための完全な .env.local 設定を確認する

# パターン1：OpenAI 公式 API を使用（海外ネットワーク環境と API クォータが必要）
OPENAI_API_KEY="sk-proj-xxxxx"

# パターン2：APIYI 経由で使用（国内から直接接続可能、VPN不要）
OPENAI_API_KEY="your-apiyi-key"
OPENAI_BASE_URL="https://vip.apiyi.com/v1"

# オプション：組織 ID とプロジェクト ID
OPENAI_ORG_ID=""
OPENAI_PROJECT_ID=""

あとは app/api/photobooth/route.ts 内でハードコードされている endpointBase を、process.env.OPENAI_BASE_URL ?? "https://api.openai.com/v1" を読み込むように変更するだけで、公式と APIYI 経由の接続をシームレスに切り替えられます。

const endpointBase = process.env.OPENAI_BASE_URL ?? "https://api.openai.com/v1";

const response = await fetch(`${endpointBase}/images/edits`, {
  method: "POST",
  headers: {
    "Authorization": `Bearer ${apiKey}`,
    "Content-Type": "application/json",
  },
  body: JSON.stringify(body),
});

接続のアドバイス: 国内の開発者が OpenAI 公式デモをそのまま実行しようとすると、ネットワーク制限、API クォータ、支払い方法といった3つの大きな障壁に直面します。APIYI (apiyi.com) の中継サービスを利用して互換性のあるキーを取得し、OPENAI_BASE_URL を https://vip.apiyi.com/v1 に向けることをお勧めします。これにより、ローカル環境でワンクリックで起動でき、ストリーミングイベントやパラメータも公式と完全に同期させることが可能です。

imagegen-demo 接続スキーム比較

接続スキーム	ネットワーク要件	開通速度	単価	SDK改修量
OpenAI 公式直結	海外ネットワーク必須	カード登録＋審査待ち	トークン課金（約$0.15+/枚）	改修なし
fal 企業API	海外アクセス	企業契約必須	トークン課金	軽微な改修
APIYI 公式中継	国内直結	即時利用可能	透明なトークン課金	base_urlのみ変更
APIYI 公式逆プロキシ	国内直結	即時利用可能	固定 $0.03 / 枚	モデル名のみ変更

スキーム解説

OpenAI 公式直結の分析: 公式チャネルはコンプライアンスとSLAの面で圧倒的な優位性を誇り、imagegen-demoの標準的なターゲット環境です。しかし、国内からの利用にはVPNが必要で、海外発行のクレジットカードやAPI利用枠の審査期間がネックとなります。一方、APIYIの公式中継チャネルは、ネットワークの接続性と開通速度の面で、検証フェーズや国内のプロダクション環境に適しています。

fal 企業APIの分析: falは2026年4月21日に「gpt-image-2」の企業向けエンドポイントをリリースし、高負荷時のSLAで優れたパフォーマンスを発揮します。ただし、企業顧客向けのため、個人開発者にとっては導入ハードルが高いのが現状です。ローカル環境でimagegen-demoを動かしたい開発者には、APIYIの方がより軽量で扱いやすい選択肢です。

APIYI 公式中継 vs 逆プロキシの違い: 公式中継は、APIYIがリクエストをOpenAI公式APIへ転送する仕組みで、課金体系、SLA、機能は公式と完全に同一であり、商用利用に適しています。逆プロキシは、ChatGPTのWeb版をリバースエンジニアリングして実現しており、価格が1枚あたり$0.03と固定で安価なため、プロトタイプ検証に適しています。どちらのチャネルもAPIYIプラットフォーム上で並行して提供されており、開発者はニーズに合わせて切り替え可能です。

比較に関する注記: 上記のデータは、OpenAIの公式価格、falの企業向けリリース、および docs.apiyi.com の技術ドキュメントを総合したものです。APIYI (apiyi.com) にて実測・検証が可能です。

gpt-image-2 の主要パラメータ詳細（imagegen-demo ソースコードより）

imagegen-demo の lib/constants.ts に基づき、公式が推奨する gpt-image-2 のデフォルトパラメータ構成を以下にまとめました。

パラメータ	Demo デフォルト値	説明	調整のヒント
model	`gpt-image-2`	最新の画像モデル	変更不要
size	`1024x1536`	2:3 縦長比率	横長画像なら `1536x1024` へ
quality	`high`	最高画質	コスト削減なら `medium`/`low`
output_format	`png`	透明背景対応	Web用途なら `webp` で軽量化
stream	`true`	SSE ストリーミング有効化	リアルタイムアプリでは必須
partial_images	`2`	中間フレームを2回送信	最大3。待ち時間と帯域幅のトレードオフ

プロンプトエンジニアリングのベストプラクティス

Demo 内の OPENAI_IMAGE_OUTPUT_REQUIREMENTS 定数は、非常に参考になるプロンプトテンプレートです：

"portrait orientation (2:3 aspect ratio), preserve the exact people, poses, facial expressions, and scene composition as faithfully as possible"

この一文には、gpt-image-2 による画像編集の黄金法則が示されています：

比率の明示：size パラメータを設定していても、プロンプト内で再度比率を指定することで精度が向上します。
忠実度の強調：preserve the exact ... は、人物の一貫性を保つための重要な呪文です。
忠実度の次元を列挙：人物、ポーズ、表情、シーンを個別に指定することで、再現性がより高まります。

よくある質問 (FAQ)

Q1: openai-imagegen-demo とは何ですか？

openai-imagegen-demo は、OpenAI が GitHub で公開している公式の Photobooth デモアプリです。Next.js 15 + TypeScript + gpt-image-2 を使用し、「肖像画のアップロード → スタイルの選択 → マルチスタイル画像のストリーミング生成」という完全なワークフローを実現しています。gpt-image-2 の images/edits エンドポイントを統合するための最も権威あるリファレンスであり、MIT ライセンスで商用利用も可能です。

Q2: imagegen-demo と他の画像生成デモの違いは？

主な違いは2点です。第一に、従来の DALL-E のテキストから画像生成ではなく、gpt-image-2 の新しい /v1/images/edits エンドポイントを使用して画像から画像生成を行うため、人物の一貫性を保持できます。第二に、stream: true + partial_images によるストリーミング機能を有効にしており、30秒間のブラックアウトを待つことなく、画像が徐々にレンダリングされる様子をユーザーに提供できます。コミュニティの他のデモの多くは DALL-E 3 ベースであり、これらの機能は備えていません。

Q3: imagegen-demo はいつリリースされましたか？

このリポジトリは、2026年4月21日に OpenAI が ChatGPT Images 2.0 をリリースした際に同時に公開されました。gpt-image-2 モデルの API および Codex への正式導入に合わせて、開発者の統合ハードルを下げることを目的としており、README も継続的に更新されています。

Q4: imagegen-demo はどのようなアプリケーションに適していますか？

主に以下の4つのシナリオに適しています：

ソーシャルアプリでの着せ替え / スタイル変換: 自撮り写真をアップロードして、国風、油絵、サイバーパンク風に変換
ECサイトの製品写真の統一: 製品写真をブランドの統一されたビジュアルスタイルに一括変換
会議 / イベントの AI フォトブース: オフラインイベントでのインタラクティブな撮影装置
教育用デモ / ハッカソンプロトタイプ: gpt-image-2 の新機能を迅速にデモンストレーション

Q5: API を通じて imagegen-demo を素早く実行するには？

APIYI の中継サービスを利用した迅速な再現を推奨します：

APIYI (apiyi.com) にアクセスし、アカウント作成後に APIキーを発行します。
リポジトリをクローン：git clone https://github.com/openai/openai-imagegen-demo
.env.local に OPENAI_API_KEY と OPENAI_BASE_URL=https://vip.apiyi.com/v1 を記述します。
route.ts を修正し、endpointBase が process.env.OPENAI_BASE_URL を読み込むようにします。
npm install && npm run dev を実行すれば、localhost:3000 で動作を確認できます。

APIYI は gpt-image-2、Nano Banana Pro、Flux など、主要な画像モデルの統合接続をサポートしており、ローカルでの比較や切り替えが容易です。

Q6: imagegen-demo の partial_images パラメータはどのように動作しますか？

partial_images は、最終的な画像が返される前に、サーバーが何回中間フレームをプッシュするかを指定します。Demo のデフォルト値は 2 であり、1回の生成が「初期スケッチ → 二次最適化 → 最終成果物」という3つの段階を経ることを意味します。各中間フレームは SSE イベント image_edit.partial_image を通じてプッシュされ、フロントエンドがリアルタイムでレンダリングすることで、30秒もの長い待ち時間のブラックアウト体験を回避します。このパラメータは最大 3 までサポートされていますが、中間フレームが多いほど帯域幅の消費が増加します。

Q7: 国内の開発者が imagegen-demo を簡単に実行するには？

国内から直接公式デモを実行する場合、OpenAI API へのアクセス制限、海外クレジットカードの登録、API クォータの審査期間といった3つの障壁があります。APIYI の中継サービスを利用すれば、これらを一挙に解決できます：

apiyi.com でアカウントを作成（Alipay / WeChat Pay 対応）。
OpenAI プロトコル互換の APIキーを取得。
.env.local で OPENAI_BASE_URL=https://vip.apiyi.com/v1 を設定。
route.ts でその環境変数を読み込むようにすれば、他のコード変更は不要です。

プロセス全体で約5分、VPN 不要で、料金体系も OpenAI 公式と透明に同期されています。

Q8: imagegen-demo にはどのような制限がありますか？

現在の制限事項について客観的に説明します：

単一画像の生成時間: 高品質モード（quality: high）で1枚あたり約20〜30秒かかります。バッチ処理には並列化の最適化が必要です。
人物の一貫性は100%ではない: 複雑なポーズや複数人のシーンでは、わずかな変形が生じることがあります。
コストの考慮: OpenAI 公式はトークン課金であり、高品質1枚あたり約 $0.15 からです。バッチ処理では medium 品質への変更や、APIYI などのコスト効率の良い中継サービスの利用を推奨します。
スタイルプリセットの制限: デモには約10種類のスタイルしか組み込まれておらず、lib/styles.ts を自分で拡張する必要があります。
モバイル端末のカメラ互換性: iOS Safari では、初回アクセス時にカメラ権限の手動許可が必要になる場合があります。

openai-imagegen-demo の核心ポイント

OpenAI 公式オープンソース: gpt-image-2 のリリースに合わせて公開された公式デモ。MIT ライセンスで商用利用も可能。
画像から画像生成（Image-to-Image）に特化: /v1/images/edits エンドポイントを使用し、顔の一貫性を維持するエンジニアリング手法を提示。
ストリーミングレンダリングの技術: stream: true と partial_images: 2 を組み合わせることで、待ち時間を「真っ暗な画面」から「段階的なレンダリング」へと進化。
Next.js 15 フルスタック: App Router と SSE（Server-Sent Events）を組み合わせたアーキテクチャは、画像生成アプリにおける現代のベストプラクティス。
国内（中国）からの接続: APIYI (apiyi.com) の公式中継サービスを利用すれば、base_url を書き換えるだけで直接接続が可能。
プロンプトの黄金法則: preserve the exact ...（正確に保持する…）というフレーズは、忠実度を保つための重要な「呪文」であり、自身のプロジェクトにも取り入れる価値あり。
公式中継 vs 公式逆プロキシの二段構え: 商用利用なら公式中継（OpenAI との整合性重視）、検証用なら公式逆プロキシ（1枚あたり0.03ドル固定）がおすすめ。

まとめ

openai-imagegen-demo は、gpt-image-2 の新しい能力を理解するための最適な入り口です。その核心的な価値は以下の3点に集約されます。

信頼できるリファレンス: 公式が自ら作成した統合パターンであり、パラメータ、プロンプト、ストリーミングアーキテクチャを網羅的に学べます。
プロダクションレベルのコード: Next.js 15 + SSE + マルチスタイル並列処理を採用しており、そのまま自身のプロジェクトに再利用可能です。
国内での再現性: APIYI の公式中継サービスを利用することで、国内の開発者でも5分で公式デモを動かすことができます。

もし gpt-image-2 のストリーミング画像編集能力をすぐに試してみたい場合は、APIYI (apiyi.com) から互換性のあるAPIキーを取得し、openai-imagegen-demo をクローンして OPENAI_BASE_URL を https://vip.apiyi.com/v1 に設定してください。これだけで、OpenAI 公式のデモ効果をローカル環境で再現できます。

📚 参考資料

OpenAI imagegen-demo 公式リポジトリ: ソースコード、README、インストールガイド
- リンク: github.com/openai/openai-imagegen-demo
- 説明: ソースコードとインストール手順が網羅された、gpt-image-2 統合の出発点となる公式リソースです。
OpenAI 公式 gpt-image-2 API ドキュメント: モデルパラメータ、エンドポイント、料金体系
- リンク: developers.openai.com/api/docs/models/gpt-image-2
- 説明: サポートされているすべてのパラメータ、価格、レート制限を確認できます。
OpenAI ChatGPT Images 2.0 リリースノート: 新モデルの機能紹介
- リンク: openai.com/index/introducing-chatgpt-images-2-0/
- 説明: gpt-image-2 の設計思想、コア機能、およびユースケースについて解説されています。
APIYI gpt-image-2 公式変換チャネルドキュメント: 国内からの直接接続ガイド
- リンク: docs.apiyi.com/en/api-capabilities/gpt-image-2-all/overview
- 説明: 互換性のある APIキー、base_url の設定方法、および価格の詳細を確認できます。

著者: APIYI 技術チーム
技術交流: コメント欄にて、あなたの imagegen-demo 実践事例をぜひシェアしてください。その他のドキュメントは APIYI ドキュメントセンター（docs.apiyi.com）をご覧ください。

OpenAIのimagegen-demoオープンソースを徹底解説：GPT-image-2 API中継サービスに4ステップで接続する方法

openai-imagegen-demo 核心要点

imagegen-demo 项目定位详解

imagegen-demo プロジェクト構成の解説

主要なソースコードの分析

ストリーミングイベントの解析

imagegen-demo のクイックスタート

最短の再現手順

imagegen-demo 接続スキーム比較

スキーム解説

gpt-image-2 の主要パラメータ詳細（imagegen-demo ソースコードより）

プロンプトエンジニアリングのベストプラクティス

よくある質問 (FAQ)

openai-imagegen-demo の核心ポイント

まとめ

関連資料・おすすめ記事

📚 参考資料

Gemini 3 Pro 画像 API どこが最もお得か？三大プロバイダーの価格・速度を徹底比較

Google Gemini AI Studio APIがまたダウン：Nano Banana Proおよび2の全線障害への対応策

MiniMax-M2.5 対 GLM-5 それぞれの強み：コーディング vs 推論 2大新モデルを6つの視点から徹底解説

Lovart AI 無制限プランの「言葉遊び」を徹底解説 – Nano Banana Pro クレジット制限の解析と3つの代替案

AIでフローチャートを生成する2ステップ法：まず大規模言語モデルで考えを整理し、次に画像モデルで図を作成する

Claude Opus 4.6 Agent Teams 5つの核心的メリット：初心者必読のマルチエージェント協調ガイド

openai-imagegen-demo 核心要点

imagegen-demo 项目定位详解

imagegen-demo プロジェクト構成の解説

主要なソースコードの分析

ストリーミングイベントの解析

imagegen-demo のクイックスタート

最短の再現手順

imagegen-demo 接続スキーム比較

スキーム解説

gpt-image-2 の主要パラメータ詳細（imagegen-demo ソースコードより）

プロンプトエンジニアリングのベストプラクティス

よくある質問 (FAQ)

openai-imagegen-demo の核心ポイント

まとめ

関連資料・おすすめ記事

📚 参考資料

類似投稿