#debugging #image-generation #browser-automation #prompt

GPT Image Generator

Generate images using ChatGPT's GPT-Image-2 model via browser automation (CDP). Shares the user's daily Brave Browser (port 9222) via the brave-browser-agent skill. Navigate to chatgpt.com, input a prompt, trigger generation, and extract the result. Use when: (1) User asks to generate/create/draw an image or picture using GPT/ChatGPT (2) User mentions "GPT生成图片", "ChatGPT画图", "gpt-image" (3) Need high-quality AI image generation via ChatGPT (4) User wants photorealistic images, complex scenes, or text-in-image generation (5) Fallback/complement to Gemini image generation Requires: Brave Browser running with --remote-debugging-port=9222, ChatGPT logged in, Python 3, websockets pip package.

mayf3@mayf3

Install

openclaw skills install @mayf3/gpt-image-gen

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

bash

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 代替）：

python

# 通过 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 标签：

bash

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

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

Step 3: Wait for Page Load

bash

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

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

Step 4: Input Prompt

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

bash

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

bash

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 秒。用截图轮询：

bash

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

检查是否还在生成中：

bash

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 < 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 问题）：

bash

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

Step 8: Send to User

bash

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

Prompt Tips

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

示例

text

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

特性	GPT-Image-2	Gemini Imagen
文字渲染	⭐⭐⭐⭐⭐ 极强	⭐⭐⭐ 一般
写实感	⭐⭐⭐⭐⭐ 照片级	⭐⭐⭐⭐ 很好
艺术风格	⭐⭐⭐⭐ 广泛	⭐⭐⭐⭐ 广泛
速度	15-40s	10-30s
免费	✅ 免费/Plus	✅ 免费
提示词理解	⭐⭐⭐⭐⭐ 极强	⭐⭐⭐⭐ 好

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 或稍后再试。

GPT Image Generator

Install

GPT Image Generation (ChatGPT GPT-Image-2)

Prerequisites

Shared Scripts

Workflow

Step 1: Check Browser Status

Step 2: Open ChatGPT

Step 3: Wait for Page Load

Step 4: Input Prompt

Step 5: Click Send

Step 6: Wait for Generation

Step 7: Extract Image

Step 8: Send to User

Prompt Tips

推荐提示词结构

示例

GPT-Image-2 特色能力

风格关键词

Comparison: GPT-Image-2 vs Gemini Imagen

Troubleshooting

Related skills