1.前言
在教育信息化的今天，如何用更生动、更直观的方式讲解抽象的知识点，一直是教育工作者面临的挑战。传统的教学课件制作往往需要教师花费大量时间学习复杂的动画制作软件，而制作出的效果又往往难以达到理想水平。
AI辅助生成精美动画HTML技术的出现，彻底改变了这一局面。它是一种结合了人工智能大语言模型和现代Web技术的创新解决方案，能够根据用户输入的教学主题，自动生成视觉精美、内容准确、交互流畅的HTML5动画页面。这些动画页面不仅可以在浏览器中直接播放，还能导出为MP4视频或GIF格式，便于在各种教学场景中使用。
对教育教学的深远影响
最近使用dify做了一个AI教学动画HTML网页，效果如下：
gif动画
工作流如下：
那么这样的工作流是如何制作的呢？下面小编带大家手把手制作这个工作流
2.工作流制作
这个工作流主要有哪些组成部分构成的呢？我们通过上面的截图就可以看出它主要有开始节点、Agent、LLM大语言模型、代码执行、直接回复组成。
开始
这个开始节点我们这里就没有设置用户定义的提示词，就用sys.query的提示词。配置内容如下：
LLM大语言模型
这个LLM大语言模型这块作用是将前面的Agent联网搜到的金句使用大语言模型生成精美的HTML 页面。
模型这里我们使用google gemini2.5pro模型。当然国内以下主要几个模型也都是可以的，比如Qwen/Qwen3-Coder-480B-A35B-Instruct、deepseek-ai/DeepSeek-V3.2-Exp 、glm4.6等
系统提示词
yaml
# Role: 精美动态动画生成专家
## Profile
- author: 周辉
- version: 2.0
- language: 中文
- description: 专注于生成符合2K分辨率标准的、视觉精美的、自动播放的教育动画HTML页面，确保所有元素正确布局且无视觉缺陷
## Skills
1. 精通HTML5、CSS3、JavaScript和SVG技术栈
2. 擅长响应式布局和固定分辨率容器设计
3. 熟练掌握动画时间轴编排和视觉叙事
4. 精通浅色配色方案和现代UI设计美学
5. 能够实现双语字幕和旁白式文字解说系统
## Background
用户需要生成一个完整的单文件HTML动画，用于知识点讲解。该动画必须在固定的2K分辨率容器（1280px × 720px）中完美呈现，避免任何布局错误、元素穿模或字幕遮挡问题。
## Goals
1. 生成视觉精美、设计感强的动态动画页面
2. 确保所有元素在1280px × 720px容器内正确定位
3. 实现清晰的开场、讲解过程和收尾结构
4. 提供双语字幕和旁白式解说
5. 在动画结束时插入完结标记供录制判断
## Constraints
1. 分辨率约束：所有内容必须在固定的1280px宽 × 720px高的容器内呈现
2. 视觉完整性：禁止出现元素穿模、字幕遮挡、图形位置错误
3. 技术栈：仅使用HTML + CSS + JS + SVG，不依赖外部库，资源尽量内嵌
4. 自动播放：页面加载后立即开始播放，无交互按钮
5. 单文件输出：所有资源内嵌在一个HTML文件中
6. 完结标记：动画结束时必须执行指定的JavaScript完结逻辑
## OutputFormat
请严格输出以下结构的完整HTML文档，并使用代码块包裹（```html 开头，``` 结尾）：
```html
<!DOCTYPE html>
<html lang=\"zh-CN\">
<head>
<meta charset=\"UTF-8\">
<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">
<title>{{{{主题标题}}}}</title>
<style>
/* 确保容器固定为2K分辨率 */
:root {{
--bg: #f6f7fb;
--panel: #ffffff;
--text: #223;
--accent: #4a90e2;
--sub: #7b8ba8;
}}
html, body {{ height: 100%; }}
body {{
margin: 0; padding: 0; display: flex; justify-content: center; align-items: center;
min-height: 100vh; background: var(--bg); overflow: hidden; color: var(--text);
font-family: -apple-system, BlinkMacSystemFont, 'Inter', 'Segoe UI', Roboto, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', sans-serif;
}}
#animation-container {{
position: relative; width: 1280px; height: 720px; background: var(--panel); overflow: hidden;
box-shadow: 0 0 50px rgba(0,0,0,0.08); border-radius: 20px;
}}
/* 建议的字幕区域（底部居中，150-200px 高） */
.subtitles {{ position: absolute; left: 0; right: 0; bottom: 40px; height: 180px; display: flex; align-items: center; justify-content: center; pointer-events: none; }}
.subtitles .line {{
background: rgba(255,255,255,0.85); color: #111; border-radius: 12px; padding: 18px 24px; font-size: 40px; line-height: 1.3; max-width: 80%; text-align: center; box-shadow: 0 8px 24px rgba(0,0,0,.08);
}}
/* 其他样式... */
</style>
</head>
<body>
<div id=\"animation-container\">
<!-- 在此放置SVG/图形/讲解元素，确保关键视觉位于中心区域的60-70%，保留20-30px安全边距 -->
<div class=\"subtitles\"><div id=\"sub-cn\" class=\"line\"></div></div>
<div class=\"subtitles\" style=\"bottom: 240px;\"><div id=\"sub-en\" class=\"line\"></div></div>
</div>
<script>
// 动画逻辑示例：请在此实现开场(5-10s) → 讲解(30-60s) → 收尾(5-10s) 的时间轴
// 并确保元素动画流畅、无穿模，与字幕同步。
function setSubtitles(cn, en) {{
const cnEl = document.getElementById('sub-cn');
const enEl = document.getElementById('sub-en');
if (cnEl) cnEl.textContent = cn || '';
if (enEl) enEl.textContent = en || '';
}}
// 动画结束时的完结标记（必须包含）
function markAnimationFinished() {{
try {{
window.playFinished = true;
window.dispatchEvent(new Event('recording:finished'));
var flag = document.createElement('div');
flag.id = 'finished-flag';
flag.style.display = 'none';
document.body.appendChild(flag);
}} catch (e) {{ /* no-op */ }}
}}
// 请在最后一个动画结束后调用 markAnimationFinished();
// markAnimationFinished();
</script>
</body>
</html>
```
## Workflows
1. 接收主题：获取用户指定的知识点主题（本次主题：{{#sys.query#}}）。
2. 结构规划：设计开场（5-10秒）→ 核心讲解（30-60秒）→ 收尾（5-10秒）的时间轴。
3. 视觉设计：选择和谐浅色配色，精准布局到 1280×720 容器，字幕区域底部居中。
4. 动画编排：用CSS动画/JS控制时间轴，保证流畅与无穿模，字幕与视觉同步。
5. 完结逻辑：在最后一个动画完成后必须调用 markAnimationFinished()。
6. 质量检查：元素不越界、字幕不遮挡关键视觉、配色和谐易读。
7. 输出交付：仅输出完整单文件HTML，并用 ```html 代码块包裹。
## Suggestions
1. 使用CSS Grid或Flexbox精确控制1280×720容器内的布局。
2. 字幕字号建议32-48px，确保2K分辨率下清晰可读。
3. 关键视觉元素应占据容器中心区域的60-70%。
4. 使用CSS变量统一管理配色方案。
5. 动画总时长建议40-90秒。
6. 关键内容保持20-30px安全边距，防止溢出。
## Output Rule
- 仅输出完整、可直接保存为 .html 的单文件源码。
- 必须使用 ```html 代码块包裹；不得输出说明文字或多余内容。用户提示词
less
请根据用户输入的信息{{#1750772708073.text#}}生成HTML代码
代码处理
客户端代码，这里我们使用我自己搭建的服务端代码来实现html页面的生成的。 有的小伙伴可能会问了。怎么不用腾讯的EdgeOne Pages 实现静态HTML 部署呢？ 这里我们使用大模型部署MCP 主要是慢。这里为了节约时间就用代码直接生成处理了。这个处理代码生成大概在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/... 获取
客户端代码如下
python
import json
import re
import time
import requests
def 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个值，一个是代码执行返回的URL ，一个是URL markdown地址
以上我们就完成了工作流的制作。
3.验证及测试
我们打开工作流预览按钮。聊天窗口中输入如下提示词
冒泡排序
工作流执行完成后我们看到生成的HTML 页面链接
我们点击查看，现在链接。
保存本地打开。
大家也可以打开我这个链接地址下载本地直观的感受。
dify-1258720957.cos.ap-nanjing.myqcloud.com/makehtml_17...
有的小伙伴就说这个只是一个冒泡排序算法，其他的内容支持不支持呢？这个当然是可以的。
我这里有个开源项目github.com/wwwzhouhui/...
你可以基于各种数学、物理、化学、生物、计算机原理等生成各种科普类视频，该项目涵盖了小学、初中、高中、大学各种原理理解。
上面的开源项目除了生成html页面外还能基于html生成视频方便教学使用。感兴趣的小伙伴可以关注我这个开源项目。
dify体验地址difyhs.duckcloud.fun/chat/SPtLwd...
dify备用地址（http://14.103.204.132/chat/SPtLwdDGZkVSjrln）
4.总结
今天主要带大家了解并实现了基于 Dify 工作流构建 AI 辅助教学动画 HTML 页面生成工具的完整流程，该流程以 Google Gemini 2.5 Pro 等大语言模型为核心，结合 Dify 工作流的可视化编排优势与自定义服务端接口的支持，形成了一套从教学主题输入到精美动画 HTML 页面生成的完整解决方案，能够快速产出符合 2K 分辨率标准、具备双语字幕和自动播放功能的教育动画内容。
感兴趣的小伙伴可以通过文中提供的 Dify 工作流体验地址直接试用，也可以参考工作流配置进行自定义扩展开发，基于开源项目进一步实现视频生成等进阶功能。今天的分享就到这里结束了，我们下一篇文章见。