docs(api-intro): rewrite API introduction with interactive examples and clearer explanations

- Restructure content with more engaging metaphors and practical examples
- Add simplified interactive components to demonstrate key concepts
- Improve readability with better organization and visual aids
- Update terminology to be more beginner-friendly
- Include real-world API usage scenarios

docs/zh-cn/appendix/api-intro.md

@@ -1,148 +1,382 @@
 # API 入门（0 基础版）
 
-> 💡 **学习指南**：这是写给 0 基础新手的。你先记住一句话：**API 就是“别的软件给你用的按钮/入口”**。你按它的规则“提交信息”，它按规则“把结果给你”。
+> 💡 **学习指南**：本章节无需编程基础，通过交互式演示和生动比喻带你深入理解 API 的核心概念。我们将从"餐厅点餐"这个生活场景讲起，一步步揭开 API 的神秘面纱。
 
 <ApiQuickStartDemo />
 
----
+## 0. 引言：从餐厅点餐到软件协作
 
-## 0. 引言：你真正依赖的不是“服务器”，而是“接口”
+想象一下，你走进一家餐厅：
 
-当你说“我要调一下接口”，你其实是在说：
+1. **你**（顾客）拿着菜单，告诉服务员："我要一份宫保鸡丁，加辣。"
+2. **服务员**（接口）把你的要求记下来，送到厨房。
+3. **厨房**（对方的系统）根据要求做菜。
+4. **服务员**把做好的菜端给你。
 
-> 我希望<strong>按某种约定</strong>把输入交给对方系统，然后<strong>按约定</strong>拿到输出（成功或失败）。
+在这个过程中，**你不需要知道**：
+- 厨房有几个厨师
+- 他们用什么锅铲炒菜
+- 蔬菜是从哪个市场买的
+- 厨师今天心情好不好
 
-这份“约定”就是 API。
+**你只需要知道**：
+- 怎么点菜（喊服务员或填单子）
+- 要告诉对方什么（菜名、口味要求）
+- 会得到什么（你点的菜）
 
-你可以先把 API 当成一句大白话：
+**这就是 API 的本质**：它就像餐厅的**服务员**，是你和"对方的系统"之间的**桥梁**。
 
-> API = 别的软件给你用的“入口”：你按它说的来，它把结果给你。
+> **API（Application Programming Interface）** = **应用之间的"接口/入口"**：你按约定把请求交给对方，对方按约定把结果给你。
 
 ---
 
-## 1. 什么是 API？（新手版一句话）
+## 1. 核心：API 的三个关键问题
 
-**API** 可以翻译成：**应用之间的“接口/入口”**。
+就像去餐厅点菜一样，使用 API 时你只需要搞清楚 3 个问题：
 
-对新手来说，你只要先记住 3 件事（够用了）：
+### 1.1 怎么点菜？（入口在哪里）
 
-1. **怎么用它**（入口是什么：一个网址 / 一个函数名）
-2. **要填什么**（你要告诉它哪些信息）
-3. **会得到什么**（成功给你什么；失败会怎么提示）
+你首先得知道"怎么叫服务员"。在软件世界里，入口通常有两种：
+
+- **HTTP API**：像一个"网址"，你发送网络请求过去
+  - 例如：`https://api.example.com/getUser`
+- **SDK/API**：像一个"函数名"，你在代码里直接调用
+  - 例如：`getUserInfo(userId)`
+
+### 1.2 要说什么？（你要填什么信息）
+
+你不能只说"我要菜"，你得告诉服务员：
+- 你要什么菜？（模型名称）
+- 有什么要求？（提示词、参数）
+- 你是谁？（API Key，相当于会员卡）
+
+### 1.3 会得到什么？（成功/失败的结果）
+
+服务员可能会端来：
+- ✅ 你点的菜（成功返回的数据）
+- ❌ "不好意思，这道菜卖完了"（错误提示，比如 404、500）
 
 <ApiConceptDemo />
 
-### 1.1 API 不等于“实现”
+### 1.4 API 的核心价值：把复杂度藏起来
 
-API 只描述“怎么用”，不描述“怎么做”。
+回到餐厅的比喻：
 
-比如一个“获取用户信息”的 API，调用方需要知道：
+**餐厅**需要做的事情（实现细节）：
+- 采购食材、处理库存
+- 安排厨师、协调后厨
+- 控制火候、调味摆盘
+- 清洗餐具、打扫卫生
 
-- 你要带用户 id 吗？
-- 你要不要带 Token？
-- 成功返回什么字段？
-- 用户不存在会返回什么错误？
+**顾客**完全不需要知道这些！顾客只需要：
+- 看菜单点菜
+- 等菜上桌
+- 享用美食
 
-但调用方不需要知道：
+**API 就像菜单和服务员**，它把"怎么做"的复杂度全部藏起来，只暴露"怎么用"的简单接口。
 
-- 用户表怎么设计
-- 服务拆成几个微服务
-- 缓存怎么做
-
-把实现细节藏起来，让双方能**各做各的**，这就是 API 的价值。
+这就带来两个好处：
+1. **简化使用**：调用者不需要理解内部实现
+2. **灵活变更**：餐厅换了厨师、改了做法，但菜单不变，顾客完全无感
 
 ---
 
-## 2. 为什么 HTTP 调用可以叫 API？
+## 2. 两种常见的 API 形式
 
-因为用“网址发请求”本身就像按一个按钮：你把信息发过去，对方把结果回给你。（这类通常就叫 HTTP API）
+在现实世界里，你会遇到两种"点菜方式"：
 
-你不用记复杂的术语，先看流程就够了：**发过去 → 对方处理 → 回给你**。
+### 2.1 外卖配送（HTTP API）
+
+你不用亲自去餐厅，只需要：
+1. 打开外卖 APP（找到入口：网址）
+2. 选好菜品、填好地址（准备请求：参数）
+3. 等外卖员送到（接收响应：数据）
+
+**HTTP API** 就是这种方式：通过网络发送请求，等待返回结果。
+
+**流程是这样的**：
+```
+你的电脑 → 发送请求 → 网络传输 → 对方服务器
+                        ↓
+                  处理你的请求
+                        ↓
+你的电脑 ← 接收结果 ← 网络传输 ← 对方服务器
+```
 
 <RequestResponseFlow />
 
-一句话总结：HTTP API 就是“用网址去叫别人做事”。
+**举个例子**：调用 AI 模型生成文本
+- 你发送："帮我写一首关于春天的诗"
+- 对方处理：调用大语言模型生成
+- 你接收：返回生成的诗歌
+
+### 2.2 餐堂堂食（SDK/API）
+
+你走进餐厅，直接对服务员说：
+- "来一份宫保鸡丁"
+
+**SDK（软件开发工具包）** 就像是餐厅的"服务员"，它已经在餐厅里了，你只需要说话（调用函数），它会帮你：
+- 把要求转达给厨房（内部帮你调用 HTTP API）
+- 处理各种复杂细节（鉴权、重试、数据格式）
+- 最后把结果整理好给你
+
+**所以你会听到两种说法**：
+- "调用这个服务的 API"（通常指 HTTP API，像外卖）
+- "调用这个 SDK 的 API"（通常指函数接口，像堂食）
 
 ---
 
-## 3. 为什么 SDK 的调用接口也叫 API？
+## 3. 真实世界：怎么和 AI 服务"对话"
 
-因为 SDK 本质上也是一个“工具包/库”。它对外公开的函数/方法，本来就可以叫 API（入口）。
+让我们看一个真实的例子：调用 AI 模型。
 
-同时，很多 SDK 会在背后帮你调用 HTTP API（还会顺便帮你处理：加“钥匙”、失败重试、把数据整理成好用的样子），所以大家会同时说：
+**场景**：你想让 AI 帮你写一段产品文案。
 
-- “这个服务的 API”（通常指 HTTP 接口）
-- “这个 SDK 的 API”（通常指库里的函数接口）
+### 3.1 用 HTTP API 的方式（外卖模式）
+
+就像发外卖订单一样，你需要：
+
+```bash
+# 1. 打开外卖 APP（找到网址）
+curl https://api.openai.com/v1/chat/completions
+
+# 2. 选好菜品、填好地址（带上你的信息和要求）
+--header 'Authorization: Bearer 你的API密钥'  # 你的会员卡
+--header 'Content-Type: application/json'     # 说明你点的是菜单（JSON格式）
+
+# 3. 告诉服务员你要什么（请求内容）
+--data '{
+  "model": "gpt-4",           # 选哪个厨师
+  "messages": [               # 你的要求
+    { "role": "system", "content": "你是一个营销文案专家" },
+    { "role": "user", "content": "帮我为这款智能手表写一段吸引人的产品文案" }
+  ]
+}'
+
+# 4. 等待配送（接收响应）
+# 返回：{"choices": [{"message": {"content": "生成的文案..."}}]}
+```
+
+### 3.2 用 SDK 的方式（堂食模式）
+
+就像走进餐厅直接点餐：
+
+```javascript
+// 安装 SDK（相当于走进餐厅）
+import OpenAI from 'openai';
+
+// 创建"服务员"（初始化客户端）
+const client = new OpenAI({
+  apiKey: '你的API密钥'  # 你的会员卡
+});
+
+// 直接点菜（调用函数）
+const response = await client.chat.completions.create({
+  model: 'gpt-4',           # 选哪个厨师
+  messages: [               # 你的要求
+    { role: 'system', content: '你是一个营销文案专家' },
+    { role: 'user', content: '帮我为这款智能手表写一段吸引人的产品文案' }
+  ]
+});
+
+// 享用美食（使用结果）
+console.log(response.choices[0].message.content);
+```
+
+**看出来了吗？** SDK 的方式更简单，因为它帮你处理了很多细节！
 
 <RealWorldApiDemo />
 
+### 3.3 两种方式的对比
+
+| 特点 | HTTP API（外卖） | SDK API（堂食） |
+|------|------------------|-----------------|
+| **使用门槛** | 需要理解网络请求、数据格式 | 只需会调用函数 |
+| **灵活性** | 更灵活，任何语言都能用 | 通常限定特定语言 |
+| **复杂度** | 你要处理很多细节（鉴权、错误等） | SDK 帮你处理细节 |
+| **典型场景** | 跨语言调用、学习原理 | 日常开发、快速集成 |
+
 ---
 
-## 4. （选读）GET/POST 这些词到底在说什么？
+## 4. 进阶：GET 和 POST 有什么区别？
 
-新手可以先跳过这一节：你只要先学会“看文档、会调用”就够用了。
+> 🎯 **新手提示**：这一节可以暂时跳过。等你熟悉了基本调用，再回来了解也不迟。
 
 <details>
-<summary>点我展开：进阶一点点（但我尽量讲人话）</summary>
+<summary>点我展开：进阶内容（用人话讲）</summary>
+
+在 HTTP API 的世界里，你会经常看到 **GET** 和 **POST** 这两个词。它们就像两种不同的"点菜方式"。
+
+### 4.1 GET：像看菜单（只看不吃）
+
+**特点**：
+- 只是想"获取"信息，不会改变服务器状态
+- 就像在餐厅看菜单，你看一遍菜单，厨房的菜不会被消耗
+- **可以安全重试**：看一遍菜单没看清，再看一遍，没问题
+
+**例子**：
+- 查询用户信息：`GET /api/user/123`
+- 搜索商品：`GET /api/products?keyword=手机`
+- 获取文章列表：`GET /api/articles`
+
+### 4.2 POST：像下单（会真的执行）
+
+**特点**：
+- 会"创建"或"修改"服务器上的数据
+- 就像你下了单，厨房真的开始做菜了
+- **不能随意重试**：下错了单，再下一遍，你就点了双份！
+
+**例子**：
+- 创建用户：`POST /api/users`（会真的创建一个新用户）
+- 下单购买：`POST /api/orders`（会真的扣钱、发货）
+- 发表评论：`POST /api/comments`（会真的保存一条评论）
 
 <ApiMethodDemo />
 
-这节想讲的只有一件事：有些请求“重试很安全”（比如 GET），有些“重试可能出事”（比如创建接口）。
+### 4.3 还有哪些方法？（简单了解）
+
+除了 GET 和 POST，还有：
+- **PUT**：更新（替换整个资源）
+- **PATCH**：打补丁（更新部分字段）
+- **DELETE**：删除
+
+**新手建议**：先学会用 GET 和 POST，其他的慢慢来。
 
 </details>
 
 ---
 
-## 5. 怎么读 API 文档？（先看能不能用，再看怎么用）
+## 5. 怎么读 API 文档？（像看菜单一样简单）
 
-API 文档可以当成“菜单 + 说明书”：
+API 文档就像餐厅的**菜单 + 说明书**，告诉你：
+- 有哪些菜可以点（提供哪些功能）
+- 每道菜是什么（接口说明）
+- 怎么点（怎么调用）
+- 什么价格（返回什么数据）
+- 有没有忌口/限量（注意事项）
 
 <ApiDocumentDemo />
 
-### 5.1 阅读 API 文档的 5 步
+### 5.1 阅读 API 文档的 5 步法
 
-1. **确认能力**：这个接口是不是你要的（做什么）
-2. **确认怎么用**：网址/函数名 + 需要填什么
-3. **确认参数**：必填/可选/默认值/类型
-4. **确认返回**：字段含义、是否可能为空
-5. **确认边界**：失败会怎样、太频繁会不会被拒绝
+就像看菜单点菜一样，按这个流程来：
+
+**第 1 步：确认这道菜是不是你要的**
+- 这个接口能做什么？
+- 符合你的需求吗？
+
+**第 2 步：找到"点菜入口"**
+- HTTP API：网址（URL）是什么？
+- SDK：函数名是什么？
+
+**第 3 步：看看要填什么信息**
+- **必填项**：就像"必须选辣度/份量"，不填不行
+- **可选项**：就像"要不要加葱花"，可以不填
+- **默认值**：就像"默认中辣"，你不填就按这个来
+
+**第 4 步：看看会端上来什么**
+- 成功时返回什么数据？
+- 字段代表什么意思？
+- 可能是空的吗？
+
+**第 5 步：了解"餐厅规则"**
+- 没钱了会怎样？（余额不足）
+- 点太快会怎样？（限流/Rate Limit）
+- 菜卖完了会怎样？（404 资源不存在）
+- 厨房出错会怎样？（500 服务器错误）
+
+### 5.2 常见的状态码（就像餐厅的回复）
+
+| 状态码 | 含义 | 餐厅类比 |
+|--------|------|----------|
+| **200** | 成功 | "这是您的菜，请慢用" |
+| **400** | 请求错误 | "您点的菜我们有，但您填的信息有问题" |
+| **401** | 未授权 | "请先出示会员卡" |
+| **403** | 禁止访问 | "您的会员卡等级不够，点不了这道菜" |
+| **404** | 资源不存在 | "对不起，您点的菜卖完了" |
+| **429** | 请求过多 | "您点太快了，请稍后再试" |
+| **500** | 服务器错误 | "厨房出故障了，请稍后再试" |
 
 ---
 
-## 6. 实战：用“模拟 API”练出手感
+## 6. 实战：用"模拟 API"练出手感
 
-真实世界里你会用 Postman/curl/代码去调 API；这里我们用一个“不会被 CORS/网络干扰”的练习场，把核心手感练出来。
+理论讲完了，该动手了！在真实世界里，你会用 Postman、curl 或代码去调用 API。但这里我们准备了一个"练习场"，不用担心网络问题、CORS 错误，专注于练出核心手感。
 
 <ApiPlayground />
 
-建议你按顺序试这几件事：
+### 6.1 建议按顺序试试这些"场景"
 
-1. 把 “登录/钥匙” 改成“没有” → 看看失败会怎么提示
-2. 连续点击“调用” → 看看“太频繁会被拒绝”的提示
-3. 选 POST 创建用户，把 Body 改成非法 JSON → 观察 400
-4. 把用户 id 改成 `u_404` → 观察 404（资源不存在）
+就像去餐厅"踩点"一样，试试各种情况：
+
+**场景 1：忘带会员卡**
+- 把"登录/钥匙"改成"没有"
+- 观察返回什么错误（通常是 401）
+
+**场景 2：点太快被限流**
+- 连续快速点击"调用"按钮
+- 观察返回什么错误（通常是 429）
+
+**场景 3：点菜信息填错了**
+- 选 POST 创建用户
+- 把 Body 改成非法的 JSON 格式
+- 观察返回什么错误（通常是 400）
+
+**场景 4：点的菜卖完了**
+- 把用户 ID 改成 `u_404`（不存在的用户）
+- 观察返回什么错误（通常是 404）
+
+### 6.2 练习目标
+
+通过这些练习，你要掌握：
+1. **能看懂成功响应**：知道返回的数据在哪里
+2. **能看懂错误提示**：知道为什么失败、怎么改
+3. **有手感**：知道调用 API 的基本流程
 
 ---
 
-## 7. 总结：一句话把三种“API”说清楚
+## 7. 总结：记住这三句话就够了
 
-- **HTTP API**：通过网络调用（你发请求，它回结果）
-- **SDK API**：通过库函数调用（你调函数，它内部帮你发请求）
-- **库 API**：本地函数接口（不走网络）
+### 7.1 API 的三种形式
 
-它们共同点只有一个：**把“怎么用”写清楚**。
+| 类型 | 比喻 | 特点 |
+|------|------|------|
+| **HTTP API** | 外卖配送 | 通过网络调用，你发请求它回结果 |
+| **SDK API** | 餐厅堂食 | 通过函数调用，它内部帮你发请求 |
+| **库 API** | 自己做菜 | 本地函数，不走网络 |
+
+### 7.2 核心记忆点
+
+1. **API = 接口**：就像餐厅的服务员，是你和对方系统的桥梁
+2. **调用三要素**：入口（网址/函数名）、参数（要告诉什么）、返回（会得到什么）
+3. **学会读文档**：就像看菜单，先确认能不能用，再看怎么用
+
+### 7.3 下一步建议
+
+现在你已经理解了 API 的基本概念，可以去：
+- 读一读真实的 API 文档（比如 OpenAI、DeepSeek 的文档）
+- 用 Postman 或 curl 试试真实的 API 调用
+- 在你的项目里接入第一个 API
 
 ---
 
 ## 8. 名词速查表
 
-> 不想背词也没关系：你只要会“看文档、会填参数、能看懂成功/失败”，就已经能开始用 API 了。
+> 💡 **使用建议**：不用背！遇到不懂的词回来查就行。你只要会"看文档、会填参数、能看懂成功/失败"，就已经能开始用 API 了。
 
-| 名词       | 英文                              | 解释                                      |
-| :--------- | :-------------------------------- | :---------------------------------------- |
-| API        | Application Programming Interface | 软件对外公开的接口/入口                   |
-| URL/地址   | -                                 | 你要访问的“网址/路径”                     |
-| 参数       | -                                 | 你要告诉对方的信息（例如：id、页码）      |
-| 返回       | -                                 | 对方给你的结果（数据或错误提示）          |
-| 状态码     | -                                 | 成功/失败的数字提示（例如：200 表示成功） |
-| Rate Limit | -                                 | 限流/配额（常见 429）                     |
+| 名词 | 英文 | 解释 |
+|------|------|------|
+| **API** | Application Programming Interface | 软件对外公开的接口/入口，像餐厅的服务员 |
+| **HTTP API** | HTTP API | 通过网络调用的接口，像外卖配送 |
+| **SDK** | Software Development Kit | 软件开发工具包，像餐厅的服务员（帮你处理细节） |
+| **URL** | Uniform Resource Locator | 你要访问的"网址"，像餐厅的地址 |
+| **参数** | Parameter | 你要告诉对方的信息，像点菜时的要求（辣度、份量） |
+| **请求** | Request | 你发给对方的要求，像点菜单 |
+| **响应** | Response | 对方给你的结果，像端上来的菜 |
+| **状态码** | Status Code | 成功/失败的数字提示，200=成功，4xx=你错了，5xx=服务器错了 |
+| **API Key** | API Key | 调用 API 的密钥，像餐厅的会员卡 |
+| **限流** | Rate Limit | 限制调用频率，像餐厅说"您点太快了" |
+| **GET/POST** | HTTP Methods | 请求方法，GET=获取信息（看菜单），POST=创建/修改（下单） |
+| **JSON** | JavaScript Object Notation | 数据格式，像菜单上的格式（统一的排版） |
+| **Header** | Header | 请求头，像点菜单上的备注栏（放会员卡等信息） |
+| **Body** | Body | 请求体，像点菜单的详细内容（具体的菜品要求） |

docs/zh-cn/stage-1/1.3-integrating-ai-capabilities/index.md

@@ -1,30 +1,153 @@
-# 1.3 给原型加上 AI 能力
+---
+title: '给原型加上 AI 能力 - 接入文本与图像 API'
+description: '在已有 Web 原型中接入真实的 AI 能力：理解 API 的核心概念，学会找到 API Key 和官方示例；实战集成 DeepSeek 文本模型与多种图像生成服务（SiliconFlow Qwen-Image、Recraft、Seedream），并掌握常用的模型选型方法。'
+---
 
+<script setup>
+const duration = '约 <strong>1 天</strong>'
+</script>
 
-# 什么是 API 
+# 初级四：给原型加上 AI 能力
 
-# 如何接入文本 API
+## 本章导读
 
+<ChapterIntroduction :duration="duration" :tags="['API', '文本模型', '文生图', '原型集成']" coreOutput="原型接入 1 个文本模型 + 1 个图像模型（可选）" expectedOutput="可调用真实 API 的 AI 原型">
 
-# 3. **使用 API：调用 LLM 和图像生成器**
+在上一节中，你已经做出了一个「能跑起来」的产品原型；但只靠静态页面和前端逻辑，它离“能真正帮你提高效率”还差一步：把 AI 能力接进来。
 
-## 3.1 什么是 API
+本章会用非常务实的视角讲清楚一件事：**接入任何 AI API，本质上都是“拿到 API Key + 读懂官方示例 + 让 AI 帮你落到代码里”**。你会以 DeepSeek 作为文本模型示例，并从多个图像生成服务中挑一个集成到自己的原型里。
 
-首先，**你需要知道什么是 API** `Extra Knowledge 2 - What is API`
+</ChapterIntroduction>
 
-我们将尝试集成两个 API：一个是调用 DeepSeek LLM，另一个是调用 Seedream (即梦) 模型。这两个模型都很棒，性能出色。
+::: warning 🔐 安全与费用提醒
+- **API Key 相当于密码**：它能代表“你本人”去调用接口，并且会产生费用。拿到你 Key 的人，不需要再问你确认，也能直接调用。
+  - 不要发群、不要截图公开、不要贴到评论区/论坛。
+  - 不要写进代码并提交到 Git（尤其是公开仓库）；一旦提交，哪怕你后来删掉，历史记录里也可能还在。
+  - 如果你怀疑 Key 泄露了：立刻去平台把 Key 删除/禁用，然后重新生成一个新的。
+- **原型阶段可以先跑通，但不要把 Key 放在前端公开代码里**：如果你的网页里直接写了 Key（哪怕你觉得“别人看不到”），只要页面能打开，别人就有机会从浏览器里把 Key 找出来。
+  - 原型阶段：你可以先让功能跑通，理解流程即可。
+  - 要上线/交付：务必用后端来保存 Key，并由后端去调用 API（初中级开发中会详细展开）。
+- **费用是按用量算的**：调用一次就可能消耗一点额度；图片/视频通常比文字更贵。
+  - 建议先用免费额度或小额充值完成验证。
+  - 测试时尽量用短输入、小图片、少次数；确认没问题再逐步加量。
+:::
 
-在使用 API 的过程中，只有两个最重要的元素：
+<div style="margin: 50px 0;">
+  <ClientOnly>
+    <StepBar :active="0" :items="[
+      { title: 'API 基础', description: '可跳过，但很有用' },
+      { title: '接入文字', description: '5 分钟跑通一次' },
+      { title: '接入图片', description: '5 分钟跑通一次' },
+      { title: '实战接入', description: '接进上节原型' },
+      { title: '模型选型', description: '看榜单做选择' }
+    ]" />
+  </ClientOnly>
+</div>
 
-1. API key (密钥)
-2. 官方文档示例
+## 1. API 基础
 
-只要你能找到这两个，你就可以让 LLM 帮你修改并实现所有类型的 API 调用。
+如果你已经跑通了“生成文字”和“生成图片”，这一节可以先跳过；等你遇到报错、或者想更稳地改代码时，再回来看会更有用。
 
-## 3.2 将 DeepSeek API 集成到 z.ai 中
+API 可以简单理解为：**你按对方要求的格式“发一个问题”，对方就按同样的格式“回一个结果”**。
+
+- **你发出去的内容**：通常包括“密钥（API Key）”和“你要生成什么”
+- **对方回给你的内容**：成功就给结果；失败会告诉你原因（比如“密钥不对”“余额不足”“参数写错”）
+
+在原型阶段，你只要记住一句话就够了：
+
+> **拿到 API Key + 找到官方示例 + 让 AI IDE 帮你接到按钮上。**
+
+如果你想看更详细的 0 基础解释，可以看附录：[《API 入门（0 基础版）》](/zh-cn/appendix/api-intro)。
+
+## 2. 接入文本 API（生成文字）
+
+在 `1.2 动手做出原型` 里，你已经做出了一个可交互的原型。接下来我们要做的，是把原型里“看起来像 AI 的功能”变成真正可用的能力：**当用户点击按钮时，原型会向外部的 AI 服务发出请求，并把返回的文字展示出来。**
+
+这一节我们先用一个例子“快速跑通一次”，再把整条接入链条讲清楚。你照着做，0 基础也能完成。
+
+### 2.1 5 分钟接入文字 API：以 DeepSeek 为例
+
+先说明：你现在**不需要写复杂代码，也不需要懂原理**。这 5 分钟要做的事很单纯：
+
+> **把 DeepSeek 的“密钥 + 官方示例”复制到 AI IDE 里，让 AI IDE 帮你把上一节原型的“生成文案”按钮改成真实调用，然后你再点按钮测试。**
+
+你可以把它当成 4 步小任务（按顺序做）：
+
+1. **拿到密钥（API Key）**：去 DeepSeek 平台创建一个 API Key（它相当于“通行证”）。
+2. **找到官方示例**：在 DeepSeek 文档里找到“生成文字”的示例（通常可以直接复制）。
+3. **复制粘贴到 AI IDE**：把 **API Key + 官方示例** 粘贴进 AI IDE，并告诉它：我要改的是上一节原型里的“生成标题/生成卖点/一键改写”按钮。
+4. **回到页面点一下测试**：打开原型，输入一点内容，点击按钮，能看到生成结果就算跑通。
+
+为了让你“更好对齐到上一节的项目”，你可以边打开原型边做这一小节：
+
+> 上一节课项目：[1.2 动手做出原型（电商素材工作台）](/zh-cn/stage-1/1.2-building-prototype/)
+>
+> 你只需要找到里面的“生成标题/生成卖点/一键改写”这类按钮，把它从“假数据”升级成“真实调用”。
+
+你在素材工作台里，通常会看到这样的流程：
+
+- 输入商品信息（商品名、卖点、目标人群、风格）
+- 点击“生成标题/生成卖点”
+- 页面出现一段可复制的文字结果
+
+建议你对 AI IDE 这样说（把方括号里的内容换成你项目实际页面名称/按钮文字）：
+
+```text
+我有一个上一节做的电商素材工作台原型。
+
+现在我需要把 [生成标题/生成卖点文案/一键改写] 这个按钮接入真实的文本 API：
+1) 点击按钮时，读取页面上的输入（商品名/卖点/风格等），拼成一段提示词；
+2) 调用 DeepSeek（或你看到我提供的文本 API）的接口拿到生成结果；
+3) 把结果显示回页面（替换掉原来的 mock 文本），并加上“加载中/失败提示”； 
+4) 告诉我改了哪些文件，以及怎么验证。
+```
+
+<!-- TODO: 插入截图：DeepSeek 平台创建 API Key 的页面 -->
+<!-- TODO: 插入截图：DeepSeek 文档示例（可复制的那段） -->
+<!-- TODO: 插入截图：AI IDE 对话（说明“我要接入上一节的哪个按钮/页面”） -->
+<!-- TODO: 插入截图：原型接入成功（点击按钮后出现生成文案） -->
+<!-- TODO: 插入截图：素材工作台页面（文案输入区 + “生成标题/生成卖点”按钮） -->
+<!-- TODO: 插入截图：接入成功后的页面（展示生成文案结果） -->
+
+### 2.2 文本 API 的接入链条（0 基础版）
+
+把“文字 AI”接进原型，通常就 6 步：
+
+1. **确定入口**：用户在哪里点一下，就应该开始“生成文字”？（例如“生成标题/生成卖点/一键改写”按钮）
+2. **收集输入**：用户在页面上填了什么？（商品名、卖点、风格、字数、语气……）
+3. **拼出请求内容**：把这些输入拼成一段清楚的话（也就是“提示词”），作为你发给 AI 的内容
+4. **发出请求**：把“密钥 + 官方示例”接到代码里，让它真的去请求 AI
+5. **把结果显示出来**：把返回的文字写回页面（例如显示在文本框/卡片里）
+6. **加上“加载中/报错提示”**：请求需要时间，失败也很正常，给用户一个清晰反馈
+
+你会发现：这条链路里，最难的不是“写代码”，而是第 1～3 步的“把需求变成输入”。这些步骤越清楚，后面的代码就越顺。
+
+<!-- TODO: 插入截图：原型中“生成文案/改写/总结”的入口（来自上一节的原型页面） -->
+
+### 2.3 接入 DeepSeek 文本API
+
+这一小节更“细一点”，把你在 AI IDE 里需要说清楚的话写出来。你照着做就行。
+
+**目标**：从 DeepSeek 拿到密钥 → 从文档复制示例 → 粘贴到 AI IDE → AI IDE 改代码 → 我们回到页面再次测试。
+
+你可以按下面的顺序来：
+
+1. **准备两样东西**
+   - **DeepSeek API Key**（在平台创建）
+   - **DeepSeek 文档里的“生成文字示例”**（复制即可）
+2. **告诉 AI IDE：要改哪个“入口”**
+   - 入口就是你原型里那个按钮/页面（例如“生成标题/生成卖点/一键改写”）
+   - 你可以补一句：原来是“写死/假数据”，现在要换成真实调用
+3. **把“密钥 + 示例 + 入口说明”粘贴给 AI IDE**
+   - 让它直接改项目，并要求它告诉你：改了哪些文件、怎么验证
+4. **你自己回到页面再次测试**
+   - 输入一条商品信息 → 点生成 → 看是否出现“真实生成”的文字
+   - 如果失败：把报错提示原样复制回 AI IDE，让它继续修复
 
 ### 什么是 DeepSeek
 
+> 提示：文档里可能会出现 “LLM” 这个词。你可以先把它理解为“能生成文字的 AI 模型”，不影响你把 API 接进原型。
+
 ![](images/image16.png)
 
 > 📚 信息引用自 [DeepSeek Wiki](https://en.wikipedia.org/wiki/DeepSeek)
@@ -39,61 +162,148 @@
 >
 > GPQA 包含 448 个多项选择题，涵盖生物学、物理学和化学的子领域，如量子力学、有机化学、分子生物学等。这些问题由 61 位持有博士学位或正在攻读博士学位的专家编写，并经过了严格的验证过程。
 
-### 如何获取 deepseek API
+### 如何获取 DeepSeek API
 
-我们将尝试根据我们已有的信息，让 z.ai 直接将 DeepSeek API 集成到项目中。
+我们将尝试根据我们已有的信息，让 AI IDE 直接将 DeepSeek API 集成到项目中。
 
 首先，我们需要在 DeepSeek 开放平台注册一个账户。
 
-https://platform.deepseek.com/sign_up
+注册入口：<https://platform.deepseek.com/sign_up>
 
 然后，你会看到像这样的网页界面：
 
 ![](images/image18.png)
 
-要使用 API，我们需要先充值 token。10 元人民币足够使用一段时间了！
+要使用 API，我们需要先充值一点调用额度。10 元人民币通常足够你完成一轮接入与测试。
 
 ![](images/image19.png)
 
-点击“API KEYS”并在屏幕下方找到“create new API key”。你最终会得到一个像 `sk-8573341c39fc44315aadc071c53rh7d2` 这样的 API key。
+点击 “API KEYS”，并在屏幕下方找到 “create new API key”。你最终会得到一个类似 `sk-xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx` 的 API Key。
 
 ![](images/image20.png)
 
 一旦你获得了密钥，你就拥有了调用模型的权限。
 
-此时，你可以直接阅读 [API 文档](https://api-docs.deepseek.com/)，它通常提供 curl 或 Python 的调用示例。
+此时，你可以直接阅读 [API 文档](https://api-docs.deepseek.com/)，它通常提供 curl 或 Python 等调用示例。
 
 ![](images/image21.png)
 
-找到示例后，你可以将文档中与密钥相关的所有内容复制到 z.ai，并要求它尝试帮你集成 LLM。
+找到示例后，你可以将文档中与「鉴权」和「请求结构」相关的内容复制到 AI IDE，并要求它把 DeepSeek 接入你的项目（例如把“文案生成”“智能改写”“总结”等功能，替换成真实 API 调用）。
+
+你可以直接把下面这段话（按你的项目实际情况改一下）发给 AI IDE，减少沟通成本：
+
+```text
+我在上一章已经做了一个可运行的 Web 原型。现在我需要把“文案生成/改写/总结”等功能接入真实的文本 API（生成文字）。
+
+请你根据我提供的 DeepSeek API Key 和官方文档示例：
+1) 找到项目中触发文案生成的入口（按钮/表单/页面），把原来的 mock 逻辑替换为真实 API 调用；
+2) 把 API Key 放到安全的位置（先不要硬编码到前端源码里；如果不得不临时放，也要提醒我风险）；
+3) 告诉我你改动了哪些文件，以及如何验证（例如在页面上输入什么，点哪个按钮，能看到什么返回）。
+```
+
+<!-- TODO: 插入截图：AI IDE 对话中粘贴 API Key + 文档示例 + 上面这段说明 -->
 
 ![](images/image22.png)
 
 ![](images/image23.png)
 
-自动集成可以在很短的时间内完成。我们可以询问它的操作员确认 DeepSeek API 是否已经在使用中。
+自动集成通常可以在很短时间内完成。完成后，你可以让 AI IDE 明确回答两件事：
+
+- **它把“调用 AI”的代码放在了哪里**
+- **现在请求的是不是 DeepSeek（看“请求地址”和“模型名称”即可）**
 
 ![](images/image24.png)
 
-或者，我们可以要求 z.ai 帮我们定位项目中调用 LLM 的部分。
+或者，你也可以要求 AI IDE 帮你定位项目中“调用文字生成”的部分。
 
-然后我们可以独立确认是否正在使用 DeepSeek。具体来说，我们可以直接请求：`"告诉我项目中所有需要调用 LLM 的代码位置，我需要检查是否是 DeepSeek。"`，z.ai 将返回所有 API 调用的详细地址。
+为了独立确认是否真的在调用 DeepSeek，你可以直接让 AI IDE 帮你定位调用点，例如：
+
+`告诉我项目中所有需要调用文字生成的代码位置，我需要检查是否是 DeepSeek。`
+
+它会返回对应代码位置与请求细节，便于你人工检查（尤其是：请求地址、是否带了密钥、以及模型名称）。
 
 ![](images/image25.png)
 
-接下来，我们将简要介绍目前可用的三种最先进的图像生成模型。你可以根据自己的喜好选择一种集成到 z.ai 中。
+接下来，我们将简要介绍三种常见的“生成图片”的服务。你可以根据自己的预算、可访问性和效果偏好，选择其中一种集成到 AI IDE 中即可。
 
-# 如何接入图像 API
+## 3. 接入图片 API（生成图片）：从“提示词”到“图片展示”
 
 如果说大语言模型专注于理解、推理和分析我们不知道的所有事物；那么图像和视频模型则专注于生成——将你脑海中的所有想法转化为视觉现实。在今年的 AI 生成领域（2025），图像编辑和视频生成非常流行。你一定在抖音或 YouTube 上看过 AI 生成的可爱动物视频、AI 创建的角色照片、AI 生成的肖像拍摄、切玻璃苹果的视频等等。在上完今天的图像和视频课程后，你也完全有能力创建同样的内容！
 
-在今天的课程中，我们需要生成大量的图像和视频。为了方便起见，我们将使用统一连接的云服务提供商，并将提供相应的代码和 Token。在上一节课中，大家已经学习了如何集成 API 和使用 Token。你只需要按照以下步骤操作，回忆上节课学到的内容，就可以在 Z.AI 中成功启动你自己的图像/视频应用程序。
+图片 API 的“接入链条”其实也不复杂。你可以先按 0 基础版本跑通一遍，再去追求更好的效果。
 
-![](images/image20.png)![](images/image21.png)![](images/image22.png)
+这一节同样先用一个例子“5 分钟跑通一次”，再讲清楚接入链条。
+
+### 3.1 5 分钟接入生图 API：以 SiliconFlow Qwen-Image 为例
+
+这一小节的目标只有一个：让你的原型“真的能生成一张图片”，快速跑通链路。
+
+同样是 4 步（按顺序做）：
+
+1. **拿到密钥（API Key）**：在 SiliconFlow 创建一个 API Key（相当于“通行证”）。
+2. **找到官方示例**：在 SiliconFlow 文档里找到“生成图片”的示例（通常可以直接复制）。
+3. **让 AI IDE 帮你接进原型**：把“密钥 + 官方示例 + 你原型里哪个按钮要生成图片”发给 AI IDE，让它把占位图/假图替换成真实生成。
+4. **验证是否成功**：打开原型，输入一句图片描述（例如“白底电商主图、产品居中、柔光棚拍风格”），点击“生成主图”，能看到图片出来就算跑通。
+
+同样，为了对齐到上一节的项目，你可以边打开原型边做这一小节：
+
+> 上一节课项目：[1.2 动手做出原型（电商素材工作台）](/zh-cn/stage-1/1.2-building-prototype/)
+>
+> 你只需要找到里面的“生成主图/生成海报/生成配图”这类按钮，把它从“占位图/假图”升级成“真实生成”。
+
+在素材工作台里，图片通常对应这样的入口：
+
+- 输入“想要的画面描述”（例如白底、场景、风格、需要的文案）
+- 点击“生成主图/生成海报”
+- 页面出现一张图片（或一组图片）
+
+你可以对 AI IDE 这样说：
+
+```text
+我有一个上一节做的电商素材工作台原型。
+
+现在我需要把 [生成主图/生成海报/生成配图] 这个按钮接入真实的图片 API：
+1) 点击按钮时，读取页面输入，整理成一句清楚的提示词；
+2) 调用图片生成 API（例如 SiliconFlow Qwen-Image / Recraft / Seedream）；
+3) 拿到返回的图片地址后，把图片显示在页面上；
+4) 加上“生成中/失败提示”，并告诉我怎么验证。
+```
+
+<!-- TODO: 插入截图：SiliconFlow 创建 API Key 的页面 -->
+<!-- TODO: 插入截图：SiliconFlow 图片生成的文档示例（可复制的那段） -->
+<!-- TODO: 插入截图：AI IDE 对话（说明“我要把生图接入上一节的哪个按钮/页面”） -->
+<!-- TODO: 插入截图：原型接入成功（点击按钮后出现生成图片） -->
+<!-- TODO: 插入截图：素材工作台页面（图片提示词输入区 + “生成主图/生成海报”按钮） -->
+<!-- TODO: 插入截图：接入成功后的页面（展示生成图片结果） -->
+
+### 3.2 图片 API 的接入
+
+把“图片 AI”接进原型，通常就 6 步：
+
+1. **确定入口**：用户在哪里点一下，就应该开始“生成图片”？（例如“生成主图/生成海报/生成配图”）
+2. **收集输入**：用户希望图片长什么样？（风格、场景、文字、颜色……）
+3. **准备提示词**：把输入整理成一句清楚的话（例如“白底电商主图、产品居中、柔光棚拍风格”）
+4. **发出请求**：用“密钥 + 官方示例”去请求图片服务
+5. **拿到图片并展示**：通常会返回一个“图片地址”，你把它放到页面里就能看到图片
+6. **加上加载/失败提示**：图片生成更慢，失败也更常见，提示要更清楚
+
+<!-- TODO: 插入截图：原型中“生成图片/生成海报/生成主图”的入口（来自上一节的原型页面） -->
+
+### 3.3 选择一个图片服务接入（示例）
+
+下面给出三个常见选择。你只需要先选一个跑通即可：跑通之后，再尝试替换成你更喜欢的模型。
+
+在今天的课程中，我们需要生成大量的图像和视频。为了方便起见，我们将使用统一连接的云服务提供商，并将提供相应的示例代码与调用密钥。你只需要按照以下步骤操作，就可以在你的原型中接入图像/视频能力。
+
+![](images/image20.png)
+![](images/image21.png)
+![](images/image22.png)
 
 
 
-## 3.3 将 SiliconFlow QwenImage API 集成到 z.ai 中
+## 3.4 将 SiliconFlow Qwen-Image API 集成到 AI IDE 中
+
+在原型里，图片 API 最常见的落点是：**“生成主图 / 生成海报 / 生成配图”**。你需要做的事情很简单：把用户输入整理成一句话，请求图片 API，然后把返回的图片展示出来。
 
 ### 什么是 SiliconFlow
 
@@ -101,11 +311,11 @@ https://platform.deepseek.com/sign_up
 >
 > ![](images/image26.png)
 
-### 什么是 QwenImage
+### 什么是 Qwen-Image
 
 > Qwen-Image 是一个强大的图像生成基础模型，能够进行复杂的文本渲染和精确的图像编辑。这是一个 20B MMDiT 图像基础模型，在复杂的文本渲染和精确的图像编辑方面取得了重大进展。实验表明，它在图像生成和编辑方面都具有很强的通用能力，在文本渲染方面表现尤为出色，尤其是中文。
 >
-> 从中文到英文，QwenImage 可以像 GPT-4o 或 Seedream 模型一样生成高质量的文本。
+> 从中文到英文，Qwen-Image 可以像 GPT-4o 或 Seedream 模型一样生成高质量的文本。
 >
 > ![](images/image27.png)
 >
@@ -115,9 +325,9 @@ https://platform.deepseek.com/sign_up
 >
 > ![](images/image30.png)
 
-### 如何获取 SiliconFlow QwenImage API
+### 如何获取 SiliconFlow Qwen-Image API
 
-https://cloud.siliconflow.com/me/models
+入口：<https://cloud.siliconflow.com/me/models>
 
 查看 SiliconFlow 的官网。左侧有一个“Playground”部分，你可以在不进行 API 调用的情况下试用不同的模型。在网页顶部有一个“Filters”按钮；点击它可以筛选右侧的模型列表。
 
@@ -131,20 +341,20 @@ https://cloud.siliconflow.com/me/models
 
 要查看可用余额，我们需要打开左侧设置中的“Payments”。在这里，你可以看到 1 美元的赠金。但是，如果你想使用 FLUX 文生图模型，你需要先充值账户。
 
-https://cloud.siliconflow.com/me/account/ak
+充值/余额：<https://cloud.siliconflow.com/me/account/ak>
 
 ![](images/image33.png)
 
 一切设置好后，我们需要参考相应的图像生成 API 文档。你可以在官方文档页面找到任何标记为“API Reference”的部分。点击它，然后导航到图像生成的 API 端点部分并找到相关的请求示例。
 
-https://docs.siliconflow.com/en/userguide/introduction
+文档入口：<https://docs.siliconflow.com/en/userguide/introduction>
 
 ![](images/image34.png)
 
-```Bash
+```bash
 curl --request POST \
   --url https://api.siliconflow.com/v1/images/generations \
-  --header 'Authorization: Bearer <token>' \
+  --header 'Authorization: Bearer <YOUR_API_KEY>' \
   --header 'Content-Type: application/json' \
   --data '{
   "model": "black-forest-labs/FLUX.1-Kontext-max",
@@ -154,10 +364,10 @@ curl --request POST \
 
 记得将你打算使用的模型和 API key 填入相应的字段。之后，你可以在计算机的命令行中使用该命令运行直接请求测试。
 
-```Bash
+```bash
 curl --request POST \
   --url https://api.siliconflow.com/v1/images/generations \
-  --header 'Authorization: Bearer sk-defrgqrgrganpncxxibfyzfocgafga' \
+  --header 'Authorization: Bearer <your_api_key>' \
   --header 'Content-Type: application/json' \
   --data '{
   "model": "Qwen/Qwen-Image",
@@ -167,11 +377,17 @@ curl --request POST \
 
 ![](images/image35.png)
 
-你可以将下面修改后的代码行发送给 z.ai，并要求它帮你创建一个前端测试演示。很快，你就能实现 SiliconFlow 的基本 API 调用。
+你可以把「API Key + 官方请求示例 + 你的原型需求」发送给 AI IDE，并要求它帮你创建一个前端测试演示或直接改造当前项目。很快，你就能跑通 SiliconFlow 的基本 API 调用。
+
+<!-- TODO: 插入截图：AI IDE 中说明“我要把图像 API 接到原型的哪个按钮/页面” -->
 
 ![](images/image36.png)
 
-## 3.4 将 Recraft API 集成到 z.ai 中
+## 3.5 将 Recraft API 集成到 AI IDE 中
+
+如果你的原型更偏“设计生产”（例如生成品牌风格插画、营销海报、矢量风格素材），Recraft 往往会更顺手。接入方式与上一节完全一致：**拿到 Key + 找到官方示例 + 让 AI IDE 把示例落到你的按钮/页面里**。
+
+<!-- TODO: 插入截图：原型中 Recraft 的使用入口（例如“生成插画/生成海报”） -->
 
 ### 什么是 Recraft
 
@@ -185,35 +401,39 @@ curl --request POST \
 
 ### 如何获取 Recraft API
 
-首先，我们仍然需要找到重要的 API 入口以获取我们的 API key。 https://www.recraft.ai/profile/api
+首先，我们仍然需要找到 API 入口以获取 API Key：<https://www.recraft.ai/profile/api>
 
 由于这里没有提供免费额度，我们需要自己充值 1,000 积分。这个网站支持支付宝和微信支付，所以很容易获得 1,000 积分（注意：不要充值超过必要的金额）。
 
 ![](images/image40.png)
 
-之后，我们仍然遵循通常的方法：去官方文档找到相应的请求示例。
+之后，我们仍然遵循同样的方法：去官方文档找到相应的请求示例：
 
-https://www.recraft.ai/docs/api-reference/getting-started
+- <https://www.recraft.ai/docs/api-reference/getting-started>
+- <https://www.recraft.ai/docs/api-reference/usage>
+- <https://www.recraft.ai/docs/api-reference/guides>
 
-https://www.recraft.ai/docs/api-reference/usage
-
-https://www.recraft.ai/docs/api-reference/guides
-
-在这里，我们可以直接复制整个内容并粘贴到 z.ai。
+在这里，我们可以直接复制官方文档中的请求示例，并粘贴到 AI IDE。
 
 ![](images/image41.png)
 
-注意，在聊天窗口中，输入你的 API key 和文档内容就足够了；z.ai 会自动为你构建前端。
+注意：在聊天窗口中，输入你的 API Key 和文档示例通常就足够了；AI IDE 会自动为你构建前端交互与请求代码。
 
-如果过程中出现错误，你可以直接将错误信息粘贴到聊天窗口，让 z.ai 帮你自动解决。
+<!-- TODO: 插入截图：AI IDE 粘贴 Recraft 示例并生成代码 -->
+
+如果过程中出现错误，你可以直接将错误信息粘贴到聊天窗口，让 AI IDE 帮你自动解决。
 
 ![](images/image42.png)
 
-## 3.5 将 Seedream API 集成到 z.ai 中（针对中国用户）
+## 3.6 将 Seedream API 集成到 AI IDE 中（针对中国用户）
+
+如果你希望使用国内网络更稳定、且效果不错的图像生成服务，可以考虑 Seedream（火山引擎）。思路同样不变：把它当成一个“图片生成 API”，接到你的原型按钮上即可。
+
+<!-- TODO: 插入截图：原型中 Seedream 的使用入口（例如“生成商品主图”） -->
 
 ### 什么是 Seedream 4.0
 
-https://seed.bytedance.com/en/seedream4_0
+模型介绍：<https://seed.bytedance.com/en/seedream4_0>
 
 ![](images/image43.png)
 
@@ -227,9 +447,9 @@ https://seed.bytedance.com/en/seedream4_0
 
 ### 如何获取 Seedream API - 火山引擎 (Volcengine)（针对中国用户）
 
-我们将逐步演示如何将 Seedream API 集成到 z.ai 示例中。
+我们将逐步演示如何将 Seedream API 集成到你的项目中（通过 AI IDE 辅助完成）。
 
-https://www.volcengine.com/experience/ark?launch=seedream
+入口：<https://www.volcengine.com/experience/ark?launch=seedream>
 
 访问页面后，点击登录。
 
@@ -245,7 +465,7 @@ https://www.volcengine.com/experience/ark?launch=seedream
 
 认证成功后，你可以充值 1 元用于测试。
 
-https://console.volcengine.com/finance/fund/recharge
+充值入口：<https://console.volcengine.com/finance/fund/recharge>
 
 ![](images/image50.png)
 
@@ -261,7 +481,9 @@ https://console.volcengine.com/finance/fund/recharge
 
 ![](images/image53.png)
 
-准备好 API key 和调用示例后，你可以直接将它们粘贴到 z.ai 中以生成前端交互演示。
+准备好 API Key 和调用示例后，你可以直接将它们粘贴到 AI IDE 中，让它生成前端交互演示或把能力接入现有原型。
+
+<!-- TODO: 插入截图：AI IDE 粘贴 Seedream 示例并完成接入 -->
 
 重要提示：这里的默认示例相对复杂。记得禁用“添加水印”选项和“流式响应”选项，以确保不生成水印且不会发生请求失败。
 
@@ -271,15 +493,77 @@ https://console.volcengine.com/finance/fund/recharge
 
 ![](images/image55.png)
 
-# 附录：如何找到最好的 AI 模型
+## 4. 📚 作业：给你自己的抖音电商工作台加上 AI 能力
 
-大语言模型（LLM）的发展速度非常快，我们总是需要确保我们使用的是排名靠前的模型之一。通过以下两个网站，我们可以轻松确定哪些文本、视频和图像大模型目前最强大。一般来说，我们将此类网站称为 **“LLM 竞技场”** —— 我们可以并排比较两个模型的输出。你需要选择你更喜欢的响应，这种选择算作一票。获得更多选票的模型被认为具有更好的性能。
+<el-card shadow="hover" style="margin: 20px 0; border-radius: 12px;">
+  <template #header>
+    <div style="font-weight: bold; font-size: 16px;">🚀 挑战任务：让你的工作台“真的在用 AI”</div>
+  </template>
+
+  <p>
+    请你基于上一节完成的「电商素材工作台」原型，完成一次“从原型到真实调用”的小闭环：
+  </p>
+
+  <ul>
+    <li>
+      <strong>必做 1：接入文字生成</strong>
+      <ul>
+        <li>把一个按钮接入真实的文字 API（例如“生成标题 / 生成卖点 / 一键改写”）</li>
+        <li>点击后要能返回真实生成的文字，并展示在页面上（而不是写死的假数据）</li>
+      </ul>
+    </li>
+    <li>
+      <strong>必做 2：接入图片生成</strong>
+      <ul>
+        <li>把一个按钮接入真实的生图 API（例如“生成主图 / 生成海报 / 生成配图”）</li>
+        <li>点击后要能返回真实生成的图片，并展示在页面上（而不是占位图/本地假图）</li>
+      </ul>
+    </li>
+    <li>
+      <strong>必做 3：补齐基础体验</strong>
+      <ul>
+        <li>至少包含“生成中”的提示</li>
+        <li>失败时能给出提示（例如密钥无效、额度不足、网络失败）</li>
+      </ul>
+    </li>
+    <li>
+      <strong>自检清单</strong>
+      <ul>
+        <li>我能在页面上清楚地看到“生成按钮”和“生成结果”</li>
+        <li>点击后不是写死的假数据，而是每次可能都不一样的真实结果</li>
+        <li>报错时我能看懂原因，并知道下一步怎么处理（把报错复制给 AI IDE）</li>
+      </ul>
+    </li>
+    <li>
+      <strong>成果分享（可选）</strong>
+      <ul>
+        <li>截图你的页面（文字结果 + 图片结果）分享给同学/朋友</li>
+      </ul>
+    </li>
+  </ul>
+</el-card>
+
+## 下一步
+
+当你把“生成文字”和“生成图片”都接入成功后，你的工作台就已经具备了最核心的 AI 能力雏形：**点击按钮 → 发请求 → 拿结果 → 展示出来**。
+
+接下来，你可以在这个内容生产工作台的基础上，继续扩展更多 AI 能力组合，例如：
+
+- **文字生成文字**：一键生成多版标题/卖点、自动改写、批量生成不同风格文案
+- **图片生成文字**：上传竞品/爆款截图，让 AI 自动总结卖点、提取关键信息、生成上新文案
+- **文字生成图片**：根据商品描述自动生成配图草稿（主图/海报/详情页配图）
+
+## 5. 附录：如何找到“当前更强”的 AI 模型
+
+文字模型（也常被叫作“大语言模型”）的发展速度非常快，我们总是需要确保我们用的是表现更好的模型之一。通过以下两个网站，你可以很方便地看到“现在大家常用、评价也更好的模型”。
+
+一般来说，这类网站可以理解为 **“模型竞技场”**：它会把两个模型的输出放在一起，你投票选你更喜欢的那个。票数高的模型，通常意味着更多人觉得它“更好用”。
 
 此外，你偶尔可能会在这些大模型竞技场中看到神秘的匿名模型。通常，这些是来自 OpenAI 或 Google 等公司的内部测试模型。你可能有机会意外体验到最先进模型的能力！
 
-### LMArena
+### 5.1 LMArena
 
-网站：https://lmarena.ai/
+网站：<https://lmarena.ai/>
 
 简介：LMArena 最初由加州大学伯克利分校大模型系统组织（LMSYS）作为一个学术副项目推出，现已发展成为一家公司。它是一个开源的众包 AI 基准测试平台。
 
@@ -287,13 +571,13 @@ https://console.volcengine.com/finance/fund/recharge
 
 它使用 Elo 评分系统，可以更真实地反映用户对模型回答质量的评价。根据用户投票数据，它编制了一个排行榜，涵盖七个类别，包括文本/语言能力、Web 开发和视觉/图像理解。
 
-截至 2025 年 4 月，它已记录了超过 300 万次比较，并评估了 400 多个模型，成为比较和评估 AI 模型性能的流行方法。
+截至 2025 年 4 月（撰写时），它已记录了超过 300 万次比较，并评估了 400 多个模型，是非常流行的众包对比平台。
 
 ![](images/image.png)
 
-### Artificial Analysis
+### 5.2 Artificial Analysis
 
-网站：[https://artificialanalysis.ai](https://artificialanalysis.ai/)
+网站：<https://artificialanalysis.ai/>
 
 Artificial Analysis 是领先的独立 AI 基准测试和分析平台。它专注于对 AI 模型和 API 提供商进行独立分析。该网站提供详细的数据和图表，可以帮助开发者、用户、研究人员和其他用户做出明智的选择。
 
@@ -301,4 +585,4 @@ Artificial Analysis 是领先的独立 AI 基准测试和分析平台。它专
 
 其功能包括模型比较、质量评估、价格分析、性能测试和上下文窗口分析。它还提供了详细的用户指南和常见问题解答，涵盖各种类型模型的评估，如大语言模型、文本到图像模型和语音到文本模型。此外，它还提供了一个专注于模型基准的免费 API 和一个具有更全面数据的商业 API。
 
-![](images/index-2026-01-19-23-36-57.png)
+![](images/index-2026-01-19-23-36-57.png)