From 66a6d6b103a0d6518c35466a919dbcb0387cb983 Mon Sep 17 00:00:00 2001 From: fujie Date: Sun, 28 Dec 2025 21:54:47 +0800 Subject: [PATCH] =?UTF-8?q?feat:=20=E6=9B=B4=E6=96=B0=E6=8F=92=E4=BB=B6?= =?UTF-8?q?=E5=85=83=E6=95=B0=E6=8D=AE=E5=92=8C=E6=96=87=E6=A1=A3=EF=BC=8C?= =?UTF-8?q?=E5=B9=B6=E7=A7=BB=E9=99=A4=E6=97=A7=E7=9A=84=20README=20?= =?UTF-8?q?=E6=96=87=E4=BB=B6=E3=80=82?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- plugins/actions/infographic/README.md | 98 +++++++++++----------- plugins/actions/infographic/README_CN.md | 80 +++++++++++------- plugins/actions/infographic/README_EN.md | 80 +++++++++++------- plugins/actions/infographic/infographic.py | 10 ++- plugins/actions/infographic/信息图.py | 10 ++- 5 files changed, 162 insertions(+), 116 deletions(-) diff --git a/plugins/actions/infographic/README.md b/plugins/actions/infographic/README.md index 68821ca..d38d90e 100644 --- a/plugins/actions/infographic/README.md +++ b/plugins/actions/infographic/README.md @@ -1,67 +1,65 @@ -# 信息图 - OpenWebUI Action 插件 +# 📊 Smart Infographic (AntV) -将文本内容智能转换为美观的信息图，基于蚂蚁集团 AntV Infographic 引擎。 +An Open WebUI plugin powered by the AntV Infographic engine. It transforms long text into professional, beautiful infographics with a single click. -## 功能特性 +## ✨ Key Features -- 🤖 **AI 驱动**: 使用 LLM 自动分析文本内容并生成信息图语法 -- 📊 **多种模板**: 支持列表、流程、层级等多种信息图类型 -- 🎨 **自动图标**: 使用 `ref:search` 语法自动匹配高质量图标 -- 💾 **多格式导出**: 支持下载 SVG、PNG 和独立 HTML 文件 -- 🎯 **零配置**: 开箱即用，无需额外设置 +- 🚀 **AI-Powered Transformation**: Automatically analyzes text logic, extracts key points, and generates structured charts. +- 🎨 **Professional Templates**: Includes various AntV official templates: Lists, Trees, Mindmaps, Comparison Tables, Flowcharts, and Statistical Charts. +- 🔍 **Auto-Icon Matching**: Built-in logic to search and match the most relevant Material Design Icons based on content. +- 📥 **Multi-Format Export**: Download your infographics as **SVG**, **PNG**, or a **Standalone HTML** file. +- 🌈 **Highly Customizable**: Supports Dark/Light modes, auto-adapts theme colors, with bold titles and refined card layouts. +- 📱 **Responsive Design**: Generated charts look great on both desktop and mobile devices. -## 安装 +## 🛠️ Supported Template Types -1. 将 `信息图.py` 文件复制到 Open WebUI 的插件目录： - ``` - plugins/actions/infographic/ - ``` +| Category | Template Name | Use Case | +| :--- | :--- | :--- | +| **Lists & Hierarchy** | `list-grid`, `tree-vertical`, `mindmap` | Features, Org Charts, Brainstorming | +| **Sequence & Relation** | `sequence-roadmap`, `relation-circle` | Roadmaps, Circular Flows, Steps | +| **Comparison & Analysis** | `compare-binary`, `compare-swot`, `quadrant-quarter` | Pros/Cons, SWOT, Quadrants | +| **Charts & Data** | `chart-bar`, `chart-line`, `chart-pie` | Trends, Distributions, Metrics | -2. 重启 Open WebUI 或在管理界面重新加载插件 +## 🚀 How to Use -3. 在聊天界面的 Action 菜单中即可看到 "信息图" 选项 +1. **Install**: Search for "Smart Infographic" in the Open WebUI Community and install. +2. **Trigger**: Enter your text in the chat, then click the **Action Button** (📊 icon) next to the input box. +3. **AI Processing**: The AI analyzes the text and generates the infographic syntax. +4. **Preview & Download**: Preview the result and use the download buttons below to save your infographic. -## 使用方法 +## ⚙️ Configuration (Valves) -1. 在聊天框输入需要可视化的文本内容（建议 100 字符以上） -2. 点击 "信息图" Action 按钮 -3. AI 将自动分析文本并生成信息图 -4. 可以下载 SVG、PNG 或 HTML 格式的文件 +You can adjust the following parameters in the plugin settings to optimize the generation: -### 示例文本 +| Parameter | Default | Description | +| :--- | :--- | :--- | +| **Show Status (SHOW_STATUS)** | `True` | Whether to show real-time AI analysis and generation status in the chat. | +| **Model ID (MODEL_ID)** | `Empty` | Specify the LLM model for text analysis. If empty, the current chat model is used. | +| **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. | -``` -我们的产品开发流程包括三个主要阶段： -1. 需求分析 - 收集和分析用户需求，确定产品方向 -2. 设计开发 - 完成 UI/UX 设计和前后端开发 -3. 测试上线 - 进行质量验证并正式发布 +## 📝 Syntax Example (For Advanced Users) + +You can also input this syntax directly for AI to render: + +```infographic +infographic list-grid +data + title 🚀 Plugin Benefits + desc Why use the Smart Infographic plugin + items + - label Fast Generation + desc Convert text to charts in seconds + - label Beautiful Design + desc Uses AntV professional design standards ``` -## 配置选项（Valves） +## 👨‍💻 Author -- **SHOW_STATUS**: 是否显示操作状态更新（默认: True） -- **MODEL_ID**: 用于分析的 LLM 模型 ID（默认: 使用当前对话模型） -- **MIN_TEXT_LENGTH**: 最小文本长度要求（默认: 100 字符） -- **CLEAR_PREVIOUS_HTML**: 是否清除之前的插件输出（默认: False） +**jeff** +- GitHub: [Fu-Jie/awesome-openwebui](https://github.com/Fu-Jie/awesome-openwebui) -## 支持的信息图类型 - -插件会根据文本内容自动选择最合适的模板： - -- **列表型**: `list-row-horizontal-icon-arrow`, `list-grid` -- **层级型**: `tree-vertical`, `tree-horizontal` - -## 技术栈 - -- **后端**: Python, OpenWebUI Action API -- **前端**: AntV Infographic (CDN) -- **AI**: 自定义提示词工程 - -## 许可证 +## 📄 License MIT License - -## 致谢 - -- [AntV Infographic](https://infographic.antv.vision/) - 信息图渲染引擎 -- [Open WebUI](https://github.com/open-webui/open-webui) - AI 聊天界面 diff --git a/plugins/actions/infographic/README_CN.md b/plugins/actions/infographic/README_CN.md index 795b608..26b1505 100644 --- a/plugins/actions/infographic/README_CN.md +++ b/plugins/actions/infographic/README_CN.md @@ -1,43 +1,65 @@ -# AntV Infographic 智能信息图插件 +# 📊 智能信息图 (AntV Infographic) -将文本内容一键转换为精美的信息图。支持列表、层级、流程、关系、对比、分析、图表等多种可视化形式。 +基于 AntV Infographic 引擎的 Open WebUI 插件，能够将长文本内容一键转换为专业、美观的信息图表。 -## 功能特性 +## ✨ 核心特性 -- **智能分析**: 自动识别文本结构，选择最合适的图表模板。 -- **丰富模板**: 支持 20+ 种 AntV 信息图模板，涵盖列表、树图、思维导图、流程图、桑基图、SWOT、象限图、柱状图、饼图等。 -- **自动配图**: 智能搜索并匹配合适的图标。 -- **多格式导出**: 支持导出为 SVG, PNG, HTML 格式。 -- **多语言支持**: 输出语言跟随用户设定。 +- 🚀 **智能转换**：自动分析文本核心逻辑，提取关键点并生成结构化图表。 +- 🎨 **专业模板**：内置多种 AntV 官方模板，包括列表、树图、思维导图、对比图、流程图及统计图表等。 +- 🔍 **自动图标匹配**：内置图标搜索逻辑，根据内容自动匹配最相关的 Material Design Icons。 +- 📥 **多格式导出**：支持一键下载为 **SVG**、**PNG** 或 **独立 HTML** 文件。 +- 🌈 **高度自定义**：支持深色/浅色模式，自动适配主题颜色，主标题加粗突出，卡片布局精美。 +- 📱 **响应式设计**：生成的图表在桌面端和移动端均有良好的展示效果。 -## 使用方法 +## 🛠️ 支持的模板类型 -在 Open WebUI 聊天框中，直接输入文本或上传文档，然后启用该插件。插件会自动分析内容并生成信息图。 +| 分类 | 模板名称 | 适用场景 | +| :--- | :--- | :--- | +| **列表与层级** | `list-grid`, `tree-vertical`, `mindmap` | 功能亮点、组织架构、思维导图 | +| **顺序与关系** | `sequence-roadmap`, `relation-circle` | 发展历程、循环关系、步骤说明 | +| **对比与分析** | `compare-binary`, `compare-swot`, `quadrant-quarter` | 优劣势对比、SWOT 分析、象限图 | +| **图表与数据** | `chart-bar`, `chart-line`, `chart-pie` | 数据趋势、比例分布、数值对比 | -### 支持的图表类型 +## 🚀 使用方法 -#### 1. 列表与层级 -- **列表**: 网格卡片 (`list-grid`), 垂直列表 (`list-vertical`) -- **树图**: 垂直树 (`tree-vertical`), 水平树 (`tree-horizontal`) -- **思维导图**: `mindmap` +1. **安装插件**：在 Open WebUI 插件市场搜索并安装。 +2. **触发生成**：在对话框中输入一段长文本，点击输入框旁边的 **Action 按钮**（📊 图标）。 +3. **AI 处理**：AI 会自动分析文本并生成对应的信息图语法。 +4. **预览与下载**：在渲染区域预览效果，满意后点击下方的下载按钮保存。 -#### 2. 顺序与关系 -- **流程**: 路线图 (`sequence-roadmap`), 之字形流程 (`sequence-zigzag`), 水平流程 (`sequence-horizontal`) -- **关系**: 桑基图 (`relation-sankey`), 循环关系 (`relation-circle`) +## ⚙️ 配置参数 (Valves) -#### 3. 对比与分析 -- **对比**: 二元对比 (`compare-binary`), 对比表 (`compare-table`) -- **分析**: SWOT 分析 (`compare-swot`), 象限图 (`quadrant-quarter`) +在插件设置界面，你可以调整以下参数来优化生成效果： -#### 4. 图表与数据 -- **统计**: 统计卡片 (`statistic-card`) -- **图表**: 柱状图 (`chart-bar`), 条形图 (`chart-column`), 折线图 (`chart-line`), 饼图 (`chart-pie`), 环形图 (`chart-doughnut`) +| 参数名称 | 默认值 | 说明 | +| :--- | :--- | :--- | +| **显示状态 (SHOW_STATUS)** | `True` | 是否在聊天界面实时显示 AI 分析和生成的进度状态。 | +| **模型 ID (MODEL_ID)** | `空` | 指定用于文本分析的 LLM 模型。留空则默认使用当前对话的模型。 | +| **最小文本长度 (MIN_TEXT_LENGTH)** | `100` | 触发分析所需的最小字符数，防止对过短的对话误操作。 | +| **清除旧结果 (CLEAR_PREVIOUS_HTML)** | `False` | 每次生成是否清除之前的图表。若为 `False`，新图表将追加在下方。 | +| **上下文消息数 (MESSAGE_COUNT)** | `1` | 用于分析的最近消息条数。增加此值可让 AI 参考更多对话背景。 | -## 安装 +## 📝 语法示例 (高级用户) -将 `infographic.py` (英文版) 或 `信息图.py` (中文版) 放入 Open WebUI 的插件目录即可。 +你也可以直接输入以下语法让 AI 渲染： -## 依赖 +```infographic +infographic list-grid +data + title 🚀 插件优势 + desc 为什么选择智能信息图插件 + items + - label 极速生成 + desc 秒级完成文本到图表的转换 + - label 视觉精美 + desc 采用 AntV 专业设计规范 +``` -- 插件依赖 `@antv/infographic` 库 (通过 CDN 加载)。 -- 需要联网权限以加载 CDN 资源和图标。 +## 👨‍💻 作者 + +**jeff** +- GitHub: [Fu-Jie/awesome-openwebui](https://github.com/Fu-Jie/awesome-openwebui) + +## 📄 许可证 + +MIT License diff --git a/plugins/actions/infographic/README_EN.md b/plugins/actions/infographic/README_EN.md index 7b54c74..d38d90e 100644 --- a/plugins/actions/infographic/README_EN.md +++ b/plugins/actions/infographic/README_EN.md @@ -1,43 +1,65 @@ -# AntV Infographic Plugin +# 📊 Smart Infographic (AntV) -Transform text content into beautiful infographics with a single click. Supports lists, hierarchies, processes, relationships, comparisons, analysis, charts, and more. +An Open WebUI plugin powered by the AntV Infographic engine. It transforms long text into professional, beautiful infographics with a single click. -## Features +## ✨ Key Features -- **Smart Analysis**: Automatically identifies text structure and selects the best template. -- **Rich Templates**: Supports 20+ AntV infographic templates, including lists, trees, mind maps, roadmaps, Sankey diagrams, SWOT, quadrant charts, bar charts, pie charts, etc. -- **Auto Icons**: Intelligently searches and matches appropriate icons. -- **Multi-format Export**: Export as SVG, PNG, or HTML. -- **Multi-language**: Output language follows user settings. +- 🚀 **AI-Powered Transformation**: Automatically analyzes text logic, extracts key points, and generates structured charts. +- 🎨 **Professional Templates**: Includes various AntV official templates: Lists, Trees, Mindmaps, Comparison Tables, Flowcharts, and Statistical Charts. +- 🔍 **Auto-Icon Matching**: Built-in logic to search and match the most relevant Material Design Icons based on content. +- 📥 **Multi-Format Export**: Download your infographics as **SVG**, **PNG**, or a **Standalone HTML** file. +- 🌈 **Highly Customizable**: Supports Dark/Light modes, auto-adapts theme colors, with bold titles and refined card layouts. +- 📱 **Responsive Design**: Generated charts look great on both desktop and mobile devices. -## Usage +## 🛠️ Supported Template Types -In the Open WebUI chat interface, simply input text or upload a document, then enable this plugin. The plugin will analyze the content and generate an infographic. +| Category | Template Name | Use Case | +| :--- | :--- | :--- | +| **Lists & Hierarchy** | `list-grid`, `tree-vertical`, `mindmap` | Features, Org Charts, Brainstorming | +| **Sequence & Relation** | `sequence-roadmap`, `relation-circle` | Roadmaps, Circular Flows, Steps | +| **Comparison & Analysis** | `compare-binary`, `compare-swot`, `quadrant-quarter` | Pros/Cons, SWOT, Quadrants | +| **Charts & Data** | `chart-bar`, `chart-line`, `chart-pie` | Trends, Distributions, Metrics | -### Supported Chart Types +## 🚀 How to Use -#### 1. List & Hierarchy -- **List**: Grid Cards (`list-grid`), Vertical List (`list-vertical`) -- **Tree**: Vertical Tree (`tree-vertical`), Horizontal Tree (`tree-horizontal`) -- **Mindmap**: `mindmap` +1. **Install**: Search for "Smart Infographic" in the Open WebUI Community and install. +2. **Trigger**: Enter your text in the chat, then click the **Action Button** (📊 icon) next to the input box. +3. **AI Processing**: The AI analyzes the text and generates the infographic syntax. +4. **Preview & Download**: Preview the result and use the download buttons below to save your infographic. -#### 2. Sequence & Relationship -- **Process**: Roadmap (`sequence-roadmap`), Zigzag Process (`sequence-zigzag`), Horizontal Process (`sequence-horizontal`) -- **Relationship**: Sankey Diagram (`relation-sankey`), Circular Relationship (`relation-circle`) +## ⚙️ Configuration (Valves) -#### 3. Comparison & Analysis -- **Comparison**: Binary Comparison (`compare-binary`), Comparison Table (`compare-table`) -- **Analysis**: SWOT Analysis (`compare-swot`), Quadrant Chart (`quadrant-quarter`) +You can adjust the following parameters in the plugin settings to optimize the generation: -#### 4. Charts & Data -- **Statistics**: Statistic Cards (`statistic-card`) -- **Charts**: Bar Chart (`chart-bar`), Column Chart (`chart-column`), Line Chart (`chart-line`), Pie Chart (`chart-pie`), Doughnut Chart (`chart-doughnut`) +| Parameter | Default | Description | +| :--- | :--- | :--- | +| **Show Status (SHOW_STATUS)** | `True` | Whether to show real-time AI analysis and generation status in the chat. | +| **Model ID (MODEL_ID)** | `Empty` | Specify the LLM model for text analysis. If empty, the current chat model is used. | +| **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. | -## Installation +## 📝 Syntax Example (For Advanced Users) -Place `infographic.py` (English version) or `信息图.py` (Chinese version) into your Open WebUI plugins directory. +You can also input this syntax directly for AI to render: -## Dependencies +```infographic +infographic list-grid +data + title 🚀 Plugin Benefits + desc Why use the Smart Infographic plugin + items + - label Fast Generation + desc Convert text to charts in seconds + - label Beautiful Design + desc Uses AntV professional design standards +``` -- Depends on `@antv/infographic` library (loaded via CDN). -- Requires internet access to load CDN resources and icons. +## 👨‍💻 Author + +**jeff** +- GitHub: [Fu-Jie/awesome-openwebui](https://github.com/Fu-Jie/awesome-openwebui) + +## 📄 License + +MIT License diff --git a/plugins/actions/infographic/infographic.py b/plugins/actions/infographic/infographic.py index ebacab6..3615e45 100644 --- a/plugins/actions/infographic/infographic.py +++ b/plugins/actions/infographic/infographic.py @@ -1,8 +1,10 @@ """ -title: Infographic -icon_url: data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9ImN1cnJlbnRDb2xvciIgc3Ryb2tlLXdpZHRoPSIyIj48cmVjdCB4PSIzIiB5PSIzIiB3aWR0aD0iMTgiIGhlaWdodD0iMTgiIHJ4PSIyIi8+PHBhdGggZD0iTTcgOGg1Ii8+PHBhdGggZD0iTTcgMTJoNyIvPjxwYXRoIGQ9Ik03IDE2aDkiLz48L3N2Zz4= -version: 1.1.2 -description: Transform text content into beautiful infographics with multiple templates and automatic icon search. +title: 📊 Smart Infographic (AntV) +author: jeff +author_url: https://github.com/Fu-Jie/awesome-openwebui +icon_url: data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgd2lkdGg9IjI0IiBoZWlnaHQ9IjI0Ij48cmVjdCB4PSIzIiB5PSIxMCIgd2lkdGg9IjQiIGhlaWdodD0iMTEiIGZpbGw9IiM2MzY2ZjEiIHJ4PSIxIi8+PHJlY3QgeD0iMTAiIHk9IjUiIHdpZHRoPSI0IiBoZWlnaHQ9IjE2IiBmaWxsPSIjOGI1Y2Y2IiByeD0iMSIvPjxyZWN0IHg9IjE3IiB5PSIxMyIgd2lkdGg9IjQiIGhlaWdodD0iOCIgZmlsbD0iIzEwYjk4MSIgcng9IjEiLz48L3N2Zz4= +version: 1.3.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 diff --git a/plugins/actions/infographic/信息图.py b/plugins/actions/infographic/信息图.py index 3f80aac..cc82258 100644 --- a/plugins/actions/infographic/信息图.py +++ b/plugins/actions/infographic/信息图.py @@ -1,8 +1,10 @@ """ -title: 信息图 -icon_url: data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9ImN1cnJlbnRDb2xvciIgc3Ryb2tlLXdpZHRoPSIyIj48cmVjdCB4PSIzIiB5PSIzIiB3aWR0aD0iMTgiIGhlaWdodD0iMTgiIHJ4PSIyIi8+PHBhdGggZD0iTTcgOGg1Ii8+PHBhdGggZD0iTTcgMTJoNyIvPjxwYXRoIGQ9Ik03IDE2aDkiLz48L3N2Zz4= -version: 1.2.38 -description: 将文本内容转换为美观的信息图，支持多种模板类型和自动图标搜索。 +title: 📊 智能信息图 (AntV Infographic) +author: jeff +author_url: https://github.com/Fu-Jie/awesome-openwebui +icon_url: data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgd2lkdGg9IjI0IiBoZWlnaHQ9IjI0Ij48cmVjdCB4PSIzIiB5PSIxMCIgd2lkdGg9IjQiIGhlaWdodD0iMTEiIGZpbGw9IiM2MzY2ZjEiIHJ4PSIxIi8+PHJlY3QgeD0iMTAiIHk9IjUiIHdpZHRoPSI0IiBoZWlnaHQ9IjE2IiBmaWxsPSIjOGI1Y2Y2IiByeD0iMSIvPjxyZWN0IHg9IjE3IiB5PSIxMyIgd2lkdGg9IjQiIGhlaWdodD0iOCIgZmlsbD0iIzEwYjk4MSIgcng9IjEiLz48L3N2Zz4= +version: 1.3.0 +description: 基于 AntV Infographic 的智能信息图生成插件。支持多种专业模板，自动图标匹配，并提供 SVG/PNG 下载功能。 """ from pydantic import BaseModel, Field