Web AI 生图

当用户需要通过 Gemini、ChatGPT 等网页端 AI 服务生成图片时，使用这个 skill。

能力说明

这个 skill 通过浏览器自动化打开真实的 Gemini / ChatGPT 网页，复用浏览器 profile 中的登录态，提交生图提示词，等待图片生成，并把图片保存到本地目录。

适合以下场景：

• 不直接调用 Gemini / OpenAI 图片 API，而是复用网页端账号能力。
• 自动生成 AI 封面图、营销图、短视频封面或其他提示词图片。
• 需要复用网页登录状态，减少重复登录。
• 需要处理 blob: 图片、Google 托管图片或 ChatGPT estuary/content 图片下载。

文件结构

web-ai-image-generation/
├── SKILL.md
├── DEPENDENCIES.md
├── requirements.txt
└── scripts/
    └── ai_image_playwright.py

说明：

• scripts/ai_image_playwright.py：命令行脚本，包含 Gemini / ChatGPT 生图、等待、下载逻辑。
• requirements.txt：Python 包依赖。
• DEPENDENCIES.md：Python、Playwright、浏览器和系统环境安装说明。

默认目录

默认输出到当前 skill 目录下的运行时目录。默认 profile 和输出目录为：

skills/web-ai-image-generation/.runtime/profile
skills/web-ai-image-generation/.runtime/output

重要说明

浏览器通过 Playwright 的 launch_persistent_context() 启动 persistent context，并复用指定用户数据目录中的登录态。

首次使用全新 profile 时，需要在弹出的浏览器里手动登录 Gemini 和/或 ChatGPT。后续运行会自动复用该 profile 中保存的登录状态。

安装依赖

详见 DEPENDENCIES.md。

快速安装：

python -m pip install -r requirements.txt
python -m playwright install chromium

命令行用法

Gemini 生图

python scripts/ai_image_playwright.py \
  --platform gemini \
  --prompt "一张竖屏 3:4 的短视频封面，主题是 AI 自动剪辑" \
  --output-dir ./output

ChatGPT 生图

python scripts/ai_image_playwright.py \
  --platform chatgpt \
  --prompt "一张电影海报风格的 AI 短视频封面" \
  --output-dir ./output

使用内置封面提示词构造

如果不传 --prompt，可以传 --title 和 --description，脚本会自动构造短视频封面提示词：

python scripts/ai_image_playwright.py \
  --platform gemini \
  --title "AI 自动剪辑教程" \
  --description "如何用 AI 自动生成短视频" \
  --output-dir ./output

指定独立登录态目录

python scripts/ai_image_playwright.py \
  --platform chatgpt \
  --prompt "一张科技感产品海报" \
  --profile-dir ~/.ai-image-playwright/chatgpt-profile \
  --output-dir ./output

工作流概览

1. 启动浏览器

• 使用 playwright.async_api.async_playwright()。
• 通过 launch_persistent_context() 启动 Chromium persistent context。
• 当前实现使用 headless=False，需要桌面环境。
• 默认优先尝试 /usr/bin/google-chrome，不存在则回退到 Playwright Chromium。
• 启动后根据平台打开 Gemini 或 ChatGPT。
• 如果跳转到登录页，会等待用户在浏览器中手动登录。

2. Gemini 生图流程

• 打开 https://gemini.google.com/app。
• 尝试点击生图入口，支持 制作图片、生成图片、Create image、Generate image 等文本。
• 将提示词输入到 Gemini 的富文本输入框。
• 点击发送按钮或按 Enter。
• 轮询页面中的大尺寸图片，判断图片是否生成完成。
• 下载图片时优先处理：
  • blob: 图片：通过页面内 Canvas 提取。
  • googleusercontent.com / gstatic.com 图片：通过 Playwright request 下载。

3. ChatGPT 生图流程

• 打开 https://chatgpt.com/。
• 尝试点击生图入口，支持 生成图片、Create image、Generate image 等文本。
• 将提示词输入到 ChatGPT composer。
• 点击发送按钮或按 Enter。
• 轮询页面中的图片候选，识别生成图。
• ChatGPT 生成图常见特征：
  • URL 包含 chatgpt.com/backend-api/estuary/content。
  • alt 包含 已生成图片。
  • CSS class 包含特定图片布局特征。
  • ChatGPT 域名下的大尺寸图片。
• 下载 estuary/content 图片时使用 page.request.get()，这样可以携带当前 Playwright context 的登录 cookie。
• 如果 HTTP 下载失败，则尝试 Canvas 提取。

提示词规则

脚本支持两种提示词来源。

1. 直接传入完整提示词

如果传入 --prompt，脚本会原样发送该提示词，不做改写：

python scripts/ai_image_playwright.py \
  --platform gemini \
  --prompt "生成一张 3:4 竖屏封面，主题是 AI 自动剪辑，科技感，标题清晰"

2. 使用标题和描述自动构造封面提示词

如果不传 --prompt，脚本会使用 --title 和 --description 调用内置 build_prompt() 构造提示词。

当前模板含义是：

• 要求生成短视频竖屏封面图。
• 比例为 3:4。
• 主题来自 --title。
• 如果有 --description，会补充视频内容说明。
• 要求标题文字必须清晰醒目，并包含原始标题。
• 要求适合手机信息流。
• 要求构图自然、有设计感、高清高质量。
• 明确禁止生成 APP 界面、手机边框、点赞评论按钮、状态栏或导航栏。

模板生成的提示词大致如下：

请为短视频生成一张竖屏封面图片（3:4比例），主题是：{title}。{desc_part}

要求：标题文字必须清晰醒目并包含：'{title}'；画面适合手机信息流；构图自然、有设计感、高清高质量；不要包含 APP 界面、手机边框、点赞评论按钮、状态栏或导航栏。

图片下载与保存

默认输出目录在当前 skill 文件夹下：

skills/web-ai-image-generation/.runtime/output

也可以通过 --output-dir 指定其他目录。

保存流程：

1. 生图完成后，脚本扫描页面中的所有 img。
2. 根据平台筛选生成图片候选：
   • Gemini：优先选择尺寸大于约 400x400 的大图。
   • ChatGPT：优先识别 chatgpt.com/backend-api/estuary/content、已生成图片、大尺寸 ChatGPT 图片等候选。
3. 最多取最新 4 张候选图。
4. 按平台和序号保存为 JPEG 文件。

文件名示例：

• gemini_image_1.jpg
• gemini_image_2.jpg
• chatgpt_image_1.jpg
• chatgpt_image_2.jpg

下载策略：

• ChatGPT 的 chatgpt.com/backend-api/estuary/content 图片使用 page.request.get() 下载，可以携带当前登录 cookie。
• Gemini 的 googleusercontent.com / gstatic.com 图片也使用 page.request.get() 下载。
• 如果图片是 blob:，或 HTTP 下载失败，会尝试在页面内用 Canvas drawImage() 提取，再通过 toDataURL('image/jpeg', 0.95) 转为 JPEG base64，最后在 Python 端解码写入文件。
• 文件小于约 10KB 会被认为无效并删除。

脚本运行成功后会在标准输出打印保存的图片路径。

调用建议

如果要在其他流程里调用这个 skill：

1. 传入平台、提示词、输出目录、profile 目录。
2. 由外部流程决定如何使用生成后的图片。
3. 不要把 API Key 或账号凭据写入脚本。
4. 对 platform 做严格校验，只允许 gemini 和 chatgpt。

常见问题

找不到“制作图片”或“生成图片”

可能原因：

• 网页语言与选择器不匹配。
• Gemini / ChatGPT UI 更新。
• 当前账号没有生图入口。

处理建议：

• 增加更多语言的选择器。
• 截图确认页面状态。
• 检查账号是否具备生图能力。

页面生成了图片但下载失败

可能原因：

• 图片跨域导致 Canvas 读取失败。
• 图片 URL 需要登录 cookie。
• 图片 URL 规则发生变化。

处理建议：

• ChatGPT 图片优先使用 page.request.get()。
• Gemini 增加更多图片域名白名单。
• 必要时使用页面截图作为兜底方案。

一直等待直到超时

可能原因：

• 没有成功切换到生图模式。
• 提示词触发安全策略。
• 页面出现错误提示，但代码没有识别。

处理建议：

• 检查页面错误文案。
• 增加对“生成失败”“无法生成”等状态的检测。
• 调整等待策略，不只依赖图片数量稳定。

后续优化建议

• 增加截图和 HTML dump，便于排查 UI 变化。
• 把等待逻辑改成“生成中状态消失 + 图片出现”。
• 对无桌面服务器支持 xvfb 或验证 headless 模式。
• 将平台识别、图片识别、下载逻辑拆成更小的可测试函数。