open-webui/Fu-Jie_openwebui-extensions
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: release markdown_normalizer v1.0.1 with enhanced mermaid support and debug logging

Browse Source
This commit is contained in:
fujie
2026-01-11 23:58:23 +08:00
parent 98f7dff458
commit 863805dc68
12 changed files with 497 additions and 144 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
README.md
View File

@@ -51,6 +51,7 @@ Located in the `plugins/` directory, containing Python-based enhancements:
- **Async Context Compression** (`async-context-compression`): Optimizes token usage via context compression.
- **Context Enhancement** (`context_enhancement_filter`): Enhances chat context.
- **Gemini Manifold Companion** (`gemini_manifold_companion`): Companion filter for Gemini Manifold.
- **Markdown Normalizer** (`markdown_normalizer`): Fixes common Markdown formatting issues in LLM outputs.
#### Pipes

1
README_CN.md
View File

@@ -51,6 +51,7 @@ OpenWebUI 增强功能集合。包含个人开发与收集的插件、提示词
- **Async Context Compression** (`async-context-compression`): 异步上下文压缩，优化 Token 使用。
- **Context Enhancement** (`context_enhancement_filter`): 上下文增强过滤器。
- **Gemini Manifold Companion** (`gemini_manifold_companion`): Gemini Manifold 配套增强。
- **Markdown Normalizer** (`markdown_normalizer`): 修复 LLM 输出中常见的 Markdown 格式问题。
#### Pipes (模型管道)
- **Gemini Manifold** (`gemini_mainfold`): 集成 Gemini 模型的管道。

10
docs/plugins/filters/index.md
View File

@@ -46,6 +46,16 @@ Filters act as middleware in the message pipeline:
[:octicons-arrow-right-24: Documentation](gemini-manifold-companion.md)
- :material-format-paint:{ .lg .middle } **Markdown Normalizer**
---
Fixes common Markdown formatting issues in LLM outputs, including Mermaid syntax, code blocks, and LaTeX formulas.
**Version:** 1.0.1
[:octicons-arrow-right-24: Documentation](markdown_normalizer.md)
</div>
---

10
docs/plugins/filters/index.zh.md
View File

@@ -46,6 +46,16 @@ Filter 充当消息管线中的中间件：
[:octicons-arrow-right-24: 查看文档](gemini-manifold-companion.md)
- :material-format-paint:{ .lg .middle } **Markdown Normalizer**
---
修复 LLM 输出中常见的 Markdown 格式问题，包括 Mermaid 语法、代码块和 LaTeX 公式。
**版本：** 1.0.1
[:octicons-arrow-right-24: 查看文档](markdown_normalizer.zh.md)
</div>
---

46
docs/plugins/filters/markdown_normalizer.md Normal file
View File

@@ -0,0 +1,46 @@
# Markdown Normalizer Filter
A production-grade content normalizer filter for Open WebUI that fixes common Markdown formatting issues in LLM outputs. It ensures that code blocks, LaTeX formulas, Mermaid diagrams, and other Markdown elements are rendered correctly.
## Features
* **Mermaid Syntax Fix**: Automatically fixes common Mermaid syntax errors, such as unquoted node labels (including multi-line labels and citations) and unclosed subgraphs, ensuring diagrams render correctly.
* **Frontend Console Debugging**: Supports printing structured debug logs directly to the browser console (F12) for easier troubleshooting.
* **Code Block Formatting**: Fixes broken code block prefixes, suffixes, and indentation.
* **LaTeX Normalization**: Standardizes LaTeX formula delimiters (`\[` -> `$$`, `\(` -> `$`).
* **Thought Tag Normalization**: Unifies thought tags (`<think>`, `<thinking>` -> `<thought>`).
* **Escape Character Fix**: Cleans up excessive escape characters (`\\n`, `\\t`).
* **List Formatting**: Ensures proper newlines in list items.
* **Heading Fix**: Adds missing spaces in headings (`#Heading` -> `# Heading`).
* **Table Fix**: Adds missing closing pipes in tables.
* **XML Cleanup**: Removes leftover XML artifacts.
## Usage
1. Install the plugin in Open WebUI.
2. Enable the filter globally or for specific models.
3. Configure the enabled fixes in the **Valves** settings.
4. (Optional) **Show Debug Log** is enabled by default in Valves. This prints structured logs to the browser console (F12).
> [!WARNING]
> As this is an initial version, some "negative fixes" might occur (e.g., breaking valid Markdown). If you encounter issues, please check the console logs, copy the "Original" vs "Normalized" content, and submit an issue.
## Configuration (Valves)
* `priority`: Filter priority (default: 50).
* `enable_escape_fix`: Fix excessive escape characters.
* `enable_thought_tag_fix`: Normalize thought tags.
* `enable_code_block_fix`: Fix code block formatting.
* `enable_latex_fix`: Normalize LaTeX formulas.
* `enable_list_fix`: Fix list item newlines (Experimental).
* `enable_unclosed_block_fix`: Auto-close unclosed code blocks.
* `enable_fullwidth_symbol_fix`: Fix full-width symbols in code blocks.
* `enable_mermaid_fix`: Fix Mermaid syntax errors.
* `enable_heading_fix`: Fix missing space in headings.
* `enable_table_fix`: Fix missing closing pipe in tables.
* `enable_xml_tag_cleanup`: Cleanup leftover XML tags.
* `show_status`: Show status notification when fixes are applied.
* `show_debug_log`: Print debug logs to browser console.
## License
MIT

46
docs/plugins/filters/markdown_normalizer.zh.md Normal file
View File

@@ -0,0 +1,46 @@
# Markdown 格式化过滤器 (Markdown Normalizer)
这是一个用于 Open WebUI 的生产级内容格式化过滤器，旨在修复 LLM 输出中常见的 Markdown 格式问题。它能确保代码块、LaTeX 公式、Mermaid 图表和其他 Markdown 元素被正确渲染。
## 功能特性
* **Mermaid 语法修复**: 自动修复常见的 Mermaid 语法错误，如未加引号的节点标签（支持多行标签和引用标记）和未闭合的子图 (Subgraph)，确保图表能正确渲染。
* **前端控制台调试**: 支持将结构化的调试日志直接打印到浏览器控制台 (F12)，方便排查问题。
* **代码块格式化**: 修复破损的代码块前缀、后缀和缩进问题。
* **LaTeX 规范化**: 标准化 LaTeX 公式定界符 (`\[` -> `$$`, `\(` -> `$`)。
* **思维标签规范化**: 统一思维链标签 (`<think>`, `<thinking>` -> `<thought>`)。
* **转义字符修复**: 清理过度的转义字符 (`\\n`, `\\t`)。
* **列表格式化**: 确保列表项有正确的换行。
* **标题修复**: 修复标题中缺失的空格 (`#标题` -> `# 标题`)。
* **表格修复**: 修复表格中缺失的闭合管道符。
* **XML 清理**: 移除残留的 XML 标签。
## 使用方法
1. 在 Open WebUI 中安装此插件。
2. 全局启用或为特定模型启用此过滤器。
3. 在 **Valves** 设置中配置需要启用的修复项。
4. (可选) **显示调试日志 (Show Debug Log)** 在 Valves 中默认开启。这会将结构化的日志打印到浏览器控制台 (F12)。
> [!WARNING]
> 由于这是初版，可能会出现“负向修复”的情况（例如破坏了原本正确的格式）。如果您遇到问题，请务必查看控制台日志，复制“原始 (Original)”与“规范化 (Normalized)”的内容对比，并提交 Issue 反馈。
## 配置项 (Valves)
* `priority`: 过滤器优先级 (默认: 50)。
* `enable_escape_fix`: 修复过度的转义字符。
* `enable_thought_tag_fix`: 规范化思维标签。
* `enable_code_block_fix`: 修复代码块格式。
* `enable_latex_fix`: 规范化 LaTeX 公式。
* `enable_list_fix`: 修复列表项换行 (实验性)。
* `enable_unclosed_block_fix`: 自动闭合未闭合的代码块。
* `enable_fullwidth_symbol_fix`: 修复代码块中的全角符号。
* `enable_mermaid_fix`: 修复 Mermaid 语法错误。
* `enable_heading_fix`: 修复标题中缺失的空格。
* `enable_table_fix`: 修复表格中缺失的闭合管道符。
* `enable_xml_tag_cleanup`: 清理残留的 XML 标签。
* `show_status`: 应用修复时显示状态通知。
* `show_debug_log`: 在浏览器控制台打印调试日志。
## 许可证
MIT

235
plugins/actions/infographic/infographic.py
View File

@@ -1,9 +1,9 @@
"""
title: 📊 Smart Infographic (AntV)
author: jeff
author: Fu-Jie
author_url: https://github.com/Fu-Jie/awesome-openwebui
icon_url: data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9ImN1cnJlbnRDb2xvciIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiPgogIDxsaW5lIHgxPSIxMiIgeTE9IjIwIiB4Mj0iMTIiIHkyPSIxMCIgLz4KICA8bGluZSB4MT0iMTgiIHkxPSIyMCIgeDI9IjE4IiB5Mj0iNCIgLz4KICA8bGluZSB4MT0iNiIgeTE9IjIwIiB4Mj0iNiIgeTI9IjE2IiAvPgo8L3N2Zz4=
version: 1.4.1
version: 1.4.9
openwebui_id: ad6f0c7f-c571-4dea-821d-8e71697274cf
description: AI-powered infographic generator based on AntV Infographic. Supports professional templates, auto-icon matching, and SVG/PNG downloads.
"""
@@ -47,24 +47,63 @@ Infographic syntax is a Mermaid-like declarative syntax for describing infograph
### Template Library & Selection Guide
Choose the most appropriate template based on the content structure:
Choose the most appropriate template based on content structure.
#### 1. List & Hierarchy
- **List**: `list-grid` (Grid Cards), `list-vertical` (Vertical List)
- **Tree**: `tree-vertical` (Vertical Tree), `tree-horizontal` (Horizontal Tree)
- **Mindmap**: `mindmap` (Mind Map)
**Template Selection Guidelines (Official):**
- Strict sequential order (processes/steps/trends) → `sequence-*` series
- Timeline → `sequence-timeline-simple`
- Roadmap → `sequence-roadmap-vertical-simple`
- Zigzag steps → `sequence-horizontal-zigzag-underline-text`
- Snake steps → `sequence-snake-steps-compact-card`
- Listing viewpoints → `list-row-horizontal-icon-arrow` or `list-column-simple-vertical-arrow`
- Comparative analysis (A vs B) → `compare-binary-horizontal-underline-text-vs`
- SWOT analysis → `compare-swot`
- Hierarchical structure (tree) → `hierarchy-tree-tech-style-capsule-item`
- Data charts → `chart-*` series
- Quadrant analysis → `quadrant-quarter-simple-card`
- Grid lists (bullet points) → `list-grid-candy-card-lite`
- Relationship display → `relation-circle-icon-badge`
#### 2. Sequence & Relationship
- **Process**: `sequence-roadmap` (Roadmap), `sequence-zigzag` (Zigzag Process), `sequence-horizontal` (Horizontal Process)
- **Relationship**: `relation-sankey` (Sankey Diagram), `relation-circle` (Circular Relationship)
**Available Templates:**
#### 3. Comparison & Analysis
- **Comparison**: `compare-binary` (Binary Comparison), `list-grid` (Multi-item Grid Comparison)
- **Analysis**: `compare-swot` (SWOT Analysis), `quadrant-quarter` (Quadrant Chart)
*Sequence (时序/流程):*
`sequence-timeline-simple`, `sequence-roadmap-vertical-simple`, `sequence-horizontal-zigzag-underline-text`,
`sequence-snake-steps-compact-card`, `sequence-zigzag-steps-underline-text`, `sequence-circular-simple`,
`sequence-pyramid-simple`, `sequence-ascending-steps`
#### 4. Charts & Data
- **Statistics**: `statistic-card` (Statistic Cards)
- **Charts**: `chart-bar` (Bar Chart), `chart-column` (Column Chart), `chart-line` (Line Chart), `chart-pie` (Pie Chart), `chart-doughnut` (Doughnut Chart), `chart-area` (Area Chart)
*List (列表):*
`list-grid-candy-card-lite`, `list-grid-badge-card`, `list-row-horizontal-icon-arrow`,
`list-column-simple-vertical-arrow`, `list-column-done-list`
*Compare (对比):*
`compare-binary-horizontal-underline-text-vs`, `compare-binary-horizontal-simple-fold`,
`compare-hierarchy-left-right-circle-node-pill-badge`, `compare-swot`
*Hierarchy (层级):*
`hierarchy-tree-tech-style-capsule-item`, `hierarchy-tree-curved-line-rounded-rect-node`, `hierarchy-structure`
*Chart (图表):*
`chart-column-simple`, `chart-bar-plain-text`, `chart-line-plain-text`,
`chart-pie-plain-text`, `chart-pie-donut-plain-text`, `chart-wordcloud`
*Other:*
`quadrant-quarter-simple-card`, `relation-circle-icon-badge`
**Text Capacity by Template Type:**
- HIGH capacity (long descriptions OK): `list-column-*`, `compare-binary-*`, `sequence-timeline-*`
- MEDIUM capacity: `list-row-*`, `sequence-roadmap-*`
- LOW capacity (short text only): `list-grid-*`, `hierarchy-*`, `sequence-steps`
### Icon and Illustration Resources
**Icons (Iconify):**
- Format: `<collection>/<icon-name>`, e.g., `mdi/rocket-launch`
- Popular: `mdi/*` (Material Design), `fa/*` (Font Awesome), `bi/*` (Bootstrap)
- Examples: `mdi/code-tags`, `mdi/chart-line`, `mdi/account-group`, `mdi/cloud`
**Illustrations (unDraw):**
- Format: filename without .svg, e.g., `coding`, `team-work`
- Use `illus` field instead of `icon`
### Data Structure Examples
@@ -211,6 +250,12 @@ data
- `children`: Nested items (for trees, SWOT, etc.)
- `illus`: Illustration icon (specific to some templates like Quadrant)
### Content Refinement Principles
1. **Brevity is King**: Infographics are visual. Keep text to a minimum.
2. **Title Limit**: Keep `label` (item titles) under 15 characters (approx. 10 Chinese characters).
3. **Description Limit**: Keep `desc` (item descriptions) under 40 characters (approx. 20 Chinese characters / 2 lines).
4. **Impact**: Use strong verbs and nouns. Avoid filler words.
## Output Requirements
1. **Language**: Output content in the user's language.
2. **Format**: Wrap output in ```infographic ... ```.
@@ -233,9 +278,18 @@ User Language: {user_language}
Please select the most appropriate infographic template based on text characteristics and output standard infographic syntax. Pay attention to correct indentation format (two spaces).
**Important Note:**
- If using `list-grid` format, ensure each card's `desc` description is limited to **maximum 30 Chinese characters** (or **approximately 60 English characters**) to maintain visual consistency with all descriptions fitting in 2 lines.
- Descriptions should be concise and highlight key points.
**Visual Optimization Guide (MUST FOLLOW):**
- **Point-based Generation:** Infographics are not articles. Extract KEYWORDS ONLY, avoid complete sentences.
- **Main Title (`data.title`):** **MUST** be ≤ **15 Chinese characters** (or ≤30 English characters). Trim version numbers or details if needed.
- **Subtitle (`data.desc`):** **MUST** be ≤ **20 Chinese characters** (or ≤40 English characters).
- **Card Title (`label`):** **MUST** be ≤ **6 Chinese characters** (or ≤12 English characters). Use 2-4 keywords only.
- **Card Description (`desc`):** **MUST** be ≤ **12 Chinese characters** (or ≤24 English characters). Use short phrases.
⚠️ **CRITICAL**: If the original text is too long, you MUST rephrase and shorten it. Do NOT simply truncate with "...".
Examples:
- ❌ "多步任务与工具协作能力" → ✅ "多步任务协作"
- ❌ "Open WebUI v0.7.x 重大版本更新" → ✅ "v0.7 核心更新"
- ❌ "自动查找历史聊天记录" → ✅ "历史检索"
"""
# =================================================================
@@ -340,8 +394,9 @@ CSS_TEMPLATE_INFOGRAPHIC = """
.infographic-container-wrapper .infographic-render-container {
border-radius: 8px;
padding: 16px;
min-height: 600px;
background: #fff;
overflow: visible; /* Ensure content is visible */
overflow: visible;
transition: height 0.3s ease;
}
.infographic-render-container svg text {
@@ -349,35 +404,59 @@ CSS_TEMPLATE_INFOGRAPHIC = """
}
.infographic-render-container svg foreignObject {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif !important;
line-height: 1.4 !important;
line-height: 1.3 !important;
overflow: visible !important;
}
/* Main title styles */
.infographic-render-container svg foreignObject[data-element-type="title"] > * {
font-size: 1.5em !important;
font-weight: bold !important;
line-height: 1.4 !important;
white-space: nowrap !important;
font-size: 1.3em !important;
font-weight: 800 !important;
line-height: 1.3 !important;
white-space: normal !important;
word-break: break-word !important;
display: -webkit-box !important;
-webkit-line-clamp: 2 !important;
-webkit-box-orient: vertical !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
text-align: center !important;
}
/* Page subtitle and card title styles */
.infographic-render-container svg foreignObject[data-element-type="desc"] > *,
.infographic-render-container svg foreignObject[data-element-type="item-label"] > * {
font-size: 0.6em !important;
line-height: 1.4 !important;
white-space: nowrap !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
}
/* Card title with extra bottom spacing */
.infographic-render-container svg foreignObject[data-element-type="item-label"] > * {
padding-bottom: 8px !important;
/* Page subtitle styles */
.infographic-render-container svg foreignObject[data-element-type="desc"] > * {
font-size: 0.85em !important;
line-height: 1.3 !important;
white-space: normal !important;
word-break: break-word !important;
overflow: visible !important;
text-align: center !important;
display: block !important;
color: var(--ig-muted-text-color) !important;
}
/* Card description text keeps normal wrapping */
/* Card title styles */
.infographic-render-container svg foreignObject[data-element-type="item-label"] > * {
font-size: 0.9em !important;
font-weight: 600 !important;
line-height: 1.3 !important;
white-space: normal !important;
word-break: break-word !important;
display: -webkit-box !important;
-webkit-line-clamp: 2 !important;
-webkit-box-orient: vertical !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
padding-bottom: 2px !important;
}
/* Card description text */
.infographic-render-container svg foreignObject[data-element-type="item-desc"] > * {
font-size: 0.8em !important;
line-height: 1.4 !important;
white-space: normal !important;
word-break: break-word !important;
display: -webkit-box !important;
-webkit-line-clamp: 2 !important;
-webkit-box-orient: vertical !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
}
.infographic-container-wrapper .download-area {
text-align: center;
@@ -533,37 +612,41 @@ SCRIPT_TEMPLATE_INFOGRAPHIC = """
}}
}}
// 2. Template Mapping Configuration
// 2. Template Mapping Configuration (Official AntV Structure IDs)
const TEMPLATE_MAPPING = {{
// List & Hierarchy
// List & Hierarchy - map short names to full template names
'list-grid': 'list-grid-compact-card',
'list-column': 'list-column-simple-vertical-arrow',
'list-row': 'list-row-simple-horizontal-arrow',
'hierarchy-tree': 'hierarchy-tree-tech-style-capsule-item',
// Sequence & Timeline
'sequence-roadmap-vertical': 'sequence-roadmap-vertical-simple',
'sequence-timeline': 'sequence-timeline-simple',
'sequence-steps': 'sequence-steps-simple',
'sequence-horizontal-zigzag': 'sequence-horizontal-zigzag-simple',
// Comparison
'compare-binary-horizontal': 'compare-binary-horizontal-simple-vs',
'compare-hierarchy-row': 'compare-hierarchy-row-simple',
// Charts
'chart-column': 'chart-column-simple',
'quadrant': 'quadrant-quarter-simple-card',
// Legacy mappings for backward compatibility
'list-vertical': 'list-column-simple-vertical-arrow',
'tree-vertical': 'hierarchy-tree-tech-style-capsule-item',
'tree-horizontal': 'hierarchy-tree-lr-tech-style-capsule-item',
'mindmap': 'hierarchy-mindmap-branch-gradient-capsule-item',
// Sequence & Relationship
'sequence-roadmap': 'sequence-roadmap-vertical-simple',
'sequence-zigzag': 'sequence-horizontal-zigzag-simple',
'sequence-horizontal': 'sequence-horizontal-zigzag-simple',
'relation-sankey': 'relation-sankey-simple',
'relation-circle': 'relation-circle-icon-badge',
// Comparison & Analysis
'compare-binary': 'compare-binary-horizontal-simple-vs',
'compare-swot': 'compare-swot',
'quadrant-quarter': 'quadrant-quarter-simple-card',
// Charts & Data
'statistic-card': 'list-grid-compact-card',
'chart-bar': 'chart-bar-plain-text',
'chart-column': 'chart-column-simple',
'chart-line': 'chart-line-plain-text',
'chart-area': 'chart-area-simple',
'chart-pie': 'chart-pie-plain-text',
'chart-doughnut': 'chart-pie-donut-plain-text'
}};
// 3. Apply Mapping Strategy
for (const [key, value] of Object.entries(TEMPLATE_MAPPING)) {{
const regex = new RegExp(`infographic\\\\s+${{key}}(?=\\\\s|$)`, 'i');
@@ -629,10 +712,48 @@ SCRIPT_TEMPLATE_INFOGRAPHIC = """
containerEl.dataset.infographicRendered = 'true';
console.log('[Infographic] Rendering complete');
// Auto-adjust height
// Auto-adjust height and tag elements
setTimeout(() => {
const svg = containerEl.querySelector('svg');
if (svg) {
// 1. Tag elements for CSS styling
const fos = Array.from(svg.querySelectorAll('foreignObject'));
let titleFound = false;
let descFound = false;
fos.forEach((fo) => {
const text = fo.textContent.trim();
if (!text || fo.querySelector('i') || (fo.querySelector('svg') && fo.querySelectorAll('*').length < 5)) {
fo.setAttribute('data-element-type', 'icon');
return;
}
// Dynamically increase height and width to accommodate wrapped text
const currentHeight = parseInt(fo.getAttribute('height') || '0');
if (currentHeight > 0 && currentHeight < 200) {
fo.setAttribute('height', Math.round(currentHeight * 1.8).toString());
}
const currentWidth = parseInt(fo.getAttribute('width') || '0');
if (currentWidth > 0 && currentWidth < 300) {
fo.setAttribute('width', Math.max(Math.round(currentWidth * 1.2), 180).toString());
}
if (!titleFound) {
fo.setAttribute('data-element-type', 'title');
titleFound = true;
} else if (!descFound) {
fo.setAttribute('data-element-type', 'desc');
descFound = true;
} else {
if (fo.querySelector('strong') || fo.style.fontWeight === 'bold' || text.length < 15) {
fo.setAttribute('data-element-type', 'item-label');
} else {
fo.setAttribute('data-element-type', 'item-desc');
}
}
});
// 2. Adjust height
const bbox = svg.getBoundingClientRect();
let contentHeight = bbox.height;
if (svg.viewBox && svg.viewBox.baseVal && svg.viewBox.baseVal.height) {

246
plugins/actions/infographic/infographic_cn.py
View File

@@ -1,9 +1,9 @@
"""
title: 📊 智能信息图 (AntV Infographic)
author: jeff
author: Fu-Jie
author_url: https://github.com/Fu-Jie/awesome-openwebui
icon_url: data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9ImN1cnJlbnRDb2xvciIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiPgogIDxsaW5lIHgxPSIxMiIgeTE9IjIwIiB4Mj0iMTIiIHkyPSIxMCIgLz4KICA8bGluZSB4MT0iMTgiIHkxPSIyMCIgeDI9IjE4IiB5Mj0iNCIgLz4KICA8bGluZSB4MT0iNiIgeTE9IjIwIiB4Mj0iNiIgeTI9IjE2IiAvPgo8L3N2Zz4=
version: 1.4.1
version: 1.4.9
openwebui_id: e04a48ff-23ee-4a41-8ea7-66c19524e7c8
description: 基于 AntV Infographic 的智能信息图生成插件。支持多种专业模板，自动图标匹配，并提供 SVG/PNG 下载功能。
"""
@@ -45,32 +45,61 @@ Infographic syntax is a Mermaid-like declarative syntax for describing infograph
- ❌ Wrong: `children:` `items:` `data:` (with colons)
- ✅ Correct: `children` `items` `data` (without colons)
### Template Library & Selection Guide
### 模板库与选择指南
#### 1. List & Hierarchy (Text-heavy)
- **Linear & Short (Steps/Phases)** -> `list-row-horizontal-icon-arrow`
- **Linear & Long (Rankings/Details)** -> `list-vertical`
- **Grouped / Parallel (Features/Catalog)** -> `list-grid`
- **Hierarchical (Org Chart/Taxonomy)** -> `tree-vertical` or `tree-horizontal`
- **Central Idea (Brainstorming)** -> `mindmap`
根据内容结构选择最合适的模板。
#### 2. Sequence & Relationship (Flow-based)
- **Time-based (History/Plan)** -> `sequence-roadmap-vertical-simple`
- **Process Flow (Complex)** -> `sequence-zigzag` or `sequence-horizontal`
- **Resource Flow / Distribution** -> `relation-sankey`
- **Circular Relationship** -> `relation-circle`
**模板选择指南 (官方):**
- 严格时序 (流程/步骤/趋势) → `sequence-*` 系列
- 时间线 → `sequence-timeline-simple`
- 路线图 → `sequence-roadmap-vertical-simple`
- 折线步骤 → `sequence-horizontal-zigzag-underline-text`
- 蛇形步骤 → `sequence-snake-steps-compact-card`
- 列举要点 → `list-row-horizontal-icon-arrow` 或 `list-column-simple-vertical-arrow`
- 对比分析 (A vs B) → `compare-binary-horizontal-underline-text-vs`
- SWOT 分析 → `compare-swot`
- 层级结构 (树状图) → `hierarchy-tree-tech-style-capsule-item`
- 数据图表 → `chart-*` 系列
- 象限分析 → `quadrant-quarter-simple-card`
- 网格列表 → `list-grid-candy-card-lite`
- 关系展示 → `relation-circle-icon-badge`
#### 3. Comparison & Analysis
- **Binary Comparison (A vs B)** -> `compare-binary`
- **SWOT Analysis** -> `compare-swot`
- **Quadrant Analysis (Importance vs Urgency)** -> `quadrant-quarter`
- **Multi-item Grid Comparison** -> `list-grid` (use for comparing multiple items)
**可用模板:**
#### 4. Charts & Data (Metric-heavy)
- **Key Metrics / Data Cards** -> `statistic-card`
- **Distribution / Comparison** -> `chart-bar` or `chart-column`
- **Trend over Time** -> `chart-line` or `chart-area`
- **Proportion / Part-to-Whole** -> `chart-pie` or `chart-doughnut`
*Sequence (时序/流程):*
`sequence-timeline-simple`, `sequence-roadmap-vertical-simple`, `sequence-horizontal-zigzag-underline-text`,
`sequence-snake-steps-compact-card`, `sequence-zigzag-steps-underline-text`, `sequence-circular-simple`
*List (列表):*
`list-grid-candy-card-lite`, `list-grid-badge-card`, `list-row-horizontal-icon-arrow`,
`list-column-simple-vertical-arrow`, `list-column-done-list`
*Compare (对比):*
`compare-binary-horizontal-underline-text-vs`, `compare-swot`
*Hierarchy (层级):*
`hierarchy-tree-tech-style-capsule-item`, `hierarchy-structure`
*Chart (图表):*
`chart-column-simple`, `chart-bar-plain-text`, `chart-pie-plain-text`, `chart-wordcloud`
*Other:*
`quadrant-quarter-simple-card`, `relation-circle-icon-badge`
**按容量分类:**
- 高容量 (长描述): `list-column-*`, `compare-binary-*`, `sequence-timeline-*`
- 中容量: `list-row-*`, `sequence-roadmap-*`
- 低容量 (短文本): `list-grid-*`, `hierarchy-*`
### 图标和插图资源
**图标 (Iconify):**
- 格式: `<集合>/<图标名>`, 如 `mdi/rocket-launch`
- 常用: `mdi/*`, `fa/*`, `bi/*`
**插图 (unDraw):**
- 格式: 文件名 (不含 .svg), 如 `coding`, `team-work`
- 使用 `illus` 字段
### Infographic Syntax Guide
@@ -203,6 +232,12 @@ data
desc Plan for next sprint
illus mdi/star
### Content Refinement Principles
1. **Brevity is King**: Infographics are visual. Keep text to a minimum.
2. **Title Limit**: Keep `label` (item titles) under 15 characters.
3. **Description Limit**: Keep `desc` (item descriptions) under 25 characters (approx. 2 lines).
4. **Impact**: Use strong verbs and nouns. Avoid filler words.
### Output Rules
1. **Strict Syntax**: Follow the indentation and formatting rules exactly.
2. **No Explanations**: Output ONLY the syntax code block.
@@ -224,9 +259,11 @@ USER_PROMPT_GENERATE_INFOGRAPHIC = """
请根据文本特点选择最合适的信息图模板，并输出规范的 infographic 语法。注意保持正确的缩进格式（两个空格）。
**重要提示：**
- 如果使用 `list-grid` 格式，请确保每个卡片的 `desc` 描述文字控制在 **30个汉字**（或约60个英文字符）**以内**，以保证所有卡片描述都只占用2行，维持视觉一致性。
- 描述应简洁精炼，突出核心要点。
**视觉优化指南：**
- **要点化生成：** 信息图不是文章。请将内容转化为“关键词+短语”的形式，严禁生成长难句。
- **标题限制：** 每个卡片的 `label`（标题）请控制在 **8个汉字**以内。
- **描述限制：** 每个卡片的 `desc`（描述）请控制在 **15个汉字**以内，确保即使在小屏幕上也能完整显示。
- **结构化思维：** 优先使用并列、递进或对比结构，使信息一目了然。
"""
# =================================================================
@@ -333,7 +370,7 @@ CSS_TEMPLATE_INFOGRAPHIC = """
padding: 16px;
min-height: 600px;
background: #fff;
overflow: visible; /* Ensure content is visible */
overflow: visible;
transition: height 0.3s ease;
}
.infographic-render-container svg text {
@@ -341,35 +378,58 @@ CSS_TEMPLATE_INFOGRAPHIC = """
}
.infographic-render-container svg foreignObject {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif !important;
line-height: 1.4 !important;
line-height: 1.3 !important;
overflow: visible !important;
}
/* 主标题样式 */
.infographic-render-container svg foreignObject[data-element-type="title"] > * {
font-size: 1.5em !important;
font-weight: bold !important;
line-height: 1.4 !important;
white-space: nowrap !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
}
/* 页面副标题和卡片标题样式 */
.infographic-render-container svg foreignObject[data-element-type="desc"] > *,
.infographic-render-container svg foreignObject[data-element-type="item-label"] > * {
font-size: 0.6em !important;
line-height: 1.4 !important;
white-space: nowrap !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
}
/* 卡片标题额外增加底部间距 */
.infographic-render-container svg foreignObject[data-element-type="item-label"] > * {
padding-bottom: 8px !important;
display: block !important;
}
/* 卡片描述文字保持正常换行 */
.infographic-render-container svg foreignObject[data-element-type="item-desc"] > * {
line-height: 1.4 !important;
font-size: 1.3em !important;
font-weight: 800 !important;
line-height: 1.3 !important;
white-space: normal !important;
word-break: break-word !important;
display: -webkit-box !important;
-webkit-line-clamp: 2 !important;
-webkit-box-orient: vertical !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
text-align: center !important;
}
/* 页面副标题样式 */
.infographic-render-container svg foreignObject[data-element-type="desc"] > * {
font-size: 0.85em !important;
line-height: 1.3 !important;
white-space: nowrap !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
text-align: center !important;
display: block !important;
color: var(--ig-muted-text-color) !important;
}
/* 卡片标题样式 */
.infographic-render-container svg foreignObject[data-element-type="item-label"] > * {
font-size: 0.9em !important;
font-weight: 600 !important;
line-height: 1.3 !important;
white-space: normal !important;
word-break: break-word !important;
display: -webkit-box !important;
-webkit-line-clamp: 2 !important;
-webkit-box-orient: vertical !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
padding-bottom: 2px !important;
}
/* 卡片描述文字 */
.infographic-render-container svg foreignObject[data-element-type="item-desc"] > * {
font-size: 0.82em !important;
line-height: 1.3 !important;
white-space: normal !important;
display: -webkit-box !important;
-webkit-line-clamp: 2 !important;
-webkit-box-orient: vertical !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
}
.infographic-container-wrapper .download-area {
text-align: center;
@@ -537,34 +597,36 @@ SCRIPT_TEMPLATE_INFOGRAPHIC = """
}
}
// 2. 模板映射配置
// 2. 模板映射配置
// 2. 模板映射配置 (官方 AntV 结构 ID)
const TEMPLATE_MAPPING = {
// 列表与层级
// 列表与层级 - 短名称映射到完整模板名
'list-grid': 'list-grid-compact-card',
'list-column': 'list-column-simple-vertical-arrow',
'list-row': 'list-row-simple-horizontal-arrow',
'hierarchy-tree': 'hierarchy-tree-tech-style-capsule-item',
// 时序与时间线
'sequence-roadmap-vertical': 'sequence-roadmap-vertical-simple',
'sequence-timeline': 'sequence-timeline-simple',
'sequence-steps': 'sequence-steps-simple',
'sequence-horizontal-zigzag': 'sequence-horizontal-zigzag-simple',
// 对比
'compare-binary-horizontal': 'compare-binary-horizontal-simple-vs',
'compare-hierarchy-row': 'compare-hierarchy-row-simple',
// 图表
'chart-column': 'chart-column-simple',
'quadrant': 'quadrant-quarter-simple-card',
// 向后兼容的旧映射
'list-vertical': 'list-column-simple-vertical-arrow',
'tree-vertical': 'hierarchy-tree-tech-style-capsule-item',
'tree-horizontal': 'hierarchy-tree-lr-tech-style-capsule-item',
'mindmap': 'hierarchy-mindmap-branch-gradient-capsule-item',
// 顺序与关系
'sequence-roadmap': 'sequence-roadmap-vertical-simple',
'sequence-zigzag': 'sequence-horizontal-zigzag-simple',
'sequence-horizontal': 'sequence-horizontal-zigzag-simple',
'relation-sankey': 'relation-sankey-simple', // 暂无直接对应，保留原值或需移除
'relation-circle': 'relation-circle-icon-badge',
// 对比与分析
'compare-binary': 'compare-binary-horizontal-simple-vs',
'compare-swot': 'compare-swot',
'quadrant-quarter': 'quadrant-quarter-simple-card',
// 图表与数据
'statistic-card': 'list-grid-compact-card',
'chart-bar': 'chart-bar-plain-text',
'chart-column': 'chart-column-simple',
'chart-line': 'chart-line-plain-text',
'chart-area': 'chart-area-simple', // 暂无直接对应
'chart-pie': 'chart-pie-plain-text',
'chart-doughnut': 'chart-pie-donut-plain-text'
};
@@ -657,10 +719,48 @@ SCRIPT_TEMPLATE_INFOGRAPHIC = """
containerEl.dataset.infographicRendered = 'true';
console.log('[Infographic] 渲染完成');
// 自动调整高度
// 自动调整高度与元素标记
setTimeout(() => {
const svg = containerEl.querySelector('svg');
if (svg) {
// 1. 标记元素以便 CSS 应用样式
const fos = Array.from(svg.querySelectorAll('foreignObject'));
let titleFound = false;
let descFound = false;
fos.forEach((fo) => {
const text = fo.textContent.trim();
if (!text || fo.querySelector('i') || (fo.querySelector('svg') && fo.querySelectorAll('*').length < 5)) {
fo.setAttribute('data-element-type', 'icon');
return;
}
// 动态增加高度和宽度，容纳换行后的文字
const currentHeight = parseInt(fo.getAttribute('height') || '0');
if (currentHeight > 0 && currentHeight < 200) {
fo.setAttribute('height', Math.round(currentHeight * 1.8).toString());
}
const currentWidth = parseInt(fo.getAttribute('width') || '0');
if (currentWidth > 0 && currentWidth < 300) {
fo.setAttribute('width', Math.max(Math.round(currentWidth * 1.2), 180).toString());
}
if (!titleFound) {
fo.setAttribute('data-element-type', 'title');
titleFound = true;
} else if (!descFound) {
fo.setAttribute('data-element-type', 'desc');
descFound = true;
} else {
if (fo.querySelector('strong') || fo.style.fontWeight === 'bold' || text.length < 15) {
fo.setAttribute('data-element-type', 'item-label');
} else {
fo.setAttribute('data-element-type', 'item-desc');
}
}
});
// 2. 调整高度
const bbox = svg.getBoundingClientRect();
let contentHeight = bbox.height;
if (svg.viewBox && svg.viewBox.baseVal && svg.viewBox.baseVal.height) {

6
plugins/filters/markdown_normalizer/README.md
View File

@@ -4,7 +4,7 @@ A production-grade content normalizer filter for Open WebUI that fixes common Ma
## Features
* **Mermaid Syntax Fix**: Automatically fixes common Mermaid syntax errors, such as unquoted node labels and unclosed subgraphs, ensuring diagrams render correctly.
* **Mermaid Syntax Fix**: Automatically fixes common Mermaid syntax errors, such as unquoted node labels (including multi-line labels and citations) and unclosed subgraphs, ensuring diagrams render correctly.
* **Frontend Console Debugging**: Supports printing structured debug logs directly to the browser console (F12) for easier troubleshooting.
* **Code Block Formatting**: Fixes broken code block prefixes, suffixes, and indentation.
* **LaTeX Normalization**: Standardizes LaTeX formula delimiters (`\[` -> `$$`, `\(` -> `$`).
@@ -20,7 +20,9 @@ A production-grade content normalizer filter for Open WebUI that fixes common Ma
1. Install the plugin in Open WebUI.
2. Enable the filter globally or for specific models.
3. Configure the enabled fixes in the **Valves** settings.
4. (Optional) Enable **Show Debug Log** in Valves to view detailed logs in the browser console.
4. (Optional) **Show Debug Log** is enabled by default in Valves. This prints structured logs to the browser console (F12).
> [!WARNING]
> As this is an initial version, some "negative fixes" might occur (e.g., breaking valid Markdown). If you encounter issues, please check the console logs, copy the "Original" vs "Normalized" content, and submit an issue.
## Configuration (Valves)

6
plugins/filters/markdown_normalizer/README_CN.md
View File

@@ -4,7 +4,7 @@
## 功能特性
* **Mermaid 语法修复**: 自动修复常见的 Mermaid 语法错误，如未加引号的节点标签和未闭合的子图 (Subgraph)，确保图表能正确渲染。
* **Mermaid 语法修复**: 自动修复常见的 Mermaid 语法错误，如未加引号的节点标签（支持多行标签和引用标记）和未闭合的子图 (Subgraph)，确保图表能正确渲染。
* **前端控制台调试**: 支持将结构化的调试日志直接打印到浏览器控制台 (F12)，方便排查问题。
* **代码块格式化**: 修复破损的代码块前缀、后缀和缩进问题。
* **LaTeX 规范化**: 标准化 LaTeX 公式定界符 (`\[` -> `$$`, `\(` -> `$`)。
@@ -20,7 +20,9 @@
1. 在 Open WebUI 中安装此插件。
2. 全局启用或为特定模型启用此过滤器。
3. 在 **Valves** 设置中配置需要启用的修复项。
4. (可选) 在 Valves 中开启 **显示调试日志 (Show Debug Log)** 以在浏览器控制台中查看详细日志。
4. (可选) **显示调试日志 (Show Debug Log)** 在 Valves 中默认开启。这会将结构化的日志打印到浏览器控制台 (F12)。
> [!WARNING]
> 由于这是初版，可能会出现“负向修复”的情况（例如破坏了原本正确的格式）。如果您遇到问题，请务必查看控制台日志，复制“原始 (Original)”与“规范化 (Normalized)”的内容对比，并提交 Issue 反馈。
## 配置项 (Valves)

17
plugins/filters/markdown_normalizer/markdown_normalizer.py
View File

@@ -3,7 +3,7 @@ title: Markdown Normalizer
author: Fu-Jie
author_url: https://github.com/Fu-Jie
funding_url: https://github.com/Fu-Jie/awesome-openwebui
version: 1.0.0
version: 1.0.1
description: A production-grade content normalizer filter that fixes common Markdown formatting issues in LLM outputs, such as broken code blocks, LaTeX formulas, and list formatting.
"""
@@ -91,6 +91,8 @@ class ContentNormalizer:
r"(\{)(?![\"])(.*?)(?<![\"])(\})|" # {...} Rhombus
r"(>)(?![\"])(.*?)(?<![\"])(\])" # >...] Asymmetric
r")"
r"(\s*\[\d+\])?", # Capture optional citation [1]
re.DOTALL,
),
# Heading: #Heading -> # Heading
"heading_space": re.compile(r"^(#+)([^ \n#])", re.MULTILINE),
@@ -290,15 +292,20 @@ class ContentNormalizer:
id_str = match.group(2)
# Find matching shape group
# Groups start at index 3 (in match.group terms) or index 2 (in match.groups() tuple)
# Tuple: (String, ID, Open1, Content1, Close1, ...)
groups = match.groups()
for i in range(2, len(groups), 3):
citation = groups[-1] or "" # Last group is citation
# Iterate over shape groups (excluding the last citation group)
for i in range(2, len(groups) - 1, 3):
if groups[i] is not None:
open_char = groups[i]
content = groups[i + 1]
close_char = groups[i + 2]
# Append citation to content if present
if citation:
content += citation
# Escape quotes in content
content = content.replace('"', '\\"')
@@ -397,7 +404,7 @@ class Filter:
default=True, description="Show status notification when fixes are applied"
)
show_debug_log: bool = Field(
default=False, description="Print debug logs to browser console (F12)"
default=True, description="Print debug logs to browser console (F12)"
)
def __init__(self):

17
plugins/filters/markdown_normalizer/markdown_normalizer_cn.py
View File

@@ -3,7 +3,7 @@ title: Markdown 格式修复器 (Markdown Normalizer)
author: Fu-Jie
author_url: https://github.com/Fu-Jie
funding_url: https://github.com/Fu-Jie/awesome-openwebui
version: 1.0.0
version: 1.0.1
description: 生产级内容规范化过滤器，修复 LLM 输出中常见的 Markdown 格式问题，如损坏的代码块、LaTeX 公式、Mermaid 图表和列表格式。
"""
@@ -86,6 +86,8 @@ class ContentNormalizer:
r"(\{)(?![\"])(.*?)(?<![\"])(\})|" # {...} Rhombus
r"(>)(?![\"])(.*?)(?<![\"])(\])" # >...] Asymmetric
r")"
r"(\s*\[\d+\])?", # Capture optional citation [1]
re.DOTALL,
),
# Heading: #Heading -> # Heading
"heading_space": re.compile(r"^(#+)([^ \n#])", re.MULTILINE),
@@ -285,15 +287,20 @@ class ContentNormalizer:
id_str = match.group(2)
# Find matching shape group
# Groups start at index 3 (in match.group terms) or index 2 (in match.groups() tuple)
# Tuple: (String, ID, Open1, Content1, Close1, ...)
groups = match.groups()
for i in range(2, len(groups), 3):
citation = groups[-1] or "" # Last group is citation
# Iterate over shape groups (excluding the last citation group)
for i in range(2, len(groups) - 1, 3):
if groups[i] is not None:
open_char = groups[i]
content = groups[i + 1]
close_char = groups[i + 2]
# Append citation to content if present
if citation:
content += citation
# 如果内容包含引号，进行转义
content = content.replace('"', '\\"')
@@ -397,7 +404,7 @@ class Filter:
)
show_status: bool = Field(default=True, description="应用修复时显示状态通知")
show_debug_log: bool = Field(
default=False, description="在浏览器控制台打印调试日志 (F12)"
default=True, description="在浏览器控制台打印调试日志 (F12)"
)
def __init__(self):