# 🚀 AI 金句工坊 — 创客课件

从零到 AI 全栈应用，**4 节小课**循序渐进，每节课都有看得见的成果。

## 🗺️ 课程地图

```
第1课 ──→ 第2课 ──→ 第3课 ──→ 第4课
  │          │          │          │
  ▼          ▼          ▼          ▼
纯前端     调用公网   自己的      AI 加持
交互卡片   API 拿数据  API 后端   前后端打通
```

## 📖 课程一览

| 课次 | 课题 | 学了什么 | 每节课成果 |
|------|------|----------|-----------|
| 🃏 第1课 | **金句卡片** | HTML/CSS 美化 + JS 数组/事件/DOM | 点击按钮换金句的静态页面 |
| ☁️ 第2课 | **云上金句** | API 概念 + fetch() + async/await + JSON | 从公网 API 获取实时金句 |
| 🐍 第3课 | **自己的 API** | Python Flask + 路由 + JSON + 参数 | 自己写的后端 API 服务 |
| 🤖 第4课 | **AI 升级** | 前后端联调 + 接入 AI API + 自由创作 | 完整的 AI 金句工坊 |

## 📁 项目结构

```
ai-quote-workshop/
├── lessons/
│   ├── lesson-01-card/      # 第1课：纯前端金句卡片
│   │   ├── index.html       #   → 单文件，直接浏览器打开
│   │   └── README.md        #   → 教案
│   ├── lesson-02-api-call/  # 第2课：调用公网 API
│   │   ├── index.html       #   → 单文件，直接浏览器打开
│   │   └── README.md        #   → 教案
│   ├── lesson-03-backend/   # 第3课：搭建 Flask 后端
│   │   ├── app.py           #   → 后端代码
│   │   ├── test.html        #   → 测试前端
│   │   └── README.md        #   → 教案
│   └── lesson-04-final/     # 第4课：AI 金句工坊最终版
│       ├── app.py           #   → 后端（含 AI 调用）
│       ├── index.html       #   → 前端
│       └── README.md        #   → 教案
├── presentation.html        # 📺 完整版 PPT（10 页）
├── requirements.txt         # 📦 Python 依赖
└── .env.example             # 🔑 API 配置模板
```

## 🧱 每节课知识点依赖

```
第1课：HTML + CSS 基础
        │
        ├── JS 数组 / DOM 操作 / 事件绑定
        │
第2课：需要 JS 基础
        │
        ├── fetch() / async/await / JSON
        │
第3课：需要 Python 基础
        │
        ├── Flask / 路由 / 参数
        │
第4课：会调用自己的 API + 配置环境
        │
        ├── 调用 AI API / 全栈联调
```

## 🕐 每节课结构（2 小时）

| 时间 | 环节 |
|------|------|
| 0-20min | 📺 导入 & 概念讲解 |
| 20-50min | 🧠 新知识教学 |
| 50-80min | 💻 动手实践 |
| 80-100min | 🎨 自由改造 |
| 100-120min | 🎤 展示 & 总结 |

## 🚀 进阶路线图

学完 4 节课后可以继续：

1. **换 AI 模型** — 用 Anthropic Claude 或 OpenAI GPT
2. **加数据库** — 把生成的金句存起来
3. **部署上线** — 部署到云服务器让大家都能用
4. **接硬件** — ESP32 连 WiFi 调用 API，OLED 屏显示金句
5. **多模态** — 图片生成 / 语音朗读 / 视频

## 🛠️ 快速启动

```bash
# 1. 安装依赖
pip install -r requirements.txt

# 2. 进入第3课（自己的后端）
cd lessons/lesson-03-backend
python app.py

# 3. 浏览器打开 http://localhost:5000
```