OpenAI 開源 imagegen-demo 深度解讀：4 步接入官轉 gpt-image-2 API

作者注：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 核心要點

imagegen-demo 項目定位詳解

openai-imagegen-demo 本質是一個交互式照相館（Photobooth）：用戶上傳或拍攝一張自拍，選擇最多 4 種預設風格（如針織風、數字藝術、油畫等），應用併發調用 gpt-image-2 的 images/edits 端點，在流式中逐步返回每種風格的成品。

與市面上常見的"文生圖 Demo"不同，這份官方倉庫聚焦在兩個新能力上：圖生圖（image editing） 和 流式漸進輸出（partial_images）。前者解決了"保持人物一致性"這一工程難題，後者讓等待體驗從 30 秒黑屏變成逐幀漸現。

imagegen-demo 項目架構解讀

關鍵源碼剖析

項目核心只有一個 API Route：app/api/photobooth/route.ts，它負責把前端的肖像圖片和風格 prompt 打包後，用流式模式請求 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，
}；

三個細節值得關注：

1. stream: true + partial_images: 2 是 gpt-image-2 獨有的流式能力，服務端會推送 2 次中間幀再交付最終圖
2. images 參數 接收單張或多張參考圖的 data URL，支持多圖融合編輯
3. OPENAI_IMAGE_OUTPUT_REQUIREMENTS 強制要求"肖像 2:3 比例、保持人物姿態與表情"，這是寫好圖像編輯 prompt 的黃金範式

流式事件解析

Route 通過 SSE（Server-Sent Events）監聽官方響應，處理以下三類事件：

• image_edit.partial_image：中間幀，向前端推送 style-partial
• image_edit.completed：最終成品，向前端推送 style-final
• error：拋出異常，前端統一捕獲

前端在 React 側用自定義 hook 維護一個 writeQueue Promise 鏈，確保多風格併發時事件順序不錯亂，這也是該 Demo 最具工程參考價值的部分。

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

# 方案一：使用 OpenAI 官方 API（需境外網絡 + API 配額）
OPENAI_API_KEY="sk-proj-xxxxx"

# 方案二：使用 apiyi 官轉通道（國內直連、免翻牆）
OPENAI_API_KEY="your-apiyi-key"
OPENAI_BASE_URL="https://vip.apiyi.com/v1"

# 可選：組織與項目 ID
OPENAI_ORG_ID=""
OPENAI_PROJECT_ID=""

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 官方 Demo 會遇到三大障礙（網絡、API 配額、支付方式）。推薦通過 API易 apiyi.com 官轉通道獲取兼容 Key，把 OPENAI_BASE_URL 指向 https://vip.apiyi.com/v1 即可在本地一鍵啓動，流式事件和參數完全對齊官方。

imagegen-demo 接入方案對比

方案解讀

OpenAI 官方直連分析: 官方通道在合規性和 SLA 上保持絕對領先，是 imagegen-demo 的默認目標環境。但國內運行需翻牆、需要國際信用卡、API 額度審覈週期長。相比之下，apiyi 官轉通道在網絡可達性和開通速度上更適合驗證期和國內生產環境。

fal 企業 API 分析: fal 在 2026 年 4 月 21 日同步發佈了 gpt-image-2 的企業端點，在高併發 SLA 上表現出色。但面向企業客戶，獨立開發者接入門檻高。對於想在本地跑通 imagegen-demo 的開發者，apiyi 更輕量。

apiyi 官轉 vs 官逆差異: 官轉意味着 apiyi 透傳你的請求到 OpenAI 官方 API，計費、SLA、功能與官方完全一致，適合商用場景；官逆則是通過逆向 ChatGPT 網頁端實現，價格固定 $0.03/張更便宜，適合原型驗證。兩種通道在 apiyi 平臺並行提供，開發者可按需切換。

對比說明: 上述數據綜合自 OpenAI 官方定價、fal 企業發佈稿以及 docs.apiyi.com 技術文檔，可通過 API易 apiyi.com 實測驗證。

gpt-image-2 關鍵參數詳解（來自 imagegen-demo 源碼）

基於 imagegen-demo 的 lib/constants.ts，以下是官方推薦的 gpt-image-2 默認參數組合：

Prompt 工程最佳實踐

Demo 的 OPENAI_IMAGE_OUTPUT_REQUIREMENTS 常量是一段極具參考價值的 prompt 模板：

"portrait orientation （2:3 aspect ratio）， preserve the exact people， poses， facial expressions， and scene composition as faithfully as possible"

這段話揭示了 gpt-image-2 圖像編輯的黃金範式：

• 顯式指定比例：即使設置了 size 參數，prompt 裏仍要重申比例，提高命中率
• 強調保真要求：preserve the exact ... 是保持人物一致性的關鍵咒語
• 列舉保真維度：人物、姿態、表情、場景分別點名，越具體還原度越高

常見問題 FAQ

openai-imagegen-demo 核心要點 Key Takeaways

• OpenAI 官方開源: 配合 gpt-image-2 發佈的權威 Demo，MIT 協議可商用
• 聚焦圖生圖能力: 使用 /v1/images/edits 端點，保持人物一致性的工程範式
• 流式渲染黑科技: stream: true + partial_images: 2 把等待從黑屏變爲漸進渲染
• Next.js 15 全棧: App Router + SSE 架構是圖像生成應用的現代最佳實踐
• 國內接入捷徑: 通過 API易 apiyi.com 官轉通道，修改一個 base_url 即可直連
• Prompt 黃金範式: preserve the exact ... 是保真度關鍵咒語，值得抄進自己項目
• 官轉 vs 官逆雙通道: 商用選官轉（與 OpenAI 對齊），驗證選官逆（固定 $0.03/張）

總結

openai-imagegen-demo 是理解 gpt-image-2 新能力的最佳入口，核心價值有三：

1. 權威參考: 官方親手寫的集成範式，參數、prompt、流式架構一次看齊
2. 生產級代碼: Next.js 15 + SSE + 多風格併發，可直接複用到自己項目
3. 國內可復現: 通過 apiyi 官轉通道，國內開發者 5 分鐘跑通官方 Demo

如果你想立即嘗試 gpt-image-2 的流式圖像編輯能力，推薦直接通過 API易 apiyi.com 獲取兼容 Key，克隆 openai-imagegen-demo 並把 OPENAI_BASE_URL 指向 https://vip.apiyi.com/v1，即可在本地還原 OpenAI 官方演示效果。

延伸閱讀 Related Articles

如果你對 gpt-image-2 和 openai-imagegen-demo 感興趣，推薦繼續閱讀：

• 📘 gpt-image-2 Reverse API 哪裏有？3 分鐘接入 apiyi 官逆通道 – 瞭解官逆通道 $0.03/張的低成本方案
• 📊 gpt-image-2 vs Nano Banana Pro 圖像模型橫評 – 對比主流圖像模型的能力差異
• 🚀 gpt-image-2 應用場景 6 大行業落地指南 – 探索電商、教育、社媒等真實使用案例

📚 參考資料

1. OpenAI imagegen-demo 官方倉庫: 完整源碼、README 與安裝文檔

   • 鏈接: github.com/openai/openai-imagegen-demo
   • 說明: 第一手源碼與安裝指南，瞭解 gpt-image-2 集成範式的權威起點

2. OpenAI 官方 gpt-image-2 API 文檔: 模型參數、端點、計費說明

   • 鏈接: developers.openai.com/api/docs/models/gpt-image-2
   • 說明: 查閱所有支持的參數、價格、限流規則

3. OpenAI ChatGPT Images 2.0 發佈頁: 新模型能力介紹

   • 鏈接: openai.com/index/introducing-chatgpt-images-2-0/
   • 說明: 瞭解 gpt-image-2 的設計思路、核心能力和使用場景

4. apiyi gpt-image-2 官轉通道文檔: 國內直連接入指南

   • 鏈接: docs.apiyi.com/en/api-capabilities/gpt-image-2-all/overview
   • 說明: 獲取兼容 Key、base_url 配置和價格詳情

作者: APIYI 技術團隊
技術交流: 歡迎在評論區分享你的 imagegen-demo 實戰案例，更多文檔可訪問 API易 docs.apiyi.com 文檔中心