feat: update Smart Infographic to v1.4.0 with static image output support

- 所有时间戳使用北京时区 (UTC+8)
- 格式从 YYYY-MM-DD 改为 YYYY-MM-DD HH:MM
- 添加 '(北京时间)' 标注

.agent/workflows/plugin-development.md

@@ -25,6 +25,10 @@ Every plugin **MUST** have bilingual versions for both code and documentation:
 - **Valves**: Use `pydantic` for configuration.
 - **Database**: Re-use `open_webui.internal.db` shared connection.
 - **User Context**: Use `_get_user_context` helper method.
+- **Chat API**: For message updates, follow the "OpenWebUI Chat API 更新规范" in `.github/copilot-instructions.md`.
+  - Use Event API for immediate UI updates
+  - Use Chat Persistence API for database storage
+  - Always update both `messages[]` and `history.messages`
 
 ### Commit Messages
 - **Language**: **English ONLY**. Do not use Chinese in commit messages.

.github/copilot-instructions.md

@@ -841,10 +841,328 @@ def add_math(paragraph, latex_str):
     omml = mathml2omml(mathml)
     # ... 插入 OMML 到 paragraph._element ...
 ```
-    - [ ] 更新 `README.md` 插件列表
-    - [ ] 更新 `README_CN.md` 插件列表
-    - [ ] 更新/创建 `docs/` 下的对应文档
-    - [ ] 确保文档版本号与代码一致
+
+### JS 渲染并嵌入 Markdown (JS Render to Markdown)
+
+对于需要复杂前端渲染（如 AntV 图表、Mermaid 图表、ECharts）但希望结果**持久化为纯 Markdown 格式**的场景，推荐使用 Data URL 嵌入模式：
+
+#### 工作流程
+
+```
+┌─────────────────────────────────────────────────────────────┐
+│                    Plugin Workflow                          │
+├─────────────────────────────────────────────────────────────┤
+│  1. Python Action                                            │
+│     ├── 分析消息内容                                          │
+│     ├── 调用 LLM 生成结构化数据（可选）                        │
+│     └── 通过 __event_call__ 发送 JS 代码到前端                │
+├─────────────────────────────────────────────────────────────┤
+│  2. Browser JS (via __event_call__)                          │
+│     ├── 动态加载可视化库（如 AntV、Mermaid）                   │
+│     ├── 离屏渲染 SVG/Canvas                                   │
+│     ├── 使用 toDataURL() 导出 Base64 Data URL                 │
+│     └── 通过 REST API 更新消息内容                            │
+├─────────────────────────────────────────────────────────────┤
+│  3. Markdown 渲染                                            │
+│     └── 显示 ![描述](data:image/svg+xml;base64,...)          │
+└─────────────────────────────────────────────────────────────┘
+```
+
+#### 核心实现代码
+
+**Python 端（发送 JS 执行）：**
+
+```python
+async def action(self, body, __event_call__, __metadata__, ...):
+    chat_id = self._extract_chat_id(body, __metadata__)
+    message_id = self._extract_message_id(body, __metadata__)
+    
+    # 生成 JS 代码
+    js_code = self._generate_js_code(
+        chat_id=chat_id,
+        message_id=message_id,
+        data=processed_data,  # 可视化所需数据
+    )
+    
+    # 执行 JS
+    if __event_call__:
+        await __event_call__({
+            "type": "execute",
+            "data": {"code": js_code}
+        })
+```
+
+**JavaScript 端（渲染并回写）：**
+
+```javascript
+(async function() {
+    // 1. 动态加载可视化库
+    if (typeof VisualizationLib === 'undefined') {
+        await new Promise((resolve, reject) => {
+            const script = document.createElement('script');
+            script.src = 'https://cdn.example.com/lib.min.js';
+            script.onload = resolve;
+            script.onerror = reject;
+            document.head.appendChild(script);
+        });
+    }
+    
+    // 2. 创建离屏容器
+    const container = document.createElement('div');
+    container.style.cssText = 'position:absolute;left:-9999px;';
+    document.body.appendChild(container);
+    
+    // 3. 渲染可视化
+    const instance = new VisualizationLib({ container, ... });
+    instance.render(data);
+    
+    // 4. 导出为 Data URL
+    const dataUrl = await instance.toDataURL({ type: 'svg', embedResources: true });
+    // 或手动转换 SVG:
+    // const svgData = new XMLSerializer().serializeToString(svgElement);
+    // const base64 = btoa(unescape(encodeURIComponent(svgData)));
+    // const dataUrl = "data:image/svg+xml;base64," + base64;
+    
+    // 5. 清理
+    instance.destroy();
+    document.body.removeChild(container);
+    
+    // 6. 生成 Markdown 图片
+    const markdownImage = `![描述](${dataUrl})`;
+    
+    // 7. 通过 API 更新消息
+    const token = localStorage.getItem("token");
+    await fetch(`/api/v1/chats/${chatId}/messages/${messageId}/event`, {
+        method: "POST",
+        headers: {
+            "Content-Type": "application/json",
+            "Authorization": `Bearer ${token}`
+        },
+        body: JSON.stringify({
+            type: "chat:message",
+            data: { content: originalContent + "\n\n" + markdownImage }
+        })
+    });
+})();
+```
+
+#### 优势
+
+- **纯 Markdown 输出**：结果是标准的 Markdown 图片语法，无需 HTML 代码块
+- **高效存储**：图片上传至 `/api/v1/files`，避免 Base64 字符串膨胀聊天记录
+- **持久化**：通过 API 回写，消息重新加载后图片仍然存在
+- **跨平台**：任何支持 Markdown 图片的客户端都能显示
+- **无服务端渲染依赖**：利用用户浏览器的渲染能力
+
+#### 与 HTML 注入模式对比
+
+| 特性 | HTML 注入 (`\`\`\`html`) | JS 渲染 + Markdown 图片 |
+|------|-------------------------|------------------------|
+| 输出格式 | HTML 代码块 | Markdown 图片 |
+| 交互性 | ✅ 支持按钮、动画 | ❌ 静态图片 |
+| 外部依赖 | 需要加载 JS 库 | 依赖 `/api/v1/files` 存储 |
+| 持久化 | 依赖浏览器渲染 | ✅ 永久可见 |
+| 文件导出 | 需特殊处理 | ✅ 直接导出 |
+| 适用场景 | 交互式内容 | 信息图、图表快照 |
+
+#### 参考实现
+
+- `plugins/actions/js-render-poc/infographic_markdown.py` - AntV Infographic 生成并嵌入
+- `plugins/actions/js-render-poc/js_render_poc.py` - 基础概念验证
+
+### OpenWebUI Chat API 更新规范 (Chat API Update Specification)
+
+当插件需要修改消息内容并持久化到数据库时，必须遵循 OpenWebUI 的 Backend-Controlled API 流程。
+
+When a plugin needs to modify message content and persist it to the database, follow OpenWebUI's Backend-Controlled API flow.
+
+#### 核心概念 (Core Concepts)
+
+1. **Event API** (`/api/v1/chats/{chatId}/messages/{messageId}/event`)
+   - 用于**即时更新前端显示**，用户无需刷新页面
+   - 是可选的，部分版本可能不支持
+   - 仅影响当前会话的 UI，不持久化
+
+2. **Chat Persistence API** (`/api/v1/chats/{chatId}`)
+   - 用于**持久化到数据库**，确保刷新页面后数据仍存在
+   - 必须同时更新 `messages[]` 数组和 `history.messages` 对象
+   - 是消息持久化的唯一可靠方式
+
+#### 数据结构 (Data Structure)
+
+OpenWebUI 的 Chat 对象包含两个关键位置存储消息内容：
+
+```javascript
+{
+  "chat": {
+    "id": "chat-uuid",
+    "title": "Chat Title",
+    "messages": [                              // 1️⃣ 消息数组
+      { "id": "msg-1", "role": "user", "content": "..." },
+      { "id": "msg-2", "role": "assistant", "content": "..." }
+    ],
+    "history": {
+      "current_id": "msg-2",
+      "messages": {                            // 2️⃣ 消息索引对象
+        "msg-1": { "id": "msg-1", "role": "user", "content": "..." },
+        "msg-2": { "id": "msg-2", "role": "assistant", "content": "..." }
+      }
+    }
+  }
+}
+```
+
+> **重要**：修改消息时，**必须同时更新两个位置**，否则可能导致数据不一致。
+
+#### 标准实现流程 (Standard Implementation)
+
+```javascript
+(async function() {
+    const chatId = "{chat_id}";
+    const messageId = "{message_id}";
+    const token = localStorage.getItem("token");
+    
+    // 1️⃣ 获取当前 Chat 数据
+    const getResponse = await fetch(`/api/v1/chats/${chatId}`, {
+        method: "GET",
+        headers: { "Authorization": `Bearer ${token}` }
+    });
+    const chatData = await getResponse.json();
+    
+    // 2️⃣ 使用 map 遍历 messages，只修改目标消息
+    let newContent = "";
+    const updatedMessages = chatData.chat.messages.map(m => {
+        if (m.id === messageId) {
+            const originalContent = m.content || "";
+            newContent = originalContent + "\n\n" + newMarkdown;
+            
+            // 3️⃣ 同时更新 history.messages 中对应的消息
+            if (chatData.chat.history && chatData.chat.history.messages) {
+                if (chatData.chat.history.messages[messageId]) {
+                    chatData.chat.history.messages[messageId].content = newContent;
+                }
+            }
+            
+            // 4️⃣ 保留消息的其他属性，只修改 content
+            return { ...m, content: newContent };
+        }
+        return m;  // 其他消息原样返回
+    });
+    
+    // 5️⃣ 通过 Event API 即时更新前端（可选）
+    try {
+        await fetch(`/api/v1/chats/${chatId}/messages/${messageId}/event`, {
+            method: "POST",
+            headers: {
+                "Content-Type": "application/json",
+                "Authorization": `Bearer ${token}`
+            },
+            body: JSON.stringify({
+                type: "chat:message",
+                data: { content: newContent }
+            })
+        });
+    } catch (e) {
+        // Event API 是可选的，继续执行持久化
+        console.log("Event API not available, continuing...");
+    }
+    
+    // 6️⃣ 持久化到数据库（必须）
+    const updatePayload = {
+        chat: {
+            ...chatData.chat,      // 保留所有原有属性
+            messages: updatedMessages
+            // history 已在上面原地修改
+        }
+    };
+    
+    await fetch(`/api/v1/chats/${chatId}`, {
+        method: "POST",
+        headers: {
+            "Content-Type": "application/json",
+            "Authorization": `Bearer ${token}`
+        },
+        body: JSON.stringify(updatePayload)
+    });
+})();
+```
+
+#### 最佳实践 (Best Practices)
+
+1. **保留原有结构**：使用展开运算符 `...chatData.chat` 和 `...m` 确保不丢失任何原有属性
+2. **双位置更新**：必须同时更新 `messages[]` 和 `history.messages[id]`
+3. **错误处理**：Event API 调用应包裹在 try-catch 中，失败时继续持久化
+4. **重试机制**：对持久化 API 实现重试逻辑，提高可靠性
+
+```javascript
+// 带重试的请求函数
+const fetchWithRetry = async (url, options, retries = 3) => {
+    for (let i = 0; i < retries; i++) {
+        try {
+            const response = await fetch(url, options);
+            if (response.ok) return response;
+            if (i < retries - 1) {
+                await new Promise(r => setTimeout(r, 1000 * (i + 1)));  // 指数退避
+            }
+        } catch (e) {
+            if (i === retries - 1) throw e;
+            await new Promise(r => setTimeout(r, 1000 * (i + 1)));
+        }
+    }
+    return null;
+};
+```
+
+5. **禁止使用的 API**：不要使用 `/api/v1/chats/{chatId}/share` 作为持久化备用方案，该 API 用于分享功能，不是更新功能
+
+#### 提取 Chat ID 和 Message ID (Extracting IDs)
+
+```python
+def _extract_chat_id(self, body: dict, metadata: Optional[dict]) -> str:
+    """从 body 或 metadata 中提取 chat_id"""
+    if isinstance(body, dict):
+        chat_id = body.get("chat_id")
+        if isinstance(chat_id, str) and chat_id.strip():
+            return chat_id.strip()
+        
+        body_metadata = body.get("metadata", {})
+        if isinstance(body_metadata, dict):
+            chat_id = body_metadata.get("chat_id")
+            if isinstance(chat_id, str) and chat_id.strip():
+                return chat_id.strip()
+    
+    if isinstance(metadata, dict):
+        chat_id = metadata.get("chat_id")
+        if isinstance(chat_id, str) and chat_id.strip():
+            return chat_id.strip()
+    
+    return ""
+
+def _extract_message_id(self, body: dict, metadata: Optional[dict]) -> str:
+    """从 body 或 metadata 中提取 message_id"""
+    if isinstance(body, dict):
+        message_id = body.get("id")
+        if isinstance(message_id, str) and message_id.strip():
+            return message_id.strip()
+        
+        body_metadata = body.get("metadata", {})
+        if isinstance(body_metadata, dict):
+            message_id = body_metadata.get("message_id")
+            if isinstance(message_id, str) and message_id.strip():
+                return message_id.strip()
+    
+    if isinstance(metadata, dict):
+        message_id = metadata.get("message_id")
+        if isinstance(message_id, str) and message_id.strip():
+            return message_id.strip()
+    
+    return ""
+```
+
+#### 参考实现
+
+- `plugins/actions/smart-mind-map/smart_mind_map.py` - 思维导图图片模式实现
+- 官方文档: [Backend-Controlled, UI-Compatible API Flow](https://docs.openwebui.com/tutorials/tips/backend-controlled-ui-compatible-api-flow)
 
 ---
 

.github/workflows/community-stats.yml

@@ -0,0 +1,54 @@
+# OpenWebUI 社区统计报告自动生成
+# 每小时自动获取并更新社区统计数据
+
+name: Community Stats
+
+on:
+  # 每小时整点运行
+  schedule:
+    - cron: '0 * * * *'
+  # 手动触发
+  workflow_dispatch:
+
+permissions:
+  contents: write
+
+jobs:
+  update-stats:
+    runs-on: ubuntu-latest
+    
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v4
+        with:
+          token: ${{ secrets.GITHUB_TOKEN }}
+      
+      - name: Set up Python
+        uses: actions/setup-python@v5
+        with:
+          python-version: '3.11'
+      
+      - name: Install dependencies
+        run: |
+          pip install requests python-dotenv
+      
+      - name: Generate stats report
+        env:
+          OPENWEBUI_API_KEY: ${{ secrets.OPENWEBUI_API_KEY }}
+          OPENWEBUI_USER_ID: ${{ secrets.OPENWEBUI_USER_ID }}
+        run: |
+          python scripts/openwebui_stats.py
+      
+      - name: Check for changes
+        id: check_changes
+        run: |
+          git diff --quiet docs/community-stats.md docs/community-stats.en.md README.md README_CN.md || echo "changed=true" >> $GITHUB_OUTPUT
+      
+      - name: Commit and push changes
+        if: steps.check_changes.outputs.changed == 'true'
+        run: |
+          git config --local user.email "github-actions[bot]@users.noreply.github.com"
+          git config --local user.name "github-actions[bot]"
+          git add docs/community-stats.md docs/community-stats.en.md docs/community-stats.json README.md README_CN.md
+          git commit -m "📊 更新社区统计数据 $(date +'%Y-%m-%d')"
+          git push

.github/workflows/release.yml

@@ -180,14 +180,23 @@ jobs:
 
       - name: Determine version
         id: version
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
         run: |
           if [ "${{ github.event_name }}" = "workflow_dispatch" ] && [ -n "${{ github.event.inputs.version }}" ]; then
             VERSION="${{ github.event.inputs.version }}"
           elif [[ "${{ github.ref }}" == refs/tags/v* ]]; then
             VERSION="${GITHUB_REF#refs/tags/}"
           else
-            # Auto-generate version based on date and run number
-            VERSION="v$(date +'%Y.%m.%d')-${{ github.run_number }}"
+            # Auto-generate version based on date and daily release count
+            TODAY=$(date +'%Y.%m.%d')
+            TODAY_PREFIX="v${TODAY}-"
+            
+            # Count existing releases with today's date prefix
+            EXISTING_COUNT=$(gh release list --limit 100 | grep -c "^${TODAY_PREFIX}" || echo "0")
+            NEXT_NUM=$((EXISTING_COUNT + 1))
+            
+            VERSION="${TODAY_PREFIX}${NEXT_NUM}"
           fi
           echo "version=$VERSION" >> $GITHUB_OUTPUT
           echo "Release version: $VERSION"

README.md

@@ -4,7 +4,31 @@ English | [中文](./README_CN.md)
 
 A collection of enhancements, plugins, and prompts for [OpenWebUI](https://github.com/open-webui/open-webui), developed and curated for personal use to extend functionality and improve experience.
 
-[Contributing](./CONTRIBUTING.md)
+<!-- STATS_START -->
+## 📊 Community Stats
+
+> 🕐 Auto-updated: 2026-01-06 22:09
+
+| 👤 Author | 👥 Followers | ⭐ Points | 🏆 Contributions |
+|:---:|:---:|:---:|:---:|
+| [Fu-Jie](https://openwebui.com/u/Fu-Jie) | **43** | **62** | **17** |
+
+| 📝 Posts | ⬇️ Downloads | 👁️ Views | 👍 Upvotes | 💾 Saves |
+|:---:|:---:|:---:|:---:|:---:|
+| **11** | **797** | **8536** | **54** | **48** |
+
+### 🔥 Top 5 Popular Plugins
+
+| Rank | Plugin | Downloads | Views |
+|:---:|------|:---:|:---:|
+| 🥇 | [Turn Any Text into Beautiful Mind Maps](https://openwebui.com/posts/turn_any_text_into_beautiful_mind_maps_3094c59a) | 242 | 2157 |
+| 🥈 | [Export to Excel](https://openwebui.com/posts/export_mulit_table_to_excel_244b8f9d) | 171 | 459 |
+| 🥉 | [Async Context Compression](https://openwebui.com/posts/async_context_compression_b1655bc8) | 112 | 1237 |
+| 4️⃣ | [Flash Card ](https://openwebui.com/posts/flash_card_65a2ea8f) | 76 | 1429 |
+| 5️⃣ | [Smart Infographic](https://openwebui.com/posts/smart_infographic_ad6f0c7f) | 65 | 917 |
+
+*See full stats in [Community Stats Report](./docs/community-stats.md)*
+<!-- STATS_END -->
 
 ## 📦 Project Contents
 
@@ -60,10 +84,16 @@ This project is a collection of resources and does not require a Python environm
 
 ### Using Plugins
 
-1. Browse the `/plugins` directory and download the plugin file (`.py`) you need.
-2. Go to OpenWebUI **Admin Panel** -> **Settings** -> **Plugins**.
-3. Click the upload button and select the `.py` file you just downloaded.
-4. Once uploaded, refresh the page to enable the plugin in your chat settings or toolbar.
+1. **Install from OpenWebUI Community (Recommended)**:
+   - Visit my profile: [Fu-Jie's Profile](https://openwebui.com/u/Fu-Jie)
+   - Browse the plugins and select the one you like.
+   - Click "Get" to import it directly into your OpenWebUI instance.
+
+2. **Manual Installation**:
+   - Browse the `/plugins` directory and download the plugin file (`.py`) you need.
+   - Go to OpenWebUI **Admin Panel** -> **Settings** -> **Plugins**.
+   - Click the upload button and select the `.py` file you just downloaded.
+   - Once uploaded, refresh the page to enable the plugin in your chat settings or toolbar.
 
 ### Contributing
 
@@ -71,3 +101,5 @@ If you have great prompts or plugins to share:
 1. Fork this repository.
 2. Add your files to the appropriate `prompts/` or `plugins/` directory.
 3. Submit a Pull Request.
+
+[Contributing](./CONTRIBUTING.md)

README_CN.md

@@ -2,7 +2,37 @@
 
 [English](./README.md) | 中文
 
-OpenWebUI 增强功能集合。包含个人开发与收集的### 🧩 插件 (Plugins)
+OpenWebUI 增强功能集合。包含个人开发与收集的插件、提示词等资源。
+
+<!-- STATS_START -->
+## 📊 社区统计
+
+> 🕐 自动更新于 2026-01-06 22:09
+
+| 👤 作者 | 👥 粉丝 | ⭐ 积分 | 🏆 贡献 |
+|:---:|:---:|:---:|:---:|
+| [Fu-Jie](https://openwebui.com/u/Fu-Jie) | **43** | **62** | **17** |
+
+| 📝 发布 | ⬇️ 下载 | 👁️ 浏览 | 👍 点赞 | 💾 收藏 |
+|:---:|:---:|:---:|:---:|:---:|
+| **11** | **797** | **8536** | **54** | **48** |
+
+### 🔥 热门插件 Top 5
+
+| 排名 | 插件 | 下载 | 浏览 |
+|:---:|------|:---:|:---:|
+| 🥇 | [Turn Any Text into Beautiful Mind Maps](https://openwebui.com/posts/turn_any_text_into_beautiful_mind_maps_3094c59a) | 242 | 2157 |
+| 🥈 | [Export to Excel](https://openwebui.com/posts/export_mulit_table_to_excel_244b8f9d) | 171 | 459 |
+| 🥉 | [Async Context Compression](https://openwebui.com/posts/async_context_compression_b1655bc8) | 112 | 1237 |
+| 4️⃣ | [Flash Card ](https://openwebui.com/posts/flash_card_65a2ea8f) | 76 | 1429 |
+| 5️⃣ | [Smart Infographic](https://openwebui.com/posts/smart_infographic_ad6f0c7f) | 65 | 917 |
+
+*完整统计请查看 [社区统计报告](./docs/community-stats.md)*
+<!-- STATS_END -->
+
+## 📦 项目内容
+
+### 🧩 插件 (Plugins)
 
 位于 `plugins/` 目录，包含各类 Python 编写的功能增强插件：
 
@@ -19,7 +49,6 @@ OpenWebUI 增强功能集合。包含个人开发与收集的### 🧩 插件 (Pl
 - **Context Enhancement** (`context_enhancement_filter`): 上下文增强过滤器。
 - **Gemini Manifold Companion** (`gemini_manifold_companion`): Gemini Manifold 配套增强。
 
-
 #### Pipes (模型管道)
 - **Gemini Manifold** (`gemini_mainfold`): 集成 Gemini 模型的管道。
 
@@ -31,40 +60,10 @@ OpenWebUI 增强功能集合。包含个人开发与收集的### 🧩 插件 (Pl
 位于 `prompts/` 目录，包含精心调优的 System Prompts：
 
 - **Coding**: 编程辅助类提示词。
-- **Marketing**: 营销文案类提示词。(`/prompts/marketing`): 内容创作、品牌策划、市场分析相关的提示词
+- **Marketing**: 营销文案类提示词。
 
 每个提示词都独立保存为 Markdown 文件，可直接在 OpenWebUI 中使用。
 
-### 🔧 插件 (Plugins)
-
-{{ ... }}
-
-[贡献指南](./CONTRIBUTING.md) | [更新日志](./CHANGELOG.md)
-
-## 📦 项目内容
-
-### 🎯 提示词 (Prompts)
-
-位于 `/prompts` 目录，包含针对不同领域的优质提示词模板：
-
-- **编程类** (`/prompts/coding`): 代码生成、调试、优化相关的提示词
-- **营销类** (`/prompts/marketing`): 内容创作、品牌策划、市场分析相关的提示词
-
-每个提示词都独立保存为 Markdown 文件，可直接在 OpenWebUI 中使用。
-
-### 🔧 插件 (Plugins)
-
-位于 `/plugins` 目录，提供三种类型的插件扩展：
-
-- **过滤器 (Filters)** - 在用户输入发送给 LLM 前进行处理和优化
-  - 异步上下文压缩：智能压缩长上下文，优化 token 使用效率
-
-- **动作 (Actions)** - 自定义功能，从聊天中触发
-  - 思维导图生成：快速生成和导出思维导图
-
-- **管道 (Pipes)** - 对 LLM 响应进行处理和增强
-  - 各类响应处理和格式化插件
-
 ## 📖 开发文档
 
 位于 `docs/zh/` 目录：
@@ -87,10 +86,16 @@ OpenWebUI 增强功能集合。包含个人开发与收集的### 🧩 插件 (Pl
 
 ### 使用插件 (Plugins)
 
-1. 在 `/plugins` 目录中浏览并下载你需要的插件文件 (`.py`)。
-2. 打开 OpenWebUI 的 **管理员面板 (Admin Panel)** -> **设置 (Settings)** -> **插件 (Plugins)**。
-3. 点击上传按钮，选择刚才下载的 `.py` 文件。
-4. 上传成功后，刷新页面，你就可以在聊天设置或工具栏中启用该插件了。
+1. **从 OpenWebUI 社区安装 (推荐)**:
+   - 访问我的主页: [Fu-Jie's Profile](https://openwebui.com/u/Fu-Jie)
+   - 浏览插件列表，选择你喜欢的插件。
+   - 点击 "Get" 按钮，将其直接导入到你的 OpenWebUI 实例中。
+
+2. **手动安装**:
+   - 在 `/plugins` 目录中浏览并下载你需要的插件文件 (`.py`)。
+   - 打开 OpenWebUI 的 **管理员面板 (Admin Panel)** -> **设置 (Settings)** -> **插件 (Plugins)**。
+   - 点击上传按钮，选择刚才下载的 `.py` 文件。
+   - 上传成功后，刷新页面，你就可以在聊天设置或工具栏中启用该插件了。
 
 ### 贡献代码
 
@@ -98,3 +103,5 @@ OpenWebUI 增强功能集合。包含个人开发与收集的### 🧩 插件 (Pl
 1. Fork 本仓库。
 2. 将你的文件添加到对应的 `prompts/` 或 `plugins/` 目录。
 3. 提交 Pull Request。
+
+[贡献指南](./CONTRIBUTING.md) | [更新日志](./CHANGELOG.md)

docs/community-stats.en.md

@@ -0,0 +1,35 @@
+# 📊 OpenWebUI Community Stats Report
+
+> 📅 Updated: 2026-01-06 22:09
+
+## 📈 Overview
+
+| Metric | Value |
+|------|------|
+| 📝 Total Posts | 11 |
+| ⬇️ Total Downloads | 797 |
+| 👁️ Total Views | 8536 |
+| 👍 Total Upvotes | 54 |
+| 💾 Total Saves | 48 |
+| 💬 Total Comments | 13 |
+
+## 📂 By Type
+
+- **action**: 9
+- **filter**: 2
+
+## 📋 Posts List
+
+| Rank | Title | Type | Version | Downloads | Views | Upvotes | Saves | Updated |
+|:---:|------|:---:|:---:|:---:|:---:|:---:|:---:|:---:|
+| 1 | [Turn Any Text into Beautiful Mind Maps](https://openwebui.com/posts/turn_any_text_into_beautiful_mind_maps_3094c59a) | action | 0.9.1 | 242 | 2157 | 10 | 15 | 2026-01-06 |
+| 2 | [Export to Excel](https://openwebui.com/posts/export_mulit_table_to_excel_244b8f9d) | action | 0.3.6 | 171 | 459 | 3 | 3 | 2026-01-03 |
+| 3 | [Async Context Compression](https://openwebui.com/posts/async_context_compression_b1655bc8) | filter | 1.1.0 | 112 | 1237 | 5 | 9 | 2025-12-31 |
+| 4 | [Flash Card ](https://openwebui.com/posts/flash_card_65a2ea8f) | action | 0.2.4 | 76 | 1429 | 8 | 5 | 2026-01-03 |
+| 5 | [Smart Infographic](https://openwebui.com/posts/smart_infographic_ad6f0c7f) | action | 1.3.2 | 65 | 917 | 6 | 8 | 2026-01-03 |
+| 6 | [Export to Word (Enhanced Formatting)](https://openwebui.com/posts/export_to_word_enhanced_formatting_fca6a315) | action | 0.4.0 | 51 | 508 | 5 | 4 | 2026-01-05 |
+| 7 | [智能信息图](https://openwebui.com/posts/智能信息图_e04a48ff) | action | 1.3.1 | 33 | 402 | 3 | 0 | 2025-12-29 |
+| 8 | [导出为 Word-支持公式、流程图、表格和代码块](https://openwebui.com/posts/导出为_word_支持公式流程图表格和代码块_8a6306c0) | action | 0.4.1 | 16 | 756 | 7 | 1 | 2026-01-05 |
+| 9 | [智能生成交互式思维导图,帮助用户可视化知识](https://openwebui.com/posts/智能生成交互式思维导图帮助用户可视化知识_8d4b097b) | action | 0.8.0 | 14 | 249 | 2 | 1 | 2025-12-31 |
+| 10 | [闪记卡生成插件](https://openwebui.com/posts/闪记卡生成插件_4a31eac3) | action | 0.2.2 | 12 | 310 | 3 | 1 | 2025-12-31 |
+| 11 | [异步上下文压缩](https://openwebui.com/posts/异步上下文压缩_5c0617cb) | filter | 1.1.0 | 5 | 112 | 2 | 1 | 2025-12-31 |

docs/community-stats.json

@@ -0,0 +1,203 @@
+{
+  "total_posts": 11,
+  "total_downloads": 797,
+  "total_views": 8536,
+  "total_upvotes": 54,
+  "total_downvotes": 1,
+  "total_saves": 48,
+  "total_comments": 13,
+  "by_type": {
+    "action": 9,
+    "filter": 2
+  },
+  "posts": [
+    {
+      "title": "Turn Any Text into Beautiful Mind Maps",
+      "slug": "turn_any_text_into_beautiful_mind_maps_3094c59a",
+      "type": "action",
+      "version": "0.9.1",
+      "author": "Fu-Jie",
+      "description": "Intelligently analyzes text content and generates interactive mind maps to help users structure and visualize knowledge.",
+      "downloads": 242,
+      "views": 2157,
+      "upvotes": 10,
+      "saves": 15,
+      "comments": 8,
+      "created_at": "2025-12-30",
+      "updated_at": "2026-01-06",
+      "url": "https://openwebui.com/posts/turn_any_text_into_beautiful_mind_maps_3094c59a"
+    },
+    {
+      "title": "Export to Excel",
+      "slug": "export_mulit_table_to_excel_244b8f9d",
+      "type": "action",
+      "version": "0.3.6",
+      "author": "Fu-Jie",
+      "description": "Extracts tables from chat messages and exports them to Excel (.xlsx) files with smart formatting.",
+      "downloads": 171,
+      "views": 459,
+      "upvotes": 3,
+      "saves": 3,
+      "comments": 0,
+      "created_at": "2025-05-30",
+      "updated_at": "2026-01-03",
+      "url": "https://openwebui.com/posts/export_mulit_table_to_excel_244b8f9d"
+    },
+    {
+      "title": "Async Context Compression",
+      "slug": "async_context_compression_b1655bc8",
+      "type": "filter",
+      "version": "1.1.0",
+      "author": "Fu-Jie",
+      "description": "This filter automatically compresses long conversation contexts by intelligently summarizing and removing intermediate messages while preserving critical information, thereby significantly reducing token consumption.",
+      "downloads": 112,
+      "views": 1237,
+      "upvotes": 5,
+      "saves": 9,
+      "comments": 0,
+      "created_at": "2025-11-08",
+      "updated_at": "2025-12-31",
+      "url": "https://openwebui.com/posts/async_context_compression_b1655bc8"
+    },
+    {
+      "title": "Flash Card ",
+      "slug": "flash_card_65a2ea8f",
+      "type": "action",
+      "version": "0.2.4",
+      "author": "Fu-Jie",
+      "description": "Quickly generates beautiful flashcards from text, extracting key points and categories.",
+      "downloads": 76,
+      "views": 1429,
+      "upvotes": 8,
+      "saves": 5,
+      "comments": 2,
+      "created_at": "2025-12-30",
+      "updated_at": "2026-01-03",
+      "url": "https://openwebui.com/posts/flash_card_65a2ea8f"
+    },
+    {
+      "title": "Smart Infographic",
+      "slug": "smart_infographic_ad6f0c7f",
+      "type": "action",
+      "version": "1.3.2",
+      "author": "jeff",
+      "description": "AI-powered infographic generator based on AntV Infographic. Supports professional templates, auto-icon matching, and SVG/PNG downloads.",
+      "downloads": 65,
+      "views": 917,
+      "upvotes": 6,
+      "saves": 8,
+      "comments": 2,
+      "created_at": "2025-12-28",
+      "updated_at": "2026-01-03",
+      "url": "https://openwebui.com/posts/smart_infographic_ad6f0c7f"
+    },
+    {
+      "title": "Export to Word (Enhanced Formatting)",
+      "slug": "export_to_word_enhanced_formatting_fca6a315",
+      "type": "action",
+      "version": "0.4.0",
+      "author": "Fu-Jie",
+      "description": "Export the current conversation to a formatted Word doc with syntax highlighting, AI-generated titles, and perfect Markdown rendering (tables, quotes, lists).",
+      "downloads": 51,
+      "views": 508,
+      "upvotes": 5,
+      "saves": 4,
+      "comments": 0,
+      "created_at": "2026-01-03",
+      "updated_at": "2026-01-05",
+      "url": "https://openwebui.com/posts/export_to_word_enhanced_formatting_fca6a315"
+    },
+    {
+      "title": "智能信息图",
+      "slug": "智能信息图_e04a48ff",
+      "type": "action",
+      "version": "1.3.1",
+      "author": "jeff",
+      "description": "基于 AntV Infographic 的智能信息图生成插件。支持多种专业模板，自动图标匹配，并提供 SVG/PNG 下载功能。",
+      "downloads": 33,
+      "views": 402,
+      "upvotes": 3,
+      "saves": 0,
+      "comments": 0,
+      "created_at": "2025-12-28",
+      "updated_at": "2025-12-29",
+      "url": "https://openwebui.com/posts/智能信息图_e04a48ff"
+    },
+    {
+      "title": "导出为 Word-支持公式、流程图、表格和代码块",
+      "slug": "导出为_word_支持公式流程图表格和代码块_8a6306c0",
+      "type": "action",
+      "version": "0.4.1",
+      "author": "Fu-Jie",
+      "description": "将当前对话内容从 Markdown 转换并导出为 Word (.docx) 文件，支持中英文无乱码。",
+      "downloads": 16,
+      "views": 756,
+      "upvotes": 7,
+      "saves": 1,
+      "comments": 1,
+      "created_at": "2026-01-04",
+      "updated_at": "2026-01-05",
+      "url": "https://openwebui.com/posts/导出为_word_支持公式流程图表格和代码块_8a6306c0"
+    },
+    {
+      "title": "智能生成交互式思维导图,帮助用户可视化知识",
+      "slug": "智能生成交互式思维导图帮助用户可视化知识_8d4b097b",
+      "type": "action",
+      "version": "0.8.0",
+      "author": "",
+      "description": "智能分析文本内容,生成交互式思维导图,帮助用户结构化和可视化知识。",
+      "downloads": 14,
+      "views": 249,
+      "upvotes": 2,
+      "saves": 1,
+      "comments": 0,
+      "created_at": "2025-12-31",
+      "updated_at": "2025-12-31",
+      "url": "https://openwebui.com/posts/智能生成交互式思维导图帮助用户可视化知识_8d4b097b"
+    },
+    {
+      "title": "闪记卡生成插件",
+      "slug": "闪记卡生成插件_4a31eac3",
+      "type": "action",
+      "version": "0.2.2",
+      "author": "Fu-Jie",
+      "description": "快速将文本提炼为精美的学习记忆卡片，支持核心要点提取与分类。",
+      "downloads": 12,
+      "views": 310,
+      "upvotes": 3,
+      "saves": 1,
+      "comments": 0,
+      "created_at": "2025-12-30",
+      "updated_at": "2025-12-31",
+      "url": "https://openwebui.com/posts/闪记卡生成插件_4a31eac3"
+    },
+    {
+      "title": "异步上下文压缩",
+      "slug": "异步上下文压缩_5c0617cb",
+      "type": "filter",
+      "version": "1.1.0",
+      "author": "Fu-Jie",
+      "description": "在 LLM 响应完成后进行上下文摘要和压缩",
+      "downloads": 5,
+      "views": 112,
+      "upvotes": 2,
+      "saves": 1,
+      "comments": 0,
+      "created_at": "2025-11-08",
+      "updated_at": "2025-12-31",
+      "url": "https://openwebui.com/posts/异步上下文压缩_5c0617cb"
+    }
+  ],
+  "user": {
+    "username": "Fu-Jie",
+    "name": "Fu-Jie",
+    "profile_url": "https://openwebui.com/u/Fu-Jie",
+    "profile_image": "https://community.s3.openwebui.com/uploads/users/b15d1348-4347-42b4-b815-e053342d6cb0/profile_d9510745-4bd4-4f8f-a997-4a21847d9300.webp",
+    "followers": 43,
+    "following": 2,
+    "total_points": 62,
+    "post_points": 53,
+    "comment_points": 9,
+    "contributions": 17
+  }
+}

docs/community-stats.md

@@ -0,0 +1,35 @@
+# 📊 OpenWebUI 社区统计报告
+
+> 📅 更新时间: 2026-01-06 22:09
+
+## 📈 总览
+
+| 指标 | 数值 |
+|------|------|
+| 📝 发布数量 | 11 |
+| ⬇️ 总下载量 | 797 |
+| 👁️ 总浏览量 | 8536 |
+| 👍 总点赞数 | 54 |
+| 💾 总收藏数 | 48 |
+| 💬 总评论数 | 13 |
+
+## 📂 按类型分类
+
+- **action**: 9
+- **filter**: 2
+
+## 📋 发布列表
+
+| 排名 | 标题 | 类型 | 版本 | 下载 | 浏览 | 点赞 | 收藏 | 更新日期 |
+|:---:|------|:---:|:---:|:---:|:---:|:---:|:---:|:---:|
+| 1 | [Turn Any Text into Beautiful Mind Maps](https://openwebui.com/posts/turn_any_text_into_beautiful_mind_maps_3094c59a) | action | 0.9.1 | 242 | 2157 | 10 | 15 | 2026-01-06 |
+| 2 | [Export to Excel](https://openwebui.com/posts/export_mulit_table_to_excel_244b8f9d) | action | 0.3.6 | 171 | 459 | 3 | 3 | 2026-01-03 |
+| 3 | [Async Context Compression](https://openwebui.com/posts/async_context_compression_b1655bc8) | filter | 1.1.0 | 112 | 1237 | 5 | 9 | 2025-12-31 |
+| 4 | [Flash Card ](https://openwebui.com/posts/flash_card_65a2ea8f) | action | 0.2.4 | 76 | 1429 | 8 | 5 | 2026-01-03 |
+| 5 | [Smart Infographic](https://openwebui.com/posts/smart_infographic_ad6f0c7f) | action | 1.3.2 | 65 | 917 | 6 | 8 | 2026-01-03 |
+| 6 | [Export to Word (Enhanced Formatting)](https://openwebui.com/posts/export_to_word_enhanced_formatting_fca6a315) | action | 0.4.0 | 51 | 508 | 5 | 4 | 2026-01-05 |
+| 7 | [智能信息图](https://openwebui.com/posts/智能信息图_e04a48ff) | action | 1.3.1 | 33 | 402 | 3 | 0 | 2025-12-29 |
+| 8 | [导出为 Word-支持公式、流程图、表格和代码块](https://openwebui.com/posts/导出为_word_支持公式流程图表格和代码块_8a6306c0) | action | 0.4.1 | 16 | 756 | 7 | 1 | 2026-01-05 |
+| 9 | [智能生成交互式思维导图,帮助用户可视化知识](https://openwebui.com/posts/智能生成交互式思维导图帮助用户可视化知识_8d4b097b) | action | 0.8.0 | 14 | 249 | 2 | 1 | 2025-12-31 |
+| 10 | [闪记卡生成插件](https://openwebui.com/posts/闪记卡生成插件_4a31eac3) | action | 0.2.2 | 12 | 310 | 3 | 1 | 2025-12-31 |
+| 11 | [异步上下文压缩](https://openwebui.com/posts/异步上下文压缩_5c0617cb) | filter | 1.1.0 | 5 | 112 | 2 | 1 | 2025-12-31 |

docs/development/plugin-guide.md

@@ -235,6 +235,125 @@ llm_response = await generate_chat_completion(
 )
 ```
 
+### 4.4 JS Render to Markdown (Data URL Embedding)
+
+For scenarios requiring complex frontend rendering (e.g., AntV charts, Mermaid diagrams) but wanting **persistent pure Markdown output**, use the Data URL embedding pattern:
+
+#### Workflow
+
+```
+┌──────────────────────────────────────────────────────────────┐
+│  1. Python Action                                             │
+│     ├── Analyze message content                               │
+│     ├── Call LLM to generate structured data (optional)       │
+│     └── Send JS code to frontend via __event_call__           │
+├──────────────────────────────────────────────────────────────┤
+│  2. Browser JS (via __event_call__)                           │
+│     ├── Dynamically load visualization library                │
+│     ├── Render SVG/Canvas offscreen                           │
+│     ├── Export to Base64 Data URL via toDataURL()             │
+│     └── Update message content via REST API                   │
+├──────────────────────────────────────────────────────────────┤
+│  3. Markdown Rendering                                        │
+│     └── Display ![description](data:image/svg+xml;base64,...) │
+└──────────────────────────────────────────────────────────────┘
+```
+
+#### Python Side (Send JS for Execution)
+
+```python
+async def action(self, body, __event_call__, __metadata__, ...):
+    chat_id = self._extract_chat_id(body, __metadata__)
+    message_id = self._extract_message_id(body, __metadata__)
+    
+    # Generate JS code
+    js_code = self._generate_js_code(
+        chat_id=chat_id,
+        message_id=message_id,
+        data=processed_data,
+    )
+    
+    # Execute JS
+    if __event_call__:
+        await __event_call__({
+            "type": "execute",
+            "data": {"code": js_code}
+        })
+```
+
+#### JavaScript Side (Render and Write-back)
+
+```javascript
+(async function() {
+    // 1. Load visualization library
+    if (typeof VisualizationLib === 'undefined') {
+        await new Promise((resolve, reject) => {
+            const script = document.createElement('script');
+            script.src = 'https://cdn.example.com/lib.min.js';
+            script.onload = resolve;
+            script.onerror = reject;
+            document.head.appendChild(script);
+        });
+    }
+    
+    // 2. Create offscreen container
+    const container = document.createElement('div');
+    container.style.cssText = 'position:absolute;left:-9999px;';
+    document.body.appendChild(container);
+    
+    // 3. Render visualization
+    const instance = new VisualizationLib({ container });
+    instance.render(data);
+    
+    // 4. Export to Data URL
+    const dataUrl = await instance.toDataURL({ type: 'svg', embedResources: true });
+    
+    // 5. Cleanup
+    instance.destroy();
+    document.body.removeChild(container);
+    
+    // 6. Generate Markdown image
+    const markdownImage = `![Chart](${dataUrl})`;
+    
+    // 7. Update message via API
+    const token = localStorage.getItem("token");
+    await fetch(`/api/v1/chats/${chatId}/messages/${messageId}/event`, {
+        method: "POST",
+        headers: {
+            "Content-Type": "application/json",
+            "Authorization": `Bearer ${token}`
+        },
+        body: JSON.stringify({
+            type: "chat:message",
+            data: { content: originalContent + "\n\n" + markdownImage }
+        })
+    });
+})();
+```
+
+#### Benefits
+
+- **Pure Markdown Output**: Standard Markdown image syntax, no HTML code blocks
+- **Self-Contained**: Images embedded as Base64 Data URL, no external dependencies
+- **Persistent**: Via API write-back, images remain after page reload
+- **Cross-Platform**: Works on any client supporting Markdown images
+
+#### HTML Injection vs JS Render to Markdown
+
+| Feature | HTML Injection | JS Render + Markdown |
+|---------|----------------|----------------------|
+| Output Format | HTML code block | Markdown image |
+| Interactivity | ✅ Buttons, animations | ❌ Static image |
+| External Deps | Requires JS libraries | None (self-contained) |
+| Persistence | Depends on browser | ✅ Permanent |
+| File Export | Needs special handling | ✅ Direct export |
+| Use Case | Interactive content | Infographics, chart snapshots |
+
+#### Reference Implementations
+
+- `plugins/actions/js-render-poc/infographic_markdown.py` - AntV Infographic + Data URL
+- `plugins/actions/js-render-poc/js_render_poc.py` - Basic proof of concept
+
 ---
 
 ## 5. Best Practices & Design Principles

docs/development/plugin-guide.zh.md

@@ -199,7 +199,124 @@ async def background_job(self, chat_id):
     pass
 ```
 
----
+### 4.3 JS 渲染并嵌入 Markdown (Data URL 嵌入)
+
+对于需要复杂前端渲染（如 AntV 图表、Mermaid 图表）但希望结果**持久化为纯 Markdown 格式**的场景，推荐使用 Data URL 嵌入模式：
+
+#### 工作流程
+
+```
+┌──────────────────────────────────────────────────────────────┐
+│  1. Python Action                                             │
+│     ├── 分析消息内容                                           │
+│     ├── 调用 LLM 生成结构化数据（可选）                         │
+│     └── 通过 __event_call__ 发送 JS 代码到前端                 │
+├──────────────────────────────────────────────────────────────┤
+│  2. Browser JS (通过 __event_call__)                          │
+│     ├── 动态加载可视化库                                       │
+│     ├── 离屏渲染 SVG/Canvas                                    │
+│     ├── 使用 toDataURL() 导出 Base64 Data URL                  │
+│     └── 通过 REST API 更新消息内容                             │
+├──────────────────────────────────────────────────────────────┤
+│  3. Markdown 渲染                                             │
+│     └── 显示 ![描述](data:image/svg+xml;base64,...)           │
+└──────────────────────────────────────────────────────────────┘
+```
+
+#### Python 端（发送 JS 执行）
+
+```python
+async def action(self, body, __event_call__, __metadata__, ...):
+    chat_id = self._extract_chat_id(body, __metadata__)
+    message_id = self._extract_message_id(body, __metadata__)
+    
+    # 生成 JS 代码
+    js_code = self._generate_js_code(
+        chat_id=chat_id,
+        message_id=message_id,
+        data=processed_data,
+    )
+    
+    # 执行 JS
+    if __event_call__:
+        await __event_call__({
+            "type": "execute",
+            "data": {"code": js_code}
+        })
+```
+
+#### JavaScript 端（渲染并回写）
+
+```javascript
+(async function() {
+    // 1. 加载可视化库
+    if (typeof VisualizationLib === 'undefined') {
+        await new Promise((resolve, reject) => {
+            const script = document.createElement('script');
+            script.src = 'https://cdn.example.com/lib.min.js';
+            script.onload = resolve;
+            script.onerror = reject;
+            document.head.appendChild(script);
+        });
+    }
+    
+    // 2. 创建离屏容器
+    const container = document.createElement('div');
+    container.style.cssText = 'position:absolute;left:-9999px;';
+    document.body.appendChild(container);
+    
+    // 3. 渲染可视化
+    const instance = new VisualizationLib({ container });
+    instance.render(data);
+    
+    // 4. 导出为 Data URL
+    const dataUrl = await instance.toDataURL({ type: 'svg', embedResources: true });
+    
+    // 5. 清理
+    instance.destroy();
+    document.body.removeChild(container);
+    
+    // 6. 生成 Markdown 图片
+    const markdownImage = `![图表](${dataUrl})`;
+    
+    // 7. 通过 API 更新消息
+    const token = localStorage.getItem("token");
+    await fetch(`/api/v1/chats/${chatId}/messages/${messageId}/event`, {
+        method: "POST",
+        headers: {
+            "Content-Type": "application/json",
+            "Authorization": `Bearer ${token}`
+        },
+        body: JSON.stringify({
+            type: "chat:message",
+            data: { content: originalContent + "\n\n" + markdownImage }
+        })
+    });
+})();
+```
+
+#### 优势
+
+- **纯 Markdown 输出**：结果是标准的 Markdown 图片语法，无需 HTML 代码块
+- **自包含**：图片以 Base64 Data URL 嵌入，无外部依赖
+- **持久化**：通过 API 回写，消息重新加载后图片仍然存在
+- **跨平台**：任何支持 Markdown 图片的客户端都能显示
+
+#### HTML 注入 vs JS 渲染嵌入 Markdown
+
+| 特性 | HTML 注入 | JS 渲染 + Markdown 图片 |
+|------|----------|------------------------|
+| 输出格式 | HTML 代码块 | Markdown 图片 |
+| 交互性 | ✅ 支持按钮、动画 | ❌ 静态图片 |
+| 外部依赖 | 需要加载 JS 库 | 无（图片自包含） |
+| 持久化 | 依赖浏览器渲染 | ✅ 永久可见 |
+| 文件导出 | 需特殊处理 | ✅ 直接导出 |
+| 适用场景 | 交互式内容 | 信息图、图表快照 |
+
+#### 参考实现
+
+- `plugins/actions/js-render-poc/infographic_markdown.py` - AntV 信息图 + Data URL
+- `plugins/actions/js-render-poc/js_render_poc.py` - 基础概念验证
 
 ## 5. 最佳实践与设计原则
 

docs/index.md

@@ -104,10 +104,16 @@ hide:
 
 ### Using Plugins
 
-1. Browse the [Plugin Center](plugins/index.md) and download the plugin file (`.py`)
-2. Open OpenWebUI **Admin Panel** → **Settings** → **Plugins**
-3. Click the upload button and select the `.py` file
-4. Refresh the page and enable the plugin in your chat settings
+1. **Install from OpenWebUI Community (Recommended)**:
+   - Visit my profile: [Fu-Jie's Profile](https://openwebui.com/u/Fu-Jie)
+   - Browse the plugins and select the one you like.
+   - Click "Get" to import it directly into your OpenWebUI instance.
+
+2. **Manual Installation**:
+   - Browse the [Plugin Center](plugins/index.md) and download the plugin file (`.py`)
+   - Open OpenWebUI **Admin Panel** → **Settings** → **Plugins**
+   - Click the upload button and select the `.py` file
+   - Refresh the page and enable the plugin in your chat settings
 
 ---
 

docs/index.zh.md

@@ -104,10 +104,16 @@ hide:
 
 ### 使用插件
 
-1. 浏览[插件中心](plugins/index.md)并下载插件文件（`.py`）
-2. 打开 OpenWebUI **管理面板** → **设置** → **插件**
-3. 点击上传按钮并选择 `.py` 文件
-4. 刷新页面并在聊天设置中启用插件
+1. **从 OpenWebUI 社区安装 (推荐)**:
+   - 访问我的主页: [Fu-Jie's Profile](https://openwebui.com/u/Fu-Jie)
+   - 浏览插件列表，选择你喜欢的插件。
+   - 点击 "Get" 按钮，将其直接导入到你的 OpenWebUI 实例中。
+
+2. **手动安装**:
+   - 浏览[插件中心](plugins/index.md)并下载插件文件（`.py`）
+   - 打开 OpenWebUI **管理面板** → **设置** → **插件**
+   - 点击上传按钮并选择 `.py` 文件
+   - 刷新页面并在聊天设置中启用插件
 
 ---
 

docs/js-visualization-guide.md

@@ -0,0 +1,290 @@
+# 使用 JavaScript 生成可视化内容的技术方案
+
+## 概述
+
+本文档描述了在 OpenWebUI Action 插件中使用浏览器端 JavaScript 代码生成可视化内容（如思维导图、信息图等）并将结果保存到消息中的技术方案。
+
+## 核心架构
+
+```mermaid
+sequenceDiagram
+    participant Plugin as Python 插件
+    participant EventCall as __event_call__
+    participant Browser as 浏览器 (JS)
+    participant API as OpenWebUI API
+    participant DB as 数据库
+
+    Plugin->>EventCall: 1. 发送 execute 事件 (含 JS 代码)
+    EventCall->>Browser: 2. 执行 JS 代码
+    Browser->>Browser: 3. 加载可视化库 (D3/Markmap/AntV)
+    Browser->>Browser: 4. 渲染可视化内容
+    Browser->>Browser: 5. 转换为 Base64 Data URI
+    Browser->>API: 6. GET 获取当前消息内容
+    API-->>Browser: 7. 返回消息数据
+    Browser->>API: 8. POST 追加 Markdown 图片到消息
+    API->>DB: 9. 保存更新后的消息
+```
+
+## 关键步骤
+
+### 1. Python 端通过 `__event_call__` 执行 JS
+
+Python 插件**不直接修改 `body["messages"]`**，而是通过 `__event_call__` 发送 JS 代码让浏览器执行：
+
+```python
+async def action(
+    self,
+    body: dict,
+    __user__: dict = None,
+    __event_emitter__=None,
+    __event_call__: Optional[Callable[[Any], Awaitable[None]]] = None,
+    __metadata__: Optional[dict] = None,
+    __request__: Request = None,
+) -> dict:
+    # 从 body 获取 chat_id 和 message_id
+    chat_id = body.get("chat_id", "")
+    message_id = body.get("id", "")  # 注意：body["id"] 是 message_id
+    
+    # 通过 __event_call__ 执行 JS 代码
+    if __event_call__:
+        await __event_call__({
+            "type": "execute",
+            "data": {
+                "code": f"""
+(async function() {{
+    const chatId = "{chat_id}";
+    const messageId = "{message_id}";
+    // ... JS 渲染和 API 更新逻辑 ...
+}})();
+                """
+            },
+        })
+    
+    # 不修改 body，直接返回
+    return body
+```
+
+### 2. JavaScript 加载可视化库
+
+在浏览器端动态加载所需的 JS 库：
+
+```javascript
+// 加载 D3.js
+if (!window.d3) {
+    await new Promise((resolve, reject) => {
+        const script = document.createElement('script');
+        script.src = 'https://cdn.jsdelivr.net/npm/d3@7';
+        script.onload = resolve;
+        script.onerror = reject;
+        document.head.appendChild(script);
+    });
+}
+
+// 加载 Markmap (思维导图)
+if (!window.markmap) {
+    await loadScript('https://cdn.jsdelivr.net/npm/markmap-lib@0.17');
+    await loadScript('https://cdn.jsdelivr.net/npm/markmap-view@0.17');
+}
+```
+
+### 3. 渲染并转换为 Data URI
+
+```javascript
+// 创建 SVG 元素
+const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
+svg.setAttribute('width', '800');
+svg.setAttribute('height', '600');
+svg.setAttribute('xmlns', 'http://www.w3.org/2000/svg');
+
+// ... 执行渲染逻辑 (添加图形元素) ...
+
+// 转换为 Base64 Data URI
+const svgData = new XMLSerializer().serializeToString(svg);
+const base64 = btoa(unescape(encodeURIComponent(svgData)));
+const dataUri = 'data:image/svg+xml;base64,' + base64;
+```
+
+### 4. 获取当前消息内容
+
+由于 Python 端不传递原始内容，JS 需要通过 API 获取：
+
+```javascript
+const token = localStorage.getItem('token');
+
+// 获取当前聊天数据
+const getResponse = await fetch(`/api/v1/chats/${chatId}`, {
+    method: 'GET',
+    headers: {
+        'Authorization': `Bearer ${token}`
+    }
+});
+
+const chatData = await getResponse.json();
+
+// 查找目标消息
+let originalContent = '';
+if (chatData.chat && chatData.chat.messages) {
+    const targetMsg = chatData.chat.messages.find(m => m.id === messageId);
+    if (targetMsg && targetMsg.content) {
+        originalContent = targetMsg.content;
+    }
+}
+```
+
+### 5. 调用 API 更新消息
+
+```javascript
+// 构造新内容：原始内容 + Markdown 图片
+const markdownImage = `![可视化图片](${dataUri})`;
+const newContent = originalContent + '\n\n' + markdownImage;
+
+// 调用 API 更新消息
+const response = await fetch(`/api/v1/chats/${chatId}/messages/${messageId}/event`, {
+    method: 'POST',
+    headers: {
+        'Content-Type': 'application/json',
+        'Authorization': `Bearer ${token}`
+    },
+    body: JSON.stringify({
+        type: 'chat:message',
+        data: { content: newContent }
+    })
+});
+
+if (response.ok) {
+    console.log('消息更新成功！');
+}
+```
+
+## 完整示例
+
+参考 [js_render_poc.py](https://github.com/Fu-Jie/awesome-openwebui/blob/main/plugins/actions/js-render-poc/js_render_poc.py) 获取完整的 PoC 实现。
+
+## 事件类型
+
+| 类型 | 用途 |
+|------|------|
+| `chat:message:delta` | 增量更新（追加文本） |
+| `chat:message` | 完全替换消息内容 |
+
+```javascript
+// 增量更新
+{ type: "chat:message:delta", data: { content: "追加的内容" } }
+
+// 完全替换
+{ type: "chat:message", data: { content: "完整的新内容" } }
+```
+
+## 关键数据来源
+
+| 数据 | 来源 | 说明 |
+|------|------|------|
+| `chat_id` | `body["chat_id"]` | 聊天会话 ID |
+| `message_id` | `body["id"]` | ⚠️ 注意：是 `body["id"]`，不是 `body["message_id"]` |
+| `token` | `localStorage.getItem('token')` | 用户认证 Token |
+| `originalContent` | 通过 API `GET /api/v1/chats/{chatId}` 获取 | 当前消息内容 |
+
+## Python 端 API
+
+| 参数 | 类型 | 说明 |
+|------|------|------|
+| `__event_emitter__` | Callable | 发送状态/通知事件 |
+| `__event_call__` | Callable | 执行 JS 代码（用于可视化渲染） |
+| `__metadata__` | dict | 元数据（可能为 None） |
+| `body` | dict | 请求体，包含 messages、chat_id、id 等 |
+
+### body 结构示例
+
+```json
+{
+  "model": "gemini-3-flash-preview",
+  "messages": [...],
+  "chat_id": "ac2633a3-5731-4944-98e3-bf9b3f0ef0ab",
+  "id": "2e0bb7d4-dfc0-43d7-b028-fd9e06c6fdc8",
+  "session_id": "bX30sHI8r4_CKxCdAAAL"
+}
+```
+
+### 常用事件
+
+```python
+# 发送状态更新
+await __event_emitter__({
+    "type": "status",
+    "data": {"description": "正在渲染...", "done": False}
+})
+
+# 执行 JS 代码
+await __event_call__({
+    "type": "execute",
+    "data": {"code": "console.log('Hello from Python!')"}
+})
+
+# 发送通知
+await __event_emitter__({
+    "type": "notification",
+    "data": {"type": "success", "content": "渲染完成！"}
+})
+```
+
+## 适用场景
+
+- **思维导图** (Markmap)
+- **信息图** (AntV Infographic)
+- **流程图** (Mermaid)
+- **数据图表** (ECharts, Chart.js)
+- **任何需要 JS 渲染的可视化内容**
+
+## 注意事项
+
+### 1. 竞态条件问题
+
+⚠️ **多次快速点击会导致内容覆盖问题**
+
+由于 API 调用是异步的，如果用户快速多次触发 Action：
+- 第一次点击：获取原始内容 A → 渲染 → 更新为 A+图片1
+- 第二次点击：可能获取到旧内容 A（第一次还没保存完）→ 更新为 A+图片2
+
+结果：图片1 被覆盖丢失！
+
+**解决方案**：
+- 添加防抖（debounce）机制
+- 使用锁/标志位防止重复执行
+- 或使用 `chat:message:delta` 增量更新
+
+### 2. 不要直接修改 `body["messages"]`
+
+消息更新应由 JS 通过 API 完成，确保获取最新内容。
+
+### 3. f-string 限制
+
+Python f-string 内不能直接使用反斜杠，需要将转义字符串预先处理：
+
+```python
+# 转义 JSON 中的特殊字符
+body_json = json.dumps(data, ensure_ascii=False)
+escaped = body_json.replace("\\", "\\\\").replace("`", "\\`").replace("${", "\\${")
+```
+
+### 4. Data URI 大小限制
+
+Base64 编码会增加约 33% 的体积，复杂图片可能导致消息过大。
+
+### 5. 跨域问题
+
+确保 CDN 资源支持 CORS。
+
+### 6. API 权限
+
+确保用户 token 有权限访问和更新目标消息。
+
+## 与传统方式对比
+
+| 特性 | 传统方式 (修改 body) | 新方式 (__event_call__) |
+|------|---------------------|------------------------|
+| 消息更新 | Python 直接修改 | JS 通过 API 更新 |
+| 原始内容 | Python 传递给 JS | JS 通过 API 获取 |
+| 灵活性 | 低 | 高 |
+| 实时性 | 一次性 | 可多次更新 |
+| 复杂度 | 简单 | 中等 |
+| 竞态风险 | 低 | ⚠️ 需要处理 |

docs/plugins/actions/export-to-word.md

@@ -1,7 +1,7 @@
 # Export to Word
 
 <span class="category-badge action">Action</span>
-<span class="version-badge">v0.2.0</span>
+<span class="version-badge">v0.4.1</span>
 
 Export conversation to Word (.docx) with **syntax highlighting**, **native math equations**, **Mermaid diagrams**, **citations**, and **enhanced table formatting**.
 
@@ -34,11 +34,34 @@ You can configure the following settings via the **Valves** button in the plugin
 | Valve | Description | Default |
 | :--- | :--- | :--- |
 | `TITLE_SOURCE` | Source for document title/filename. Options: `chat_title`, `ai_generated`, `markdown_title` | `chat_title` |
-| `MERMAID_JS_URL` | URL for the Mermaid.js library (for diagram rendering). | `https://cdn.jsdelivr.net/npm/mermaid@10.9.1/dist/mermaid.min.js` |
-| `MERMAID_PNG_SCALE` | Scale factor for Mermaid PNG generation (Resolution). Higher = clearer but larger file size. | `3.0` |
-| `MERMAID_DISPLAY_SCALE` | Scale factor for Mermaid visual size in Word. >1.0 to enlarge, <1.0 to shrink. | `1.5` |
-| `MERMAID_OPTIMIZE_LAYOUT` | Automatically convert LR (Left-Right) flowcharts to TD (Top-Down) for better fit. | `True` |
+| `MAX_EMBED_IMAGE_MB` | Maximum image size to embed into DOCX (MB). | `20` |
+| `UI_LANGUAGE` | User interface language. Options: `en` (English), `zh` (Chinese). | `en` |
+| `FONT_LATIN` | Font name for Latin characters. | `Times New Roman` |
+| `FONT_ASIAN` | Font name for Asian characters. | `SimSun` |
+| `FONT_CODE` | Font name for code blocks. | `Consolas` |
+| `TABLE_HEADER_COLOR` | Table header background color (Hex without #). | `F2F2F2` |
+| `TABLE_ZEBRA_COLOR` | Table alternating row background color (Hex without #). | `FBFBFB` |
+| `MERMAID_JS_URL` | URL for the Mermaid.js library. | `https://cdn.jsdelivr.net/npm/mermaid@11.12.2/dist/mermaid.min.js` |
+| `MERMAID_JSZIP_URL` | URL for the JSZip library (required for DOCX manipulation). | `https://cdnjs.cloudflare.com/ajax/libs/jszip/3.10.1/jszip.min.js` |
+| `MERMAID_PNG_SCALE` | Scale factor for Mermaid PNG generation (Resolution). | `3.0` |
+| `MERMAID_DISPLAY_SCALE` | Scale factor for Mermaid visual size in Word. | `1.0` |
+| `MERMAID_OPTIMIZE_LAYOUT` | Automatically convert LR (Left-Right) flowcharts to TD (Top-Down). | `False` |
+| `MERMAID_BACKGROUND` | Background color for Mermaid diagrams (e.g., `white`, `transparent`). | `transparent` |
 | `MERMAID_CAPTIONS_ENABLE` | Enable/disable figure captions for Mermaid diagrams. | `True` |
+| `MERMAID_CAPTION_STYLE` | Paragraph style name for Mermaid captions. | `Caption` |
+| `MERMAID_CAPTION_PREFIX` | Caption prefix label (e.g., 'Figure'). Empty = auto-detect based on language. | `""` |
+| `MATH_ENABLE` | Enable LaTeX math block conversion. | `True` |
+| `MATH_INLINE_DOLLAR_ENABLE` | Enable inline `$ ... $` math conversion. | `True` |
+
+### User-Level Configuration (UserValves)
+
+Users can override the following settings in their personal settings:
+- `TITLE_SOURCE`
+- `UI_LANGUAGE`
+- `FONT_LATIN`, `FONT_ASIAN`, `FONT_CODE`
+- `TABLE_HEADER_COLOR`, `TABLE_ZEBRA_COLOR`
+- `MERMAID_...` (Selected Mermaid settings)
+- `MATH_...` (Math settings)
 
 ---
 

docs/plugins/actions/export-to-word.zh.md

@@ -1,7 +1,7 @@
 # Export to Word（导出为 Word）
 
 <span class="category-badge action">Action</span>
-<span class="version-badge">v0.2.0</span>
+<span class="version-badge">v0.4.1</span>
 
 将当前对话导出为完美格式的 Word 文档，支持**代码语法高亮**、**原生数学公式**、**Mermaid 图表**、**引用资料**以及**增强表格**渲染。
 
@@ -33,12 +33,35 @@ Export to Word 插件会把聊天消息从 Markdown 转成精致的 Word 文档
 
 | Valve | 说明 | 默认值 |
 | :--- | :--- | :--- |
-| `TITLE_SOURCE` | 文档标题/文件名的来源。选项：`chat_title` (对话标题), `ai_generated` (AI 生成), `markdown_title` (Markdown 标题) | `chat_title` |
-| `MERMAID_JS_URL` | Mermaid.js 库的 URL（用于图表渲染）。 | `https://cdn.jsdelivr.net/npm/mermaid@10.9.1/dist/mermaid.min.js` |
-| `MERMAID_PNG_SCALE` | Mermaid PNG 生成缩放比例（分辨率）。越高越清晰但文件越大。 | `3.0` |
-| `MERMAID_DISPLAY_SCALE` | Mermaid 在 Word 中的显示比例（视觉大小）。>1.0 放大, <1.0 缩小。 | `1.5` |
-| `MERMAID_OPTIMIZE_LAYOUT` | 优化 Mermaid 布局: 自动将 LR (左右) 转换为 TD (上下) 以适应页面。 | `True` |
-| `MERMAID_CAPTIONS_ENABLE` | 启用/禁用 Mermaid 图表的图注。 | `True` |
+| `文档标题来源` | 文档标题/文件名的来源。选项：`chat_title` (对话标题), `ai_generated` (AI 生成), `markdown_title` (Markdown 标题) | `chat_title` |
+| `最大嵌入图片大小MB` | 嵌入图片的最大大小 (MB)。 | `20` |
+| `界面语言` | 界面语言。选项：`en` (英语), `zh` (中文)。 | `zh` |
+| `英文字体` | 英文字体名称。 | `Calibri` |
+| `中文字体` | 中文字体名称。 | `SimSun` |
+| `代码字体` | 代码字体名称。 | `Consolas` |
+| `表头背景色` | 表头背景色（十六进制，不带#）。 | `F2F2F2` |
+| `表格隔行背景色` | 表格隔行背景色（十六进制，不带#）。 | `FBFBFB` |
+| `Mermaid_JS地址` | Mermaid.js 库的 URL。 | `https://cdn.jsdelivr.net/npm/mermaid@11.12.2/dist/mermaid.min.js` |
+| `JSZip库地址` | JSZip 库的 URL（用于 DOCX 操作）。 | `https://cdnjs.cloudflare.com/ajax/libs/jszip/3.10.1/jszip.min.js` |
+| `Mermaid_PNG缩放比例` | Mermaid PNG 生成缩放比例（分辨率）。 | `3.0` |
+| `Mermaid显示比例` | Mermaid 在 Word 中的显示比例（视觉大小）。 | `1.0` |
+| `Mermaid布局优化` | 优化 Mermaid 布局: 自动将 LR (左右) 转换为 TD (上下)。 | `False` |
+| `Mermaid背景色` | Mermaid 图表背景色（如 `white`, `transparent`）。 | `transparent` |
+| `启用Mermaid图注` | 启用/禁用 Mermaid 图表的图注。 | `True` |
+| `Mermaid图注样式` | Mermaid 图注的段落样式名称。 | `Caption` |
+| `Mermaid图注前缀` | 图注前缀（如 '图'）。留空则根据语言自动检测。 | `""` |
+| `启用数学公式` | 启用 LaTeX 数学公式块转换。 | `True` |
+| `启用行内公式` | 启用行内 `$ ... $` 数学公式转换。 | `True` |
+
+### 用户级配置 (UserValves)
+
+用户可以在个人设置中覆盖以下配置：
+- `文档标题来源`
+- `界面语言`
+- `英文字体`, `中文字体`, `代码字体`
+- `表头背景色`, `表格隔行背景色`
+- `Mermaid_...` (部分 Mermaid 设置)
+- `启用数学公式`, `启用行内公式`
 
 ---
 

docs/plugins/actions/index.md

@@ -33,7 +33,7 @@ Actions are interactive plugins that:
 
     Transform text into professional infographics using AntV visualization engine with various templates.
 
-    **Version:** 1.3.0
+    **Version:** 1.4.0
 
     [:octicons-arrow-right-24: Documentation](smart-infographic.md)
 
@@ -63,7 +63,7 @@ Actions are interactive plugins that:
 
     Export the current conversation to a formatted Word doc with **syntax highlighting**, **native math equations**, **Mermaid diagrams**, **citations**, and **enhanced table formatting**.
     
-    **Version:** 0.2.0
+    **Version:** 0.4.1
 
     [:octicons-arrow-right-24: Documentation](export-to-word.md)
 
@@ -77,6 +77,16 @@ Actions are interactive plugins that:
 
     [:octicons-arrow-right-24: Documentation](summary.md)
 
+-   :material-image-text:{ .lg .middle } **Infographic to Markdown**
+
+    ---
+
+    AI-powered infographic generator that renders SVG and embeds it as Markdown Data URL image.
+
+    **Version:** 1.0.0
+
+    [:octicons-arrow-right-24: Documentation](infographic-markdown.md)
+
 </div>
 
 ---

docs/plugins/actions/index.zh.md

@@ -33,7 +33,7 @@ Actions 是交互式插件，能够：
 
     使用 AntV 可视化引擎，将文本转成专业的信息图。
 
-    **版本：** 1.3.0
+    **版本：** 1.4.0
 
     [:octicons-arrow-right-24: 查看文档](smart-infographic.md)
 
@@ -63,7 +63,7 @@ Actions 是交互式插件，能够：
 
     将当前对话导出为完美格式的 Word 文档，支持**代码语法高亮**、**原生数学公式**、**Mermaid 图表**、**引用资料**以及**增强表格**渲染。
 
-    **版本：** 0.2.0
+    **版本：** 0.4.1
 
     [:octicons-arrow-right-24: 查看文档](export-to-word.md)
 
@@ -77,6 +77,16 @@ Actions 是交互式插件，能够：
 
     [:octicons-arrow-right-24: 查看文档](summary.md)
 
+-   :material-image-text:{ .lg .middle } **信息图转 Markdown**
+
+    ---
+
+    AI 驱动的信息图生成器，渲染 SVG 并以 Markdown Data URL 图片嵌入。
+
+    **版本：** 1.0.0
+
+    [:octicons-arrow-right-24: 查看文档](infographic-markdown.zh.md)
+
 </div>
 
 ---

docs/plugins/actions/infographic-markdown.md

@@ -0,0 +1,120 @@
+# Infographic to Markdown
+
+> **Version:** 1.0.0 | **Author:** Fu-Jie
+
+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.
+
+### Key Features
+
+- :robot: **AI-Powered**: Automatically analyzes text and selects the best infographic template
+- :bar_chart: **Multiple Templates**: Supports 18+ infographic templates (lists, charts, comparisons, etc.)
+- :framed_picture: **Self-Contained**: SVG/PNG embedded as Data URL, no external dependencies
+- :memo: **Markdown Native**: Results are pure Markdown images, compatible everywhere
+- :arrows_counterclockwise: **API Writeback**: Updates message content via REST API for persistence
+
+### How It Works
+
+```mermaid
+graph TD
+    A[User triggers action] --> B[Python extracts message content]
+    B --> C[LLM generates Infographic syntax]
+    C --> D[Frontend JS loads AntV library]
+    D --> E[Render SVG offscreen]
+    E --> F[Export to Data URL]
+    F --> G[Update message via API]
+    G --> H[Display as Markdown image]
+```
+
+## Installation
+
+1. Download `infographic_markdown.py` (English) or `infographic_markdown_cn.py` (Chinese)
+2. Navigate to **Admin Panel** → **Settings** → **Functions**
+3. Upload the file and configure settings
+4. Use the action button in chat messages
+
+## Configuration
+
+| 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 |
+
+## Usage Example
+
+1. Generate some text content in the chat (or have the AI generate it)
+2. Click the **📊 Infographic to Markdown** action button
+3. Wait for AI analysis and SVG rendering
+4. The infographic will be embedded as a Markdown image
+
+## Technical Details
+
+### Data URL Embedding
+
+The plugin converts SVG graphics to Base64-encoded Data URLs:
+
+```javascript
+const svgData = new XMLSerializer().serializeToString(svg);
+const base64 = btoa(unescape(encodeURIComponent(svgData)));
+const dataUri = "data:image/svg+xml;base64," + base64;
+const markdownImage = `![description](${dataUri})`;
+```
+
+### AntV toDataURL API
+
+```javascript
+// Export as SVG (recommended)
+const svgUrl = await instance.toDataURL({
+    type: 'svg',
+    embedResources: true
+});
+
+// Export as PNG
+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)

docs/plugins/actions/infographic-markdown.zh.md

@@ -0,0 +1,120 @@
+# 信息图转 Markdown
+
+> **版本:** 1.0.0 | **作者:** Fu-Jie
+
+AI 驱动的信息图生成器，在前端渲染 SVG 并以 Data URL 图片格式直接嵌入到 Markdown 中。
+
+## 概述
+
+这个插件结合了 AI 文本分析能力和 AntV Infographic 可视化引擎，生成精美的信息图并以 Markdown 图片格式直接嵌入到聊天消息中。
+
+### 主要特性
+
+- :robot: **AI 驱动**: 自动分析文本并选择最佳的信息图模板
+- :bar_chart: **多种模板**: 支持 18+ 种信息图模板（列表、图表、对比等）
+- :framed_picture: **自包含**: SVG/PNG 以 Data URL 嵌入，无外部依赖
+- :memo: **Markdown 原生**: 结果是纯 Markdown 图片，兼容任何平台
+- :arrows_counterclockwise: **API 回写**: 通过 REST API 更新消息内容实现持久化
+
+### 工作原理
+
+```mermaid
+graph TD
+    A[用户触发动作] --> B[Python 提取消息内容]
+    B --> C[LLM 生成 Infographic 语法]
+    C --> D[前端 JS 加载 AntV 库]
+    D --> E[离屏渲染 SVG]
+    E --> F[导出为 Data URL]
+    F --> G[通过 API 更新消息]
+    G --> H[显示为 Markdown 图片]
+```
+
+## 安装
+
+1. 下载 `infographic_markdown.py`（英文版）或 `infographic_markdown_cn.py`（中文版）
+2. 进入 **管理面板** → **设置** → **功能**
+3. 上传文件并配置设置
+4. 在聊天消息中使用动作按钮
+
+## 配置选项
+
+| 参数 | 类型 | 默认值 | 描述 |
+|------|------|--------|------|
+| `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` | 面积图 |
+
+## 使用示例
+
+1. 在聊天中生成一些文本内容（或让 AI 生成）
+2. 点击 **📊 信息图转 Markdown** 动作按钮
+3. 等待 AI 分析和 SVG 渲染
+4. 信息图将以 Markdown 图片形式嵌入
+
+## 技术细节
+
+### Data URL 嵌入
+
+插件将 SVG 图形转换为 Base64 编码的 Data URL：
+
+```javascript
+const svgData = new XMLSerializer().serializeToString(svg);
+const base64 = btoa(unescape(encodeURIComponent(svgData)));
+const dataUri = "data:image/svg+xml;base64," + base64;
+const markdownImage = `![描述](${dataUri})`;
+```
+
+### 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)

docs/plugins/actions/smart-infographic.md

@@ -1,7 +1,7 @@
 # Smart Infographic
 
 <span class="category-badge action">Action</span>
-<span class="version-badge">v1.3.0</span>
+<span class="version-badge">v1.4.0</span>
 
 An AntV Infographic engine powered plugin that transforms long text into professional, beautiful infographics with a single click.
 
@@ -19,6 +19,8 @@ The Smart Infographic plugin uses AI to analyze text content and generate profes
 - :material-download: **Multi-Format Export**: Download your infographics as **SVG**, **PNG**, or **Standalone HTML** file
 - :material-theme-light-dark: **Theme Support**: Supports Dark/Light modes, auto-adapts theme colors
 - :material-cellphone-link: **Responsive Design**: Generated charts look great on both desktop and mobile devices
+- :material-image: **Image Embedding**: Option to embed charts as static images for better compatibility
+- :material-monitor-screenshot: **Adaptive Sizing**: Images automatically adapt to the chat container width
 
 ---
 
@@ -60,6 +62,7 @@ The Smart Infographic plugin uses AI to analyze text content and generate profes
 | `MIN_TEXT_LENGTH` | integer | `100` | Minimum characters required to trigger analysis |
 | `CLEAR_PREVIOUS_HTML` | boolean | `false` | Whether to clear previous charts |
 | `MESSAGE_COUNT` | integer | `1` | Number of recent messages to use for analysis |
+| `OUTPUT_MODE` | string | `html` | `html` for interactive chart (default), `image` for static image embedding |
 
 ---
 

docs/plugins/actions/smart-infographic.zh.md

@@ -1,7 +1,7 @@
 # Smart Infographic（智能信息图）
 
 <span class="category-badge action">Action</span>
-<span class="version-badge">v1.0.0</span>
+<span class="version-badge">v1.4.0</span>
 
 基于 AntV 信息图引擎，将长文本一键转成专业、美观的信息图。
 
@@ -19,6 +19,8 @@ Smart Infographic 使用 AI 分析文本，并基于 AntV 可视化引擎生成
 - :material-download: **多格式导出**：支持下载 **SVG**、**PNG**、**独立 HTML**
 - :material-theme-light-dark: **主题支持**：适配深色/浅色模式
 - :material-cellphone-link: **响应式**：桌面与移动端都能良好展示
+- :material-image: **图片嵌入**：支持将图表作为静态图片嵌入，兼容性更好
+- :material-monitor-screenshot: **自适应尺寸**：图片模式下自动适应聊天容器宽度
 
 ---
 
@@ -60,6 +62,7 @@ Smart Infographic 使用 AI 分析文本，并基于 AntV 可视化引擎生成
 | `MIN_TEXT_LENGTH` | integer | `100` | 触发分析的最小字符数 |
 | `CLEAR_PREVIOUS_HTML` | boolean | `false` | 是否清空之前生成的图表 |
 | `MESSAGE_COUNT` | integer | `1` | 参与分析的最近消息条数 |
+| `OUTPUT_MODE` | string | `html` | `html` 为交互式图表（默认），`image` 为静态图片嵌入 |
 
 ---
 

plugins/actions/ACTION_PLUGIN_TEMPLATE.py

@@ -315,7 +315,7 @@ class Action:
                     if role == "user"
                     else "Assistant" if role == "assistant" else role
                 )
-                aggregated_parts.append(f"[{role_label} Message {i}]\n{text_content}")
+                aggregated_parts.append(f"{text_content}")
 
         if not aggregated_parts:
             return body  # Or handle error

plugins/actions/ACTION_PLUGIN_TEMPLATE_CN.py

@@ -326,7 +326,7 @@ class Action:
                     if role == "user"
                     else "助手" if role == "assistant" else role
                 )
-                aggregated_parts.append(f"[{role_label} 消息 {i}]\n{text_content}")
+                aggregated_parts.append(f"{text_content}")
 
         if not aggregated_parts:
             return body  # 或者处理错误

plugins/actions/export_to_docx/README.md

@@ -24,11 +24,24 @@ You can configure the following settings via the **Valves** button in the plugin
     - `chat_title`: Use the conversation title (default).
     - `ai_generated`: Use AI to generate a short title based on the content.
     - `markdown_title`: Extract the first h1/h2 heading from the Markdown content.
-- **MERMAID_JS_URL**: URL for the Mermaid.js library (for diagram rendering).
+- **MAX_EMBED_IMAGE_MB**: Maximum image size to embed into DOCX (MB). Default: `20`.
+- **UI_LANGUAGE**: User interface language, supports `en` (English) and `zh` (Chinese). Default: `en`.
+- **FONT_LATIN**: Font name for Latin characters. Default: `Times New Roman`.
+- **FONT_ASIAN**: Font name for Asian characters. Default: `SimSun`.
+- **FONT_CODE**: Font name for code blocks. Default: `Consolas`.
+- **TABLE_HEADER_COLOR**: Table header background color (Hex without #). Default: `F2F2F2`.
+- **TABLE_ZEBRA_COLOR**: Table alternating row background color (Hex without #). Default: `FBFBFB`.
+- **MERMAID_JS_URL**: URL for the Mermaid.js library.
+- **MERMAID_JSZIP_URL**: URL for the JSZip library (required for DOCX manipulation).
 - **MERMAID_PNG_SCALE**: Scale factor for Mermaid PNG generation (Resolution). Default: `3.0`.
-- **MERMAID_DISPLAY_SCALE**: Scale factor for Mermaid visual size in Word. Default: `1.5`.
-- **MERMAID_OPTIMIZE_LAYOUT**: Automatically convert LR (Left-Right) flowcharts to TD (Top-Down). Default: `True`.
-- **MERMAID_CAPTIONS_ENABLE**: Enable/disable figure captions for Mermaid diagrams.
+- **MERMAID_DISPLAY_SCALE**: Scale factor for Mermaid visual size in Word. Default: `1.0`.
+- **MERMAID_OPTIMIZE_LAYOUT**: Automatically convert LR (Left-Right) flowcharts to TD (Top-Down). Default: `False`.
+- **MERMAID_BACKGROUND**: Background color for Mermaid diagrams (e.g., `white`, `transparent`). Default: `transparent`.
+- **MERMAID_CAPTIONS_ENABLE**: Enable/disable figure captions for Mermaid diagrams. Default: `True`.
+- **MERMAID_CAPTION_STYLE**: Paragraph style name for Mermaid captions. Default: `Caption`.
+- **MERMAID_CAPTION_PREFIX**: Caption prefix label (e.g., 'Figure'). Empty = auto-detect based on language.
+- **MATH_ENABLE**: Enable LaTeX math block conversion (`\[...\]` and `$$...$$`). Default: `True`.
+- **MATH_INLINE_DOLLAR_ENABLE**: Enable inline `$ ... $` math conversion. Default: `True`.
 
 ## Supported Markdown Syntax
 
@@ -75,6 +88,28 @@ All dependencies are declared in the plugin docstring.
 
 ## Changelog
 
+### v0.4.0
+
+- **Multi-language Support**: Added UI language switching (English/Chinese) with localized messages.
+- **Font & Style Configuration**: Customizable fonts for Latin/Asian text and code, plus table colors.
+- **Mermaid Enhancements**: 
+    - Hybrid client-side rendering (SVG+PNG) for better clarity and compatibility.
+    - Configurable background color, fixing issues in dark mode.
+    - Added error boundaries to prevent export failures on render errors.
+- **Performance**: Real-time progress updates for large document exports.
+- **Bug Fixes**: 
+    - Fixed parsing errors in Markdown tables containing code blocks or links.
+    - Fixed parsing issues with underscores (`_`), asterisks (`*`), and tildes (`~`) used as long separators.
+    - Enhanced error handling for image embedding.
+
+### v0.3.0
+
+- **Mermaid Diagrams**: Native support for rendering Mermaid diagrams as images in Word.
+- **Native Math**: Converts LaTeX equations to native Office MathML for editable equations.
+- **Citations**: Automatic bibliography generation and citation linking.
+- **Reasoning Removal**: Option to strip `<think>` blocks from the output.
+- **Table Enhancements**: Improved table formatting with smart column widths.
+
 ### v0.2.0
 - Added native math equation support (LaTeX → OMML)
 - Added Mermaid diagram rendering

plugins/actions/export_to_docx/README_CN.md

@@ -20,15 +20,28 @@
 
 您可以通过插件设置中的 **Valves** 按钮配置以下选项：
 
-- **TITLE_SOURCE**：选择文档标题/文件名的生成方式。
+- **文档标题来源**：选择文档标题/文件名的生成方式。
     - `chat_title`：使用对话标题（默认）。
     - `ai_generated`：使用 AI 根据内容生成简短标题。
     - `markdown_title`：从 Markdown 内容中提取第一个一级或二级标题。
-- **MERMAID_JS_URL**：Mermaid.js 库的 URL（用于图表渲染）。
-- **MERMAID_PNG_SCALE**：Mermaid PNG 生成缩放比例（分辨率）。默认：`3.0`。
-- **MERMAID_DISPLAY_SCALE**：Mermaid 在 Word 中的显示比例（视觉大小）。默认：`1.5`。
-- **MERMAID_OPTIMIZE_LAYOUT**：自动将 LR（左右）流程图转换为 TD（上下）。默认：`True`。
-- **MERMAID_CAPTIONS_ENABLE**：启用/禁用 Mermaid 图表的图注。
+- **最大嵌入图片大小MB**：嵌入图片的最大大小 (MB)。默认：`20`。
+- **界面语言**：界面语言，支持 `en` (英语) 和 `zh` (中文)。默认：`zh`。
+- **英文字体**：英文字体名称。默认：`Calibri`。
+- **中文字体**：中文字体名称。默认：`SimSun`。
+- **代码字体**：代码字体名称。默认：`Consolas`。
+- **表头背景色**：表头背景色（十六进制，不带#）。默认：`F2F2F2`。
+- **表格隔行背景色**：表格隔行背景色（十六进制，不带#）。默认：`FBFBFB`。
+- **Mermaid_JS地址**：Mermaid.js 库的 URL。
+- **JSZip库地址**：JSZip 库的 URL（用于 DOCX 操作）。
+- **Mermaid_PNG缩放比例**：Mermaid PNG 生成缩放比例（分辨率）。默认：`3.0`。
+- **Mermaid显示比例**：Mermaid 在 Word 中的显示比例（视觉大小）。默认：`1.0`。
+- **Mermaid布局优化**：自动将 LR（左右）流程图转换为 TD（上下）。默认：`False`。
+- **Mermaid背景色**：Mermaid 图表背景色（如 `white`, `transparent`）。默认：`transparent`。
+- **启用Mermaid图注**：启用/禁用 Mermaid 图表的图注。默认：`True`。
+- **Mermaid图注样式**：Mermaid 图注的段落样式名称。默认：`Caption`。
+- **Mermaid图注前缀**：图注前缀（如 '图'）。留空则根据语言自动检测。
+- **启用数学公式**：启用 LaTeX 数学公式块转换（`\[...\]` 和 `$$...$$`）。默认：`True`。
+- **启用行内公式**：启用行内 `$ ... $` 数学公式转换。默认：`True`。
 
 ## 支持的 Markdown 语法
 
@@ -75,6 +88,32 @@
 
 ## 更新日志
 
+### v0.4.1
+
+- **中文参数名**: 将插件配置项名称和描述全部汉化，提升中文用户体验。
+
+### v0.4.0
+
+- **多语言支持**: 新增界面语言切换（中文/英文），提示信息更友好。
+- **字体与样式配置**: 支持自定义中英文字体、代码字体以及表格颜色。
+- **Mermaid 增强**: 
+    - 客户端混合渲染（SVG+PNG），提高清晰度与兼容性。
+    - 支持背景色配置，修复深色模式下的显示问题。
+    - 增加错误边界，渲染失败时显示提示而非中断导出。
+- **性能优化**: 导出大型文档时提供实时进度反馈。
+- **Bug 修复**: 
+    - 修复 Markdown 表格中包含代码块或链接时的解析错误。
+    - 修复下划线（`_`）、星号（`*`）、波浪号（`~`）作为长分隔符时的解析问题。
+    - 增强图片嵌入的错误处理。
+
+### v0.3.0
+
+- **Mermaid 图表**: 原生支持将 Mermaid 图表渲染为 Word 中的图片。
+- **原生公式**: 将 LaTeX 公式转换为原生 Office MathML，支持在 Word 中编辑。
+- **引用参考**: 自动生成参考文献列表并链接引用。
+- **移除推理**: 选项支持从输出中移除 `<think>` 推理块。
+- **表格增强**: 改进表格格式，支持智能列宽。
+
 ### v0.2.0
 - 新增原生数学公式支持（LaTeX → OMML）
 - 新增 Mermaid 图表渲染

plugins/actions/infographic/README.md

@@ -38,6 +38,7 @@ You can adjust the following parameters in the plugin settings to optimize the g
 | **Min Text Length (MIN_TEXT_LENGTH)** | `100` | Minimum characters required to trigger analysis, preventing accidental triggers on short text. |
 | **Clear Previous (CLEAR_PREVIOUS_HTML)** | `False` | Whether to clear previous charts. If `False`, new charts will be appended below. |
 | **Message Count (MESSAGE_COUNT)** | `1` | Number of recent messages to use for analysis. Increase this for more context. |
+| **Output Mode (OUTPUT_MODE)** | `html` | `html` for interactive chart (default), `image` for static image embedding (useful for mobile/non-html clients). |
 
 ## 📝 Syntax Example (For Advanced Users)
 
@@ -66,6 +67,12 @@ MIT License
 
 ## Changelog
 
+### v1.4.0
+
+- ✨ Added **Image Output Mode**: Support embedding infographics as static images (SVG) for better compatibility.
+- 📱 Added **Responsive Sizing**: Images now auto-adapt to the chat container width.
+- 🔧 Added `OUTPUT_MODE` valve configuration.
+
 ### v1.3.2
 
 - Removed debug messages from output

plugins/actions/infographic/README_CN.md

@@ -38,6 +38,7 @@
 | **最小文本长度 (MIN_TEXT_LENGTH)** | `100` | 触发分析所需的最小字符数，防止对过短的对话误操作。 |
 | **清除旧结果 (CLEAR_PREVIOUS_HTML)** | `False` | 每次生成是否清除之前的图表。若为 `False`，新图表将追加在下方。 |
 | **上下文消息数 (MESSAGE_COUNT)** | `1` | 用于分析的最近消息条数。增加此值可让 AI 参考更多对话背景。 |
+| **输出模式 (OUTPUT_MODE)** | `html` | `html` 为交互式图表（默认），`image` 为静态图片嵌入（适合移动端或不支持 HTML 的客户端）。 |
 
 ## 📝 语法示例 (高级用户)
 
@@ -66,6 +67,12 @@ MIT License
 
 ## 更新日志
 
+### v1.4.0
+
+- ✨ 新增 **图片输出模式**：支持将信息图作为静态图片 (SVG) 嵌入，兼容性更好。
+- 📱 新增 **响应式尺寸**：图片模式下自动适应聊天容器宽度。
+- 🔧 新增 `OUTPUT_MODE` 配置项。
+
 ### v1.3.2
 
 - 移除输出中的调试信息

plugins/actions/infographic/infographic.py

@@ -3,12 +3,12 @@ title: 📊 Smart Infographic (AntV)
 author: jeff
 author_url: https://github.com/Fu-Jie/awesome-openwebui
 icon_url: data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9ImN1cnJlbnRDb2xvciIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiPgogIDxsaW5lIHgxPSIxMiIgeTE9IjIwIiB4Mj0iMTIiIHkyPSIxMCIgLz4KICA8bGluZSB4MT0iMTgiIHkxPSIyMCIgeDI9IjE4IiB5Mj0iNCIgLz4KICA8bGluZSB4MT0iNiIgeTE9IjIwIiB4Mj0iNiIgeTI9IjE2IiAvPgo8L3N2Zz4=
-version: 1.3.2
+version: 1.4.0
 description: AI-powered infographic generator based on AntV Infographic. Supports professional templates, auto-icon matching, and SVG/PNG downloads.
 """
 
 from pydantic import BaseModel, Field
-from typing import Optional, Dict, Any
+from typing import Optional, Dict, Any, Callable, Awaitable
 import logging
 import time
 import re
@@ -821,10 +821,54 @@ class Action:
             default=1,
             description="Number of recent messages to use for generation. Set to 1 for just the last message, or higher for more context.",
         )
+        OUTPUT_MODE: str = Field(
+            default="html",
+            description="Output mode: 'html' for interactive HTML (default), or 'image' to embed as Markdown image.",
+        )
 
     def __init__(self):
         self.valves = self.Valves()
 
+    def _extract_chat_id(self, body: dict, metadata: Optional[dict]) -> str:
+        """Extract chat_id from body or metadata"""
+        if isinstance(body, dict):
+            chat_id = body.get("chat_id")
+            if isinstance(chat_id, str) and chat_id.strip():
+                return chat_id.strip()
+
+            body_metadata = body.get("metadata", {})
+            if isinstance(body_metadata, dict):
+                chat_id = body_metadata.get("chat_id")
+                if isinstance(chat_id, str) and chat_id.strip():
+                    return chat_id.strip()
+
+        if isinstance(metadata, dict):
+            chat_id = metadata.get("chat_id")
+            if isinstance(chat_id, str) and chat_id.strip():
+                return chat_id.strip()
+
+        return ""
+
+    def _extract_message_id(self, body: dict, metadata: Optional[dict]) -> str:
+        """Extract message_id from body or metadata"""
+        if isinstance(body, dict):
+            message_id = body.get("id")
+            if isinstance(message_id, str) and message_id.strip():
+                return message_id.strip()
+
+            body_metadata = body.get("metadata", {})
+            if isinstance(body_metadata, dict):
+                message_id = body_metadata.get("message_id")
+                if isinstance(message_id, str) and message_id.strip():
+                    return message_id.strip()
+
+        if isinstance(metadata, dict):
+            message_id = metadata.get("message_id")
+            if isinstance(message_id, str) and message_id.strip():
+                return message_id.strip()
+
+        return ""
+
     def _extract_infographic_syntax(self, llm_output: str) -> str:
         """Extract infographic syntax from LLM output"""
         match = re.search(r"```infographic\s*(.*?)\s*```", llm_output, re.DOTALL)
@@ -912,14 +956,332 @@ class Action:
 
         return base_html.strip()
 
+    def _generate_image_js_code(
+        self,
+        unique_id: str,
+        chat_id: str,
+        message_id: str,
+        infographic_syntax: str,
+    ) -> str:
+        """Generate JavaScript code for frontend SVG rendering and image embedding"""
+
+        # Escape the syntax for JS embedding
+        syntax_escaped = (
+            infographic_syntax.replace("\\", "\\\\")
+            .replace("`", "\\`")
+            .replace("${", "\\${")
+            .replace("</script>", "<\\/script>")
+        )
+
+        return f"""
+(async function() {{
+    const uniqueId = "{unique_id}";
+    const chatId = "{chat_id}";
+    const messageId = "{message_id}";
+    const defaultWidth = 1200;
+    const defaultHeight = 800;
+    
+    // Auto-detect chat container width for responsive sizing
+    let svgWidth = defaultWidth;
+    let svgHeight = defaultHeight;
+    const chatContainer = document.getElementById('chat-container');
+    if (chatContainer) {{
+        const containerWidth = chatContainer.clientWidth;
+        if (containerWidth > 100) {{
+            // Use container width with some padding (90% of container)
+            svgWidth = Math.floor(containerWidth * 0.9);
+            // Maintain aspect ratio based on default dimensions
+            svgHeight = Math.floor(svgWidth * (defaultHeight / defaultWidth));
+            console.log("[Infographic Image] Auto-detected container width:", containerWidth, "-> SVG:", svgWidth, "x", svgHeight);
+        }}
+    }}
+    
+    console.log("[Infographic Image] Starting render...");
+    console.log("[Infographic Image] chatId:", chatId, "messageId:", messageId);
+    
+    try {{
+        // Load AntV Infographic if not loaded
+        if (typeof AntVInfographic === 'undefined') {{
+            console.log("[Infographic Image] Loading AntV Infographic...");
+            await new Promise((resolve, reject) => {{
+                const script = document.createElement('script');
+                script.src = 'https://unpkg.com/@antv/infographic@latest/dist/infographic.min.js';
+                script.onload = resolve;
+                script.onerror = reject;
+                document.head.appendChild(script);
+            }});
+        }}
+        
+        const {{ Infographic }} = AntVInfographic;
+        
+        // Get syntax content
+        let syntaxContent = `{syntax_escaped}`;
+        console.log("[Infographic Image] Syntax length:", syntaxContent.length);
+        
+        // Clean up syntax: remove code block markers
+        const backtick = String.fromCharCode(96);
+        const prefix = backtick + backtick + backtick + 'infographic';
+        const simplePrefix = backtick + backtick + backtick;
+        
+        if (syntaxContent.toLowerCase().startsWith(prefix)) {{
+            syntaxContent = syntaxContent.substring(prefix.length).trim();
+        }} else if (syntaxContent.startsWith(simplePrefix)) {{
+            syntaxContent = syntaxContent.substring(simplePrefix.length).trim();
+        }}
+        
+        if (syntaxContent.endsWith(simplePrefix)) {{
+            syntaxContent = syntaxContent.substring(0, syntaxContent.length - simplePrefix.length).trim();
+        }}
+        
+        // Fix syntax: remove colons after keywords
+        syntaxContent = syntaxContent.replace(/^(data|items|children|theme|config):/gm, '$1');
+        syntaxContent = syntaxContent.replace(/(\\s)(children|items):/g, '$1$2');
+        
+        // Ensure infographic prefix
+        if (!syntaxContent.trim().toLowerCase().startsWith('infographic')) {{
+            const firstWord = syntaxContent.trim().split(/\\s+/)[0].toLowerCase();
+            if (!['data', 'theme', 'design', 'items'].includes(firstWord)) {{
+                syntaxContent = 'infographic ' + syntaxContent;
+            }}
+        }}
+        
+        // Template mapping
+        const TEMPLATE_MAPPING = {{
+            'list-grid': 'list-grid-compact-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'
+        }};
+        
+        for (const [key, value] of Object.entries(TEMPLATE_MAPPING)) {{
+            const regex = new RegExp(`infographic\\\\s+${{key}}(?=\\\\s|$)`, 'i');
+            if (regex.test(syntaxContent)) {{
+                syntaxContent = syntaxContent.replace(regex, `infographic ${{value}}`);
+                break;
+            }}
+        }}
+        
+        // Create offscreen container
+        const container = document.createElement('div');
+        container.id = 'infographic-offscreen-' + uniqueId;
+        container.style.cssText = 'position:absolute;left:-9999px;top:-9999px;width:' + svgWidth + 'px;height:' + svgHeight + 'px;background:#ffffff;';
+        document.body.appendChild(container);
+        
+        // Create infographic instance
+        const instance = new Infographic({{
+            container: '#' + container.id,
+            width: svgWidth,
+            height: svgHeight,
+            padding: 24,
+        }});
+        
+        console.log("[Infographic Image] Rendering infographic...");
+        instance.render(syntaxContent);
+        
+        // Wait for render to complete
+        await new Promise(resolve => setTimeout(resolve, 2000));
+        
+        // Get SVG element
+        const svgEl = container.querySelector('svg');
+        if (!svgEl) {{
+            throw new Error('SVG element not found after rendering');
+        }}
+        
+        // Get actual dimensions
+        const bbox = svgEl.getBoundingClientRect();
+        const width = bbox.width || svgWidth;
+        const height = bbox.height || svgHeight;
+        
+        // Clone and prepare SVG for export
+        const clonedSvg = svgEl.cloneNode(true);
+        clonedSvg.setAttribute('xmlns', 'http://www.w3.org/2000/svg');
+        clonedSvg.setAttribute('xmlns:xlink', 'http://www.w3.org/1999/xlink');
+        clonedSvg.setAttribute('width', width);
+        clonedSvg.setAttribute('height', height);
+        
+        // Add background rect
+        const bgRect = document.createElementNS('http://www.w3.org/2000/svg', 'rect');
+        bgRect.setAttribute('width', '100%');
+        bgRect.setAttribute('height', '100%');
+        bgRect.setAttribute('fill', '#ffffff');
+        clonedSvg.insertBefore(bgRect, clonedSvg.firstChild);
+        
+        // Serialize SVG to string
+        const svgData = new XMLSerializer().serializeToString(clonedSvg);
+        
+        // Cleanup container
+        document.body.removeChild(container);
+        
+        // Convert SVG string to Blob
+        const blob = new Blob([svgData], {{ type: 'image/svg+xml' }});
+        const file = new File([blob], `infographic-${{uniqueId}}.svg`, {{ type: 'image/svg+xml' }});
+        
+        // Upload file to OpenWebUI API
+        console.log("[Infographic Image] Uploading SVG file...");
+        const token = localStorage.getItem("token");
+        const formData = new FormData();
+        formData.append('file', file);
+        
+        const uploadResponse = await fetch('/api/v1/files/', {{
+            method: 'POST',
+            headers: {{
+                'Authorization': `Bearer ${{token}}`
+            }},
+            body: formData
+        }});
+        
+        if (!uploadResponse.ok) {{
+            throw new Error(`Upload failed: ${{uploadResponse.statusText}}`);
+        }}
+        
+        const fileData = await uploadResponse.json();
+        const fileId = fileData.id;
+        const imageUrl = `/api/v1/files/${{fileId}}/content`;
+        
+        console.log("[Infographic Image] File uploaded, ID:", fileId);
+        
+        // Generate markdown image with file URL
+        const markdownImage = `![📊 Infographic](${{imageUrl}})`;
+        
+        // Update message via API
+        if (chatId && messageId) {{
+            
+            // Helper function with retry logic
+            const fetchWithRetry = async (url, options, retries = 3) => {{
+                for (let i = 0; i < retries; i++) {{
+                    try {{
+                        const response = await fetch(url, options);
+                        if (response.ok) return response;
+                        if (i < retries - 1) {{
+                            console.log(`[Infographic Image] Retry ${{i + 1}}/${{retries}} for ${{url}}`);
+                            await new Promise(r => setTimeout(r, 1000 * (i + 1)));
+                        }}
+                    }} catch (e) {{
+                        if (i === retries - 1) throw e;
+                        await new Promise(r => setTimeout(r, 1000 * (i + 1)));
+                    }}
+                }}
+                return null;
+            }};
+            
+            // Get current chat data
+            const getResponse = await fetch(`/api/v1/chats/${{chatId}}`, {{
+                method: "GET",
+                headers: {{ "Authorization": `Bearer ${{token}}` }}
+            }});
+            
+            if (!getResponse.ok) {{
+                throw new Error("Failed to get chat data: " + getResponse.status);
+            }}
+            
+            const chatData = await getResponse.json();
+            let updatedMessages = [];
+            let newContent = "";
+            
+            if (chatData.chat && chatData.chat.messages) {{
+                updatedMessages = chatData.chat.messages.map(m => {{
+                    if (m.id === messageId) {{
+                        const originalContent = m.content || "";
+                        // Remove existing infographic images
+                        const infographicPattern = /\\n*!\\[📊[^\\]]*\\]\\((?:data:image\\/[^)]+|(?:\\/api\\/v1\\/files\\/[^)]+))\\)/g;
+                        let cleanedContent = originalContent.replace(infographicPattern, "");
+                        cleanedContent = cleanedContent.replace(/\\n{{3,}}/g, "\\n\\n").trim();
+                        // Append new image
+                        newContent = cleanedContent + "\\n\\n" + markdownImage;
+                        
+                        // Update history object as well
+                        if (chatData.chat.history && chatData.chat.history.messages) {{
+                            if (chatData.chat.history.messages[messageId]) {{
+                                chatData.chat.history.messages[messageId].content = newContent;
+                            }}
+                        }}
+                        
+                        return {{ ...m, content: newContent }};
+                    }}
+                    return m;
+                }});
+            }}
+            
+            if (!newContent) {{
+                console.warn("[Infographic Image] Could not find message to update");
+                return;
+            }}
+            
+            // Try to update frontend display via event API
+            try {{
+                await fetch(`/api/v1/chats/${{chatId}}/messages/${{messageId}}/event`, {{
+                    method: "POST",
+                    headers: {{
+                        "Content-Type": "application/json",
+                        "Authorization": `Bearer ${{token}}`
+                    }},
+                    body: JSON.stringify({{
+                        type: "chat:message",
+                        data: {{ content: newContent }}
+                    }})
+                }});
+            }} catch (eventErr) {{
+                console.log("[Infographic Image] Event API not available, continuing...");
+            }}
+            
+            // Persist to database
+            const updatePayload = {{
+                chat: {{
+                    ...chatData.chat,
+                    messages: updatedMessages
+                }}
+            }};
+            
+            const persistResponse = await fetchWithRetry(`/api/v1/chats/${{chatId}}`, {{
+                method: "POST",
+                headers: {{
+                    "Content-Type": "application/json",
+                    "Authorization": `Bearer ${{token}}`
+                }},
+                body: JSON.stringify(updatePayload)
+            }});
+            
+            if (persistResponse && persistResponse.ok) {{
+                console.log("[Infographic Image] ✅ Message persisted successfully!");
+            }} else {{
+                console.error("[Infographic Image] ❌ Failed to persist message after retries");
+            }}
+        }} else {{
+            console.warn("[Infographic Image] ⚠️ Missing chatId or messageId, cannot persist");
+        }}
+        
+    }} catch (error) {{
+        console.error("[Infographic Image] Error:", error);
+    }}
+}})();
+"""
+
     async def action(
         self,
         body: dict,
         __user__: Optional[Dict[str, Any]] = None,
         __event_emitter__: Optional[Any] = None,
+        __event_call__: Optional[Callable[[Any], Awaitable[None]]] = None,
+        __metadata__: Optional[dict] = None,
         __request__: Optional[Request] = None,
     ) -> Optional[dict]:
-        logger.info("Action: Infographic started (v1.0.0)")
+        logger.info("Action: Infographic started (v1.4.0)")
 
         # Get user information
         if isinstance(__user__, (list, tuple)):
@@ -1114,6 +1476,45 @@ class Action:
                         user_language,
                     )
 
+            # Check output mode
+            if self.valves.OUTPUT_MODE == "image":
+                # Image mode: use JavaScript to render and embed as Markdown image
+                chat_id = self._extract_chat_id(body, body.get("metadata"))
+                message_id = self._extract_message_id(body, body.get("metadata"))
+
+                await self._emit_status(
+                    __event_emitter__,
+                    "📊 Infographic: Rendering image...",
+                    False,
+                )
+
+                if __event_call__:
+                    js_code = self._generate_image_js_code(
+                        unique_id=unique_id,
+                        chat_id=chat_id,
+                        message_id=message_id,
+                        infographic_syntax=infographic_syntax,
+                    )
+
+                    await __event_call__(
+                        {
+                            "type": "execute",
+                            "data": {"code": js_code},
+                        }
+                    )
+
+                await self._emit_status(
+                    __event_emitter__, "✅ Infographic: Image generated!", True
+                )
+                await self._emit_notification(
+                    __event_emitter__,
+                    f"📊 Infographic image generated, {user_name}!",
+                    "success",
+                )
+                logger.info("Infographic generation completed in image mode")
+                return body
+
+            # HTML mode (default): embed as HTML block
             html_embed_tag = f"```html\n{final_html}\n```"
             body["messages"][-1]["content"] = f"{original_content}\n\n{html_embed_tag}"
 

plugins/actions/infographic/infographic_cn.py

@@ -3,12 +3,12 @@ title: 📊 智能信息图 (AntV Infographic)
 author: jeff
 author_url: https://github.com/Fu-Jie/awesome-openwebui
 icon_url: data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9ImN1cnJlbnRDb2xvciIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiPgogIDxsaW5lIHgxPSIxMiIgeTE9IjIwIiB4Mj0iMTIiIHkyPSIxMCIgLz4KICA8bGluZSB4MT0iMTgiIHkxPSIyMCIgeDI9IjE4IiB5Mj0iNCIgLz4KICA8bGluZSB4MT0iNiIgeTE9IjIwIiB4Mj0iNiIgeTI9IjE2IiAvPgo8L3N2Zz4=
-version: 1.3.2
+version: 1.4.0
 description: 基于 AntV Infographic 的智能信息图生成插件。支持多种专业模板，自动图标匹配，并提供 SVG/PNG 下载功能。
 """
 
 from pydantic import BaseModel, Field
-from typing import Optional, Dict, Any
+from typing import Optional, Dict, Any, Callable, Awaitable
 import logging
 import time
 import re
@@ -849,6 +849,10 @@ class Action:
             default=1,
             description="用于生成的最近消息数量。设置为1仅使用最后一条消息，更大值可包含更多上下文。",
         )
+        OUTPUT_MODE: str = Field(
+            default="html",
+            description="输出模式：'html' 为交互式HTML（默认），'image' 将嵌入为Markdown图片。",
+        )
 
     def __init__(self):
         self.valves = self.Valves()
@@ -862,6 +866,46 @@ class Action:
             "Sunday": "星期日",
         }
 
+    def _extract_chat_id(self, body: dict, metadata: Optional[dict]) -> str:
+        """从 body 或 metadata 中提取 chat_id"""
+        if isinstance(body, dict):
+            chat_id = body.get("chat_id")
+            if isinstance(chat_id, str) and chat_id.strip():
+                return chat_id.strip()
+
+            body_metadata = body.get("metadata", {})
+            if isinstance(body_metadata, dict):
+                chat_id = body_metadata.get("chat_id")
+                if isinstance(chat_id, str) and chat_id.strip():
+                    return chat_id.strip()
+
+        if isinstance(metadata, dict):
+            chat_id = metadata.get("chat_id")
+            if isinstance(chat_id, str) and chat_id.strip():
+                return chat_id.strip()
+
+        return ""
+
+    def _extract_message_id(self, body: dict, metadata: Optional[dict]) -> str:
+        """从 body 或 metadata 中提取 message_id"""
+        if isinstance(body, dict):
+            message_id = body.get("id")
+            if isinstance(message_id, str) and message_id.strip():
+                return message_id.strip()
+
+            body_metadata = body.get("metadata", {})
+            if isinstance(body_metadata, dict):
+                message_id = body_metadata.get("message_id")
+                if isinstance(message_id, str) and message_id.strip():
+                    return message_id.strip()
+
+        if isinstance(metadata, dict):
+            message_id = metadata.get("message_id")
+            if isinstance(message_id, str) and message_id.strip():
+                return message_id.strip()
+
+        return ""
+
     def _extract_infographic_syntax(self, llm_output: str) -> str:
         """提取LLM输出中的infographic语法"""
         # 1. 优先匹配 ```infographic
@@ -973,14 +1017,332 @@ class Action:
 
         return base_html.strip()
 
+    def _generate_image_js_code(
+        self,
+        unique_id: str,
+        chat_id: str,
+        message_id: str,
+        infographic_syntax: str,
+    ) -> str:
+        """生成前端 SVG 渲染和图片嵌入的 JavaScript 代码"""
+
+        # 转义语法以便在 JS 中嵌入
+        syntax_escaped = (
+            infographic_syntax.replace("\\", "\\\\")
+            .replace("`", "\\`")
+            .replace("${", "\\${")
+            .replace("</script>", "<\\/script>")
+        )
+
+        return f"""
+(async function() {{
+    const uniqueId = "{unique_id}";
+    const chatId = "{chat_id}";
+    const messageId = "{message_id}";
+    const defaultWidth = 1200;
+    const defaultHeight = 800;
+    
+    // 自动检测聊天容器宽度以实现响应式尺寸
+    let svgWidth = defaultWidth;
+    let svgHeight = defaultHeight;
+    const chatContainer = document.getElementById('chat-container');
+    if (chatContainer) {{
+        const containerWidth = chatContainer.clientWidth;
+        if (containerWidth > 100) {{
+            // 使用容器宽度的 90%
+            svgWidth = Math.floor(containerWidth * 0.9);
+            // 根据默认尺寸保持宽高比
+            svgHeight = Math.floor(svgWidth * (defaultHeight / defaultWidth));
+            console.log("[Infographic Image] 自动检测容器宽度:", containerWidth, "-> SVG:", svgWidth, "x", svgHeight);
+        }}
+    }}
+    
+    console.log("[Infographic Image] 开始渲染...");
+    console.log("[Infographic Image] chatId:", chatId, "messageId:", messageId);
+    
+    try {{
+        // 加载 AntV Infographic（如果未加载）
+        if (typeof AntVInfographic === 'undefined') {{
+            console.log("[Infographic Image] 加载 AntV Infographic...");
+            await new Promise((resolve, reject) => {{
+                const script = document.createElement('script');
+                script.src = 'https://registry.npmmirror.com/@antv/infographic/0.2.1/files/dist/infographic.min.js';
+                script.onload = resolve;
+                script.onerror = reject;
+                document.head.appendChild(script);
+            }});
+        }}
+        
+        const {{ Infographic }} = AntVInfographic;
+        
+        // 获取语法内容
+        let syntaxContent = `{syntax_escaped}`;
+        console.log("[Infographic Image] 语法长度:", syntaxContent.length);
+        
+        // 清理语法：移除代码块标记
+        const backtick = String.fromCharCode(96);
+        const prefix = backtick + backtick + backtick + 'infographic';
+        const simplePrefix = backtick + backtick + backtick;
+        
+        if (syntaxContent.toLowerCase().startsWith(prefix)) {{
+            syntaxContent = syntaxContent.substring(prefix.length).trim();
+        }} else if (syntaxContent.startsWith(simplePrefix)) {{
+            syntaxContent = syntaxContent.substring(simplePrefix.length).trim();
+        }}
+        
+        if (syntaxContent.endsWith(simplePrefix)) {{
+            syntaxContent = syntaxContent.substring(0, syntaxContent.length - simplePrefix.length).trim();
+        }}
+        
+        // 修复语法：移除关键字后的冒号
+        syntaxContent = syntaxContent.replace(/^(data|items|children|theme|config):/gm, '$1');
+        syntaxContent = syntaxContent.replace(/(\\s)(children|items):/g, '$1$2');
+        
+        // 确保 infographic 前缀
+        if (!syntaxContent.trim().toLowerCase().startsWith('infographic')) {{
+            const firstWord = syntaxContent.trim().split(/\\s+/)[0].toLowerCase();
+            if (!['data', 'theme', 'design', 'items'].includes(firstWord)) {{
+                syntaxContent = 'infographic ' + syntaxContent;
+            }}
+        }}
+        
+        // 模板映射
+        const TEMPLATE_MAPPING = {{
+            'list-grid': 'list-grid-compact-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'
+        }};
+        
+        for (const [key, value] of Object.entries(TEMPLATE_MAPPING)) {{
+            const regex = new RegExp(`infographic\\\\s+${{key}}(?=\\\\s|$)`, 'i');
+            if (regex.test(syntaxContent)) {{
+                syntaxContent = syntaxContent.replace(regex, `infographic ${{value}}`);
+                break;
+            }}
+        }}
+        
+        // 创建离屏容器
+        const container = document.createElement('div');
+        container.id = 'infographic-offscreen-' + uniqueId;
+        container.style.cssText = 'position:absolute;left:-9999px;top:-9999px;width:' + svgWidth + 'px;height:' + svgHeight + 'px;background:#ffffff;';
+        document.body.appendChild(container);
+        
+        // 创建信息图实例
+        const instance = new Infographic({{
+            container: '#' + container.id,
+            width: svgWidth,
+            height: svgHeight,
+            padding: 24,
+        }});
+        
+        console.log("[Infographic Image] 渲染信息图...");
+        instance.render(syntaxContent);
+        
+        // 等待渲染完成
+        await new Promise(resolve => setTimeout(resolve, 2000));
+        
+        // 获取 SVG 元素
+        const svgEl = container.querySelector('svg');
+        if (!svgEl) {{
+            throw new Error('渲染后未找到 SVG 元素');
+        }}
+        
+        // 获取实际尺寸
+        const bbox = svgEl.getBoundingClientRect();
+        const width = bbox.width || svgWidth;
+        const height = bbox.height || svgHeight;
+        
+        // 克隆并准备导出的 SVG
+        const clonedSvg = svgEl.cloneNode(true);
+        clonedSvg.setAttribute('xmlns', 'http://www.w3.org/2000/svg');
+        clonedSvg.setAttribute('xmlns:xlink', 'http://www.w3.org/1999/xlink');
+        clonedSvg.setAttribute('width', width);
+        clonedSvg.setAttribute('height', height);
+        
+        // 添加背景矩形
+        const bgRect = document.createElementNS('http://www.w3.org/2000/svg', 'rect');
+        bgRect.setAttribute('width', '100%');
+        bgRect.setAttribute('height', '100%');
+        bgRect.setAttribute('fill', '#ffffff');
+        clonedSvg.insertBefore(bgRect, clonedSvg.firstChild);
+        
+        // 序列化 SVG 为字符串
+        const svgData = new XMLSerializer().serializeToString(clonedSvg);
+        
+        // 清理容器
+        document.body.removeChild(container);
+        
+        // 将 SVG 字符串转换为 Blob
+        const blob = new Blob([svgData], {{ type: 'image/svg+xml' }});
+        const file = new File([blob], `infographic-${{uniqueId}}.svg`, {{ type: 'image/svg+xml' }});
+        
+        // 上传文件到 OpenWebUI API
+        console.log("[Infographic Image] 上传 SVG 文件...");
+        const token = localStorage.getItem("token");
+        const formData = new FormData();
+        formData.append('file', file);
+        
+        const uploadResponse = await fetch('/api/v1/files/', {{
+            method: 'POST',
+            headers: {{
+                'Authorization': `Bearer ${{token}}`
+            }},
+            body: formData
+        }});
+        
+        if (!uploadResponse.ok) {{
+            throw new Error(`上传失败: ${{uploadResponse.statusText}}`);
+        }}
+        
+        const fileData = await uploadResponse.json();
+        const fileId = fileData.id;
+        const imageUrl = `/api/v1/files/${{fileId}}/content`;
+        
+        console.log("[Infographic Image] 文件已上传, ID:", fileId);
+        
+        // 生成带文件 URL 的 markdown 图片
+        const markdownImage = `![📊 信息图](${{imageUrl}})`;
+        
+        // 通过 API 更新消息
+        if (chatId && messageId) {{
+            
+            // 带重试逻辑的辅助函数
+            const fetchWithRetry = async (url, options, retries = 3) => {{
+                for (let i = 0; i < retries; i++) {{
+                    try {{
+                        const response = await fetch(url, options);
+                        if (response.ok) return response;
+                        if (i < retries - 1) {{
+                            console.log(`[Infographic Image] 重试 ${{i + 1}}/${{retries}} for ${{url}}`);
+                            await new Promise(r => setTimeout(r, 1000 * (i + 1)));
+                        }}
+                    }} catch (e) {{
+                        if (i === retries - 1) throw e;
+                        await new Promise(r => setTimeout(r, 1000 * (i + 1)));
+                    }}
+                }}
+                return null;
+            }};
+            
+            // 获取当前聊天数据
+            const getResponse = await fetch(`/api/v1/chats/${{chatId}}`, {{
+                method: "GET",
+                headers: {{ "Authorization": `Bearer ${{token}}` }}
+            }});
+            
+            if (!getResponse.ok) {{
+                throw new Error("获取聊天数据失败: " + getResponse.status);
+            }}
+            
+            const chatData = await getResponse.json();
+            let updatedMessages = [];
+            let newContent = "";
+            
+            if (chatData.chat && chatData.chat.messages) {{
+                updatedMessages = chatData.chat.messages.map(m => {{
+                    if (m.id === messageId) {{
+                        const originalContent = m.content || "";
+                        // 移除已有的信息图图片
+                        const infographicPattern = /\\n*!\\[📊[^\\]]*\\]\\((?:data:image\\/[^)]+|(?:\\/api\\/v1\\/files\\/[^)]+))\\)/g;
+                        let cleanedContent = originalContent.replace(infographicPattern, "");
+                        cleanedContent = cleanedContent.replace(/\\n{{3,}}/g, "\\n\\n").trim();
+                        // 追加新图片
+                        newContent = cleanedContent + "\\n\\n" + markdownImage;
+                        
+                        // 同时更新 history 对象
+                        if (chatData.chat.history && chatData.chat.history.messages) {{
+                            if (chatData.chat.history.messages[messageId]) {{
+                                chatData.chat.history.messages[messageId].content = newContent;
+                            }}
+                        }}
+                        
+                        return {{ ...m, content: newContent }};
+                    }}
+                    return m;
+                }});
+            }}
+            
+            if (!newContent) {{
+                console.warn("[Infographic Image] 找不到要更新的消息");
+                return;
+            }}
+            
+            // 尝试通过事件 API 更新前端显示
+            try {{
+                await fetch(`/api/v1/chats/${{chatId}}/messages/${{messageId}}/event`, {{
+                    method: "POST",
+                    headers: {{
+                        "Content-Type": "application/json",
+                        "Authorization": `Bearer ${{token}}`
+                    }},
+                    body: JSON.stringify({{
+                        type: "chat:message",
+                        data: {{ content: newContent }}
+                    }})
+                }});
+            }} catch (eventErr) {{
+                console.log("[Infographic Image] 事件 API 不可用，继续...");
+            }}
+            
+            // 持久化到数据库
+            const updatePayload = {{
+                chat: {{
+                    ...chatData.chat,
+                    messages: updatedMessages
+                }}
+            }};
+            
+            const persistResponse = await fetchWithRetry(`/api/v1/chats/${{chatId}}`, {{
+                method: "POST",
+                headers: {{
+                    "Content-Type": "application/json",
+                    "Authorization": `Bearer ${{token}}`
+                }},
+                body: JSON.stringify(updatePayload)
+            }});
+            
+            if (persistResponse && persistResponse.ok) {{
+                console.log("[Infographic Image] ✅ 消息持久化成功!");
+            }} else {{
+                console.error("[Infographic Image] ❌ 重试后消息持久化失败");
+            }}
+        }} else {{
+            console.warn("[Infographic Image] ⚠️ 缺少 chatId 或 messageId，无法持久化");
+        }}
+        
+    }} catch (error) {{
+        console.error("[Infographic Image] 错误:", error);
+    }}
+}})();
+"""
+
     async def action(
         self,
         body: dict,
         __user__: Optional[Dict[str, Any]] = None,
         __event_emitter__: Optional[Any] = None,
+        __event_call__: Optional[Callable[[Any], Awaitable[None]]] = None,
+        __metadata__: Optional[dict] = None,
         __request__: Optional[Request] = None,
     ) -> Optional[dict]:
-        logger.info("Action: 信息图启动 (v1.0.0)")
+        logger.info("Action: 信息图启动 (v1.4.0)")
 
         # 获取用户信息
         if isinstance(__user__, (list, tuple)):
@@ -1169,6 +1531,45 @@ class Action:
                         user_language,
                     )
 
+            # 检查输出模式
+            if self.valves.OUTPUT_MODE == "image":
+                # 图片模式：使用 JavaScript 渲染并嵌入为 Markdown 图片
+                chat_id = self._extract_chat_id(body, body.get("metadata"))
+                message_id = self._extract_message_id(body, body.get("metadata"))
+
+                await self._emit_status(
+                    __event_emitter__,
+                    "📊 信息图: 正在渲染图片...",
+                    False,
+                )
+
+                if __event_call__:
+                    js_code = self._generate_image_js_code(
+                        unique_id=unique_id,
+                        chat_id=chat_id,
+                        message_id=message_id,
+                        infographic_syntax=infographic_syntax,
+                    )
+
+                    await __event_call__(
+                        {
+                            "type": "execute",
+                            "data": {"code": js_code},
+                        }
+                    )
+
+                await self._emit_status(
+                    __event_emitter__, "✅ 信息图: 图片生成完成!", True
+                )
+                await self._emit_notification(
+                    __event_emitter__,
+                    f"📊 信息图图片已生成，{user_name}！",
+                    "success",
+                )
+                logger.info("信息图生成完成（图片模式）")
+                return body
+
+            # HTML 模式（默认）：嵌入为 HTML 块
             html_embed_tag = f"```html\n{final_html}\n```"
             body["messages"][-1]["content"] = f"{original_content}\n\n{html_embed_tag}"
 

plugins/actions/js-render-poc/README.md

@@ -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 ![description](data:image/svg+xml;base64,...) │
+└─────────────────────────────────────────────────────────────┘
+```
+
+## 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 = `![description](${dataUri})`;
+```
+
+### 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

plugins/actions/js-render-poc/README_CN.md

@@ -0,0 +1,174 @@
+# 信息图转 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 渲染                                            │
+│     └── 显示 ![描述](data:image/svg+xml;base64,...)          │
+└─────────────────────────────────────────────────────────────┘
+```
+
+## 功能特点
+
+- 🤖 **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 = `![描述](${dataUri})`;
+```
+
+### 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

plugins/actions/js-render-poc/infographic_markdown.py

@@ -0,0 +1,592 @@
+"""
+title: 📊 Infographic to Markdown
+author: Fu-Jie
+version: 1.0.0
+description: AI生成信息图语法，前端渲染SVG并转换为Markdown图片格式嵌入消息。支持AntV Infographic模板。
+"""
+
+import time
+import json
+import logging
+import re
+from typing import Optional, Callable, Awaitable, Any, Dict
+from pydantic import BaseModel, Field
+from fastapi import Request
+from datetime import datetime
+
+from open_webui.utils.chat import generate_chat_completion
+from open_webui.models.users import Users
+
+logging.basicConfig(level=logging.INFO)
+logger = logging.getLogger(__name__)
+
+# =================================================================
+# LLM Prompts
+# =================================================================
+
+SYSTEM_PROMPT_INFOGRAPHIC = """
+You are a professional infographic design expert who can analyze user-provided text content and convert it into AntV Infographic syntax format.
+
+## Infographic Syntax Specification
+
+Infographic syntax is a Mermaid-like declarative syntax for describing infographic templates, data, and themes.
+
+### Syntax Rules
+- Entry uses `infographic <template-name>`
+- Key-value pairs are separated by spaces, **absolutely NO colons allowed**
+- Use two spaces for indentation
+- Object arrays use `-` with line breaks
+
+⚠️ **IMPORTANT WARNING: This is NOT YAML format!**
+- ❌ Wrong: `children:` `items:` `data:` (with colons)
+- ✅ Correct: `children` `items` `data` (without colons)
+
+### Template Library & Selection Guide
+
+Choose the most appropriate template based on the 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)
+
+#### 2. Sequence & Relationship
+- **Process**: `sequence-roadmap` (Roadmap), `sequence-zigzag` (Zigzag Process)
+- **Relationship**: `relation-sankey` (Sankey Diagram), `relation-circle` (Circular)
+
+#### 3. Comparison & Analysis
+- **Comparison**: `compare-binary` (Binary Comparison)
+- **Analysis**: `compare-swot` (SWOT Analysis), `quadrant-quarter` (Quadrant Chart)
+
+#### 4. Charts & Data
+- **Charts**: `chart-bar`, `chart-column`, `chart-line`, `chart-pie`, `chart-doughnut`, `chart-area`
+
+### Data Structure Examples
+
+#### A. Standard List/Tree
+```infographic
+infographic list-grid
+data
+  title Project Modules
+  items
+    - label Module A
+      desc Description of A
+    - label Module B
+      desc Description of B
+```
+
+#### B. Binary Comparison
+```infographic
+infographic compare-binary
+data
+  title Advantages vs Disadvantages
+  items
+    - label Advantages
+      children
+        - label Strong R&D
+          desc Leading technology
+    - label Disadvantages
+      children
+        - label Weak brand
+          desc Insufficient marketing
+```
+
+#### C. Charts
+```infographic
+infographic chart-bar
+data
+  title Quarterly Revenue
+  items
+    - label Q1
+      value 120
+    - label Q2
+      value 150
+```
+
+### Common Data Fields
+- `label`: Main title/label (Required)
+- `desc`: Description text (max 30 Chinese chars / 60 English chars for `list-grid`)
+- `value`: Numeric value (for charts)
+- `children`: Nested items
+
+## Output Requirements
+1. **Language**: Output content in the user's language.
+2. **Format**: Wrap output in ```infographic ... ```.
+3. **No Colons**: Do NOT use colons after keys.
+4. **Indentation**: Use 2 spaces.
+"""
+
+USER_PROMPT_GENERATE = """
+Please analyze the following text content and convert its core information into AntV Infographic syntax format.
+
+---
+**User Context:**
+User Name: {user_name}
+Current Date/Time: {current_date_time_str}
+User Language: {user_language}
+---
+
+**Text Content:**
+{long_text_content}
+
+Please select the most appropriate infographic template based on text characteristics and output standard infographic syntax.
+
+**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**).
+- Descriptions should be concise and highlight key points.
+"""
+
+
+class Action:
+    class Valves(BaseModel):
+        SHOW_STATUS: bool = Field(
+            default=True, description="Show operation status updates in chat interface."
+        )
+        MODEL_ID: str = Field(
+            default="",
+            description="LLM model ID for text analysis. If empty, uses current conversation model.",
+        )
+        MIN_TEXT_LENGTH: int = Field(
+            default=50,
+            description="Minimum text length (characters) required for infographic analysis.",
+        )
+        MESSAGE_COUNT: int = Field(
+            default=1,
+            description="Number of recent messages to use for generation.",
+        )
+        SVG_WIDTH: int = Field(
+            default=800,
+            description="Width of generated SVG in pixels.",
+        )
+        EXPORT_FORMAT: str = Field(
+            default="svg",
+            description="Export format: 'svg' or 'png'.",
+        )
+
+    def __init__(self):
+        self.valves = self.Valves()
+
+    def _extract_chat_id(self, body: dict, metadata: Optional[dict]) -> str:
+        """Extract chat_id from body or metadata"""
+        if isinstance(body, dict):
+            chat_id = body.get("chat_id")
+            if isinstance(chat_id, str) and chat_id.strip():
+                return chat_id.strip()
+
+            body_metadata = body.get("metadata", {})
+            if isinstance(body_metadata, dict):
+                chat_id = body_metadata.get("chat_id")
+                if isinstance(chat_id, str) and chat_id.strip():
+                    return chat_id.strip()
+
+        if isinstance(metadata, dict):
+            chat_id = metadata.get("chat_id")
+            if isinstance(chat_id, str) and chat_id.strip():
+                return chat_id.strip()
+
+        return ""
+
+    def _extract_message_id(self, body: dict, metadata: Optional[dict]) -> str:
+        """Extract message_id from body or metadata"""
+        if isinstance(body, dict):
+            message_id = body.get("id")
+            if isinstance(message_id, str) and message_id.strip():
+                return message_id.strip()
+
+            body_metadata = body.get("metadata", {})
+            if isinstance(body_metadata, dict):
+                message_id = body_metadata.get("message_id")
+                if isinstance(message_id, str) and message_id.strip():
+                    return message_id.strip()
+
+        if isinstance(metadata, dict):
+            message_id = metadata.get("message_id")
+            if isinstance(message_id, str) and message_id.strip():
+                return message_id.strip()
+
+        return ""
+
+    def _extract_infographic_syntax(self, llm_output: str) -> str:
+        """Extract infographic syntax from LLM output"""
+        match = re.search(r"```infographic\s*(.*?)\s*```", llm_output, re.DOTALL)
+        if match:
+            return match.group(1).strip()
+        else:
+            logger.warning("LLM output did not follow expected format, treating entire output as syntax.")
+            return llm_output.strip()
+
+    def _extract_text_content(self, content) -> str:
+        """Extract text from message content, supporting multimodal formats"""
+        if isinstance(content, str):
+            return content
+        elif isinstance(content, list):
+            text_parts = []
+            for item in content:
+                if isinstance(item, dict) and item.get("type") == "text":
+                    text_parts.append(item.get("text", ""))
+                elif isinstance(item, str):
+                    text_parts.append(item)
+            return "\n".join(text_parts)
+        return str(content) if content else ""
+
+    async def _emit_status(self, emitter, description: str, done: bool = False):
+        """Send status update event"""
+        if self.valves.SHOW_STATUS and emitter:
+            await emitter(
+                {"type": "status", "data": {"description": description, "done": done}}
+            )
+
+    def _generate_js_code(
+        self,
+        unique_id: str,
+        chat_id: str,
+        message_id: str,
+        infographic_syntax: str,
+        svg_width: int,
+        export_format: str,
+    ) -> str:
+        """Generate JavaScript code for frontend SVG rendering"""
+        
+        # Escape the syntax for JS embedding
+        syntax_escaped = (
+            infographic_syntax
+            .replace("\\", "\\\\")
+            .replace("`", "\\`")
+            .replace("${", "\\${")
+            .replace("</script>", "<\\/script>")
+        )
+        
+        # Template mapping (same as infographic.py)
+        template_mapping_js = """
+        const TEMPLATE_MAPPING = {
+            'list-grid': 'list-grid-compact-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'
+        };
+        """
+        
+        return f"""
+(async function() {{
+    const uniqueId = "{unique_id}";
+    const chatId = "{chat_id}";
+    const messageId = "{message_id}";
+    const svgWidth = {svg_width};
+    const exportFormat = "{export_format}";
+    
+    console.log("[Infographic Markdown] Starting render...");
+    console.log("[Infographic Markdown] chatId:", chatId, "messageId:", messageId);
+    
+    try {{
+        // Load AntV Infographic if not loaded
+        if (typeof AntVInfographic === 'undefined') {{
+            console.log("[Infographic Markdown] Loading AntV Infographic library...");
+            await new Promise((resolve, reject) => {{
+                const script = document.createElement('script');
+                script.src = 'https://unpkg.com/@antv/infographic@latest/dist/infographic.min.js';
+                script.onload = resolve;
+                script.onerror = reject;
+                document.head.appendChild(script);
+            }});
+            console.log("[Infographic Markdown] Library loaded.");
+        }}
+        
+        const {{ Infographic }} = AntVInfographic;
+        
+        // Get infographic syntax
+        let syntaxContent = `{syntax_escaped}`;
+        console.log("[Infographic Markdown] Original syntax:", syntaxContent.substring(0, 200) + "...");
+        
+        // Clean up syntax
+        const backtick = String.fromCharCode(96);
+        const prefix = backtick + backtick + backtick + 'infographic';
+        const simplePrefix = backtick + backtick + backtick;
+        
+        if (syntaxContent.toLowerCase().startsWith(prefix)) {{
+            syntaxContent = syntaxContent.substring(prefix.length).trim();
+        }} else if (syntaxContent.startsWith(simplePrefix)) {{
+            syntaxContent = syntaxContent.substring(simplePrefix.length).trim();
+        }}
+        
+        if (syntaxContent.endsWith(simplePrefix)) {{
+            syntaxContent = syntaxContent.substring(0, syntaxContent.length - simplePrefix.length).trim();
+        }}
+        
+        // Fix colons after keywords
+        syntaxContent = syntaxContent.replace(/^(data|items|children|theme|config):/gm, '$1');
+        syntaxContent = syntaxContent.replace(/(\\s)(children|items):/g, '$1$2');
+        
+        // Ensure infographic prefix
+        if (!syntaxContent.trim().toLowerCase().startsWith('infographic')) {{
+            syntaxContent = 'infographic list-grid\\n' + syntaxContent;
+        }}
+        
+        // Apply template mapping
+        {template_mapping_js}
+        
+        for (const [key, value] of Object.entries(TEMPLATE_MAPPING)) {{
+            const regex = new RegExp(`infographic\\\\s+${{key}}(?=\\\\s|$)`, 'i');
+            if (regex.test(syntaxContent)) {{
+                console.log(`[Infographic Markdown] Auto-mapping: ${{key}} -> ${{value}}`);
+                syntaxContent = syntaxContent.replace(regex, `infographic ${{value}}`);
+                break;
+            }}
+        }}
+        
+        console.log("[Infographic Markdown] Cleaned syntax:", syntaxContent.substring(0, 200) + "...");
+        
+        // Create offscreen container
+        const container = document.createElement('div');
+        container.id = 'infographic-offscreen-' + uniqueId;
+        container.style.cssText = 'position:absolute;left:-9999px;top:-9999px;width:' + svgWidth + 'px;';
+        document.body.appendChild(container);
+        
+        // Create and render infographic
+        const instance = new Infographic({{
+            container: '#' + container.id,
+            width: svgWidth,
+            padding: 24,
+        }});
+        
+        console.log("[Infographic Markdown] Rendering infographic...");
+        instance.render(syntaxContent);
+        
+        // Wait for render and export
+        await new Promise(resolve => setTimeout(resolve, 1000));
+        
+        let dataUrl;
+        if (exportFormat === 'png') {{
+            dataUrl = await instance.toDataURL({{ type: 'png', dpr: 2 }});
+        }} else {{
+            dataUrl = await instance.toDataURL({{ type: 'svg', embedResources: true }});
+        }}
+        
+        console.log("[Infographic Markdown] Data URL generated, length:", dataUrl.length);
+        
+        // Cleanup
+        instance.destroy();
+        document.body.removeChild(container);
+        
+        // Generate markdown image
+        const markdownImage = `![📊 AI 生成的信息图](${{dataUrl}})`;
+        
+        // Update message via API
+        if (chatId && messageId) {{
+            const token = localStorage.getItem("token");
+            
+            // Get current message content
+            const getResponse = await fetch(`/api/v1/chats/${{chatId}}`, {{
+                method: "GET",
+                headers: {{ "Authorization": `Bearer ${{token}}` }}
+            }});
+            
+            if (!getResponse.ok) {{
+                throw new Error("Failed to get chat data: " + getResponse.status);
+            }}
+            
+            const chatData = await getResponse.json();
+            let originalContent = "";
+            
+            if (chatData.chat && chatData.chat.messages) {{
+                const targetMsg = chatData.chat.messages.find(m => m.id === messageId);
+                if (targetMsg && targetMsg.content) {{
+                    originalContent = targetMsg.content;
+                }}
+            }}
+            
+            // Remove existing infographic images
+            const infographicPattern = /\\n*!\\[📊[^\\]]*\\]\\(data:image\\/[^)]+\\)/g;
+            let cleanedContent = originalContent.replace(infographicPattern, "");
+            cleanedContent = cleanedContent.replace(/\\n{{3,}}/g, "\\n\\n").trim();
+            
+            // Append new image
+            const newContent = cleanedContent + "\\n\\n" + markdownImage;
+            
+            // Update message
+            const updateResponse = await fetch(`/api/v1/chats/${{chatId}}/messages/${{messageId}}/event`, {{
+                method: "POST",
+                headers: {{
+                    "Content-Type": "application/json",
+                    "Authorization": `Bearer ${{token}}`
+                }},
+                body: JSON.stringify({{
+                    type: "chat:message",
+                    data: {{ content: newContent }}
+                }})
+            }});
+            
+            if (updateResponse.ok) {{
+                console.log("[Infographic Markdown] ✅ Message updated successfully!");
+            }} else {{
+                console.error("[Infographic Markdown] API error:", updateResponse.status);
+            }}
+        }} else {{
+            console.warn("[Infographic Markdown] ⚠️ Missing chatId or messageId");
+        }}
+        
+    }} catch (error) {{
+        console.error("[Infographic Markdown] Error:", error);
+    }}
+}})();
+"""
+
+    async def action(
+        self,
+        body: dict,
+        __user__: dict = None,
+        __event_emitter__=None,
+        __event_call__: Optional[Callable[[Any], Awaitable[None]]] = None,
+        __metadata__: Optional[dict] = None,
+        __request__: Request = None,
+    ) -> dict:
+        """
+        Generate infographic using AntV and embed as Markdown image.
+        """
+        logger.info("Action: Infographic to Markdown started")
+
+        # Get user information
+        if isinstance(__user__, (list, tuple)):
+            user_language = __user__[0].get("language", "en") if __user__ else "en"
+            user_name = __user__[0].get("name", "User") if __user__[0] else "User"
+            user_id = __user__[0].get("id", "unknown_user") if __user__ else "unknown_user"
+        elif isinstance(__user__, dict):
+            user_language = __user__.get("language", "en")
+            user_name = __user__.get("name", "User")
+            user_id = __user__.get("id", "unknown_user")
+        else:
+            user_language = "en"
+            user_name = "User"
+            user_id = "unknown_user"
+
+        # Get current time
+        now = datetime.now()
+        current_date_time_str = now.strftime("%Y-%m-%d %H:%M:%S")
+
+        try:
+            messages = body.get("messages", [])
+            if not messages:
+                raise ValueError("No messages available.")
+
+            # Get recent messages
+            message_count = min(self.valves.MESSAGE_COUNT, len(messages))
+            recent_messages = messages[-message_count:]
+
+            # Aggregate content
+            aggregated_parts = []
+            for msg in recent_messages:
+                text_content = self._extract_text_content(msg.get("content"))
+                if text_content:
+                    aggregated_parts.append(text_content)
+
+            if not aggregated_parts:
+                raise ValueError("No text content found in messages.")
+
+            long_text_content = "\n\n---\n\n".join(aggregated_parts)
+
+            # Remove existing HTML blocks
+            parts = re.split(r"```html.*?```", long_text_content, flags=re.DOTALL)
+            clean_content = ""
+            for part in reversed(parts):
+                if part.strip():
+                    clean_content = part.strip()
+                    break
+
+            if not clean_content:
+                clean_content = long_text_content.strip()
+
+            # Check minimum length
+            if len(clean_content) < self.valves.MIN_TEXT_LENGTH:
+                await self._emit_status(
+                    __event_emitter__,
+                    f"⚠️ 内容太短 ({len(clean_content)} 字符)，至少需要 {self.valves.MIN_TEXT_LENGTH} 字符",
+                    True,
+                )
+                return body
+
+            await self._emit_status(__event_emitter__, "📊 正在分析内容...", False)
+
+            # Generate infographic syntax via LLM
+            formatted_user_prompt = USER_PROMPT_GENERATE.format(
+                user_name=user_name,
+                current_date_time_str=current_date_time_str,
+                user_language=user_language,
+                long_text_content=clean_content,
+            )
+
+            target_model = self.valves.MODEL_ID or body.get("model")
+
+            llm_payload = {
+                "model": target_model,
+                "messages": [
+                    {"role": "system", "content": SYSTEM_PROMPT_INFOGRAPHIC},
+                    {"role": "user", "content": formatted_user_prompt},
+                ],
+                "stream": False,
+            }
+
+            user_obj = Users.get_user_by_id(user_id)
+            if not user_obj:
+                raise ValueError(f"Unable to get user object: {user_id}")
+
+            await self._emit_status(__event_emitter__, "📊 AI 正在生成信息图语法...", False)
+
+            llm_response = await generate_chat_completion(__request__, llm_payload, user_obj)
+
+            if not llm_response or "choices" not in llm_response or not llm_response["choices"]:
+                raise ValueError("Invalid LLM response.")
+
+            assistant_content = llm_response["choices"][0]["message"]["content"]
+            infographic_syntax = self._extract_infographic_syntax(assistant_content)
+
+            logger.info(f"Generated syntax: {infographic_syntax[:200]}...")
+
+            # Extract IDs for API callback
+            chat_id = self._extract_chat_id(body, __metadata__)
+            message_id = self._extract_message_id(body, __metadata__)
+            unique_id = f"ig_{int(time.time() * 1000)}"
+
+            await self._emit_status(__event_emitter__, "📊 正在渲染 SVG...", False)
+
+            # Execute JS to render and embed
+            if __event_call__:
+                js_code = self._generate_js_code(
+                    unique_id=unique_id,
+                    chat_id=chat_id,
+                    message_id=message_id,
+                    infographic_syntax=infographic_syntax,
+                    svg_width=self.valves.SVG_WIDTH,
+                    export_format=self.valves.EXPORT_FORMAT,
+                )
+
+                await __event_call__(
+                    {
+                        "type": "execute",
+                        "data": {"code": js_code},
+                    }
+                )
+
+            await self._emit_status(__event_emitter__, "✅ 信息图生成完成！", True)
+            logger.info("Infographic to Markdown completed")
+
+        except Exception as e:
+            error_message = f"Infographic generation failed: {str(e)}"
+            logger.error(error_message, exc_info=True)
+            await self._emit_status(__event_emitter__, f"❌ {error_message}", True)
+
+        return body

plugins/actions/js-render-poc/infographic_markdown_cn.py

@@ -0,0 +1,592 @@
+"""
+title: 📊 信息图转 Markdown
+author: Fu-Jie
+version: 1.0.0
+description: AI 生成信息图语法，前端渲染 SVG 并转换为 Markdown 图片格式嵌入消息。支持 AntV Infographic 模板。
+"""
+
+import time
+import json
+import logging
+import re
+from typing import Optional, Callable, Awaitable, Any, Dict
+from pydantic import BaseModel, Field
+from fastapi import Request
+from datetime import datetime
+
+from open_webui.utils.chat import generate_chat_completion
+from open_webui.models.users import Users
+
+logging.basicConfig(level=logging.INFO)
+logger = logging.getLogger(__name__)
+
+# =================================================================
+# LLM 提示词
+# =================================================================
+
+SYSTEM_PROMPT_INFOGRAPHIC = """
+你是一位专业的信息图设计专家，能够分析用户提供的文本内容并将其转换为 AntV Infographic 语法格式。
+
+## 信息图语法规范
+
+信息图语法是一种类似 Mermaid 的声明式语法，用于描述信息图模板、数据和主题。
+
+### 语法规则
+- 入口使用 `infographic <模板名>`
+- 键值对用空格分隔，**绝对不允许使用冒号**
+- 使用两个空格缩进
+- 对象数组使用 `-` 加换行
+
+⚠️ **重要警告：这不是 YAML 格式！**
+- ❌ 错误：`children:` `items:` `data:`（带冒号）
+- ✅ 正确：`children` `items` `data`（不带冒号）
+
+### 模板库与选择指南
+
+根据内容结构选择最合适的模板：
+
+#### 1. 列表与层级
+- **列表**：`list-grid`（网格卡片）、`list-vertical`（垂直列表）
+- **树形**：`tree-vertical`（垂直树）、`tree-horizontal`（水平树）
+- **思维导图**：`mindmap`（思维导图）
+
+#### 2. 序列与关系
+- **流程**：`sequence-roadmap`（路线图）、`sequence-zigzag`（折线流程）
+- **关系**：`relation-sankey`（桑基图）、`relation-circle`（圆形关系）
+
+#### 3. 对比与分析
+- **对比**：`compare-binary`（二元对比）
+- **分析**：`compare-swot`（SWOT 分析）、`quadrant-quarter`（象限图）
+
+#### 4. 图表与数据
+- **图表**：`chart-bar`、`chart-column`、`chart-line`、`chart-pie`、`chart-doughnut`、`chart-area`
+
+### 数据结构示例
+
+#### A. 标准列表/树形
+```infographic
+infographic list-grid
+data
+  title 项目模块
+  items
+    - label 模块 A
+      desc 模块 A 的描述
+    - label 模块 B
+      desc 模块 B 的描述
+```
+
+#### B. 二元对比
+```infographic
+infographic compare-binary
+data
+  title 优势与劣势
+  items
+    - label 优势
+      children
+        - label 研发能力强
+          desc 技术领先
+    - label 劣势
+      children
+        - label 品牌曝光弱
+          desc 营销不足
+```
+
+#### C. 图表
+```infographic
+infographic chart-bar
+data
+  title 季度收入
+  items
+    - label Q1
+      value 120
+    - label Q2
+      value 150
+```
+
+### 常用数据字段
+- `label`：主标题/标签（必填）
+- `desc`：描述文字（`list-grid` 最多 30 个中文字符）
+- `value`：数值（用于图表）
+- `children`：嵌套项
+
+## 输出要求
+1. **语言**：使用用户的语言输出内容。
+2. **格式**：用 ```infographic ... ``` 包裹输出。
+3. **无冒号**：键后面不要使用冒号。
+4. **缩进**：使用 2 个空格。
+"""
+
+USER_PROMPT_GENERATE = """
+请分析以下文本内容，将其核心信息转换为 AntV Infographic 语法格式。
+
+---
+**用户上下文：**
+用户名：{user_name}
+当前时间：{current_date_time_str}
+用户语言：{user_language}
+---
+
+**文本内容：**
+{long_text_content}
+
+请根据文本特征选择最合适的信息图模板，输出标准的信息图语法。
+
+**重要提示：** 
+- 如果使用 `list-grid` 格式，确保每个卡片的 `desc` 描述限制在 **最多 30 个中文字符**。
+- 描述应简洁，突出重点。
+"""
+
+
+class Action:
+    class Valves(BaseModel):
+        SHOW_STATUS: bool = Field(
+            default=True, description="在聊天界面显示操作状态更新。"
+        )
+        MODEL_ID: str = Field(
+            default="",
+            description="用于文本分析的 LLM 模型 ID。留空则使用当前对话模型。",
+        )
+        MIN_TEXT_LENGTH: int = Field(
+            default=50,
+            description="信息图分析所需的最小文本长度（字符数）。",
+        )
+        MESSAGE_COUNT: int = Field(
+            default=1,
+            description="用于生成的最近消息数量。",
+        )
+        SVG_WIDTH: int = Field(
+            default=800,
+            description="生成的 SVG 宽度（像素）。",
+        )
+        EXPORT_FORMAT: str = Field(
+            default="svg",
+            description="导出格式：'svg' 或 'png'。",
+        )
+
+    def __init__(self):
+        self.valves = self.Valves()
+
+    def _extract_chat_id(self, body: dict, metadata: Optional[dict]) -> str:
+        """从 body 或 metadata 中提取 chat_id"""
+        if isinstance(body, dict):
+            chat_id = body.get("chat_id")
+            if isinstance(chat_id, str) and chat_id.strip():
+                return chat_id.strip()
+
+            body_metadata = body.get("metadata", {})
+            if isinstance(body_metadata, dict):
+                chat_id = body_metadata.get("chat_id")
+                if isinstance(chat_id, str) and chat_id.strip():
+                    return chat_id.strip()
+
+        if isinstance(metadata, dict):
+            chat_id = metadata.get("chat_id")
+            if isinstance(chat_id, str) and chat_id.strip():
+                return chat_id.strip()
+
+        return ""
+
+    def _extract_message_id(self, body: dict, metadata: Optional[dict]) -> str:
+        """从 body 或 metadata 中提取 message_id"""
+        if isinstance(body, dict):
+            message_id = body.get("id")
+            if isinstance(message_id, str) and message_id.strip():
+                return message_id.strip()
+
+            body_metadata = body.get("metadata", {})
+            if isinstance(body_metadata, dict):
+                message_id = body_metadata.get("message_id")
+                if isinstance(message_id, str) and message_id.strip():
+                    return message_id.strip()
+
+        if isinstance(metadata, dict):
+            message_id = metadata.get("message_id")
+            if isinstance(message_id, str) and message_id.strip():
+                return message_id.strip()
+
+        return ""
+
+    def _extract_infographic_syntax(self, llm_output: str) -> str:
+        """从 LLM 输出中提取信息图语法"""
+        match = re.search(r"```infographic\s*(.*?)\s*```", llm_output, re.DOTALL)
+        if match:
+            return match.group(1).strip()
+        else:
+            logger.warning("LLM 输出未遵循预期格式，将整个输出作为语法处理。")
+            return llm_output.strip()
+
+    def _extract_text_content(self, content) -> str:
+        """从消息内容中提取文本，支持多模态格式"""
+        if isinstance(content, str):
+            return content
+        elif isinstance(content, list):
+            text_parts = []
+            for item in content:
+                if isinstance(item, dict) and item.get("type") == "text":
+                    text_parts.append(item.get("text", ""))
+                elif isinstance(item, str):
+                    text_parts.append(item)
+            return "\n".join(text_parts)
+        return str(content) if content else ""
+
+    async def _emit_status(self, emitter, description: str, done: bool = False):
+        """发送状态更新事件"""
+        if self.valves.SHOW_STATUS and emitter:
+            await emitter(
+                {"type": "status", "data": {"description": description, "done": done}}
+            )
+
+    def _generate_js_code(
+        self,
+        unique_id: str,
+        chat_id: str,
+        message_id: str,
+        infographic_syntax: str,
+        svg_width: int,
+        export_format: str,
+    ) -> str:
+        """生成用于前端 SVG 渲染的 JavaScript 代码"""
+        
+        # 转义语法以便嵌入 JS
+        syntax_escaped = (
+            infographic_syntax
+            .replace("\\", "\\\\")
+            .replace("`", "\\`")
+            .replace("${", "\\${")
+            .replace("</script>", "<\\/script>")
+        )
+        
+        # 模板映射
+        template_mapping_js = """
+        const TEMPLATE_MAPPING = {
+            'list-grid': 'list-grid-compact-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'
+        };
+        """
+        
+        return f"""
+(async function() {{
+    const uniqueId = "{unique_id}";
+    const chatId = "{chat_id}";
+    const messageId = "{message_id}";
+    const svgWidth = {svg_width};
+    const exportFormat = "{export_format}";
+    
+    console.log("[信息图 Markdown] 开始渲染...");
+    console.log("[信息图 Markdown] chatId:", chatId, "messageId:", messageId);
+    
+    try {{
+        // 加载 AntV Infographic（如果尚未加载）
+        if (typeof AntVInfographic === 'undefined') {{
+            console.log("[信息图 Markdown] 正在加载 AntV Infographic 库...");
+            await new Promise((resolve, reject) => {{
+                const script = document.createElement('script');
+                script.src = 'https://unpkg.com/@antv/infographic@latest/dist/infographic.min.js';
+                script.onload = resolve;
+                script.onerror = reject;
+                document.head.appendChild(script);
+            }});
+            console.log("[信息图 Markdown] 库加载完成。");
+        }}
+        
+        const {{ Infographic }} = AntVInfographic;
+        
+        // 获取信息图语法
+        let syntaxContent = `{syntax_escaped}`;
+        console.log("[信息图 Markdown] 原始语法:", syntaxContent.substring(0, 200) + "...");
+        
+        // 清理语法
+        const backtick = String.fromCharCode(96);
+        const prefix = backtick + backtick + backtick + 'infographic';
+        const simplePrefix = backtick + backtick + backtick;
+        
+        if (syntaxContent.toLowerCase().startsWith(prefix)) {{
+            syntaxContent = syntaxContent.substring(prefix.length).trim();
+        }} else if (syntaxContent.startsWith(simplePrefix)) {{
+            syntaxContent = syntaxContent.substring(simplePrefix.length).trim();
+        }}
+        
+        if (syntaxContent.endsWith(simplePrefix)) {{
+            syntaxContent = syntaxContent.substring(0, syntaxContent.length - simplePrefix.length).trim();
+        }}
+        
+        // 修复关键字后的冒号
+        syntaxContent = syntaxContent.replace(/^(data|items|children|theme|config):/gm, '$1');
+        syntaxContent = syntaxContent.replace(/(\\s)(children|items):/g, '$1$2');
+        
+        // 确保有 infographic 前缀
+        if (!syntaxContent.trim().toLowerCase().startsWith('infographic')) {{
+            syntaxContent = 'infographic list-grid\\n' + syntaxContent;
+        }}
+        
+        // 应用模板映射
+        {template_mapping_js}
+        
+        for (const [key, value] of Object.entries(TEMPLATE_MAPPING)) {{
+            const regex = new RegExp(`infographic\\\\s+${{key}}(?=\\\\s|$)`, 'i');
+            if (regex.test(syntaxContent)) {{
+                console.log(`[信息图 Markdown] 自动映射: ${{key}} -> ${{value}}`);
+                syntaxContent = syntaxContent.replace(regex, `infographic ${{value}}`);
+                break;
+            }}
+        }}
+        
+        console.log("[信息图 Markdown] 清理后语法:", syntaxContent.substring(0, 200) + "...");
+        
+        // 创建离屏容器
+        const container = document.createElement('div');
+        container.id = 'infographic-offscreen-' + uniqueId;
+        container.style.cssText = 'position:absolute;left:-9999px;top:-9999px;width:' + svgWidth + 'px;';
+        document.body.appendChild(container);
+        
+        // 创建并渲染信息图
+        const instance = new Infographic({{
+            container: '#' + container.id,
+            width: svgWidth,
+            padding: 24,
+        }});
+        
+        console.log("[信息图 Markdown] 正在渲染信息图...");
+        instance.render(syntaxContent);
+        
+        // 等待渲染完成并导出
+        await new Promise(resolve => setTimeout(resolve, 1000));
+        
+        let dataUrl;
+        if (exportFormat === 'png') {{
+            dataUrl = await instance.toDataURL({{ type: 'png', dpr: 2 }});
+        }} else {{
+            dataUrl = await instance.toDataURL({{ type: 'svg', embedResources: true }});
+        }}
+        
+        console.log("[信息图 Markdown] Data URL 已生成，长度:", dataUrl.length);
+        
+        // 清理
+        instance.destroy();
+        document.body.removeChild(container);
+        
+        // 生成 Markdown 图片
+        const markdownImage = `![📊 AI 生成的信息图](${{dataUrl}})`;
+        
+        // 通过 API 更新消息
+        if (chatId && messageId) {{
+            const token = localStorage.getItem("token");
+            
+            // 获取当前消息内容
+            const getResponse = await fetch(`/api/v1/chats/${{chatId}}`, {{
+                method: "GET",
+                headers: {{ "Authorization": `Bearer ${{token}}` }}
+            }});
+            
+            if (!getResponse.ok) {{
+                throw new Error("获取对话数据失败: " + getResponse.status);
+            }}
+            
+            const chatData = await getResponse.json();
+            let originalContent = "";
+            
+            if (chatData.chat && chatData.chat.messages) {{
+                const targetMsg = chatData.chat.messages.find(m => m.id === messageId);
+                if (targetMsg && targetMsg.content) {{
+                    originalContent = targetMsg.content;
+                }}
+            }}
+            
+            // 移除已有的信息图图片
+            const infographicPattern = /\\n*!\\[📊[^\\]]*\\]\\(data:image\\/[^)]+\\)/g;
+            let cleanedContent = originalContent.replace(infographicPattern, "");
+            cleanedContent = cleanedContent.replace(/\\n{{3,}}/g, "\\n\\n").trim();
+            
+            // 追加新图片
+            const newContent = cleanedContent + "\\n\\n" + markdownImage;
+            
+            // 更新消息
+            const updateResponse = await fetch(`/api/v1/chats/${{chatId}}/messages/${{messageId}}/event`, {{
+                method: "POST",
+                headers: {{
+                    "Content-Type": "application/json",
+                    "Authorization": `Bearer ${{token}}`
+                }},
+                body: JSON.stringify({{
+                    type: "chat:message",
+                    data: {{ content: newContent }}
+                }})
+            }});
+            
+            if (updateResponse.ok) {{
+                console.log("[信息图 Markdown] ✅ 消息更新成功！");
+            }} else {{
+                console.error("[信息图 Markdown] API 错误:", updateResponse.status);
+            }}
+        }} else {{
+            console.warn("[信息图 Markdown] ⚠️ 缺少 chatId 或 messageId");
+        }}
+        
+    }} catch (error) {{
+        console.error("[信息图 Markdown] 错误:", error);
+    }}
+}})();
+"""
+
+    async def action(
+        self,
+        body: dict,
+        __user__: dict = None,
+        __event_emitter__=None,
+        __event_call__: Optional[Callable[[Any], Awaitable[None]]] = None,
+        __metadata__: Optional[dict] = None,
+        __request__: Request = None,
+    ) -> dict:
+        """
+        使用 AntV 生成信息图并作为 Markdown 图片嵌入。
+        """
+        logger.info("动作：信息图转 Markdown 开始")
+
+        # 获取用户信息
+        if isinstance(__user__, (list, tuple)):
+            user_language = __user__[0].get("language", "zh") if __user__ else "zh"
+            user_name = __user__[0].get("name", "用户") if __user__[0] else "用户"
+            user_id = __user__[0].get("id", "unknown_user") if __user__ else "unknown_user"
+        elif isinstance(__user__, dict):
+            user_language = __user__.get("language", "zh")
+            user_name = __user__.get("name", "用户")
+            user_id = __user__.get("id", "unknown_user")
+        else:
+            user_language = "zh"
+            user_name = "用户"
+            user_id = "unknown_user"
+
+        # 获取当前时间
+        now = datetime.now()
+        current_date_time_str = now.strftime("%Y-%m-%d %H:%M:%S")
+
+        try:
+            messages = body.get("messages", [])
+            if not messages:
+                raise ValueError("没有可用的消息。")
+
+            # 获取最近的消息
+            message_count = min(self.valves.MESSAGE_COUNT, len(messages))
+            recent_messages = messages[-message_count:]
+
+            # 聚合内容
+            aggregated_parts = []
+            for msg in recent_messages:
+                text_content = self._extract_text_content(msg.get("content"))
+                if text_content:
+                    aggregated_parts.append(text_content)
+
+            if not aggregated_parts:
+                raise ValueError("消息中未找到文本内容。")
+
+            long_text_content = "\n\n---\n\n".join(aggregated_parts)
+
+            # 移除已有的 HTML 块
+            parts = re.split(r"```html.*?```", long_text_content, flags=re.DOTALL)
+            clean_content = ""
+            for part in reversed(parts):
+                if part.strip():
+                    clean_content = part.strip()
+                    break
+
+            if not clean_content:
+                clean_content = long_text_content.strip()
+
+            # 检查最小长度
+            if len(clean_content) < self.valves.MIN_TEXT_LENGTH:
+                await self._emit_status(
+                    __event_emitter__,
+                    f"⚠️ 内容太短（{len(clean_content)} 字符），至少需要 {self.valves.MIN_TEXT_LENGTH} 字符",
+                    True,
+                )
+                return body
+
+            await self._emit_status(__event_emitter__, "📊 正在分析内容...", False)
+
+            # 通过 LLM 生成信息图语法
+            formatted_user_prompt = USER_PROMPT_GENERATE.format(
+                user_name=user_name,
+                current_date_time_str=current_date_time_str,
+                user_language=user_language,
+                long_text_content=clean_content,
+            )
+
+            target_model = self.valves.MODEL_ID or body.get("model")
+
+            llm_payload = {
+                "model": target_model,
+                "messages": [
+                    {"role": "system", "content": SYSTEM_PROMPT_INFOGRAPHIC},
+                    {"role": "user", "content": formatted_user_prompt},
+                ],
+                "stream": False,
+            }
+
+            user_obj = Users.get_user_by_id(user_id)
+            if not user_obj:
+                raise ValueError(f"无法获取用户对象：{user_id}")
+
+            await self._emit_status(__event_emitter__, "📊 AI 正在生成信息图语法...", False)
+
+            llm_response = await generate_chat_completion(__request__, llm_payload, user_obj)
+
+            if not llm_response or "choices" not in llm_response or not llm_response["choices"]:
+                raise ValueError("无效的 LLM 响应。")
+
+            assistant_content = llm_response["choices"][0]["message"]["content"]
+            infographic_syntax = self._extract_infographic_syntax(assistant_content)
+
+            logger.info(f"生成的语法：{infographic_syntax[:200]}...")
+
+            # 提取 API 回调所需的 ID
+            chat_id = self._extract_chat_id(body, __metadata__)
+            message_id = self._extract_message_id(body, __metadata__)
+            unique_id = f"ig_{int(time.time() * 1000)}"
+
+            await self._emit_status(__event_emitter__, "📊 正在渲染 SVG...", False)
+
+            # 执行 JS 进行渲染和嵌入
+            if __event_call__:
+                js_code = self._generate_js_code(
+                    unique_id=unique_id,
+                    chat_id=chat_id,
+                    message_id=message_id,
+                    infographic_syntax=infographic_syntax,
+                    svg_width=self.valves.SVG_WIDTH,
+                    export_format=self.valves.EXPORT_FORMAT,
+                )
+
+                await __event_call__(
+                    {
+                        "type": "execute",
+                        "data": {"code": js_code},
+                    }
+                )
+
+            await self._emit_status(__event_emitter__, "✅ 信息图生成完成！", True)
+            logger.info("信息图转 Markdown 完成")
+
+        except Exception as e:
+            error_message = f"信息图生成失败：{str(e)}"
+            logger.error(error_message, exc_info=True)
+            await self._emit_status(__event_emitter__, f"❌ {error_message}", True)
+
+        return body

plugins/actions/js-render-poc/js_render_poc.py

@@ -0,0 +1,257 @@
+"""
+title: JS Render PoC
+author: Fu-Jie
+version: 0.6.0
+description: Proof of concept for JS rendering + API write-back pattern. JS renders SVG and updates message via API.
+"""
+
+import time
+import json
+import logging
+from typing import Optional, Callable, Awaitable, Any
+from pydantic import BaseModel, Field
+from fastapi import Request
+
+logging.basicConfig(level=logging.INFO)
+logger = logging.getLogger(__name__)
+
+
+class Action:
+    class Valves(BaseModel):
+        pass
+
+    def __init__(self):
+        self.valves = self.Valves()
+
+    def _extract_chat_id(self, body: dict, metadata: Optional[dict]) -> str:
+        """Extract chat_id from body or metadata"""
+        if isinstance(body, dict):
+            # body["chat_id"] 是 chat_id
+            chat_id = body.get("chat_id")
+            if isinstance(chat_id, str) and chat_id.strip():
+                return chat_id.strip()
+
+            body_metadata = body.get("metadata", {})
+            if isinstance(body_metadata, dict):
+                chat_id = body_metadata.get("chat_id")
+                if isinstance(chat_id, str) and chat_id.strip():
+                    return chat_id.strip()
+
+        if isinstance(metadata, dict):
+            chat_id = metadata.get("chat_id")
+            if isinstance(chat_id, str) and chat_id.strip():
+                return chat_id.strip()
+
+        return ""
+
+    def _extract_message_id(self, body: dict, metadata: Optional[dict]) -> str:
+        """Extract message_id from body or metadata"""
+        if isinstance(body, dict):
+            # body["id"] 是 message_id
+            message_id = body.get("id")
+            if isinstance(message_id, str) and message_id.strip():
+                return message_id.strip()
+
+            body_metadata = body.get("metadata", {})
+            if isinstance(body_metadata, dict):
+                message_id = body_metadata.get("message_id")
+                if isinstance(message_id, str) and message_id.strip():
+                    return message_id.strip()
+
+        if isinstance(metadata, dict):
+            message_id = metadata.get("message_id")
+            if isinstance(message_id, str) and message_id.strip():
+                return message_id.strip()
+
+        return ""
+
+    async def action(
+        self,
+        body: dict,
+        __user__: dict = None,
+        __event_emitter__=None,
+        __event_call__: Optional[Callable[[Any], Awaitable[None]]] = None,
+        __metadata__: Optional[dict] = None,
+        __request__: Request = None,
+    ) -> dict:
+        """
+        PoC: Use __event_call__ to execute JS that renders SVG and updates message via API.
+        """
+        # 准备调试数据
+        body_for_log = {}
+        for k, v in body.items():
+            if k == "messages":
+                body_for_log[k] = f"[{len(v)} messages]"
+            else:
+                body_for_log[k] = v
+
+        body_json = json.dumps(body_for_log, ensure_ascii=False, default=str)
+        metadata_json = (
+            json.dumps(__metadata__, ensure_ascii=False, default=str)
+            if __metadata__
+            else "null"
+        )
+
+        # 转义 JSON 中的特殊字符以便嵌入 JS
+        body_json_escaped = (
+            body_json.replace("\\", "\\\\").replace("`", "\\`").replace("${", "\\${")
+        )
+        metadata_json_escaped = (
+            metadata_json.replace("\\", "\\\\")
+            .replace("`", "\\`")
+            .replace("${", "\\${")
+        )
+
+        chat_id = self._extract_chat_id(body, __metadata__)
+        message_id = self._extract_message_id(body, __metadata__)
+
+        unique_id = f"poc_{int(time.time() * 1000)}"
+
+        if __event_emitter__:
+            await __event_emitter__(
+                {
+                    "type": "status",
+                    "data": {"description": "🔄 正在渲染...", "done": False},
+                }
+            )
+
+        if __event_call__:
+            await __event_call__(
+                {
+                    "type": "execute",
+                    "data": {
+                        "code": f"""
+(async function() {{
+    const uniqueId = "{unique_id}";
+    const chatId = "{chat_id}";
+    const messageId = "{message_id}";
+    
+    // ===== DEBUG: 输出 Python 端的数据 =====
+    console.log("[JS Render PoC] ===== DEBUG INFO (from Python) =====");
+    console.log("[JS Render PoC] body:", `{body_json_escaped}`);
+    console.log("[JS Render PoC] __metadata__:", `{metadata_json_escaped}`);
+    console.log("[JS Render PoC] Extracted: chatId=", chatId, "messageId=", messageId);
+    console.log("[JS Render PoC] =========================================");
+    
+    try {{
+        console.log("[JS Render PoC] Starting SVG render...");
+        
+        // Create SVG
+        const svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
+        svg.setAttribute("width", "200");
+        svg.setAttribute("height", "200");
+        svg.setAttribute("viewBox", "0 0 200 200");
+        svg.setAttribute("xmlns", "http://www.w3.org/2000/svg");
+        
+        const defs = document.createElementNS("http://www.w3.org/2000/svg", "defs");
+        const gradient = document.createElementNS("http://www.w3.org/2000/svg", "linearGradient");
+        gradient.setAttribute("id", "grad-" + uniqueId);
+        gradient.innerHTML = `
+            <stop offset="0%" style="stop-color:#1e88e5;stop-opacity:1" />
+            <stop offset="100%" style="stop-color:#43a047;stop-opacity:1" />
+        `;
+        defs.appendChild(gradient);
+        svg.appendChild(defs);
+        
+        const circle = document.createElementNS("http://www.w3.org/2000/svg", "circle");
+        circle.setAttribute("cx", "100");
+        circle.setAttribute("cy", "100");
+        circle.setAttribute("r", "80");
+        circle.setAttribute("fill", `url(#grad-${{uniqueId}})`);
+        svg.appendChild(circle);
+        
+        const text = document.createElementNS("http://www.w3.org/2000/svg", "text");
+        text.setAttribute("x", "100");
+        text.setAttribute("y", "105");
+        text.setAttribute("text-anchor", "middle");
+        text.setAttribute("fill", "white");
+        text.setAttribute("font-size", "16");
+        text.setAttribute("font-weight", "bold");
+        text.textContent = "PoC Success!";
+        svg.appendChild(text);
+        
+        // Convert to Base64 Data URI
+        const svgData = new XMLSerializer().serializeToString(svg);
+        const base64 = btoa(unescape(encodeURIComponent(svgData)));
+        const dataUri = "data:image/svg+xml;base64," + base64;
+        
+        console.log("[JS Render PoC] SVG rendered, data URI length:", dataUri.length);
+        
+        // Call API - 完全替换方案（更稳定）
+        if (chatId && messageId) {{
+            const token = localStorage.getItem("token");
+            
+            // 1. 获取当前消息内容
+            const getResponse = await fetch(`/api/v1/chats/${{chatId}}`, {{
+                method: "GET",
+                headers: {{ "Authorization": `Bearer ${{token}}` }}
+            }});
+            
+            if (!getResponse.ok) {{
+                throw new Error("Failed to get chat data: " + getResponse.status);
+            }}
+            
+            const chatData = await getResponse.json();
+            console.log("[JS Render PoC] Got chat data");
+            
+            let originalContent = "";
+            if (chatData.chat && chatData.chat.messages) {{
+                const targetMsg = chatData.chat.messages.find(m => m.id === messageId);
+                if (targetMsg && targetMsg.content) {{
+                    originalContent = targetMsg.content;
+                    console.log("[JS Render PoC] Found original content, length:", originalContent.length);
+                }}
+            }}
+            
+            // 2. 移除已存在的 PoC 图片（如果有的话）
+            // 匹配 ![JS Render PoC 生成的 SVG](data:...) 格式
+            const pocImagePattern = /\\n*!\\[JS Render PoC[^\\]]*\\]\\(data:image\\/svg\\+xml;base64,[^)]+\\)/g;
+            let cleanedContent = originalContent.replace(pocImagePattern, "");
+            // 移除可能残留的多余空行
+            cleanedContent = cleanedContent.replace(/\\n{{3,}}/g, "\\n\\n").trim();
+            
+            if (cleanedContent !== originalContent) {{
+                console.log("[JS Render PoC] Removed existing PoC image(s)");
+            }}
+            
+            // 3. 添加新的 Markdown 图片
+            const markdownImage = `![JS Render PoC 生成的 SVG](${{dataUri}})`;
+            const newContent = cleanedContent + "\\n\\n" + markdownImage;
+            
+            // 3. 使用 chat:message 完全替换
+            const updateResponse = await fetch(`/api/v1/chats/${{chatId}}/messages/${{messageId}}/event`, {{
+                method: "POST",
+                headers: {{
+                    "Content-Type": "application/json",
+                    "Authorization": `Bearer ${{token}}`
+                }},
+                body: JSON.stringify({{
+                    type: "chat:message",
+                    data: {{ content: newContent }}
+                }})
+            }});
+            
+            if (updateResponse.ok) {{
+                console.log("[JS Render PoC] ✅ Message updated successfully!");
+            }} else {{
+                console.error("[JS Render PoC] API error:", updateResponse.status, await updateResponse.text());
+            }}
+        }} else {{
+            console.warn("[JS Render PoC] ⚠️ Missing chatId or messageId, cannot persist.");
+        }}
+        
+    }} catch (error) {{
+        console.error("[JS Render PoC] Error:", error);
+    }}
+}})();
+                        """
+                    },
+                }
+            )
+
+        if __event_emitter__:
+            await __event_emitter__(
+                {"type": "status", "data": {"description": "✅ 渲染完成", "done": True}}
+            )
+
+        return body

plugins/actions/smart-mind-map/README.md

@@ -1,6 +1,6 @@
 # Smart Mind Map - Mind Mapping Generation Plugin
 
-**Author:** [Fu-Jie](https://github.com/Fu-Jie) | **Version:** 0.8.2 | **License:** MIT
+**Author:** [Fu-Jie](https://github.com/Fu-Jie) | **Version:** 0.9.1 | **License:** MIT
 
 > **Important**: To ensure the maintainability and usability of all plugins, each plugin should be accompanied by clear and comprehensive documentation to ensure its functionality, configuration, and usage are well explained.
 
@@ -8,6 +8,25 @@ Smart Mind Map is a powerful OpenWebUI action plugin that intelligently analyzes
 
 ---
 
+## 🔥 What's New in v0.9.1
+
+**New Feature: Image Output Mode**
+
+- **Static Image Support**: Added `OUTPUT_MODE` configuration parameter.
+  - `html` (default): Interactive HTML mind map.
+  - `image`: Static SVG image embedded directly in Markdown (**No HTML code output**, cleaner chat history).
+- **Efficient Storage**: Image mode uploads SVG to `/api/v1/files`, avoiding huge base64 strings in chat history.
+- **Smart Features**: Auto-responsive width and automatic theme detection (light/dark) for generated images.
+
+| Feature | HTML Mode (Default) | Image Mode |
+| :--- | :--- | :--- |
+| **Output Format** | Interactive HTML Block | Static Markdown Image |
+| **Interactivity** | Zoom, Pan, Expand/Collapse | None (Static Image) |
+| **Chat History** | Contains HTML Code | Clean (Image URL only) |
+| **Storage** | Browser Rendering | `/api/v1/files` Upload |
+
+---
+
 ## Core Features
 
 - ✅ **Intelligent Text Analysis**: Automatically identifies core themes, key concepts, and hierarchical structures
@@ -20,6 +39,7 @@ Smart Mind Map is a powerful OpenWebUI action plugin that intelligently analyzes
 - ✅ **Real-time Rendering**: Renders mind maps directly in the chat interface without navigation
 - ✅ **Export Capabilities**: Supports PNG, SVG code, and Markdown source export
 - ✅ **Customizable Configuration**: Configurable LLM model, minimum text length, and other parameters
+- ✅ **Image Output Mode**: Generate static SVG images embedded directly in Markdown (**No HTML code output**, cleaner chat history)
 
 ---
 
@@ -80,6 +100,7 @@ You can adjust the following parameters in the plugin's settings (Valves):
 | `MIN_TEXT_LENGTH` | `100` | Minimum text length (in characters) required for mind map analysis. Text that's too short cannot generate valid mind maps. |
 | `CLEAR_PREVIOUS_HTML` | `false` | Whether to clear previous plugin-generated HTML content when generating a new mind map. |
 | `MESSAGE_COUNT` | `1` | Number of recent messages to use for mind map generation (1-5). |
+| `OUTPUT_MODE` | `html` | Output mode: `html` for interactive HTML (default), or `image` to embed as static Markdown image. |
 
 ---
 
@@ -277,6 +298,32 @@ This plugin uses only OpenWebUI's built-in dependencies. **No additional package
 
 ## Changelog
 
+### v0.9.1
+
+**New Feature: Image Output Mode**
+
+- Added `OUTPUT_MODE` configuration parameter with two options:
+  - `html` (default): Interactive HTML mind map with full control panel
+  - `image`: Static SVG image embedded directly in Markdown (uploaded to `/api/v1/files`)
+- Image mode features:
+  - Auto-responsive width (adapts to chat container)
+  - Automatic theme detection (light/dark)
+  - Persistent storage via Chat API (survives page refresh)
+  - Efficient file storage (no huge base64 strings in chat history)
+
+**Improvements:**
+
+- Implemented robust Chat API update mechanism with retry logic
+- Fixed message persistence using both `messages[]` and `history.messages`
+- Added Event API for immediate frontend updates
+- Removed unnecessary `SVG_WIDTH` and `SVG_HEIGHT` parameters (now auto-calculated)
+
+**Technical Details:**
+
+- Image mode uses `__event_call__` to execute JavaScript in the browser
+- SVG is rendered offline, converted to Blob, and uploaded to OpenWebUI Files API
+- Updates chat message with `/api/v1/files/{id}/content` URL via OpenWebUI Backend-Controlled API flow
+
 ### v0.8.2
 
 - Removed debug messages from output

plugins/actions/smart-mind-map/README_CN.md

@@ -1,6 +1,6 @@
 # 思维导图 - 思维导图生成插件
 
-**作者:** [Fu-Jie](https://github.com/Fu-Jie) | **版本:** 0.8.2 | **许可证:** MIT
+**作者:** [Fu-Jie](https://github.com/Fu-Jie) | **版本:** 0.9.1 | **许可证:** MIT
 
 > **重要提示**：为了确保所有插件的可维护性和易用性，每个插件都应附带清晰、完整的文档，以确保其功能、配置和使用方法得到充分说明。
 
@@ -8,6 +8,25 @@
 
 ---
 
+## 🔥 v0.9.1 更新亮点
+
+**新功能：图片输出模式**
+
+- **静态图片支持**：新增 `OUTPUT_MODE` 配置参数。
+  - `html`（默认）：交互式 HTML 思维导图。
+  - `image`：静态 SVG 图片直接嵌入 Markdown（**不输出 HTML 代码**，聊天记录更简洁）。
+- **高效存储**：图片模式将 SVG 上传至 `/api/v1/files`，避免聊天记录中出现超长 Base64 字符串。
+- **智能特性**：生成的图片支持自动响应式宽度和自动主题检测（亮色/暗色）。
+
+| 特性 | HTML 模式 (默认) | 图片模式 |
+| :--- | :--- | :--- |
+| **输出格式** | 交互式 HTML 代码块 | 静态 Markdown 图片 |
+| **交互性** | 缩放、拖拽、展开/折叠 | 无 (静态图片) |
+| **聊天记录** | 包含 HTML 代码 | 简洁 (仅图片链接) |
+| **存储方式** | 浏览器实时渲染 | `/api/v1/files` 上传 |
+
+---
+
 ## 核心特性
 
 - ✅ **智能文本分析**：自动识别文本的核心主题、关键概念和层次结构
@@ -20,6 +39,7 @@
 - ✅ **实时渲染**：在聊天界面中直接渲染思维导图，无需跳转
 - ✅ **导出功能**：支持 PNG、SVG 代码和 Markdown 源码导出
 - ✅ **自定义配置**：可配置 LLM 模型、最小文本长度等参数
+- ✅ **图片输出模式**：生成静态 SVG 图片直接嵌入 Markdown（**不输出 HTML 代码**，聊天记录更简洁）
 
 ---
 
@@ -80,6 +100,7 @@
 | `MIN_TEXT_LENGTH` | `100` | 进行思维导图分析所需的最小文本长度（字符数）。文本过短将无法生成有效的导图。 |
 | `CLEAR_PREVIOUS_HTML` | `false` | 在生成新的思维导图时，是否清除之前由插件生成的 HTML 内容。 |
 | `MESSAGE_COUNT` | `1` | 用于生成思维导图的最近消息数量（1-5）。 |
+| `OUTPUT_MODE` | `html` | 输出模式：`html` 为交互式 HTML（默认），`image` 为嵌入静态 Markdown 图片。 |
 
 ---
 
@@ -277,6 +298,32 @@
 
 ## 更新日志
 
+### v0.9.1
+
+**新功能：图片输出模式**
+
+- 新增 `OUTPUT_MODE` 配置参数，支持两种模式：
+  - `html`（默认）：交互式 HTML 思维导图，带完整控制面板
+  - `image`：静态 SVG 图片直接嵌入 Markdown（上传至 `/api/v1/files`）
+- 图片模式特性：
+  - 自动响应式宽度（适应聊天容器）
+  - 自动主题检测（亮色/暗色）
+  - 通过 Chat API 持久化存储（刷新页面后保留）
+  - 高效文件存储（聊天记录中无超长 Base64 字符串）
+
+**改进项：**
+
+- 实现健壮的 Chat API 更新机制，带重试逻辑
+- 修复消息持久化，同时更新 `messages[]` 和 `history.messages`
+- 添加 Event API 实现即时前端更新
+- 移除不必要的 `SVG_WIDTH` 和 `SVG_HEIGHT` 参数（现已自动计算）
+
+**技术细节：**
+
+- 图片模式使用 `__event_call__` 在浏览器中执行 JavaScript
+- SVG 离屏渲染，转换为 Blob，并上传至 OpenWebUI Files API
+- 通过 OpenWebUI Backend-Controlled API 流程更新聊天消息为 `/api/v1/files/{id}/content` URL
+
 ### v0.8.2
 
 - 移除输出中的调试信息

plugins/actions/smart-mind-map/smart_mind_map.py

@@ -3,7 +3,7 @@ title: Smart Mind Map
 author: Fu-Jie
 author_url: https://github.com/Fu-Jie
 funding_url: https://github.com/Fu-Jie/awesome-openwebui
-version: 0.8.2
+version: 0.9.1
 icon_url: data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9ImN1cnJlbnRDb2xvciIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiPjxyZWN0IHg9IjE2IiB5PSIxNiIgd2lkdGg9IjYiIGhlaWdodD0iNiIgcng9IjEiLz48cmVjdCB4PSIyIiB5PSIxNiIgd2lkdGg9IjYiIGhlaWdodD0iNiIgcng9IjEiLz48cmVjdCB4PSI5IiB5PSIyIiB3aWR0aD0iNiIgaGVpZ2h0PSI2IiByeD0iMSIvPjxwYXRoIGQ9Ik01IDE2di0zYTEgMSAwIDAgMSAxLTFoMTJhMSAxIDAgMCAxIDEgMXYzIi8+PHBhdGggZD0iTTEyIDEyVjgiLz48L3N2Zz4=
 description: Intelligently analyzes text content and generates interactive mind maps to help users structure and visualize knowledge.
 """
@@ -13,7 +13,7 @@ import os
 import re
 import time
 from datetime import datetime, timezone
-from typing import Any, Dict, Optional
+from typing import Any, Callable, Awaitable, Dict, Optional
 from zoneinfo import ZoneInfo
 
 from fastapi import Request
@@ -786,6 +786,10 @@ class Action:
             default=1,
             description="Number of recent messages to use for generation. Set to 1 for just the last message, or higher for more context.",
         )
+        OUTPUT_MODE: str = Field(
+            default="html",
+            description="Output mode: 'html' for interactive HTML (default), or 'image' to embed as Markdown image.",
+        )
 
     def __init__(self):
         self.valves = self.Valves()
@@ -814,6 +818,46 @@ class Action:
             "user_language": user_data.get("language", "en-US"),
         }
 
+    def _extract_chat_id(self, body: dict, metadata: Optional[dict]) -> str:
+        """Extract chat_id from body or metadata"""
+        if isinstance(body, dict):
+            chat_id = body.get("chat_id")
+            if isinstance(chat_id, str) and chat_id.strip():
+                return chat_id.strip()
+
+            body_metadata = body.get("metadata", {})
+            if isinstance(body_metadata, dict):
+                chat_id = body_metadata.get("chat_id")
+                if isinstance(chat_id, str) and chat_id.strip():
+                    return chat_id.strip()
+
+        if isinstance(metadata, dict):
+            chat_id = metadata.get("chat_id")
+            if isinstance(chat_id, str) and chat_id.strip():
+                return chat_id.strip()
+
+        return ""
+
+    def _extract_message_id(self, body: dict, metadata: Optional[dict]) -> str:
+        """Extract message_id from body or metadata"""
+        if isinstance(body, dict):
+            message_id = body.get("id")
+            if isinstance(message_id, str) and message_id.strip():
+                return message_id.strip()
+
+            body_metadata = body.get("metadata", {})
+            if isinstance(body_metadata, dict):
+                message_id = body_metadata.get("message_id")
+                if isinstance(message_id, str) and message_id.strip():
+                    return message_id.strip()
+
+        if isinstance(metadata, dict):
+            message_id = metadata.get("message_id")
+            if isinstance(message_id, str) and message_id.strip():
+                return message_id.strip()
+
+        return ""
+
     def _extract_markdown_syntax(self, llm_output: str) -> str:
         match = re.search(r"```markdown\s*(.*?)\s*```", llm_output, re.DOTALL)
         if match:
@@ -901,14 +945,391 @@ class Action:
 
         return base_html.strip()
 
+    def _generate_image_js_code(
+        self,
+        unique_id: str,
+        chat_id: str,
+        message_id: str,
+        markdown_syntax: str,
+    ) -> str:
+        """Generate JavaScript code for frontend SVG rendering and image embedding"""
+
+        # Escape the syntax for JS embedding
+        syntax_escaped = (
+            markdown_syntax.replace("\\", "\\\\")
+            .replace("`", "\\`")
+            .replace("${", "\\${")
+            .replace("</script>", "<\\/script>")
+        )
+
+        return f"""
+(async function() {{
+    const uniqueId = "{unique_id}";
+    const chatId = "{chat_id}";
+    const messageId = "{message_id}";
+    const defaultWidth = 1200;
+    const defaultHeight = 800;
+    
+    // Theme detection - check parent document for OpenWebUI theme
+    const detectTheme = () => {{
+        try {{
+            // 1. Check parent document's html/body class or data-theme
+            const html = document.documentElement;
+            const body = document.body;
+            const htmlClass = html ? html.className : '';
+            const bodyClass = body ? body.className : '';
+            const htmlDataTheme = html ? html.getAttribute('data-theme') : '';
+            
+            if (htmlDataTheme === 'dark' || bodyClass.includes('dark') || htmlClass.includes('dark')) {{
+                return 'dark';
+            }}
+            if (htmlDataTheme === 'light' || bodyClass.includes('light') || htmlClass.includes('light')) {{
+                return 'light';
+            }}
+            
+            // 2. Check meta theme-color
+            const metas = document.querySelectorAll('meta[name="theme-color"]');
+            if (metas.length > 0) {{
+                const color = metas[metas.length - 1].content.trim();
+                const m = color.match(/^#?([0-9a-f]{{6}})$/i);
+                if (m) {{
+                    const hex = m[1];
+                    const r = parseInt(hex.slice(0, 2), 16);
+                    const g = parseInt(hex.slice(2, 4), 16);
+                    const b = parseInt(hex.slice(4, 6), 16);
+                    const luma = (0.2126 * r + 0.7152 * g + 0.0722 * b) / 255;
+                    return luma < 0.5 ? 'dark' : 'light';
+                }}
+            }}
+            
+            // 3. Check system preference
+            if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {{
+                return 'dark';
+            }}
+            
+            return 'light';
+        }} catch (e) {{
+            return 'light';
+        }}
+    }};
+    
+    const currentTheme = detectTheme();
+    console.log("[MindMap Image] Detected theme:", currentTheme);
+    
+    // Theme-based colors
+    const colors = currentTheme === 'dark' ? {{
+        background: '#1f2937',
+        text: '#e5e7eb',
+        link: '#94a3b8',
+        nodeStroke: '#64748b'
+    }} : {{
+        background: '#ffffff',
+        text: '#1f2937',
+        link: '#546e7a',
+        nodeStroke: '#94a3b8'
+    }};
+    
+    // Auto-detect chat container width for responsive sizing
+    let svgWidth = defaultWidth;
+    let svgHeight = defaultHeight;
+    const chatContainer = document.getElementById('chat-container');
+    if (chatContainer) {{
+        const containerWidth = chatContainer.clientWidth;
+        if (containerWidth > 100) {{
+            // Use container width with some padding (90% of container)
+            svgWidth = Math.floor(containerWidth * 0.9);
+            // Maintain aspect ratio based on default dimensions
+            svgHeight = Math.floor(svgWidth * (defaultHeight / defaultWidth));
+            console.log("[MindMap Image] Auto-detected container width:", containerWidth, "-> SVG:", svgWidth, "x", svgHeight);
+        }}
+    }}
+    
+    console.log("[MindMap Image] Starting render...");
+    console.log("[MindMap Image] chatId:", chatId, "messageId:", messageId);
+    
+    try {{
+        // Load D3 if not loaded
+        if (typeof d3 === 'undefined') {{
+            console.log("[MindMap Image] Loading D3...");
+            await new Promise((resolve, reject) => {{
+                const script = document.createElement('script');
+                script.src = 'https://cdn.jsdelivr.net/npm/d3@7';
+                script.onload = resolve;
+                script.onerror = reject;
+                document.head.appendChild(script);
+            }});
+        }}
+        
+        // Load markmap-lib if not loaded
+        if (!window.markmap || !window.markmap.Transformer) {{
+            console.log("[MindMap Image] Loading markmap-lib...");
+            await new Promise((resolve, reject) => {{
+                const script = document.createElement('script');
+                script.src = 'https://cdn.jsdelivr.net/npm/markmap-lib@0.17';
+                script.onload = resolve;
+                script.onerror = reject;
+                document.head.appendChild(script);
+            }});
+        }}
+        
+        // Load markmap-view if not loaded
+        if (!window.markmap || !window.markmap.Markmap) {{
+            console.log("[MindMap Image] Loading markmap-view...");
+            await new Promise((resolve, reject) => {{
+                const script = document.createElement('script');
+                script.src = 'https://cdn.jsdelivr.net/npm/markmap-view@0.17';
+                script.onload = resolve;
+                script.onerror = reject;
+                document.head.appendChild(script);
+            }});
+        }}
+        
+        const {{ Transformer, Markmap }} = window.markmap;
+        
+        // Get markdown syntax
+        let syntaxContent = `{syntax_escaped}`;
+        console.log("[MindMap Image] Syntax length:", syntaxContent.length);
+        
+        // Create offscreen container
+        const container = document.createElement('div');
+        container.id = 'mindmap-offscreen-' + uniqueId;
+        container.style.cssText = 'position:absolute;left:-9999px;top:-9999px;width:' + svgWidth + 'px;height:' + svgHeight + 'px;';
+        document.body.appendChild(container);
+        
+        // Create SVG element
+        const svgEl = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
+        svgEl.setAttribute('width', svgWidth);
+        svgEl.setAttribute('height', svgHeight);
+        svgEl.style.width = svgWidth + 'px';
+        svgEl.style.height = svgHeight + 'px';
+        svgEl.style.backgroundColor = colors.background;
+        container.appendChild(svgEl);
+        
+        // Transform markdown to tree
+        const transformer = new Transformer();
+        const {{ root }} = transformer.transform(syntaxContent);
+        
+        // Create markmap instance
+        const options = {{
+            autoFit: true,
+            initialExpandLevel: Infinity,
+            zoom: false,
+            pan: false
+        }};
+        
+        console.log("[MindMap Image] Rendering markmap...");
+        const markmapInstance = Markmap.create(svgEl, options, root);
+        
+        // Wait for render to complete
+        await new Promise(resolve => setTimeout(resolve, 1500));
+        markmapInstance.fit();
+        await new Promise(resolve => setTimeout(resolve, 500));
+        
+        // Clone and prepare SVG for export
+        const clonedSvg = svgEl.cloneNode(true);
+        clonedSvg.setAttribute('xmlns', 'http://www.w3.org/2000/svg');
+        clonedSvg.setAttribute('xmlns:xlink', 'http://www.w3.org/1999/xlink');
+        
+        // Add background rect with theme color
+        const bgRect = document.createElementNS('http://www.w3.org/2000/svg', 'rect');
+        bgRect.setAttribute('width', '100%');
+        bgRect.setAttribute('height', '100%');
+        bgRect.setAttribute('fill', colors.background);
+        clonedSvg.insertBefore(bgRect, clonedSvg.firstChild);
+        
+        // Add inline styles with theme colors
+        const style = document.createElementNS('http://www.w3.org/2000/svg', 'style');
+        style.textContent = `
+            text {{ font-family: sans-serif; font-size: 14px; fill: ${{colors.text}}; }}
+            foreignObject, .markmap-foreign, .markmap-foreign div {{ color: ${{colors.text}}; font-family: sans-serif; font-size: 14px; }}
+            h1 {{ font-size: 22px; font-weight: 700; margin: 0; }}
+            h2 {{ font-size: 18px; font-weight: 600; margin: 0; }}
+            strong {{ font-weight: 700; }}
+            .markmap-link {{ stroke: ${{colors.link}}; fill: none; }}
+            .markmap-node circle, .markmap-node rect {{ stroke: ${{colors.nodeStroke}}; }}
+        `;
+        clonedSvg.insertBefore(style, bgRect.nextSibling);
+        
+        // Convert foreignObject to text for better compatibility
+        const foreignObjects = clonedSvg.querySelectorAll('foreignObject');
+        foreignObjects.forEach(fo => {{
+            const text = fo.textContent || '';
+            const g = document.createElementNS('http://www.w3.org/2000/svg', 'g');
+            const textEl = document.createElementNS('http://www.w3.org/2000/svg', 'text');
+            textEl.setAttribute('x', fo.getAttribute('x') || '0');
+            textEl.setAttribute('y', (parseFloat(fo.getAttribute('y') || '0') + 14).toString());
+            textEl.setAttribute('fill', colors.text);
+            textEl.setAttribute('font-family', 'sans-serif');
+            textEl.setAttribute('font-size', '14');
+            textEl.textContent = text.trim();
+            g.appendChild(textEl);
+            fo.parentNode.replaceChild(g, fo);
+        }});
+        
+        // Serialize SVG to string
+        const svgData = new XMLSerializer().serializeToString(clonedSvg);
+        
+        // Cleanup container
+        document.body.removeChild(container);
+        
+        // Convert SVG string to Blob
+        const blob = new Blob([svgData], {{ type: 'image/svg+xml' }});
+        const file = new File([blob], `mindmap-${{uniqueId}}.svg`, {{ type: 'image/svg+xml' }});
+        
+        // Upload file to OpenWebUI API
+        console.log("[MindMap Image] Uploading SVG file...");
+        const token = localStorage.getItem("token");
+        const formData = new FormData();
+        formData.append('file', file);
+        
+        const uploadResponse = await fetch('/api/v1/files/', {{
+            method: 'POST',
+            headers: {{
+                'Authorization': `Bearer ${{token}}`
+            }},
+            body: formData
+        }});
+        
+        if (!uploadResponse.ok) {{
+            throw new Error(`Upload failed: ${{uploadResponse.statusText}}`);
+        }}
+        
+        const fileData = await uploadResponse.json();
+        const fileId = fileData.id;
+        const imageUrl = `/api/v1/files/${{fileId}}/content`;
+        
+        console.log("[MindMap Image] File uploaded, ID:", fileId);
+        
+        // Generate markdown image with file URL
+        const markdownImage = `![🧠 Mind Map](${{imageUrl}})`;
+        
+        // Update message via API
+        if (chatId && messageId) {{
+            
+            // Helper function with retry logic
+            const fetchWithRetry = async (url, options, retries = 3) => {{
+                for (let i = 0; i < retries; i++) {{
+                    try {{
+                        const response = await fetch(url, options);
+                        if (response.ok) return response;
+                        if (i < retries - 1) {{
+                            console.log(`[MindMap Image] Retry ${{i + 1}}/${{retries}} for ${{url}}`);
+                            await new Promise(r => setTimeout(r, 1000 * (i + 1)));
+                        }}
+                    }} catch (e) {{
+                        if (i === retries - 1) throw e;
+                        await new Promise(r => setTimeout(r, 1000 * (i + 1)));
+                    }}
+                }}
+                return null;
+            }};
+            
+            // Get current chat data
+            const getResponse = await fetch(`/api/v1/chats/${{chatId}}`, {{
+                method: "GET",
+                headers: {{ "Authorization": `Bearer ${{token}}` }}
+            }});
+            
+            if (!getResponse.ok) {{
+                throw new Error("Failed to get chat data: " + getResponse.status);
+            }}
+            
+            const chatData = await getResponse.json();
+            let updatedMessages = [];
+            let newContent = "";
+            
+            if (chatData.chat && chatData.chat.messages) {{
+                updatedMessages = chatData.chat.messages.map(m => {{
+                    if (m.id === messageId) {{
+                        const originalContent = m.content || "";
+                        // Remove existing mindmap images (both base64 and file URL patterns)
+                        const mindmapPattern = /\\n*!\\[🧠[^\\]]*\\]\\((?:data:image\\/[^)]+|(?:\\/api\\/v1\\/files\\/[^)]+))\\)/g;
+                        let cleanedContent = originalContent.replace(mindmapPattern, "");
+                        cleanedContent = cleanedContent.replace(/\\n{{3,}}/g, "\\n\\n").trim();
+                        // Append new image
+                        newContent = cleanedContent + "\\n\\n" + markdownImage;
+                        
+                        // Critical: Update content in both messages array AND history object
+                        // The history object is the source of truth for the database
+                        if (chatData.chat.history && chatData.chat.history.messages) {{
+                            if (chatData.chat.history.messages[messageId]) {{
+                                chatData.chat.history.messages[messageId].content = newContent;
+                            }}
+                        }}
+                        
+                        return {{ ...m, content: newContent }};
+                    }}
+                    return m;
+                }});
+            }}
+            
+            if (!newContent) {{
+                console.warn("[MindMap Image] Could not find message to update");
+                return;
+            }}
+            
+            // Try to update frontend display via event API (optional, may not exist in all versions)
+            try {{
+                await fetch(`/api/v1/chats/${{chatId}}/messages/${{messageId}}/event`, {{
+                    method: "POST",
+                    headers: {{
+                        "Content-Type": "application/json",
+                        "Authorization": `Bearer ${{token}}`
+                    }},
+                    body: JSON.stringify({{
+                        type: "chat:message",
+                        data: {{ content: newContent }}
+                    }})
+                }});
+            }} catch (eventErr) {{
+                // Event API is optional, continue with persistence
+                console.log("[MindMap Image] Event API not available, continuing...");
+            }}
+            
+            // Persist to database by updating the entire chat object
+            // This follows the OpenWebUI Backend-Controlled API Flow
+            const updatePayload = {{
+                chat: {{
+                    ...chatData.chat,
+                    messages: updatedMessages
+                    // history is already updated in-place above
+                }}
+            }};
+            
+            const persistResponse = await fetchWithRetry(`/api/v1/chats/${{chatId}}`, {{
+                method: "POST",
+                headers: {{
+                    "Content-Type": "application/json",
+                    "Authorization": `Bearer ${{token}}`
+                }},
+                body: JSON.stringify(updatePayload)
+            }});
+            
+            if (persistResponse && persistResponse.ok) {{
+                console.log("[MindMap Image] ✅ Message persisted successfully!");
+            }} else {{
+                console.error("[MindMap Image] ❌ Failed to persist message after retries");
+            }}
+        }} else {{
+            console.warn("[MindMap Image] ⚠️ Missing chatId or messageId, cannot persist");
+        }}
+        
+    }} catch (error) {{
+        console.error("[MindMap Image] Error:", error);
+    }}
+}})();
+"""
+
     async def action(
         self,
         body: dict,
         __user__: Optional[Dict[str, Any]] = None,
         __event_emitter__: Optional[Any] = None,
+        __event_call__: Optional[Callable[[Any], Awaitable[None]]] = None,
+        __metadata__: Optional[dict] = None,
         __request__: Optional[Request] = None,
     ) -> Optional[dict]:
-        logger.info("Action: Smart Mind Map (v0.8.0) started")
+        logger.info("Action: Smart Mind Map (v0.9.1) started")
         user_ctx = self._get_user_context(__user__)
         user_language = user_ctx["user_language"]
         user_name = user_ctx["user_name"]
@@ -1090,6 +1511,45 @@ class Action:
                         user_language,
                     )
 
+            # Check output mode
+            if self.valves.OUTPUT_MODE == "image":
+                # Image mode: use JavaScript to render and embed as Markdown image
+                chat_id = self._extract_chat_id(body, __metadata__)
+                message_id = self._extract_message_id(body, __metadata__)
+
+                await self._emit_status(
+                    __event_emitter__,
+                    "Smart Mind Map: Rendering image...",
+                    False,
+                )
+
+                if __event_call__:
+                    js_code = self._generate_image_js_code(
+                        unique_id=unique_id,
+                        chat_id=chat_id,
+                        message_id=message_id,
+                        markdown_syntax=markdown_syntax,
+                    )
+
+                    await __event_call__(
+                        {
+                            "type": "execute",
+                            "data": {"code": js_code},
+                        }
+                    )
+
+                await self._emit_status(
+                    __event_emitter__, "Smart Mind Map: Image generated!", True
+                )
+                await self._emit_notification(
+                    __event_emitter__,
+                    f"Mind map image has been generated, {user_name}!",
+                    "success",
+                )
+                logger.info("Action: Smart Mind Map (v0.9.1) completed in image mode")
+                return body
+
+            # HTML mode (default): embed as HTML block
             html_embed_tag = f"```html\n{final_html}\n```"
             body["messages"][-1]["content"] = f"{long_text_content}\n\n{html_embed_tag}"
 
@@ -1101,7 +1561,7 @@ class Action:
                 f"Mind map has been generated, {user_name}!",
                 "success",
             )
-            logger.info("Action: Smart Mind Map (v0.8.0) completed successfully")
+            logger.info("Action: Smart Mind Map (v0.9.1) completed in HTML mode")
 
         except Exception as e:
             error_message = f"Smart Mind Map processing failed: {str(e)}"

plugins/actions/smart-mind-map/smart_mind_map_cn.py

@@ -3,7 +3,7 @@ title: 思维导图
 author: Fu-Jie
 author_url: https://github.com/Fu-Jie
 funding_url: https://github.com/Fu-Jie/awesome-openwebui
-version: 0.8.2
+version: 0.9.1
 icon_url: data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9ImN1cnJlbnRDb2xvciIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiPjxyZWN0IHg9IjE2IiB5PSIxNiIgd2lkdGg9IjYiIGhlaWdodD0iNiIgcng9IjEiLz48cmVjdCB4PSIyIiB5PSIxNiIgd2lkdGg9IjYiIGhlaWdodD0iNiIgcng9IjEiLz48cmVjdCB4PSI5IiB5PSIyIiB3aWR0aD0iNiIgaGVpZ2h0PSI2IiByeD0iMSIvPjxwYXRoIGQ9Ik01IDE2di0zYTEgMSAwIDAgMSAxLTFoMTJhMSAxIDAgMCAxIDEgMXYzIi8+PHBhdGggZD0iTTEyIDEyVjgiLz48L3N2Zz4=
 description: 智能分析文本内容,生成交互式思维导图,帮助用户结构化和可视化知识。
 """
@@ -13,7 +13,7 @@ import os
 import re
 import time
 from datetime import datetime, timezone
-from typing import Any, Dict, Optional
+from typing import Any, Callable, Awaitable, Dict, Optional
 from zoneinfo import ZoneInfo
 
 from fastapi import Request
@@ -443,7 +443,7 @@ SCRIPT_TEMPLATE_MINDMAP = """
 
             const markdownContent = sourceEl.textContent.trim();
             if (!markdownContent) {
-                containerEl.innerHTML = '<div class="error-message">⚠️ 无法加载思维导图：缺少有效内容。</div>';
+                containerEl.innerHTML = '<div class="error-message">⚠️ 无法加载思维导图:缺少有效内容。</div>';
                 return;
             }
 
@@ -485,7 +485,7 @@ SCRIPT_TEMPLATE_MINDMAP = """
 
             }).catch((error) => {
                 console.error('Markmap loading error:', error);
-                containerEl.innerHTML = '<div class="error-message">⚠️ 资源加载失败，请稍后重试。</div>';
+                containerEl.innerHTML = '<div class="error-message">⚠️ 资源加载失败,请稍后重试。</div>';
             });
         };
 
@@ -771,19 +771,23 @@ class Action:
         )
         MODEL_ID: str = Field(
             default="",
-            description="用于文本分析的内置LLM模型ID。如果为空，则使用当前对话的模型。",
+            description="用于文本分析的内置LLM模型ID。如果为空,则使用当前对话的模型。",
         )
         MIN_TEXT_LENGTH: int = Field(
             default=100,
-            description="进行思维导图分析所需的最小文本长度（字符数）。",
+            description="进行思维导图分析所需的最小文本长度(字符数)。",
         )
         CLEAR_PREVIOUS_HTML: bool = Field(
             default=False,
-            description="是否强制清除旧的插件结果（如果为 True，则不合并，直接覆盖）。",
+            description="是否强制清除旧的插件结果(如果为 True,则不合并,直接覆盖)。",
         )
         MESSAGE_COUNT: int = Field(
             default=1,
-            description="用于生成的最近消息数量。设置为1仅使用最后一条消息，更大值可包含更多上下文。",
+            description="用于生成的最近消息数量。设置为1仅使用最后一条消息,更大值可包含更多上下文。",
+        )
+        OUTPUT_MODE: str = Field(
+            default="html",
+            description="输出模式: 'html' 为交互式HTML(默认),'image' 为嵌入Markdown图片。",
         )
 
     def __init__(self):
@@ -813,14 +817,52 @@ class Action:
             "user_language": user_data.get("language", "zh-CN"),
         }
 
+    def _extract_chat_id(self, body: dict, metadata: Optional[dict]) -> str:
+        """从 body 或 metadata 中提取 chat_id"""
+        if isinstance(body, dict):
+            chat_id = body.get("chat_id")
+            if isinstance(chat_id, str) and chat_id.strip():
+                return chat_id.strip()
+
+            body_metadata = body.get("metadata", {})
+            if isinstance(body_metadata, dict):
+                chat_id = body_metadata.get("chat_id")
+                if isinstance(chat_id, str) and chat_id.strip():
+                    return chat_id.strip()
+
+        if isinstance(metadata, dict):
+            chat_id = metadata.get("chat_id")
+            if isinstance(chat_id, str) and chat_id.strip():
+                return chat_id.strip()
+
+        return ""
+
+    def _extract_message_id(self, body: dict, metadata: Optional[dict]) -> str:
+        """从 body 或 metadata 中提取 message_id"""
+        if isinstance(body, dict):
+            message_id = body.get("id")
+            if isinstance(message_id, str) and message_id.strip():
+                return message_id.strip()
+
+            body_metadata = body.get("metadata", {})
+            if isinstance(body_metadata, dict):
+                message_id = body_metadata.get("message_id")
+                if isinstance(message_id, str) and message_id.strip():
+                    return message_id.strip()
+
+        if isinstance(metadata, dict):
+            message_id = metadata.get("message_id")
+            if isinstance(message_id, str) and message_id.strip():
+                return message_id.strip()
+
+        return ""
+
     def _extract_markdown_syntax(self, llm_output: str) -> str:
         match = re.search(r"```markdown\s*(.*?)\s*```", llm_output, re.DOTALL)
         if match:
             extracted_content = match.group(1).strip()
         else:
-            logger.warning(
-                "LLM输出未严格遵循预期Markdown格式，将整个输出作为摘要处理。"
-            )
+            logger.warning("LLM输出未严格遵循预期Markdown格式,将整个输出作为摘要处理。")
             extracted_content = llm_output.strip()
         return extracted_content.replace("</script>", "<\\/script>")
 
@@ -844,7 +886,7 @@ class Action:
         return re.sub(pattern, "", content).strip()
 
     def _extract_text_content(self, content) -> str:
-        """从消息内容中提取文本，支持多模态消息格式"""
+        """从消息内容中提取文本,支持多模态消息格式"""
         if isinstance(content, str):
             return content
         elif isinstance(content, list):
@@ -867,7 +909,7 @@ class Action:
         user_language: str = "zh-CN",
     ) -> str:
         """
-        将新内容合并到现有的 HTML 容器中，或者创建一个新的容器。
+        将新内容合并到现有的 HTML 容器中,或者创建一个新的容器。
         """
         if (
             "<!-- OPENWEBUI_PLUGIN_OUTPUT -->" in existing_html_code
@@ -900,14 +942,392 @@ class Action:
 
         return base_html.strip()
 
+    def _generate_image_js_code(
+        self,
+        unique_id: str,
+        chat_id: str,
+        message_id: str,
+        markdown_syntax: str,
+    ) -> str:
+        """生成用于前端 SVG 渲染和图片嵌入的 JavaScript 代码"""
+
+        # 转义语法以便嵌入 JS
+        syntax_escaped = (
+            markdown_syntax.replace("\\", "\\\\")
+            .replace("`", "\\`")
+            .replace("${", "\\${")
+            .replace("</script>", "<\\/script>")
+        )
+
+        return f"""
+(async function() {{
+    const uniqueId = "{unique_id}";
+    const chatId = "{chat_id}";
+    const messageId = "{message_id}";
+    const defaultWidth = 1200;
+    const defaultHeight = 800;
+    
+    // 主题检测 - 检查 OpenWebUI 当前主题
+    const detectTheme = () => {{
+        try {{
+            // 1. 检查 html/body 的 class 或 data-theme 属性
+            const html = document.documentElement;
+            const body = document.body;
+            const htmlClass = html ? html.className : '';
+            const bodyClass = body ? body.className : '';
+            const htmlDataTheme = html ? html.getAttribute('data-theme') : '';
+            
+            if (htmlDataTheme === 'dark' || bodyClass.includes('dark') || htmlClass.includes('dark')) {{
+                return 'dark';
+            }}
+            if (htmlDataTheme === 'light' || bodyClass.includes('light') || htmlClass.includes('light')) {{
+                return 'light';
+            }}
+            
+            // 2. 检查 meta theme-color
+            const metas = document.querySelectorAll('meta[name="theme-color"]');
+            if (metas.length > 0) {{
+                const color = metas[metas.length - 1].content.trim();
+                const m = color.match(/^#?([0-9a-f]{{6}})$/i);
+                if (m) {{
+                    const hex = m[1];
+                    const r = parseInt(hex.slice(0, 2), 16);
+                    const g = parseInt(hex.slice(2, 4), 16);
+                    const b = parseInt(hex.slice(4, 6), 16);
+                    const luma = (0.2126 * r + 0.7152 * g + 0.0722 * b) / 255;
+                    return luma < 0.5 ? 'dark' : 'light';
+                }}
+            }}
+            
+            // 3. 检查系统偏好
+            if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {{
+                return 'dark';
+            }}
+            
+            return 'light';
+        }} catch (e) {{
+            return 'light';
+        }}
+    }};
+    
+    const currentTheme = detectTheme();
+    console.log("[思维导图图片] 检测到主题:", currentTheme);
+    
+    // 基于主题的颜色配置
+    const colors = currentTheme === 'dark' ? {{
+        background: '#1f2937',
+        text: '#e5e7eb',
+        link: '#94a3b8',
+        nodeStroke: '#64748b'
+    }} : {{
+        background: '#ffffff',
+        text: '#1f2937',
+        link: '#546e7a',
+        nodeStroke: '#94a3b8'
+    }};
+    
+    // 自动检测聊天容器宽度以实现自适应
+    let svgWidth = defaultWidth;
+    let svgHeight = defaultHeight;
+    const chatContainer = document.getElementById('chat-container');
+    if (chatContainer) {{
+        const containerWidth = chatContainer.clientWidth;
+        if (containerWidth > 100) {{
+            // 使用容器宽度的90%(留出边距)
+            svgWidth = Math.floor(containerWidth * 0.9);
+            // 根据默认尺寸保持宽高比
+            svgHeight = Math.floor(svgWidth * (defaultHeight / defaultWidth));
+            console.log("[思维导图图片] 自动检测容器宽度:", containerWidth, "-> SVG:", svgWidth, "x", svgHeight);
+        }}
+    }}
+    
+    console.log("[思维导图图片] 开始渲染...");
+    console.log("[思维导图图片] chatId:", chatId, "messageId:", messageId);
+    
+    try {{
+        // 加载 D3
+        if (typeof d3 === 'undefined') {{
+            console.log("[思维导图图片] 正在加载 D3...");
+            await new Promise((resolve, reject) => {{
+                const script = document.createElement('script');
+                script.src = 'https://cdn.jsdelivr.net/npm/d3@7';
+                script.onload = resolve;
+                script.onerror = reject;
+                document.head.appendChild(script);
+            }});
+        }}
+        
+        // 加载 markmap-lib
+        if (!window.markmap || !window.markmap.Transformer) {{
+            console.log("[思维导图图片] 正在加载 markmap-lib...");
+            await new Promise((resolve, reject) => {{
+                const script = document.createElement('script');
+                script.src = 'https://cdn.jsdelivr.net/npm/markmap-lib@0.17';
+                script.onload = resolve;
+                script.onerror = reject;
+                document.head.appendChild(script);
+            }});
+        }}
+        
+        // 加载 markmap-view
+        if (!window.markmap || !window.markmap.Markmap) {{
+            console.log("[思维导图图片] 正在加载 markmap-view...");
+            await new Promise((resolve, reject) => {{
+                const script = document.createElement('script');
+                script.src = 'https://cdn.jsdelivr.net/npm/markmap-view@0.17';
+                script.onload = resolve;
+                script.onerror = reject;
+                document.head.appendChild(script);
+            }});
+        }}
+        
+        const {{ Transformer, Markmap }} = window.markmap;
+        
+        // 获取 markdown 语法
+        let syntaxContent = `{syntax_escaped}`;
+        console.log("[思维导图图片] 语法长度:", syntaxContent.length);
+        
+        // 创建离屏容器
+        const container = document.createElement('div');
+        container.id = 'mindmap-offscreen-' + uniqueId;
+        container.style.cssText = 'position:absolute;left:-9999px;top:-9999px;width:' + svgWidth + 'px;height:' + svgHeight + 'px;';
+        document.body.appendChild(container);
+        
+        // 创建 SVG 元素
+        const svgEl = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
+        svgEl.setAttribute('width', svgWidth);
+        svgEl.setAttribute('height', svgHeight);
+        svgEl.style.width = svgWidth + 'px';
+        svgEl.style.height = svgHeight + 'px';
+        svgEl.style.backgroundColor = colors.background;
+        container.appendChild(svgEl);
+        
+        // 将 markdown 转换为树结构
+        const transformer = new Transformer();
+        const {{ root }} = transformer.transform(syntaxContent);
+        
+        // 创建 markmap 实例
+        const options = {{
+            autoFit: true,
+            initialExpandLevel: Infinity,
+            zoom: false,
+            pan: false
+        }};
+        
+        console.log("[思维导图图片] 正在渲染 markmap...");
+        const markmapInstance = Markmap.create(svgEl, options, root);
+        
+        // 等待渲染完成
+        await new Promise(resolve => setTimeout(resolve, 1500));
+        markmapInstance.fit();
+        await new Promise(resolve => setTimeout(resolve, 500));
+        
+        // 克隆并准备 SVG 导出
+        const clonedSvg = svgEl.cloneNode(true);
+        clonedSvg.setAttribute('xmlns', 'http://www.w3.org/2000/svg');
+        clonedSvg.setAttribute('xmlns:xlink', 'http://www.w3.org/1999/xlink');
+        
+        // 添加背景矩形(使用主题颜色)
+        const bgRect = document.createElementNS('http://www.w3.org/2000/svg', 'rect');
+        bgRect.setAttribute('width', '100%');
+        bgRect.setAttribute('height', '100%');
+        bgRect.setAttribute('fill', colors.background);
+        clonedSvg.insertBefore(bgRect, clonedSvg.firstChild);
+        
+        // 添加内联样式(使用主题颜色)
+        const style = document.createElementNS('http://www.w3.org/2000/svg', 'style');
+        style.textContent = `
+            text {{ font-family: sans-serif; font-size: 14px; fill: ${{colors.text}}; }}
+            foreignObject, .markmap-foreign, .markmap-foreign div {{ color: ${{colors.text}}; font-family: sans-serif; font-size: 14px; }}
+            h1 {{ font-size: 22px; font-weight: 700; margin: 0; }}
+            h2 {{ font-size: 18px; font-weight: 600; margin: 0; }}
+            strong {{ font-weight: 700; }}
+            .markmap-link {{ stroke: ${{colors.link}}; fill: none; }}
+            .markmap-node circle, .markmap-node rect {{ stroke: ${{colors.nodeStroke}}; }}
+        `;
+        clonedSvg.insertBefore(style, bgRect.nextSibling);
+        
+        // 将 foreignObject 转换为 text 以提高兼容性
+        const foreignObjects = clonedSvg.querySelectorAll('foreignObject');
+        foreignObjects.forEach(fo => {{
+            const text = fo.textContent || '';
+            const g = document.createElementNS('http://www.w3.org/2000/svg', 'g');
+            const textEl = document.createElementNS('http://www.w3.org/2000/svg', 'text');
+            textEl.setAttribute('x', fo.getAttribute('x') || '0');
+            textEl.setAttribute('y', (parseFloat(fo.getAttribute('y') || '0') + 14).toString());
+            textEl.setAttribute('fill', colors.text);
+            textEl.setAttribute('font-family', 'sans-serif');
+            textEl.setAttribute('font-size', '14');
+            textEl.textContent = text.trim();
+            g.appendChild(textEl);
+            fo.parentNode.replaceChild(g, fo);
+        }});
+        
+        // 序列化 SVG 为字符串
+        const svgData = new XMLSerializer().serializeToString(clonedSvg);
+        
+        // 清理容器
+        document.body.removeChild(container);
+        
+        // 将 SVG 字符串转换为 Blob
+        const blob = new Blob([svgData], {{ type: 'image/svg+xml' }});
+        const file = new File([blob], `mindmap-${{uniqueId}}.svg`, {{ type: 'image/svg+xml' }});
+        
+        // 上传文件到 OpenWebUI API
+        console.log("[思维导图图片] 正在上传 SVG 文件...");
+        const token = localStorage.getItem("token");
+        const formData = new FormData();
+        formData.append('file', file);
+        
+        const uploadResponse = await fetch('/api/v1/files/', {{
+            method: 'POST',
+            headers: {{
+                'Authorization': `Bearer ${{token}}`
+            }},
+            body: formData
+        }});
+        
+        if (!uploadResponse.ok) {{
+            throw new Error(`上传失败: ${{uploadResponse.statusText}}`);
+        }}
+        
+        const fileData = await uploadResponse.json();
+        const fileId = fileData.id;
+        const imageUrl = `/api/v1/files/${{fileId}}/content`;
+        
+        console.log("[思维导图图片] 文件已上传, ID:", fileId);
+        
+        // 生成包含文件 URL 的 markdown 图片
+        const markdownImage = `![🧠 思维导图](${{imageUrl}})`;
+        
+        // 通过 API 更新消息
+        if (chatId && messageId) {{
+            const token = localStorage.getItem("token");
+            
+            // 带重试逻辑的请求函数
+            const fetchWithRetry = async (url, options, retries = 3) => {{
+                for (let i = 0; i < retries; i++) {{
+                    try {{
+                        const response = await fetch(url, options);
+                        if (response.ok) return response;
+                        if (i < retries - 1) {{
+                            console.log(`[思维导图图片] 重试 ${{i + 1}}/${{retries}}: ${{url}}`);
+                            await new Promise(r => setTimeout(r, 1000 * (i + 1)));
+                        }}
+                    }} catch (e) {{
+                        if (i === retries - 1) throw e;
+                        await new Promise(r => setTimeout(r, 1000 * (i + 1)));
+                    }}
+                }}
+                return null;
+            }};
+            
+            // 获取当前聊天数据
+            const getResponse = await fetch(`/api/v1/chats/${{chatId}}`, {{
+                method: "GET",
+                headers: {{ "Authorization": `Bearer ${{token}}` }}
+            }});
+            
+            if (!getResponse.ok) {{
+                throw new Error("获取聊天数据失败: " + getResponse.status);
+            }}
+            
+            const chatData = await getResponse.json();
+            let updatedMessages = [];
+            let newContent = "";
+            
+            if (chatData.chat && chatData.chat.messages) {{
+                updatedMessages = chatData.chat.messages.map(m => {{
+                    if (m.id === messageId) {{
+                        const originalContent = m.content || "";
+                        // 移除已有的思维导图图片 (包括 base64 和文件 URL 格式)
+                        const mindmapPattern = /\\n*!\\[🧠[^\\]]*\\]\\((?:data:image\\/[^)]+|(?:\\/api\\/v1\\/files\\/[^)]+))\\)/g;
+                        let cleanedContent = originalContent.replace(mindmapPattern, "");
+                        cleanedContent = cleanedContent.replace(/\\n{{3,}}/g, "\\n\\n").trim();
+                        // 追加新图片
+                        newContent = cleanedContent + "\\n\\n" + markdownImage;
+                        
+                        // 关键: 同时更新 messages 数组和 history 对象中的内容
+                        // history 对象是数据库的单一真值来源
+                        if (chatData.chat.history && chatData.chat.history.messages) {{
+                            if (chatData.chat.history.messages[messageId]) {{
+                                chatData.chat.history.messages[messageId].content = newContent;
+                            }}
+                        }}
+                        
+                        return {{ ...m, content: newContent }};
+                    }}
+                    return m;
+                }});
+            }}
+            
+            if (!newContent) {{
+                console.warn("[思维导图图片] 找不到要更新的消息");
+                return;
+            }}
+            
+            // 尝试通过事件 API 更新前端显示(可选,部分版本可能不支持)
+            try {{
+                await fetch(`/api/v1/chats/${{chatId}}/messages/${{messageId}}/event`, {{
+                    method: "POST",
+                    headers: {{
+                        "Content-Type": "application/json",
+                        "Authorization": `Bearer ${{token}}`
+                    }},
+                    body: JSON.stringify({{
+                        type: "chat:message",
+                        data: {{ content: newContent }}
+                    }})
+                }});
+            }} catch (eventErr) {{
+                // 事件 API 是可选的,继续执行持久化
+                console.log("[思维导图图片] 事件 API 不可用,继续执行...");
+            }}
+            
+            // 通过更新整个聊天对象来持久化到数据库
+            // 遵循 OpenWebUI 后端控制的 API 流程
+            const updatePayload = {{
+                chat: {{
+                    ...chatData.chat,
+                    messages: updatedMessages
+                    // history 已在上面原地更新
+                }}
+            }};
+            
+            const persistResponse = await fetchWithRetry(`/api/v1/chats/${{chatId}}`, {{
+                method: "POST",
+                headers: {{
+                    "Content-Type": "application/json",
+                    "Authorization": `Bearer ${{token}}`
+                }},
+                body: JSON.stringify(updatePayload)
+            }});
+            
+            if (persistResponse && persistResponse.ok) {{
+                console.log("[思维导图图片] ✅ 消息已持久化保存!");
+            }} else {{
+                console.error("[思维导图图片] ❌ 重试后仍然无法持久化消息");
+            }}
+        }} else {{
+            console.warn("[思维导图图片] ⚠️ 缺少 chatId 或 messageId,无法持久化");
+        }}
+        
+    }} catch (error) {{
+        console.error("[思维导图图片] 错误:", error);
+    }}
+}})();
+"""
+
     async def action(
         self,
         body: dict,
         __user__: Optional[Dict[str, Any]] = None,
         __event_emitter__: Optional[Any] = None,
+        __event_call__: Optional[Callable[[Any], Awaitable[None]]] = None,
+        __metadata__: Optional[dict] = None,
         __request__: Optional[Request] = None,
     ) -> Optional[dict]:
-        logger.info("Action: 思维导图 (v12 - Final Feedback Fix) started")
+        logger.info("Action: 思维导图 (v0.9.1) started")
         user_ctx = self._get_user_context(__user__)
         user_language = user_ctx["user_language"]
         user_name = user_ctx["user_name"]
@@ -923,7 +1343,7 @@ class Action:
             current_year = now_dt.strftime("%Y")
             current_timezone_str = tz_env or "UTC"
         except Exception as e:
-            logger.warning(f"获取时区信息失败: {e}，使用默认值。")
+            logger.warning(f"获取时区信息失败: {e},使用默认值。")
             now = datetime.now()
             current_date_time_str = now.strftime("%Y年%m月%d日 %H:%M:%S")
             current_weekday_zh = "未知星期"
@@ -931,7 +1351,7 @@ class Action:
             current_timezone_str = "未知时区"
 
         await self._emit_notification(
-            __event_emitter__, "思维导图已启动，正在为您生成思维导图...", "info"
+            __event_emitter__, "思维导图已启动,正在为您生成思维导图...", "info"
         )
 
         messages = body.get("messages")
@@ -980,7 +1400,7 @@ class Action:
             long_text_content = original_content.strip()
 
         if len(long_text_content) < self.valves.MIN_TEXT_LENGTH:
-            short_text_message = f"文本内容过短({len(long_text_content)}字符)，无法进行有效分析。请提供至少{self.valves.MIN_TEXT_LENGTH}字符的文本。"
+            short_text_message = f"文本内容过短({len(long_text_content)}字符),无法进行有效分析。请提供至少{self.valves.MIN_TEXT_LENGTH}字符的文本。"
             await self._emit_notification(
                 __event_emitter__, short_text_message, "warning"
             )
@@ -1021,7 +1441,7 @@ class Action:
             }
             user_obj = Users.get_user_by_id(user_id)
             if not user_obj:
-                raise ValueError(f"无法获取用户对象，用户ID: {user_id}")
+                raise ValueError(f"无法获取用户对象,用户ID: {user_id}")
 
             llm_response = await generate_chat_completion(
                 __request__, llm_payload, user_obj
@@ -1084,26 +1504,65 @@ class Action:
                         user_language,
                     )
 
+            # 检查输出模式
+            if self.valves.OUTPUT_MODE == "image":
+                # 图片模式: 使用 JavaScript 渲染并嵌入为 Markdown 图片
+                chat_id = self._extract_chat_id(body, __metadata__)
+                message_id = self._extract_message_id(body, __metadata__)
+
+                await self._emit_status(
+                    __event_emitter__,
+                    "思维导图: 正在渲染图片...",
+                    False,
+                )
+
+                if __event_call__:
+                    js_code = self._generate_image_js_code(
+                        unique_id=unique_id,
+                        chat_id=chat_id,
+                        message_id=message_id,
+                        markdown_syntax=markdown_syntax,
+                    )
+
+                    await __event_call__(
+                        {
+                            "type": "execute",
+                            "data": {"code": js_code},
+                        }
+                    )
+
+                await self._emit_status(
+                    __event_emitter__, "思维导图: 图片已生成!", True
+                )
+                await self._emit_notification(
+                    __event_emitter__,
+                    f"思维导图图片已生成,{user_name}!",
+                    "success",
+                )
+                logger.info("Action: 思维导图 (v0.9.1) 图片模式完成")
+                return body
+
+            # HTML 模式(默认): 嵌入为 HTML 块
             html_embed_tag = f"```html\n{final_html}\n```"
             body["messages"][-1]["content"] = f"{long_text_content}\n\n{html_embed_tag}"
 
-            await self._emit_status(__event_emitter__, "思维导图: 绘制完成！", True)
+            await self._emit_status(__event_emitter__, "思维导图: 绘制完成!", True)
             await self._emit_notification(
-                __event_emitter__, f"思维导图已生成，{user_name}！", "success"
+                __event_emitter__, f"思维导图已生成,{user_name}!", "success"
             )
-            logger.info("Action: 思维导图 (v12) completed successfully")
+            logger.info("Action: 思维导图 (v0.9.1) HTML 模式完成")
 
         except Exception as e:
             error_message = f"思维导图处理失败: {str(e)}"
             logger.error(f"思维导图错误: {error_message}", exc_info=True)
-            user_facing_error = f"抱歉，思维导图在处理时遇到错误: {str(e)}。\n请检查Open WebUI后端日志获取更多详情。"
+            user_facing_error = f"抱歉,思维导图在处理时遇到错误: {str(e)}。\n请检查Open WebUI后端日志获取更多详情。"
             body["messages"][-1][
                 "content"
             ] = f"{long_text_content}\n\n❌ **错误:** {user_facing_error}"
 
             await self._emit_status(__event_emitter__, "思维导图: 处理失败。", True)
             await self._emit_notification(
-                __event_emitter__, f"思维导图生成失败, {user_name}！", "error"
+                __event_emitter__, f"思维导图生成失败, {user_name}!", "error"
             )
 
         return body

scripts/openwebui_stats.py

@@ -0,0 +1,550 @@
+#!/usr/bin/env python3
+"""
+OpenWebUI 社区统计工具
+
+获取并统计你在 openwebui.com 上发布的插件/帖子数据。
+
+使用方法：
+    1. 设置环境变量：
+       - OPENWEBUI_API_KEY: 你的 API Key
+       - OPENWEBUI_USER_ID: 你的用户 ID
+    2. 运行: python scripts/openwebui_stats.py
+
+获取 API Key：
+    访问 https://openwebui.com/settings/api 创建 API Key (sk-开头)
+
+获取 User ID：
+    从个人主页的 API 请求中获取，格式如: b15d1348-4347-42b4-b815-e053342d6cb0
+"""
+
+import os
+import json
+import requests
+from datetime import datetime, timezone, timedelta
+from typing import Optional
+from pathlib import Path
+
+# 北京时区 (UTC+8)
+BEIJING_TZ = timezone(timedelta(hours=8))
+
+
+def get_beijing_time() -> datetime:
+    """获取当前北京时间"""
+    return datetime.now(BEIJING_TZ)
+
+
+# 尝试加载 .env 文件
+try:
+    from dotenv import load_dotenv
+
+    load_dotenv()
+except ImportError:
+    pass
+
+
+class OpenWebUIStats:
+    """OpenWebUI 社区统计工具"""
+
+    BASE_URL = "https://api.openwebui.com/api/v1"
+
+    def __init__(self, api_key: str, user_id: Optional[str] = None):
+        """
+        初始化统计工具
+
+        Args:
+            api_key: OpenWebUI API Key (JWT Token)
+            user_id: 用户 ID，如果为 None 则从 token 中解析
+        """
+        self.api_key = api_key
+        self.user_id = user_id or self._parse_user_id_from_token(api_key)
+        self.session = requests.Session()
+        self.session.headers.update(
+            {
+                "Authorization": f"Bearer {api_key}",
+                "Accept": "application/json",
+                "Content-Type": "application/json",
+            }
+        )
+
+    def _parse_user_id_from_token(self, token: str) -> str:
+        """从 JWT Token 中解析用户 ID"""
+        import base64
+
+        try:
+            # JWT 格式: header.payload.signature
+            payload = token.split(".")[1]
+            # 添加 padding
+            padding = 4 - len(payload) % 4
+            if padding != 4:
+                payload += "=" * padding
+            decoded = base64.urlsafe_b64decode(payload)
+            data = json.loads(decoded)
+            return data.get("id", "")
+        except Exception as e:
+            print(f"⚠️ 无法从 Token 解析用户 ID: {e}")
+            return ""
+
+    def get_user_posts(self, sort: str = "new", page: int = 1) -> list:
+        """
+        获取用户发布的帖子列表
+
+        Args:
+            sort: 排序方式 (new/top/hot)
+            page: 页码
+
+        Returns:
+            帖子列表
+        """
+        url = f"{self.BASE_URL}/posts/users/{self.user_id}"
+        params = {"sort": sort, "page": page}
+
+        response = self.session.get(url, params=params)
+        response.raise_for_status()
+        return response.json()
+
+    def get_all_posts(self, sort: str = "new") -> list:
+        """获取所有帖子（自动分页）"""
+        all_posts = []
+        page = 1
+
+        while True:
+            posts = self.get_user_posts(sort=sort, page=page)
+            if not posts:
+                break
+            all_posts.extend(posts)
+            page += 1
+
+        return all_posts
+
+    def generate_stats(self, posts: list) -> dict:
+        """生成统计数据"""
+        stats = {
+            "total_posts": len(posts),
+            "total_downloads": 0,
+            "total_views": 0,
+            "total_upvotes": 0,
+            "total_downvotes": 0,
+            "total_saves": 0,
+            "total_comments": 0,
+            "by_type": {},
+            "posts": [],
+            "user": {},  # 用户信息
+        }
+
+        # 从第一个帖子中提取用户信息
+        if posts and "user" in posts[0]:
+            user = posts[0]["user"]
+            stats["user"] = {
+                "username": user.get("username", ""),
+                "name": user.get("name", ""),
+                "profile_url": f"https://openwebui.com/u/{user.get('username', '')}",
+                "profile_image": user.get("profileImageUrl", ""),
+                "followers": user.get("followerCount", 0),
+                "following": user.get("followingCount", 0),
+                "total_points": user.get("totalPoints", 0),
+                "post_points": user.get("postPoints", 0),
+                "comment_points": user.get("commentPoints", 0),
+                "contributions": user.get("totalContributions", 0),
+            }
+
+        for post in posts:
+            # 累计统计
+            stats["total_downloads"] += post.get("downloads", 0)
+            stats["total_views"] += post.get("views", 0)
+            stats["total_upvotes"] += post.get("upvotes", 0)
+            stats["total_downvotes"] += post.get("downvotes", 0)
+            stats["total_saves"] += post.get("saveCount", 0)
+            stats["total_comments"] += post.get("commentCount", 0)
+
+            # 解析 data 字段 - 正确路径: data.function.meta
+            function_data = post.get("data", {}).get("function", {})
+            meta = function_data.get("meta", {})
+            manifest = meta.get("manifest", {})
+            post_type = meta.get("type", function_data.get("type", "unknown"))
+
+            if post_type not in stats["by_type"]:
+                stats["by_type"][post_type] = 0
+            stats["by_type"][post_type] += 1
+
+            # 单个帖子信息
+            created_at = datetime.fromtimestamp(post.get("createdAt", 0))
+            updated_at = datetime.fromtimestamp(post.get("updatedAt", 0))
+
+            stats["posts"].append(
+                {
+                    "title": post.get("title", ""),
+                    "slug": post.get("slug", ""),
+                    "type": post_type,
+                    "version": manifest.get("version", ""),
+                    "author": manifest.get("author", ""),
+                    "description": meta.get("description", ""),
+                    "downloads": post.get("downloads", 0),
+                    "views": post.get("views", 0),
+                    "upvotes": post.get("upvotes", 0),
+                    "saves": post.get("saveCount", 0),
+                    "comments": post.get("commentCount", 0),
+                    "created_at": created_at.strftime("%Y-%m-%d"),
+                    "updated_at": updated_at.strftime("%Y-%m-%d"),
+                    "url": f"https://openwebui.com/posts/{post.get('slug', '')}",
+                }
+            )
+
+        # 按下载量排序
+        stats["posts"].sort(key=lambda x: x["downloads"], reverse=True)
+
+        return stats
+
+    def print_stats(self, stats: dict):
+        """打印统计报告到终端"""
+        print("\n" + "=" * 60)
+        print("📊 OpenWebUI 社区统计报告")
+        print("=" * 60)
+        print(f"📅 生成时间 (北京): {get_beijing_time().strftime('%Y-%m-%d %H:%M')}")
+        print()
+
+        # 总览
+        print("📈 总览")
+        print("-" * 40)
+        print(f"  📝 发布数量: {stats['total_posts']}")
+        print(f"  ⬇️  总下载量: {stats['total_downloads']}")
+        print(f"  👁️  总浏览量: {stats['total_views']}")
+        print(f"  👍 总点赞数: {stats['total_upvotes']}")
+        print(f"  💾 总收藏数: {stats['total_saves']}")
+        print(f"  💬 总评论数: {stats['total_comments']}")
+        print()
+
+        # 按类型分类
+        print("📂 按类型分类")
+        print("-" * 40)
+        for post_type, count in stats["by_type"].items():
+            print(f"  • {post_type}: {count}")
+        print()
+
+        # 详细列表
+        print("📋 发布列表 (按下载量排序)")
+        print("-" * 60)
+
+        # 表头
+        print(f"{'排名':<4} {'标题':<30} {'下载':<8} {'浏览':<8} {'点赞':<6}")
+        print("-" * 60)
+
+        for i, post in enumerate(stats["posts"], 1):
+            title = (
+                post["title"][:28] + ".." if len(post["title"]) > 30 else post["title"]
+            )
+            print(
+                f"{i:<4} {title:<30} {post['downloads']:<8} {post['views']:<8} {post['upvotes']:<6}"
+            )
+
+        print("=" * 60)
+
+    def generate_markdown(self, stats: dict, lang: str = "zh") -> str:
+        """
+        生成 Markdown 格式报告
+
+        Args:
+            stats: 统计数据
+            lang: 语言 ("zh" 中文, "en" 英文)
+        """
+        # 中英文文本
+        texts = {
+            "zh": {
+                "title": "# 📊 OpenWebUI 社区统计报告",
+                "updated": f"> 📅 更新时间: {get_beijing_time().strftime('%Y-%m-%d %H:%M')}",
+                "overview_title": "## 📈 总览",
+                "overview_header": "| 指标 | 数值 |",
+                "posts": "📝 发布数量",
+                "downloads": "⬇️ 总下载量",
+                "views": "👁️ 总浏览量",
+                "upvotes": "👍 总点赞数",
+                "saves": "💾 总收藏数",
+                "comments": "💬 总评论数",
+                "type_title": "## 📂 按类型分类",
+                "list_title": "## 📋 发布列表",
+                "list_header": "| 排名 | 标题 | 类型 | 版本 | 下载 | 浏览 | 点赞 | 收藏 | 更新日期 |",
+            },
+            "en": {
+                "title": "# 📊 OpenWebUI Community Stats Report",
+                "updated": f"> 📅 Updated: {get_beijing_time().strftime('%Y-%m-%d %H:%M')}",
+                "overview_title": "## 📈 Overview",
+                "overview_header": "| Metric | Value |",
+                "posts": "📝 Total Posts",
+                "downloads": "⬇️ Total Downloads",
+                "views": "👁️ Total Views",
+                "upvotes": "👍 Total Upvotes",
+                "saves": "💾 Total Saves",
+                "comments": "💬 Total Comments",
+                "type_title": "## 📂 By Type",
+                "list_title": "## 📋 Posts List",
+                "list_header": "| Rank | Title | Type | Version | Downloads | Views | Upvotes | Saves | Updated |",
+            },
+        }
+
+        t = texts.get(lang, texts["en"])
+
+        md = []
+        md.append(t["title"])
+        md.append("")
+        md.append(t["updated"])
+        md.append("")
+
+        # 总览
+        md.append(t["overview_title"])
+        md.append("")
+        md.append(t["overview_header"])
+        md.append("|------|------|")
+        md.append(f"| {t['posts']} | {stats['total_posts']} |")
+        md.append(f"| {t['downloads']} | {stats['total_downloads']} |")
+        md.append(f"| {t['views']} | {stats['total_views']} |")
+        md.append(f"| {t['upvotes']} | {stats['total_upvotes']} |")
+        md.append(f"| {t['saves']} | {stats['total_saves']} |")
+        md.append(f"| {t['comments']} | {stats['total_comments']} |")
+        md.append("")
+
+        # 按类型分类
+        md.append(t["type_title"])
+        md.append("")
+        for post_type, count in stats["by_type"].items():
+            md.append(f"- **{post_type}**: {count}")
+        md.append("")
+
+        # 详细列表
+        md.append(t["list_title"])
+        md.append("")
+        md.append(t["list_header"])
+        md.append("|:---:|------|:---:|:---:|:---:|:---:|:---:|:---:|:---:|")
+
+        for i, post in enumerate(stats["posts"], 1):
+            title_link = f"[{post['title']}]({post['url']})"
+            md.append(
+                f"| {i} | {title_link} | {post['type']} | {post['version']} | "
+                f"{post['downloads']} | {post['views']} | {post['upvotes']} | "
+                f"{post['saves']} | {post['updated_at']} |"
+            )
+
+        md.append("")
+        return "\n".join(md)
+
+    def save_json(self, stats: dict, filepath: str):
+        """保存 JSON 格式数据"""
+        with open(filepath, "w", encoding="utf-8") as f:
+            json.dump(stats, f, ensure_ascii=False, indent=2)
+        print(f"✅ JSON 数据已保存到: {filepath}")
+
+    def generate_readme_stats(self, stats: dict, lang: str = "zh") -> str:
+        """
+        生成 README 统计徽章区域
+
+        Args:
+            stats: 统计数据
+            lang: 语言 ("zh" 中文, "en" 英文)
+        """
+        # 获取 Top 5 插件
+        top_plugins = stats["posts"][:5]
+
+        # 中英文文本
+        texts = {
+            "zh": {
+                "title": "## 📊 社区统计",
+                "updated": f"> 🕐 自动更新于 {get_beijing_time().strftime('%Y-%m-%d %H:%M')}",
+                "author_header": "| 👤 作者 | 👥 粉丝 | ⭐ 积分 | 🏆 贡献 |",
+                "header": "| 📝 发布 | ⬇️ 下载 | 👁️ 浏览 | 👍 点赞 | 💾 收藏 |",
+                "top5_title": "### 🔥 热门插件 Top 5",
+                "top5_header": "| 排名 | 插件 | 下载 | 浏览 |",
+                "full_stats": "*完整统计请查看 [社区统计报告](./docs/community-stats.md)*",
+            },
+            "en": {
+                "title": "## 📊 Community Stats",
+                "updated": f"> 🕐 Auto-updated: {get_beijing_time().strftime('%Y-%m-%d %H:%M')}",
+                "author_header": "| 👤 Author | 👥 Followers | ⭐ Points | 🏆 Contributions |",
+                "header": "| 📝 Posts | ⬇️ Downloads | 👁️ Views | 👍 Upvotes | 💾 Saves |",
+                "top5_title": "### 🔥 Top 5 Popular Plugins",
+                "top5_header": "| Rank | Plugin | Downloads | Views |",
+                "full_stats": "*See full stats in [Community Stats Report](./docs/community-stats.md)*",
+            },
+        }
+
+        t = texts.get(lang, texts["en"])
+        user = stats.get("user", {})
+
+        lines = []
+        lines.append("<!-- STATS_START -->")
+        lines.append(t["title"])
+        lines.append("")
+        lines.append(t["updated"])
+        lines.append("")
+
+        # 作者信息表格
+        if user:
+            username = user.get("username", "")
+            profile_url = user.get("profile_url", "")
+            lines.append(t["author_header"])
+            lines.append("|:---:|:---:|:---:|:---:|")
+            lines.append(
+                f"| [{username}]({profile_url}) | **{user.get('followers', 0)}** | "
+                f"**{user.get('total_points', 0)}** | **{user.get('contributions', 0)}** |"
+            )
+            lines.append("")
+
+        # 统计徽章表格
+        lines.append(t["header"])
+        lines.append("|:---:|:---:|:---:|:---:|:---:|")
+        lines.append(
+            f"| **{stats['total_posts']}** | **{stats['total_downloads']}** | "
+            f"**{stats['total_views']}** | **{stats['total_upvotes']}** | **{stats['total_saves']}** |"
+        )
+        lines.append("")
+
+        # Top 5 热门插件
+        lines.append(t["top5_title"])
+        lines.append("")
+        lines.append(t["top5_header"])
+        lines.append("|:---:|------|:---:|:---:|")
+
+        medals = ["🥇", "🥈", "🥉", "4️⃣", "5️⃣"]
+        for i, post in enumerate(top_plugins):
+            medal = medals[i] if i < len(medals) else str(i + 1)
+            lines.append(
+                f"| {medal} | [{post['title']}]({post['url']}) | {post['downloads']} | {post['views']} |"
+            )
+
+        lines.append("")
+        lines.append(t["full_stats"])
+        lines.append("<!-- STATS_END -->")
+
+        return "\n".join(lines)
+
+    def update_readme(self, stats: dict, readme_path: str, lang: str = "zh"):
+        """
+        更新 README 文件中的统计区域
+
+        Args:
+            stats: 统计数据
+            readme_path: README 文件路径
+            lang: 语言 ("zh" 中文, "en" 英文)
+        """
+        import re
+
+        # 读取现有内容
+        with open(readme_path, "r", encoding="utf-8") as f:
+            content = f.read()
+
+        # 生成新的统计区域
+        new_stats = self.generate_readme_stats(stats, lang)
+
+        # 检查是否已有统计区域
+        pattern = r"<!-- STATS_START -->.*?<!-- STATS_END -->"
+        if re.search(pattern, content, re.DOTALL):
+            # 替换现有区域
+            new_content = re.sub(pattern, new_stats, content, flags=re.DOTALL)
+        else:
+            # 在简介段落之后插入统计区域
+            # 查找模式：标题 -> 语言切换行 -> 简介段落 -> 插入位置
+            lines = content.split("\n")
+            insert_pos = 0
+            found_intro = False
+
+            for i, line in enumerate(lines):
+                # 跳过标题
+                if line.startswith("# "):
+                    continue
+                # 跳过空行
+                if line.strip() == "":
+                    continue
+                # 跳过语言切换行 (如 "English | [中文]" 或 "[English] | 中文")
+                if ("English" in line or "中文" in line) and "|" in line:
+                    continue
+                # 找到第一个非空、非标题、非语言切换的段落（简介）
+                if not found_intro:
+                    found_intro = True
+                    # 继续到这个段落结束
+                    continue
+                # 简介段落后的空行或下一个标题就是插入位置
+                if line.strip() == "" or line.startswith("#"):
+                    insert_pos = i
+                    break
+
+            # 如果没找到合适位置，就放在第3行（标题和语言切换后）
+            if insert_pos == 0:
+                insert_pos = 3
+
+            # 在适当位置插入
+            lines.insert(insert_pos, "")
+            lines.insert(insert_pos + 1, new_stats)
+            lines.insert(insert_pos + 2, "")
+            new_content = "\n".join(lines)
+
+        # 写回文件
+        with open(readme_path, "w", encoding="utf-8") as f:
+            f.write(new_content)
+
+        print(f"✅ README 已更新: {readme_path}")
+
+
+def main():
+    """主函数"""
+    # 获取配置
+    api_key = os.getenv("OPENWEBUI_API_KEY")
+    user_id = os.getenv("OPENWEBUI_USER_ID")
+
+    if not api_key:
+        print("❌ 错误: 未设置 OPENWEBUI_API_KEY 环境变量")
+        print("请设置环境变量：")
+        print("  export OPENWEBUI_API_KEY='your_api_key_here'")
+        return 1
+
+    if not user_id:
+        print("❌ 错误: 未设置 OPENWEBUI_USER_ID 环境变量")
+        print("请设置环境变量：")
+        print("  export OPENWEBUI_USER_ID='your_user_id_here'")
+        print("\n提示: 用户 ID 可以从之前的 curl 请求中获取")
+        print("     例如: b15d1348-4347-42b4-b815-e053342d6cb0")
+        return 1
+
+    # 初始化
+    stats_client = OpenWebUIStats(api_key, user_id)
+    print(f"🔍 用户 ID: {stats_client.user_id}")
+
+    # 获取所有帖子
+    print("📥 正在获取帖子数据...")
+    posts = stats_client.get_all_posts()
+    print(f"✅ 获取到 {len(posts)} 个帖子")
+
+    # 生成统计
+    stats = stats_client.generate_stats(posts)
+
+    # 打印到终端
+    stats_client.print_stats(stats)
+
+    # 保存 Markdown 报告 (中英文双版本)
+    script_dir = Path(__file__).parent.parent
+
+    # 中文报告
+    md_zh_path = script_dir / "docs" / "community-stats.md"
+    md_zh_content = stats_client.generate_markdown(stats, lang="zh")
+    with open(md_zh_path, "w", encoding="utf-8") as f:
+        f.write(md_zh_content)
+    print(f"\n✅ 中文报告已保存到: {md_zh_path}")
+
+    # 英文报告
+    md_en_path = script_dir / "docs" / "community-stats.en.md"
+    md_en_content = stats_client.generate_markdown(stats, lang="en")
+    with open(md_en_path, "w", encoding="utf-8") as f:
+        f.write(md_en_content)
+    print(f"✅ 英文报告已保存到: {md_en_path}")
+
+    # 保存 JSON 数据
+    json_path = script_dir / "docs" / "community-stats.json"
+    stats_client.save_json(stats, str(json_path))
+
+    # 更新 README 文件
+    readme_path = script_dir / "README.md"
+    readme_cn_path = script_dir / "README_CN.md"
+    stats_client.update_readme(stats, str(readme_path), lang="en")
+    stats_client.update_readme(stats, str(readme_cn_path), lang="zh")
+
+    return 0
+
+
+if __name__ == "__main__":
+    exit(main())