我用 ChatGPT 起手、脚本改造，给孩子做了一个绘本

儿子刚满两岁，最喜欢的就是挖掘机、推土机、吊车这些工程车。

每天早上，他都会兴奋地指着马路边的施工现场喊："爸爸！挖掘机！！"

看着他一边跳一边模仿机械臂挥舞的样子，我心都要化了。

作为一名前端程序员，我开始思考：
有没有一种办法，可以给他源源不断地"生成"工程车绘本呢？

灵感：用 AI + 前端技术做一本绘本

目标是构建一个「可以无限生成内容」的电子绘本：

输入关键词（如"excavator"）即可拉取图文内容
使用 AI 生成生动的中文配文
手机 / 平板上滑动查看
全前端实现，离线可读

项目结构：4个各段构建「可生长绘本」

第一步：用 ChatGPT 获取关键词

我先和 ChatGPT 互动，列出了一些工程车相关的关键词，示例：

json 复制代码

["Excavator", "Crane", "Bulldozer", "Dump Truck", "Steamroller"]

这些关键词会作为后续图像抓取的入口。

第二步：AI生成Python代码 + Selenium 抓取图片与标签

使用 Python + Selenium 模拟真实浏览器访问 Pixabay，抓取关键词对应的图片与标签信息。页面是 Ajax 加载+懒加载，需要模拟滚动行为来触发加载。

基础代码是ChatGPT生成的，当然代码存在一些问题，自己在理解的基础上通过对话的方式让copilot补充和完善，真正自己写的代码寥寥无几。

代码做几件事：

通过 webdriver 打开chrome 浏览器并访问制定的网页
持续滚动到网页底部，等待图片数据异步加载完毕
抓取图片+信息
待所有数据抓取完毕，生成一份 json文件到本地

完整脚本如下（含注释）：

python 复制代码

from selenium import webdriver
from selenium.webdriver.common.by import By
from selenium.webdriver.chrome.options import Options
import time, json

print("脚本启动...")

def setup_browser(headless=True):
    # 设置 Chrome 浏览器选项
    options = Options()
    if headless:
        options.add_argument("--headless")  # 无界面模式
        options.add_argument("--disable-gpu")
    options.add_argument("--log-level=3")  # 忽略日志
    options.add_argument("--window-size=1920,1080")
    driver = webdriver.Chrome(options=options)
    return driver

def crawl_pixabay_images(keyword, max_images=30):
    driver = setup_browser(headless=False)

    # 构建目标链接
    url = f"https://pixabay.com/images/search/{keyword}/"
    driver.get(url)
    print(f"正在访问: {url}")

    # 等待初始页面加载
    time.sleep(5)

    # 滚动加载页面更多图片
    SCROLL_PAUSE_TIME = 3
    windowHeight = driver.execute_script("return document.documentElement.clientHeight")
    scrollHeight = driver.execute_script("return document.documentElement.scrollHeight")
    scrollUnit = int(windowHeight / 3)

    while windowHeight + driver.execute_script("return document.documentElement.scrollTop") < scrollHeight:
        print("等待滚动...")
        time.sleep(SCROLL_PAUSE_TIME)
        driver.execute_script("window.scrollBy(0, arguments[0])", scrollUnit)
        print("滚动了一次!")
        scrollHeight = driver.execute_script("return document.documentElement.scrollHeight")

    # 定位所有图片容器
    image_containers = driver.find_elements(By.CSS_SELECTOR, "div.cell--UMz-x div.container--MwyXl")

    images_data = set()

    for container in image_containers:
        try:
            # 抓取图片与标签
            img = container.find_element(By.CSS_SELECTOR, "a.link--WHWzm img")
            tag_elements = container.find_elements(By.CSS_SELECTOR, "div.tags--lDvZS a")
            img_src = img.get_attribute("src")
            tags_text = [tag.get_attribute("textContent") for tag in tag_elements]

            print(f"抓到标签: {tags_text}")
            print(f"抓到图片: {img_src}")

            if img_src and img_src.startswith("https://cdn.pixabay.com"):
                images_data.add((tuple(tags_text), img_src))

            if len(images_data) >= max_images:
                break
        except Exception as e:
            print("抓取失败:", e)
            continue

    driver.quit()
    return list(images_data)

if __name__ == "__main__":
    keywords = ["Excavator", "Crane"]  # 可扩展
    all_results = []

    for keyword in keywords:
        results = crawl_pixabay_images(keyword)
        print(f"共抓取 {len(results)} 张图片，关键词：{keyword}")
        all_results.append({
            "keyword": keyword,
            "results": [
                {
                    "tags": list(tags),
                    "img_src": src
                } for tags, src in results
            ]
        })

    # 保存为 JSON 文件
    with open("craw_results.json", "w", encoding="utf-8") as f:
        json.dump(all_results, f, ensure_ascii=False, indent=2)
    print("已写入 craw_results.json 文件")

第三步：结合提示词，引导 ChatGPT 生成中文配文（半自动）

这一步是「生成内容」的关键。

我不是给 ChatGPT 一张图一张图地描述，而是直接把上述代码生成的结构化JSON 贴进去 + 加提示词，引导它按结构返回结果。

示例输入结构：

json 复制代码

{
  "keyword": "excavator",
  "results": [
    {
      "tags": ["Excavator", "Building"],
      "img_src": "https://cdn.pixabay.com/..."
    }
  ]
}

提示词模板：

我在开发一本儿童绘本，供 2～4 岁小孩阅读。

你将接收一组图片的分类和标签信息，帮我为每张图生成生动有趣的中文配文。

要求如下：

避免具体描述图片细节

配文需适合小朋友理解

输出格式为带 description 字段的原始 JSON 结构

实践经验提示：

一次性喂太多 JSON 容易：

超出 token 限制导致中断
漏生成部分条目
输出结构错乱

所以我建议你：先提取所有关键词 + 标签组，让 ChatGPT 只根据这些标签生成中文配文句子，然后再将这些配文跟图片信息对应起来。

第四步：用 swiper.js 做成绘本页

将添加好配文的最终JSON 文件嵌入 HTML，使用 swiper.js 实现滑动式阅读体验，打开 html 就能看。

效果展示

只需在终端运行脚本：python3 crawl.py 便会运行并打开 chrome 浏览器，滚动、并抓取图片，最终输出一份 json 文件。

实现了脚本 ✔ 结构自动拉图

✔ 配文借助 GPT 半自动生成

✔ 本地浏览，无需部署

✔ 响应式适配移动端

体验地址：jebben.cn/site/childr...

结尾

整个项目从开始做到完成花费了小半天，让我不得不感叹AI协助的力量，如果没有 ChatGPT等 AI 工具，莫说半天，一天可能也无法完成，光查询资料处理异常问题或者未知的知识点就够我忙一壶的了。

这个项目不算复杂，但很有意义。它让我意识到：

技术也可以被拿来做很温柔的事。

这是我送给儿子的一个小礼物，同时也送给了我自己一个很小但真实的成就感。

下一步我可能会考虑，加入语音朗读（Web Speech API）功能，点击按钮读一下。

如果大家需要源码，我可以上传到github贴到评论里。