6de0d6fbe4
- Add infographic_markdown.py (English) and infographic_markdown_cn.py (Chinese) - AI-powered infographic generator using AntV library - Renders SVG on frontend and embeds as Markdown Data URL image - Supports 18+ infographic templates (lists, charts, comparisons, etc.) Docs: - Add plugin README.md and README_CN.md - Add docs detail pages (infographic-markdown.md) - Update docs index pages with new plugin - Add 'JS Render to Markdown' pattern to plugin development guides - Update copilot-instructions.md with new advanced development pattern Version: 1.0.0
175 lines
6.2 KiB
Markdown
175 lines
6.2 KiB
Markdown
# 信息图转 Markdown
|
||
|
||
> **版本:** 1.0.0
|
||
|
||
AI 驱动的信息图生成器，在前端渲染 SVG 并以 Data URL 图片格式直接嵌入到 Markdown 中。
|
||
|
||
## 概述
|
||
|
||
这个插件结合了 AI 文本分析能力和 AntV Infographic 可视化引擎，生成精美的信息图并以 Markdown 图片格式直接嵌入到聊天消息中。
|
||
|
||
### 工作原理
|
||
|
||
```
|
||
┌─────────────────────────────────────────────────────────────┐
|
||
│ Open WebUI 插件 │
|
||
├─────────────────────────────────────────────────────────────┤
|
||
│ 1. Python Action │
|
||
│ ├── 接收消息内容 │
|
||
│ ├── 调用 LLM 生成 Infographic 语法 │
|
||
│ └── 发送 __event_call__ 执行前端 JS │
|
||
├─────────────────────────────────────────────────────────────┤
|
||
│ 2. 浏览器 JS (通过 __event_call__) │
|
||
│ ├── 动态加载 AntV Infographic 库 │
|
||
│ ├── 离屏渲染 SVG │
|
||
│ ├── 使用 toDataURL() 导出 Data URL │
|
||
│ └── 通过 REST API 更新消息内容 │
|
||
├─────────────────────────────────────────────────────────────┤
|
||
│ 3. Markdown 渲染 │
|
||
│ └── 显示  │
|
||
└─────────────────────────────────────────────────────────────┘
|
||
```
|
||
|
||
## 功能特点
|
||
|
||
- 🤖 **AI 驱动**: 自动分析文本并选择最佳的信息图模板
|
||
- 📊 **多种模板**: 支持 18+ 种信息图模板（列表、图表、对比等）
|
||
- 🖼️ **自包含**: SVG/PNG 以 Data URL 嵌入，无外部依赖
|
||
- 📝 **Markdown 原生**: 结果是纯 Markdown 图片，兼容任何平台
|
||
- 🔄 **API 回写**: 通过 REST API 更新消息内容实现持久化
|
||
|
||
## 目录中的插件
|
||
|
||
### 1. `infographic_markdown.py` - 主插件 ⭐
|
||
- **用途**: 生产使用
|
||
- **功能**: 完整的 AI + AntV Infographic + Data URL 嵌入
|
||
|
||
### 2. `infographic_markdown_cn.py` - 主插件（中文版）
|
||
- **用途**: 生产使用
|
||
- **功能**: 与英文版相同，界面文字为中文
|
||
|
||
### 3. `js_render_poc.py` - 概念验证
|
||
- **用途**: 学习和测试
|
||
- **功能**: 简单的 SVG 创建演示，`__event_call__` 模式
|
||
|
||
## 配置选项 (Valves)
|
||
|
||
| 参数 | 类型 | 默认值 | 描述 |
|
||
|------|------|--------|------|
|
||
| `SHOW_STATUS` | bool | `true` | 是否显示操作状态 |
|
||
| `MODEL_ID` | string | `""` | LLM 模型 ID（空则使用当前模型） |
|
||
| `MIN_TEXT_LENGTH` | int | `50` | 最小文本长度要求 |
|
||
| `MESSAGE_COUNT` | int | `1` | 用于生成的最近消息数量 |
|
||
| `SVG_WIDTH` | int | `800` | 生成的 SVG 宽度（像素） |
|
||
| `EXPORT_FORMAT` | string | `"svg"` | 导出格式：`svg` 或 `png` |
|
||
|
||
## 支持的模板
|
||
|
||
| 类别 | 模板名称 | 描述 |
|
||
|------|----------|------|
|
||
| 列表 | `list-grid` | 网格卡片 |
|
||
| 列表 | `list-vertical` | 垂直列表 |
|
||
| 树形 | `tree-vertical` | 垂直树 |
|
||
| 树形 | `tree-horizontal` | 水平树 |
|
||
| 思维导图 | `mindmap` | 思维导图 |
|
||
| 流程 | `sequence-roadmap` | 路线图 |
|
||
| 流程 | `sequence-zigzag` | 折线流程 |
|
||
| 关系 | `relation-sankey` | 桑基图 |
|
||
| 关系 | `relation-circle` | 圆形关系 |
|
||
| 对比 | `compare-binary` | 二元对比 |
|
||
| 分析 | `compare-swot` | SWOT 分析 |
|
||
| 象限 | `quadrant-quarter` | 四象限图 |
|
||
| 图表 | `chart-bar` | 条形图 |
|
||
| 图表 | `chart-column` | 柱状图 |
|
||
| 图表 | `chart-line` | 折线图 |
|
||
| 图表 | `chart-pie` | 饼图 |
|
||
| 图表 | `chart-doughnut` | 环形图 |
|
||
| 图表 | `chart-area` | 面积图 |
|
||
|
||
## 语法示例
|
||
|
||
### 网格列表
|
||
```infographic
|
||
infographic list-grid
|
||
data
|
||
title 项目概览
|
||
items
|
||
- label 模块一
|
||
desc 这是第一个模块的描述
|
||
- label 模块二
|
||
desc 这是第二个模块的描述
|
||
```
|
||
|
||
### 二元对比
|
||
```infographic
|
||
infographic compare-binary
|
||
data
|
||
title 优劣对比
|
||
items
|
||
- label 优势
|
||
children
|
||
- label 研发能力强
|
||
desc 技术领先
|
||
- label 劣势
|
||
children
|
||
- label 品牌曝光不足
|
||
desc 营销力度不够
|
||
```
|
||
|
||
### 条形图
|
||
```infographic
|
||
infographic chart-bar
|
||
data
|
||
title 季度收入
|
||
items
|
||
- label Q1
|
||
value 120
|
||
- label Q2
|
||
value 150
|
||
```
|
||
|
||
## 技术细节
|
||
|
||
### Data URL 嵌入
|
||
```javascript
|
||
// SVG 转 Base64 Data URL
|
||
const svgData = new XMLSerializer().serializeToString(svg);
|
||
const base64 = btoa(unescape(encodeURIComponent(svgData)));
|
||
const dataUri = "data:image/svg+xml;base64," + base64;
|
||
|
||
// Markdown 图片语法
|
||
const markdownImage = ``;
|
||
```
|
||
|
||
### AntV toDataURL API
|
||
```javascript
|
||
// 导出 SVG（推荐，支持嵌入资源）
|
||
const svgUrl = await instance.toDataURL({
|
||
type: 'svg',
|
||
embedResources: true
|
||
});
|
||
|
||
// 导出 PNG（更兼容但体积更大）
|
||
const pngUrl = await instance.toDataURL({
|
||
type: 'png',
|
||
dpr: 2
|
||
});
|
||
```
|
||
|
||
## 注意事项
|
||
|
||
1. **浏览器兼容性**: 需要现代浏览器支持 ES6+ 和 Fetch API
|
||
2. **网络依赖**: 首次使用需要从 CDN 加载 AntV Infographic 库
|
||
3. **Data URL 大小**: Base64 编码会增加约 33% 的体积
|
||
4. **中文字体**: SVG 导出时会嵌入字体以确保正确显示
|
||
|
||
## 相关资源
|
||
|
||
- [AntV Infographic 官方文档](https://infographic.antv.vision/)
|
||
- [Infographic API 参考](https://infographic.antv.vision/reference/infographic-api)
|
||
- [Infographic 语法规范](https://infographic.antv.vision/learn/infographic-syntax)
|
||
|
||
## 许可证
|
||
|
||
MIT License
|