一位前端程序员利用AI技术，为热爱工程车的两岁儿子量身打造了一本可无限生成的电子绘本。项目结合ChatGPT获取工程车关键词，通过Python和Selenium抓取Pixabay上的图片及标签，再利用ChatGPT生成生动有趣的中文配文。最终，通过Swiper.js实现手机和平板上的滑动阅读体验，全程纯前端实现，支持离线阅读。该项目仅用半天时间完成，充分展现了AI在创意和育儿领域的强大助力，也体现了技术带来的温柔与成就感。

🚜 **AI驱动的工程车绘本创作：** 作者利用AI技术，为满足儿子对挖掘机、推土机等工程车的喜爱，开发了一个能够无限生成内容的电子绘本。该绘本能够根据输入的工程车关键词，自动抓取相关图片和标签，并生成适合儿童阅读的中文配文。

💻 **技术栈与实现流程：** 项目主要技术包括ChatGPT用于关键词提取和配文生成，Python配合Selenium进行网页爬取（Pixabay），以及Swiper.js实现前端的滑动阅读效果。整个流程实现了从关键词输入到最终可离线阅读的电子绘本的自动化生成。

💡 **AI在育儿与创意中的应用：** 作者通过这个项目，深刻体会到AI工具（如ChatGPT）在加速开发流程和激发创意方面的巨大潜力。他认为技术不仅可以用于解决复杂问题，也可以创造出充满温情和个人意义的作品，如送给儿子的这份特别的礼物。

🚀 **项目成果与未来展望：** 该项目仅用半天时间便得以完成，展示了AI协作的高效性。作者还计划为绘本添加语音朗读功能，并考虑将源码分享至GitHub，进一步推广这种将技术与关爱相结合的创意实践。

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

每天早上，他都会兴奋地指着马路边的施工现场喊：“爸爸！挖掘机！！”
看着他一边跳一边模仿机械臂挥舞的样子，我心都要化了。

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

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

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

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

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

第一步：用 ChatGPT 获取关键词

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

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

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

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

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

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

代码做几件事：

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

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

from selenium import webdriverfrom selenium.webdriver.common.by import Byfrom selenium.webdriver.chrome.options import Optionsimport time, jsonprint("脚本启动...")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 driverdef 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 贴进去 + 加提示词，引导它按结构返回结果。

示例输入结构：

{  "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贴到评论里。