68-dify实战指南-基于Agent+LLM快速构建《长安的荔枝》金句可视化工作流

1. 从《长安的荔枝》金句到可视化页面的技术实现最近在追《长安的荔枝》的朋友们肯定对剧中那些戳中内心的金句印象深刻。比如一骑红尘妃子笑无人知是荔枝来这样的经典台词不仅道出了小人物的辛酸也展现了历史的厚重感。作为一名技术爱好者我一直在想能不能用AI技术把这些金句自动变成精美的网页经过几天的摸索终于用Dify平台搭建出了一个完整的工作流今天就把这个实战经验分享给大家。这个工作流的核心理念很简单让AI帮你完成从金句搜索到网页生成的全过程。想象一下你只需要输入一个关键词比如长安的荔枝金句系统就会自动完成以下步骤联网搜索相关金句 → 用大模型生成HTML代码 → 部署成可访问的网页。整个过程完全自动化不需要你写一行代码最终生成的页面还特别有设计感 - 黑色背景搭配亮橙色文字字体大小错落有致还有动态滚动效果。2. 工作流核心组件解析2.1 Agent联网搜索模块这个工作流的第一个关键组件是Agent联网搜索。我选择了智谱的MCP Agent策略插件主要看中它的两个优势一是支持中文搜索效果很好二是免费额度足够个人使用。配置时需要注意几个细节在Dify插件市场找到MCP Agent策略并安装服务器地址要填写智谱的API端点格式为https://open.bigmodel.cn/api/mcp/web_search/sse?Authorization你的API_KEY工具列表建议全选这样可以获得更全面的搜索结果指令模板设置为请根据用户输入{{#sys.query#}}调用web_search实现联网搜索查询实测下来这个配置对中文金句的搜索准确率很高。比如输入长安的荔枝 经典台词能返回5-10条高质量结果包括剧中的原句和网友的热评。2.2 LLM生成HTML代码搜索到的金句还是纯文本怎么变成漂亮的网页这就需要大语言模型的转换能力了。我测试了几个主流模型最终选择了火山引擎的豆包模型doubao-seed-1.6原因有三免费额度充足新用户注册就送100万token对中文HTML代码生成特别友好响应速度较快平均3-5秒就能返回结果关键是要设计好系统提示词。经过多次调试我总结出这样一个模板你是一位专业的HTML动态网页提示词专家需要根据给定内容生成符合Bento Grid风格的网页代码。具体要求 1. 使用TailwindCSS 3.0框架 2. 主色调纯黑背景亮橙色文字 3. 字体对比中文大号粗体英文小号点缀 4. 添加Framer Motion动画效果 5. 集成Font Awesome图标库 6. 实现Apple官网式滚动特效这个提示词确保了生成的HTML既美观又规范。比如处理一骑红尘妃子笑这句时模型会自动添加渐变高光效果并用小字号英文标注出处视觉效果非常专业。3. 代码执行与页面部署3.1 服务端代码处理大模型生成的HTML代码还需要最后一步处理才能真正变成网页。这里我写了一个Python服务端脚本主要功能是接收前端传来的HTML代码生成唯一文件名带时间戳将文件保存到指定目录返回可访问的URL地址核心代码如下from fastapi import FastAPI, HTTPException import uuid import os app FastAPI() app.post(/generate-html/) async def generate_html(data: dict): html_content data.get(html_content) if not html_content: raise HTTPException(status_code400, detail缺少HTML内容) filename foutput_{uuid.uuid4().hex[:8]}.html with open(fstatic/{filename}, w, encodingutf-8) as f: f.write(html_content) return { html_url: fhttps://your-domain.com/{filename}, filename: filename }这个服务可以部署在任何支持Python的服务器上我用的是腾讯云的轻量应用服务器月费不到50元。3.2 客户端调用实现在Dify工作流中通过代码执行节点调用上述服务。这里有个小技巧为了提高速度我直接在节点中写死了API地址和密钥当然正式环境建议用环境变量。关键参数配置如下输入参数json_html接收LLM输出的HTML代码API地址http://your-server-ip:8080/generate-html/认证密钥sk-your-api-key-here实测从输入关键词到获得可访问的网页链接整个流程平均耗时8-12秒完全可以接受。4. 完整工作流搭建指南4.1 节点连接顺序整个工作流的节点连接有严格顺序错了就会报错。正确的连接方式是开始节点 → Agent搜索Agent → LLM生成HTMLLLM → 代码执行代码执行 → 直接回复特别要注意的是变量传递。比如LLM节点的输出变量名是text那么代码执行节点的输入就要配置为{{#1750772708073.text#}}你的节点ID可能不同。4.2 测试与调试技巧工作流搭建完成后建议用这些关键词测试长安的荔枝 经典台词李善德 名言一骑红尘妃子笑 全诗如果遇到问题可以重点检查Agent的API密钥是否有效LLM的系统提示词是否完整代码执行节点的输入输出变量名是否匹配我踩过的一个坑是LLM有时会返回带Markdown标记的代码html...需要在服务端用正则表达式提取纯HTML内容。解决方法是在Python代码中添加import re clean_html re.sub(rhtml|, , raw_html).strip()5. 效果优化与扩展思路5.1 视觉设计进阶想让生成的页面更惊艳可以尝试这些进阶技巧背景动画在HTML中添加粒子效果script srchttps://cdn.jsdelivr.net/npm/particles.js2.0.0/particles.min.js/script字体升级使用思源黑体等更优雅的中文字体import url(https://fonts.googleapis.com/css2?familyNotoSansSC:wght400;700displayswap);交互增强添加点击复制功能document.querySelector(.quote).addEventListener(click, () { navigator.clipboard.writeText(this.innerText); });5.2 工作流扩展应用这个框架不仅能处理《长安的荔枝》稍作修改就能支持其他影视作品修改Agent的搜索关键词即可名人名言比如搜索鲁迅名言也能生成精美页面自定义内容直接输入文本代替搜索结果最近我还尝试接入了Stable Diffusion让模型能自动生成配图。比如搜索长安的荔枝 场景不仅能返回台词还会生成对应的古风插画效果非常震撼。