GPT Image Generation (ChatGPT GPT-Image-2)

Generate images via ChatGPT's GPT-Image-2 model by automating the shared Brave Browser through CDP.

本技能共享用户日常 Brave 浏览器（端口 9222），与 brave-browser-agent 使用同一个浏览器实例。 绝不启动/重启/关闭浏览器，只 attach。

Prerequisites

• Brave Browser running on port 9222 (shared with brave-browser-agent)
• ChatGPT account logged in at chatgpt.com (free or Plus)
• Python 3 + websockets pip package

Shared Scripts

复用 brave-browser-agent 的 CDP 脚本（端口 9222）：

• CDP 操作: brave-browser-agent/scripts/cdp_exec.py
• 浏览器状态检查: brave-browser-agent/scripts/check_brave.py

本技能自带 ChatGPT 专用脚本：

• 图片提取: {{SKILL_DIR}}/scripts/extract_image.py

Workflow

Step 1: Check Browser Status

python3 brave-browser-agent/scripts/check_brave.py

如果 9222 无响应，告诉用户：

"Brave Browser 未启动远程调试，请关闭所有 Brave 窗口后用以下命令重新打开： /Applications/Brave\ Browser.app/Contents/MacOS/Brave\ Browser --remote-debugging-port=9222"

Step 2: Open ChatGPT

使用 CDP WebSocket 在浏览器中新建标签页（/json/new 可能返回 405，用 Target.createTarget 代替）：

# 通过 CDP 创建新标签页
import json, urllib.request, asyncio, websockets

info = json.loads(urllib.request.urlopen("http://localhost:9222/json/version").read())
ws_url = info.get("webSocketDebuggerUrl")

async def create_tab():
    async with websockets.connect(ws_url, max_size=50*1024*1024) as ws:
        await ws.send(json.dumps({"id": 1, "method": "Target.createTarget", "params": {"url": "https://chatgpt.com/"}}))
        resp = json.loads(await asyncio.wait_for(ws.recv(), timeout=10))
        return resp["result"]["targetId"]

tab_id = asyncio.run(create_tab())

或者复用已有的 ChatGPT 标签：

python3 brave-browser-agent/scripts/cdp_exec.py list
# 找到 chatgpt.com 的 tab，记下 TAB_ID

保存为 CHATGPT_TAB 供后续步骤使用。

Step 3: Wait for Page Load

sleep 3
python3 brave-browser-agent/scripts/cdp_exec.py screenshot $CHATGPT_TAB /tmp/chatgpt-state.png

确认页面加载完成（看到输入框）。

Step 4: Input Prompt

ChatGPT 使用 \x3Cdiv id="prompt-textarea" contenteditable="true"> 作为输入框。

python3 brave-browser-agent/scripts/cdp_exec.py eval $CHATGPT_TAB '
(function() {
    var el = document.querySelector("#prompt-textarea");
    if (!el) return "NO_EDITOR";
    el.focus();
    el.textContent = "YOUR_PROMPT_HERE";
    el.dispatchEvent(new InputEvent("input", {bubbles: true, inputType: "insertText", data: "YOUR_PROMPT_HERE"}));
    return "TEXT_SET";
})()
'

提示词增强：根据用户需求，添加风格、质量、构图等关键词。参考 Prompt Tips。

Step 5: Click Send

python3 brave-browser-agent/scripts/cdp_exec.py eval $CHATGPT_TAB '
(function() {
    var btn = document.querySelector("button[data-testid=\"send-button\"]");
    if (btn) { btn.click(); return "CLICKED_SEND"; }
    return "NO_SEND_BTN";
})()
'

Step 6: Wait for Generation

GPT-Image-2 生成通常需要 15-40 秒。用截图轮询：

# 等待 20 秒
sleep 20
python3 brave-browser-agent/scripts/cdp_exec.py screenshot $CHATGPT_TAB /tmp/chatgpt-result.png

检查是否还在生成中：

python3 brave-browser-agent/scripts/cdp_exec.py eval $CHATGPT_TAB '
(function() {
    var imgs = document.querySelectorAll("img");
    var count = 0;
    for (var i = 0; i \x3C imgs.length; i++) {
        var w = imgs[i].naturalWidth || imgs[i].width || 0;
        if (w >= 200) count++;
    }
    return count;
})()
'

• 如果 count >= 1 → 图片已生成，继续提取
• 如果 count == 0 → 还在生成，再等 10-15 秒

Step 7: Extract Image

使用专用提取脚本（fetch + blob 方式，无 CORS 问题）：

mkdir -p /tmp/openclaw
python3 {{SKILL_DIR}}/scripts/extract_image.py $CHATGPT_TAB /tmp/openclaw/gpt-output.png

Step 8: Send to User

openclaw message send \
  --channel feishu \
  --target \x3Cchat_id> \
  --media /tmp/openclaw/gpt-output.png \
  --message "🎨 Generated by ChatGPT GPT-Image-2"

Prompt Tips

GPT-Image-2 对自然语言描述理解极强，支持：

推荐提示词结构

[Subject] + [Scene/Environment] + [Style] + [Lighting] + [Quality]

示例

a golden retriever puppy sitting in a field of sunflowers,
photorealistic, warm golden hour lighting, shallow depth of field, 8k, masterpiece

GPT-Image-2 特色能力

• 🎯 文字渲染：可以在图片中生成准确的文字（比其他模型强很多）
• 🎯 写实风格：照片级真实感极佳
• 🎯 复杂场景：理解复杂的构图和多元素场景
• 🎯 风格控制：支持各种艺术风格

风格关键词

• 摄影: "photorealistic, cinematic, shot on 35mm, depth of field"
• 插画: "digital illustration, concept art, vibrant"
• 3D: "3D render, octane render, Pixar style"
• 动漫: "anime style, studio ghibli, makoto shinkai"
• 油画: "oil painting, impressionist, textured"

Comparison: GPT-Image-2 vs Gemini Imagen

Troubleshooting

• No image / text-only response: ChatGPT 可能没理解你要生成图片。确保提示词包含 "generate/create/draw an image" 等明确指令。
• "NO_EDITOR": 页面未加载完。等待几秒后重试，或检查 ChatGPT 是否需要登录。
• "NO_SEND_BTN": 输入框可能为空（React 未检测到内容变化）。尝试用 textContent + InputEvent 方式。
• CDP errors / 9222 not responding: 浏览器未运行。让用户重启 Brave with --remote-debugging-port=9222。绝不绝不自动启动或关闭浏览器。
• Image too small / CORS error: 使用 fetch + blob 方式而非 canvas。extract_image.py 已自动处理。
• Rate limit: ChatGPT 免费用户有生成次数限制。建议用户升级 Plus 或稍后再试。