feat(infographic-markdown): add new plugin for JS render to Markdown
- 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
This commit is contained in:
Jeff fu
170
plugins/actions/js-render-poc/README.md
Normal file
170
plugins/actions/js-render-poc/README.md
Normal file
@@ -0,0 +1,170 @@
|
||||
# Infographic to Markdown
|
||||
|
||||
> **Version:** 1.0.0
|
||||
|
||||
AI-powered infographic generator that renders SVG on the frontend and embeds it directly into Markdown as a Data URL image.
|
||||
|
||||
## Overview
|
||||
|
||||
This plugin combines the power of AI text analysis with AntV Infographic visualization to create beautiful infographics that are embedded directly into chat messages as Markdown images.
|
||||
|
||||
### How It Works
|
||||
|
||||
```
|
||||
┌─────────────────────────────────────────────────────────────┐
|
||||
│ Open WebUI Plugin │
|
||||
├─────────────────────────────────────────────────────────────┤
|
||||
│ 1. Python Action │
|
||||
│ ├── Receive message content │
|
||||
│ ├── Call LLM to generate Infographic syntax │
|
||||
│ └── Send __event_call__ to execute frontend JS │
|
||||
├─────────────────────────────────────────────────────────────┤
|
||||
│ 2. Browser JS (via __event_call__) │
|
||||
│ ├── Dynamically load AntV Infographic library │
|
||||
│ ├── Render SVG offscreen │
|
||||
│ ├── Export to Data URL via toDataURL() │
|
||||
│ └── Update message content via REST API │
|
||||
├─────────────────────────────────────────────────────────────┤
|
||||
│ 3. Markdown Rendering │
|
||||
│ └── Display  │
|
||||
└─────────────────────────────────────────────────────────────┘
|
||||
```
|
||||
|
||||
## Features
|
||||
|
||||
- 🤖 **AI-Powered**: Automatically analyzes text and selects the best infographic template
|
||||
- 📊 **Multiple Templates**: Supports 18+ infographic templates (lists, charts, comparisons, etc.)
|
||||
- 🖼️ **Self-Contained**: SVG/PNG embedded as Data URL, no external dependencies
|
||||
- 📝 **Markdown Native**: Results are pure Markdown images, compatible everywhere
|
||||
- 🔄 **API Writeback**: Updates message content via REST API for persistence
|
||||
|
||||
## Plugins in This Directory
|
||||
|
||||
### 1. `infographic_markdown.py` - Main Plugin ⭐
|
||||
- **Purpose**: Production use
|
||||
- **Features**: Full AI + AntV Infographic + Data URL embedding
|
||||
|
||||
### 2. `js_render_poc.py` - Proof of Concept
|
||||
- **Purpose**: Learning and testing
|
||||
- **Features**: Simple SVG creation demo, `__event_call__` pattern
|
||||
|
||||
## Configuration (Valves)
|
||||
|
||||
| Parameter | Type | Default | Description |
|
||||
|-----------|------|---------|-------------|
|
||||
| `SHOW_STATUS` | bool | `true` | Show operation status updates |
|
||||
| `MODEL_ID` | string | `""` | LLM model ID (empty = use current model) |
|
||||
| `MIN_TEXT_LENGTH` | int | `50` | Minimum text length required |
|
||||
| `MESSAGE_COUNT` | int | `1` | Number of recent messages to use |
|
||||
| `SVG_WIDTH` | int | `800` | Width of generated SVG (pixels) |
|
||||
| `EXPORT_FORMAT` | string | `"svg"` | Export format: `svg` or `png` |
|
||||
|
||||
## Supported Templates
|
||||
|
||||
| Category | Template | Description |
|
||||
|----------|----------|-------------|
|
||||
| List | `list-grid` | Grid cards |
|
||||
| List | `list-vertical` | Vertical list |
|
||||
| Tree | `tree-vertical` | Vertical tree |
|
||||
| Tree | `tree-horizontal` | Horizontal tree |
|
||||
| Mind Map | `mindmap` | Mind map |
|
||||
| Process | `sequence-roadmap` | Roadmap |
|
||||
| Process | `sequence-zigzag` | Zigzag process |
|
||||
| Relation | `relation-sankey` | Sankey diagram |
|
||||
| Relation | `relation-circle` | Circular relation |
|
||||
| Compare | `compare-binary` | Binary comparison |
|
||||
| Analysis | `compare-swot` | SWOT analysis |
|
||||
| Quadrant | `quadrant-quarter` | Quadrant chart |
|
||||
| Chart | `chart-bar` | Bar chart |
|
||||
| Chart | `chart-column` | Column chart |
|
||||
| Chart | `chart-line` | Line chart |
|
||||
| Chart | `chart-pie` | Pie chart |
|
||||
| Chart | `chart-doughnut` | Doughnut chart |
|
||||
| Chart | `chart-area` | Area chart |
|
||||
|
||||
## Syntax Examples
|
||||
|
||||
### Grid List
|
||||
```infographic
|
||||
infographic list-grid
|
||||
data
|
||||
title Project Overview
|
||||
items
|
||||
- label Module A
|
||||
desc Description of module A
|
||||
- label Module B
|
||||
desc Description of module B
|
||||
```
|
||||
|
||||
### Binary Comparison
|
||||
```infographic
|
||||
infographic compare-binary
|
||||
data
|
||||
title Pros vs Cons
|
||||
items
|
||||
- label Pros
|
||||
children
|
||||
- label Strong R&D
|
||||
desc Technology leadership
|
||||
- label Cons
|
||||
children
|
||||
- label Weak brand
|
||||
desc Insufficient marketing
|
||||
```
|
||||
|
||||
### Bar Chart
|
||||
```infographic
|
||||
infographic chart-bar
|
||||
data
|
||||
title Quarterly Revenue
|
||||
items
|
||||
- label Q1
|
||||
value 120
|
||||
- label Q2
|
||||
value 150
|
||||
```
|
||||
|
||||
## Technical Details
|
||||
|
||||
### Data URL Embedding
|
||||
```javascript
|
||||
// SVG to Base64 Data URL
|
||||
const svgData = new XMLSerializer().serializeToString(svg);
|
||||
const base64 = btoa(unescape(encodeURIComponent(svgData)));
|
||||
const dataUri = "data:image/svg+xml;base64," + base64;
|
||||
|
||||
// Markdown image syntax
|
||||
const markdownImage = ``;
|
||||
```
|
||||
|
||||
### AntV toDataURL API
|
||||
```javascript
|
||||
// Export as SVG (recommended, supports embedded resources)
|
||||
const svgUrl = await instance.toDataURL({
|
||||
type: 'svg',
|
||||
embedResources: true
|
||||
});
|
||||
|
||||
// Export as PNG (more compatible but larger)
|
||||
const pngUrl = await instance.toDataURL({
|
||||
type: 'png',
|
||||
dpr: 2
|
||||
});
|
||||
```
|
||||
|
||||
## Notes
|
||||
|
||||
1. **Browser Compatibility**: Requires modern browsers with ES6+ and Fetch API support
|
||||
2. **Network Dependency**: First use requires loading AntV library from CDN
|
||||
3. **Data URL Size**: Base64 encoding increases size by ~33%
|
||||
4. **Chinese Fonts**: SVG export embeds fonts for correct display
|
||||
|
||||
## Related Resources
|
||||
|
||||
- [AntV Infographic Documentation](https://infographic.antv.vision/)
|
||||
- [Infographic API Reference](https://infographic.antv.vision/reference/infographic-api)
|
||||
- [Infographic Syntax Guide](https://infographic.antv.vision/learn/infographic-syntax)
|
||||
|
||||
## License
|
||||
|
||||
MIT License
|
||||
Reference in New Issue
Block a user