AI编程启蒙课

主题

第 6 课 / 共 12 课

第6课：给作品加上AI超能力 ​

🤖 今天你要体验一下AI的魔法——做一个会"编故事"的程序！

⏱️ 预计用时：50 分钟

学习目标 ​

学完这节课，你将会：

  • 理解什么是 API，程序之间是怎么"对话"的
  • 了解 AI 是怎么工作的（数据 + 模式，不是魔法）
  • 用 Claude Code 做出一个创意故事生成器
  • 体验让程序变得"聪明"的感觉

概念时间：什么是API？ ​

API = 点外卖 ​

你点过外卖吗？点外卖的过程是这样的：

  1. 📱 你在手机上下单（告诉餐厅你要什么）
  2. 🏪 餐厅收到订单（处理你的请求）
  3. 🍜 餐厅做好菜（处理完毕）
  4. 🛵 外卖小哥送到你手上（返回结果）

API（Application Programming Interface，应用程序编程接口）就是这个过程在计算机世界里的版本：

  1. 📤 你的程序发送请求（"嘿，我要一个关于太空的故事"）
  2. 🖥️ 对方的服务器收到请求（"好的，让我处理一下"）
  3. ⚙️ 服务器处理数据（生成故事内容）
  4. 📥 服务器返回结果（"从前，在遥远的银河系..."）

就这么简单！API就是两个程序之间"对话"的方式。

小贴士

你每天都在用API哦！当你用微信发消息、刷抖音视频、查天气预报的时候，你的手机APP都在通过API和服务器"对话"。只不过这些对话都在后台悄悄发生，你看不到而已。

现实中的API例子 ​

你的操作发出的"请求"收到的"回复"
查天气"北京今天天气怎么样？""晴，25°C，微风"
翻译单词"apple是什么意思？""苹果"
搜图片"搜索可爱的猫咪"一堆猫咪图片
问AI"写一个故事开头""在一个月黑风高的夜晚..."
想了解更多？

API Key 是什么？

很多API需要一把"钥匙"才能用，这就是 API Key（API密钥）。就像外卖APP要注册登录才能下单一样，API Key告诉服务器"我是谁"以及"我有权限用这个服务"。

比如要使用 Claude 的 AI API，就需要去 Anthropic 的网站注册一个API Key。不过今天我们会用一种不需要API Key的方式来做项目，一样很好玩！

如果你以后想玩真正的AI API，可以让爸爸妈妈帮你注册一个。

概念时间：AI是怎么工作的？ ​

在做项目之前，我们来聊聊AI到底是怎么回事。

AI不是魔法，是"模式大师" ​

AI看起来很"聪明"，但它其实是这样工作的：

  1. 读了超级多的文字：AI在训练的时候，读了互联网上的海量文字——书籍、文章、网页、对话...
  2. 学会了模式：从这些文字里，AI学会了"什么词经常出现在什么词后面"这种模式
  3. 根据模式生成新内容：当你给AI一个开头，它就根据学到的模式，预测接下来最可能出现什么词

比如你说"从前有一个..."，AI知道后面可能是"小女孩"、"国王"、"魔法师"这样的词，因为在它读过的故事里，这些词经常出现在"从前有一个"后面。

我们今天的做法 ​

真正的AI API需要API Key和网络请求，设置起来比较复杂。所以今天我们来做一个**"聪明的故事生成器"**——它用预设的故事片段和随机组合来生成故事，效果也很神奇！

这其实也是AI工作原理的一个缩影：从已有的素材中，根据规则和一定的随机性，组合出新的内容。

注意

今天做的故事生成器用的是"预设素材+随机组合"的方式，不是真正的AI。但它能帮你理解AI的基本思路。真正的AI只是"素材"更多（几十亿条文字）、"规则"更复杂（神经网络）而已，核心思想是一样的！

动手时间：做一个创意故事生成器！ ​

项目介绍 ​

我们要做的故事生成器是这样的：

  • 用户输入一个故事开头（或者选择一个主题）
  • 程序根据主题、角色、场景、情节等素材库，随机组合生成一段故事
  • 每次生成的故事都不一样
  • 可以选择不同类型的故事（奇幻、科幻、搞笑等）

第一步：基础版故事生成器 ​

魔法咒语

帮我做一个创意故事生成器网页：
1. 页面上有一个输入框，让用户输入主角的名字
2. 有几个按钮让用户选择故事类型：奇幻冒险、太空探索、校园趣事、动物王国
3. 点击"生成故事"按钮后，根据用户输入的名字和选择的类型，随机组合生成一个3-5段的短故事
4. 故事素材要丰富，包含：
   - 多种开头模板
   - 多种场景描述
   - 多种情节转折
   - 多种结局
5. 每次生成的故事都不一样（随机组合）
6. 故事要用中文，内容要有趣，适合青少年阅读
7. 用一个HTML文件实现

请把文件保存为 story-generator.html

试试看！输入你的名字，选一个故事类型，点生成——每次都是不同的故事！

第二步：让故事更"聪明" ​

魔法咒语

改进故事生成器，让它生成的故事更连贯、更有趣：
1. 加入更多的故事素材（至少每种类型有10种不同的场景、15种情节、8种结局）
2. 故事段落之间要有逻辑连接（不是完全随机拼接，而是有因果关系）
3. 让用户还可以选择：
   - 故事情绪：紧张刺激 / 温馨感人 / 轻松搞笑
   - 故事长度：短篇（3段）/ 中篇（5段）/ 长篇（8段）
4. 加入一些随机的"意外转折"，让故事更有惊喜
5. 在故事中适当加入对话，让角色"说话"

第三步：加上好看的界面和阅读体验 ​

魔法咒语

美化故事生成器的界面和阅读体验：
1. 设计成一本打开的"故事书"的样子
2. 故事文字用衬线字体，像真正的书一样
3. 每段故事之间有漂亮的分隔符
4. 故事生成时有一个"书写"动画（文字逐渐显示，像有人在打字一样）
5. 根据故事类型改变页面主题色：
   - 奇幻冒险：紫金色
   - 太空探索：深蓝星空色
   - 校园趣事：清新绿色
   - 动物王国：温暖橙色
6. 加一个"保存故事"按钮，可以复制故事文本
7. 加一个"再来一个"按钮，快速重新生成
8. 页面顶部有好看的标题和装饰

第四步：加上"故事接龙"功能 ​

这个功能特别有趣——你可以一段一段地续写故事！

魔法咒语

给故事生成器加上"故事接龙"模式：
1. 加一个新的模式切换：一键生成 / 故事接龙
2. 在故事接龙模式中：
   - 先生成故事的第一段
   - 然后给出2-3个选项，让用户选择"接下来会发生什么"
   - 根据用户的选择，生成下一段故事
   - 每一段结尾都给新的选项，让用户继续选
   - 直到故事自然结束（大约5-8个选择后）
3. 显示已经生成的完整故事
4. 选项用好看的按钮呈现
5. 每次选择后，新的段落有渐入动画

小贴士

故事接龙模式就像那种"选择你的冒险"互动小说！这种模式下，每个人走出来的故事线都不一样，超级有趣。你可以邀请朋友一起来玩，看看不同选择会导向什么样的结局。

关于"真正的"AI API ​

我们今天用预设素材做的故事生成器已经很好玩了。但如果你想体验真正的AI生成故事的威力，可以了解一下 AI API 的基本概念。

AI API 的工作方式 ​

你的网页  →  发送请求（"根据这个开头写故事..."）  →  AI服务器
你的网页  ←  接收回复（AI生成的故事内容）          ←  AI服务器

使用AI API需要什么？ ​

  1. API Key（一把专属钥匙）
  2. 网络连接（要能访问AI服务器）
  3. 一些代码（告诉程序怎么发送请求和接收回复）
想了解更多？

如果你有 Claude API Key，可以试试这个

如果爸爸妈妈帮你申请了 Claude 的 API Key，你可以让 Claude Code 帮你做一个真正调用AI的版本：

帮我做一个使用 Claude API 的故事生成器：
1. 需要用户输入 API Key（保存在浏览器本地，不会泄露）
2. 用户输入故事开头或主题
3. 调用 Claude API 生成故事续写
4. 显示AI生成的故事内容
5. 加上加载状态（显示"AI正在创作中..."）

注意：API Key 只保存在本地 localStorage 中，不要发送到除 Claude API 以外的任何地方

不过这个是进阶内容，如果现在不做也完全没关系！我们的预设素材版故事生成器一样很棒。

AI思维：从"模式"到"创造" ​

今天我们做的故事生成器，其实暗含了AI的核心思想：

我们的故事生成器是怎么"创造"故事的？ ​

  1. 有一个素材库（各种场景、情节、对话）
  2. 有一套规则（什么素材可以接什么素材）
  3. 加上随机性（每次选择不同的组合）
  4. 结果就是：每次都能"创造"出新的故事

真正的AI是怎么"创造"内容的？ ​

  1. 有一个超大的"素材库"（几十亿条训练数据）
  2. 有一套超复杂的"规则"（神经网络中数十亿个参数）
  3. 加上一些随机性（生成时的温度参数）
  4. 结果就是：能生成几乎无限的新内容

看到了吗？本质上是同样的思路，只是规模不同！

小贴士

理解了"AI = 素材 + 规则 + 随机性"这个基本概念，你就不会觉得AI是什么神秘的黑魔法了。它很厉害，但它不是魔法——它是人类用数学和计算机科学创造出来的工具。

小测验 ​

来检验一下这节课学到了多少吧！

1. API 的作用是什么？

2. AI 为什么能「创造」新的故事？

3. 我们做的故事生成器用了什么原理？

4. API Key 是什么？

今日挑战 ​

挑战：让故事生成器能生成不同风格的故事

魔法咒语

给故事生成器加上更多故事风格：
1. 恐怖故事：
   - 加入神秘、悬疑的氛围描写
   - 场景是老房子、深夜、迷雾森林等
   - 但不要太恐怖，结局要温暖或搞笑的反转（毕竟要适合青少年！）
   - 页面用深色主题
2. 搞笑故事：
   - 充满夸张、出人意料的情节
   - 角色会做很蠢但很好笑的事情
   - 加入一些谐音梗或文字游戏
   - 页面用明亮活泼的颜色
3. 科幻故事：
   - 场景在未来世界、外太空、平行宇宙
   - 有酷炫的科技元素
   - 探讨一些有趣的"如果...会怎样"的问题
   - 页面用科技感设计（深色背景+荧光色）

为每种风格准备足够多的素材，让生成的故事丰富多彩。

你也可以自己发挥，加上你喜欢的其他故事风格——比如武侠、侦探推理、穿越等等！

还有一个进阶挑战：

挑战B：做一个诗歌生成器

魔法咒语

做一个中文诗歌生成器，和故事生成器放在一起（可以加一个标签页切换）：
1. 用户选择诗歌类型：写景、抒情、咏物
2. 用户输入一个主题词（比如"月亮"、"春天"、"思念"）
3. 程序从预设的诗句素材库中，根据主题和类型，组合生成一首四行或八行的小诗
4. 每首诗都要有标题
5. 诗歌显示区域用特别优雅的设计（竖排文字或中国风设计）
6. 可以生成藏头诗（每行第一个字组成一个词语）

本课小结 ​

今天你了解了好多酷炫的概念：

  • API就像点外卖：发请求、收回复，程序之间就是这样"对话"的
  • AI的工作原理：素材 + 规则 + 随机性 = 看起来很"聪明"的输出
  • AI不是魔法，是人类用数学和数据创造的强大工具
  • 你做出了一个能"创作"故事的故事生成器！

你现在已经掌握了很多技能了——做工具（番茄钟）、做游戏（翻牌游戏）、做AI应用（故事生成器）。下一课是最后一课，我们要把所有作品整理成一个作品集，展示给别人看！

参考示例

想看看完成后的效果？下载示例代码：点击下载

用浏览器打开就能看到效果。记住，这只是参考——你自己的作品可以完全不一样！

留言讨论