From cf86012d4d54977a2d123952476aa69926b2b65b Mon Sep 17 00:00:00 2001 From: fujie Date: Wed, 7 Jan 2026 21:23:49 +0800 Subject: [PATCH] feat(infographic): upload PNG instead of SVG for better compatibility - Convert SVG to PNG using canvas before uploading - 2x scale for higher quality output - Fix Word export compatibility issue (SVG not supported by python-docx) - Update version to 1.4.1 - Update README.md and README_CN.md with new feature --- docs/plugins/actions/index.md | 2 +- docs/plugins/actions/index.zh.md | 2 +- plugins/actions/infographic/README.md | 13 ++++--- plugins/actions/infographic/README_CN.md | 13 ++++--- plugins/actions/infographic/infographic.py | 39 ++++++++++++++++--- plugins/actions/infographic/infographic_cn.py | 39 ++++++++++++++++--- 6 files changed, 84 insertions(+), 24 deletions(-) diff --git a/docs/plugins/actions/index.md b/docs/plugins/actions/index.md index 3ee89fa..31208f4 100644 --- a/docs/plugins/actions/index.md +++ b/docs/plugins/actions/index.md @@ -33,7 +33,7 @@ Actions are interactive plugins that: Transform text into professional infographics using AntV visualization engine with various templates. - **Version:** 1.4.0 + **Version:** 1.4.1 [:octicons-arrow-right-24: Documentation](smart-infographic.md) diff --git a/docs/plugins/actions/index.zh.md b/docs/plugins/actions/index.zh.md index 4b145a1..3d82ca5 100644 --- a/docs/plugins/actions/index.zh.md +++ b/docs/plugins/actions/index.zh.md @@ -33,7 +33,7 @@ Actions 是交互式插件，能够： 使用 AntV 可视化引擎，将文本转成专业的信息图。 - **版本：** 1.4.0 + **版本：** 1.4.1 [:octicons-arrow-right-24: 查看文档](smart-infographic.md) diff --git a/plugins/actions/infographic/README.md b/plugins/actions/infographic/README.md index 51799bc..af5adda 100644 --- a/plugins/actions/infographic/README.md +++ b/plugins/actions/infographic/README.md @@ -1,15 +1,18 @@ # 📊 Smart Infographic (AntV) -**Author:** [Fu-Jie](https://github.com/Fu-Jie) | **Version:** 1.4.0 | **Project:** [Awesome OpenWebUI](https://github.com/Fu-Jie/awesome-openwebui) +**Author:** [Fu-Jie](https://github.com/Fu-Jie) | **Version:** 1.4.1 | **Project:** [Awesome OpenWebUI](https://github.com/Fu-Jie/awesome-openwebui) An Open WebUI plugin powered by the AntV Infographic engine. It transforms long text into professional, beautiful infographics with a single click. -## 🔥 What's New in v1.4.0 +## 🔥 What's New in v1.4.1 -- ✨ **Default Mode Change**: Default output mode is now `image` (static image) for better compatibility and cleaner chat history. -- ✨ **New Image Output Mode**: Support embedding infographics as static images (SVG). +- ✨ **PNG Upload**: Infographics now upload as PNG format for better Word export compatibility. +- 🔧 **Canvas Conversion**: Uses browser canvas for high-quality SVG to PNG conversion (2x scale). + +### Previous: v1.4.0 + +- ✨ **Default Mode Change**: Default output mode is now `image` (static image) for better compatibility. - 📱 **Responsive Sizing**: Images now auto-adapt to the chat container width. -- 🔧 **New Configuration**: `OUTPUT_MODE` valve to control output format. ## ✨ Key Features diff --git a/plugins/actions/infographic/README_CN.md b/plugins/actions/infographic/README_CN.md index c47f89d..e0a1bc3 100644 --- a/plugins/actions/infographic/README_CN.md +++ b/plugins/actions/infographic/README_CN.md @@ -1,15 +1,18 @@ # 📊 智能信息图 (AntV Infographic) -**作者:** [jeff](https://github.com/Fu-Jie) | **版本:** 1.4.0 | **项目:** [Awesome OpenWebUI](https://github.com/Fu-Jie/awesome-openwebui) +**Author:** [Fu-Jie](https://github.com/Fu-Jie) | **Version:** 1.4.1 | **Project:** [Awesome OpenWebUI](https://github.com/Fu-Jie/awesome-openwebui) 基于 AntV Infographic 引擎的 Open WebUI 插件，能够将长文本内容一键转换为专业、美观的信息图表。 -## 🔥 v1.4.0 更新日志 +## 🔥 v1.4.1 更新日志 -- ✨ **默认模式变更**：默认输出模式调整为 `image`（静态图片），以获得更好的兼容性和更简洁的聊天记录。 -- ✨ **新增图片输出模式**：支持将信息图作为静态图片 (SVG) 嵌入。 +- ✨ **PNG 上传**：信息图现在以 PNG 格式上传，与 Word 导出完美兼容。 +- 🔧 **Canvas 转换**：使用浏览器 Canvas 高质量转换 SVG 为 PNG（2倍缩放）。 + +### 此前: v1.4.0 + +- ✨ **默认模式变更**：默认输出模式调整为 `image`（静态图片）。 - 📱 **响应式尺寸**：图片模式下自动适应聊天容器宽度。 -- 🔧 **新增配置项**：`OUTPUT_MODE` 用于控制输出格式。 ## ✨ 核心特性 diff --git a/plugins/actions/infographic/infographic.py b/plugins/actions/infographic/infographic.py index 3b962ea..8be72a4 100644 --- a/plugins/actions/infographic/infographic.py +++ b/plugins/actions/infographic/infographic.py @@ -3,7 +3,7 @@ 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.4.0 +version: 1.4.1 description: AI-powered infographic generator based on AntV Infographic. Supports professional templates, auto-icon matching, and SVG/PNG downloads. """ @@ -1128,12 +1128,39 @@ class Action: // 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' }}); + // Convert SVG to PNG using canvas for better compatibility + console.log("[Infographic Image] Converting SVG to PNG..."); + const pngBlob = await new Promise((resolve, reject) => {{ + const canvas = document.createElement('canvas'); + const ctx = canvas.getContext('2d'); + const scale = 2; // Higher resolution for clarity + canvas.width = Math.round(width * scale); + canvas.height = Math.round(height * scale); + + // Fill white background + ctx.fillStyle = '#ffffff'; + ctx.fillRect(0, 0, canvas.width, canvas.height); + ctx.scale(scale, scale); + + const img = new Image(); + img.onload = () => {{ + ctx.drawImage(img, 0, 0, width, height); + canvas.toBlob((blob) => {{ + if (blob) {{ + resolve(blob); + }} else {{ + reject(new Error('Canvas toBlob failed')); + }} + }}, 'image/png'); + }}; + img.onerror = (e) => reject(new Error('Failed to load SVG as image: ' + e)); + img.src = 'data:image/svg+xml;base64,' + btoa(unescape(encodeURIComponent(svgData))); + }}); + + const file = new File([pngBlob], `infographic-${{uniqueId}}.png`, {{ type: 'image/png' }}); // Upload file to OpenWebUI API - console.log("[Infographic Image] Uploading SVG file..."); + console.log("[Infographic Image] Uploading PNG file..."); const token = localStorage.getItem("token"); const formData = new FormData(); formData.append('file', file); @@ -1154,7 +1181,7 @@ class Action: const fileId = fileData.id; const imageUrl = `/api/v1/files/${{fileId}}/content`; - console.log("[Infographic Image] File uploaded, ID:", fileId); + console.log("[Infographic Image] PNG file uploaded, ID:", fileId); // Generate markdown image with file URL const markdownImage = `![📊 Infographic](${{imageUrl}})`; diff --git a/plugins/actions/infographic/infographic_cn.py b/plugins/actions/infographic/infographic_cn.py index 5e2e73b..de950d2 100644 --- a/plugins/actions/infographic/infographic_cn.py +++ b/plugins/actions/infographic/infographic_cn.py @@ -3,7 +3,7 @@ title: 📊 智能信息图 (AntV Infographic) author: jeff author_url: https://github.com/Fu-Jie/awesome-openwebui icon_url: data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9ImN1cnJlbnRDb2xvciIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiPgogIDxsaW5lIHgxPSIxMiIgeTE9IjIwIiB4Mj0iMTIiIHkyPSIxMCIgLz4KICA8bGluZSB4MT0iMTgiIHkxPSIyMCIgeDI9IjE4IiB5Mj0iNCIgLz4KICA8bGluZSB4MT0iNiIgeTE9IjIwIiB4Mj0iNiIgeTI9IjE2IiAvPgo8L3N2Zz4= -version: 1.4.0 +version: 1.4.1 description: 基于 AntV Infographic 的智能信息图生成插件。支持多种专业模板，自动图标匹配，并提供 SVG/PNG 下载功能。 """ @@ -1189,12 +1189,39 @@ class Action: // 清理容器 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' }}); + // 使用 canvas 将 SVG 转换为 PNG 以提高兼容性 + console.log("[Infographic Image] 正在将 SVG 转换为 PNG..."); + const pngBlob = await new Promise((resolve, reject) => {{ + const canvas = document.createElement('canvas'); + const ctx = canvas.getContext('2d'); + const scale = 2; // 更高分辨率以提高清晰度 + canvas.width = Math.round(width * scale); + canvas.height = Math.round(height * scale); + + // 填充白色背景 + ctx.fillStyle = '#ffffff'; + ctx.fillRect(0, 0, canvas.width, canvas.height); + ctx.scale(scale, scale); + + const img = new Image(); + img.onload = () => {{ + ctx.drawImage(img, 0, 0, width, height); + canvas.toBlob((blob) => {{ + if (blob) {{ + resolve(blob); + }} else {{ + reject(new Error('Canvas toBlob 失败')); + }} + }}, 'image/png'); + }}; + img.onerror = (e) => reject(new Error('加载 SVG 图片失败: ' + e)); + img.src = 'data:image/svg+xml;base64,' + btoa(unescape(encodeURIComponent(svgData))); + }}); + + const file = new File([pngBlob], `infographic-${{uniqueId}}.png`, {{ type: 'image/png' }}); // 上传文件到 OpenWebUI API - console.log("[Infographic Image] 上传 SVG 文件..."); + console.log("[Infographic Image] 上传 PNG 文件..."); const token = localStorage.getItem("token"); const formData = new FormData(); formData.append('file', file); @@ -1215,7 +1242,7 @@ class Action: const fileId = fileData.id; const imageUrl = `/api/v1/files/${{fileId}}/content`; - console.log("[Infographic Image] 文件已上传, ID:", fileId); + console.log("[Infographic Image] PNG 文件已上传, ID:", fileId); // 生成带文件 URL 的 markdown 图片 const markdownImage = `![📊 信息图](${{imageUrl}})`;