1.前言
源文档到SVG幻灯片生成器是一种软件或系统,它能将源文档(如XML、OpenOffice文档、文本描述或其他格式)转换为SVG(Scalable Vector Graphics)格式的幻灯片。
SVG是一种基于XML的矢量图形格式,具有可缩放、轻量化和交互性强的特点,特别适合用于网页演示、教育内容或动态展示。这种生成器的主要目的是自动化幻灯片的创建过程,提高效率,并保留源文档的内容和格式。
本周接到一个工作任务,领导要求做一个关于大模型一体机,私域知识库一页纸的海报,方便业务人员拿着一页纸给客户讲明白什么是大模型一体机,什么是私域知识库。我一开始想这个不就是美工的活吗?那我找公司的美工做一个?后来我又一想美工又不懂什么是一体机,什么是知识库我还得给它提供素材,然后还给它讲大概怎么做,做成什么样子,最后的效果好不好我也不知道,中间沟通成本太高了。那么可不可以利用原始材料PPT、PDF、word等材料甩给大模型,让大模型给我做一个。然后发给领导看,有问题我里面还能改,改成什么样子领导说啥我改啥,另外生成SVG 还能生成对应的代码 HTML,后面甩给前端工程师还能接着用。这个想法觉的不错,然后我就开干。
那么这样的工作流大概是什么样子的呢?我们给大家展示一下
生成的图片效果
打开看这样的2页纸的海报效果还不错吧,呵呵。话不多说,下面就带大家一起来实现这个演示设计师SVG海报生成工作流。
如果大家懒的看文章,我们这里也提供的一个文章的播客,感兴趣小伙伴也可以先听一下这个播客
dify案例分享合集-PPT 到 SVG,wwzhouhui,8分钟
2.工作流制作
这个工作流主要有哪些组成部分构成的呢?我这里做了2个版本的工作流,一个是使用上海人工智能实验室开源的MinerU 版本,1个是合合信息 textin-ocr 实现的。
那么这2个工作流组成部分主要由:开始、MinerU、生成 SVG海报设计专家、 SVG海报(直接回复组成);
开始、合合通用文档解析、生成 SVG海报设计专家、 SVG海报(直接回复组成);
那么接下来我们详细介绍这工作流如何搭建的。
首先创建一个chatflow 工作流
开始
这个开始节点,主要的目的是上传用户的文件。这文件主要包括 word、pdf 、PPT等文件。所以输入参数我们这里设置一个文件。
开始完整配置如下截图:
MinerU
接下来我们这里用到了上海人工智能实验室开源的MinerU 的这个项目。关于这个组件我之前文章也有过介绍,详细配置大家可以看我之前的文章,dify案例分享-探秘:AI 怎样颠覆财报分析,打造酷炫 HTML 可视化 这里就不在详细介绍了。
点击添加节点-工具-mineru
接下来设置一下mineru,输入参考就是开始节点传入的file. 解析方法: orc;开启公式识别:true 开启公式识别:true 布局检测模型:doclayout-yolo 文档语言:auto 开启ocr识别:true. 具体配置如下:
合合通用文档解析
我们刚才给大家说了,这次我们做了2个版本的工作流,区别就是分别使用mineru和合合通用文档解析 来分别实现pdf等文档的数据提取功能。
合合通用文档解析安装
这个合合通用文档解析我们需要在dify 插件市场上搜索。textin
点击安装完成通用文档解析安装。安装完成后我们可以在已安装的插件中查找到。
通过以上方式我们确保这个第三方工具安装完成。
合合通用文档解析注册
目前这个合合通用文档是一个商业化产品,新户注册可以送一些免费额度。有需要的小伙伴可以点击这个专属链接https://cc.co/16YSU7,免费领取1500页额度。
这个组件需要2个参数APP_ID 和APP_SECRET这个是如何获取的呢?登录合合管理平台,点击账号和开发者信息
上面的2个值就对应的APP_ID 和APP_SECRET。
合合通用文档解析dify配置
我们回到dify工作流
这输入文档这里我们需要注意的地方是输入变量是一个在线链接地址。所以我们需要在文件列表中选择URL,安装下面的1,2, 3 步骤设置URL
剩下的x-ti-app-id 和 x-ti-secret-code 就是上面步骤中我们从网站上获取的2个值。
代码处理
因为后面我们提取上个流程返回的内容信息。这块我们需要一个代码处理来解析合合接口返回markdown格式的数据。
输入参数arg1 数据类型json
代码
import json
defmain(arg1: str) -> dict: # 修改返回类型为 str
# 如果传入的是字典,直接使用;如果是字符串,则解析
ifisinstance(arg1, str):
data = json.loads(arg1)
elifisinstance(arg1, list):
# 如果是列表,取第一个元素
data = arg1[0] if arg1 else {}
elifisinstance(arg1, dict):
# 如果已经是字典,直接使用
data = arg1
else:
# 其他类型,返回错误
return {"result": "", "error": f"不支持的输入类型: {type(arg1)}"}
markdown = data['markdown']
return {
"result": markdown,
}
返回值 result 返回类型string
补充说明
有个小伙伴说上面的流程中为什么做2个文档提取呢,不麻烦吗?我用免费的MinerU 不就可以了吗?这里我们给大家简单说明一下。
首先这2个目前对文档OCR提取都很强,准确性这块各有优劣,准确性这块我这里也不做过多评价。目前对于普通文档解析来说,这2个工具解析准确性都可以(至少本次测试的文档准确性要求不高,是没有问题的)。这里我们考虑一下效率这块。目前测试下来。合合速度是快于免费的MinerU的,大概是2倍的速度。
执行效率对比-合合,合合通用文件解析时间花费在8.5秒
执行效率对比-MinerU,MinerU文件解析时间花费在15秒
后面大模型这块需要将markdown文件转成svg 代码这块消耗时间会比较长。大家根据自己的需求选择。
生成 SVG海报设计专家
接下来我们使用llm文本大模型来实现返回markdown文件转成svg 代码
这里我们使用google gemini2.5-flash-preview-05-20模型。
提示词如下
# Role: SVG海报设计专家
## Profile
- Author: 周辉
- Version:1.0
- Language: 中文
- Description: 我是一位专业的平面设计师和SVG技术专家,擅长将结构化的商业演示文稿(PPT)内容,提炼并转化为专业、信息丰富且视觉美观的多页A4宣传海报。我能够直接输出高质量、可直接使用的SVG代码。
## Skills
1. **内容提炼与结构化**: 深度理解用户提供的PPT文字内容[1],精准捕捉并梳理其核心逻辑,如:客户痛点、产品优势、解决方案、应用场景等。
2. **视觉与布局设计**:
- 根据内容进行专业的视觉布局,设计符合商业场景的、多页A4尺寸海报。
- 确保信息层次分明,使用标题、副标题、正文、列表等元素,实现良好的可读性。
- 采用统一的商务色调(如蓝、灰、白),营造专业、稳重的视觉风格。
3. **SVG代码生成**:
- 精通SVG语法,能够生成结构清晰、代码简洁且符合W3C标准的SVG代码。
- 代码中应包含字体、颜色、尺寸等样式定义,方便后续修改和维护。
- 能够将多页内容分别生成为独立的、完整的SVG代码块[previous_conversation]。
4. **图标设计与嵌入**: 能够根据场景内容(如“安全”、“数据”、“权限”),智能设计并嵌入简洁、表意明确的SVG路径图标,提升海报的视觉表现力。
5. **迭代与定制**: 支持根据用户的具体要求进行迭代修改,例如更新联系方式、调整某个模块的布局或文案。
## Rules
1. **最终产出**: 最终交付物**必须**是完整的、可以直接保存为 `.svg` 文件的代码块。
2. **禁止额外解释**: 除了SVG代码本身,不要生成任何额外的解释、前言或总结性文字。
3. **严格遵循标准**:
- 严格遵循A4纸张尺寸(`width="210mm" height="297mm"`)和对应的 `viewBox` 比例。
- 字体应使用通用、跨平台的安全字体(如 `Arial, 'Hiragino Sans GB', 'Microsoft YaHei', sans-serif`)。
4. **分页处理**: 若内容需要多页展示,**必须**为每一页生成一个独立的、完整的SVG代码块,并明确标注页码,如在代码注释或标题中注明“第1页”、“第2页”[previous_conversation]。
5. **保持角色**: 始终以专业设计师的身份进行沟通和创作,确保产出物的专业性。
## Workflow
1. **接收需求**: 首先,我会请用户提供PPT的核心文字内容[1]。用户可以分点、分段或直接粘贴相关页面的文本。
2. **信息确认**: 如果信息不足或不清晰,我会主动提问以确认设计要点,例如:
- "海报的核心目标是什么?(是突出痛点,还是展示应用场景?)"
- "是否有特定的品牌色调或Logo需要整合?"
- "最终需要生成几页海报?"
3. **设计与生成**:
- **第一步**: 根据提炼的信息,进行整体构思和布局设计。
- **第二步**: 生成第一页(通常是痛点与核心优势)的SVG代码。
- **第三步**: 按顺序生成后续页面(如应用场景、联系方式)的SVG代码。
4. **交付与反馈**: 交付所有页面的SVG代码,并等待用户的反馈。如果用户提出修改意见,我将基于`Skills-5`进行快速迭代。
## Initialization
作为一名<Role>,我将严格遵守<Rules>,并使用默认的<Language>与您交流。现在,请开始吧。
你好,我是您的专属SVG海报设计专家。请将您的PPT核心内容或关键要点告诉我,我将为您把它转换成专业、精美的SVG宣传海报。您可以指定海报的页数、风格和需要突出的信息,让我们即刻开始创作!
用户提示词
请根据这个{{#1750553534724.text#}}帮我生成一个宣传海报,1-2页A4纸张内容覆盖内容即可,可以使用SVG方式生成
直接回复
直接回复比较简单的直接返回LLM大语言模型输出即可。 目前dify是支持svg直接返回输出的。
由于AI 模型能力的差异可能会导致SVG生成的代码显示不全的问题。这里大家也可以把生成的SVG代码复制到专门的
https://www.svgviewer.dev/ 网站测试
把上面SVG代码贴到https://www.svgviewer.dev/ 网站中
大家对上面的AI生成的代码不满意 也可以修改SVG代码。
好了通过以上步骤我们就完成了dify工作流的搭建了。
补充知识
目前我们借助大模型能力实现markdown转SVG,不过我测试下来,目前这个方案有一个比较大的弊端就是依赖模型的能力。目前我测试下来国内模型效果都不好,比较好的模型是google gemini2.5pro-06-05 和 claude-sonnet-4-20250514,其中最好的是 claude-opus-4-20250514。下面给一张表格
模型 | 效果 | 价格 | 综合 |
---|---|---|---|
claude-opus-4-20250514 | ***** | 死贵 | ** |
claude-sonnet-4-20250514 | **** | 稍贵 | **** |
google gemini2.5-flash-preview-05-20 | *** | 免费 | *** |
google gemini2.5pro-06-05 | **** | 一般 | **** |
3.验证及测试
我们制作好的工作流可以在工作流平台上验证测试一下,点击左上角“预览”按钮。点击上传PDF
运行完成后就可以看到生成2页SVG了。
体验地址
MinerU版工作流地址:https://dify.duckcloud.fun/chat/Qo3C2jeCLSBsXrec
合合版工作流地址:
https://dify.duckcloud.fun/chat/dHkqgtU2KNrNj1xp
4.总结
今天主要带大家了解并实现了使用 Dify 搭建演示设计师 SVG 海报生成工作流的方案。此工作流旨在利用大模型将原始材料(如 PPT、PDF、Word 等)自动转换为 SVG 格式的海报,提高海报制作的效率,同时保留源文档的内容和格式。该方案不仅解决了传统海报制作过程中沟通成本高、效果难以把控的问题,还能生成对应的 HTML 代码,方便后续前端工程师进行使用。
感兴趣的小伙伴可以按照本文步骤去尝试搭建自己的演示设计师 SVG 海报生成工作流。
如何学习AI大模型 ?
“最先掌握AI的人,将会比较晚掌握AI的人有竞争优势”。
这句话,放在计算机、互联网、移动互联网的开局时期,都是一样的道理。
我在一线互联网企业工作十余年里,指导过不少同行后辈。帮助很多人得到了学习和成长。
我意识到有很多经验和知识值得分享给大家,故此将并将重要的AI大模型资料包括AI大模型入门学习思维导图、精品AI大模型学习书籍手册、视频教程、实战学习等录播视频免费分享出来。【保证100%免费】🆓
CSDN粉丝独家福利
这份完整版的 AI 大模型学习资料已经上传CSDN,朋友们如果需要可以扫描下方二维码&点击下方CSDN官方认证链接免费领取 【保证100%免费】
读者福利: 👉👉CSDN大礼包:《最新AI大模型学习资源包》免费分享 👈👈
对于0基础小白入门:
如果你是零基础小白,想快速入门大模型是可以考虑的。
一方面是学习时间相对较短,学习内容更全面更集中。
二方面是可以根据这些资料规划好学习计划和方向。
👉1.大模型入门学习思维导图👈
要学习一门新的技术,作为新手一定要先学习成长路线图,方向不对,努力白费。
对于从来没有接触过AI大模型的同学,我们帮你准备了详细的学习成长路线图&学习规划。可以说是最科学最系统的学习路线,大家跟着这个大的方向学习准没问题。(全套教程文末领取哈)
👉2.AGI大模型配套视频👈
很多朋友都不喜欢晦涩的文字,我也为大家准备了视频教程,每个章节都是当前板块的精华浓缩。
👉3.大模型实际应用报告合集👈
这套包含640份报告的合集,涵盖了AI大模型的理论研究、技术实现、行业应用等多个方面。无论您是科研人员、工程师,还是对AI大模型感兴趣的爱好者,这套报告合集都将为您提供宝贵的信息和启示。(全套教程文末领取哈)
👉4.大模型实战项目&项目源码👈
光学理论是没用的,要学会跟着一起做,要动手实操,才能将自己的所学运用到实际当中去,这时候可以搞点实战项目来学习。(全套教程文末领取哈)
👉5.大模型经典学习电子书👈
随着人工智能技术的飞速发展,AI大模型已经成为了当今科技领域的一大热点。这些大型预训练模型,如GPT-3、BERT、XLNet等,以其强大的语言理解和生成能力,正在改变我们对人工智能的认识。 那以下这些PDF籍就是非常不错的学习资源。(全套教程文末领取哈)
👉6.大模型面试题&答案👈
截至目前大模型已经超过200个,在大模型纵横的时代,不仅大模型技术越来越卷,就连大模型相关的岗位和面试也开始越来越卷了。为了让大家更容易上车大模型算法赛道,我总结了大模型常考的面试题。(全套教程文末领取哈)
为什么分享这些资料?
只要你是真心想学AI大模型,我这份资料就可以无偿分享给你学习,我国在这方面的相关人才比较紧缺,大模型行业确实也需要更多的有志之士加入进来,我也真心希望帮助大家学好这门技术,如果日后有什么学习上的问题,欢迎找我交流,有技术上面的问题,我是很愿意去帮助大家的!
这些资料真的有用吗?
这份资料由我和鲁为民博士共同整理,鲁为民博士先后获得了北京清华大学学士和美国加州理工学院博士学位,在包括IEEE Transactions等学术期刊和诸多国际会议上发表了超过50篇学术论文、取得了多项美国和中国发明专利,同时还斩获了吴文俊人工智能科学技术奖。目前我正在和鲁博士共同进行人工智能的研究。
资料内容涵盖了从入门到进阶的各类视频教程和实战项目,无论你是小白还是有些技术基础的,这份资料都绝对能帮助你提升薪资待遇,转行大模型岗位。
CSDN粉丝独家福利
这份完整版的 AI 大模型学习资料已经上传CSDN,朋友们如果需要可以扫描下方二维码&点击下方CSDN官方认证链接免费领取 【保证100%免费】
读者福利: 👉👉CSDN大礼包:《最新AI大模型学习资源包》免费分享 👈👈