# 图片插入系统介绍

## 什么是图片插入系统

图片插入系统让角色卡能够在 AI 回复中展示预存的图片。AI 不生成图片，而是从预设的图片目录中选择路径编号，前端通过正则替换将路径渲染为 `<img>` 标签。

## 工作原理

```
远端清单 (manifest.json)
  ↓ EJS 代码在发送提示词前 fetch 清单
世界书（图片目录 + 插图规则）
  ↓ AI 读取目录，知道有哪些图片可用
AI 输出路径标签（如 [img_sfw:SFW/人物微笑/3.jpg]）
  ↓ 正则脚本匹配标签
正则替换为 <img src="BASE_URL + 路径"> 标签
  ↓ 浏览器加载图片
用户看到渲染后的图片
```

## 前置要求

需要安装 **SillyTavern EJS 模板扩展（Prompt Template）**，该扩展允许在世界书中使用 `<% %>` EJS 代码动态加载远端内容。

## 核心组件

### 1. 远端图片清单 (manifest.json)

托管在图片仓库中的 JSON 文件，定义了所有可用的图片分类和数量。角色卡通过 EJS 代码自动 fetch 该文件，实现云更新——修改清单即可更新所有使用该角色卡的图片目录。

**清单格式：**
```json
{
  "sfw": "图片描述:\n - 人物微笑/[1-50].jpg\n - 人物害羞/[1-30].jpg\n - 角色A/微笑/[1-20].jpg",
  "nsfw": "图片描述:\n - 1v1/传教士/[1-50]\n - 1v1/后入/[1-40]"
}
```

- `sfw`：SFW 图片分类路径列表
- `nsfw`（可选）：NSFW 图片分类路径列表，不需要则留空或不提供

### 2. 插图系统世界书条目

单个世界书条目，包含：
- **EJS 代码**：在提示词发送前 fetch 远端 manifest.json
- **SFW/NSFW 图片目录**：从清单动态渲染
- **插图规则**：告诉 AI 用什么格式输出图片标签

EJS 代码会根据清单内容自动决定是否显示 NSFW 部分（清单中 `nsfw` 字段非空时显示）。

### 3. 正则脚本

两个正则脚本负责将 AI 输出的标签替换为可渲染的 HTML：

| 正则 | 匹配 | 效果 |
|------|------|------|
| [图片]正文插图 | `[img_sfw:...]` | 替换为普通 `<img>` 标签 |
| [图片]NSFW模糊 | `[img_nsfw:...]` | 替换为带模糊效果的 `<img>`，点击切换显示 |

### 4. IMAGE_BASE_URL

图片的基础 URL，所有图片路径会拼接到这个 URL 后面。例如：

```
IMAGE_BASE_URL = https://gitgud.io/用户名/仓库名/-/raw/master/
图片路径 = SFW/人物微笑/3.jpg
最终 URL = https://gitgud.io/用户名/仓库名/-/raw/master/SFW/人物微笑/3.jpg
```

支持任意图片托管方式，只要图片能通过 URL 直接访问即可。

## 云更新流程

1. 在图片托管仓库中维护 `manifest.json`
2. 新增/删除图片分类时，只需更新 `manifest.json`
3. 角色卡在每次对话时自动 fetch 最新清单
4. 无需重新编辑或导出角色卡

## 两种插图模式

### 正文插图
AI 在叙事正文中直接插入图片标签：
```
她露出了灿烂的微笑，阳光透过窗帘洒在她的脸上。
[img_sfw:SFW/人物微笑/15.jpg]
"今天天气真好呢。"她转过头来说道。
```

### 结构化数据插图
AI 在特定格式的数据结构中嵌入图片路径（如论坛帖子、聊天消息等），由对应的前端模板解析并渲染。