1.前言
《长安的荔枝》以天宝年间的历史动荡为底色，借“运荔枝”这一微观事件，串联起官场腐败、民生疾苦与小人物抗争的宏大叙事。其金句兼具文学感染力与现实启发性，既刻画了李善德“向死而生”的勇气，也揭示了权力游戏的残酷法则，成为观众热议的焦点。
电视剧《长安的荔枝》2025年6月7日19:30 在 CCTV-8黄金档 首播，并在 腾讯视频 同步上线。目前该电视剧已经全部播出。从该小书书里面找到比较经典的语句。
我们从金句里面也能找到比较有意思的故事和内容。今天我们就带大家做一个工作流实现一个经典语句生成一个精美的html页面来。
下面是工作流的截图：
生成的效果如下：
看起来不错，那么这样的页面是如何制作出来的呢？下面就带大家手把手制作这个工作流。
2.工作流制作
这个工作流主要有哪些组成部分构成的呢？我们通过上面的截图就可以看出它主要有开始节点、Agent、LLM大语言模型、代码执行、直接回复组成。
开始
这个开始节点我们这里就没有设置用户定义的提示词，就用sys.query的提示词。配置内容如下：
Agent
这个Agent 这里我们用到Agent 策略插件。这个插件我们需要在插件市场找到。
选择上面截图中的MCP Agent策略安装。安装完成后我们可以在已安装的插件列表中查询到。
策略这里我们选择MCP FunctionCalling
模型这里我们选择智普的glm-4-flash (选择它主要是免费，第二个速度快)
MCP-SSE的工具列表我们选择
工具列表中我们把2个工具都选上
MCP 服务器地址，这个地址我们填写智普联网搜索的mcp-see地址
https://open.bigmodel.cn/api/mcp/web_search/sse?Authorization=你智普APIkey指令
请根据用户输入{{#sys.query#}}调用web_search实现联网搜索查询查询
sys.query
LLM大语言模型
这个LLM大语言模型这块作用是将前面的Agent联网搜到的金句使用大语言模型生成精美的HTML 页面。
模型这里我们使用火山引擎的豆包模型（doubao-seed-1.6）
目前火山引擎协作奖励计划送免费token,大家可以免费用起来
系统提示词
你是一位专业的HTML动态网页提示词专家，能够根据给定的内容和设计要求生成高质量的HTML代码。你需要根据用户提供的内容和设计要求，生成符合规范的HTML代码，确保代码具有良好的结构、性能和可维护性，准确实现用户描述的视觉效果和交互体验。以下是你需要展示在网页中的具体内容：<content>{{CONTENT}}</content>这里是额外的设计要求：<design_requirements>{{DESIGN_REQUIREMENTS}}</design_requirements>在生成HTML代码时，请遵循以下步骤和要求：1. 分析上述内容和设计要求。2. 规划网页结构和布局，严格按照Bento Grid风格设计布局。3. 编写HTML结构代码。4. 集成TailwindCSS 3.0+样式，使用纯黑色背景和亮橙色作为主要配色。5. 运用大小字体对比突出核心要点，中英文混用，中文使用大字体粗体，英文小字作为点缀。6. 使用简洁的勾线图形作为数据可视化或配图元素。7. 应用高亮色自身的透明度渐变制造科技感。8. 实现类似Apple官网的滚动动效。9. 集成在线图表组件，确保样式与主题一致。10. 使用Framer Motion实现动画效果。11. 集成专业图标库如Font Awesome或Material Icons。12. 优化代码结构和性能。最后，请输出完整的HTML代码，不包含其他解释或评论，不使用emoji作为主要图标，确保所有外部资源（如CSS和JavaScript库）通过CDN引入。输出格式如下：```html<!DOCTYPE html><html lang="zh-CN"><head> <!-- 元信息和资源引入 --></head><body> <!-- 页面内容 --> <script> // JavaScript代码 </script></body></html>```用户提示词
请根据用户输入的信息{{#1750772708073.text#}}生成HTML代码代码处理
客户端代码，这里我们使用我自己搭建的服务端代码来实现html页面的生成的。 有的小伙伴可能会问了。怎么不用腾讯的EdgeOne Pages 实现静态HTML 部署呢？ 这里我们使用大模型部署MCP 主要是慢。我们上面的节点用了doubao-seed-1.6 是一个推理模型生成的代码比较慢，这里为了节约时间就用代码直接生成处理了。这个处理代码生成大概在1秒就可以完成，如果用大模型至少要10秒以上时间。
输入参数 json_html 输入值 上个LLM大模型输出
apikey 和apiurl 是我们定义的远程调用服务端代码的apikey 和apiurl
我们在环境变量里面设置
apiurl：http://14.103.204.132:8080/generate-html/
apikey：sk-zhouhuixxx
这个有小伙伴问过 这个apikey从哪来的，这个是我们服务端代码自己定义的。
关于服务端代码部署发布和使用可以看我之前的文章dify案例分享-探秘：AI 怎样颠覆财报分析，打造酷炫 HTML 可视化
重点看代码处理生成html调用 这部分
服务端代码可以从我开源项目中github.com/wwwzhouhui/… 获取
客户端代码如下
import jsonimport reimport timeimport requestsdef main(json_html: str, apikey: str,apiurl: str) -> dict: try: # 去除输入字符串中的 ```html 和 ``` 标记 match = re.search(r'```html\s*([\s\S]*?)```', json_html, re.DOTALL) if match: # group(1) 获取第一个捕获组的内容，即纯HTML代码 # .strip() 去除可能存在的前后空白 html_content = match.group(1).strip() else: # 如果在输入中找不到HTML代码块，则返回错误 raise ValueError("未能在输入中找到 ```html ... ``` 代码块。") # 生成时间戳，确保文件名唯一 timestamp = int(time.time()) filename = f"makehtml_{timestamp}.html" # API端点（假设本地运行） url = f"{apiurl}" # 请求数据 payload = { "html_content": html_content, "filename": filename # 使用传入的文件名 } # 设置请求头（包含认证token） headers = { "Authorization": f"Bearer {apikey}", # 替换为实际的认证token "Content-Type": "application/json" } try: # 发送POST请求 response = requests.post(url, json=payload, headers=headers) # 检查响应状态 if response.status_code == 200: result = response.json() html_url = result.get("html_url", "") generated_filename = result.get("filename", "") # 返回结果 return { "html_url": html_url, "filename": generated_filename, "markdown_result": f"[点击查看]({html_url})" } else: raise Exception(f"HTTP Error: {response.status_code}, Message: {response.text}") except requests.exceptions.RequestException as e: raise Exception(f"Request failed: {str(e)}") except Exception as e: return { "error": f"Error: {str(e)}" }输入变量 我这里设置三个html_url、filename、markdown_result 返回的变量类型是string
直接回复
这个直接回复我们这里输出2个值，一个是agent搜索返回的金句，一个是代码执行返回的URL ，一个是URL markdown地址
以上我们就完成了工作流的制作。
3.验证及测试
我们打开工作流预览按钮。聊天窗口中输入如下提示词
长安的荔枝电视剧5个金句工作流执行完成后我们看到生成的HTML 页面链接
我们点击查看，现在链接。
保存本地打开。
这样我们就可以看到比较好看的金句了。当然你也可以搜素其他语句的金句。
体验地址difyhs.duckcloud.fun/chat/3UnDio…
备用地址（http://14.103.204.132/chat/3UnDior2eU0ehrTl）
4.总结
今天主要带大家了解并实现了使用 Dify 搭建从《长安的荔枝》电视剧搜索金句并生成精美 HTML 页面的工作流方案。此工作流借助 Agent 进行联网搜索获取金句，再通过 LLM 大语言模型将金句转化为符合特定设计要求的 HTML 代码，最后经过代码处理生成实际可用的 HTML 页面，大大提高了获取和展示经典语句的效率。
该方案不仅解决了手动制作 HTML 页面繁琐、耗时长的问题，还利用大模型和代码执行的组合，有效平衡了生成速度和效果质量。通过此工作流，我们能够轻松将搜索到的金句以美观、专业的 HTML 页面呈现出来。
感兴趣的小伙伴可以按照本文步骤去尝试搭建自己的金句搜索及 HTML 页面生成工作流。今天的分享就到这里结束了，我们下一篇文章见。
关注「 wwzhouhui」公众号，点赞分享这篇文章，后台私信：“dsl” 领取 dsl 工作流文件。
