Compare commits
11 Commits
v2026.01.0
...
v2026.01.0
| Author | SHA1 | Date | |
|---|---|---|---|
|
57ebf24c75 | ||
|
9375df709f | ||
|
|
255e48bd33 | ||
|
|
18993c7fbe | ||
|
|
f3cf2b52fd | ||
|
|
856f76cd27 | ||
|
|
28bb9000d8 | ||
|
|
d0b9e46b74 | ||
|
|
a0a4d31715 | ||
|
|
d5f394f5f1 | ||
|
|
a477d2baad |
@@ -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.
|
||||
|
||||
196
.github/copilot-instructions.md
vendored
196
.github/copilot-instructions.md
vendored
@@ -949,7 +949,7 @@ async def action(self, body, __event_call__, __metadata__, ...):
|
||||
#### 优势
|
||||
|
||||
- **纯 Markdown 输出**：结果是标准的 Markdown 图片语法，无需 HTML 代码块
|
||||
- **自包含**：图片以 Base64 Data URL 嵌入，无外部依赖
|
||||
- **高效存储**：图片上传至 `/api/v1/files`，避免 Base64 字符串膨胀聊天记录
|
||||
- **持久化**：通过 API 回写，消息重新加载后图片仍然存在
|
||||
- **跨平台**：任何支持 Markdown 图片的客户端都能显示
|
||||
- **无服务端渲染依赖**：利用用户浏览器的渲染能力
|
||||
@@ -960,7 +960,7 @@ async def action(self, body, __event_call__, __metadata__, ...):
|
||||
|------|-------------------------|------------------------|
|
||||
| 输出格式 | HTML 代码块 | Markdown 图片 |
|
||||
| 交互性 | ✅ 支持按钮、动画 | ❌ 静态图片 |
|
||||
| 外部依赖 | 需要加载 JS 库 | 无（图片自包含） |
|
||||
| 外部依赖 | 需要加载 JS 库 | 依赖 `/api/v1/files` 存储 |
|
||||
| 持久化 | 依赖浏览器渲染 | ✅ 永久可见 |
|
||||
| 文件导出 | 需特殊处理 | ✅ 直接导出 |
|
||||
| 适用场景 | 交互式内容 | 信息图、图表快照 |
|
||||
@@ -970,7 +970,199 @@ async def action(self, body, __event_call__, __metadata__, ...):
|
||||
- `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)
|
||||
|
||||
---
|
||||
|
||||
|
||||
13
.github/workflows/release.yml
vendored
13
.github/workflows/release.yml
vendored
@@ -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"
|
||||
|
||||
22
README.md
22
README.md
@@ -7,31 +7,25 @@ A collection of enhancements, plugins, and prompts for [OpenWebUI](https://githu
|
||||
<!-- STATS_START -->
|
||||
## 📊 Community Stats
|
||||
|
||||
> 🕐 Auto-updated: 2026-01-06 19:26 (Beijing Time)
|
||||
> 🕐 Auto-updated: 2026-01-06 22:09
|
||||
|
||||
| 👤 Author | 👥 Followers | ⭐ Points | 🏆 Contributions |
|
||||
|:---:|:---:|:---:|:---:|
|
||||
| [Fu-Jie](https://openwebui.com/u/Fu-Jie) | **41** | **63** | **17** |
|
||||
| [Fu-Jie](https://openwebui.com/u/Fu-Jie) | **43** | **62** | **17** |
|
||||
|
||||
| 📝 Posts | ⬇️ Downloads | 👁️ Views | 👍 Upvotes | 💾 Saves |
|
||||
|:---:|:---:|:---:|:---:|:---:|
|
||||
| **11** | **785** | **8394** | **54** | **46** |
|
||||
| **11** | **785** | **8411** | **54** | **47** |
|
||||
| **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) | 235 | 2095 |
|
||||
| 🥈 | [Export to Excel](https://openwebui.com/posts/export_mulit_table_to_excel_244b8f9d) | 170 | 455 |
|
||||
| 🥉 | [Async Context Compression](https://openwebui.com/posts/async_context_compression_b1655bc8) | 112 | 1234 |
|
||||
| 4️⃣ | [Flash Card ](https://openwebui.com/posts/flash_card_65a2ea8f) | 75 | 1413 |
|
||||
| 5️⃣ | [Smart Infographic](https://openwebui.com/posts/smart_infographic_ad6f0c7f) | 65 | 900 |
|
||||
| 🥇 | [Turn Any Text into Beautiful Mind Maps](https://openwebui.com/posts/turn_any_text_into_beautiful_mind_maps_3094c59a) | 235 | 2103 |
|
||||
| 🥈 | [Export to Excel](https://openwebui.com/posts/export_mulit_table_to_excel_244b8f9d) | 170 | 456 |
|
||||
| 🥉 | [Async Context Compression](https://openwebui.com/posts/async_context_compression_b1655bc8) | 112 | 1235 |
|
||||
| 4️⃣ | [Flash Card ](https://openwebui.com/posts/flash_card_65a2ea8f) | 75 | 1414 |
|
||||
| 5️⃣ | [Smart Infographic](https://openwebui.com/posts/smart_infographic_ad6f0c7f) | 65 | 904 |
|
||||
| 🥇 | [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 -->
|
||||
|
||||
16
README_CN.md
16
README_CN.md
@@ -7,25 +7,25 @@ OpenWebUI 增强功能集合。包含个人开发与收集的插件、提示词
|
||||
<!-- STATS_START -->
|
||||
## 📊 社区统计
|
||||
|
||||
> 🕐 自动更新于 2026-01-06 19:26 (北京时间)
|
||||
> 🕐 自动更新于 2026-01-06 22:09
|
||||
|
||||
| 👤 作者 | 👥 粉丝 | ⭐ 积分 | 🏆 贡献 |
|
||||
|:---:|:---:|:---:|:---:|
|
||||
| [Fu-Jie](https://openwebui.com/u/Fu-Jie) | **41** | **63** | **17** |
|
||||
| [Fu-Jie](https://openwebui.com/u/Fu-Jie) | **43** | **62** | **17** |
|
||||
|
||||
| 📝 发布 | ⬇️ 下载 | 👁️ 浏览 | 👍 点赞 | 💾 收藏 |
|
||||
|:---:|:---:|:---:|:---:|:---:|
|
||||
| **11** | **785** | **8394** | **54** | **46** |
|
||||
| **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) | 235 | 2095 |
|
||||
| 🥈 | [Export to Excel](https://openwebui.com/posts/export_mulit_table_to_excel_244b8f9d) | 170 | 455 |
|
||||
| 🥉 | [Async Context Compression](https://openwebui.com/posts/async_context_compression_b1655bc8) | 112 | 1234 |
|
||||
| 4️⃣ | [Flash Card ](https://openwebui.com/posts/flash_card_65a2ea8f) | 75 | 1413 |
|
||||
| 5️⃣ | [Smart Infographic](https://openwebui.com/posts/smart_infographic_ad6f0c7f) | 65 | 900 |
|
||||
| 🥇 | [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 -->
|
||||
|
||||
@@ -1,16 +1,16 @@
|
||||
# 📊 OpenWebUI Community Stats Report
|
||||
|
||||
> 📅 Updated: 2026-01-06 11:08:23
|
||||
> 📅 Updated: 2026-01-06 22:09
|
||||
|
||||
## 📈 Overview
|
||||
|
||||
| Metric | Value |
|
||||
|------|------|
|
||||
| 📝 Total Posts | 11 |
|
||||
| ⬇️ Total Downloads | 785 |
|
||||
| 👁️ Total Views | 8394 |
|
||||
| ⬇️ Total Downloads | 797 |
|
||||
| 👁️ Total Views | 8536 |
|
||||
| 👍 Total Upvotes | 54 |
|
||||
| 💾 Total Saves | 46 |
|
||||
| 💾 Total Saves | 48 |
|
||||
| 💬 Total Comments | 13 |
|
||||
|
||||
## 📂 By Type
|
||||
@@ -22,14 +22,14 @@
|
||||
|
||||
| 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.8.2 | 235 | 2095 | 10 | 15 | 2026-01-03 |
|
||||
| 2 | [Export to Excel](https://openwebui.com/posts/export_mulit_table_to_excel_244b8f9d) | action | 0.3.6 | 170 | 455 | 3 | 3 | 2026-01-03 |
|
||||
| 3 | [Async Context Compression](https://openwebui.com/posts/async_context_compression_b1655bc8) | filter | 1.1.0 | 112 | 1234 | 5 | 9 | 2025-12-31 |
|
||||
| 4 | [Flash Card ](https://openwebui.com/posts/flash_card_65a2ea8f) | action | 0.2.4 | 75 | 1413 | 8 | 5 | 2026-01-03 |
|
||||
| 5 | [Smart Infographic](https://openwebui.com/posts/smart_infographic_ad6f0c7f) | action | 1.3.2 | 65 | 900 | 6 | 7 | 2026-01-03 |
|
||||
| 6 | [Export to Word (Enhanced Formatting)](https://openwebui.com/posts/export_to_word_enhanced_formatting_fca6a315) | action | 0.4.0 | 51 | 499 | 5 | 4 | 2026-01-05 |
|
||||
| 7 | [智能信息图](https://openwebui.com/posts/智能信息图_e04a48ff) | action | 1.3.1 | 33 | 397 | 3 | 0 | 2025-12-29 |
|
||||
| 8 | [智能生成交互式思维导图,帮助用户可视化知识](https://openwebui.com/posts/智能生成交互式思维导图帮助用户可视化知识_8d4b097b) | action | 0.8.0 | 14 | 246 | 2 | 0 | 2025-12-31 |
|
||||
| 9 | [导出为 Word-支持公式、流程图、表格和代码块](https://openwebui.com/posts/导出为_word_支持公式流程图表格和代码块_8a6306c0) | action | 0.4.1 | 13 | 737 | 7 | 1 | 2026-01-05 |
|
||||
| 10 | [闪记卡生成插件](https://openwebui.com/posts/闪记卡生成插件_4a31eac3) | action | 0.2.2 | 12 | 309 | 3 | 1 | 2025-12-31 |
|
||||
| 11 | [异步上下文压缩](https://openwebui.com/posts/异步上下文压缩_5c0617cb) | filter | 1.1.0 | 5 | 109 | 2 | 1 | 2025-12-31 |
|
||||
| 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 |
|
||||
|
||||
@@ -1,10 +1,10 @@
|
||||
{
|
||||
"total_posts": 11,
|
||||
"total_downloads": 785,
|
||||
"total_views": 8394,
|
||||
"total_downloads": 797,
|
||||
"total_views": 8536,
|
||||
"total_upvotes": 54,
|
||||
"total_downvotes": 0,
|
||||
"total_saves": 46,
|
||||
"total_downvotes": 1,
|
||||
"total_saves": 48,
|
||||
"total_comments": 13,
|
||||
"by_type": {
|
||||
"action": 9,
|
||||
@@ -15,16 +15,16 @@
|
||||
"title": "Turn Any Text into Beautiful Mind Maps",
|
||||
"slug": "turn_any_text_into_beautiful_mind_maps_3094c59a",
|
||||
"type": "action",
|
||||
"version": "0.8.2",
|
||||
"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": 235,
|
||||
"views": 2095,
|
||||
"downloads": 242,
|
||||
"views": 2157,
|
||||
"upvotes": 10,
|
||||
"saves": 15,
|
||||
"comments": 8,
|
||||
"created_at": "2025-12-30",
|
||||
"updated_at": "2026-01-03",
|
||||
"updated_at": "2026-01-06",
|
||||
"url": "https://openwebui.com/posts/turn_any_text_into_beautiful_mind_maps_3094c59a"
|
||||
},
|
||||
{
|
||||
@@ -34,8 +34,8 @@
|
||||
"version": "0.3.6",
|
||||
"author": "Fu-Jie",
|
||||
"description": "Extracts tables from chat messages and exports them to Excel (.xlsx) files with smart formatting.",
|
||||
"downloads": 170,
|
||||
"views": 455,
|
||||
"downloads": 171,
|
||||
"views": 459,
|
||||
"upvotes": 3,
|
||||
"saves": 3,
|
||||
"comments": 0,
|
||||
@@ -51,7 +51,7 @@
|
||||
"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": 1234,
|
||||
"views": 1237,
|
||||
"upvotes": 5,
|
||||
"saves": 9,
|
||||
"comments": 0,
|
||||
@@ -66,8 +66,8 @@
|
||||
"version": "0.2.4",
|
||||
"author": "Fu-Jie",
|
||||
"description": "Quickly generates beautiful flashcards from text, extracting key points and categories.",
|
||||
"downloads": 75,
|
||||
"views": 1413,
|
||||
"downloads": 76,
|
||||
"views": 1429,
|
||||
"upvotes": 8,
|
||||
"saves": 5,
|
||||
"comments": 2,
|
||||
@@ -83,7 +83,7 @@
|
||||
"author": "jeff",
|
||||
"description": "AI-powered infographic generator based on AntV Infographic. Supports professional templates, auto-icon matching, and SVG/PNG downloads.",
|
||||
"downloads": 65,
|
||||
"views": 900,
|
||||
"views": 917,
|
||||
"upvotes": 6,
|
||||
"saves": 8,
|
||||
"comments": 2,
|
||||
@@ -99,7 +99,7 @@
|
||||
"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": 499,
|
||||
"views": 508,
|
||||
"upvotes": 5,
|
||||
"saves": 4,
|
||||
"comments": 0,
|
||||
@@ -115,7 +115,7 @@
|
||||
"author": "jeff",
|
||||
"description": "基于 AntV Infographic 的智能信息图生成插件。支持多种专业模板，自动图标匹配，并提供 SVG/PNG 下载功能。",
|
||||
"downloads": 33,
|
||||
"views": 397,
|
||||
"views": 402,
|
||||
"upvotes": 3,
|
||||
"saves": 0,
|
||||
"comments": 0,
|
||||
@@ -123,6 +123,22 @@
|
||||
"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",
|
||||
@@ -131,30 +147,14 @@
|
||||
"author": "",
|
||||
"description": "智能分析文本内容,生成交互式思维导图,帮助用户结构化和可视化知识。",
|
||||
"downloads": 14,
|
||||
"views": 246,
|
||||
"views": 249,
|
||||
"upvotes": 2,
|
||||
"saves": 0,
|
||||
"saves": 1,
|
||||
"comments": 0,
|
||||
"created_at": "2025-12-31",
|
||||
"updated_at": "2025-12-31",
|
||||
"url": "https://openwebui.com/posts/智能生成交互式思维导图帮助用户可视化知识_8d4b097b"
|
||||
},
|
||||
{
|
||||
"title": "导出为 Word-支持公式、流程图、表格和代码块",
|
||||
"slug": "导出为_word_支持公式流程图表格和代码块_8a6306c0",
|
||||
"type": "action",
|
||||
"version": "0.4.1",
|
||||
"author": "Fu-Jie",
|
||||
"description": "将当前对话内容从 Markdown 转换并导出为 Word (.docx) 文件，支持中英文无乱码。",
|
||||
"downloads": 13,
|
||||
"views": 737,
|
||||
"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": "闪记卡生成插件_4a31eac3",
|
||||
@@ -163,7 +163,7 @@
|
||||
"author": "Fu-Jie",
|
||||
"description": "快速将文本提炼为精美的学习记忆卡片，支持核心要点提取与分类。",
|
||||
"downloads": 12,
|
||||
"views": 309,
|
||||
"views": 310,
|
||||
"upvotes": 3,
|
||||
"saves": 1,
|
||||
"comments": 0,
|
||||
@@ -179,7 +179,7 @@
|
||||
"author": "Fu-Jie",
|
||||
"description": "在 LLM 响应完成后进行上下文摘要和压缩",
|
||||
"downloads": 5,
|
||||
"views": 109,
|
||||
"views": 112,
|
||||
"upvotes": 2,
|
||||
"saves": 1,
|
||||
"comments": 0,
|
||||
@@ -193,10 +193,10 @@
|
||||
"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": 41,
|
||||
"followers": 43,
|
||||
"following": 2,
|
||||
"total_points": 63,
|
||||
"post_points": 54,
|
||||
"total_points": 62,
|
||||
"post_points": 53,
|
||||
"comment_points": 9,
|
||||
"contributions": 17
|
||||
}
|
||||
|
||||
@@ -1,16 +1,16 @@
|
||||
# 📊 OpenWebUI 社区统计报告
|
||||
|
||||
> 📅 更新时间: 2026-01-06 11:08:23
|
||||
> 📅 更新时间: 2026-01-06 22:09
|
||||
|
||||
## 📈 总览
|
||||
|
||||
| 指标 | 数值 |
|
||||
|------|------|
|
||||
| 📝 发布数量 | 11 |
|
||||
| ⬇️ 总下载量 | 785 |
|
||||
| 👁️ 总浏览量 | 8394 |
|
||||
| ⬇️ 总下载量 | 797 |
|
||||
| 👁️ 总浏览量 | 8536 |
|
||||
| 👍 总点赞数 | 54 |
|
||||
| 💾 总收藏数 | 46 |
|
||||
| 💾 总收藏数 | 48 |
|
||||
| 💬 总评论数 | 13 |
|
||||
|
||||
## 📂 按类型分类
|
||||
@@ -22,14 +22,14 @@
|
||||
|
||||
| 排名 | 标题 | 类型 | 版本 | 下载 | 浏览 | 点赞 | 收藏 | 更新日期 |
|
||||
|:---:|------|:---:|:---:|:---:|:---:|:---:|:---:|:---:|
|
||||
| 1 | [Turn Any Text into Beautiful Mind Maps](https://openwebui.com/posts/turn_any_text_into_beautiful_mind_maps_3094c59a) | action | 0.8.2 | 235 | 2095 | 10 | 15 | 2026-01-03 |
|
||||
| 2 | [Export to Excel](https://openwebui.com/posts/export_mulit_table_to_excel_244b8f9d) | action | 0.3.6 | 170 | 455 | 3 | 3 | 2026-01-03 |
|
||||
| 3 | [Async Context Compression](https://openwebui.com/posts/async_context_compression_b1655bc8) | filter | 1.1.0 | 112 | 1234 | 5 | 9 | 2025-12-31 |
|
||||
| 4 | [Flash Card ](https://openwebui.com/posts/flash_card_65a2ea8f) | action | 0.2.4 | 75 | 1413 | 8 | 5 | 2026-01-03 |
|
||||
| 5 | [Smart Infographic](https://openwebui.com/posts/smart_infographic_ad6f0c7f) | action | 1.3.2 | 65 | 900 | 6 | 7 | 2026-01-03 |
|
||||
| 6 | [Export to Word (Enhanced Formatting)](https://openwebui.com/posts/export_to_word_enhanced_formatting_fca6a315) | action | 0.4.0 | 51 | 499 | 5 | 4 | 2026-01-05 |
|
||||
| 7 | [智能信息图](https://openwebui.com/posts/智能信息图_e04a48ff) | action | 1.3.1 | 33 | 397 | 3 | 0 | 2025-12-29 |
|
||||
| 8 | [智能生成交互式思维导图,帮助用户可视化知识](https://openwebui.com/posts/智能生成交互式思维导图帮助用户可视化知识_8d4b097b) | action | 0.8.0 | 14 | 246 | 2 | 0 | 2025-12-31 |
|
||||
| 9 | [导出为 Word-支持公式、流程图、表格和代码块](https://openwebui.com/posts/导出为_word_支持公式流程图表格和代码块_8a6306c0) | action | 0.4.1 | 13 | 737 | 7 | 1 | 2026-01-05 |
|
||||
| 10 | [闪记卡生成插件](https://openwebui.com/posts/闪记卡生成插件_4a31eac3) | action | 0.2.2 | 12 | 309 | 3 | 1 | 2025-12-31 |
|
||||
| 11 | [异步上下文压缩](https://openwebui.com/posts/异步上下文压缩_5c0617cb) | filter | 1.1.0 | 5 | 109 | 2 | 1 | 2025-12-31 |
|
||||
| 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 |
|
||||
|
||||
@@ -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)
|
||||
|
||||
|
||||
@@ -33,7 +33,7 @@ Actions 是交互式插件，能够：
|
||||
|
||||
使用 AntV 可视化引擎，将文本转成专业的信息图。
|
||||
|
||||
**版本：** 1.3.0
|
||||
**版本：** 1.4.0
|
||||
|
||||
[:octicons-arrow-right-24: 查看文档](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 |
|
||||
|
||||
---
|
||||
|
||||
|
||||
@@ -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` 为静态图片嵌入 |
|
||||
|
||||
---
|
||||
|
||||
|
||||
@@ -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
|
||||
|
||||
@@ -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
|
||||
|
||||
- 移除输出中的调试信息
|
||||
|
||||
@@ -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 = ``;
|
||||
|
||||
// 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}"
|
||||
|
||||
|
||||
@@ -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 = ``;
|
||||
|
||||
// 通过 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}"
|
||||
|
||||
|
||||
@@ -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
|
||||
|
||||
@@ -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
|
||||
|
||||
- 移除输出中的调试信息
|
||||
|
||||
@@ -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.9.0
|
||||
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.
|
||||
"""
|
||||
@@ -790,14 +790,6 @@ class Action:
|
||||
default="html",
|
||||
description="Output mode: 'html' for interactive HTML (default), or 'image' to embed as Markdown image.",
|
||||
)
|
||||
SVG_WIDTH: int = Field(
|
||||
default=1200,
|
||||
description="Width of the SVG canvas in pixels (for image mode).",
|
||||
)
|
||||
SVG_HEIGHT: int = Field(
|
||||
default=800,
|
||||
description="Height of the SVG canvas in pixels (for image mode).",
|
||||
)
|
||||
|
||||
def __init__(self):
|
||||
self.valves = self.Valves()
|
||||
@@ -959,27 +951,83 @@ class Action:
|
||||
chat_id: str,
|
||||
message_id: str,
|
||||
markdown_syntax: str,
|
||||
svg_width: int,
|
||||
svg_height: int,
|
||||
) -> str:
|
||||
"""Generate JavaScript code for frontend SVG rendering and image embedding"""
|
||||
|
||||
|
||||
# Escape the syntax for JS embedding
|
||||
syntax_escaped = (
|
||||
markdown_syntax
|
||||
.replace("\\", "\\\\")
|
||||
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 = {svg_width};
|
||||
const defaultHeight = {svg_height};
|
||||
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;
|
||||
@@ -1054,7 +1102,7 @@ class Action:
|
||||
svgEl.setAttribute('height', svgHeight);
|
||||
svgEl.style.width = svgWidth + 'px';
|
||||
svgEl.style.height = svgHeight + 'px';
|
||||
svgEl.style.backgroundColor = '#ffffff';
|
||||
svgEl.style.backgroundColor = colors.background;
|
||||
container.appendChild(svgEl);
|
||||
|
||||
// Transform markdown to tree
|
||||
@@ -1082,23 +1130,23 @@ class Action:
|
||||
clonedSvg.setAttribute('xmlns', 'http://www.w3.org/2000/svg');
|
||||
clonedSvg.setAttribute('xmlns:xlink', 'http://www.w3.org/1999/xlink');
|
||||
|
||||
// Add background rect
|
||||
// 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', '#ffffff');
|
||||
bgRect.setAttribute('fill', colors.background);
|
||||
clonedSvg.insertBefore(bgRect, clonedSvg.firstChild);
|
||||
|
||||
// Add inline styles
|
||||
// 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: #000000; }}
|
||||
foreignObject, .markmap-foreign, .markmap-foreign div {{ color: #000000; font-family: sans-serif; font-size: 14px; }}
|
||||
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: #546e7a; fill: none; }}
|
||||
.markmap-node circle, .markmap-node rect {{ stroke: #94a3b8; }}
|
||||
.markmap-link {{ stroke: ${{colors.link}}; fill: none; }}
|
||||
.markmap-node circle, .markmap-node rect {{ stroke: ${{colors.nodeStroke}}; }}
|
||||
`;
|
||||
clonedSvg.insertBefore(style, bgRect.nextSibling);
|
||||
|
||||
@@ -1110,7 +1158,7 @@ class Action:
|
||||
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', '#000000');
|
||||
textEl.setAttribute('fill', colors.text);
|
||||
textEl.setAttribute('font-family', 'sans-serif');
|
||||
textEl.setAttribute('font-size', '14');
|
||||
textEl.textContent = text.trim();
|
||||
@@ -1120,20 +1168,61 @@ class Action:
|
||||
|
||||
// Serialize SVG to string
|
||||
const svgData = new XMLSerializer().serializeToString(clonedSvg);
|
||||
const svgBase64 = btoa(unescape(encodeURIComponent(svgData)));
|
||||
const dataUrl = 'data:image/svg+xml;base64,' + svgBase64;
|
||||
|
||||
console.log("[MindMap Image] Data URL generated, length:", dataUrl.length);
|
||||
|
||||
// Cleanup
|
||||
// Cleanup container
|
||||
document.body.removeChild(container);
|
||||
|
||||
// Generate markdown image
|
||||
const markdownImage = ``;
|
||||
// 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 = ``;
|
||||
|
||||
// Update message via API
|
||||
if (chatId && messageId) {{
|
||||
const token = localStorage.getItem("token");
|
||||
|
||||
// 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}}`, {{
|
||||
@@ -1146,24 +1235,26 @@ class Action:
|
||||
}}
|
||||
|
||||
const chatData = await getResponse.json();
|
||||
let originalContent = "";
|
||||
let updatedMessages = [];
|
||||
let newContent = "";
|
||||
|
||||
if (chatData.chat && chatData.chat.messages) {{
|
||||
updatedMessages = chatData.chat.messages.map(m => {{
|
||||
if (m.id === messageId) {{
|
||||
originalContent = m.content || "";
|
||||
// Remove existing mindmap images
|
||||
const mindmapPattern = /\\n*!\\[🧠[^\\]]*\\]\\(data:image\\/[^)]+\\)/g;
|
||||
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
|
||||
const newContent = cleanedContent + "\\n\\n" + markdownImage;
|
||||
newContent = cleanedContent + "\\n\\n" + markdownImage;
|
||||
|
||||
// Critical: Update content in both messages array AND history object
|
||||
// The history object is often the source of truth for the database
|
||||
if (chatData.chat.history && chatData.chat.history.messages && chatData.chat.history.messages[messageId]) {{
|
||||
chatData.chat.history.messages[messageId].content = newContent;
|
||||
// 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 }};
|
||||
@@ -1172,28 +1263,40 @@ class Action:
|
||||
}});
|
||||
}}
|
||||
|
||||
// First: Update frontend display via event API (for immediate visual feedback)
|
||||
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: updatedMessages.find(m => m.id === messageId)?.content || "" }}
|
||||
}})
|
||||
}});
|
||||
if (!newContent) {{
|
||||
console.warn("[MindMap Image] Could not find message to update");
|
||||
return;
|
||||
}}
|
||||
|
||||
// Second: Persist to database by updating the entire chat
|
||||
// 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 fetch(`/api/v1/chats/${{chatId}}`, {{
|
||||
const persistResponse = await fetchWithRetry(`/api/v1/chats/${{chatId}}`, {{
|
||||
method: "POST",
|
||||
headers: {{
|
||||
"Content-Type": "application/json",
|
||||
@@ -1202,22 +1305,13 @@ class Action:
|
||||
body: JSON.stringify(updatePayload)
|
||||
}});
|
||||
|
||||
if (persistResponse.ok) {{
|
||||
if (persistResponse && persistResponse.ok) {{
|
||||
console.log("[MindMap Image] ✅ Message persisted successfully!");
|
||||
}} else {{
|
||||
console.error("[MindMap Image] Persist API error:", persistResponse.status);
|
||||
// Try alternative update method
|
||||
const altResponse = await fetch(`/api/v1/chats/${{chatId}}/share`, {{
|
||||
method: "POST",
|
||||
headers: {{
|
||||
"Content-Type": "application/json",
|
||||
"Authorization": `Bearer ${{token}}`
|
||||
}}
|
||||
}});
|
||||
console.log("[MindMap Image] Alt persist attempted:", altResponse.status);
|
||||
console.error("[MindMap Image] ❌ Failed to persist message after retries");
|
||||
}}
|
||||
}} else {{
|
||||
console.warn("[MindMap Image] ⚠️ Missing chatId or messageId");
|
||||
console.warn("[MindMap Image] ⚠️ Missing chatId or messageId, cannot persist");
|
||||
}}
|
||||
|
||||
}} catch (error) {{
|
||||
@@ -1235,7 +1329,7 @@ class Action:
|
||||
__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"]
|
||||
@@ -1422,30 +1516,28 @@ class Action:
|
||||
# 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,
|
||||
svg_width=self.valves.SVG_WIDTH,
|
||||
svg_height=self.valves.SVG_HEIGHT,
|
||||
)
|
||||
|
||||
|
||||
await __event_call__(
|
||||
{
|
||||
"type": "execute",
|
||||
"data": {"code": js_code},
|
||||
}
|
||||
)
|
||||
|
||||
|
||||
await self._emit_status(
|
||||
__event_emitter__, "Smart Mind Map: Image generated!", True
|
||||
)
|
||||
@@ -1454,9 +1546,9 @@ class Action:
|
||||
f"Mind map image has been generated, {user_name}!",
|
||||
"success",
|
||||
)
|
||||
logger.info("Action: Smart Mind Map (v0.9.0) completed in image mode")
|
||||
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}"
|
||||
@@ -1469,7 +1561,7 @@ class Action:
|
||||
f"Mind map has been generated, {user_name}!",
|
||||
"success",
|
||||
)
|
||||
logger.info("Action: Smart Mind Map (v0.9.0) completed in HTML mode")
|
||||
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)}"
|
||||
|
||||
@@ -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.9.0
|
||||
version: 0.9.1
|
||||
icon_url: data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9ImN1cnJlbnRDb2xvciIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiPjxyZWN0IHg9IjE2IiB5PSIxNiIgd2lkdGg9IjYiIGhlaWdodD0iNiIgcng9IjEiLz48cmVjdCB4PSIyIiB5PSIxNiIgd2lkdGg9IjYiIGhlaWdodD0iNiIgcng9IjEiLz48cmVjdCB4PSI5IiB5PSIyIiB3aWR0aD0iNiIgaGVpZ2h0PSI2IiByeD0iMSIvPjxwYXRoIGQ9Ik01IDE2di0zYTEgMSAwIDAgMSAxLTFoMTJhMSAxIDAgMCAxIDEgMXYzIi8+PHBhdGggZD0iTTEyIDEyVjgiLz48L3N2Zz4=
|
||||
description: 智能分析文本内容,生成交互式思维导图,帮助用户结构化和可视化知识。
|
||||
"""
|
||||
@@ -789,14 +789,6 @@ class Action:
|
||||
default="html",
|
||||
description="输出模式: 'html' 为交互式HTML(默认),'image' 为嵌入Markdown图片。",
|
||||
)
|
||||
SVG_WIDTH: int = Field(
|
||||
default=1200,
|
||||
description="SVG画布宽度(像素,用于图片模式)。",
|
||||
)
|
||||
SVG_HEIGHT: int = Field(
|
||||
default=800,
|
||||
description="SVG画布高度(像素,用于图片模式)。",
|
||||
)
|
||||
|
||||
def __init__(self):
|
||||
self.valves = self.Valves()
|
||||
@@ -870,9 +862,7 @@ class Action:
|
||||
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>")
|
||||
|
||||
@@ -958,27 +948,83 @@ class Action:
|
||||
chat_id: str,
|
||||
message_id: str,
|
||||
markdown_syntax: str,
|
||||
svg_width: int,
|
||||
svg_height: int,
|
||||
) -> str:
|
||||
"""生成用于前端 SVG 渲染和图片嵌入的 JavaScript 代码"""
|
||||
|
||||
|
||||
# 转义语法以便嵌入 JS
|
||||
syntax_escaped = (
|
||||
markdown_syntax
|
||||
.replace("\\", "\\\\")
|
||||
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 = {svg_width};
|
||||
const defaultHeight = {svg_height};
|
||||
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;
|
||||
@@ -1053,7 +1099,7 @@ class Action:
|
||||
svgEl.setAttribute('height', svgHeight);
|
||||
svgEl.style.width = svgWidth + 'px';
|
||||
svgEl.style.height = svgHeight + 'px';
|
||||
svgEl.style.backgroundColor = '#ffffff';
|
||||
svgEl.style.backgroundColor = colors.background;
|
||||
container.appendChild(svgEl);
|
||||
|
||||
// 将 markdown 转换为树结构
|
||||
@@ -1081,23 +1127,23 @@ class Action:
|
||||
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', '#ffffff');
|
||||
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: #000000; }}
|
||||
foreignObject, .markmap-foreign, .markmap-foreign div {{ color: #000000; font-family: sans-serif; font-size: 14px; }}
|
||||
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: #546e7a; fill: none; }}
|
||||
.markmap-node circle, .markmap-node rect {{ stroke: #94a3b8; }}
|
||||
.markmap-link {{ stroke: ${{colors.link}}; fill: none; }}
|
||||
.markmap-node circle, .markmap-node rect {{ stroke: ${{colors.nodeStroke}}; }}
|
||||
`;
|
||||
clonedSvg.insertBefore(style, bgRect.nextSibling);
|
||||
|
||||
@@ -1109,7 +1155,7 @@ class Action:
|
||||
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', '#000000');
|
||||
textEl.setAttribute('fill', colors.text);
|
||||
textEl.setAttribute('font-family', 'sans-serif');
|
||||
textEl.setAttribute('font-size', '14');
|
||||
textEl.textContent = text.trim();
|
||||
@@ -1119,21 +1165,63 @@ class Action:
|
||||
|
||||
// 序列化 SVG 为字符串
|
||||
const svgData = new XMLSerializer().serializeToString(clonedSvg);
|
||||
const svgBase64 = btoa(unescape(encodeURIComponent(svgData)));
|
||||
const dataUrl = 'data:image/svg+xml;base64,' + svgBase64;
|
||||
|
||||
console.log("[思维导图图片] Data URL 已生成,长度:", dataUrl.length);
|
||||
|
||||
// 清理
|
||||
// 清理容器
|
||||
document.body.removeChild(container);
|
||||
|
||||
// 生成 markdown 图片
|
||||
const markdownImage = ``;
|
||||
// 将 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 = ``;
|
||||
|
||||
// 通过 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",
|
||||
@@ -1145,24 +1233,26 @@ class Action:
|
||||
}}
|
||||
|
||||
const chatData = await getResponse.json();
|
||||
let originalContent = "";
|
||||
let updatedMessages = [];
|
||||
let newContent = "";
|
||||
|
||||
if (chatData.chat && chatData.chat.messages) {{
|
||||
updatedMessages = chatData.chat.messages.map(m => {{
|
||||
if (m.id === messageId) {{
|
||||
originalContent = m.content || "";
|
||||
// 移除已有的思维导图图片
|
||||
const mindmapPattern = /\\n*!\\[🧠[^\\]]*\\]\\(data:image\\/[^)]+\\)/g;
|
||||
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();
|
||||
// 追加新图片
|
||||
const newContent = cleanedContent + "\\n\\n" + markdownImage;
|
||||
newContent = cleanedContent + "\\n\\n" + markdownImage;
|
||||
|
||||
// 关键: 同时更新 messages 数组和 history 对象中的内容
|
||||
// history 对象通常是数据库的单一真值来源
|
||||
if (chatData.chat.history && chatData.chat.history.messages && chatData.chat.history.messages[messageId]) {{
|
||||
chatData.chat.history.messages[messageId].content = newContent;
|
||||
// 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 }};
|
||||
@@ -1171,28 +1261,40 @@ class Action:
|
||||
}});
|
||||
}}
|
||||
|
||||
// 第一步: 通过事件 API 更新前端显示(立即视觉反馈)
|
||||
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: updatedMessages.find(m => m.id === messageId)?.content || "" }}
|
||||
}})
|
||||
}});
|
||||
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 fetch(`/api/v1/chats/${{chatId}}`, {{
|
||||
const persistResponse = await fetchWithRetry(`/api/v1/chats/${{chatId}}`, {{
|
||||
method: "POST",
|
||||
headers: {{
|
||||
"Content-Type": "application/json",
|
||||
@@ -1201,22 +1303,13 @@ class Action:
|
||||
body: JSON.stringify(updatePayload)
|
||||
}});
|
||||
|
||||
if (persistResponse.ok) {{
|
||||
if (persistResponse && persistResponse.ok) {{
|
||||
console.log("[思维导图图片] ✅ 消息已持久化保存!");
|
||||
}} else {{
|
||||
console.error("[思维导图图片] 持久化 API 错误:", persistResponse.status);
|
||||
// 尝试备用更新方法
|
||||
const altResponse = await fetch(`/api/v1/chats/${{chatId}}/share`, {{
|
||||
method: "POST",
|
||||
headers: {{
|
||||
"Content-Type": "application/json",
|
||||
"Authorization": `Bearer ${{token}}`
|
||||
}}
|
||||
}});
|
||||
console.log("[思维导图图片] 备用持久化尝试:", altResponse.status);
|
||||
console.error("[思维导图图片] ❌ 重试后仍然无法持久化消息");
|
||||
}}
|
||||
}} else {{
|
||||
console.warn("[思维导图图片] ⚠️ 缺少 chatId 或 messageId");
|
||||
console.warn("[思维导图图片] ⚠️ 缺少 chatId 或 messageId,无法持久化");
|
||||
}}
|
||||
|
||||
}} catch (error) {{
|
||||
@@ -1234,7 +1327,7 @@ class Action:
|
||||
__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"]
|
||||
@@ -1416,30 +1509,28 @@ class Action:
|
||||
# 图片模式: 使用 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,
|
||||
svg_width=self.valves.SVG_WIDTH,
|
||||
svg_height=self.valves.SVG_HEIGHT,
|
||||
)
|
||||
|
||||
|
||||
await __event_call__(
|
||||
{
|
||||
"type": "execute",
|
||||
"data": {"code": js_code},
|
||||
}
|
||||
)
|
||||
|
||||
|
||||
await self._emit_status(
|
||||
__event_emitter__, "思维导图: 图片已生成!", True
|
||||
)
|
||||
@@ -1448,9 +1539,9 @@ class Action:
|
||||
f"思维导图图片已生成,{user_name}!",
|
||||
"success",
|
||||
)
|
||||
logger.info("Action: 思维导图 (v0.9.0) 图片模式完成")
|
||||
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}"
|
||||
@@ -1459,7 +1550,7 @@ class Action:
|
||||
await self._emit_notification(
|
||||
__event_emitter__, f"思维导图已生成,{user_name}!", "success"
|
||||
)
|
||||
logger.info("Action: 思维导图 (v0.9.0) HTML 模式完成")
|
||||
logger.info("Action: 思维导图 (v0.9.1) HTML 模式完成")
|
||||
|
||||
except Exception as e:
|
||||
error_message = f"思维导图处理失败: {str(e)}"
|
||||
|
||||
@@ -250,7 +250,7 @@ class OpenWebUIStats:
|
||||
texts = {
|
||||
"zh": {
|
||||
"title": "# 📊 OpenWebUI 社区统计报告",
|
||||
"updated": f"> 📅 更新时间 (北京): {get_beijing_time().strftime('%Y-%m-%d %H:%M')}",
|
||||
"updated": f"> 📅 更新时间: {get_beijing_time().strftime('%Y-%m-%d %H:%M')}",
|
||||
"overview_title": "## 📈 总览",
|
||||
"overview_header": "| 指标 | 数值 |",
|
||||
"posts": "📝 发布数量",
|
||||
@@ -265,7 +265,7 @@ class OpenWebUIStats:
|
||||
},
|
||||
"en": {
|
||||
"title": "# 📊 OpenWebUI Community Stats Report",
|
||||
"updated": f"> 📅 Updated (Beijing Time): {get_beijing_time().strftime('%Y-%m-%d %H:%M')}",
|
||||
"updated": f"> 📅 Updated: {get_beijing_time().strftime('%Y-%m-%d %H:%M')}",
|
||||
"overview_title": "## 📈 Overview",
|
||||
"overview_header": "| Metric | Value |",
|
||||
"posts": "📝 Total Posts",
|
||||
@@ -346,7 +346,7 @@ class OpenWebUIStats:
|
||||
texts = {
|
||||
"zh": {
|
||||
"title": "## 📊 社区统计",
|
||||
"updated": f"> 🕐 自动更新于 {get_beijing_time().strftime('%Y-%m-%d %H:%M')} (北京时间)",
|
||||
"updated": f"> 🕐 自动更新于 {get_beijing_time().strftime('%Y-%m-%d %H:%M')}",
|
||||
"author_header": "| 👤 作者 | 👥 粉丝 | ⭐ 积分 | 🏆 贡献 |",
|
||||
"header": "| 📝 发布 | ⬇️ 下载 | 👁️ 浏览 | 👍 点赞 | 💾 收藏 |",
|
||||
"top5_title": "### 🔥 热门插件 Top 5",
|
||||
@@ -355,7 +355,7 @@ class OpenWebUIStats:
|
||||
},
|
||||
"en": {
|
||||
"title": "## 📊 Community Stats",
|
||||
"updated": f"> 🕐 Auto-updated: {get_beijing_time().strftime('%Y-%m-%d %H:%M')} (Beijing Time)",
|
||||
"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",
|
||||
|
||||
Reference in New Issue
Block a user