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

@@ -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)
 

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)
 

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
 

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` 用于控制输出格式。
 
 ## ✨ 核心特性
 

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}})`;

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}})`;