diff --git a/00-frontmatter/目录.md b/00-frontmatter/目录.md
index e92dc6e..989371e 100644
--- a/00-frontmatter/目录.md
+++ b/00-frontmatter/目录.md
@@ -57,7 +57,9 @@
 - 附录1：计算机基础与编程环境
 - 附录2：Vibe Coding与工具链
 - 附录3：学术论文撰写工作流
-- 附录4：在线学习资源
-- 附录5：其他资源
-- 附录6：参考文献
-- 附录7：关键术语表
+- 附录4：网络、网站与在线可视化
+- 附录5：在线学习资源
+- 附录6：其他资源
+- 附录7：参考文献
+- 附录8：关键术语表
+
diff --git a/appendix/附录1-基础知识与编程环境.md b/appendix/附录1-基础知识与编程环境.md
index 1169f6a..437ad75 100644
--- a/appendix/附录1-基础知识与编程环境.md
+++ b/appendix/附录1-基础知识与编程环境.md
@@ -1,6 +1,6 @@
 # 附录1：计算机基础与编程环境
 
-本附录介绍计算机的基本构成、操作系统常见操作，以及Python编程环境的配置与核心工具库。
+本附录介绍计算机的基本构成、操作系统常见操作、程序设计语言的概念、Python编程语言的系统学习指南，以及机器学习与深度学习的实践入门。
 
 ## 1 计算机的基本构成与操作系统常见操作
 
@@ -67,13 +67,80 @@ apt install xxx    # Ubuntu/Debian
 | AutoDL | 按时计费 | 中期项目 |
 | 阿里云PAI | 国内稳定 | 生产部署 |
 
-## 2 程序设计语言及其编译运行
+## 2 程序设计语言与软件开发
 
-### 2.1 Python概述
+### 2.1 什么是程序设计语言
 
-Python是AI领域的主流编程语言，语法简洁、生态丰富，适合快速原型开发和数据处理。
+计算机只能执行由0和1组成的**机器码**（machine code），但人类直接阅读和编写机器码极其困难。程序设计语言就是人与计算机之间的桥梁——用人类可读的语法表达逻辑，再通过特定工具转换为机器可执行的指令。
 
-### 2.2 Python环境配置
+从底层到高层的演进：
+
+| 层级 | 语言示例 | 特点 |
+|------|---------|------|
+| 机器码 | 二进制 `01101000` | 计算机直接执行，人类不可读 |
+| 汇编语言 | `MOV AX, 1` | 与机器码一一对应，可读性低 |
+| 低级语言 | C | 接近硬件，性能高，需要手动管理内存 |
+| 高级语言 | Python, Java, JavaScript | 接近自然语言，开发效率高 |
+
+### 2.2 编译型与解释型语言
+
+高级语言需要转换为机器码才能运行，根据转换方式的不同，分为两大类：
+
+**编译型语言（Compiled）**：程序编写完成后，通过编译器一次性将全部代码翻译成机器码，生成可执行文件。
+
+```
+源代码 → 编译器 → 可执行文件 → 运行
+```
+
+- **C/C++**：系统级开发、高性能计算、游戏引擎
+- **Go**：云服务、容器工具（Docker 即用 Go 编写）
+- **Rust**：系统编程，兼顾性能与安全
+
+特点：运行速度快，但每次修改代码都需要重新编译。
+
+**解释型语言（Interpreted）**：程序运行时，由解释器逐行读取代码并即时执行，不需要预先编译。
+
+```
+源代码 → 解释器逐行执行
+```
+
+- **Python**：AI/数据科学的首选语言
+- **JavaScript**：网页交互、前端开发
+- **Ruby**：Web开发（Ruby on Rails）
+
+特点：开发灵活、调试方便，但运行速度通常慢于编译型语言。
+
+**混合模式**：Java 采用"编译为字节码 → 虚拟机解释执行"的混合方式，兼顾了跨平台和性能。
+
+### 2.3 常见编程语言概览
+
+| 语言 | 类型 | 主要用途 | 与AI/设计的关系 |
+|------|------|---------|---------------|
+| Python | 解释型 | AI、数据科学、自动化 | 本书主要编程语言 |
+| C/C++ | 编译型 | 操作系统、嵌入式、高性能计算 | 深度学习框架的底层实现 |
+| Java | 混合型 | 企业应用、Android开发 | 大数据处理（Hadoop/Spark） |
+| JavaScript | 解释型 | 网页前端、Node.js后端 | Web可视化、交互设计 |
+| Shell/Bash | 解释型 | 命令行脚本、系统管理 | 自动化任务、环境管理 |
+| SQL | 声明式 | 数据库查询 | 数据管理与提取 |
+
+**命令行界面（CLI）**：CLI（Command Line Interface）是通过文本命令与计算机交互的方式。终端中输入的每一条命令（如 `ls`、`git commit`）本质上都是调用某个程序。掌握 CLI 是进行AI开发的基础技能，许多工具（如 conda、pip、git）主要通过命令行操作。
+
+### 2.4 软件开发基本概念
+
+| 概念 | 英文 | 说明 |
+|------|------|------|
+| 集成开发环境 | IDE | 集成代码编辑、调试、运行的开发工具（如 VS Code、PyCharm） |
+| 编译器 | Compiler | 将源代码翻译为机器码的程序 |
+| 解释器 | Interpreter | 逐行读取并执行源代码的程序 |
+| 调试器 | Debugger | 帮助定位和修复代码错误的工具 |
+| 包管理器 | Package Manager | 管理第三方库的安装和更新（如 pip、conda、npm） |
+| API | Application Programming Interface | 程序之间交互的接口（如调用AI模型的API） |
+| 开源 | Open Source | 源代码公开，可自由使用和修改 |
+| 版本控制 | Version Control | 管理代码的修改历史（如 Git） |
+
+### 2.5 Python环境配置
+
+Python是本书使用的核心编程语言，以下介绍环境搭建方法。
 
 #### Anaconda vs Miniconda
 
@@ -98,7 +165,297 @@ conda install numpy pandas scipy
 pip install torch torchvision
 ```
 
-### 2.3 核心科学计算库
+## 3 Python编程语言
+
+### 3.1 Python概述与特点
+
+Python由Guido van Rossum于1991年发布，以"优雅""简洁""可读性强"为设计哲学。它是当前AI和数据科学领域使用最广泛的编程语言。
+
+**核心特点**：
+- 语法简洁，接近自然语言，入门门槛低
+- 丰富的第三方库生态（AI、数据处理、Web等）
+- 跨平台运行（Windows、macOS、Linux）
+- 活跃的开源社区支持
+
+### 3.2 基础语法
+
+#### 变量与数据类型
+
+```python
+# 变量赋值（无需声明类型）
+name = "设计人工智能"       # 字符串 str
+version = 1.0               # 浮点数 float
+chapter_count = 26           # 整数 int
+is_published = True          # 布尔值 bool
+
+# 查看类型
+print(type(name))            # <class 'str'>
+```
+
+#### 字符串操作
+
+```python
+title = "设计人工智能"
+
+# 字符串拼接
+full_title = title + "：基础与应用"
+
+# 格式化输出
+print(f"本书名为《{full_title}》，共{chapter_count}章")
+
+# 常用方法
+print(title.lower())          # 设小写
+print(title.replace("人工智能", "AI"))  # 替换
+print(len(title))             # 长度
+```
+
+#### 注释
+
+```python
+# 这是单行注释
+
+"""
+这是多行注释（文档字符串）
+常用于函数和类的说明
+"""
+
+# 好的注释解释"为什么"，而不是"做什么"
+```
+
+### 3.3 数据结构
+
+#### 列表（List）
+
+有序、可变的序列，最常用的数据结构。
+
+```python
+# 创建列表
+models = ["CNN", "RNN", "Transformer", "Diffusion"]
+
+# 访问元素（索引从0开始）
+print(models[0])              # CNN
+print(models[-1])             # Diffusion（倒数第一个）
+
+# 修改
+models.append("GAN")          # 添加元素
+models.remove("RNN")          # 删除元素
+models.sort()                 # 排序
+
+# 切片
+print(models[1:3])            # 第2到第3个元素
+```
+
+#### 字典（Dictionary）
+
+键值对结构，用于存储映射关系。
+
+```python
+# 创建字典
+model_info = {
+    "name": "ResNet",
+    "year": 2015,
+    "layers": 152,
+    "task": "图像分类"
+}
+
+# 访问
+print(model_info["name"])     # ResNet
+
+# 添加/修改
+model_info["accuracy"] = 0.96
+
+# 遍历
+for key, value in model_info.items():
+    print(f"{key}: {value}")
+```
+
+#### 元组（Tuple）
+
+有序、不可变的序列，适合存储不变的数据。
+
+```python
+# 创建元组
+rgb = (255, 128, 0)
+
+# 解包
+r, g, b = rgb
+```
+
+#### 集合（Set）
+
+无序、不重复的元素集合。
+
+```python
+tools_a = {"Photoshop", "Figma", "Sketch"}
+tools_b = {"Figma", "Blender", "Rhino"}
+
+# 集合运算
+print(tools_a & tools_b)      # 交集: {"Figma"}
+print(tools_a | tools_b)      # 并集
+```
+
+### 3.4 控制流
+
+#### 条件判断
+
+```python
+loss = 0.05
+
+if loss < 0.01:
+    print("模型收敛良好")
+elif loss < 0.1:
+    print("模型基本收敛")
+else:
+    print("模型需要继续训练")
+```
+
+#### 循环
+
+```python
+# for 循环
+epochs = [1, 2, 3, 4, 5]
+for epoch in epochs:
+    print(f"训练第 {epoch} 轮")
+
+# range 生成序列
+for i in range(10):
+    print(f"第{i}次迭代")
+
+# while 循环
+loss = 1.0
+while loss > 0.01:
+    loss = loss * 0.9    # 模拟训练过程
+```
+
+#### 列表推导式
+
+简洁地创建新列表：
+
+```python
+# 传统写法
+squares = []
+for x in range(10):
+    squares.append(x ** 2)
+
+# 列表推导式（推荐）
+squares = [x ** 2 for x in range(10)]
+
+# 带条件过滤
+even_squares = [x ** 2 for x in range(10) if x % 2 == 0]
+```
+
+### 3.5 函数与模块
+
+#### 定义函数
+
+```python
+def calculate_accuracy(correct, total):
+    """计算准确率"""
+    return correct / total
+
+# 调用函数
+acc = calculate_accuracy(95, 100)
+print(f"准确率: {acc:.2%}")
+```
+
+#### 默认参数与关键字参数
+
+```python
+def train_model(epochs, lr=0.001, optimizer="Adam"):
+    print(f"训练 {epochs} 轮, 学习率={lr}, 优化器={optimizer}")
+
+# 多种调用方式
+train_model(100)
+train_model(100, lr=0.01)
+train_model(100, optimizer="SGD", lr=0.1)
+```
+
+#### 导入模块
+
+```python
+# 导入标准库
+import os
+import json
+
+# 导入第三方库
+import numpy as np
+import pandas as pd
+
+# 从模块中导入特定功能
+from pathlib import Path
+from collections import Counter
+
+# 安装第三方库（在终端中执行）
+# pip install numpy pandas matplotlib
+```
+
+### 3.6 文件读写
+
+```python
+# 读取文件
+with open("data.txt", "r", encoding="utf-8") as f:
+    content = f.read()
+
+# 逐行读取
+with open("data.csv", "r", encoding="utf-8") as f:
+    for line in f:
+        print(line.strip())
+
+# 写入文件
+with open("output.txt", "w", encoding="utf-8") as f:
+    f.write("分析结果\n")
+    f.write(f"准确率: {acc:.4f}\n")
+
+# 读写JSON（AI应用中常用的数据格式）
+import json
+
+data = {"model": "ResNet", "accuracy": 0.96}
+
+# 写入JSON
+with open("result.json", "w") as f:
+    json.dump(data, f, indent=2)
+
+# 读取JSON
+with open("result.json", "r") as f:
+    loaded = json.load(f)
+```
+
+### 3.7 面向对象编程基础
+
+面向对象编程（OOP）是Python的重要范式，许多AI库都基于OOP设计。
+
+```python
+class NeuralNetwork:
+    """简单的神经网络类"""
+
+    def __init__(self, input_size, hidden_size, output_size):
+        """初始化网络结构"""
+        self.input_size = input_size
+        self.hidden_size = hidden_size
+        self.output_size = output_size
+        self.loss_history = []
+
+    def forward(self, x):
+        """前向传播"""
+        # 这里简化为概念演示
+        return f"输出: 输入{x}经过{self.hidden_size}个隐藏层神经元"
+
+    def train(self, data, epochs=10):
+        """训练网络"""
+        for epoch in range(epochs):
+            loss = 1.0 / (epoch + 1)  # 模拟损失下降
+            self.loss_history.append(loss)
+            print(f"Epoch {epoch+1}, Loss: {loss:.4f}")
+
+# 创建实例
+model = NeuralNetwork(input_size=784, hidden_size=128, output_size=10)
+
+# 使用
+output = model.forward([0.5, 0.3, 0.8])
+model.train(data=None, epochs=5)
+```
+
+### 3.8 核心科学计算库
 
 #### NumPy：数值计算基础
 
@@ -114,6 +471,11 @@ h = np.dot(x, W)            # 矩阵乘法
 
 # 激活函数
 relu = np.maximum(0, h)     # ReLU
+
+# 统计运算
+print(np.mean(x))            # 均值
+print(np.std(x))             # 标准差
+print(np.max(x))             # 最大值
 ```
 
 #### Pandas：数据处理
@@ -124,28 +486,39 @@ import pandas as pd
 # 读取数据
 df = pd.read_csv('data.csv')
 
+# 查看数据
+print(df.head())             # 前几行
+print(df.shape)              # 行数和列数
+print(df.columns)            # 列名
+
 # 数据清洗
-df = df.dropna()
-df_normalized = (df - df.mean()) / df.std()
+df = df.dropna()             # 删除缺失值
 
 # 统计分析
-df.describe()
+print(df.describe())         # 描述性统计
+
+# 筛选数据
+filtered = df[df['accuracy'] > 0.9]
 ```
 
-#### SciPy：科学计算
+#### Matplotlib：数据可视化
 
 ```python
-from scipy import optimize
-from scipy.spatial import distance
+import matplotlib.pyplot as plt
 
-# 优化问题
-result = optimize.minimize(loss_func, x0)
+# 折线图：训练损失曲线
+epochs = [1, 2, 3, 4, 5]
+losses = [0.8, 0.5, 0.3, 0.15, 0.08]
 
-# 距离计算
-dist = distance.euclidean(point1, point2)
+plt.plot(epochs, losses, 'b-o')
+plt.xlabel('Epoch')
+plt.ylabel('Loss')
+plt.title('Training Loss Curve')
+plt.savefig('loss_curve.png', dpi=150)
+plt.show()
 ```
 
-### 2.4 深度学习框架
+### 3.9 深度学习框架
 
 #### PyTorch
 
@@ -165,7 +538,9 @@ pip install tensorflow
 
 **特点**： - 生产部署优化 - Keras高级API - 跨平台支持
 
-### 2.5 AI工具库速查
+### 3.10 AI工具库速查与模型资源
+
+#### 工具库速查
 
 | 类别 | 工具 | 安装命令 | 功能 |
 |------|------|---------|------|
@@ -176,15 +551,13 @@ pip install tensorflow
 | Agent开发 | LangGraph | `pip install langgraph` | 状态机式Agent开发 |
 | 数据检索 | LlamaIndex | `pip install llama-index` | 数据索引与检索（RAG） |
 
-### 2.6 模型资源
+#### 模型资源
 
-#### Hugging Face
+**Hugging Face**：[huggingface.co](https://huggingface.co/)
 
-**网址**：[huggingface.co](https://huggingface.co/)
+功能：模型仓库、数据集、Spaces在线演示
 
-**功能**： - 模型仓库 - 数据集 - Spaces在线演示
-
-#### 常用预训练模型
+**常用预训练模型**：
 
 | 任务 | 推荐模型 | Hugging Face ID |
 |------|---------|----------------|
@@ -192,3 +565,278 @@ pip install tensorflow
 | 目标检测 | YOLOv8 | Ultralytics |
 | 语义分割 | SAM | segment-anything |
 | 大语言模型 | Llama 3 | meta-llama/Meta-Llama-3-8B |
+
+## 4 机器学习与深度学习入门教程
+
+本节通过一个完整的实践流程，带领读者从数据准备到模型训练，体验机器学习和深度学习的核心步骤。
+
+### 4.1 机器学习 vs 深度学习
+
+| 维度 | 机器学习 | 深度学习 |
+|------|---------|---------|
+| 代表算法 | 线性回归、决策树、SVM、随机森林 | CNN、RNN、Transformer |
+| 特征工程 | 需要人工设计和选择特征 | 自动从原始数据中学习特征 |
+| 数据需求 | 中小规模数据即可 | 通常需要大量数据 |
+| 计算资源 | CPU即可 | 通常需要GPU |
+| 适用场景 | 结构化数据分析、基线模型 | 图像、文本、语音等非结构化数据 |
+
+### 4.2 scikit-learn：机器学习实践
+
+scikit-learn是Python最经典的机器学习库，提供了丰富的算法和工具。
+
+#### 安装
+
+```bash
+pip install scikit-learn
+```
+
+#### 完整示例：鸢尾花分类
+
+```python
+import numpy as np
+import matplotlib.pyplot as plt
+from sklearn import datasets
+from sklearn.model_selection import train_test_split
+from sklearn.preprocessing import StandardScaler
+from sklearn.linear_model import LogisticRegression
+from sklearn.tree import DecisionTreeClassifier
+from sklearn.ensemble import RandomForestClassifier
+from sklearn.metrics import accuracy_score, classification_report
+
+# 1. 加载数据
+iris = datasets.load_iris()
+X = iris.data          # 特征：花萼长度、宽度，花瓣长度、宽度
+y = iris.target         # 标签：三种鸢尾花
+print(f"数据集大小: {X.shape}, 类别数: {len(np.unique(y))}")
+
+# 2. 划分训练集和测试集
+X_train, X_test, y_train, y_test = train_test_split(
+    X, y, test_size=0.3, random_state=42
+)
+
+# 3. 数据标准化
+scaler = StandardScaler()
+X_train = scaler.fit_transform(X_train)
+X_test = scaler.transform(X_test)
+
+# 4. 训练多个模型并比较
+models = {
+    "逻辑回归": LogisticRegression(),
+    "决策树": DecisionTreeClassifier(max_depth=3),
+    "随机森林": RandomForestClassifier(n_estimators=100),
+}
+
+for name, model in models.items():
+    model.fit(X_train, y_train)
+    y_pred = model.predict(X_test)
+    acc = accuracy_score(y_test, y_pred)
+    print(f"{name} 准确率: {acc:.2%}")
+
+# 5. 详细评估报告（以随机森林为例）
+best_model = models["随机森林"]
+y_pred = best_model.predict(X_test)
+print("\n分类报告:")
+print(classification_report(y_test, y_pred, target_names=iris.target_names))
+```
+
+#### 机器学习工作流总结
+
+```
+数据收集 → 数据预处理 → 特征工程 → 划分训练/测试集
+    → 选择模型 → 训练 → 评估 → 调优 → 部署
+```
+
+### 4.3 PyTorch：深度学习实践
+
+PyTorch是当前研究和实验中最流行的深度学习框架，以动态计算图和Pythonic API著称。
+
+#### 张量（Tensor）基础
+
+张量是PyTorch的核心数据结构，类似于NumPy数组，但可以在GPU上运算。
+
+```python
+import torch
+
+# 创建张量
+a = torch.tensor([1.0, 2.0, 3.0])
+b = torch.zeros(3, 4)         # 3×4 全零矩阵
+c = torch.randn(3, 4)         # 3×4 随机矩阵
+
+# 张量运算
+x = torch.tensor([1.0, 2.0, 3.0])
+y = torch.tensor([4.0, 5.0, 6.0])
+print(x + y)                    # 加法
+print(torch.dot(x, y))          # 点积
+
+# NumPy互转
+import numpy as np
+arr = np.array([1, 2, 3])
+tensor = torch.from_numpy(arr)  # NumPy → Tensor
+back = tensor.numpy()           # Tensor → NumPy
+```
+
+#### 自动求导（Autograd）
+
+PyTorch的autograd模块可以自动计算梯度，是训练神经网络的核心。
+
+```python
+# 创建需要梯度的张量
+x = torch.tensor([2.0], requires_grad=True)
+
+# 前向计算
+y = x ** 2 + 3 * x + 1    # y = x² + 3x + 1
+
+# 反向传播，自动计算 dy/dx
+y.backward()
+print(f"dy/dx = {x.grad}")    # 应为 2x + 3 = 7（x=2时）
+```
+
+#### 完整示例：手写数字识别
+
+以下是一个完整的神经网络训练流程，使用经典的MNIST数据集。
+
+```python
+import torch
+import torch.nn as nn
+import torch.optim as optim
+from torchvision import datasets, transforms
+
+# 1. 数据准备
+transform = transforms.Compose([
+    transforms.ToTensor(),                              # 转为张量
+    transforms.Normalize((0.1307,), (0.3081,))          # 标准化
+])
+
+train_dataset = datasets.MNIST('./data', train=True, download=True, transform=transform)
+test_dataset = datasets.MNIST('./data', train=False, transform=transform)
+
+train_loader = torch.utils.data.DataLoader(train_dataset, batch_size=64, shuffle=True)
+test_loader = torch.utils.data.DataLoader(test_dataset, batch_size=1000)
+
+# 2. 定义模型
+class Net(nn.Module):
+    def __init__(self):
+        super().__init__()
+        self.fc1 = nn.Linear(28 * 28, 128)     # 输入层 → 隐藏层
+        self.fc2 = nn.Linear(128, 64)            # 隐藏层 → 隐藏层
+        self.fc3 = nn.Linear(64, 10)             # 隐藏层 → 输出层（10个数字）
+
+    def forward(self, x):
+        x = x.view(-1, 28 * 28)                 # 展平图像
+        x = torch.relu(self.fc1(x))              # ReLU激活
+        x = torch.relu(self.fc2(x))
+        x = self.fc3(x)                          # 输出层不加激活
+        return x
+
+model = Net()
+
+# 3. 定义损失函数和优化器
+criterion = nn.CrossEntropyLoss()
+optimizer = optim.Adam(model.parameters(), lr=0.001)
+
+# 4. 训练
+for epoch in range(5):
+    model.train()
+    total_loss = 0
+    for batch_x, batch_y in train_loader:
+        optimizer.zero_grad()                    # 清零梯度
+        output = model(batch_x)                  # 前向传播
+        loss = criterion(output, batch_y)        # 计算损失
+        loss.backward()                          # 反向传播
+        optimizer.step()                         # 更新参数
+        total_loss += loss.item()
+    print(f"Epoch {epoch+1}, Loss: {total_loss/len(train_loader):.4f}")
+
+# 5. 测试
+model.eval()
+correct = 0
+total = 0
+with torch.no_grad():
+    for batch_x, batch_y in test_loader:
+        output = model(batch_x)
+        _, predicted = torch.max(output, 1)
+        total += batch_y.size(0)
+        correct += (predicted == batch_y).sum()
+
+print(f"\n测试准确率: {correct/total:.2%}")
+```
+
+### 4.4 使用预训练模型
+
+在实际应用中，通常不需要从头训练模型，而是使用预训练模型进行微调或直接推理。
+
+#### 使用Hugging Face Transformers
+
+```python
+# 安装: pip install transformers
+
+from transformers import pipeline
+
+# 文本分类（情感分析）
+classifier = pipeline("sentiment-analysis")
+result = classifier("This design is amazing!")
+print(result)
+# [{'label': 'POSITIVE', 'score': 0.9998}]
+
+# 图像分类
+image_classifier = pipeline("image-classification")
+result = image_classifier("building.jpg")
+print(result)
+# [{'score': 0.92, 'label': 'palace'}, ...]
+```
+
+#### 使用Ultralytics YOLO
+
+```python
+# 安装: pip install ultralytics
+
+from ultralytics import YOLO
+
+# 加载预训练模型
+model = YOLO("yolov8n.pt")
+
+# 目标检测
+results = model("street_photo.jpg")
+
+# 查看结果
+for result in results:
+    boxes = result.boxes
+    for box in boxes:
+        cls = int(box.cls[0])
+        conf = float(box.conf[0])
+        label = model.names[cls]
+        print(f"检测到: {label}, 置信度: {conf:.2f}")
+```
+
+### 4.5 GPU加速
+
+深度学习训练在GPU上可以快数十倍。PyTorch的GPU使用非常简洁：
+
+```python
+# 检查GPU是否可用
+device = torch.device("cuda" if torch.cuda.is_available() else "cpu")
+print(f"使用设备: {device}")
+
+# 将模型和数据移动到GPU
+model = Net().to(device)
+
+# 训练时，数据也需要移到GPU
+for batch_x, batch_y in train_loader:
+    batch_x = batch_x.to(device)
+    batch_y = batch_y.to(device)
+    # ... 后续训练代码不变
+```
+
+在没有本地GPU的情况下，可以使用 [Google Colab](https://colab.research.google.com/) 免费使用云端GPU运行上述代码。
+
+### 4.6 学习路径建议
+
+| 阶段 | 内容 | 推荐资源 |
+|------|------|---------|
+| 入门 | Python基础 + NumPy/Pandas | 本附录 §3 |
+| 机器学习 | scikit-learn实践 | [scikit-learn官方教程](https://scikit-learn.org/stable/tutorial/) |
+| 深度学习基础 | PyTorch入门 + MLP | [PyTorch官方教程](https://pytorch.org/tutorials/) |
+| 计算机视觉 | CNN + 图像分类/检测 | 本书第三篇 + CS231n |
+| 自然语言处理 | Transformer + LLM | 本书第四篇 + CS224n |
+| 生成式AI | Diffusion + AIGC工具 | 本书第五篇 |
+| 前沿探索 | Agent + 具身智能 | 本书第六篇 |
diff --git a/appendix/附录4-网络、网站与在线可视化.md b/appendix/附录4-网络、网站与在线可视化.md
new file mode 100644
index 0000000..42920ab
--- /dev/null
+++ b/appendix/附录4-网络、网站与在线可视化.md
@@ -0,0 +1,325 @@
+# 附录5：网络、网站与在线可视化
+
+本附录介绍网络基础知识、网站搭建入门，以及在线数据可视化的工具与方法。
+
+## 1 网络基础知识
+
+### 1.1 互联网与Web
+
+互联网（Internet）是由全球计算机互相连接而成的网络。Web（万维网）是运行在互联网上的信息系统，通过浏览器访问网页来获取信息。
+
+**核心概念**：
+
+| 概念 | 说明 |
+|------|------|
+| URL | 统一资源定位符，即网页地址（如 `https://example.com/page`） |
+| HTTP/HTTPS | 浏览器与服务器之间传输数据的协议，HTTPS 为加密版本 |
+| HTML | 网页的骨架，定义页面结构和内容 |
+| CSS | 网页的样式，控制颜色、字体、布局等外观 |
+| JavaScript | 网页的行为，实现交互功能和动态效果 |
+| API | 应用程序接口，程序之间交换数据的标准方式 |
+
+### 1.2 前端与后端
+
+一个完整的Web应用由前端和后端两部分组成：
+
+```
+用户浏览器（前端） ←→ 服务器（后端） ←→ 数据库
+    HTML/CSS/JS         Python/Node.js      MySQL/PostgreSQL
+```
+
+**前端**：用户在浏览器中看到和操作的界面，使用 HTML、CSS、JavaScript 构建。
+
+**后端**：运行在服务器上的程序，处理数据逻辑、存储和检索，可以用 Python（Flask/Django/FastAPI）、Node.js、Java 等实现。
+
+### 1.3 API与数据交互
+
+API（Application Programming Interface）是程序之间通信的接口。在AI应用中，调用大语言模型、获取在线数据等操作都通过API完成。
+
+**RESTful API 基本概念**：
+
+| 方法 | 用途 | 示例 |
+|------|------|------|
+| GET | 获取数据 | 获取模型列表 |
+| POST | 提交数据 | 发送文本让模型生成回复 |
+| PUT | 更新数据 | 更新模型参数 |
+| DELETE | 删除数据 | 删除一条记录 |
+
+**调用API的Python示例**：
+
+```python
+import requests
+
+# 调用一个公开API获取数据
+response = requests.get("https://api.example.com/models")
+data = response.json()        # 将返回的JSON解析为Python字典
+print(data)
+
+# POST请求示例
+payload = {"prompt": "设计一个现代风格的客厅", "model": "stable-diffusion"}
+response = requests.post("https://api.example.com/generate", json=payload)
+```
+
+### 1.4 JSON数据格式
+
+JSON（JavaScript Object Notation）是Web上最常用的数据交换格式，几乎所有API都使用JSON传递数据。
+
+```json
+{
+  "model": "ResNet",
+  "accuracy": 0.96,
+  "layers": [64, 128, 256, 512],
+  "metadata": {
+    "author": "He et al.",
+    "year": 2015
+  }
+}
+```
+
+Python中读写JSON：
+
+```python
+import json
+
+# Python字典 → JSON字符串
+data = {"name": "Transformer", "year": 2017}
+json_str = json.dumps(data, indent=2)
+
+# JSON字符串 → Python字典
+parsed = json.loads(json_str)
+```
+
+## 2 网站搭建入门
+
+### 2.1 静态网站与动态网站
+
+| 类型 | 说明 | 技术栈 | 适用场景 |
+|------|------|--------|---------|
+| 静态网站 | 页面内容固定，无需服务器处理 | HTML/CSS/JS | 作品集、项目文档 |
+| 动态网站 | 内容根据请求动态生成 | 前端 + 后端 + 数据库 | 在线工具、数据平台 |
+
+### 2.2 静态网站快速搭建
+
+对于设计专业的学生，最实用的方式是使用静态网站生成器搭建项目展示或文档站点。
+
+**MkDocs**：用Markdown编写内容，生成美观的文档网站。
+
+```bash
+# 安装
+pip install mkdocs mkdocs-material
+
+# 创建项目
+mkdocs new my-site
+cd my-site
+
+# 本地预览（浏览器访问 http://127.0.0.1:8000）
+mkdocs serve
+
+# 构建静态文件
+mkdocs build
+```
+
+**GitHub Pages**：将静态网站免费部署到互联网。
+
+1. 在GitHub上创建仓库
+2. 将网站文件推送到仓库
+3. 在仓库设置中启用 GitHub Pages
+4. 即可通过 `https://username.github.io/repo` 访问
+
+### 2.3 HTML/CSS/JavaScript 速览
+
+#### HTML：页面结构
+
+```html
+<!DOCTYPE html>
+<html>
+<head>
+    <title>我的设计作品集</title>
+</head>
+<body>
+    <h1>设计作品集</h1>
+    <p>欢迎来到我的作品展示页面</p>
+    <img src="design.jpg" alt="设计作品">
+    <a href="https://example.com">了解更多</a>
+</body>
+</html>
+```
+
+#### CSS：页面样式
+
+```css
+body {
+    font-family: "Helvetica", sans-serif;
+    max-width: 800px;
+    margin: 0 auto;
+    padding: 20px;
+}
+
+h1 {
+    color: #2c3e50;
+    text-align: center;
+}
+```
+
+#### JavaScript：页面交互
+
+```javascript
+// 点击按钮时显示消息
+document.getElementById("myButton").addEventListener("click", function() {
+    alert("按钮被点击了！");
+});
+```
+
+### 2.4 前端框架简介
+
+对于更复杂的Web应用，可以使用前端框架提升开发效率：
+
+| 框架 | 特点 | 适用场景 |
+|------|------|---------|
+| Vue.js | 渐进式框架，学习曲线平缓 | 交互式数据展示 |
+| React | 组件化开发，生态最丰富 | 复杂单页应用 |
+| Streamlit | Python编写Web应用 | AI模型展示、数据分析仪表板 |
+
+**Streamlit 示例**（用Python快速构建AI展示页面）：
+
+```python
+import streamlit as st
+
+st.title("图像分类演示")
+st.write("上传一张图片，AI将识别其中的内容")
+
+uploaded_file = st.file_uploader("选择图片", type=["jpg", "png"])
+if uploaded_file:
+    st.image(uploaded_file, caption="上传的图片")
+    st.write("分类结果：建筑（置信度 95%）")
+```
+
+```bash
+# 安装并运行
+pip install streamlit
+streamlit run app.py
+```
+
+### 2.5 网站部署方式
+
+| 方式 | 特点 | 费用 |
+|------|------|------|
+| GitHub Pages | 适合静态网站，免费 | 免费 |
+| Vercel / Netlify | 支持前端框架自动部署 | 免费额度 |
+| 云服务器（阿里云/腾讯云） | 完全控制，适合动态网站 | 按需付费 |
+| Hugging Face Spaces | 适合AI模型演示 | 免费额度 |
+
+## 3 在线数据可视化
+
+### 3.1 为什么需要数据可视化
+
+设计领域的AI研究和实践经常涉及数据展示：训练损失曲线、模型性能对比、空间数据分析结果等。数据可视化将抽象的数字转化为直观的图形，帮助理解和决策。
+
+### 3.2 Python可视化库
+
+#### Matplotlib：基础绑图
+
+```python
+import matplotlib.pyplot as plt
+
+# 折线图
+epochs = range(1, 11)
+train_loss = [0.9, 0.6, 0.4, 0.25, 0.15, 0.1, 0.07, 0.05, 0.04, 0.03]
+val_loss = [0.85, 0.65, 0.45, 0.35, 0.28, 0.25, 0.24, 0.23, 0.23, 0.24]
+
+plt.figure(figsize=(8, 5))
+plt.plot(epochs, train_loss, 'b-o', label='Train Loss')
+plt.plot(epochs, val_loss, 'r-s', label='Val Loss')
+plt.xlabel('Epoch')
+plt.ylabel('Loss')
+plt.title('Training vs Validation Loss')
+plt.legend()
+plt.grid(True, alpha=0.3)
+plt.savefig('loss_comparison.png', dpi=150, bbox_inches='tight')
+plt.show()
+```
+
+#### Seaborn：统计可视化
+
+基于Matplotlib，提供更美观的统计图表。
+
+```python
+import seaborn as sns
+
+# 热力图：相关性矩阵
+import numpy as np
+data = np.random.randn(10, 10)
+corr = np.corrcoef(data)
+
+sns.heatmap(corr, annot=True, cmap='coolwarm')
+plt.title('Feature Correlation Heatmap')
+plt.savefig('heatmap.png', dpi=150)
+```
+
+#### Plotly：交互式可视化
+
+支持鼠标悬停、缩放、导出等交互操作，适合Web展示。
+
+```python
+import plotly.express as px
+
+# 交互式散点图
+df = px.data.iris()
+fig = px.scatter(df, x="sepal_width", y="sepal_length",
+                 color="species", size="petal_length",
+                 title="Iris Dataset Scatter Plot")
+fig.write_html("scatter.html")    # 导出为网页
+fig.show()
+```
+
+### 3.3 在线可视化工具
+
+无需编程，通过网页界面即可创建可视化：
+
+| 工具 | 特点 | 网址 |
+|------|------|------|
+| Observable | JavaScript驱动的交互式笔记本 | [observablehq.com](https://observablehq.com/) |
+| Flourish | 拖拽式数据可视化，模板丰富 | [flourish.studio](https://flourish.studio/) |
+| Datawrapper | 适合制作新闻级图表 | [datawrapper.de](https://www.datawrapper.de/) |
+| Tableau Public | 强大的商业智能可视化 | [public.tableau.com](https://public.tableau.com/) |
+| ECharts | 百度开源的交互式图表库 | [echarts.apache.org](https://echarts.apache.org/) |
+
+### 3.4 地理空间可视化
+
+设计领域经常涉及地理和空间数据的可视化：
+
+| 工具 | 特点 | 适用场景 |
+|------|------|---------|
+| Folium | Python地图可视化库 | 在地图上标注数据点 |
+| Kepler.gl | Uber开源的大规模地理数据可视化 | 城市数据分析 |
+| Mapbox | 自定义地图样式 | 设计精美的交互地图 |
+| QGIS | 开源GIS桌面软件 | 空间分析与制图 |
+
+**Folium 示例**（在地图上标记位置）：
+
+```python
+import folium
+
+# 创建地图（以某坐标为中心）
+m = folium.Map(location=[39.9, 116.4], zoom_start=12)
+
+# 添加标记
+folium.Marker(
+    [39.9, 116.4],
+    popup="设计学院",
+    icon=folium.Icon(color="blue", icon="info-sign")
+).add_to(m)
+
+# 保存为网页
+m.save("map.html")
+```
+
+### 3.5 可视化设计原则
+
+| 原则 | 说明 |
+|------|------|
+| 选择合适的图表类型 | 比较→柱状图，趋势→折线图，占比→饼图，关系→散点图 |
+| 保持简洁 | 每张图只传达一个核心信息，避免过度装饰 |
+| 使用合理的色彩 | 同类数据用同色系，对比数据用对比色，注意色盲友好 |
+| 标注清晰 | 标题、轴标签、图例、数据来源缺一不可 |
+| 交互增强 | 在线可视化支持筛选、缩放、悬停查看详情 |
diff --git a/appendix/附录4-在线学习资源.md b/appendix/附录5-在线学习资源.md
similarity index 97%
rename from appendix/附录4-在线学习资源.md
rename to appendix/附录5-在线学习资源.md
index adcc7d7..6a0f281 100644
--- a/appendix/附录4-在线学习资源.md
+++ b/appendix/附录5-在线学习资源.md
@@ -1,4 +1,4 @@
-# 附录4：在线学习资源
+# 附录5：在线学习资源
 
 本附录整理AI学习过程中常用的在线课程、技术博客与文档、以及公开数据集。
 
diff --git a/appendix/附录5-其他资源.md b/appendix/附录6-其他资源.md
similarity index 98%
rename from appendix/附录5-其他资源.md
rename to appendix/附录6-其他资源.md
index a466181..982aef3 100644
--- a/appendix/附录5-其他资源.md
+++ b/appendix/附录6-其他资源.md
@@ -1,4 +1,4 @@
-# 附录5：其他资源
+# 附录6：其他资源
 
 本附录整理AIGC工具、设计领域AI工具，以及设计AI相关的学术期刊与会议。
 
diff --git a/appendix/附录6-参考文献.md b/appendix/附录7-参考文献.md
similarity index 98%
rename from appendix/附录6-参考文献.md
rename to appendix/附录7-参考文献.md
index 1807782..ca01ea9 100644
--- a/appendix/附录6-参考文献.md
+++ b/appendix/附录7-参考文献.md
@@ -1,4 +1,4 @@
-# 附录6：参考文献
+# 附录7：参考文献
 
 本部分整理教材中引用的论文、书籍和在线资源。
 
diff --git a/appendix/附录7-关键术语表.md b/appendix/附录8-关键术语表.md
similarity index 99%
rename from appendix/附录7-关键术语表.md
rename to appendix/附录8-关键术语表.md
index 216bdd6..186069d 100644
--- a/appendix/附录7-关键术语表.md
+++ b/appendix/附录8-关键术语表.md
@@ -1,4 +1,4 @@
-# 附录7：关键术语表
+# 附录8：关键术语表
 
 本附录按章节整理书中涉及的关键中英文术语。